// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
/**
 * Snap core swatch.
 *
 * @package   theme_snap
 * @copyright Copyright (c) 2015 Blackboard Inc. (http://www.blackboard.com)
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
// overwrite some global CSS from a turnitin mod
// see https://github.com/jmcgettrick/MoodleDirectV2/issues/50

/* stylelint-disable declaration-no-important*/

html {
    -webkit-font-smoothing: auto !important;
    font-size: 18px;
}

#moodle-page {
    font-size: 1.1rem;
}

// Snap Layout yo...
// -------------------------
// SHAME -  all that fun moodle reset css
// -------------------------
// hide that classic 1px & some other fun moodle stuff

img.spacer,
.noavailable,
.clearfloat,
.noicon {
    display: none;
}

#notice,
.section.img-text,
.boxwidthwide,
.boxwidthnormal,
.course-content ul.topics li.section .content,
.course-content ul.topics li.section .summary,
.site-topic ul.section,
.course-content ul.section,
.path-mod-choice .horizontal,
.path-mod-choice .vertical,
.path-mod-choice .anonymous,
.path-mod-choice .names,
.path-mod-choice .results.anonymous .graph.horizontal,
.block_course_overview .content,
.block .header .title h2,
.block .content,
.coursebox .content .coursecat,
.coursebox .content .summary,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .teachers,
.coursebox.remotecoursebox .remotecourseinfo,
.section .activity .availabilityinfo,
.section .activity .contentafterlink,
.course-content ul.topics li.section .content,
.course-content ul.weeks li.section .content,
#page-course-index-category .generalbox.info,
.loginbox.onecolumn,
.loginbox,
#page-report-outline-user .section,
.path-admin #assignrole {
    max-width: 100%;
    min-width: 0;
    width: auto;
    padding: 0;
    margin: 0 auto;
}

.section.img-text {
    @include clearfix;
}

// Override the above for tables.
table.boxwidthnormal,
table.boxwidthwide {
    width: 100%;
}

// Undo .well styles
.loginbox,
.loginbox.twocolumns .loginpanel,
.loginbox.onecolumn {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

// -------------------------
// Login & sign up page
// -------------------------

#page-login-index,
#page-login-signup {
    #region-main {
        max-width: 100%;
        padding: 0 4% 2em;
    }
    #moodle-footer {
        margin-top: 0;
    }
    // The login box.
    .snap-login {
        padding: 1em 4%;
        margin: 2em auto;
        max-width: 30rem;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        #password {
            margin-top: 1em;
        }
    }
    // The site name.
    .snap-logo-sitename {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 1em 0;
        margin-bottom: 0.5em;
    }
}
#page-login-signup {

    .collapsible-actions,
    .ftoggler {
        display: none;
    }
    // Inputs to full width.
    .mform .form-inline .form-control,
    .mform .form-inline .custom-select {
        width: 100%;
    }
    // Disable hiding of form.
    .jsenabled .mform .collapsed .fcontainer {
        display: block !important;
    }
}

// -------------------------
// Mixins me up
// -------------------------

@mixin alakazam {
    transition: all 0.4s ease-in-out;
}

@mixin bg-cover {
    background-position: center top;
    background-size: cover;
}
// Hide elements which require js to be loaded.
.js-only {
    @include alakazam;
}

body:not(.snap-js-loaded) .js-only {
    pointer-events: none;
    cursor: default;
    filter: grayscale(100%);
    opacity: 0.5;
}

// 100% of the screen.
.full-width {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

// 100% with standard snap 4% gutter.
.full-width-pad {
    @extend .full-width;
    padding: 0 4%;
}

// Animations.
@keyframes snap-drop {
    0% {
        transform: matrix(1, 0, 0, 1, 0, -600);
    }

    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@keyframes snap-rise {
    0% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }

    100% {
        transform: matrix(1, 0, 0, 1, 0, -600);
    }
}

// -------------------------
// Baseline boilerplate for snap
// -------------------------
body {
    font-weight: 400;
}

a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

::-moz-selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}

// scrollbars in ie
body.ie {
    -ms-overflow-style: scrollbar;
}

label {
    font-weight: 500;
}

select {
    background-color: #fff;
    max-width: 100%;
}

select:disabled,
input:disabled,
input:disabled + label {
    opacity: 0.5;
}

:disabled {
    cursor: not-allowed;
}

textarea {
    max-width: 100%;
}

small,
.small {
    font-size: $font-size-sm !important;
}

// GT Mod - 2015-07-09 - add .floater .cell to accommodate fixed col and header in gradebook
table,
.floater .cell {
    width: 100%;
    font-family: $font-family-system;
    font-size: $font-size-base;
}

.blockquote {
    border-left: .25rem solid #eceeef;
    border-left-color: $brand-primary;
    padding: .5rem 1rem;
}

.blockquote-reverse {
    border-right: .25rem solid #eceeef;
    border-right-color: $brand-primary;
    padding: .5rem 1rem;
}

blockquote {
    font-size: 1rem;
    @extend .blockquote;
}


img {
    max-width: 100%;
    height: auto;
}

// Stop images shrinking to nothing on Chrome
table img {
    min-width: 12px;
}

table.results td.graph > img {
    min-width: 0;
}

img[style*="float:left"],
img[style*="float: left"],
img[style*="float: right"],
img[style*="float:right"] {
    margin: 2%;
}

@include media-breakpoint-down(md) {

    // unfloat images for small screen
    img[style*="float:left"],
    img[style*="float: left"],
    img[style*="float: right"],
    img[style*="float:right"] {
        float: none !important;
        display: table-cell;
        clear: both;
    }
}

img.icon {
    padding: 0;
    margin-right: 6px;
}

img.iconlarge {
    height: 38px;
    width: 38px;
}

/* mdl hide stuff icon - hide in bs has different meaning*/
img.icon.hide {
    display: inline-block !important;
}

@mixin svg-icon {
    width: 2rem;
    height: 2rem;
    margin: 0 0.3rem;
    vertical-align: middle;
}

.svg-icon {
    @include svg-icon;
}

// Font awesome icons.
i.icon,
p.tree_item:before {
    color: #999;
}
p.tree_item.hasicon i.nav-missing-icon:before {
    content: '■'; // Where settings nav icon is missing use this.
}

.mediaplugin_videojs > div {
    max-width: none !important;
}

.media-responsive {
    width: 100%;
    display: block;
    position: relative;
    > *:not(video):first-child {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }
}

.media-responsive-pad {
    display: block;
}

// Responsive video for HTML5 only.
video {
    width: 100% !important;
    height: auto !important;
}

@mixin responsive-video() {
    width: 100%;
    max-width: $user-content-max-width;
    height: 240px;
    margin: 0 auto;
    display: block;
    clear: both;

    @include media-breakpoint-up(sm) {
        height: 360px;
    }
    @include media-breakpoint-up(md) {
        height: 480px;
    }
}

// Responsive video for iframes, objects, embeds.
iframe:not(.vjs-tech) {
    &[src*="youtube.com"],
    &[src*="youtu.be"],
    &[src*="vimeo.com"],
    &[src*="archive.org/embed"],
    &[src*="youtube-nocookie.com"],
    &[src*="embed.ted.com"],
    &[src*="embed-ssl.ted.com"],
    &[src*="kickstarter.com"],
    &[src*="video.html"],
    &[src*="simmons.tegrity.com"],
    &[src*="dailymotion.com"] {
        @include responsive-video();
    }
}

body.theme-snap .oembed-responsive {
    > :first-child:not(video),
    > .oembed-responsive-pad {
        @include responsive-video();
    }
}

li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

hr {
    height: 1px;
    margin: 2em 2%;
    border: 0;
}

.block .content hr {
    margin: .3em;
    height: 1px;
}

#page-header h1 {
    margin-top: 0;
    line-height: 1.2;
}

#region-main textarea {
    font-family: $font-family-serif;
}

// Roboto robot voice for system text
label,
.label,
.form-label,
.form-defaultinfo,
.form-description,
.form-filemanager,
.ffilepicker,
.ffilemanager,
.fdescription,
.fstatic,
.collapsible-actions,
input,
button,
select,
.pagination,
.initialbar,
.paging,
.alert,
.nav-pills,
.nav-tabs,
.course-report-dashboard,
.yui3-tabview-list,
.yuimenu,
#course-category-listings,
.progress .bar,
.progress-bar,
.yui-dt-paginator {
    font-family: $font-family-sans-serif;
}

@include media-breakpoint-up(md) {
    .nav.nav-justified > li > a {
        padding-left: 0;
        padding-right: 0;
        white-space: nowrap;
    }
}

.path-grade ul.nav.nav-tabs + ul.nav.nav-tabs {

    // Fix for tabs that should be active but are marked
    // as disabled instead.

    li.disabled > a {
        &,
        &:hover,
        &:focus {
            color: $nav-tabs-link-active-color;
            background-color: $nav-tabs-link-active-bg;
            border: 1px solid $nav-tabs-link-active-border-color;
            border-bottom-color: transparent;
            cursor: default;
        }
    }
    margin-bottom: 1em;
}

// -------------------------
// Buttons, faux buttons styling & resets
// -------------------------

select,
input,
textarea {
    max-width: 100%;
}

.button-group > button,
input.form-submit,
.atto_form button,
.gradingform_checklist.editor .addgroup input,
.gradingform_checklist.editor .additem input,
.gradingform_rubric.editor .addlevel input,
.gradingform_rubric.editor .addcriterion input,
.paging.paging-morelink a,
a.yui3-button,
.yui-button button,
#page-site-index .section-modchooser-link .section-modchooser-text {

    // Imitate btn.btn-secondary CSS for buttons without proper
    // Bootstrap classes applied to them.
    transition: all 0.4s ease-in-out;
    background: transparent;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    // Em's used to allow for small and large buttons.
    padding: .5em 1em;

    &:hover:not(:disabled),
    &:focus:not(:disabled),
    &:active:not(:disabled),
    &.active:not(:disabled) {

        text-decoration: none;
        color: #fff;
    }

    &:disabled {
        opacity: 0.65;
    }
}

.btn.btn-solid {
    &,
    &:active,
    &:focus {
        background: #fff;
    }
}

.button-group > button + button {
    margin-left: 1em;
}

#page-site-index .section-modchooser-link {
    clear: both;
    margin: 0;
    padding: 0.5em;
    display: block;
    border-color: white;

    img {
        display: none;
    }

    .section-modchooser-text {
        @extend .btn-outline-primary;
    }

    a,
    .section-modchooser-text {
        display: block;
        width: 100%;
        text-align: center;
        text-decoration: none;
    }
}

#page-report-competency-index .header-button-group {
    padding-top: 10px;
    padding-left: 5px;
}

#page-badges-award .recipienttable tr td.actions .actionbutton {
    font-family: $font-family-system;
    transition: all 0.4s ease-in-out;
    color: $brand-primary;
    border-color: $brand-primary;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    padding: .5em 1em;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: $brand-primary;
        color: #fff;
        border-color: $brand-primary;
        text-decoration: none;
    }
}

// -------------------------
// Snap theme helper classes
// -------------------------

.published-status {
    opacity: 0.75;
    font-size: $font-size-sm;
}

.userpicture,
.message_stream_user_picture_icon {
    border-radius: 50%;
}

.userpicture.defaultuserpic {
    border: 1px solid #e5e5e5;
}

// -------------------------
// Icons inserted as pseudo elements.
// -------------------------

.snap-icon-close:before {
    content: '';
    background: transparent url("[[pix:theme|close_x]]") no-repeat 50% 50%;
    display: block;
    height: 1em;
    width: 1em;
    margin: 0.1em auto;
}

.snap-icon-close:focus {
    text-decoration: underline !important;
}

// White close icon.
#snap-footer-alert,
#snap-pm {
    .snap-icon-close:before {
        background-image: url("[[pix:theme|close_x_white]]");
    }
}

.icon-arrow-left:before,
.icon-arrow-right:before {
    content: '';
    background: transparent url("[[pix:theme|right-arrow]]") no-repeat 50% 50%;
    display: block;
    height: 1em;
    width: 1em;
    margin: 0.1em auto;
}

.icon-arrow-left:before {
    background-image: url("[[pix:theme|left-arrow]]");
}

// -------------------------
// Snap theme elements n componants
// -------------------------

#page-header,
#page-login-index #page {
    @include bg-cover;
}

#page-header {
    overflow: hidden;
    min-height: 250px;
}

.snap-media-object {
    @include clearfix;
    font-weight: 500;
    padding: 0.5em 0;
    // Block display for keyboard user focus.
    > a:focus {
        display: block;
    }

    // media o media
    > a > img,
    > img {
        float: left;
        display: block;
        width: 36px;
        margin: .3em 1em 0 .3em;
        height: auto;
        vertical-align: baseline;
    }

    // media o content
    .snap-media-body {
        overflow: hidden;

        // for personal menu updates - need to re-visit when we re-use more widley
        // in the messaging system we ellispe text
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }

        .text_to_html {
            line-height: 1.3em;
        }

        a {
            &:hover,
            &:focus {
                text-decoration: underline;
            }
        }

        // Shrink label size to support iPads
        .label {
            font-size: small;
        }
    }

    // media o heading
    h3 {
        color: inherit;
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
    }

    // any meta-data that is part of the title
    h3 small {
        color: inherit;
        opacity: 0.9;
    }

    // standard media o meta - status, date
    .snap-media-meta {
        display: block;
        font-size: $font-size-sm;
        color: $gray-light;
    }

    // unread tag
    .snap-unread-marker {
        color: $brand-warning;
    }

}

// -------------------------
// Layout of moodle/snap DOM structure
// -------------------------
/***************
THE DOM LOOKS LIKE THIS :

body
nav #mr-nav
#page (for mdl js)
	#page-content (for mdl js)
		main #moodle-page
		header #page-header
		section #region-main
footer #moodle-footer

 ****************************/
#mr-nav,
#page-header,
#region-main,
#moodle-footer,
#moodle-blocks {
    margin: 0 auto;
    padding: 0 4%;
    font-size: 1em;
}

@media (max-width: 375px) {
    #mr-nav,
    #page-header,
    #region-main,
    #moodle-footer,
    #moodle-blocks {
        padding-left: 15px;
        padding-right: 15px;
    }
}

// -------------------------
// Mr.nav - he's there, fixed to the top of your page
// -------------------------

#mr-nav {
    position: fixed;
    width: 100vw;
    z-index: 23;
    padding: .5em 4%;
    background-color: $nav-bg;

    //headroom js http://wicky.nillia.ms/headroom.js/
    &.headroom--unpinned {
        will-change: transform;
        animation-name: snap-rise;
        animation-timing-function: ease-in-out;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    &.headroom--pinned {

        // firefox no like this animation :(
        /*
        animation-name: snap-drop;
        animation-timing-function: cubic-bezier(.694, .0482, .335, 1);
        animation-duration: 0.33s;
        */
    }

    .popover-region-notifications > div > .icon {
        color: $nav-color;

        &:hover {
            color: $nav-color-hover;
        }
    }

    a {
        color: $nav-color;

        &:hover,
        &:focus {
            color: $nav-color-hover;
        }
    }

    .popover-region-container a {
        color: $brand-primary;

        &:hover {
            color: darken($brand-primary, 8%);
        }
        &:focus {
            color: darken($brand-primary, 30%);
            text-decoration: underline;
        }
    }

    .snap-login-button {
        color: $nav-login-color;
        background-color: $nav-login-bg;
        border-color: $nav-login-bg;

        margin: 0 1rem;

        &:hover,
        &:focus {
            color: darken($nav-login-color, 8%);
            background-color: darken($nav-login-bg, 8%);
            border-color: darken($nav-login-bg, 8%);
        }

    }
}

#mr-nav #snap-pm-trigger {
    display: inline;
    border: none;
    position: relative; // Position to support message badge.
    padding-left: 1em; // Padding to support message badge.
    padding-right: 0.5em;
    padding-top: 1.2em;
    padding-bottom: 1.16em;
    margin-right: 0.5em;
    color: $nav-button-color;
    background-color: $nav-button-bg;

    .userpicture {
        width: 40px;
        height: auto;
        @include alakazam;
    }
    &:hover,
    &:focus {
        .userpicture {
            transform: scale(1.2);
        }
        color: darken($nav-button-color, 8%);
    }

    // Core alerts badge.
    .conversation_badge_count {
        height: 18px;
        width: 18px;
        border-radius: 50%;
        padding: 0;
        line-height: inherit;
        color: white;
        position: absolute;
        left: .33em; // Magic number.
        top: .6em; // Magic number.
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        &.hidden {
            display: none;
        }
    }
}

@include media-breakpoint-down(sm) {

    #mr-nav #snap-pm-trigger {
        padding-bottom: 1.36em;
    }
}

#snap-home {
    display: inline-block;
    padding: .5em 0;
    width: 19em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // If logo image.
    &.logo {
        display: inline-block;
        height: 45px;
        #snap-home.logo {
            max-width: 45%;
            @media (max-width: 414px) {
                .pull-right.js-only {
                    margin-top: 3em;
                }
            }
        }
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
    }
}

// Admin menu trigger.
#snap-admin-icon {
    @include alakazam;
    .snap-gear-icon {
        fill: none;
        stroke: currentColor;
        stroke-width: 5;
        stroke-miterlimit: 10;
    }
    // Animate and change colour.
    &:hover,
    &:focus {
        transform: rotate(90deg);
        .snap-gear-icon {
            fill: currentColor;
        }
    }
}

.bb_dashboard_link img {
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
}

#page {
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    transition: all 0.4s 0s ease;

    // When admin block is open
    &.offcanvas {
        left: -200px;
    }
}

#moodle-blocks {
    max-width: 60.5em;
    clear: both;
    position: relative;
    float: none;
}

#region-main {
    font-family: $font-family-serif;
    max-width: 60.5em;
    padding-top: 1em;
    float: none;
}

// Pages that need as much width as they can get as they
// aren't designed (yet) for small screens.

#page-admin-search,
#page-mod-quiz-edit,
#page-course-management,
#page-local-joulegrader-view,
#page-mod-quiz-report {
    #region-main {
        max-width: 100%;
    }
}

#page-mod-assign-view .flexible th {
    white-space: normal;
}

// moodle span
#maincontent {
    height: 0;
}

// -------------------------
//  Header - a head for your moodle
// -------------------------
/***************
THE HEADER DOM LOOKS LIKE THIS :

header#page-header
	nav#breadcrumb-nav
		ol#breadcrumb
	div#page-mast
		h1 - a hopefully useful name for this page

 ****************************/
// page-heaer - a big box with possibly useful stuff in it
// -------------------------

#page-header {
    padding-top: 4em;
    padding-bottom: 0.5em;
    @media (max-width: 1001px) {
        padding-top: 7em;
    }
    @media (max-width: 465px) {
        padding-top: 10.5rem;
    }
}

// Breadcrumb - not really a breadcrumb like on the web, but something moodley
// -------------------------

.breadcrumb-nav {
    padding: .5em 0;
    float: none;
    @include media-breakpoint-up(md) {
        margin-top: -0.5em;
    }
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    font-size: $font-size-sm;
    display: block;
    li.breadcrumb-item {
        display: inline-block;
    }
}

@include media-breakpoint-down(md) {
    .breadcrumb li {
        &:nth-last-child(n+4) {
            display: none;
        }

        &:nth-last-child(3):before {
            content: "";
            padding: 0;
        }
    }
}

// SHAME - what is this?
// -------------------------

.breadcrumb-button {
    margin-top: 0;
}

// -------------------------
// Header in course layout (we have extra stuff)
// -------------------------
/***************
	div#page-mast
		nav#course-toc
				ol #chapters
				search stuff SHAME

 ****************************/

// If the page has an image - courses & catagories.
.mast-image {
    .breadcrumb {
        li,
        li:before,
        > li + li:before,
        a {
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
            color: white;
        }
    }

    #page-mast > {
        h1,
        h1 a,
        h1 a:hover {
            color: white;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }
    }
    // Add a bg colur to the toc in page header.
    #course-toc {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

.path-course-view .mast-image {
    min-height: 250px;
}

// a lovely pin showing the searched for item
#searchpin {
    background: transparent url("[[pix:theme|searchpin]]") no-repeat 50% 50%;
    display: inline-block;
    height: 1em;
    width: 1em;
    margin: 0.1em;
}

/* SHAME - button to toggle actions, e.g. close */
.snap-action-icon {
    padding: 0.5em;
    font-size: 1.5em;
    line-height: 1;
    text-decoration: none !important;
    display: block;
    text-align: center;

    small {
        display: block;
        text-align: center;
        line-height: 1;
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: lighter;
    }
}

// Admin block link.
#admin-menu-trigger {
    width: 30px;
    height: 30px;
    margin-left: .75em;
    margin-top: .5em;
}

#page-report-outline-user .section {
    border: 0;
}

.path-mod-feedback .generalbox div table tbody img {
    height: auto;
    width: auto;
}

.forumpost .content .posting,
.no-overflow {
    overflow: visible;
    padding: 0;
}


.course-content,
.settingsform,
#page-mod-page-view #region-main,
#snap-course-footer-about {
    max-width: $user-content-max-width;
    margin: 0 auto;
}

// Override the above for a table that is also a form
.block_conduit_setting_mappings > .mform,
.quickgradingform > .mform {
    max-width: none;
}


.forumpost {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* hide show description option */
#page-mod-page-mod {
    #fitem_id_showdescription {
        display: none;
    }
}

/* FRONT PAGE ELEMENTS */
#page-site-index {
    #region-main {
        max-width: 100%;
        padding: 1em 0 0 0;
        margin: 0 auto;
    }

    #page-header,
    .carousel-slide {
        // background-color: $brand-primary; customisable
        min-height: 405px;
        position: relative;
        padding: 0;
        margin: 0;
    }

    #snap-coverimagecontrol {
        position: absolute;
        bottom: 1em;
        right: 4%;
    }

    #page-mast {
        background-color: rgba(255, 255, 255, 0.9);
        display: inline-block;
        padding: 1em 2%;
        margin: 10em 4% 1em;
    }

    #moodle-page {
        /* GT Mod - I've removed this because I don't like it - the cover image ends up appearing half way under
        the fixed menu and it looks very poor IMO.
         */
        /*padding-top: 2em;*/
    }
}

@include media-breakpoint-up(lg) {
    #page-site-index {
        #page-header,
        .carousel-slide {
            min-height: 600px;
        }
    }
}
@include media-breakpoint-up(md) {
    #page-site-index #page-mast {
        width: 50%;
        margin: 20vh 4%;
    }
}

#page-mast .snap-login-button {
    display: inline-block;
    margin-top: 1em;
}

// -------------------------
// Front page carousel componant.
// -------------------------
#snap-site-carousel {

    .carousel-slide {
        background-position: center center;
        background-size: cover;
        background-color: white;
    }

    .carousel-caption {
        // Reset bootstrap styles.
        left: 4%;
        bottom: inherit;
        text-align: left;
        top: 20vh;
        width: 50%;
        text-shadow: none;
        color: #666;
        // Add snap cover styles.
        background-color: rgba(255, 255, 255, 0.9);
        padding: 1em 2%;
        margin-top: 2em;
    }

    .carousel-indicators {
        bottom: -50px;
        transform: scale(1.3);

        li {
            border-color: $gray-light;
            background-color: $snap-carousel-buttons;
        }
        .active {
            background-color: $gray-light;
        }
    }

    .carousel-controls {
        display: none;
    }
}

#page-site-index .content-slide {
    display: none;
}

// Front page core elements.
#page-site-index {
    // Front page course search box.
    #coursesearch .input-group {
        max-width: 300px;
    }
    // Front page edit summary - hide cog icon.
    .sitetopic .fa-cog {
        display: none;
    }
    // Front page add resource - hide + icon.
    .section-modchooser-link .fa-plus {
        display: none;
    }
}

#frontpage-course-list {
    padding: 1em 4%;
    .paging {
        padding: 1em;
    }
}

#page-site-index .sitetopic,
#frontpage-category-names,
#frontpage-category-combo {
    max-width: 50.5em;
    margin: 2em auto;
    clear: both;
}

#page-site-index .sitetopic {
    @include clearfix;
    padding: 0 4%;
}
#page-site-index .singlebutton {
    display: block;
    text-align: center;
}

#site-news-forum h2,
#frontpage-course-list h2,
#frontpage-category-names h2,
#frontpage-category-combo h2 {
    padding: 0.5em 0;
    text-align: center;
    font-size: $h1-font-size;
}

/* FRONT PAGE SITE NEWS */
#page-site-index #site-news-forum {
    margin: 0 auto;
    padding: 0 4% 4em;
    background-color: #f1f0ee;
    @include clearfix;
}

#news-articles {
    margin: 0 auto;
}

.news-article {
    background-color: #fff;
    margin-bottom: 0.5em;
}

.news-article-inner {
    background-color: #fff;
}

.news-article-content {
    padding: 0 4%;
    min-height: 150px;
}

.news-article-content h3 {
    font-size: $h2-font-size;
}

.news-article-image {
    cursor: pointer;
}

.news-article-image,
.news-article-preview {
    color: #fff;
    min-height: 150px;

    //	background-color: $brand-primary; customisable
    padding: 2em 4%;
    @include bg-cover;
}

.news-article-preview {
    height: auto;
}

.news-article-date {
    font-size: 0.75em;
}

.news-article-message {
    display: none;
    padding: 2em 4%;
}

.state-expanded {
    .news-article-preview,
    .news-article-image {
        display: none;
    }

    .news-article-message {
        display: none;
    }
}

.news-article-message:focus {
    outline: 0;
}

@include media-breakpoint-up(md) {
    .news-article {
        margin-bottom: 0;
        display: flex;
    }

    .news-article-content {
        max-width: 100%;
    }

    .news-article-preview,
    .news-article-image,
    .news-article-inner {
        width: 50%;
        min-height: 300px;
        flex: 1 1 auto;

        p {
            margin: 1em 0;
            display: block;
        }
    }

    .news-article-image {
        padding: 0;
    }

    .state-expanded {
        .news-article-inner {
            width: 33%;
            order: 1 !important;
        }

        .news-article-message {
            width: 67%;
        }
    }

    #news-articles div:nth-child(odd) .news-article-preview,
    #news-articles div:nth-child(odd) .news-article-image {
        order: 2;

        p:nth-of-type(2) {
            text-align: left;
        }
    }

    #news-articles div:nth-child(even) .news-article-inner {
        order: 2;
    }

    .ie9 {
        #news-articles div:nth-child(even) {
            .news-article-preview,
            .news-article-image,
            .news-article-inner {
                float: left;
            }
        }

        #news-articles div:nth-child(odd) {
            .news-article-preview,
            .news-article-image,
            .news-article-inner {
                float: right;
            }
        }
    }
}

@include media-breakpoint-up(xl) {
    .news-article {
        min-height: 33vh;
    }
}

/* Calandar */
span.calendar_event_global,
li.calendar_event_global:before,
td.calendar_event_global > a {
    background-color: $brand-success;
    color: #fff !important;
}

span.calendar_event_course,
li.calendar_event_course:before,
td.calendar_event_course > a {

    //salmon
    background-color: salmon;
    color: #fff !important;
}

span.calendar_event_group,
li.calendar_event_group:before,
td.calendar_event_group > a {

    // yellow
    background-color: #fdd652;
    color: #fff !important;
}

span.calendar_event_user,
li.calendar_event_user:before,
td.calendar_event_user > a {
    background-color: $brand-info;
    color: #fff !important;
}

td.calendar_event_global,
td.calendar_event_course,
td.calendar_event_group,
td.calendar_event_user {
    background-color: transparent;
}

li.calendar_event_global:before,
li.calendar_event_course:before,
li.calendar_event_group:before,
li.calendar_event_user:before {
    content: " ";
    width: 1em;
    height: 1em;
    border-radius: 100%;
    display: inline-block;
    margin: -0.1em 4%;
}

/* Block cals */
.block .minicalendar {
    max-width: 500px;

    th {
        height: auto;
        font-weight: $headings-font-weight;
    }

    td {
        height: 4em;
        vertical-align: middle;

        > a {
            border-radius: 100%;
            height: 4em;
            width: 4em;
            padding: 1.2em;
            display: block;
            margin: auto;
        }

        &.hasevent > a {
            color: #fff;
        }

        &.today > a {
            border: 1px solid $gray-lighter;
        }
    }
}

// Minical hover box
.calendar-event-panel {
    border: 0 !important;
    background-color: #fff;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

    .yui3-overlay-content {
        border-color: $gray-lighter;
    }
}

.calendar_filters {
    .smallicon {
        display: none;
    }

    .calendar_event span[class*="_event_"] {
        border-radius: 100%;
        display: inline-block;
        width: 1em;
        height: 1em;
        margin: -0.1em 2%;
    }
}

.path-calendar {
    .maincalendar .calendarmonth td,
    .maincalendar .calendarmonth th {
        border-color: #fff;
        height: 1em;
    }
}

.maincalendar .day .day {
    border-radius: 100%;
    width: 3em;
    height: 3em;
    padding: 0.4em;
    border: 1px solid #fff;
    margin: 0 auto;
}

// Today
.maincalendar .today .day {
    border-color: $gray-lighter;
}

// A day with events
.maincalendar .day .day a {
    border-radius: 100%;
    display: block;
    height: 4em;
    width: 4em;
    padding: 1.2em;
    margin: -1.2em;
}

.maincalendar .day.today .day a {
    background-color: transparent;
    display: inline;
    text-align: center;
}

ul.events-new,
ul.events-underway {
    padding-top: 0.5em;
}

ul.events-new + ul.events-underway {
    padding-top: 0;
}

.path-calendar .maincalendar .eventlist .event {
    border: 0;
}

.maincalendar ul {
    text-align: left;

    li {
        background-color: transparent;
    }
}

#dateselector-calendar-panel {
    #dateselector-calendar-content {
        padding: 10px;
    }

    .yui3-calendar-header {
        display: block;
        padding-bottom: 10px;
    }
    
    .yui3-calendarbase {
        width: 350px !important;
    }

    .yui3-calendar-header-label,
    .yui3-calendar-day,
    .yui3-calendar-prevmonth-day,
    .yui3-calendar-nextmonth-day,
    .yui3-calendar-weekday {
        font-family: $font-family-sans-serif;
        color: $body-color;
        border-color: $modal-content-bg;
        text-align: center;
        font-weight: normal;
    }

    .yui3-calendar-prevmonth-day,
    .yui3-calendar-nextmonth-day {
        color: $text-muted;
    }

    .yui3-calendar-content {
        background: $body-bg;
    }

    .yui3-calendarnav-nextmonth,
    .yui3-calendarnav-prevmonth {
        border: 0;
        margin: 0;
        height: 30px;
        width: 30px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
    }

    .yui3-calendarnav-nextmonth {
        background-image: url("[[pix:theme|right-arrow]]");
        right: 0;
    }

    .yui3-calendarnav-prevmonth {
        background-image: url("[[pix:theme|left-arrow]]");
        left: 0;
    }

    .yui3-calendar-day,
    .yui3-calendar-prevmonth-day,
    .yui3-calendar-nextmonth-day {
        width: 14%;
        border: 0;
        height: 47px;
    }

    .yui3-calendar-day:hover,
    .yui3-calendar-prevmonth-day,
    .yui3-calendar-nextmonth-day {
        background-color: $modal-content-bg;
    }

    .yui3-calendar-day-selected,
    .yui3-calendar-day:hover {
        @include alakazam;
        color: #fff;

        // background-color: $link-color; in user swatch
        border-radius: 100%;
    }
}

@include media-breakpoint-up(md) {

    #dateselector-calendar-panel {
        .yui3-calendar-base {
            width: 100%;
        }

        .yui3-calendar-header-label {
            font-weight: 100;
            font-size: $h4-font-size;
        }

        .yui3-calendarnav-nextmonth,
        .yui3-calendarnav-prevmonth {
            height: 55px;
        }
    }
}

/* USER PROFILE PAGE */
.userprofile .userprofilebox {
    .profilepicture {
        @include make-col(3);
    }

    .descriptionbox {
        @include make-col(9);
    }
}

/* MESSAGING PAGE */
#message_user_pictures {
    .box.user {
        @include make-col(5);
    }
    .box.between {
        @include make-col(2);
    }
    .box {
        text-align: center;
    }
}
/* Message contaacts list */
.message-contacts {
    list-style: none;
    padding: 0;
    .pix,
    .link,
    .contact {
        display: inline;
    }
    .pix {
        margin-right: 0.5em;
    }
    .link {
        float: right;
    }
}

// -------------------------
//  Moodle mods
// -------------------------
// -------------------------
// Choice
// -------------------------

.path-mod-choice .results.names .user {
    clear: both;
}

// -------------------------
// Assignments
// -------------------------

.path-mod-assignment {
    .userpicture,
    .picture.user,
    .picture.teacher {
        height: auto;
    }
}

// -------------------------
// Comments - this could be a block, but is in mods too?
// -------------------------

.comment-ctrl,
.comment-list {
    font-size: 1em;
}

.comment-area {
    max-width: 100%;
}

// -------------------------
// Workshop
// -------------------------

.path-mod-workshop .userplan {
    width: 100%;
}

.path-mod-workshop .collapsibleregioncaption {
    font-size: $h3-font-size;
    font-weight: 400;
}

// -------------------------
// Chat
// -------------------------

#chat-input-area,
#chat-input-area table.generaltable,
#chat-input-area table.generaltable td.cell,
#chat-userlist {
    background-color: transparent !important;
}

.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax #chat-input-area table.generaltable,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax #chat-input-area table.generaltable td.cell {
    padding: 0;
}

#page-mod-chat-gui_basic-index {
    #mr-nav,
    #moodle-footer,
    #page-header {
        display: none;
    }
}

// -------------------------
// Lesson
// -------------------------
// Space on buttons

.branchbuttoncontainer {
    margin: 2em 0;
}

// -------------------------
// Quiz
// -------------------------

#quiz-timer {
    position: fixed;
    bottom: 0;
    left: 1%;
    background-color: #000;
    color: #eee;
    padding: 0.1em 1%;
    z-index: $zindex-navbar-fixed;
}

#page-mod-quiz-review .arrow_link {
    @extend %fake-btn;
    @extend .btn-secondary;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton {
    overflow: hidden;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton:hover, .path-mod-quiz #mod_quiz_navblock .qnbutton:focus {
    background-color: $brand-primary;
    border: 1px solid $brand-primary;
    color: #ffffff;
}

#page-mod-quiz-edit .section .activity .actions {
    position: absolute;
    right: 0;
    top: 0;
}

#page-mod-quiz-review {
    .formulation {
        select {
            .custom-select {
                padding-right: 5em;
            }
            &:disabled {
                color: #818a91 !important;
                cursor: not-allowed;
                background-color: #eceeef !important;
                padding-right: 5em;
            }
            width: auto !important;
        }

        input[type="text"] {
            width: auto !important;
        }

        input.form-control[readonly] {
            background-color: #eceeef !important;
            opacity: 1;
        }
    }
}

// Quiz setup form //
#page-mod-quiz-mod #id_reviewoptionshdr .fitem {
    width: 100%;
    float: none;
}

#page-mod-quiz-mod #id_reviewoptionshdr fieldset.fgroup {
    margin: 1em 0;
}

#page-mod-quiz-edit div.question div.qnum {
    color: inherit;
    width: 5%;
}

#page-mod-quiz-edit div.editq div.question div.content {
    border-radius: 0;
    width: 95%;
}

#page-mod-quiz-edit div.question div.content {
    div.points,
    div.questioncontrols {
        position: relative;
        float: right;
        width: 30%;
        right: auto;

        &:empty {
            display: none; // not working as there is some eroneous space in the div
        }
    }

    div.questioncontrols {
        width: 55px;
    }
}

.questioncontentcontainer {
    width: 68%;
}

.questioncontainer.random .questioncontentcontainer {
    width: 100%;
}

#page-question-import .mform .form-inline br + label {
    width: 95%;
}

#page-mod-quiz-edit .questioncontentcontainer div.randomquestionqlist {
    clear: both;
    background-color: transparent;
    width: 100%;
}

#page-mod-quiz-edit div.question div.content .questionname,
#page-mod-quiz-edit div.question div.content .questiontext {
    max-width: 95%;
}

@include media-breakpoint-down(lg) {
    .questioncontentcontainer {
        width: 100%;
        clear: both;
    }

    #page-mod-quiz-edit div.question div.content div.questioncontrols,
    #page-mod-quiz-edit div.question div.content div.points {
        position: relative;
        float: left;
        width: 50%;
        max-width: 50%;
        text-align: left;
        right: auto;
    }
}

// start of code for when adding from a question bank
#page-mod-quiz-edit div.quizcontents,
.questionbankwindow.block {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

// very long button text
#page-mod-quiz-edit div.reorder .reordercontrols {
    .moveselectedonpage,
    .addnewpagesafterselected {
        padding-right: 0;

        input {
            white-space: normal;
        }
    }
}

#page-mod-quiz-edit div.reorder {
    div.question div.content {
        width: calc("100% - 4.3em");
    }
}

// Push text onto a single line in quiz edit action menus
#page-mod-quiz-edit .menu-action-text,
#page-mod-quiz-edit .toggle-display.textmenu {
    white-space: nowrap;
}

// Stop quiz instance name from being cuttoff
#page-mod-quiz-edit ul.slots .activityinstance span.instancename {
    overflow: visible;
}

@include media-breakpoint-up(lg) {
    #page-mod-quiz-edit div.quizcontents,
    .questionbankwindow.block {
        width: 50%;
    }

    #page-mod-quiz-edit div.container div.generalbox {
        padding-left: 8%;
        padding-right: 0;
    }
}

#page-mod-quiz-edit div.quizwhenbankcollapsed,
#page-mod-quiz-edit .modulespecificbuttonscontainer {
    width: 100%;
}

#page-mod-quiz-edit .categoryinfo {
    display: none;
}

#categoryquestions .checkbox {

    // overwite bootstrap checkbox class
    display: table-cell;
}

#categoryquestions .iconcol {
    width: 22px;
}

#categoryquestions label,
#page-mod-quiz-edit #categoryquestions .questiontext,
.questioncontentcontainer label,
#page-mod-quiz-edit div.question div.content .questiontext {
    font-weight: 400;
}

#page-mod-quiz-edit .instancemaxmarkcontainer input[name='maxmark'] {
    height: 1.5em !important;
}

// Quiz itself //

// For quiz, we don't want two coluns.
.path-mod-quiz #moodle-blocks > aside {
    column-count: 1 !important;
}

.path-mod-quiz .block__fake {
    text-align: center;
    .qnbutton {
        display: inline-block;
        float: none;
    }
}

.que {
    border-bottom: 1px solid $gray;
    padding: 1.5em 0;
    margin: 1em 0;
}

.que .info,
.que .content {
    background-color: transparent;
    border: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

.que h3.no {
    margin-top: 1em;
}

.que h3.no,
.que span.qno {
    font-size: $h2-font-size;
    font-weight: 400;
}

.que .info > div {
    display: inline-block;
    font-size: $font-size-sm;
    color: $gray-light;
    padding-right: 2%;
}

// Adding region main to overwite boost extend alert on quiz elements.
#region-main {
    .que .formulation,
    .formulation .incorrect,
    .formulation .correct {
        border: 0;
        background-color: transparent;
        width: 100%;
        margin: 0;
        padding: 0;
        color: $gray;
    }
}

.que .qtext {
    font-size: 1.3em;
}

// Add margin to quiz submit/check button.
.que .im-controls {
    margin: 0.5em 0;
}

.que.multichoice .answer .specificfeedback {
    display: block;
}

#page-mod-quiz-edit .editq div.question {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #ccc;
}

#categoryquestions td,
#categoryquestions th {
    padding: 4px 0.2em;
}

.singlequestion .questioneditbutton img {
    @include sr-only;
}

.questioncontainer {
    @include clearfix;
}

#page-mod-quiz-edit .editq div.question div.content .singlequestion .questioneditbutton .questionname,
#page-mod-quiz-edit .editq div.question div.content .singlequestion .questioneditbutton .questiontext {
    float: none;
    display: block;
    font-weight: normal;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

#page-mod-quiz-edit .questioncontentcontainer div.singlequestion a {
    text-decoration: none;
}

#page-mod-quiz-edit .paging,
#page-mod-quiz-edit div.question div.content .singlequestion .questionpreview,
#page-mod-quiz-edit div.question div.content .questionpreview a {
    background-color: transparent;
}

#page-mod-quiz-edit div.question div.content .questiontype {
    float: left;
    font-style: normal;
    font-size: small;
}

#page-mod-quiz-edit div.editq div.question div.content {
    border: 0;
}

#page-mod-quiz-edit div.quizpage span.pagetitle,
#page-mod-quiz-edit div.quizpage .pagecontent {
    float: none;
}

#page-mod-quiz-edit .questionbankwindow.block div.header {
    background-color: transparent;
    font-weight: normal;
}

#page-mod-quiz-edit div.quizpage span.pagetitle,
#page-mod-quiz-edit .questionbankwindow.block div.header div.title h2,
#page-mod-quiz-edit .questionbankwindow a#showbankcmd,
#page-mod-quiz-edit .questionbankwindow a#hidebankcmd,
#page-mod-quiz-edit .questioncontentcontainer div.randomquestionqlist .totalquestionsinrandomqcategory {
    color: inherit;
}

#page-mod-quiz-edit div.quizpage .pagecontent {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}

#page-mod-quiz-edit div.quizpage .pagecontent,
#page-mod-quiz-edit div.question div.questioncontainer {
    background-color: transparent;
}

#page-mod-quiz-edit .invisiblefieldset br {
    display: none;
}

#page-mod-quiz-edit .modulespecificbuttonscontainer br {
    display: block;
}

#page-mod-quiz-edit div.question div.content div.points input {
    width: auto;
}

// -------------------------
// Forum
// -------------------------

#page-mod-forum-discuss {
    .discussioncontrol.exporttoportfolio,
    .discussioncontrol.displaymode,
    .discussioncontrol.movediscussion {
        margin: auto;
        width: 100%;
        padding-bottom: 10px;
    }

    div {
        .no-overflow {
            overflow: hidden;
        }

        .grouppictures {
            margin-top: 0.5em;
        }
    }
}

#page-mod-forum-post {
    div {
        .no-overflow {
            overflow: hidden;
        }

        .grouppictures {
            margin-top: 0.5em;
        }
    }
}

// -------------------------
// Forum responsive table
// -------------------------
// Should the forum responsive stuff be moved to modules.scss?

@include media-breakpoint-down(md) {
    .path-mod-forum .forumheaderlist {
        tbody td.topic {
            width: 100%;
        }

        .picture a {
            display: inline;
        }
    }

    .forumheaderlist {
        thead {
            display: none;
        }

        tbody {
            width: 100%;
            display: block;
        }

        tbody tr.discussion {
            display: block;
            padding: 1em 0;
            border-bottom: 3px solid #ccc;
            width: 100%;
        }

        tbody tr td,
        td.picture.group {
            display: block;
            clear: both;
            text-align: left !important;
            background-color: transparent !important;
            width: 100%;
        }

        td.topic {
            font-size: 1.3em;
        }

        td:before {
            font-size: 0.9em;
            color: #999;
            font-weight: bold;
        }

        td.topic:before {
            content: attr(data-cellname);
        }

        td.picture:before {
            content: attr(data-cellname);
        }

        td.replies:before {
            content: attr(data-cellname);
        }

        td.lastpost:before {
            content: attr(data-cellname);
        }

        td:before {
            display: inline-block;
            margin-right: 4%;
        }

        td.author,
        td.picture {
            clear: none;
        }

        td.picture {
            width: 32%;
            display: inline;
            margin-right: 2%;
        }

        td.author {
            width: 68%;
            display: inline;
        }
    }
}

// -------------------------
// Grade table
// -------------------------

table.boxaligncenter.generaltable.user-grade {
    background-color: #fff;

    th {
        font-weight: 500;
    }

    thead {
        border-bottom: 1px solid #eee;
    }

    img.icon {
        width: 1.3em;
        height: 1.3em;
    }

    td.feedbacktext {
        font-size: 1.3em;
    }

    th a {
        font-size: 1.2em;
    }

    th {
        padding: 0.75em !important;
        border-color: #fff !important;
    }

    td {
        border-color: #fff !important;
    }

    // Kill ridiculously unprofessional colour scheme
    * {
        background-color: #fff !important;
    }
}

// -------------------------
// Joule mods
// -------------------------
// Reports
// SHAME - stop overlap with footer

.path-blocks-reports #report-content {
    min-height: 750px; // magic number
}

// Make Joule Reports a little more responsive
.path-blocks-reports .course-report-dashboard {
    display: block;
    width: auto;
    overflow: visible;
}

.mr_html_tabs {
    margin-bottom: 1em;
}

.path-grade-report-user .user-grade {
    border: 0;
}

.user-grade td.b1l,
.user-grade td.b2l,
.user-grade th.b1l,
.user-grade th.b2l,
.user-grade td.b1b,
.user-grade td.b2b,
.user-grade th.b1b,
.user-grade th.b2b,
.user-grade thead {
    border-color: #ccc;
    border-left: 0 !important;
    border-right: 0 !important;
}

.user-grade td.evend2,
.user-grade th.evend2,
.user-grade td.oddd1,
.user-grade th.oddd1,
table#user-grades td.controls,
.path-grade-report-grader table tr.avg .cell,
.path-grade-report-grader table tr.range .cell,
table#user-grades tr.avg td.cell,
.user-grade td.oddd2,
.user-grade th.oddd2,
.user-grade td.oddd3,
.user-grade th.oddd3,
.user-grade td.evend3,
.user-grade th.evend3,
.user-grade td.oddd3,
.user-grade th.oddd3 {
    background-color: transparent;
}

table#user-grades tr.avg td.cell {
    color: #66666f;
}

#page-blocks-reports-view .mr_html_filter,
#block-reports-filterbutton,
.blocks_reports_useractions,
.blocks_reports_jouleadmin {
    border: none;
    background: none;
}

.report-category-overlay .yui3-widget {
    width: inherit !important;
    min-width: 220px;
}

.report-course-overlay .yui3-widget {
    width: inherit !important;
    min-width: 300px;
}

.gradingform_checklist.editor .addgroup input,
.gradingform_checklist.editor .additem input,
.gradingform_rubric.editor .addlevel input,
.gradingform_rubric.editor .addcriterion input {
    @extend %fake-btn;
    @extend .btn-secondary;
    height: auto;
}

.gradingform_rubric.editor .criterion .levels .level .delete {
    position: relative;
}

.path-blocks-reports {
    .report-category-overlay,
    .report-course-overlay {
        .yui3-widget {
            z-index: 1 !important;
        }
    }

    #course-search-left,
    #course-search-right {
        display: none;
    }

    #course-search-box {
        background-image: none;
        min-height: 60px;
    }

    #course-search-text {
        padding-top: 0;
        margin: 0.5em 5%;
        width: calc("84% - 13px");
    }

    #course-search-button {
        padding-top: 3px;
        margin: 0.5em 1% 0.5em 0;
    }

    #course-search-input {

        // copied from less/bootstrap3/forms.scss .form-control
        color: $input-color;
        background-color: $input-bg;
        // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
        background-image: none;
        border: 1px solid $input-border-color;
        border-radius: $input-border-radius;
        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
        @include transition("border-color ease-in-out .4s, box-shadow ease-in-out .4s");
        width: 100%;
    }

    .yui3-widget-stdmod,
    .yui3-aclist-content {

        // copied from less/bootstrap3/dropdowns.scss .dropdown-menu
        z-index: $zindex-dropdown;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0; // override default ul
        list-style: none;
        font-size: $font-size-base;
        background-color: $dropdown-bg;
        border: 1px solid $dropdown-border-color;
        border-radius: $border-radius;
        @include box-shadow(0 6px 12px rgba(0,0,0,.175));
        background-clip: padding-box;

        .report-overlay-bd {
            padding: 0;
        }

        div.report-nav-item {
            border-bottom: none;
            width: 100%;

            a.nav-item {
                display: block;
                padding: 3px 20px;
                font-weight: normal;
                line-height: $line-height-base;
                color: $dropdown-link-color;
                white-space: nowrap; // prevent links from randomly breaking onto new lines
                width: 100%;

                &:hover,
                &:focus {
                    text-decoration: none;
                    color: $dropdown-link-hover-color;
                    background-color: $dropdown-link-hover-bg;
                }
            }
        }

        div.report-nav-item-left,
        div.report-nav-item-right {
            a.nav-paginate {
                display: block;
                padding: 3px 20px;
                font-weight: normal;
                line-height: $line-height-base;
                color: $dropdown-link-color;
                white-space: nowrap; // prevent links from randomly breaking onto new lines

                &:hover,
                &:focus {
                    text-decoration: none;
                    color: $dropdown-link-hover-color;
                    background-color: $dropdown-link-hover-bg;
                }
            }
        }

        #report-overlay-course div.report-nav-item a.nav-item {

            // Allow long course title search results to wrap
            white-space: normal;
        }
    }
}

// TODO short term fix for Snap disappearing header interfering with scrolling Gradebook
#page-grade-report-grader-index header#mr-nav {
    animation-name: none;
}

#page-local-joulegrader-view {
    #local-joulegrader-navigation {
        border-bottom: thin solid #e5e5e5;
        background-color: transparent;

        .helptooltip {
            display: none;
        }

        .action-icon img.smallicon {
            vertical-align: middle;
        }
    }

    fieldset.fieldset {
        border-color: #e5e5e5;

        legend {
            width: auto;
            border: none;
            padding: 0 0.5em;
        }
    }
}

#page-admin-outcome-admin {
    .yui3-moodle-core_outcome-editoutcome-outcome {
        background-position: left .35em;
    }
}

.yui3-moodle-core_outcome-editoutcome-panel {
    #outcome_edit_panel .fitem {
        display: block;
        margin-bottom: 0.5rem;
    }
}

// Stop aclist-content from being rediculously big in  page-admin-report-outcome-index.
.yui3-aclist-content {
    overflow-y: auto;
    max-height: 90vh;
}

.path-blocks-reports .report-title {
    font-weight: normal;
    font-family: $font-family-system;
}

// Whitelist - pages need to be full width.
.path-mod-assign,
.path-mod-hvp,
.path-grade,
.path-admin-report,
.pagelayout-admin,
#page-course-editsection {
    #region-main {
        width: 100%;
        max-width: 100%;
    }

    .snap-form-required fieldset {
        max-width: 43.5em;
        margin: 1em 0;
    }
}

// whitelist - scroll bars for large data-tables //
// - note they are already on .gradeparent
// Edit categories and items: Full view
// Mod assignment grading table

.gradetreebox,
.gradingtable .no-overflow,
#page-mod-quiz-report.pagelayout-report .no-overflow,
.path-admin-roles div[role="main"] > form {
    overflow: auto;
}

.path-grade-report-customgrader,
.path-grade-report-grader {
    .gradeparent {
        .right_scroller table#user-grades {
            th {
                font-size: 10px;
            }
        }

        table#user-grades {
            border: none;
            font-size: $font-size-base;

            th {
                font-size: 13px;

                &.header.userfield[scope="col"],
                &.header#studentheader[scope="col"] {
                    vertical-align: bottom;
                    border-top: none;
                }
            }

            th,
            td {
                border-color: $table-border-color #f5f5f5;
            }

            tr.odd td.cell {
                background-color: $table-bg-accent;

                &.overridden,
                &.ajaxoverridden {
                    background-color: #efd9a4;
                }
            }

            .topleft {
                border: none;
            }
        }
    }
}

// -------------------------
// Moodle notice/alerts etc
// -------------------------
// bootstrap alerts

.alert {
    &.alert-info,
    &.alert-success,
    &.alert-danger,
    &.alert-warning {
        clear: both;
        border: 0;
        border-left: 3em solid;
    };
    &.alert-info {
        color: $brand-info;
        background-color: rgba($brand-info, .1);
        border-color: $brand-info;
    };
    &.alert-success {
        color: $brand-success;
        background-color: rgba($brand-success, .1);
        border-color: $brand-success;
    };
    &.alert-danger {
        color: $brand-danger;
        background-color: rgba($brand-danger, .1);
        border-color: $brand-danger;
    };
    &.alert-warning {
        color: $brand-warning;
        background-color: rgba($brand-warning, .1);
        border-color: $brand-warning;
    };
}

#notice {
    background-color: #eee;
    font-size: 2em;
    width: 100%;
    padding: 1em 4%;
    padding-bottom: 4rem !important; // Needed to overule .p-y-1 class.

    // pull buttons up into the #notice when they are placed
    // after it, rather than inside it.

    & + .continuebutton {
        margin-top: -3em;
    }

    .buttons {
        text-align: center;
        border-top: none;
    }
}

#page-course-loginas #notice {
    margin-top: 3em;
}

// bootstrap labels
.label {
    font-weight: normal;
}

// when we display a continue cancel notice, we need the page contents to be the same height.
// this is currently limitted to the front page.

body.hascontinuecancel.path-site #page {
    max-height: 750px;
    height: 750px;
    overflow: hidden;
}

// hard code some specific uses here till MDL-45655 fixes them
// and allows us to add the snap-continue-cancel class
// the hardcodeded ones here have the button inside the div

#page-admin-purgecaches #notice,
#notice.snap-continue-cancel {
    min-height: 800px;
    position: absolute;
    padding: 10% 4%;
    top: 1.5em;
    left: 0;
    z-index: 13;
}

// Override for odd little notice when deleting questions.
#page-user-policy #notice,
#page-blocks-conduit-view #notice.snap-continue-cancel,
#page-mod-quiz-edit div.container #notice.snap-continue-cancel {
    color: $body-color;
    background-color: $body-bg;
    font-size: $font-size-base;
    left: 0;
}

#page-user-policy #notice,
#page-blocks-conduit-view #notice.snap-continue-cancel {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 0;
}

// the hardcodeded ones here have the button outside the div
// remember to add any further additions to the user swatch
// to ensure they pick up the brand color.

#page-course-loginas,
#page-mod-survey-save {
    #region-main {

        //	background-color: $brand-primary; customisable
        max-width: inherit;
        min-height: 750px;
    }

    #moodle-footer {
        margin-top: 0;
    }

    #page-header {
        display: none;
    }
}

// next / previous nav
.section_footer {
    margin-top: 2em;
    padding: 1em 0;
    border-top: 1px solid #eee;
}

.section_footer a {
    font-style: normal;
    text-decoration: none;
    display: block;
    width: 100%;
    margin-top: 1em;
}

.next_section {
    text-align: right;
    float: right;
}

.previous_section {
    float: left;
}

@include media-breakpoint-up(md) {
    .section_footer {
        .previous_section,
        .next_section {
            width: 50%;
        }
    }
}

.nav_guide {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-style: normal;
    color: $body-color;
}

.nav_icon {
    padding: 0.3em;
    text-align: center;
    font-size: 2em;
}

.next_section .nav_icon {
    float: right;
    margin-left: 0.3em;
    border-left: 1px solid $gray-lighter;
    width: 50px;
}

.previous_section .nav_icon {
    float: left;
    margin-right: 0.3em;
    border-right: 1px solid $gray-lighter;
}

/*rtl:raw:
.previous_section .nav_icon,
.next_section .nav_icon {
        transform: rotate(180deg);
        border: none;
}
*/

// -------------------------
// Moodle dialogues.
// -------------------------
/* standard size */
.moodle-dialogue-base .moodle-dialogue {
    min-width: 32%;
    padding: 0;
    /* large size */
    &.chooserdialogue,
    &.filepicker {
        min-width: 90%;
        height: 100%;
    }
    video#player {
        max-height: 50vh;
    }
}

// -------------------------
// The site footer - moodle-footer
// -------------------------
body:not(.pagelayout-course) #moodle-footer {
    margin-top: 2em;
}

#moodle-footer {
    padding-top: 3em;
    padding-bottom: 1em;
    clear: both;
    color: $gray-lighter;
    background-color: $body-color;
}

#snap-footer-content,
#snap-socialmedia-links {
    padding: 1em 0;
}

#moodle-footer {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: $gray-lighter;
    }

    .helplink img.poweredbylogo {
        max-width: inherit;
        max-height: inherit;
        height: inherit;
        width: inherit;
        vertical-align: middle;
    }

    a:not(.btn),
    a:not(.btn):hover {
        color: #fff;
    }

    .langmenu {
        color: #666;
    }
}

// Custom menu lists.
@include media-breakpoint-up(sm) {
    #moodle-custom-menu .list-unstyled {
        column-count: 2;
    }
}

#site-news-forum + br {
    display: none;
}

.nav-justified + .nav-justified {
    margin-top: 1em;
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        transform: translateY(0);
    }
}

.slideInDown {
    animation-name: slideInDown;
}

/**
spinner, from
http://css-spinners.com/css/spinner/three-quarters.css
**/
@keyframes spinner-three-quarters {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Styles for old versions of IE */
.spinner-three-quarters {
    font-family: sans-serif;
    font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.spinner-three-quarters:not(:required) {
    animation: spinner-three-quarters 1250ms infinite linear;

    // Start GT Mod - force gpu accelleration.
    transform: translateZ(0);

    // End GT Mod.
    border: 6px solid #fff;
    border-right-color: transparent;
    border-radius: 16px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    width: 32px;
    height: 32px;
}

/** fix feedback field sizes on mobile devices **/
@include media-breakpoint-down(sm) {
    .mform {
        .fselect > select,
        .fselectyesno > select,
        .ftext > input[type="text"],
        textarea {
            width: 100%;
        }

        input[type="text"] {
            max-width: 100%;
        }
    }

    .path-user .userlist .singleselect {
        width: 100%;
    }
}

#footer-error-cont {
    margin-top: 1em;
    border: 3px solid red;
    background-color: #fff;
    color: #000;
    padding: 2em;

    h3 {
        color: #000;
    }

    hr {
        margin-top: 3em;
    }
}

// yui-bs overrides (note SNAP specific)
.yui-bootstrapped:not(.ie11) {

    // stop yui menu from being completely unusable on mobile device
    // note: it still isn't that great and a select box would be way better

    #pld_tokenselector.yuimenu {
        top: 100px !important;
        position: fixed !important;
        max-height: 70%;
        overflow-y: auto;

        @media (max-width: 767px) {
            left: 10% !important;
            width: 80% !important;
        }

        .yui-menu-body-scrolled {
            padding: 0;
            margin: 0;
        }
    }
}

.yui-bootstrapped.ie11 #pld_tokenselector.yuimenu {
    top: 100px !important;

    & > div {
        height: auto !important;
    }
}

// nicer positioning of fatal errors
div[data-rel=fatalerror] {
    margin: 1em;
}

.iconhelp {
    & > img {
        background-color: #ddd;
        height: 16px;
        width: 16px;
        border: 4px solid #ddd;
        border-radius: 50%;
        vertical-align: middle;
        margin-bottom: 3px;
    }

    &:focus {
        outline: 0;
    }

    &:focus > img,
    & > img:hover {
        // Reduce border to make the icon expand.
        border-width: 0;
        height: 24px;
        width: 24px;
    }
}

table th img.iconhelp {
    height: 24px;
    width: 24px;
    border-width: 0;
}

#moodle-footer .helplink a img.iconhelp,
#moodle-footer .helplink a:hover img.iconhelp {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #999;
}

.helplink {
    img.moodlefooterlogo,
    img.poweredbylogo {
        width: inherit;
        height: inherit;
        margin-right: 0.5em;
        margin-left: 0.5em;
    }

    img.moodlefooterlogo {
        vertical-align: top;
        margin-top: -2px;
        margin-right: 0;
    }

    img.poweredbylogo {
        vertical-align: bottom;
        margin-bottom: -2px;
    }

    .footerlinkdivider {
        margin: 0 0.5em;
    }
}

@include media-breakpoint-down(sm) {
    #page-enrol-users .enrol_user_buttons {
        float: none;

        .singlebutton.enrolusersbutton {
            display: block;
        }
    }
}

// -------------------------
// Reduce font sizes on small screen
// -------------------------
@include media-breakpoint-down(sm) {
    html,
    #region-main {
        font-size: 14.4px;
    }

    h1,
    .h1 {
        font-size: 1.5em;
    }

    h2,
    .h2 {
        font-size: 1.4em;
    }

    h3,
    .h3,
    .sectionname {
        font-size: 1.3em;
    }

    h4,
    .h4 {
        font-size: 1.2em;
    }

    h5,
    .h5 {
        font-size: 1.1em;
    }

    h6,
    .h6 {
        font-size: 1em;
    }
}

// Workaround for .labels inserted by some mechanism that is also fond of font tags
.label:not(.activity) font {
    color: $body-color;
    font-weight: 300;
}

.label:not(.activity) b font {
    font-weight: 500;
}

// moodle thing that tells you you have a new message
#newmessageoverlay {
    left: 0;
    padding: 1em;
}

.path-backup .wibbler {
    border: none;
    .wibble {
        display: none;
    }
}

#page-message-index div.singleselect {
    max-width: 100%;
}

/* Feature spots. */
#snap-feature-spots {
    padding: 2em 4%;
    text-align: center;

    .snap-feature-spots-heading {
        padding-top: 0;
        margin-top: 0;
    }

    .snap-feature-image {
        max-width: 200px;
    }
}

/* Featured courses section. */
@include media-breakpoint-up(md) {
    #snap-featured-courses .row div {
        /* Center and restrict width for when only one course */
        max-width: 50%;
        margin: 0 auto;
    }
}

/* Featured course container. */
#snap-featured-courses {
    width: 100%;
    padding: 1em 4%;
}
.snap-featured-courses-heading {
    padding: 1em 0;
}

#snap-featured-courses {
    background-color: $snap-featured-courses;
}
#snap-featured-courses a.snap-featured-course {
    border-radius: 4px;
}
#snap-featured-courses .snap-featured-course-title {
    border-radius: 0 0 4px 4px;
}

/* Featured course link. */
.snap-featured-course {
    display: block;
    height: 300px;
    position: relative;
    background-color: #ccc;
    margin-bottom: 1em;
    @include bg-cover;
    @include alakazam;

    &:hover {
        transform: scale(1.03);
        box-shadow:
            0 2px 2px 0 rgba(0, 0, 0, 0.14),
            0 3px 1px -2px rgba(0, 0, 0, 0.2),
            0 1px 5px 0 rgba(0, 0, 0, 0.12);

        .snap-featured-course-title {
            text-decoration: underline;
        }
    }
}

/* Featured course title. */
.snap-featured-course-title {
    display: block;
    min-height: 25%;
    width: 100%;
    background-color: white;
    position: absolute;
    bottom: 0;
    padding: 0.5em 4%;
}

// Scrolling gradebook fixes
.path-grade-report-grader .gradeparent .heading.floating {
    border-top: 1px solid #ddd;
}

.path-grade-report-grader .gradeparent table#user-grades {
    border: none;
    font-size: 16px;
}

.path-grade-report-grader .gradeparent table#user-grades tr.heading th {
    border-top: 1px solid #ddd !important;
}

.path-grade-report-grader .gradeparent table#user-grades tr:nth-child(1) th {

    // This stops what looks like a double top border two cells in on the grade column.
    border-bottom-width: 0;
}

.path-grade-report-grader .gradeparent .floating {

    // This makes the floating header have the same top border as when its not floated.
    border-top-width: 0;
}

.path-grade-report-grader .gradeparent *,
.path-grade-report-grader .gradeparent *:before,
.path-grade-report-grader .gradeparent *:after {

    // Without this, IE totally screws up the header and column cell sizes.
    box-sizing: content-box !important;
}

.path-grade-report-grader .gradeparent .heading .cell,
.path-grade-report-grader .gradeparent .avg .cell,
.path-grade-report-grader .gradeparent .cell.user {

    // Having the font sizes match is really important - if not the floating left header can end up
    // too large!
    font-size: 13px; // SHAME - No variable for this;
}

// End Scrolling gradebook fixes

td.mceIframeContainer > iframe {
    max-width: 100%;
}

body.gecko .snap-form-required > fieldset,
body.gecko .snap-form-advanced > fieldset {
    display: table-cell;
    max-width: 100%;
}

body.ie .snap-form-required > fieldset,
body.ie .snap-form-advanced > fieldset {
    table-layout: fixed;
    max-width: 100%;
}

.felement.feditor,
table.mceLayout,
table.mceLayout tr,
td.mceIframeContainer,
td.mceStatusbar {
    display: block;
    max-width: 100%;
}

table.mceLayout {
    // We have to use important to set the height as auto, otherwise clicking on the editors path selector causes
    // the table element to have an inline height style property which is not big enough to house its contents.
    // It isn't obvious what the inline height is required for and it does not affect the drag handle for resizing.
    // To observe the inline style, go to a page with a tiny mce editor and click (p) in the path selector.
    // You will notice that the bottom of the editor will now be much closer to the element underneath it.
    // In some cases it will even overlap elements on the page (quiz multichoice questions are a good example).
    height: auto !important;
}

table.mceLayout tbody {
    display: block;
}

td.mceToolbar {
    width: 100% !important;
    position: relative;
    display: inline-block;
    margin: 0 !important;
}

#page-mod-quiz-edit .instancename {
    max-width: 16px;
}

#page-mod-quiz-edit .activityinstance {
    overflow: hidden;
    max-width: 81%;
}

// General toggle icons.
button.snap-icon-toggle {
    &,
    &:hover,
    &:link,
    &:active,
    &:focus {
        background: none;
        border: none;
        box-shadow: none;
        outline: none;
    }
}

// Cover image control.
#snap-coverimagecontrol {
    float: right;
    margin-left: 1em;
    display: inline-block;
    opacity: 0;
    @include alakazam;

    .btn {
        border-color: transparent;
        margin-left: 1em;
    }
}

#snap-changecoverimageconfirmation {
    position: relative;
    display: inline-block;
}

#snap-coverfiles {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

label[for="snap-coverfiles"],
#snap-changecoverimageconfirmation button {
    position: relative;
    display: none;
}

body:not(.pagelayout-coursecategory) {
    label[for="snap-coverfiles"],
    #snap-changecoverimageconfirmation button {
        top: -2.5em;
    }
}

#page-course-view-topics #page-header.mast-image .alert-warning {
    margin-bottom: 2em;
}

label.state-visible[for="snap-coverfiles"],
#snap-changecoverimageconfirmation.state-visible button {
    display: inline-block;
    cursor: pointer;
}

label.state-visible[for="snap-coverfiles"] {
    span {
        padding: 1em;
    }
    &:before {
        content: '';
        background: transparent url("[[pix:theme|camera]]") no-repeat;
        display: inline-block;
        margin: -0.5em 0;
        height: 1.5em;
        width: 1.5em;
    }
    &.ajaxing:before {
        @include ajaxing(inline-block, relative, 16px, 4px);
        margin: 0 0 -3px 0.5em;
        background: none;
    }
}

@include media-breakpoint-down(xs) {
    label.state-visible[for="snap-coverfiles"] {
        span {
            display: none;
        }
    }
}

#snap-coverfiles {
    cursor: pointer;
}

#snap-changecoverimageconfirmation.disabled .ok {
    &,
    &:hover,
    &:active,
    &:focus {
        color: #fff;
        border-color: #fff;
    }
}

.cover-image-change #page-header {
    background-image: none !important;
    background-color: $gray-lighter;
}

#page-header.mast-image .alert-warning {
    background-color: rgba(255, 255, 255, 0.9);
}

#snap-coverimagecontrol.snap-js-enabled {
    opacity: 1;
}

.snap-alert-cover-image {
    background-color: white;
    width: auto;
    text-align: left;
    margin: 1em 0;
}

#snap-changecoverimageconfirmation .ok.ajaxing:after {
    @include ajaxingwhite(inline-block, relative, 16px, 4px);
    margin: 0 0 -3px 0.5em;
}

body.pagelayout-frontpage {
    .snap-alert-cover-image {
        margin: 1em 4%;
    }
}

#page-badges-criteria {
    .statusbox,
    ul.nav-tabs {
        margin: 1em 0;
    }
}

// Make sr-only item visible to non screen reader users.
@mixin reset-sr-only {
    position: relative;
    width: auto;
    height: auto;
    margin: initial;
    overflow: visible;
    clip: auto;
    border: initial;
}

// Hides 'Blocks editing on' button in all the plagiarism settings pages.
.path-admin-plagiarism .singlebutton {
    display: none;
}

// Adjust the size of the message containers.
#page-message-index .messaging-area-container .messaging-area .contacts-area .contacts .contact {
    height: 23%;

    .information .name {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

// Auth icon align fix.
#page-login-index .auth-icon,
#page-site-index .auth-icon,
#page-site-index .icon{
    width: 24px;
    height: 24px;
    margin: 0;
}

/* Fix for news visualization in Snap front page. */
#page-site-index .news-article-content h3 {
    margin-top: 1em;
}

#page-site-index #news-articles a.btn.btn-secondary.toggle {
    border: 1px solid white;
    margin: 1em 0;
    color: white;

    &:focus {
        outline: 3px white;
    }
}

// Center prev and next links for activities.
section#region-main {
    div.m-t-2.m-b-1 {
        display: inline-flex;
        width: 100%;

        .row {
            margin: 0 auto;
            width: 100%;
        }

        .col-md-4 {
            min-height: 8em;
            text-align: justify;

            .mdl-align {
                padding: 0 0.5em;
            }
        }
    }
}

.nav.nav-tabs {
    .nav-item {
        margin-left: 0.2em;
    }
}

.modal-lg {
    max-width: 900px;
}

#id_error_newpassword {
    color: #d9534f;
}