/* -------------------------------------------------------------------------
   Global
   ------------------------------------------------------------------------- */
/**
 * 1. Settings
 * This layer should only contain settings that need to be accessed from anywhere.
 */
/**
 * 2. Tools: Globally available tooling - mainly functions and mixins.
 * Any function/mixin that does not need to be accessed globally belongs in the
 * partial to which it relates.
 */
/**
 * 3. Generic: High-level, far reaching styles.
 * This layer is seldom modified, and is the first layer that produces any CSS.
 * e.g. Global box-sizing rules, CSS resets, Normalize.css would go here, but 
 * it's already being added by Bootstrap.
 */
/**
 * 4. Elements: Unclassed, element-based selectors.
 * This is the last layer where we should find bare HTML element selectors.
 */
sub {
    vertical-align: sub;
    font-size: smaller;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

/**
 * 5. Objects: This is the first layer in which we find class-based selectors.
 * Objects can range from something as simple as a .wrapper element, to layout systems.
 * e.g. The Media Object (already added by Bootstrap)
 */
/**
 * 6. Components: Recognizable pieces of UI.
 * Adding new components should make up the vast majority of development.
 */
.navbar {
    margin-bottom: 0;
}

.navbar__loading {
    display: block;
}

@media only screen and (max-width: 1024px) {
    #tour {
        display: none;
    }

    .mdl-layout__header {
        display: flex;
    }
}

@media (max-width: 767px) {
    .navbar-collapse {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden;
        height: 1px;
        /*min-height: 52px;*/ /* removed this - seemed to show the extra row on mobile for user name in nav bar*/
        box-shadow: none;
    }

        .navbar-collapse.in {
            height: inherit;
        }

    .navbar-form-search {
        min-height: 70px;
    }
}

@media (min-width: 768px) {
    .navbar__secure-icon-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        width: 100%;
        box-shadow: 30px 0 0 0 rgba(0, 0, 0, 0.14), -30px 0 0 0 rgba(0, 0, 0, 0.14);
        background-color: rgba(0, 0, 0, 0.14);
    }

    .navbar-nav__dropdown-account .dropdown-toggle i.material-icons {
        display: none;
    }

    .navbar a.navbar__btn-sign-in {
        margin-left: 10px;
        margin-right: 0;
    }

    .navbar a.navbar__btn-user {
        padding-left: 10px;
    }

    .navbar .btn.navbar__btn-language {
        margin-left: 10px;
        margin-right: 10px;
    }

    .navbar .navbar-nav > .open > a,
    .navbar .navbar-nav > .open > a:hover,
    .navbar .navbar-nav > .open > a:focus {
        color: inherit;
        background-color: rgba(255, 255, 255, 0.1);
    }
}

@media (min-width: 929px) {
    .navbar__secure-icon-list {
        display: block;
        width: auto;
        box-shadow: none;
        background-color: inherit;
    }
}

.English,
.nav > li > a.English,
.navbar-form .form-control.English {
    display: none;
}

/*.French,
.nav > li > a.French,
.navbar-form .form-control.French {
    display: none;
}*/

@media (min-width: 768px) {
    .navbar-form .form-control.English {
        display: none;
    }

    /*.navbar-form .form-control.French {
        display: none;
    }*/
}

/* -------------------------------------------------------------------------
   Favourite Toggle Component

   Extends Bootstrap button (.btn) component and Bootstrap progress component.
   Used to style the favourites button toggle.
   Three modes:
   - Empty star (default), "filled" star, and loading spinner
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   Favourite Toggle Component
   ------------------------------------------------------------------------- */
.c-fav-toggle {
    float: left;
    overflow: visible;
    position: relative;
    margin: 0 10px 0 0;
    padding: 0;
    width: 50px;
    height: 50px;
    background: none;
}

    .c-fav-toggle:after {
        content: "";
        position: absolute;
        right: -10px;
        top: 10px;
        bottom: 10px;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
    }

    /* -------------------------------------------------------------------------
   Favourite Toggle - Progress Bar
   
   Used by the "--is-loading" modifier
   ------------------------------------------------------------------------- */
    .c-fav-toggle .progress-bar {
        opacity: 0;
        width: 100%;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -ms-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

/* -------------------------------------------------------------------------
   Favourite Button
   ------------------------------------------------------------------------- */
.btn.c-fav-toggle__btn {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: inherit;
    height: inherit;
    color: #FFF;
}

    .btn.c-fav-toggle__btn:focus {
        outline: none;
    }

    .btn.c-fav-toggle__btn:before {
        content: "\E83A";
        font-family: "Material Icons";
        font-size: 28px;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }

/* -------------------------------------------------------------------------
   Favourite Toggle Component - Modifiers
   ------------------------------------------------------------------------- */
/**
 * .c-fav-toggle--is-saved
 *
 * Changes the icon to a "filled" star to indicate the favourite has been saved.
 */
@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        -webkit-transform: translateZ(0) scale(1, 1);
        -webkit-backface-visibility: hidden;
    }
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        transform: translateZ(0) scale(1, 1);
        backface-visibility: hidden;
    }
}

.c-fav-toggle--pulse-animation .btn.c-fav-toggle__btn,
.pulse-animation {
    -webkit-animation: pulse 1s forwards;
    -moz-animation: pulse 1s forwards;
    -ms-animation: pulse 1s forwards;
    -o-animation: pulse 1s forwards;
    animation: pulse 1s forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.c-fav-toggle--is-saved .btn.c-fav-toggle__btn:before {
    content: "\E838";
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    color: #71b800;
}

/**
 * .c-fav-toggle--is-loading
 *
 * Displays an indeterminate loading bar behind the star icon
 */
.c-fav-toggle--is-loading .progress-bar {
    opacity: .3;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

/**
 * .c-btn-fav--loading
 *
 * Changes the icon to an animated spinner.
 */
.btn.c-btn-fav.c-btn-fav--loading {
    -webkit-animation: fa-spin 1s infinite steps(8);
    -moz-animation: fa-spin 1s infinite steps(8);
    -ms-animation: fa-spin 1s infinite steps(8);
    -o-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8);
}

    .btn.c-btn-fav.c-btn-fav--loading:before {
        content: "\f110";
    }

/**
 * 7. Trumps: Highest specificity layer.
 * Utilities and helper classes.
 */
.material-icons {
    font-family: 'Material Icons';
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    color: inherit;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

img {
    border: none;
}

.print-header {
    display: none;
}

.noscroll {
    overflow: hidden;
}

.se h1 {
    font-size: 2em;
    color: #52657B;
}

h2 {
    font-size: 1.6em;
    color: #6C829B;
}

h3 {
    /*font-size: 1.2em;*/
    color: #000;
}

body {
    margin: 0 auto;
    max-width: 1920px;
    background: #ffffff;
    padding: 0;
    font-family: 'Lato', sans-serif !important;
}

    body.topicSearch {
        overflow: hidden;
        /* Quick fix for the double scrollbar problem... */
    }

.clearfix {
    clear: both;
}

a {
    text-decoration: none;
    color: #333;
    outline: none;
    cursor: pointer;
}

p {
    margin-top: 0;
}

input {
    outline: none;
}

#contain {
    max-width: 100%;
}

.masonry.home {
    padding-top: 40px;
}

header {
    width: 100%;
    max-width: 1920px;
    /*position: fixed;*/
    position: relative;
    /* padding-top: 8px; */
    /*height: 123px;*/
    height: auto;
    background-color: #36424A;
    /*box-shadow: 0 2px 10px -4px #000;*/
    z-index: 999;
}

    header .mdl-button--icon .material-icons {
        color: #35424A;
    }

    header .mdl-textfield__input {
        color: #35424A;
        background: #fff;
        font-size: 14px;
        padding: 4px 25px 4px 5px;
    }

    header .mdl-textfield__input {
        font-family: "Lato";
        /* background-color: #fff; */
    }

.topBar,
#container {
    max-width: 100%;
    margin: 0 auto;
}

.topBar {
    border-bottom: 5px solid #6D9324;
}

.logo {
    width: 250px;
    padding: 0 20px;
    float: left;
    margin-top: 5px;
}

    .logo a {
        display: block;
    }

.utility {
    float: right;
    height: 50px;
    top: -0px;
}

/*.user-voice {
    float: left;
    margin: 15px 10px 10px 5px;
    position: relative;
}

    .user-voice i {
        color: #bbb;
        font-size: 26px;
    }*/

.uv-icon.uv-top-right {
    display: none;
}

.home .flexslider .flex-control-nav {
    bottom: 0px;
}

.flexslider .flex-control-nav {
    z-index: 99;
}

.journeyStick + .space {
    padding: 55px 0;
}

.banner .flexslider {
    margin-bottom: 0;
    overflow: hidden;
}

.spacer {
    padding: 24px;
}

.subspacer {
    padding: 0 !important;
}

#container {
    clear: both;
    background: #fafafa;
}

.mainContent {
    width: 100%;
    display: table;
    background: #F7F7F7;
}

.masGrid {
    max-width: 1200px;
    float: left;
}

.rightSidebar {
    float: right;
}

.subContent {
    width: 100%;
    background: #FEFFFE;
    /*position: absolute;*/
}

    .subContent article {
        width: 85%;
        background: #eaeaea;
        display: inline-block;
        height: calc(100vh - 166px);
        height: calc(100vh - 166px - 30px);
        /*
        -40px for timeline, although we should look into an absolutely positioned layout.
        This would help with making the slide animations much more fluid
    box-shadow: -1px 0 0 0 #ccc;
    */
        overflow: auto;
    }

    .subContent aside {
        width: 240px;
        position: relative;
        overflow: hidden;
        display: inline-block;
        vertical-align: top;
    }

    .subContent article {
        width: calc(100% - 251px);
    }

        .subContent article.card-stack {
            width: 100% !important;
        }

#timeline-embed .vco-timeline .vco-navigation .timenav {
    position: relative;
    left: inherit;
}

/*#timeline-embed.timeline-toggle + #expandTimeline {    display: block;}*/
#timelineContainer.timeline-toggle #timeline-embed + #expandTimeline {
    display: block;
}

#timeline-embed {
    position: fixed !important;
    top: -70px !important;
    z-index: 105;
}

/*#timeline-embed.timeline-toggle {        top: 110px !important;        position:relative;        transition: all .3s ease-in-out;    }*/
#timelineContainer.timeline-toggle #timeline-embed {
    top: 90px !important;
    position: relative;
    transition: all .3s ease-in-out;
}

#expandTimeline i {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

/*#timeline-embed.timeline-toggle + #expandTimeline i {        -ms-transform: rotate(-90deg);        -webkit-transform: rotate(-90deg);        transform: rotate(-90deg);        position:relative;        top:2px;    }*/
#timelineContainer.timeline-toggle #timeline-embed + #expandTimeline i {
    -ms-transform: rotate(-90deg);
    /* IE 9 */
    -webkit-transform: rotate(-90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    position: relative;
    top: 2px;
}

#expandTimeline span.timeline-close {
    display: none;
}

.stick .vco-slider .slider-container-mask {
    background: #eee;
}

#timeline-embed.stick .vco-slider {
    box-shadow: none;
}

.sticky .vco-slider .slider-container-mask,
.sticky #expandTimeline {
    color: #fff;
}

#expandTimeline {
    height: 40px;
    position: fixed;
    z-index: 105;
    text-align: center;
    top: 90px;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ccc;
    max-width: 1920px;
}

    #expandTimeline i {
        font-size: 18px;
        line-height: 35px;
    }

span.timeline-toggle-btn {
    padding: 0 12px;
    /*background: #ddd;*/
    display: inline-block;
    cursor: pointer;
}

    span.timeline-toggle-btn:hover {
        /*background:#ccc;*/
    }

    span.timeline-toggle-btn span {
        position: relative;
        top: -2px;
        padding-left: 5px;
        font-size: 14px;
        font-family: "Lato";
        text-transform: uppercase;
    }

.timeline-toggle #expandTimeline {
    top: 250px;
    transition: .4s all;
    background: none;
    border-bottom: 0;
}

.timeline-toggle .timeline-open {
    display: none;
}

.home #journey {
    display: none;
}

#journey {
    background: #FBFBFB;
    /*max-width: calc(1920px - 251px);*/
}

.journeyTab {
    padding: 0;
}

    .journeyTab .journey-img {
        height: 40px;
        width: 40px;
        display: inline-block;
        background-size: 100%;
    }

    .journeyTab .languageItem {
        position: relative;
        top: -8px;
        color: #35424A;
    }

#journey.journeyStick {
    /*width: calc(100% - 251px);*/
    width: 100%;
    /*-webkit-box-shadow: 0 3px 5px -4px #000;
    -moz-box-shadow: 0 3px 5px -4px #000;
    box-shadow: 0 3px 5px -4px #000;*/
    /* JP - Visual Hierarchy Override */
    box-shadow: 0 1px 0 0 #CCC;
    /* moved the drop-shadow underneath the timeline, as that's what the cards now scroll under */
}

#slideout.filterStick,
#journey.journeyStick {
    /*position: fixed;*/
    /*top: 160px;*/
    position: relative;
    z-index: 5;
}

#slideout.filterStick {
    z-index: 100;
    background: #fff;
    position: fixed;
}

    /*#slideout.filterStick + div + article*/
    /* JP - made this selector less strict, as the timeline needs to live in between those adjacent selectors */
    #slideout.filterStick ~ article {
        margin-left: 251px;
    }

/*.filterClose #journey {        width: calc(100% - 40px);    }*/
.filterClose #journey.journeyStick {
    width: calc(100% - 41px);
    max-width: calc(1920px - 41px);
}

.selected .toolbox-content {
    padding-left: 15px;
}

.toolbox-title:hover {
    /*background: #fafafa;*/
}

.search-types-title {
    float: right;
    position: absolute;
    font-size: 12px;
    line-height: 30px;
    right: 20px;
    top: 10px;
}

.selected .toolbox-title:hover {
    /*background: #fafafa;*/
}

.toolboxItem .selected a, .toolboxItem .selected {
    /*background:#fff;*/
    /*margin-left:0;*/
    /*border-right:1px solid #6d9324*/
}

    .toolboxItem .selected .toolbox-title i {
        color: #fff;
    }

.toolboxItem .toolbox-applicationlinks > a {
    border: 0;
}

.toolboxItem .toolbox-content a {
    border: 0;
}

#topic-details.promoDialog .toolboxItem .selected a {
    /*background:#fff;
    border-right:1px solid #f68a1e;*/
    background: #69737b;
    color: #fff;
    overflow: visible;
    width: calc(100% + 10px);
    position: relative;
}

.promoDialog .toolboxItem {
    /*border-right:2px solid #f68a1e;*/
}

/*.selected .toolbox-internallinks .toolbox-title:hover {    background: #54657E;    }*/
#slideContainer.sideSticky {
    top: 291px !important;
    /*transition: all .3s ease-in-out;*/
}

.subContent.filterClose {
    width: calc(100% + 210px);
    left: -210px !important;
    /*TJ added this in to prevent side bar from expanding on screen resize.*/
    transition: all .3s ease;
}

.leftContent {
    clear: both;
    padding: 0 10px;
    position: relative;
    top: -15px;
    height: 100%;
    /* overflow: auto; */
}

.leftContent {
    top: 0;
}

.filterOpen .filterTitle {
    display: none;
    font-family: 'Lato';
    font-size: 16px;
    vertical-align: super;
}

.dialogContent a {
    color: #00afdc;
    text-decoration: underline;
}

.dialogContent .linkItem {
    color: inherit;
    clear: both;
    /*padding: 5px 15px 15px;*/
}

.dialogContent a:hover {
    color: #00afdc;
    text-decoration: underline;
}

.dialogContent.dialogNewsContent {
    padding-bottom: 0;
}

    .dialogContent.dialogNewsContent a,
    .dialogContent.dialogNewsContent a:hover {
        background: none;
        border: 0;
    }

.alberta-ca a {
    color: #fff;
    font-size: 0.9em;
}

/*.searchBar .mdl-textfield.is-focused input,
.searchBar .mdl-textfield.is-dirty input {
    padding: 5px;
    width: 100px;
}*/
.searchBar .mdl-textfield {
    /* padding: 18px 0 1px; */
    /* overflow: hidden; */
    /* border-bottom: 1px solid #fff; */
    width: 150px;
}

.searchBar .search-label {
    color: #35424A;
    font-size: 14px;
    /* margin-top: 3px; */
    /* cursor: pointer; */
    /* padding-right: 35px; */
    padding: 0 6px;
}

/*.mdl-textfield.is-focused .search-label,
.mdl-textfield.is-dirty .search-label {
    display: none;
}*/
.searchBar .mdl-button--icon .material-icons {
    top: 60%;
}

/***************************************/
body {
    direction: ltr;
}

#sliderContainer {
    left: -250px;
}

#slideout {
    display: inline-block;
    position: relative;
    height: 100%;
    /* overflow:visible; */
    width: 250px;
    /* box-shadow: -6px -6px 6px 10px #ccc; */
    left: -210px;
    vertical-align: top;
    /*transition:all 0.3s ease;*/
}

#slideout .mdl-textfield {
    width: 180px;
    margin-left: 15px;
}

#slideout .mdl-textfield__input,
#slideout .mdl-textfield__label {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
}

#slideout .mdl-textfield--floating-label.is-focused .mdl-textfield__label {
    font-size: 12px;
}

.toggleFilter {
    padding: 5px;
    color: #333;
    cursor: pointer;
    float: right;
}

.filterClose #slideout.filterStick {
    left: -210px !important;
}

.filterClose .toggleFilter .filterTitle {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

.filterOpen .toggleFilter i {
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

.filterClose #slideout .toggleFilter i {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

.toggleFilter i {
    font-size: 20px;
    padding: 7px;
}

#click {
    right: 0;
    z-index: 2;
    position: relative;
    display: block !important;
    overflow: visible;
}

.filterTitle {
    display: none;
}

.filterClose .filterTitle {
    position: absolute;
    right: -213px;
    top: 265px;
    padding-top: 10px;
    overflow: visible;
    height: 40px;
    font-family: 'Lato';
    font-size: 14px;
    padding-right: 400px;
}

.loading-page {
    padding: 50px;
}

.mini-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    clear: both;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 10px;
    color: #fff;
    background-color: #36424A;
}

.mini-footer .footer-logo img {
    max-width: 120px;
}

.mini-footer--left-section,
.mini-footer__left-section {
    display: inline-block;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}

.mini-footer .footer-logo {
    line-height: 36px;
}

.mini-footer .footer-logo img {
    vertical-align: middle;
}

li.social {
    float: left;
    padding: 0 12%;
}

.mobile-only li.social i {
    color: #000 !important;
}

.mini-footer--right-section,
.mini-footer__right-section {
    display: inline-block;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

.mini-footer--link-list,
.mini-footer__link-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mini-footer--link-list li,
.mini-footer__link-list li {
    margin-bottom: 0;
    margin-right: 13px;
    line-height: 40px;
}

.mini-footer--link-list a,
.mini-footer__link-list a {
    color: inherit;
    text-decoration: none;
    font-size: .9em;
    white-space: nowrap;
    font-weight: 500;
}

.banner img {
    width: 100%;
}

.signIn {
    border-radius: 2px;
    background: #00aad2;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    margin-top: 7px;
    text-align: center;
    padding: 10px 15px;
    float: right;
    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);
    font-weight: 500;
}

.searchBar {
    float: left;
    vertical-align: top;
    position: relative;
    /* top: 4px; */
}

.search,
#fontSize {
    float: left;
    margin-right: 10px;
    margin-top: 15px;
}

.langSel {
    margin: 0 auto;
    text-align: center;
}

nav.breadcrumbs {
    position: fixed;
    top: 90px;
    width: 100%;
    display: none;
    min-height: 30px;
    background: #e1e1e1;
}

nav.breadcrumbs ul {
    margin: 4px 0;
    font-size: 12px;
    padding: 0 20px;
}

.breadcrumbs li {
    float: left;
    list-style: none;
    margin: 0 2px;
}

.search input[type="text"] {
    padding: 10px 10px 10px 40px;
    background-image: url(/images/searchIcon.png);
    background-repeat: no-repeat;
    border: 0;
    background-position: 5px center;
    font-size: 18px;
    background-color: #F9F9F9;
}

ul.textresizer {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
}

ul.textresizer li {
    float: left;
    margin: 0;
    margin-right: 0;
    padding: 0;
    height: 38px;
    width: 60px;
    line-height: 16px;
    border: 1px solid #fff;
    vertical-align: middle;
    text-align: center;
}

ul.textresizer a {
    display: block;
    padding: 10px 0;
    font-weight: 700;
    text-decoration: none;
    color: #999;
}

ul.textresizer a:hover {
    background: #e5e5e5;
    border: solid 1px #ccc;
    color: #00ADD8;
}

ul.textresizer .small-text {
    font-size: .8em;
}

ul.textresizer .medium-text {
    font-size: .9em;
}

ul.textresizer .large-text {
    font-size: 1em;
}

/* Style of active button */
ul.textresizer a.textresizer-active {
    border: solid 1px #fff;
    background: #fff;
    color: #333;
}

/* End of Text Resizer Buttons */
.masonry,
.contain {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    clear: both;
    position: relative;
}

.masonry .item {
    /*Width x2 default*/
    width: 370px;
    height: 240px;
    float: left;
    margin: 10px;
}

.item.w1 {
    width: 185px;
}

.item.w3 {
    width: 760px;
}

.item.h2 {
    height: 560px;
}

.masonry.home .item {
    width: 580px;
    height: 280px;
    float: left;
    margin: 0.5%;
    transition: all ease .1s;
}

.masonry.home .item:hover {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.24), 0 0 4px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(2, 98, 194, 0.12);
}

.masonry.home .item.card.postSecondary,
.masonry.home .item.card.administration {
    /* height: 160px; */
    width: 49%;
}

.masonry.home .item.card.postSecondary .home-link-box,
.masonry.home .item.card.administration .home-link-box {
    /* display: none; */
}

.home .item.w1 {
    width: 24%;
}

.home .item.w3 {
    width: 32%;
}

.home .item.w4 {
    width: 99%;
}

.home .banner.item.w4 {
    height: auto;
}

.home .banner.item.w4:hover {
    transform: none;
    box-shadow: none;
}

.home .item.h2 {
    height: 600px;
}

/*---Card styles---*/
.filterClose .tileContent {
    width: 24%;
}

.tileContent {
    float: left;
    width: 32%;
    margin: 0 .5% 1%;
    position: relative;
    background-color: #fff;
    position: relative;
    z-index: 2;
    height: 229px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}

.tileContentNoResults {
    /*display:none;*/
}

.card {
    cursor: pointer;
}

.card h1 {
    width: 172px;
    float: left;
    padding: 10px;
    color: #fff;
}

.card .subTopicList {
    width: 110px;
    float: right;
    list-style: none;
    padding: 10px;
}

.card .subTopicList li {
    border-radius: 3px;
    border: 1px solid #fff;
    padding: 5px;
    margin-bottom: 2px;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.subContent .card {
    background: #fff;
}

.card-topics {
    width: 37%;
    float: left;
    background: #F7F9FB;
    height: 100%;
    border-radius: 0;
    overflow: auto;
    text-align: right;
    padding-top: 10px;
}

.newsTile .card-topics {
    background: #F7F9FB;
}

.topic-content,
a .topic-content {
    margin: 0px 10px 10px;
    overflow: hidden;
    width: calc(63% - 20px);
    height: 159px;
    float: left;
    font-size: 14px;
    position: relative;
    line-height: 21px;
    color: #36424A;
    font-weight: 400;
}

    .topic-content p {
        font-size: 1em;
        font-weight: 400;
        margin-bottom: 0;
        /* line-height: 21px; */
    }

div#cardContainerLoading {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.mdl-progress {
    height: 5px;
}

.cardPreview {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    height: 50px;
    width: 100%;
    left: 1px;
    z-index: 0;
    top: 0;
    background-color: #fff;
}

.newsTile .cardPreview {
    background-color: #F0FAFC;
}

.cardPreviewContainer {
    font-weight: 700;
    font-size: 15px;
    position: absolute;
    background: #F7F9FB;
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 20px;
    left: 0;
    top: 0;
}

.linkCardPreview {
    padding-top: 40px;
    padding-bottom: 10px;
}

.cardPreviewTitleRow {
    margin: 0 auto;
    width: 240px;
    text-align: center;
}

.cardPreviewTitleContainer {
    display: inline-block;
    text-align: center;
    width: 85%;
    white-space: nowrap;
}

.cardPreviewIcon {
    display: inline-block;
    float: left;
    position: relative;
    width: 15%;
}

.cardPreviewImage {
    height: 65px;
}

.listDisplay .cardPreviewImage {
    height: auto;
}

.cardNewsPreview {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    top: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: #fff;
}

.card .eventContentPreview {
    position: absolute;
    width: 75px;
    height: 75px;
    left: 0;
    top: -30px;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    line-height: 75px;
    background: url(/images/cal-event-bg.png) no-repeat center center;
}

.card .eventMonthPreview {
    position: absolute;
    width: 75px;
    height: 75px;
    left: 0;
    top: -30px;
    text-align: center;
    line-height: 145px;
    font-size: 14px;
    font-weight: 700;
}

.listDisplay .cardNewsPreview .cardPreviewTitle {
    /*margin-top: 10%;*/
}

.mediaContainer:before {
    content: "\f144";
    position: absolute;
    width: 100%;
    left: 0;
    opacity: 0.7;
    color: #fff;
    top: 40%;
    right: 0;
    font-family: FontAwesome;
    margin: 0 auto;
    font-size: 80px;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.mediaContainer {
    position: absolute;
    width: 100%;
}

.belowCardPreview {
    margin-top: 113px;
}

.listDisplay .belowCardPreview {
    padding-top: 0;
}

.leftCardArrow {
    float: left;
}

.rightCardArrow {
    float: right;
}

.previewContent {
    /*text-align: center;*/
    margin: auto;
}

.cardPreviewTitle {
    overflow: hidden;
    font-weight: 700;
    font-size: 15px;
    text-overflow: ellipsis;
}

.listDisplay .cardPreviewTitle {
    font-size: 1em;
    font-weight: normal;
}

.cardNewsPreview .cardPreviewTitle {
    text-align: left;
    white-space: normal;
    padding: 5px 0;
}

.listDisplay .cardNewsPreview .cardPreviewTitle {
    padding: 0;
}

.cardPreviewDescription {
    overflow: hidden;
    text-align: left;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.listDisplay .previewContent {
    /*width: 500px;*/
    position: relative;
    float: left;
}

.list-display-only {
    display: none;
}

/*.card.earlyChildhood {
    background: #EC098C;
    margin-left: 30px;
}

    .card.earlyChildhood:hover {
        background: #d80a7f;
    }

    .card.earlyChildhood h1 {
        background: url(/images/early-childhood.png) no-repeat center 20px;
        background-size: 30%;
    }

.card.elementary {
    background: #00AFDC;
}

    .card.elementary:hover {
        background: #00a3cc;
    }

    .card.elementary h1 {
        background: url(/images/elementary.png) no-repeat center 20px;
        background-size: 30%;
    }

.card.juniorHigh {
    background: #FFD400;
}

    .card.juniorHigh:hover {
        background: #f2c500;
    }

    .card.juniorHigh h1 {
        background: url(/images/juniorhigh.png) no-repeat center 20px;
        background-size: 30%;
    }

.card.highSchool {
    background: #8CC63E;
    margin-left: 30px;
}

    .card.highSchool:hover {
        background: #7daf36;
    }

    .card.highSchool h1 {
        background: url(/images/highschool.png) no-repeat center 20px;
        background-size: 30%;
    }

.card.postSecondary {
    background: #D06F19;
}

    .card.postSecondary:hover {
        background: #af5f18;
    }

    .card.postSecondary h1 {
        background: url(/images/ministry.png) no-repeat center 20px;
        background-size: 15%;
    }

.card.administration {
    background: #69737B;
}

    .card.administration:hover {
        background: #51585e;
    }

    .card.administration h1 {
        background: url(/images/school-system.png) no-repeat center 20px;
        background-size: 15%;
    }*/

/*.card.earlyChildhood:hover h1 {    background: url(/images/animated/early.gif) no-repeat center 5px;    background-size: 27%;}.card.elementary:hover h1 {    background: url(/images/animated/elementary.gif) no-repeat center 21px;    background-size: 16%;}.card.juniorHigh:hover h1 {    background: url(/images/animated/junior.gif) no-repeat center 16px;    background-size: 18%;}.card.highSchool:hover h1 {    background: url(/images/animated/high-school.gif) no-repeat center 18px;    background-size: 18%;}.card.postSecondary:hover h1 {    background: url(/images/animated/ministry.gif) no-repeat center 17px;    background-size: 9%;}.card.administration:hover h1 {    background: url(/images/animated/school.gif) no-repeat center 9px;    background-size: 11%;}*/
.tileContent.listDisplay {
    width: 98% !important;
    float: none;
    height: auto;
    min-height: 100px;
    display: block;
}

.tileContent.listDisplay .preview-image {
    display: none !important;
}

.tileContent.listDisplay .card {
    height: auto;
}

.tileContent.listDisplay .resourceType {
    padding: 10px 5px;
    margin: 5px;
    width: 28%;
}

.tileContent.listDisplay h1.topic {
    padding: 10px 1%;
    width: 98%;
}

.tileContent.listDisplay span.subTopic {
    display: none;
}

.tileContent.listDisplay .card-topics {
    display: none;
    width: 20%;
    box-shadow: none;
    border-right: 1px solid #ccc;
    float: none;
    min-height: 170px;
    height: auto;
    vertical-align: top;
}

.tileContent.listDisplay .topic-content {
    width: 77%;
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: middle;
    height: auto;
    /*min-height: 35px;*/
}

.tileContent.listDisplay iframe,
.tileContent.listDisplay img {
    display: none;
}

.tileContent.listDisplay .internalLinksCardContainer,
.tileContent.listDisplay .externalLinksCardContainer,
.tileContent.listDisplay .resourcesCardContainer,
.tileContent.listDisplay .eventsCardContainer,
.tileContent.listDisplay .faqsCardContainer,
.tileContent.listDisplay .pollsCardContainer,
.tileContent.listDisplay .mediaCardContainer,
.tileContent.listDisplay .contactCardContainer {
    display: none;
}

.tileContent.listDisplay .list-display-only {
    display: block;
    float: left;
}

h5.category {
    font-size: .7em;
    color: #fff;
    position: absolute;
    background: #ADB9CA;
    bottom: 0;
    right: 10px;
    padding: 0 5px;
    border-radius: 3px;
}

h1.topic {
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
    width: calc(100% - 40px);
    background: #6A747D;
    line-height: 28px;
}

h1.topicDetailsHeader span {
    float: left;
    padding-right: 5px;
}

.topic-details h1.topic {
    padding: 0px 20px 0 0;
    width: calc(100% - 290px);
}

.mdl-modal h1.topic {
    padding: 0;
}

.newsTile h1.topic {
    background: #005983;
    color: #fff;
}

.promoTile h1.topic {
    background: #F68A1E;
    color: #fff;
}

.promoTile .card-topics {
    background: #F7F9FB;
}

.back-arrow {
    cursor: pointer;
}

.back-arrow i.material-icons {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    font-size: 21px;
    color: #6A747D;
}

.promoDialog .back-arrow i.material-icons {
    color: #F68A1E;
}

.newsDialog .back-arrow i.material-icons {
    color: #005983;
}

.sub-topic {
    margin: 0px 0;
    padding: 6px 6px;
    font-size: 1em;
    font-weight: 400;
    display: block;
    border-radius: 0;
    color: #36424A;
    overflow: hidden;
    /* width: calc(100% - 12px); */
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sub-topic:hover,
.topic-details .sub-topic:hover {
    background-color: #fff;
}

.dialogToolbox,
.toolboxItemContainer {
    margin: 0px 10px 0px 0px;
}

.toolboxItemContainer {
    background: #F4FAEC;
}

.dialogToolbox {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    z-index: 3;
    right: 0px;
    margin-top: 0;
}

.cardToolbox img,
.dialogToolbox img {
    cursor: pointer;
}

.cardToolbox a {
    float: right;
}

.hover-card a.card {
    transition: all .1s;
}

.tileContent:hover {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.24), 0 0 4px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(2, 98, 194, 0.12);
    outline: 0;
    /*transform: translate3d(0,-2px,0);*/
}

.tileContent:hover h1.topic {
    background: #36424A;
}

.promoTile:hover h1.topic {
    background: #ca6706;
}

.newsTile:hover h1.topic {
    background: #004567;
}

h1.topic span {
    /*max-width: 90%;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    /* padding: 2px 0; */
}

header .fr-eng-toggle button {
    min-width: 0;
    padding: 0 0 0 8px;
}

/*---Resource card styles---*/
.resourceType {
    display: inline-block;
    padding: 0;
    background: #F7F9FB;
    width: 30.5%;
    color: #54657E;
    text-align: center;
    font-size: 10.5px;
    height: 46px;
}

.listDisplay .resourceType {
    margin-top: 0;
}

.resourceTypeNumber {
    font-size: 2em;
    font-weight: 700;
}

/*---Link card styles---*/
.linkType {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 2px 0;
    background: #F7F9FB;
    font-size: .75em;
}

.listDisplay .linkType {
    margin-top: 0;
}

.linkTypeCount {
    font-size: 2em;
    font-weight: 700;
}

/*---Event card styles---*/
.eventType {
    display: inline-block;
    background: #F7F9FB;
    padding: .75%;
    margin: .75%;
    width: 46%;
    height: 30%;
    text-align: center;
    font-size: .75em;
    margin-top: 110px;
}

.listDisplay .eventType {
    margin-top: 0;
}

.eventTypeCount {
    font-size: 2em;
    font-weight: 700;
}

.cardEventTitle {
    margin-left: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*---Tab styles----*/
/*.filterClose .journeyTab {width: calc(100% + 40px);}*/
.journeyTab {
    padding: 0;
    float: left;
    background: #fff;
    width: 100%;
    padding-top: 10px;
    /*border-bottom: 1px solid #ccc;*/
    /* JP - Visual Hierarchy Override */
    background: #f7f7f7;
}

.journeyTab a {
    display: inline-block;
    margin: 0 .5px;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    width: 16.5%;
    text-align: center;
}

.journeyTab a:hover,
.journeyTab a:focus {
    text-decoration: none;
}

.journeyTab a.selected {
    background: #f7f7f7;
    /* JP - Visual Hierarchy Override */
    background: #FFF;
    border-bottom: 3px solid #FFF;
}

.journeyTab .earlyChildhoodTab.selected span {
    color: #ec098c;
}

.journeyTab .elementaryTab.selected span {
    color: #00afdc;
}

.journeyTab .juniorHighTab.selected span {
    color: #ffd400;
}

.journeyTab .highSchoolTab.selected span {
    color: #8cc63e;
}

.journeyTab .postSecondaryTab.selected span {
    color: #d06f19;
}

.journeyTab .administrationTab.selected span {
    color: #69737b;
}

/*.journeyTab a:first-child {    margin-left: 20px;}*/


/*.filterClose .refinements-container {    width: calc(100% + 20px);}*/
.filterClose .filterSlide .refinements-container {
    width: calc(100% - 20px);
}

.refinements-container {
    position: relative;
    padding: 5px 13px;
    clear: both;
    min-height: 45px;
    background: #F7F7F7;
    /* JP - Visual Hierarchy Override */
    background: #FFF;
}

.refinements-innerContainer {
    display: none;
}

.journey-dd {
    display: none;
}

.journey-dd-container {
    display: none;
}

#category-container {
    width: calc(100% - 175px);
    float: left;
}

#category-container ul {
    padding: 0;
    margin: 0;
}

#category-container li {
    float: left;
    margin: 0 5px 5px;
    padding: 2px;
    list-style-type: none;
    border-radius: 3px;
    background: #eee;
    border: 1px solid #A9B7C7;
}

#category-container li.ParentPill {
    background: #0055A0;
}

#category-container li.TeacherPill {
    background: #71B62C;
}

#category-container li.StudentPill {
    background: #00A8CE;
}

#category-container li.SchoolAdministratorPill {
    background: #AB52A1;
}

#viewSelector {
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 10px;
    display: none;
}

.view-inactive {
    background-color: #FFF !important;
    color: #767676 !important;
}

.tileContent .mdl-button--icon .material-icons {
    display: none;
}

.tileContent:hover .mdl-button--icon .material-icons {
    color: #fff;
    display: block;
}

/*---Content styles---*/
.mainContent .rightContent {
    padding: 30px;
}

.welcome {
    overflow: hidden;
    text-align: center;
    background: #fff;
    padding: 5px;
}

.news {
    background: #fff;
    padding: 5px;
}

.welcome p, .news p {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    margin: 0;
}

.minister-image {
    float: right;
    width: 51%;
    padding: 2%;
}

.minister-image img {
    width: 100%;
}

.minister-title {
    height: 100%;
    background: #fff;
    float: right;
    width: 41%;
    text-align: left;
    padding: 0 2%;
}

.minister-title ul {
    padding: 0 0 0 17px;
    line-height: 15px;
    font-size: 12px;
    margin-top: 5px;
}

.minister-title a, .minister-image a {
    color: #5f6a72;
    text-decoration: underline;
    font-size: 12px;
}

.minister-title a:hover, .minister-image a:hover {
    color: #3c4348;
    text-decoration: underline;
}

.card-container {
    padding: 20px 10px;
}

.newsItem {
    padding: 10px;
    background: #fff;
    border-bottom: 5px solid #f7f7f7;
}

.newsItem:nth-child(even) {
    background: #fafafa;
}

.langSel ul {
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.langSel ul a {
    display: block;
    padding: 2px 5px;
}

#timeline-embed {
    float: left;
    position: fixed;
    z-index: 100;
    top: -50px;
    /* min-height:180px; */
    max-width: 1920px;
    border-bottom: 1px solid #ccc !important;
}

.upcoming {
    float: left;
    width: 15%;
    background: #000;
    display: none;
    min-height: 210px;
}

.filterClose .slide-out-div {
    display: none;
}

.slide-out-div {
    padding: 15px 0 0;
    height: 100%;
    display: block;
    /* overflow: auto; */
}

.slide-out-div .handle {
    background: url(/images/openSlideOut.png) no-repeat #eee;
    height: 100%;
    width: 40px;
}

.slide-out-div .handle:hover {
    background: url(/images/openSlideOut.png) no-repeat #bbb;
    height: 100%;
    width: 40px;
}

.slide-out-div.open .handle {
    background: url(/images/closeSlideOut.png) no-repeat #bbb;
    height: 100%;
    width: 40px;
}

.slide-out-div.open .handle:hover {
    background: url(/images/closeSlideOut.png) no-repeat #bbb;
    height: 100%;
    width: 40px;
}

.toggleBtn {
    cursor: pointer;
}

.toggle {
    float: right;
}

.favorites {
    padding: 0 2%;
    width: 96%;
}

.favoritesInner {
    padding: 10px;
    background: #fff;
    border-radius: 3px;
}

h3.slideFilterHeading {
    padding: 10px 20px;
}

.filterCategories,
.filterPersona {
    padding: 0;
    width: 100%;
    font-size: 10px;
    overflow: auto;
    height: calc(100vh - 245px);
}

ul.categories {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

#topic-details .category-container {
    list-style: none;
    width: 100%;
    padding: 0;
    margin-top: 20px;
}

ul.categories li {
    width: 96%;
    /* float: left; */
    margin: 2px 0;
    background: #f2f2f2;
    border-radius: 3px;
    padding: 3px 2%;
}

#topic-details ul.categories li {
    width: calc(100% - 40px);
    /* float: left; */
    margin: 10px 15px;
    background: none;
    border-radius: 0px;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #6D9324;
    float: none;
    display: block;
}

#topic-details.promoDialog ul.categories li {
    width: calc(100% - 40px);
    /* float: left; */
    margin: 10px 15px;
    background: none;
    border-radius: 0px;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #FF7900;
    float: none;
    display: block;
}

ul.categories li:hover {
    background: #e5e5e5;
}

#topic-details ul.categories li:hover {
    background: #F4FAEC;
}

#topic-details.promoDialog ul.categories li:hover {
    background: #FFF1E5;
}

.category-title {
    margin-left: 0;
    color: #3d4d65;
    line-height: 14px;
    display: inline-block;
}

.toggleBtn .category-title {
    width: 175px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
}

.categories li.selected .category-title {
    font-weight: 500;
}

#category-container .category-title {
    color: #46545F;
}

#category-container .persona-pill-title {
    color: #fff;
}

.categories .mdl-badge {
    margin-right: 20px;
    vertical-align: top;
}

.categories .mdl-badge[data-badge]:after {
    content: attr(data-badge);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: -3px;
    right: -15px;
    font-family: "Lato", "Helvetica", "Arial", sans-serif;
    font-weight: 700;
    font-size: 7px;
    width: 13px;
    height: 13px;
    color: #fff;
    border-radius: 50%;
    background: #a5b6c9;
    box-shadow: none;
}

.category-filter {
    padding-left: 5px;
}

.category-filter .mdl-badge[data-badge]:after {
    height: 15px;
    width: 15px;
    background: #fff;
    color: #00add8;
    box-shadow: none;
    font-size: 10px;
    top: 0;
    right: -20px;
}

.categories li.selected .mdl-badge[data-badge]:after {
    background: #8091A5;
}

i.category-close {
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    padding: 0 5px;
    vertical-align: middle;
}

.filterPersona {
    margin-top: 30px;
    clear: both;
}

/*---Indicator styles-----*/
.cardToolbox {
    position: absolute;
    margin: 11px 0 0;
    right: 10px;
    display: inline;
    z-index: 2;
    cursor: pointer;
    display: none;
    /*width: 70px;*/
}

/*.onoffswitch {    position: relative;    width: 60px;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    }    .onoffswitch-checkbox {        display: none;    }    .onoffswitch-label {    display: block;    overflow: hidden;    cursor: pointer;    border: 1px solid #ADB9CA;    border-radius: 3px;    }    .onoffswitch-inner {    display: block;    width: 200%;    margin-left: -100%;    transition: margin .3s ease-in 0;    }.onoffswitch-inner:before,.onoffswitch-inner:after {    display: block;    float: left;    width: 50%;    height: 22px;    padding: 0;    line-height: 22px;    font-size: 11px;    color: #fff;    font-family: 'Lato';    font-weight: 700;        box-sizing: border-box;    }    .onoffswitch-inner:before {        content: "ON";        padding-left: 5px;    background-color: #F1F1F1;    color: #8091A5;    }    .onoffswitch-inner:after {        content: "OFF";        padding-right: 5px;    background-color: #F1F1F1;    color: #ADB9CA;        text-align: right;    }    .onoffswitch-switch {        display: block;        width: 25px;        margin: 3px;        background: #A9B7C7;        position: absolute;        top: 0;        bottom: 0;        right: 29px;        border-radius: 3px;        transition: all .3s ease-in 0;    }    .onoffswitch-checkbox:checked + .onoffswitch-label {    border: 1px solid #8091A5;    }    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {        margin-left: 0;    }    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {    right: 0;        background-color: #8091A5;     }*/
/*-----French / English selector-----*/
.fr-eng-toggle {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    float: left;
    margin: 10px 10px;
}

.fr-eng-switch-checkbox {
    display: none;
}

.fr-eng-switch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ADB9CA;
    border-radius: 3px;
}

.fr-eng-switch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin .3s ease-in 0;
}

.fr-eng-switch-inner:before,
.fr-eng-switch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 22px;
    padding: 0;
    line-height: 22px;
    font-size: 11px;
    color: #fff;
    font-family: 'Lato';
    font-weight: 700;
    box-sizing: border-box;
}

.fr-eng-switch-inner:before {
    content: "FR";
    padding-left: 5px;
    background-color: #F1F1F1;
    color: #8091A5;
}

.fr-eng-switch-inner:after {
    content: "EN";
    padding-right: 5px;
    background-color: #F1F1F1;
    color: #ADB9CA;
    text-align: right;
}

.fr-eng-switch-switch {
    display: block;
    width: 25px;
    margin: 3px;
    background: #A9B7C7;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 29px;
    border-radius: 3px;
    transition: all .3s ease-in 0;
}

.fr-eng-switch-checkbox:checked + .fr-eng-switch-label {
    border: 1px solid #fff;
}

.fr-eng-switch-checkbox:checked + .fr-eng-switch-label .fr-eng-switch-inner {
    margin-left: 0;
}

.fr-eng-switch-checkbox:checked + .fr-eng-switch-label .fr-eng-switch-switch {
    right: 0;
    background-color: #8091A5;
}

.indicator li {
    height: 6px;
    width: 6px;
    list-style-type: none;
    border-radius: 50%;
    opacity: .1;
    float: left;
    margin: 0 2px;
}

    .indicator li.active {
        opacity: 1;
    }

.earlyChildhood-ind {
    background-color: #db0070;
}

.elementary-ind {
    background-color: #ff772a;
}

.juniorHigh-ind {
    background-color: #f2b533;
}

.highSchool-ind {
    background-color: #0055a0;
}

.postSecondary-ind {
    background-color: #71b62c;
}

.administration-ind {
    background-color: #ab52a1;
}

.sideBottom {
    position: absolute;
    bottom: 50px;
    width: 100%;
    /* right: 0; */
}

/*-----Modal Styles-----*/

/* Styles for dialog window */
.topic-details {
    text-align: left;
    width: 100%;
    position: relative;
    height: 100%;
}

.topic-container {
    margin-top: 20px;
}

.subTopics a {
    /*margin-bottom: 10px;*/
    /*height: 47px;*/
    color: #455560;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 8px 4px 8px 14px;
    background-image: none;
}

.subTopics a:before {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 0;
    height: 1px;
    width: 90%; /* or 100px */
    border-bottom: 1px solid #afb6ba;
}

.topic-details .subTopic {
    /*display: block;*/
    color: #36424A;
    text-align: left;
    font-weight: 700;
    font-size: small;
    padding: 11px 18px 12px;
    margin-right: 10px;
    /*background: #e4e4e4;*/
    /*border-left: 2px solid #6d9324;*/
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    position: relative;
    display: flex;
    align-items: center;
}

.topic-details .subTopic.selected {
    background-color: #005983;
    color: #fff;
    /*border-left: 4px solid #6d9324;*/
    margin-right: 0;
    padding-right: 15px;
    overflow: visible;
    border-bottom: none;
    border-right: none;
    margin-top: -1px;
}

.topic-details .subTopic.selected:before {
    border-bottom: none;
}

.topic-details .subTopic.selected:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 0 21px 12px;
    border-color: transparent transparent transparent #005983;
    position: absolute;
    right: -10px;
    top: 1px;
    z-index: 1;
}

a.subTopic {
    height: 47px;
    border-radius: 0px;
    text-decoration: none;
}

a.selected {
    border-radius: 5px;
}

.subTopic {
    width: 100%;
    max-width:250px;
    min-width: 175px;
}


.subTopic:hover {
    border-bottom: none !important;
}




.topic-details .toolboxItem .selected a {
    background-color: #6D9324;
    color: #fff;
    /*border-left: 4px solid #6d9324;*/
    margin-right: 0;
    padding-right: 0px;
    overflow: visible;
    /*width: 240px;*/
    /*width: calc(100% + 10px);*/
    position: relative;
}

#topic-details .subTopics .toolboxItemContainer .toolboxItem .selected a:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 23px 0 23px 12px;
    /*border-color: transparent transparent transparent #6D9324;*/
    position: absolute;
    right: -10px;
    top: 0px;
    z-index: 1;
}

#topic-details.promoDialog .subTopic {
    /*border-left:2px solid #f68a1e;*/
}

#topic-details.promoDialog .subTopic.selected {
    /*border-left:4px solid #FF7900;*/
    background: #FF7900;
    color: #fff;
    overflow: visible;
    /*display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #6980fe;*/
}

    #topic-details.promoDialog .subTopic.selected:after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #FF7900;
        position: absolute;
        right: -10px;
        top: 11px;
    }

#topic-details.promoDialog .subTopics .toolboxItemContainer .toolboxItem .selected a:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #FF7900;
    position: absolute;
    right: -10px;
    top: 5px;
}

#topic-details.newsDialog .subTopic {
    /*border-left:2px solid #005983;*/
}

    #topic-details.newsDialog .subTopic.selected {
        /*border-left:4px solid #005983;*/
    }

.dialogTopics .desktop-only img {
    position: absolute;
    bottom: 10px;
    left: 5px;
}

.mdl-layout__header {
    box-shadow: none;
    min-height: 40px;
}

.dialogNewsContent {
    width: 76%;
}

.dialogTopics {
    /*width: 20%;*/
    width: 230px;
    min-width: 230px;
    float: left;
    display: table-cell;
    height: 100%;
}

.dialogContent {
    width: 100%;
    padding: 20px 2% 50px;
    padding: 20px 2% 0;
    float: left;
    background: #fff;
    display: table-cell;
    /*height: calc(100vh - 165px);*/
    /*height: calc(100vh - 250px);*/
    /*overflow-y: auto;
    overflow-x: hidden;*/
    line-height: normal;
}

.subTopicMainContent {
    overflow: hidden;
    width: 75%;
    float: left;
}

.promoDialog .dialogContent .toolboxItem {
    border: 0;
}

.dialogContent img {
    /*width: 100%;
    max-height: 150px;*/
}

.dialogTool {
    width: 25%;
    float: left;
    /*background: #fafafa;*/
    display: table-cell;
}

.dialogNewsContent {
    width: 76%;
}

.dialogDesc {
    color: #5F6A72;
    /*font-style: italic;*/
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D1D4D3;
}

#topic-details footer {
    display: flex;
    position: absolute;
}

.responsiveFooter {
    display: none;
}

.dialogTitle {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 28px;
    color: #5F6A72;
    /*display: none;*/
}

.toolbox-title-area {
    position: relative;
    margin-bottom: 10px;
    /*background:#F4FAEC;*/
    padding: 10px 50px;
    /*color:#6D9324;*/
    color: #5f6a72;
}

    .toolbox-title-area .dialogTitle {
        /*color:#6D9324;*/
    }

.promoDialog .toolbox-title-area {
    color: #FF7900;
}

.promoDialog .toolbox-title-area .dialogTitle {
    color: #FF7900;
}

.newsDialog .toolbox-title-area {
    color: #005072;
}

.newsDialog .toolbox-title-area .dialogTitle {
    color: #005072;
}

.toolbox-title-area .material-icons {
    position: absolute;
    left: 10px;
    color: inherit;
}

.toolbox-content-area {
    padding: 0 50px;
    font-size: 16px;
    line-height: 24px;
}

    .toolbox-content-area li,
    .newsArticle li {
        /*margin-left: 20px;*/
        margin-left: 0;
    }

.htmlContentArea > ul,
.htmlContentArea > ul > li > ul {
    padding-left: 20px;
}

    .htmlContentArea > ul > li,
    .htmlContentArea > ul > li > ul > li {
        line-height: 34px;
        /*list-style: circle;*/
        margin-top: 8px;
        margin-left: 20px;
        /* override chrome user agent styles */
        line-height: 24px;
        -webkit-margin-before: 8px;
        -webkit-margin-after: 0px;
        -webkit-margin-start: 20px;
        -webkit-margin-end: 0px;
        -webkit-padding-start: 0px;
    }

.htmlContentArea h3 {
    padding-top: 20px;
}

/*----Resource modal styles-----*/
.dialogFind {
    padding: 0 20px 20px;
    background: #FAFAFA;
    margin: 20px 0;
}

select {
    /*border: 0; conficts with mvc grid*/
    border-bottom: 1px solid #8493A8;
    background: #FFF;
    color: #36424A;
    /*padding: 4px; conficts with mvc grid*/
    /*margin-left: 10px;*/
    outline: none;
    margin-top: 21px;
}

    select.personaList {
        border: 0;
        border-bottom: 1px solid #8493A8;
        background: transparent;
        color: #36424A;
        padding: 5px 0;
        width: 100%;
        margin-left: 0;
        outline: none;
    }

.table {
    display: table;
    width: 100%;
}

.dialogSortRow {
    display: table-header-group;
    width: 100%;
}

.folderItem {
    display: table-row-group;
    width: 100%;
}

.dialogSort,
.listItem {
    display: table-row;
    width: 100%;
}

.table .listItem:hover {
    background: #E5F6FA;
}

.resourceFolder {
    margin-bottom: 10px;
}

/*------- hide table headers -------------*/
.dialogSort {
    display: none;
}

.sortItem,
.sortType,
.sortSize,
.sortDate,
.itemName,
.itemType,
.itemSize,
.itemDate {
    display: table-cell;
}

.sortItem {
    background: #ccc;
    width: 250px;
    padding: 5px;
    margin: 0 1px;
    text-align: left;
    border-right: 1px solid #fff;
}

.sortType,
.sortSize,
.sortDate {
    background: #ccc;
    padding: 5px;
    margin: 0 1px;
    text-align: center;
    border-right: 1px solid #fff;
}

.itemDate,
.itemType,
.itemSize {
    text-align: center;
    padding: 5px;
}

.itemName {
    text-align: left;
    padding: 5px;
}

.folderName {
    background: #e4e4e4;
    padding: 5px;
    color: #54657e;
    font-weight: 700;
    margin-bottom: 3px;
}

    .folderName:hover {
        /*background:#ddd;*/
    }

    .folderName .resourceDetails,
    .folderName .faqDetails {
        display: table-cell;
        width: 100%;
        height: 60px;
        vertical-align: middle;
    }

    .folderName .toggleArrow {
        display: table-cell !important;
        float: none !important;
        vertical-align: middle;
    }

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}

/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: .6;
}

/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

.topic-details .subtopicInfo {
    display: none;
}

    .topic-details .subtopicInfo.first {
        display: block;
    }

.relativePosition {
    position: relative;
}

/*News Styling*/
.newsListing {
    position: relative;
    padding: 5px 50px 5px 5px;
    background: #F9F9F9;
    background: #F9F9F9;
    margin-bottom: 3px;
    cursor: pointer;
}

    .newsListing:hover {
        background-color: #005983;
        color: #fff;
    }

        .newsListing:hover .newsDetails,
        .newsListing:hover .newsIcon,
        .newsListing:hover .newsTypeText,
        .newsListing:hover .newsListingDetails {
            color: #fff;
        }

.newsTypeText {
    /*display: inline-block;
    float: right*/
    margin-top: 5px;
    margin-right: -20px;
    text-align: right;
}

.newsIcon {
    position: absolute;
    top: 10px;
}

.newsDetails {
    margin-left: 30px;
    display: inline-block;
    /*width: 80%;*/
}

.newsListingDetails {
    margin-left: 30px;
    display: inline-block;
    width: 100%;
}

.newsHeadline {
    display: inline-block;
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    max-width: 90%;
}

.news-date {
    display: block;
}

.news-description {
    font-size: 1em;
    display: none;
}

.newsDate {
    margin-left: 50%;
    font-weight: 700;
}

.newsListingDetails .newsDate {
    margin-left: 0;
}

.newsLink {
    cursor: pointer;
    display: block;
}

.newsDisplay {
    display: block;
    background: #fff;
    /*padding-bottom: 20px;*/
    /*opacity: .95;*/
    height: 100%;
    width: auto;
    position: relative;
    /*overflow-x: hidden;
    overflow-y: auto;*/
}

    .newsDisplay .topImage,
    .newsDisplay .bottomImage {
        width: auto;
    }

    .toolbox-content-area .topImage, .newsDisplay .topImage {
        padding-bottom: 10px;
    }

    .toolbox-content-area .bottomImage, .newsDisplay .bottomImage {
        padding-top: 10px;
    }

.newsArticle {
    background-color: white;
}

/*Calendar toolbox style*/
.eventList {
    display: block;
    background: #fff;
    padding-bottom: 20px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.eventListing {
    margin-bottom: 5px;
    padding: 10px 0;
}

.calContainer {
    padding: 10px 0 20px;
    background: #eee;
    border-radius: 3px;
    margin-top: 0;
}

.fc-emptydate {
    opacity: .2;
}

.calDiv {
    height: 250px;
    padding-bottom: 8px;
}

.eventTitle {
    font-size: 1.25em;
    font-weight: 700;
}

.slideClose {
    cursor: pointer;
    float: right;
    top: 0;
    position: absolute;
    right: 0;
}

.toolbox-content-area {
    position: relative;
}

.eventDescription {
    display: inline;
}

.eventDate {
    color: #00add8;
    font-weight: 700;
}

.dayEventHeader {
    text-align: center;
    margin-top: 20px;
}

.dayEvent {
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px;
}

.eventLocation {
    display: inline-block;
    color: #fff;
    background-color: #6d9324;
    padding: 10px;
    width: calc(22% - 20px);
    height: 65px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    float: left;
    overflow: hidden;
}

.eventDetails {
    display: inline-block;
    color: #52657b;
    background-color: #eee;
    padding: 10px;
    height: 65px;
    line-height: 65px;
    width: calc(78% - 20px);
    text-align: left;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-left: -4px;
    font-size: 1.25em;
    font-weight: 700;
}

.dayEvents {
    overflow-x: hidden;
    overflow-y: auto;
    /*height: 200px;*/
    padding-bottom: 10px;
}

.eventAddress {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

/*Poll Style*/
.closedPollOption {
    padding: 2px 0;
}

.closedPollCount {
    display: inline-block;
    height: 20px;
    text-align: center;
    border-radius: 0 20px 20px 0;
    text-shadow: 1px 1px 2px #000;
    color: #fff;
}

.voteButton {
    background: #00AAD2;
    color: #fff;
    margin-left: 10px;
    margin-top: 10px;
}

.pollResponseCount {
    float: left;
    margin-right: 10px;
}

/*Link Styles*/
.linkItem {
    position: relative;
    padding: 5px 15px;
    display: block;
    cursor: pointer;
    border: 1px solid #eee;
    min-height: 60px;
    margin-bottom: 5px;
}

    .linkItem:hover {
        background-color: #EFF3E8;
        color: initial !important;
    }

        .linkItem:hover .externalLinkIcon {
            display: inline-block;
        }

.promoDialog .linkItem:hover, .promoDialog .linkItem:hover .contactDisplay {
    background-color: #FFF1E5;
}

.externalLinkIcon {
    display: none;
    border-radius: 50%;
    background-color: #699133;
    float: right;
    margin-top: 10px;
    width: 32px;
    margin-right: 10px;
    padding: 2px;
    height: 32px;
}

.promoDialog .externalLinkIcon {
    background-color: #F68A1E;
}

.externalLinkIcon i.material-icons {
    color: #fff;
    font-size: 32px;
}

.linkTitle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #54657E;
    display: inline-block;
    vertical-align: super;
}

.resourceSize {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #54657E;
    display: inline-block;
    vertical-align: super;
}

.linkIcon {
    float: left;
    height: 43px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    /*background-color: #e4e4e4;*/
    padding-top: 7px;
}

/*.promoDialog .linkItem:hover .linkIcon {    background-color: #f68a1e;}*/
/*Job Listing Styles*/
.jobTitle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #54657E;
}

/*Resource Styles*/
.resourceItem {
    position: relative;
    padding: 5px 15px;
    display: block;
    cursor: pointer;
    border: 1px solid #eee;
    margin-bottom: 5px;
}

    .resourceItem:hover {
        background-color: #EFF3E8;
    }

.promoDialog .resourceItem:hover {
    background-color: #faf4ee;
}

.resourceItem:hover .downloadIcon {
    display: inline-block;
}

.downloadIcon {
    display: none;
    border-radius: 50%;
    background-color: #699133;
    float: right;
    margin-top: 15px;
    margin-right: 10px;
    padding: 5px;
    color: #fff;
}

.promoDialog .resourceItem:hover .downloadIcon {
    background-color: #f68a1e;
}

.resourceTitle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #54657E;
    margin-top: 50px;
}

.resourceIcon,
.faqIcon {
    position: relative;
    height: 43px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    float: left;
    margin-right: 15px;
    margin-bottom: 5px;
    color: #36424a;
    padding-top: 7px;
    margin-top: 5px;
}

.contactList .resourceIcon {
    display: inline-block;
    float: none;
}

.resourceDetails {
    display: inline-block;
    width: 75%;
    /*min-height: 60px;*/
}

.contentTitle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #54657E;
    margin-top: 10px;
    margin-bottom: 15px;
}

.findButton {
    background: #6d9324;
    color: #fff;
    margin-left: 10px;
    width: 100px;
}

.promoDialog .findButton {
    background: #f68a1e;
}

.jobFind .findButton {
    margin-top: 15px;
}

.newsDialog .findButton {
    background: #005983;
}

.clearButton {
    background: #DDD;
    color: #000;
    margin-left: 5px;
}

.jobFind .clearButton {
    margin-top: 15px;
}

/*Contact styles*/
.contactIcon {
    float: left;
    margin-right: 20px;
}

.contactDisplay {
    display: block;
    background: #fff;
    width: 100%;
    clear: both;
}

.linkItem:hover .contactDisplay {
    background: #EFF3E8;
}

.contactFullDetails {
    padding: 30px 0;
    margin-top: 10px;
    margin-left: 67px;
}

.contactBusiness {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contactDisplayName {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contactEmail {
    display: block;
    text-decoration: underline;
    color: #00AAD2;
    margin-bottom: 20px;
    white-space: normal;
    word-wrap: break-word;
}

.contactMap {
    float: left;
    width: 50%;
    margin-left: 15px;
    margin-top: 40px;
}

    .contactMap a {
        display: block;
    }

/*.templateContentContainer, .templateResourcesContainer, .templateMediaContainer {    display: none;}*/
.displayNone {
    display: none;
}

.displayInline {
    display: inline;
}

/**Toolbox styles**/
.toolboxItemContainer {
    padding: 0;
    /*height: calc(100vh - 245px);*/
    position: relative;
}

.promoDialog .toolboxItemContainer {
    background: #FFF1E5;
}

.toolboxItem {
    padding: 0;
    clear: both;
    /*margin-bottom: 5px;*/
    /*border-right: 2px solid #6d9324;*/
    font-size: 11px;
    position: relative;
}

#subTopics {
    margin-bottom: 5px;
}

.toolboxItem i.material-icons.mdl-badge {
    position: relative;
    width: 10px;
    top: -2px;
    font-size: 21px;
}

.toolboxItem .mdl-badge[data-badge]:after {
    color: #005883;
}

.toolboxItem .mdl-badge[data-badge]:after {
    content: attr(data-badge);
    /*display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;*/
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: -5px;
    right: -20px;
    font-family: "Lato", "Helvetica", "Arial", sans-serif;
    font-weight: 700;
    font-size: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffca28;
    box-shadow: 1px 1px 5px -2px #000;
}

.toolboxItem .mdl-badge:not([data-badge]) {
    margin-right: 24px;
}

.toolboxItem a {
    display: block;
    /* padding: 5px 0; */
    background: none;
    margin-left: 0px;
}

.toolboxLinks a,
.toolboxDocuments a {
    padding-left: 20px;
    margin: 10px 0;
    color: #005883;
    font-size: 12px;
    display: block;
}

.toolbox-title {
    position: relative;
    padding: 8px 5px;
    display: block;
    font-size: 14px;
    color: #36424A;
}

.selected .toolbox-title {
    /*padding-left: 15px; border-bottom: 1px solid #eee;*/
    color: #fff;
}

.toolbox-news .toolbox-title,
.toolbox-internallinks .toolbox-title {
    background: none;
    border: 0;
    color: #52657B;
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.toolbox-news .toolboxItem i.material-icons.mdl-badge,
toolbox-internallinks .toolboxItem i.material-icons.mdl-badge {
    color: #fff;
}

.toolbox-news-description {
    display: none;
}

.toolbox-content {
    position: relative;
    /*display: block;*/
    display: none;
    height: 70px;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0 10px;
    background: #fff;
    /* border-top: 1px solid #ddd; */
}

.toolboxTitle {
    font-size: 11px;
}

.toolboxDescription {
    margin: 10px 0;
}

.toolboxDocuments a {
    display: block;
    clear: both;
}

.toolboxLinks a {
    display: block;
    clear: both;
}

.topic-content video {
    width: 100%;
    height: 150px;
}

.toolbox-internallinks {
    width: 100%;
    display: inline-block;
    background: #fff;
}

.toolbox-news {
    width: 100%;
    margin-top: 20px;
    display: inline-block;
    background: #fff;
}

.toolbox-preview {
    width: calc(100% - 20px);
    height: 100%;
    position: absolute;
    /* background: #fff; */
}

.toolbox-faq-question,
.toolbox-poll-question {
    height: 50px;
    font-size: 14px;
    color: #005883;
    text-align: center;
    line-height: 50px;
    margin: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toolbox-media-media {
    margin: 5px 10px;
    text-align: center;
}

    .toolbox-media-media img {
        max-height: 60px;
    }

.toolbox-news-details,
.toolbox-event-details,
.toolbox-content-details {
    padding: 5px 0;
}

.toolbox-news-headline {
    font-size: inherit;
    color: #8091A5;
    margin-bottom: 5px;
    display: block;
}

.toolbox-event-icon {
    display: inline;
    float: left;
    padding-right: 20px;
    margin-top: 5px;
}

.toolbox-event-date {
    margin-left: 10px;
    margin-top: 10px;
}

.toolbox-event-day {
    height: 20px;
    width: 20px;
    border: 2px solid #00ADD8;
    padding: 5px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: #005883;
}

.toolbox-event-month {
    text-align: center;
}

.toolbox-event-title {
    display: inline-block;
    font-size: 18px;
    color: #005883;
    margin-top: 10px;
}

.toolbox-link-display,
.toolbox-resources-display,
.toolbox-contacts-display {
    padding: 10px 0;
}

.templateLinksContainer a {
    /*background: none;*/
}

.toolbox-link-title,
.toolbox-resources-title,
.toolbox-contacts-title {
    position: relative;
    color: #52657b;
    font-size: 14px;
}

.toolbox-icon {
    float: left;
    margin-right: 10px;
    display: none;
}

    .toolbox-icon:after {
        display: none;
    }

.contact-icon {
    color: #005883;
}

.toolbox-contactName {
    font-size: 12px;
    color: #000;
}

/*-----ADDITIONAL TIMELINE STYLES----*/
.vco-slider .slider-container-mask {
    background-color: #00ADD8;
}

@media screen and (max-width: 1550px) {
    .tileContent {
        width: 49%;
    }

    .filterClose .tileContent {
        width: 32%;
    }
}

@media screen and (max-width: 1270px) {
    .filterClose .tileContent {
        width: 49%;
    }

    .topic-details {
        width: 100%;
    }
}

@media screen and (max-width: 1250px) {
    .minister-image {
        background: none;
        height: auto;
    }

    .minister-title {
        height: auto;
        background: none;
    }

    .welcome-container {
        width: 320px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1130px) {
    .tileContent {
        width: 98%;
    }
}

@media screen and (max-width: 1050px) {
    body .mfp-container {
        padding: 0;
    }

    .topic-details {
        width: 100%;
    }

    .dialogTopics {
        width: 20%;
    }
    /*.dialogContent {
        width: 56%;
        padding: 20px 2%;
    }*/
    /*.dialogTool {
        width: 20%;
    }*/
}

@media screen and (max-width: 960px) {
    #fontSize {
        display: none;
    }

    .filterClose .tileContent {
        width: 98%;
    }

    .card-topics {
        display: none;
    }

    .topic-content,
    a .topic-content {
        width: 96%;
    }
}

@media screen and (max-width: 768px) {
    .logo {
        width: 225px;
    }

    .search input[type="text"] {
        width: 100px;
    }

    .mdl-logo {
        float: left;
        margin-bottom: 0;
        margin-right: 16px;
    }
}

/*-----TABLE STYLES-----*/
th {
    text-align: left;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 23px;
    border-spacing: 0;
    border-collapse: collapse;
    display: table;
}

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }

    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
    }

    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }

    .table > tbody + tbody {
        border-top: 2px solid #ddd;
    }

    .table .table {
        background-color: #fff;
    }

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 5px;
}

.table-bordered {
    border: 1px solid #ddd;
}

    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #ddd;
    }

    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

table col[class*="col-"] {
    position: static;
    float: none;
    display: table-column;
}

table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    float: none;
    display: table-cell;
}

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
    background-color: #f5f5f5;
}

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
}

.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
    background-color: #dff0d8;
}

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
    background-color: #d0e9c6;
}

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
    background-color: #e1bee7;
}

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
    background-color: #d8abe0;
}

.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
    background-color: #ffe0b2;
}

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
    background-color: #ffd699;
}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
    background-color: #f9bdbb;
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
    background-color: #f7a6a4;
}

.dialogContent iframe {
    width: 100% !important;
}

.dialogContent .contentbodytext {
    color: #3D4D65;
}

/*.dialogContent .contentbodytext a:before {    content: url('../images/mdl-icons/ic_insert_link_black_18dp.png');    margin-top: 5px;}.dialogContent .contentbodytext a[href*="//"]:before {    content: url('../images/mdl-icons/ic_open_in_new_black_18dp.png');}*/
/*-------Card filter transition-------*/
.ng-enter,
.ng-leave {
    /*-webkit-transition: 575ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;    -moz-transition: 575ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;    -ms-transition: 575ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;    -o-transition: 575ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;    transition: 575ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;*/
    position: relative;
    display: block;
    transition: 1s;
}

    .ng-enter.ng-enter-active,
    .ng-leave {
        /*-webkit-transform: rotateZ(0deg);    -moz-transform: rotateZ(0deg);    -ms-transform: rotateZ(0deg);    -o-transform: rotateZ(0deg);    transform: rotateZ(0deg);*/
        opacity: 1;
        transition: 1s;
    }

        .ng-leave.ng-leave-active,
        .ng-enter {
            /*-webkit-transform: rotateZ(-360deg);    -moz-transform: rotateZ(-360deg);    -ms-transform: rotateZ(-360deg);    -o-transform: rotateZ(-360deg);    transform: rotateZ(-360deg);*/
            opacity: 0;
            transition: .5s;
        }

/*------- Card Design --------*/
/*.mdl-card__menu {    position: absolute;    right: 16px;    top: 16px;}.mdl-button--icon {    border-radius: 50%;    font-size: 24px;    height: 32px;    margin-left: 0;    margin-right: 0;    min-width: 32px;    width: 32px;    padding: 0;    overflow: hidden;    color: #5F6A72;    line-height: normal;}.mdl-button--icon .material-icons {    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-12px,-12px);    -ms-transform: translate(-12px,-12px);    transform: translate(-12px,-12px);    line-height: 24px;    width: 24px;}.mdl-button__ripple-container {    display: block;    height: 100%;    left: 0;    position: absolute;    top: 0;    width: 100%;    z-index: 0;    overflow: hidden;}.mdl-button {    background: 0 0;    border: none;    border-radius: 2px;    position: relative;    height: 36px;    padding: 0 8px;    display: inline-block;    font-family: "Lato","Helvetica","Arial",sans-serif;    font-size: 14px;    font-weight: 500;    text-transform: uppercase;    letter-spacing: 0;    overflow: hidden;    will-change: box-shadow,transform;    -webkit-transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);    outline: none;    cursor: pointer;    text-decoration: none;    text-align: center;    line-height: 36px;    vertical-align: middle;}*/
.lang-radio {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
}

/*------    persona dropdown styles    -------*/
/* The CSS */
.journey-dd {
    padding: 20px 20px 10px;
    width: 100%;
    margin: 0 auto;
    font-size: 10px;
}

#journey .journey-dd, .ddlSortCards {
    font-size: 13px;
}

.journey-dd .dd-menu,
.dd-droplist {
    width: calc(100% - 20px);
    /* height: 38px; */
    padding: 10px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: none;
    background: #fff;
    color: #888;
    border: 1px solid #52657B;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.accordionHeader {
    cursor: pointer;
}

.journey-dd .dd-menu {
    position: relative;
}

/*.journey-dd .dd-menu:after {    content: '<>';    font: 11px "Consolas", monospace;    color: #aaa;    -webkit-transform: rotate(90deg);    -moz-transform: rotate(90deg);    -ms-transform: rotate(90deg);    transform: rotate(90deg);    right: 7px;    top: 7px;    padding: 0 0 2px;    border-bottom: 1px solid #ddd;    position: absolute;    pointer-events: none;}.journey-dd .dd-menu:before {    content:'';    right:6px; top:0px;    width:20px; height:20px;    background:#f8f8f8;    position:absolute;    pointer-events:none;    display:block;}*/
.dd-droplist {
    display: none;
}

.dd-menu.dd-open {
    border-bottom: 0;
    box-shadow: none;
    border-radius: 3px 3px 0 0;
}

    .dd-menu.dd-open + .dd-droplist {
        display: block;
        margin: 0 auto;
        margin: 0;
        border-radius: 0 0 3px 3px;
        width: 100%;
        z-index: 99;
        padding: 0;
    }

.dd-droplist span {
    display: block;
    text-align: left;
    height: 26px;
    line-height: 26px;
    padding: 0 7px;
}

    .dd-droplist span:first-child {
        border-top: 0;
    }

.dd-selected {
    background-color: #00ADD8;
    color: white;
}

.mobile-overlay {
    display: none;
}

.mainArea {
    display: none;
}

.mainLoading {
    display: block;
}

    .mainLoading img.loadingDisplayImage {
        width: 50px;
        height: 50px;
        padding: 0;
        margin: 0;
        float: left;
        padding-top: 10px;
    }

    .mainLoading .loadingDisplayText {
        float: left;
        font-size: 22px;
        margin-top: 20px;
        padding-left: 10px;
    }

.cardContainer img {
    width: 240px;
}

.noDisplay {
    display: none;
}

.home .spacer {
    padding: 35px;
}

.home article {
    width: 100%;
    padding: 0;
}

.home .masGrid {
    width: calc(80% - 1px);
    padding: 0.5%;
    max-width: none;
    box-shadow: 2px 0 0 0 #eee;
    border-right: 1px solid #ddd;
}

.home .rightSidebar {
    width: 18%;
    margin: 0.4%;
}

.home .card h1 {
    width: auto;
    float: none;
    padding: 10px;
    color: #fff;
    text-align: center;
    padding-top: 90px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.home-link-box {
    background-color: rgba(255, 255, 255, 0.8);
    width: 78%;
    padding: 10px;
    margin: 0 auto;
    max-width: 290px;
    border-radius: 10px;
    box-shadow: 0 3px 10px -6px #000 inset;
}

    .home-link-box a {
        display: block;
        text-align: center;
        padding: 4px 2px;
        margin: 5px 0;
        border-bottom: 2px solid transparent;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }

        .home-link-box a:hover {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
        }

.home .welcome,
.home .news {
    margin: 7px 10px;
}

.news-icons {
    float: right;
    vertical-align: top;
    display: inline-block;
}

    .news-icons i {
        font-size: 10px;
        background: #000;
        border-radius: 50%;
        color: #fff;
        padding: 2px;
    }

.atm-s a {
    display: none !important;
}

    .atm-s a#atic_facebook,
    .atm-s a#atic_twitter,
    .atm-s a#atic_more,
    .atm-s a#atic_mail {
        display: block !important;
    }

.atm-f {
    display: none;
}

.tool:hover:after {
    background: #333;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    bottom: 60%;
    color: #fff;
    content: attr(title);
    padding: 0 5px;
    position: absolute;
    z-index: 98;
    height: 25px;
    line-height: 25px;
    font-size: 1em;
    left: 8%;
}

.newsTool:hover:after {
    left: 4%;
}

.cardTool:hover:after {
    left: 21%;
}

.card .tool:hover:after {
    display: none;
}

.home .news {
    margin-top: 25px;
    position: relative;
}

.news h5 {
    margin-bottom: 5px;
}

a.news-view-all-btn {
    font-size: 14px;
    display: inline-block;
    margin: 5px 0;
    color: #fff;
    padding: 5px 10px;
    border-radius: 2px;
    background-color: #36424a;
    float: right;
}

.persona-dd {
    margin-bottom: 20px;
    display: none;
}

.slide-out-div .languageItem {
    float: left;
}

span.clear-filters {
    display: inline-block;
    float: right;
    margin-bottom: 5px;
}

    span.clear-filters a {
        font-size: 11px;
        padding-right: 10px;
        color: #545f1d;
    }

.cardPreview:nth-child(even) {
    background: #F7F9FB;
}

.cardPreview:nth-child(even) {
    background: #F7F9FB;
}

.cardPreview:nth-child(odd) {
    background: #ffffff;
}

.topicSearch .mini-footer, .mini-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    opacity: 1;
    cursor: pointer;
    /*width: calc(100% - 20px);*/
    width: 100%;
    z-index: 999;
    max-height: 40px;
    max-width: calc(1920px - 20px);
}

.home .mini-footer {
    position: relative;
}

/*.topicSearch .mini-footer:hover, .mini-footer:hover {
    opacity: 1;
    transition: all 0.3s ease;
}*/
.cardContainerLoading #p2 {
    width: 100%;
}

/*.cardContainerLoadingBar #p2 {
    width: 100%;
}*/
.topic-details .mdl-modal__title {
    background: #6a747d;
    text-transform: none;
    padding: 0 20px 0 10px;
    height: 50px;
}

.results-data {
    font-weight: bold;
}

/*   Promo Dialog styles    */
.promoDialog .mdl-modal__title,
.promoDialog h1.topic {
    background-color: #69737b;
    color: #fff;
}

/*#topic-details.promoDialog .subTopic.selected {
    background-color: #fff;
    color: #52657B;
    border-left:4px solid #f68a1e;
}*/
.promoDialog .mdl-button--icon .material-icons,
.newsDialog .mdl-button--icon .material-icons,
.topic-details .mdl-button--icon .material-icons,
.tileContent .mdl-button--icon .material-icons {
    color: #fff;
}

.promoDialog .dialogTopics,
.promoDialog .linkItem:hover {
    /*background-color: #faf4ee;*/
}

.promoDialog .sub-topic:hover {
    background-color: #faf4ee;
}

/**/
/*   News Dialog styles     */
.newsDialog .mdl-modal__title,
.newsDialog h1.topic {
    background-color: #005983;
    color: #fff;
}

#topic-details.newsDialog .subTopic.selected {
    background: #fff;
    color: #005983;
    border-left: 4px solid #005983;
}

#topic-details.newsDialog .subTopic {
    border-left: 2px solid #005983;
}

.newsTile .sub-topic:hover {
    color: #005983;
    background: #fff;
}

.newsDialog .dialogTopics,
.newsDialog .linkItem:hover {
    /*background-color: #E3EDF1;*/
}

.newsDialog .mdl-button--icon .material-icons {
    color: #fff;
}

/**/
/*   French Dialog styles   */
/*.frenchDialog .mdl-modal__title,
.frenchDialog h1.topic {
    background-color: #A2AAAE;
    color: #fff;
}

.frenchDialog .linkItem:hover {
    background-color: #F7F7F8;
}

.frenchDialog .mdl-button--icon .material-icons {
    color: #fff;
}*/
/**/
.sideBottom .toolbox-content {
    background: transparent;
    margin-top: 10px;
}

.sideBottom .toolbox-news-details {
    border-top: 0;
}

.dialogFind .mdl-textfield {
    float: left;
}

h1.topic span.ministryNews,
h1.topic span.featured {
    display: none;
    position: absolute;
    font-size: 10px;
    top: -1px;
}

h1.topic span.parent-topic {
    position: absolute;
    font-size: 10px;
    top: -5px;
}

h1.topic span.topic-sub {
    position: relative;
    top: 5px;
}

.newsTile h1.topic span.ministryNews,
.promoTile h1.topic span.featured {
    display: block;
}

ul.social-links {
    list-style: none;
    line-height: normal;
    padding: 0;
    margin: 0;
}

.social-links li {
    display: inline-block;
    line-height: 40px;
    font-size: 16px;
}

    .social-links li.mobile-only {
        display: none;
    }

.social-links a {
    padding: 7px 5px;
    line-height: 1;
    height: 32px;
    width: 32px;
    color: #fff;
}

    .social-links a:hover {
        background: #719500;
    }

.social-links i {
    text-align: center;
    color: #fff;
    width: 21px;
    font-size: 16px;
}

/*footer.mini-footer {        display: none;}*/
.hidden {
    display: none;
}

.mobile-only i {
    color: #fff !important;
}

video {
    width: 100%;
    height: auto;
}

/*content pages*/
#contain .contentArea h1 {
    position: relative !important;
}

#contain #container .contentArea,
#contain .error500 {
    top: 80px;
    padding: 0 20px;
}

#topic-details {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

    #topic-details .mdl-modal.flipped {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
    }

    #topic-details .mdl-modal {
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }

.dialogTool {
    height: 100%;
}

blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #6d9324;
    font-style: italic;
    padding: 16px;
    background: #F1F4E9;
}

    blockquote:after {
        display: none;
    }

    blockquote p {
        display: inline;
    }

.mobile-header {
    display: none;
}

.media-title-description {
    margin-top: 10px;
}

.media-title,
.media-title + span,
.media-description {
    display: inline;
}

    .media-title + span {
        margin: 0 8px;
    }

.media-title {
    margin: 0;
}

.last-updated {
    font-size: 12px;
    color: #777;
    display: inline-block;
    line-height: 1.2;
    vertical-align: super;
}

.resourceItem .last-updated {
    position: relative;
    top: -1px;
    color: #54657E;
    display: block;
}

.resource-description {
    color: rgba(0, 0, 0, 0.54);
}

div#viewSelector i {
    font-size: 28px;
    background-color: #767676;
    color: #FFF;
}

.blogCommentForm {
    position: relative;
}

    .blogCommentForm div {
        width: 100%;
        margin: 5px;
        padding: 2px;
    }

        .blogCommentForm div label {
            display: inline-block;
            width: 10%;
        }

        .blogCommentForm div input {
            width: 50%;
        }

        .blogCommentForm div textarea {
            width: 50%;
            height: 65px;
        }

.newsList a {
    background: none;
    border: 0;
}

    .newsList a:hover {
        border: 0;
    }

.comment {
    margin: 5px;
    padding: 5px;
}

    .comment .commentTitle {
        font-weight: bold;
        font-size: 18px;
    }

    .comment .commentUserName {
        font-size: 12px;
    }

    .comment .commentDate {
        font-size: 12px;
    }

#contain .error500 {
    left: 0 !important;
    padding: 0 20px 20px;
    background: none;
}

#category-container li.SearchResult {
    background: #d0dfb4;
}

#category-container li.NoSearchResults {
    background: #B33A3A;
}

    #category-container li.NoSearchResults .category-title {
        color: #FFFFFF;
    }

.circle {
    width: 40px;
    height: 40px;
    /*background: #d3d3d3;*/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin: 10px;
}

.searchTypeIcon {
    margin: 8px;
}

a.search-result,
a.search-result.listDisplay {
    width: calc(100% - 50px) !important;
    margin: 10px 25px 10px;
    float: none;
    height: auto;
    display: block;
    min-height: 0;
}

    a.search-result .topic-content {
        width: 98%;
        padding: 5px 1%;
        margin: 0;
        height: auto;
    }

    a.search-result .result-icon,
    a.search-result .result-details {
        vertical-align: middle;
        display: inline-block;
    }

        a.search-result .result-details h3 {
            margin: 0;
            font-size: 16px;
        }

.card-container.SearchResults {
    padding: 0;
    position: relative;
    background: #FAFAFA;
}

.search-total-results {
    /*float: right;
    margin-top: 10px;
    max-width: 175px;
    margin-right: 65px;
    margin-right: 196px;
    font-size: 12px;*/
    position: absolute;
    top: 15px;
    right: 210px;
    font-size: 12px;
}

.searchResults-active .mdl-modal__title {
    background-color: #6a747d;
}

.searchResults-active #journey {
    display: none;
}

.results-container {
    position: relative;
    padding: 0;
    float: left;
    /* background: #d0dfb4; */
    color: #44555F;
    width: 20%;
    display: table-cell;
    height: 100%;
    /* font-size: 1.2em; */
    /* font-weight: bold; */
}

.current-search-term {
    margin: 25px;
    font-size: 22px;
}

.search-types {
    margin: 20px 0px 20px 20px;
    display: block;
}

    .search-types .type-pill, .search-types .results-pill {
        display: block;
        color: #36424A;
        text-align: left;
        font-weight: 400;
        font-size: 16px;
        margin-bottom: 10px;
        padding: 5px 6px 5px;
        margin-right: 10px;
        background: #f2f2f2;
        /* border-left: 2px solid #6d9324; */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
    }

    .search-types .results-pill {
        padding: 12px 6px 12px;
        /*border-top: 3px solid #88A552;*/
        /*margin: 5px;
    display:block;
    background:#fff;*/
    }

    .search-types .selected {
        background-color: #6D9324;
        color: #fff;
        /* border-left: 4px solid #6d9324; */
        margin-right: 0;
        padding-right: 15px;
        overflow: visible;
    }

        .search-types .selected:after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 12px;
            border-color: transparent transparent transparent #6D9324;
            position: absolute;
            right: -10px;
            top: 11px;
            z-index: 1;
        }

/*.search-types .type-pill:hover {
    background: #BED396;
}*/
li.SearchResult {
    display: none !important;
}

.search-types span .searchTypeIcon {
    position: relative;
    top: 5px;
    font-size: 21px;
    margin-top: 2px;
    margin-right: 10px;
}

.results-container span {
    cursor: pointer;
}

.search-clear-categories {
    position: absolute;
    right: 0;
    padding: 12px;
}

    .search-clear-categories:hover {
        background: #719501;
        color: #fff;
    }

.result-details > span {
    font-size: 12px;
    color: #6D9324;
}

.search-types-title {
    font-size: 12px;
}

    .search-types-title span .material-icons {
        position: relative;
        top: 10px;
        font-size: 37px;
        margin: 0 10px 22px 12px;
        font-weight: 400;
        display: none;
    }

.result-icon {
    width: 30px;
    height: 50px;
    background: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 50%;
    margin: 5px 10px 5px 0;
}

    .result-icon .material-icons {
        font-size: 22px;
        margin: 0;
    }

/*#at15s.atm {z-index:5!important;}*/
.preview-image {
    height: 160px;
    background-repeat: no-repeat;
    background-position: center;
}

.overlay {
    transition: all ease .5s;
    background: transparent;
    position: absolute;
    width: 100%;
    height: 160px;
    top: 0;
    opacity: 0.7;
}

.preview-image:hover .overlay {
    transition: all ease .5s;
    background: #000;
    z-index: 2;
}

.preview-description-inner {
    transition: all ease .5s;
    color: transparent;
    position: absolute;
    top: 5px;
    left: 5px;
}

.preview-image:hover .preview-description-inner {
    transition: all ease .5s;
    z-index: 3;
    color: #fff;
}

#searchIcon {
    right: 3px;
    /*top: -4px;*/
    top: 10px;
    float: right;
}

.searchBar .mdl-textfield.is-focused #searchDiv {
    margin-right: 40px;
    float: left;
}

.searchBar .mdl-textfield.is-focused {
    border: 0;
}

.image-hide {
    display: none;
}

.image-show {
    display: block;
}

/*transition for dialog fadein/fadeout*/
/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

    /* overlay animate in */
    .mfp-fade.mfp-bg.mfp-ready {
        opacity: 0.8;
    }

    /* overlay animate out */
    .mfp-fade.mfp-bg.mfp-removing {
        opacity: 0;
    }

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

#topic-details .social-icons {
    color: #fff;
    padding: 5px;
    font-size: 20px;
}

#topic-details .dialogToolbox ul.mdl-menu li {
    float: left;
    width: 31px;
    padding: 0;
}

#topic-details .mobile-only ul.mdl-menu li {
    float: left;
    padding: 15px;
    height: auto;
    line-height: normal;
    text-align: center;
}

.dialogToolbox .mobile-only .mdl-button {
    top: 5px;
}

#topic-details .mobile-only ul.mdl-menu .social-icons i {
    color: #000 !important;
}

/*APPLICATION STYLES*/
/*------------------*/
.application .searchBar,
.application .fr-eng-toggle {
    display: none;
}

/*HEADER GLOBAL NAV STYLES*/
/*------------------------*/
.local-nav-top {
    background: #6D9324;
    width: 100%;
    clear: both;
    height: 40px;
    position: relative;
}

    .local-nav-top ul {
        margin: 0;
        list-style: none;
        padding: 0 20px;
    }

    .local-nav-top li {
        display: inline-block;
        margin-right: 24px;
        position: relative;
        top: -1px;
    }

        .local-nav-top li:first-child {
            top: 0px;
        }

        .local-nav-top li i {
            font-size: 24px;
            position: relative;
            top: 2px;
            color: #fff;
        }

            .local-nav-top li i:hover {
                color: #DCDDDE;
            }

        .local-nav-top li a {
            font-size: 14px;
            line-height: 3;
            display: inline;
            color: #fff;
        }

            .local-nav-top li a:hover {
                color: #DCDDDE;
            }

.global-nav {
    display: inline-block;
}

.local-nav-top .mdl-menu a {
    color: #3d4d65;
}

.local-nav-top .mdl-menu li {
    display: block;
    margin: 0;
}

header {
    border-bottom: 0;
    /*height: 90px;*/
    height: auto;
}

.topBar {
    height: 50px;
}

.masonry.home {
    padding-top: 0px;
}

.home .spacer {
    padding: 0px;
}

#category-container li {
    float: none;
    display: inline-block;
}

/*THEMED COLORS BASED ON JOURNEY SELECTED*/
/*---------------------------------------*/
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #fff;
}

/*early childhood*/
/*.wrapper-early-childhood h1.topic, .wrapper-early-childhood .topic-details .mdl-modal__title {border-bottom:3px solid #ec098c;}*/
/*.wrapper-early-childhood .subContent article {box-shadow: -3px 0 0 0 #ec098c;}*/
/*.wrapper-early-childhood ul.categories li, .wrapper-early-childhood .tl-timemarker .tl-timemarker-content-container {background:rgba(236,9,140,0.1);}*/
.wrapper-early-childhood ul.categories li,
.wrapper-early-childhood .tl-timemarker .tl-timemarker-content-container {
    background: #FFF8FC;
}

    /*.wrapper-early-childhood ul.categories li.selected, .wrapper-early-childhood #category-container li {background:rgba(236,9,140,0.25);}*/
    .wrapper-early-childhood ul.categories li.selected,
    .wrapper-early-childhood #category-container li,
    .wrapper-early-childhood #topic-details ul.categories li:hover {
        background: #FEF0F8;
    }

/*.wrapper-early-childhood .topic-details .sub-topic:hover {
    background: #ec098c;
}*/
.wrapper-early-childhood #category-container li {
    float: none;
    display: inline-block;
}

.wrapper-early-childhood .tl-timemarker:hover .tl-timemarker-content-container,
.wrapper-early-childhood .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background: #FEF0F8;
}

.wrapper-early-childhood .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #ec098c;
}

.wrapper-early-childhood .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #ec098c url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.wrapper-early-childhood .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #6a747d;
}

/*elementary*/
/*.wrapper-elementary h1.topic, .wrapper-elementary .topic-details .mdl-modal__title {border-bottom:3px solid #00AFDC;}*/
/*.wrapper-elementary .subContent article {box-shadow: -3px 0 0 0 #00AFDC;}*/
.wrapper-elementary ul.categories li,
.wrapper-elementary .tl-timemarker .tl-timemarker-content-container {
    background: #E6F7FC;
}

    .wrapper-elementary ul.categories li.selected,
    .wrapper-elementary #category-container li,
    .wrapper-elementary #topic-details ul.categories li:hover {
        background: #C0EBF7;
    }

/*.wrapper-elementary .topic-details .sub-topic:hover {
    background: #00AFDC;
}*/
.wrapper-elementary #category-container li {
    float: none;
    display: inline-block;
}

.wrapper-elementary .tl-timemarker:hover .tl-timemarker-content-container,
.wrapper-elementary .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background: #C0EBF7;
}

.wrapper-elementary .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #00AFDC;
}

.wrapper-elementary .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #00AFDC url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.wrapper-elementary .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #6a747d;
}

/*junior high*/
/*.wrapper-junior-high h1.topic, .wrapper-junior-high .topic-details .mdl-modal__title {border-bottom:3px solid #FFD400;}*/
/*.wrapper-junior-high .subContent article {box-shadow: -3px 0 0 0 #FFD400;}*/
.wrapper-junior-high ul.categories li,
.wrapper-junior-high .tl-timemarker .tl-timemarker-content-container {
    background: #FFFBE6;
}

    .wrapper-junior-high ul.categories li.selected,
    .wrapper-junior-high #category-container li,
    .wrapper-junior-high #topic-details ul.categories li:hover {
        background: #FFF5C0;
    }

/*.wrapper-junior-high .topic-details .sub-topic:hover {
    background: #FFD400;
}*/
.wrapper-junior-high #category-container li {
    float: none;
    display: inline-block;
}

.wrapper-junior-high .tl-timemarker:hover .tl-timemarker-content-container,
.wrapper-junior-high .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background: #FFF5C0;
}

.wrapper-junior-high .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #FFD400;
}

.wrapper-junior-high .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #FFD400 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.wrapper-junior-high .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #6a747d;
}

/*high school*/
/*.wrapper-high-school h1.topic, .wrapper-high-school .topic-details .mdl-modal__title {border-bottom:3px solid #8CC63E;}*/
/*.wrapper-high-school .subContent article {box-shadow: -3px 0 0 0 #8CC63E;}*/
.wrapper-high-school ul.categories li,
.wrapper-high-school .tl-timemarker .tl-timemarker-content-container {
    background: #F4FAEC;
}

    .wrapper-high-school ul.categories li.selected,
    .wrapper-high-school #category-container li {
        background: #E3F1CF;
    }

/*.wrapper-high-school .topic-details .sub-topic:hover {
    background: #8CC63E;
}*/
.wrapper-high-school #category-container li {
    float: none;
    display: inline-block;
}

.wrapper-high-school .tl-timemarker:hover .tl-timemarker-content-container,
.wrapper-high-school .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background: #E3F1CF;
}

.wrapper-high-school .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #8CC63E;
}

.wrapper-high-school .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #8CC63E url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.wrapper-high-school .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #6a747d;
}

/*ministry*/
/*.wrapper-ministry h1.topic, .wrapper-ministry .topic-details .mdl-modal__title {border-bottom:3px solid #D06F19;}*/
/*.wrapper-ministry .subContent article {box-shadow: -3px 0 0 0 #D06F19;}*/
.wrapper-ministry ul.categories li,
.wrapper-ministry .tl-timemarker .tl-timemarker-content-container {
    background: #FBF1E8;
}

    .wrapper-ministry ul.categories li.selected,
    .wrapper-ministry #category-container li,
    .wrapper-ministry #topic-details ul.categories li:hover {
        background: #F4DBC6;
    }

/*.wrapper-ministry .topic-details .sub-topic:hover {
    background: #D06F19;
}*/
.wrapper-ministry #category-container li {
    float: none;
    display: inline-block;
}

.wrapper-ministry .tl-timemarker:hover .tl-timemarker-content-container,
.wrapper-ministry .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background: #F4DBC6;
}

.wrapper-ministry .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #D06F19;
}

.wrapper-ministry .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #D06F19 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.wrapper-ministry .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #6a747d;
}

/*administration*/
/*.wrapper-school-administration h1.topic, .wrapper-school-administration .topic-details .mdl-modal__title {border-bottom:3px solid #69737B;}*/
/*.wrapper-school-administration .subContent article {box-shadow: -3px 0 0 0 #69737B;}*/
.wrapper-school-administration ul.categories li,
.wrapper-school-administration .tl-timemarker .tl-timemarker-content-container {
    background: #F0F1F2;
}

    .wrapper-school-administration ul.categories li.selected,
    .wrapper-school-administration #category-container li,
    .wrapper-school-administration #topic-details ul.categories li:hover {
        background: #DADCDE;
    }

/*.wrapper-school-administration .topic-details .sub-topic:hover {
    background: #69737B;
}*/
.wrapper-school-administration #category-container li {
    float: none;
    display: inline-block;
}

.wrapper-school-administration .tl-timemarker:hover .tl-timemarker-content-container,
.wrapper-school-administration .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background: #DADCDE;
}

.wrapper-school-administration .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #69737B;
}

.wrapper-school-administration .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #69737B url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.wrapper-school-administration .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #6a747d;
}

/*-------slick jquery carousel styles--------*/
/* slick */
.topic-details .inner-news-related {
    display: block;
    position: relative;
    vertical-align: middle;
    margin: 10px 15px;
    /* border:1px solid #ddd; */
    min-height: 120px;
    border-left: 5px solid #6A747D;
    background: #fff;
    box-shadow: 0px 2px 6px 0px #ccc;
}

.topic-details .inner-content h1.topic {
    width: calc(100% - 20px);
    font-size: 16px;
    font-weight: bold;
    color: #6A747D;
    padding: 3px 10px 0;
    background: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.topic-details .inner-content h4.topic {
    width: calc(100% - 20px);
    font-size: 16px;
    font-weight: bold;
    color: #6A747D;
    padding: 3px 10px 0;
    background: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0px;
    line-height: 28px;
}

.topic-details .inner-content .topic-content {
    width: calc(100% - 20px);
    height: 85px;
}

.topic-details .inner-content-news {
    width: calc(100% - 40px);
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    height: 105px;
}

.dialogContent .slick-list a {
    text-decoration: none;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    width: 100%;
}

    .slick-slider .slick-list {
        overflow: hidden;
        display: block;
        margin: 0px;
        padding: 0px;
    }

    .slick-slider .slick-track {
        position: relative;
        left: 0px;
        top: 0px;
    }

    .slick-slider .slick-slide {
        float: left;
        min-height: 1px;
    }

        .slick-slider .slick-slide img {
            display: block;
        }

    .slick-slider .slick-slide {
        display: none;
    }

.slick-initialized .slick-slide {
    display: block;
    background: #f7f7f7;
}

/* Loading States */
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

/* Arrows */
.slick-slider .slick-prev {
    position: absolute;
    border: 0;
    background: url("/images/dropbullet-rtl.png") no-repeat center center #ddd;
    display: block;
    height: 100%;
    top: 0;
    width: 20px;
    text-indent: -9999px;
    left: 0;
    padding: 0px;
    z-index: 2;
}

.slick-slider .slick-next {
    position: absolute;
    border: 0;
    background: url("/images/dropbullet.png") no-repeat center center #ddd;
    display: block;
    height: 100%;
    top: 0;
    width: 20px;
    text-indent: -9999px;
    right: 0;
    padding: 0px;
}

.slick-slider .slick-prev:focus {
    outline: none;
}

.slick-slider .slick-next:focus {
    outline: none;
}

.slick-slider .slick-next.disabled {
    background-position: -90px -90px;
}

.slick-slider .slick-prev.disabled {
    background-position: -50px -90px;
}

.slick-slider .slick-disabled {
    opacity: 0.4;
    background-color: #a1a1a1;
}

.related-container {
    position: relative;
    margin-top: 20px;
}

.relatedTitle {
    font-size: 18px;
    font-weight: normal;
    padding-left: 15px;
    color: #36424A;
}

.news-related-tabs {
    border-bottom: 1px solid #ddd;
    width: calc(100% - 30px);
    position: relative;
    /*margin-top:75px;*/
    margin: 0 15px 10px;
    /*border-top: 1px solid #ddd;*/
    /*padding-top: 75px;*/
}

    .news-related-tabs span {
        display: inline-block;
        width: 110px;
        padding: 5px 0;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid #fff;
    }

        .news-related-tabs span.selected {
            border-bottom: 2px solid #6D9324;
        }

.promoDialog .news-related-tabs span.selected {
    border-bottom: 2px solid #F68A1E;
    color: #F68A1E;
}

.newsDialog .news-related-tabs span.selected {
    border-bottom: 2px solid #005983;
    color: #005983;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .slick-slider .slick-next {
        background: url("../img/sprite@2x.png") -90px -40px no-repeat;
        background-size: 900px 200px;
    }

    .slick-slider .slick-prev {
        background: url("../img/sprite@2x.png") -50px -40px no-repeat;
        background-size: 900px 200px;
        -webkit-background-size: 900px 200px;
    }
}

/* Dots */
.slick-dots {
    position: absolute;
    bottom: -30px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0px;
    width: 100%;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        background: url("../img/sprite.png") -200px -50px no-repeat;
        height: 5px;
        width: 5px;
        text-indent: -9999px;
        margin: 0px 10px;
        padding: 0px;
    }

        .slick-dots li.active {
            background-position: -150px -50px;
        }

        .slick-dots li a {
            display: block;
            height: 10px;
            width: 10px;
        }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .slick-dots li {
        background: url("../img/sprite@2x.png") -200px -50px no-repeat;
        background-size: 900px 200px;
    }
}

/* Draggable */
.slick-list.draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #f7f7f7;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.inner-content {
    position: absolute;
    width: 100%;
}

/*------------jQuery UI styles---------------*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
    display: none;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}

.ui-helper-clearfix:after {
    clear: both;
}

.ui-helper-clearfix {
    min-height: 0;
    /* support: IE7 */
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0);
    /* support: IE8 */
}

.ui-front {
    z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ui-tabs {
    position: relative;
    /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}

    .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: .2em .2em 0;
    }

        .ui-tabs .ui-tabs-nav li {
            list-style: none;
            float: left;
            position: relative;
            top: 0;
            margin: 1px .2em 0 0;
            border-bottom-width: 0;
            padding: 0;
            white-space: nowrap;
        }

        .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
            float: left;
            padding: .5em 1em;
            text-decoration: none;
        }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active {
            margin-bottom: -1px;
            padding-bottom: 1px;
        }

            .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
            .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
            .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
                cursor: text;
            }

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}

    .ui-widget .ui-widget {
        font-size: 1em;
    }

    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget button {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
    }

.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
}

    .ui-widget-content a {
        color: #333333;
    }

.ui-widget-header {
    border: 1px solid #dddddd;
    background: #e9e9e9;
    color: #333333;
    font-weight: bold;
}

    .ui-widget-header a {
        color: #333333;
    }

    /* Interaction states
----------------------------------*/
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        border: 1px solid #c5c5c5;
        background: #f6f6f6;
        font-weight: normal;
        color: #454545;
    }

        .ui-state-default a,
        .ui-state-default a:link,
        .ui-state-default a:visited {
            color: #454545;
            text-decoration: none;
        }

    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        border: 1px solid #cccccc;
        background: #ededed;
        font-weight: normal;
        color: #2b2b2b;
    }

        .ui-state-hover a,
        .ui-state-hover a:hover,
        .ui-state-hover a:link,
        .ui-state-hover a:visited,
        .ui-state-focus a,
        .ui-state-focus a:hover,
        .ui-state-focus a:link,
        .ui-state-focus a:visited {
            color: #2b2b2b;
            text-decoration: none;
        }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        border: 1px solid #003eff;
        background: #007fff;
        font-weight: normal;
        color: #ffffff;
    }

        .ui-state-active a,
        .ui-state-active a:link,
        .ui-state-active a:visited {
            color: #ffffff;
            text-decoration: none;
        }

    /* Interaction Cues
----------------------------------*/
    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #dad55e;
        background: #fffa90;
        color: #777620;
    }

        .ui-state-highlight a,
        .ui-widget-content .ui-state-highlight a,
        .ui-widget-header .ui-state-highlight a {
            color: #777620;
        }

    .ui-state-error,
    .ui-widget-content .ui-state-error,
    .ui-widget-header .ui-state-error {
        border: 1px solid #f1a899;
        background: #fddfdf;
        color: #5f3f3f;
    }

        .ui-state-error a,
        .ui-widget-content .ui-state-error a,
        .ui-widget-header .ui-state-error a {
            color: #5f3f3f;
        }

    .ui-state-error-text,
    .ui-widget-content .ui-state-error-text,
    .ui-widget-header .ui-state-error-text {
        color: #5f3f3f;
    }

    .ui-priority-primary,
    .ui-widget-content .ui-priority-primary,
    .ui-widget-header .ui-priority-primary {
        font-weight: bold;
    }

    .ui-priority-secondary,
    .ui-widget-content .ui-priority-secondary,
    .ui-widget-header .ui-priority-secondary {
        opacity: .7;
        filter: Alpha(Opacity=70);
        /* support: IE8 */
        font-weight: normal;
    }

    .ui-state-disabled,
    .ui-widget-content .ui-state-disabled,
    .ui-widget-header .ui-state-disabled {
        opacity: .35;
        filter: Alpha(Opacity=35);
        /* support: IE8 */
        background-image: none;
    }

        .ui-state-disabled .ui-icon {
            filter: Alpha(Opacity=35);
            /* support: IE8 - See #6059 */
        }

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_777777_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_555555_256x240.png");
}

.ui-state-active .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cc0000_256x240.png");
}

/* positioning */
.ui-icon-blank {
    background-position: 16px 16px;
}

.ui-icon-carat-1-n {
    background-position: 0 0;
}

.ui-icon-carat-1-ne {
    background-position: -16px 0;
}

.ui-icon-carat-1-e {
    background-position: -32px 0;
}

.ui-icon-carat-1-se {
    background-position: -48px 0;
}

.ui-icon-carat-1-s {
    background-position: -64px 0;
}

.ui-icon-carat-1-sw {
    background-position: -80px 0;
}

.ui-icon-carat-1-w {
    background-position: -96px 0;
}

.ui-icon-carat-1-nw {
    background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0;
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
}

.ui-icon-arrow-4 {
    background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px;
}

.ui-icon-extlink {
    background-position: -32px -80px;
}

.ui-icon-newwin {
    background-position: -48px -80px;
}

.ui-icon-refresh {
    background-position: -64px -80px;
}

.ui-icon-shuffle {
    background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px;
}

.ui-icon-folder-open {
    background-position: -16px -96px;
}

.ui-icon-document {
    background-position: -32px -96px;
}

.ui-icon-document-b {
    background-position: -48px -96px;
}

.ui-icon-note {
    background-position: -64px -96px;
}

.ui-icon-mail-closed {
    background-position: -80px -96px;
}

.ui-icon-mail-open {
    background-position: -96px -96px;
}

.ui-icon-suitcase {
    background-position: -112px -96px;
}

.ui-icon-comment {
    background-position: -128px -96px;
}

.ui-icon-person {
    background-position: -144px -96px;
}

.ui-icon-print {
    background-position: -160px -96px;
}

.ui-icon-trash {
    background-position: -176px -96px;
}

.ui-icon-locked {
    background-position: -192px -96px;
}

.ui-icon-unlocked {
    background-position: -208px -96px;
}

.ui-icon-bookmark {
    background-position: -224px -96px;
}

.ui-icon-tag {
    background-position: -240px -96px;
}

.ui-icon-home {
    background-position: 0 -112px;
}

.ui-icon-flag {
    background-position: -16px -112px;
}

.ui-icon-calendar {
    background-position: -32px -112px;
}

.ui-icon-cart {
    background-position: -48px -112px;
}

.ui-icon-pencil {
    background-position: -64px -112px;
}

.ui-icon-clock {
    background-position: -80px -112px;
}

.ui-icon-disk {
    background-position: -96px -112px;
}

.ui-icon-calculator {
    background-position: -112px -112px;
}

.ui-icon-zoomin {
    background-position: -128px -112px;
}

.ui-icon-zoomout {
    background-position: -144px -112px;
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-icon-wrench {
    background-position: -176px -112px;
}

.ui-icon-gear {
    background-position: -192px -112px;
}

.ui-icon-heart {
    background-position: -208px -112px;
}

.ui-icon-star {
    background-position: -224px -112px;
}

.ui-icon-link {
    background-position: -240px -112px;
}

.ui-icon-cancel {
    background-position: 0 -128px;
}

.ui-icon-plus {
    background-position: -16px -128px;
}

.ui-icon-plusthick {
    background-position: -32px -128px;
}

.ui-icon-minus {
    background-position: -48px -128px;
}

.ui-icon-minusthick {
    background-position: -64px -128px;
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-icon-key {
    background-position: -112px -128px;
}

.ui-icon-lightbulb {
    background-position: -128px -128px;
}

.ui-icon-scissors {
    background-position: -144px -128px;
}

.ui-icon-clipboard {
    background-position: -160px -128px;
}

.ui-icon-copy {
    background-position: -176px -128px;
}

.ui-icon-contact {
    background-position: -192px -128px;
}

.ui-icon-image {
    background-position: -208px -128px;
}

.ui-icon-video {
    background-position: -224px -128px;
}

.ui-icon-script {
    background-position: -240px -128px;
}

.ui-icon-alert {
    background-position: 0 -144px;
}

.ui-icon-info {
    background-position: -16px -144px;
}

.ui-icon-notice {
    background-position: -32px -144px;
}

.ui-icon-help {
    background-position: -48px -144px;
}

.ui-icon-check {
    background-position: -64px -144px;
}

.ui-icon-bullet {
    background-position: -80px -144px;
}

.ui-icon-radio-on {
    background-position: -96px -144px;
}

.ui-icon-radio-off {
    background-position: -112px -144px;
}

.ui-icon-pin-w {
    background-position: -128px -144px;
}

.ui-icon-pin-s {
    background-position: -144px -144px;
}

.ui-icon-play {
    background-position: 0 -160px;
}

.ui-icon-pause {
    background-position: -16px -160px;
}

.ui-icon-seek-next {
    background-position: -32px -160px;
}

.ui-icon-seek-prev {
    background-position: -48px -160px;
}

.ui-icon-seek-end {
    background-position: -64px -160px;
}

.ui-icon-seek-start {
    background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
    background-position: -80px -160px;
}

.ui-icon-stop {
    background-position: -96px -160px;
}

.ui-icon-eject {
    background-position: -112px -160px;
}

.ui-icon-volume-off {
    background-position: -128px -160px;
}

.ui-icon-volume-on {
    background-position: -144px -160px;
}

.ui-icon-power {
    background-position: 0 -176px;
}

.ui-icon-signal-diag {
    background-position: -16px -176px;
}

.ui-icon-signal {
    background-position: -32px -176px;
}

.ui-icon-battery-0 {
    background-position: -48px -176px;
}

.ui-icon-battery-1 {
    background-position: -64px -176px;
}

.ui-icon-battery-2 {
    background-position: -80px -176px;
}

.ui-icon-battery-3 {
    background-position: -96px -176px;
}

.ui-icon-circle-plus {
    background-position: 0 -192px;
}

.ui-icon-circle-minus {
    background-position: -16px -192px;
}

.ui-icon-circle-close {
    background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px;
}

.ui-icon-circle-check {
    background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa;
    opacity: .3;
    filter: Alpha(Opacity=30);
    /* support: IE8 */
}

.ui-widget-shadow {
    margin: 0px 0 0 0px;
    padding: 5px;
    background: #666666;
    opacity: .3;
    filter: Alpha(Opacity=30);
    /* support: IE8 */
    border-radius: 8px;
}

.result-icon {
    float: left;
}

a.search-result .result-details {
    width: calc(100% - 60px);
}

.breadcrumb-current {
    display: none;
}

.jobFind, .dialogFind {
    display: none;
}

/*.dialogContent ul.categories {border-top:1px solid #eee;}*/
.dialogContent ul.categories li {
    float: left;
    width: auto;
    padding: 0;
    margin: 5px 10px 5px 0;
}

.dialogContent ul.categories .toggleBtn .category-title {
    width: auto;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
}

.dialogToolbox > button.mdl-button {
    position: relative;
    top: 6px;
}

.dialogToolbox .addthis-share {
    position: relative;
    top: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.share a {
    display: block;
    height: 32px !important;
    width: 40px !important;
    /* background: #a5acb0; */
    /* padding: 7px 5px 7px 5px; */
    text-decoration: none;
    text-align: center;
    color: #fff !important;
}

.share {
    float: right;
    display: inline;
    list-style-type: none;
    line-height: 1;
    padding: 0;
    margin: 8px 0 0 0;
}

    .share li {
        margin-right: 0px;
        display: inline-block;
    }

    .share .fa {
        color: #fff;
        margin-top: 9px;
        font-size: 18px;
    }

.dialogContent .category-title a {
    text-decoration: none;
    padding: 8px;
}

.dialogContent .toolboxItem .toolbox-content a {
    display: inline-block;
    background: none;
    margin: 0;
    font-size: 12px;
    text-decoration: none;
}

.toolbox-title:hover {
    /*background:#fff;*/
}

/*.topic-details .subTopic:hover {
    background: #fff;
}*/
.dialogContent footer a:hover {
    color: #fff;
}

.disabled {
    opacity: 0.4;
}

.dialogContentArea {
    /*min-height: calc(100vh - 650px);*/
}

/*.searchResults-active div#timelineContainer {
    display: none;
}*/
.searchResults-active #container .subspacer {
    padding: 45px 0 !important;
}

.searchResults-active .subContent article {
    height: auto !important;
    width: 100% !important;
}

.searchResults-active .subContent.filterClose {
    width: 100%;
}

.searchResults-active #viewSelector {
    display: none;
}

.searchResults-active .tl-wrapper, .searchResults-active .sort-options, .topicDetails-active .refinements-container {
    display: none;
}

.searchResults-active .search-total-results {
    margin-right: 0;
    right: 10px;
}

/*search did you mean styles*/
.didyoumean, .synonyms, .keymatches {
    padding: 10px 25px;
    font-size: 16px;
    clear: both;
}

    .didyoumean span, .synonyms span, .keymatches span {
        color: #0000cc;
    }

.synonyms, .didyoumean {
    color: #cc0000;
}

.keymatches {
    color: blue;
    /*background:#e8e8ff;*/
    font-size: 12px;
}

.action-item {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    padding-right: 10px;
    padding-left: 10px;
}

.topicDetails-active .refinements-container {
    display: none;
}

.topicSearch .sort-options {
    /*right: 200px;*/
}

.topicSearch .searchResults-active .sort-options {
    right: 175px;
}

.search-results-breadcrumb {
    padding: 0 0 5px;
    font-size: 14px;
    color: #767676;
}

.tileContentNoResults {
    padding: 10px 0 0 10px;
}

    .tileContentNoResults h1 {
        font-family: 'Lato', sans-serif;
        font-size: 18px;
        color: #3d4d65;
        /* padding: 2px 0; */
    }

.promoTile h1.topic span, .newsTile h1.topic span {
    /* top: 5px; */
    position: relative;
    line-height: 1;
}

.sort-options .sort-select {
    margin-left: 5px;
    padding: 7px 5px 4px;
    border: 0;
    border: 1px solid #999;
    background: #fafafa;
    color: #888;
    outline: none;
    width: 120px;
    border-radius: 3px;
}

select {
    /*-webkit-appearance:none!important;*/
}

.alertBox {
    background-color: #FFFFCC;
    padding: 9px;
    width: 100%;
    border-bottom: 1px solid #eee;
    clear: both;
}

    .alertBox .alertBoxInner {
        margin-left: 20px;
        margin-right: 20px;
    }

        .alertBox .alertBoxInner .alertBoxTitle {
            font-weight: bold;
            color: #005983;
            font-size: 20px;
        }

        .alertBox .alertBoxInner a {
            color: #005983;
        }

/*need to overwrite jw player dimensions for cards*/
.mediaContainer .jw-error, .mediaContainer .jwplayer {
    width: 100% !important;
    height: 160px !important;
}

/* flexslider updates to help pass accessibility when there's only 
   one image in the carousel. For multiple images, the javascript needs
   to be updated.
*/
.slidePrev.flex-disabled,
.slidePrev.flex-disabled .material-icons,
.sliderNext.flex-disabled,
.sliderNext.flex-disabled .material-icons {
    display: none !important;
}

.home #cardContainerLoading, .topicDetails-active #cardContainerLoading, .topicDetails-active .journeyTab {
    display: none !important;
}

.details-container {
    position: relative;
    height: calc(100vh - 195px);
    width: calc(100% - 245px);
    overflow: auto;
    /*background: #fff;*/
    padding-bottom: 50px;
}

.search-results-area.details-container {
    height: calc(100vh - 110px);
    width: calc(80% - 40px);
    padding: 0 20px;
    background: #fff;
    overflow: auto;
}

.search-results-container {
    width: 75%;
    display: table-cell;
    float: left;
}

.back-to-grid-btn {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: inline-block;
    background: url("../images/back-to-grid.png") no-repeat left center;
}

.toolboxItemContainer .toolboxItem:first-child {
    display: none;
}

.subText {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

.mobile-only-tablet {
    display: none;
}


.mdl-progress > .bufferbar {
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), -webkit-linear-gradient(left, #6B9123, #6B9123);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(to right, #6B9123, #6B9123);
    background: #6d9324;
    z-index: 0;
    left: 0;
}

.mdl-progress.mdl-progress__indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar3 {
    background-color: #cae5a7;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.topic-find-container {
    position: relative;
    float: right;
    /*right: 310px;*/
    right: 190px;
    border: 1px solid #999;
    border-radius: 3px;
    height: 31px;
    top: 4px;
}

    .topic-find-container input {
        border: 0;
        padding: 7px 8px 4px;
        width: 110px;
        border-radius: 3px;
        font-size: 12px;
    }

        .topic-find-container input::-ms-clear {
            display: none;
        }

    .topic-find-container #searchIcon {
        float: none;
        right: 0;
        top: 0;
    }

        .topic-find-container #searchIcon i {
            color: #555;
            font-size: 20px;
            top: 14px;
        }

    .topic-find-container div.mdl-button {
        top: -2px;
    }

.toolbox-title span.tool {
    max-width: 25px;
}

.toolbox-item-title {
    width: calc(100% - 28px);
    display: inline-block;
    position: relative;
    white-space: nowrap;
    top: 3px;
}

    .toolbox-item-title span.English, .toolbox-item-title span.French {
        max-width: calc(100% - 15px);
        margin-right: 0px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .toolbox-item-title span.item-count {
        display: inline;
        float: right;
        position: absolute;
        top: -2px;
        right: 0px;
        height: 24px;
        width: 24px;
        border-radius: 50px;
        background-color: #fff;
        line-height: 22px;
        text-align: center;
        color: #36424a;
    }

.expand-title {
    width: calc(100% - 20px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

.topic-details.promoDialog .activeSubTopic {
    background: #FFF1E5;
}

.topic-details .activeSubTopic {
    background: #F4FAEC;
}

.topic-details.newsDialog .activeSubTopic {
    background: #F2F7F9;
}

.details-container .toolboxWrapper:last-child .dialogContent {
    padding-bottom: 200px;
}

/**needs to create styles to hide side category filter**/
.hideSideFilter #slideout {
    display: none;
}

.hideSideFilter article.listingContent, .hideSideFilter .subContent {
    margin: 0 !important;
    width: 100% !important;
    left: 0px !important;
}

.hideSideFilter #tl-container {
    margin-left: 0px;
}

.toolbox-content-are .flexslider li {
    list-style: none;
}

.newsContainer .newsListDescription {
    margin-bottom: 10px;
    margin-top: 10px;
}

.newsContent .toolbox-title-area {
    padding: 0 0 10px 0;
}

/* DEBUG: DETAILS PAGE SCROLLING TESTING - DELETE FOR PRODUCTION 
.contentAnchor {
    background: red;
    display: block;
    height: 2px;
}*/
@media screen and (min-width: 1921px) {
    .subContent {
        max-width: 1920px;
    }

        .subContent, #slideout.filterStick, .subContent.filterClose {
            left: auto !important;
        }

            .subContent.filterClose article {
                margin-left: 41px !important;
                width: calc(100% - 41px);
            }

            .subContent.filterClose #slideout {
                width: 42px;
                left: initial !important;
            }

                .subContent.filterClose #slideout .mdl-textfield {
                    display: none;
                }
}

@media screen and (max-width: 1740px) {
    .dialogContent iframe {
        height: 500px;
    }
}

@media screen and (max-height: 900px) {
    .dayEvents {
        height: 240px;
    }
    /*.dialogContent {height: 676px;}	
    .dialogTopics {height:706px;}
    .dialogTool {height: 726px;}*/
    .contactDetails {
        min-height: calc(100vh - 150px);
    }
}

@media screen and (max-height: 800px) {
    .dayEvents {
        height: 140px;
    }
    /*.dialogContent {height: 576px;}	
    .dialogTopics {height:606px;}
    .dialogTool {height:626px;}*/
}

@media screen and (max-width: 1750px) {
    .filterClose .tileContent {
        width: 32%;
    }
}

@media screen and (max-width: 1550px) {
    .tileContent {
        width: 49%;
    }

    .dialogContent iframe {
        height: 400px;
    }
}

@media screen and (max-width: 1340px) {
    .journeyTab a {
        background: none;
    }

        .journeyTab a.selected {
            /*background: #F7F7F7;*/
        }
}

@media screen and (max-width: 1270px) {
    .filterClose .tileContent {
        width: 49%;
    }

    .dialogBox {
        width: 100%;
    }

    .banner .flexslider {
        /*margin-bottom: 20px;*/
    }

    .flexslider .flex-control-nav {
        bottom: -40px;
    }
}

@media screen and (max-width: 1250px) {
    .home .masGrid, .home .rightSidebar {
        width: 99%;
        border: 0;
    }

    .welcome {
        min-height: 0;
    }

    .home .welcome, .home .news {
        margin: 7px auto 20px;
    }
}

@media screen and (max-width: 1180px) {
    .home .item.w1 {
        width: 49%;
    }

    .journeyTab .journey-img {
        display: none;
    }

    .journeyTab .languageItem {
        top: 0;
    }

    .card.earlyChildhood h1 {
        background: url(/images/early-childhood.png) no-repeat center 20px;
        background-size: 15%;
    }

    .card.elementary h1 {
        background: url(/images/elementary.png) no-repeat center 20px;
        background-size: 15%;
    }

    .card.juniorHigh h1 {
        background: url(/images/juniorhigh.png) no-repeat center 20px;
        background-size: 15%;
    }

    .card.highSchool h1 {
        background: url(/images/highschool.png) no-repeat center 20px;
        background-size: 15%;
    }

    .card.postSecondary h1 {
        background: url(/images/ministry.png) no-repeat center 20px;
        background-size: 15%;
    }

    .card.administration h1 {
        background: url(/images/school-system.png) no-repeat center 20px;
        background-size: 15%;
    }

    .journeyTab a {
        padding: 10px 0 10px 0;
        width: 16%;
    }
}

@media screen and (max-width: 1120px) {
    .tileContent {
        width: 98%;
    }
}

@media screen and (max-width: 1050px) {
    body .mfp-container {
        padding: 0;
    }

    .dialogBox {
        width: 100%;
    }

    .dialogTopics {
        width: 20%;
    }
    /*.dialogContent {
    width: 56%;
    padding: 20px 2%;
}*/
    /*.dialogTool {
    width: 20%;
}*/
}

@media screen and (max-width: 768px) {

    #high-level-broadcast
    {
        margin-top: 49px;
    }

    .subTopicMainContent {
        width: 100%;
    }

    .mfp-wrap {
        overflow: auto;
    }

    .mobile-only-tablet {
        display: block;
    }


    .subTopic {
        width: 100%;
        max-width: 100%;
    }
    .subTopic-expand {
        cursor: pointer;
        padding: 10px;
        border: 1px solid #999;
        border-radius: 3px;
        background: white;
        margin-top: 20px;
        display: block !important;
        width: 100%;
        font-size: 19px;
    }

        .subTopic-expand .fa-sort {
            float: right;
        }

    .mobile-menu-display {
        display: block !important;
    }
    .topic-container {
        display: none;
        position: absolute;
        width: calc(100% - 40px);
        z-index: 100;
        margin: 0px;
        padding: 0px 20px;
        box-shadow: black 0px 6px 15px -9px;
        background: white;
    }

    .mfp-content {
        min-height: 100%;
    }

    body.topicSearch {
        overflow: auto;
    }

    #timeline-embed.stick #expandTimeline, #timeline-embed.stick {
        display: none;
    }

    .results-container {
        float: none;
        width: calc(100% - 40px);
        display: block;
        padding: 20px;
    }

    .subTopics {
        /*margin-bottom:0;*/
        /*display:inline-block;*/
    }

    .topic-details .subTopic.selected {
        /*padding:15px 6px;*/
    }

    #slideout {
        /*top:0!important;*/
    }

    .dialogTopics {
        /* height:76px; */
        overflow: auto;
        overflow-y: hidden;
    }

    .addthis-share {
        display: none;
    }

    .sideBottom {
        display: none;
    }

    #topic-details footer {
        position: relative;
        opacity: 1;
    }

    .overlay, .preview-description-inner {
        display: none;
    }

    .preview-image {
        width: 350px;
        float: left;
    }

    .preview-description {
        display: block;
        float: left;
    }

    .dialogContent iframe {
        height: 600px;
    }

    .fixed-modal {
        position: absolute;
        top: 0px;
        z-index: 999;
        width: 100%;
    }

    .mobile-header {
        display: block;
        width: 100%;
        position: absolute;
        padding-top: 8px;
        height: 60px;
        background-color: #36424a;
        box-shadow: 0 2px 10px -4px #000;
        border-bottom: 10px solid #6d9324;
    }

    .news-related-container {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    .eventLocation {
        padding: 10px;
        width: calc(22% - 20px);
    }

    .eventDetails {
        width: calc(78% - 20px);
    }

    .dayEvents {
        height: auto;
    }

    .topic-details, .dialogTool {
        /* pull  twin banner up*/
        /*margin-top: -20px;*/
        height: auto;
    }

    .dialogContent {
        height: auto;
    }

    .journey-dd .dd-menu {
        position: relative;
        display: inline-block !important;
    }

    #category-container {
        /* width: 100%; */
        overflow: auto;
    }

    .cardPreviewImage {
        display: none;
    }

    .cardNewsPreview .cardPreviewTitle {
        font-weight: normal;
        font-size: 1em;
    }

    .refinements-container {
        height: auto;
        /* padding: 5px 13px 10px; */
        min-height: 48px;
    }

    .subContent article, #slideout.filterStick + div + article {
        width: calc(100% - 41px);
        margin-left: 41px;
    }

    .search-results-area.details-container {
        width: calc(100% - 40px);
        height: auto;
    }

    .searchResults-active .subContent article {
        margin: 0 !important;
        width: 100%;
    }

    .subContent.filterClose {
        width: calc(100%);
        left: 0 !important;
    }

    #slideout {
        position: absolute;
        left: 0;
        z-index: 101;
        background: #fff;
        height: 100vh;
        transition: all ease .3s;
    }

    .filterClose #slideout {
        left: -210px !important;
        transition: all ease .3s;
    }

    .mobile-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #000;
        z-index: 98;
        display: block;
        opacity: .6;
        transition: all 1s ease;
    }

    .filterClose .mobile-overlay {
        opacity: 0;
        transition: all 1s ease;
        z-index: -1;
    }

    .filterSlide #journey {
        width: calc(100% - 41px);
        z-index: 10;
    }

    .dialogBox {
        margin: 0;
        height: auto;
    }

    .dialogTopics, .dialogTool {
        width: 100%;
    }

    .dialogTopics {
        margin-top: 55px;
    }

    .dialogContent, .search-results-container {
        width: 96%;
        height: auto;
        min-height: 300px;
        clear: both;
    }

    .details-container {
        width: 100%;
        /*overflow:visible;*/
    }

    #topic-details ul.categories li {
        width: auto;
    }

    .tileContent .mdl-button--icon .material-icons {
        display: block;
    }

    div#subTopics {
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 0;
        position: relative;
        top: 3px;
    }

    .toolboxItem a {
        margin: 0;
    }

    .topic-details .subTopic {
        /*border-bottom: 2px solid #8393A7;
    padding: 10px 20px 20px;
    margin: 0 5px;
    color: #36424a;
    background: transparent;
    width:auto;
    border-left: 0!important;*/
    }

    #topic-details .subTopic.selected {
        /*border-bottom: 7px solid #fff;
    border-top: 2px solid #8393A7;
    color: #36424a;
    background:#fff;
    width:auto;
    border-left:0;*/
    }

    .frenchDialog .subTopic.selected {
        border-bottom: 7px solid #fff;
        color: #36424a;
        border-top: 2px solid #A2AAAE;
        background: #fff;
        width: auto;
    }
    /*#topic-details.newsDialog .subTopic.selected {
    border-bottom:7px solid #fff;
    color:#8393a7;
    border-top:2px solid #005983;
    background:#fff;
    width:auto;
}
#topic-details.promoDialog .subTopic.selected {
    border-bottom:7px solid #fff;
    border-top:2px solid #F68A1E;
    /*color:#8393a7;*/
    /*background:#fff;*/
    /*width:auto;
    border-left: 0;
}*/
    .toolbox-internallinks, .toolbox-news {
        width: 100%;
        position: relative;
        bottom: initial;
    }

    .mdl-layout__header, .mfp-close-btn-in .mfp-close {
        position: absolute;
        /*top: -20px;*/
        z-index: 99;
    }

    .card.earlyChildhood h1 {
        background: url(/images/early-childhood.png) no-repeat center 20px;
        background-size: 25%;
    }

    .card.elementary h1 {
        background: url(/images/elementary.png) no-repeat center 20px;
        background-size: 25%;
    }

    .card.juniorHigh h1 {
        background: url(/images/juniorhigh.png) no-repeat center 20px;
        background-size: 25%;
    }

    .card.highSchool h1 {
        background: url(/images/highschool.png) no-repeat center 20px;
        background-size: 25%;
    }

    .card.postSecondary h1 {
        background: url(/images/ministry.png) no-repeat center 20px;
        background-size: 25%;
    }

    .card.administration h1 {
        background: url(/images/school-system.png) no-repeat center 20px;
        background-size: 25%;
    }

    .filterOpen #journey.journeyStick, .filterOpen .filterClose #journey.journeyStick {
        width: 100%;
    }

    .journeyStick + .space {
        /* padding: 45px 0; */
    }

    .card-container {
        /* padding: 120px 10px 20px; */
    }
    /*#topic-details footer {
    margin-top: 10px !important;
}*/
    #slideout.filterStick ~ article {
        margin-left: 40px;
    }

    .results-container {
        /* position: absolute; */
        width: calc(100% - 40px);
        z-index: 100;
        margin: 0px;
        /* padding: 0px 20px; */
        box-shadow: black 0px 6px 15px -9px;
        background: white;
    }
    /* Hide the selected item "arrow" on mobile */
    .search-types .selected:after {
        display: none;
    }
}

@media screen and (max-width: 960px) {
    #fontSize {
        display: none;
    }

    .sort-options {
        right: 0;
    }

    .topic-find-container {
        right: 190px;
    }

    .journey-dd-container {
        display: block;
    }

    .topicDetails-active .journey-dd {
        display: none;
    }
    /*.filterClose .tileContent {
    width: 98%;
}*/
    #tl-container {
        margin-left: 40px;
    }

    .card-topics {
        display: none;
    }

    .sort-options {
        /*right: 15px;*/
        border: 0;
    }

    .search-total-results {
        right: 150px;
    }

    .cardNewsPreview .cardPreviewDescription {
        display: none;
    }

    .journeyTab, #viewSelector {
        display: none;
    }

    .topic-content, a .topic-content {
        width: 96%;
        height: auto;
    }

    .toolboxItem i.material-icons.mdl-badge {
        margin-right: 15px;
    }

    .subContent {
        top: 149px;
    }

    .searchResults-active .subContent {
        top: initial;
    }

    #journey.journeyStick {
        /* position: fixed; */
        top: 0;
        position: relative;
        z-index: 5;
    }
    /*for mobile view do not display any of the sliders or preview items
      only display description
    */
    .journeyStick + .space {
        /* padding:0; */
    }

    .preview-image {
        display: none !important;
    }

    #journey {
        right: 0;
        /*width:100%!important;*/
    }

    .internalLinksCardContainer, .externalLinksCardContainer, .resourcesCardContainer, .eventsCardContainer, .faqsCardContainer, .pollsCardContainer, .mediaCardContainer {
        display: none;
    }
    /*.tileContent {height:auto;}*/
    .list-display-only {
        display: block;
        float: left;
        text-align: left;
    }

    #calendarDiv .eventContent, #calendarDiv .fc-calendar .fc-row > div.fc-today {
        background-size: contain;
    }
}

@media screen and (max-width: 880px) {
    .flexslider .flex-direction-nav .flex-prev, .flexslider .flex-direction-nav .flex-next {
        opacity: 1;
    }

    .dialogContent iframe {
        height: 500px;
    }
}

@media screen and (max-width: 768px) {
    .filterClose .tileContent {
        width: 98%;
    }

    .tileContent {
        height: auto;
    }

    .search input[type="text"] {
        width: 100px;
    }

    .mdl-logo {
        float: left;
        margin-bottom: 0;
        margin-right: 16px;
    }

    .dialogContent iframe {
        height: 400px;
    }

    header {
        height: auto;
        min-height: 50px;
    }

    .resourceDetails {
        width: 70%;
    }
}

@media screen and (max-width: 620px) {
    .masonry.home .item {
        height: 70px;
    }

    .home .item.w1 {
        width: 99%;
    }

    .masonry.home .item h1 {
        font-size: 1.2em;
        padding-top: 25px;
        padding-left: 40%;
        height: 45px;
        margin: 0;
        padding-bottom: 0;
        text-align: left;
    }

    div#cardContainerLoading {
        position: absolute;
        width: 100%;
    }

    .searchBar .mdl-textfield {
        width: calc(100% - 50px);
        margin-left: 10px;
    }

    .home-link-box {
        display: none;
    }

    .contactFullDetails {
        margin-left: 0;
    }

    .subContent {
        top: 155px;
    }

    #journey.journeyStick {
        top: 0;
    }

    .topBar {
        height: 95px;
    }

    .journey-dd {
        margin-left: 4%;
        padding: 7px 5px 4px;
        border: 0;
        border: 1px solid #999;
        background: #fafafa;
        color: #888;
        outline: none;
        width: 46%;
        border-radius: 3px;
        margin-top: 11px;
    }

    .search-total-results {
        right: 15px;
    }

    .topicSearch .sort-options {
        right: 0;
        top: -48px;
        width: 46%;
        /* padding: 20px 2% 10px; */
        padding: 0 2%;
        height: 48px;
        border-left: 0;
    }

    .refinements-container {
        padding: 7px 4%;
        min-height: 0;
    }

    .topicSearch .sort-by {
        display: None !important;
    }

    .topicSearch .sort-options select {
        /*padding: 20px 2% 10px;*/
        width: calc(100% - 4%);
        margin-top: 16px;
        margin-left: 0;
    }

    .topic-find-container {
        display: none;
    }

    div.searchBar {
        position: absolute;
        top: 45px;
        width: 98%;
        float: none;
        right: 0;
    }

    .subContent article {
        height: calc(100vh - 235px);
    }

    .searchResults-active .subContent article {
        height: calc(100vh - 195px);
    }

    .topicDetails-active .journey-dd, .searchResults-active .journey-dd {
        width: 96%;
    }

    .dialogFind {
        padding-bottom: 20px;
    }

    .news-related-tabs span {
        width: 40%;
    }

    .dialogFind select, .dialogFind .mdl-textfield {
        clear: both;
        margin-left: 0;
        width: 100%;
    }

    .dialogFind .findButton {
        margin-top: 20px;
        margin-left: 0;
        clear: both;
    }

    .masonry.home .item.card.postSecondary, .masonry.home .item.card.administration {
        width: 99%;
        /*height: 115px;*/
    }

        .masonry.home .item.card.postSecondary h1, .masonry.home .item.card.administration h1 {
            /*padding-top: 48px;
    padding-left: 40%;
    height: 67px;
    margin: 0;
    padding-bottom: 0;
    text-align: left;*/
        }

    .home .welcome, .home .news {
        margin: 0 2px;
        width: calc(100% - 14px);
        padding: 5px;
        background: #fff;
        margin-bottom: 5px;
    }



    .topic-details h1.topic {
        font-size: 18px;
    }

    .flexslider .flex-control-nav {
        width: 100%;
        position: absolute;
        bottom: -30px;
        text-align: center;
    }

    .eventDetails, .eventLocation {
        border-radius: 0;
        width: calc(100% - 20px);
        margin: 0;
    }

    .dialogContent iframe {
        height: 350px;
    }
}

@media screen and (min-width: 601px) {
    .mobile-only {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: inline-block;
    }

    nav.breadcrumbs {
        display: none;
    }

    .subspacer {
        padding: 51px 0 !important;
    }

    footer.mini-footer {
        position: fixed;
        bottom: 0;
    }

    h1.topic {
        padding: 10px 10px;
        color: #fff;
        font-size: 18px;
        margin: 0;
        font-weight: 500;
        width: calc(100% - 20px);
        background: #6A747D;
        line-height: 28px;
    }

    .toolbox-content-area {
        padding: 0 20px;
    }

    .topic-details h1.topic {
        padding: 0px 20px 0 0;
        /*width: calc(100% - 70px);*/
        width: 100%;
    }

    h1.topic span {
        max-width: 100%;
    }

    .home .news {
        padding-bottom: 40px;
    }

    #category-container ul {
        white-space: nowrap;
    }

    .search-total-results, #category-container {
        float: none;
        width: 100%;
    }

    .search-total-results {
        margin-bottom: 10px;
        position: absolute;
        right: 0;
        text-align: right;
        margin-right: 10px;
        max-width: 60px;
    }

    div#category-container {
        width: calc(100% - 70px);
    }

    #expandTimeline, #timelineContainer.timeline-toggle #timeline-embed {
        top: 90px;
    }

    #timeline-embed {
        top: -70px !important;
    }

    .timeline-toggle #expandTimeline {
        top: 250px;
    }

    #slideContainer.sideSticky {
        top: 291px;
    }

    #container .subspacer {
        padding: 65px 0 !important;
    }

    .local-nav-top .mobile-only {
        position: absolute;
        right: 10px;
        top: 4px;
    }

        .local-nav-top .mobile-only ul {
            padding: 0;
            width: 100%;
        }

        .local-nav-top .mobile-only .mdl-menu a:hover {
            color: #3d4d65;
        }

    span.toolbox-title span span.English, span.toolbox-title span span.French {
        width: calc(100% - 55px);
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        top: 3px;
    }

    .toolboxItemContainer {
        height: auto;
    }

    .home .spacer {
        padding: 0;
    }

    .journeyStick + .space {
        padding: 70px 0;
    }

    .current-search-term {
        margin: 15px 20px 0 20px;
        float: none;
        max-width: calc(100% - 40px);
    }
    /**tj - hide card description in mobile view**/
    .previewDescription, .list-display-only.previewDescription, .tileContent.listDisplay .list-display-only.previewDescription {
        display: none;
    }
}

@media screen and (max-width: 540px) {
    .logo {
        position: absolute;
        padding: 0 0 0 10px;
    }

        .logo img {
            width: 80%;
            margin-top: 2px;
        }

    .utility {
        background: #36424A;
    }
}

@media screen and (max-width: 480px) {
    .logo img {
        width: 70%;
        margin-top: 5px;
    }
}

@media screen and (max-width: 460px) {
    .linkIcon {
        display: none;
    }

    .resourceDetails {
        width: calc(100% - 75px);
    }

    .topic-content {
        /*display: none;*/
    }

    .search-result .topic-content {
        display: block;
    }

    .tileContent {
        height: auto;
    }

    .dialogContent iframe {
        height: 250px;
    }

    .fr-eng-toggle {
        margin: 10px;
    }
}



@media screen and (max-width: 380px) {
    .user-voice {
        margin: 15px 2px 5px;
    }

    .welcome {
        width: 250px;
    }
}

@media screen and (max-width: 340px) {
    /*.resourceDetails {
        width:55%;
    }*/
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with too much padding. */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .persona-dd .dd-menu {
        padding-right: 0;
    }
}

@media screen and (min-width: 200px) and (max-height: 710px) {
    h1 {
        line-height: normal;
    }
}

/* -------------------------------------------------------------------------
   Card Deck Page
   ------------------------------------------------------------------------- */
/**
 * 1. Settings
 * This layer should only contain settings that need to be accessed from anywhere.
 */
/**
 * 2. Tools: Globally available tooling - mainly functions and mixins.
 * Any function/mixin that does not need to be accessed globally belongs in the
 * partial to which it relates.
 */
/**
 * 3. Generic: High-level, far reaching styles.
 * This layer is seldom modified, and is the first layer that produces any CSS.
 * e.g. Global box-sizing rules, CSS resets, Normalize.css would go here, but 
 * it's already being added by Bootstrap.
 */
/**
 * 4. Elements: Unclassed, element-based selectors.
 * This is the last layer where we should find bare HTML element selectors.
 */
/**
 * 5. Objects: This is the first layer in which we find class-based selectors.
 * Objects can range from something as simple as a .wrapper element, to layout systems.
 * e.g. The Media Object (already added by Bootstrap)
 */
/* -------------------------------------------------------------------------
   Stacked Card View
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
.stacked-card-view {
    /**
     * Layout alterations 
     */
    /**
     * mdl-grid flex fixes
     */
    /** 
     * Card overrides 

    .ae-card {
        margin: 0 auto;
    }  
    
    .ae-card__arrow {
        border-color: transparent transparent #b0b7bc transparent;
    }
     */
    /** 
     * Card expander styles
     * This div contains the topics which are made visible once a card stack
     * is selected.
     */
    /*
    .card-expander {
        position: absolute;
        left: 0;
        right: 0;
        margin-top: 32px;
        overflow: hidden;
        line-height: 0;
        height: 0;
        @include transition(height 0.4s cubic-bezier(.36,.005,.035,1.005));
    }
    .ae-card--stacked--is-selected + .card-expander {
        height: auto;
    }
    
    .card-expander .ae-card {
        opacity: 0;
        @include transition(opacity 0.65s ease);
    }

    .ae-card--stacked--is-selected + .card-expander .ae-card {
        opacity: 1;
    }   
     */
}

    .stacked-card-view.subContent.filterClose {
        width: 100% !important;
    }

    .stacked-card-view.subContent #slideout {
        display: none !important;
    }

    .stacked-card-view.subContent .mobile-overlay {
        display: none !important;
    }

    .stacked-card-view.subContent #tl-container {
        margin-left: 0 !important;
    }

    .stacked-card-view.subContent article.listingContent {
        display: block;
        position: relative;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .stacked-card-view .stacked-card-grid {
        align-content: flex-start;
    }

        .stacked-card-view .stacked-card-grid .mdl-cell {
            -webkit-transition: margin-bottom 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005);
            -moz-transition: margin-bottom 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005);
            -ms-transition: margin-bottom 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005);
            -o-transition: margin-bottom 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005);
            transition: margin-bottom 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005);
        }

/* MDL breakpoints for grid containing stacked cards */
/* -------------------------------------------------------------------------
   Tiled Card View
   ------------------------------------------------------------------------- */
.tiled-card-view .tileContent {
    background-color: transparent;
    overflow: visible;
    height: auto;
    cursor: pointer;
    border-radius: 0;
    box-shadow: none;
}

    .tiled-card-view .tileContent.listDisplay {
        width: 99% !important;
        float: none;
        height: auto;
        min-height: 0;
        display: block;
    }

    .tiled-card-view .tileContent .ae-card {
        width: 98%;
    }

.tiled-card-view .linkType {
    z-index: 1;
}

.tiled-card-view .belowCardPreview {
    z-index: 1;
    position: relative;
    margin-top: 90px;
}

.tiled-card-view .linkCardPreview {
    padding-top: 30px;
    padding-bottom: 0;
}

.tiled-card-view .resourceType {
    padding: 10px 0 0;
    height: 58px;
}

/**
 * 6. Components: Recognizable pieces of UI.
 * Adding new components should make up the vast majority of development.
 */
/* -------------------------------------------------------------------------
   Stacked Card View > "Topic" Card Styles
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
.stacked-card-view {
    /** 
     * Card overrides 
     */
    /** 
     * Card expander styles
     * This div contains the topics which are made visible once a card stack
     * is selected.
     */
}

    .stacked-card-view .ae-card__arrow {
        opacity: 0;
        z-index: 1;
        position: relative;
        margin: 0 auto;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 16px 16px 16px;
        border-color: transparent transparent #b0b7bc transparent;
    }

    .stacked-card-view .ae-card--stacked--is-selected .ae-card__arrow {
        opacity: 1;
    }

    .stacked-card-view .card-expander {
        position: absolute;
        left: 0;
        right: 0;
        margin-top: 32px;
        overflow: hidden;
        line-height: 0;
        height: 0;
        -webkit-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear 0.4s;
        -moz-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear 0.4s;
        -ms-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear 0.4s;
        -o-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear 0.4s;
        transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear 0.4s;
    }

    .stacked-card-view .ae-card--stacked--is-selected + .card-expander {
        -webkit-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear;
        -moz-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear;
        -ms-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear;
        -o-transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear;
        transition: height 0.4s cubic-bezier(0.36, 0.005, 0.035, 1.005), opacity 0s linear;
    }

    .stacked-card-view .card-expander .ae-card {
        opacity: 0;
        -webkit-transition: opacity 0.65s ease;
        -moz-transition: opacity 0.65s ease;
        -ms-transition: opacity 0.65s ease;
        -o-transition: opacity 0.65s ease;
        transition: opacity 0.65s ease;
    }

    .stacked-card-view .ae-card--stacked--is-selected + .card-expander .ae-card {
        opacity: 1;
    }

/* -------------------------------------------------------------------------
   Journey Specific Topic Card Modifications
   ------------------------------------------------------------------------- */
/**
 * Add a 6 pixel border-right to the topic cards, with the colour of the active journey

#templateContainer.wrapper-early-childhood .stacked-card-view .topic-card .ae-card__content {
    border-right: rem(4px) solid $color-pink;
}

#templateContainer.wrapper-elementary .stacked-card-view .topic-card .ae-card__content {
    border-right: rem(4px) solid $color-blue;
}

#templateContainer.wrapper-junior-high .stacked-card-view .topic-card .ae-card__content {
    border-right: rem(4px) solid $color-yellow;
}

#templateContainer.wrapper-high-school .stacked-card-view .topic-card .ae-card__content {
    border-right: rem(4px) solid $color-green;
}

#templateContainer.wrapper-ministry .stacked-card-view .topic-card .ae-card__content {
    border-right: rem(4px) solid $color-brown;
}

#templateContainer.wrapper-school-administration .stacked-card-view .topic-card .ae-card__content {
    border-right: rem(4px) solid $color-grey;
}
 */
/* -------------------------------------------------------------------------
   Topic Card - Breakpoints
   ------------------------------------------------------------------------- */
@media screen and (max-width: 839px) {
    .stacked-card-view .topic-card {
        /**
         * Card - Automatic Row Mode
         *
         * Changes card to minimalized "row mode" styles in tablet mode
        .ae-card {
            height: auto;
            max-width: none;
        }

        .ae-card__content {
            margin-left: 0;
        }

        .ae-card__content-body {
            position: relative;
            top: 0;
            left: 0;
            background: none !important;
        }

        .ae-card__content-body-text {
            opacity: 1 !important;
            padding: 0 !important;
            color: #4A5156 !important;
            background: transparent !important;
        }

        .ae-card__content-body-text:hover {
        }

        .ae-card__content-body-text:after {
            display: none;
        }

        .ae-card__sidebar {
            display: none;
        }
         */
    }
}

@media screen and (max-width: 479px) {
    /**
     * Card - Automatic Phone Mode
     *
     * Changes card to minimalized "row mode" styles in phone mode
     */
    .stacked-card-view .topic-card {
        /* Remove margin-bottom from heading */
        /* Hide description */
        /* Hide description cut-off gradient */
        /* Hide sidebar */
    }

        .stacked-card-view .topic-card .ae-card {
            max-width: none;
            height: auto;
        }

        .stacked-card-view .topic-card .ae-card__content {
            margin-left: 0;
        }

        .stacked-card-view .topic-card .ae-card__content-body {
            position: relative;
            top: 0;
            left: 0;
            background: none !important;
        }

        .stacked-card-view .topic-card .ae-card__content-heading {
            margin-bottom: 0;
        }

        .stacked-card-view .topic-card .ae-card__content-body-text {
            display: none;
        }

            .stacked-card-view .topic-card .ae-card__content-body-text:after {
                display: none;
            }

        .stacked-card-view .topic-card .ae-card__sidebar {
            display: none;
        }
}

/* -------------------------------------------------------------------------
   Stacked Card View > Stacked Card Styles
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
/**
 * When the card stack "mini-category" is selected, change the background to match
 * the selected journey (.ae-card--stacked--sel-small.ae-card--stacked--is-selected)
 */


@media screen and (max-width: 479px) {
    /**
     * Card - Automatic Phone Mode
     *
     * Changes stacked card to minimalized "row mode" styles in phone mode
     */
    .ae-card--stacked {
        height: 4rem;
        max-width: none;
    }

        .ae-card--stacked .ae-card__badge {
            top: 0.875rem;
            right: 0.875rem;
        }

        .ae-card--stacked .ae-card__content {
            margin-left: 0;
            border-width: 0.5rem;
        }

        .ae-card--stacked .ae-card__content-body {
            position: relative;
            top: 0;
            left: 0;
            background: none !important;
        }
        /* Hide description */
        .ae-card--stacked .ae-card__content-body-text {
            display: none;
        }
            /* Hide description cut-off gradient */
            .ae-card--stacked .ae-card__content-body-text:after {
                display: none;
            }
        /* Hide sidebar */
        .ae-card--stacked .ae-card__sidebar {
            display: none;
        }
    /* Adjust arrow */
    .ae-card--stacked--is-selected .ae-card__arrow {
        bottom: -1rem;
    }
    /* Remove margin-top */
    .ae-card--stacked--sel-small.ae-card--stacked--is-selected {
        margin-top: 0;
    }
        /* Margin adjustments for selected styles */
        .ae-card--stacked--sel-small.ae-card--stacked--is-selected .ae-card__content-heading {
            margin-left: 1.25rem;
            margin-right: 3.125rem;
        }
}

/* -------------------------------------------------------------------------
   Tiled Card View > "Topic" Card Styles
   ------------------------------------------------------------------------- */
.tiled-card-view .topic-card .ae-card {
    margin: 0 auto 15px;
    max-width: none;
}

/**
 * Topic Card - Breakpoints
 */
@media screen and (max-width: 768px) {
    .tiled-card-view .topic-card {
        /**
         * Card - Automatic Row Mode
         *
         * Changes card to minimalized "row mode" styles under 768px viewport
         */
    }

        .tiled-card-view .topic-card .ae-card {
            height: auto;
            max-width: none;
        }

        .tiled-card-view .topic-card .ae-card__content {
            margin-left: 0;
        }

        .tiled-card-view .topic-card .ae-card__content-body {
            position: relative;
            top: 0;
            left: 0;
            background: none !important;
        }

        .tiled-card-view .topic-card .ae-card__content-body-text {
            opacity: 1 !important;
            padding: 0 !important;
            color: #4A5156 !important;
            background: transparent !important;
        }

            .tiled-card-view .topic-card .ae-card__content-body-text:after {
                display: none;
            }

        .tiled-card-view .topic-card .ae-card__sidebar {
            display: none;
        }
}

@media screen and (max-width: 600px) {
    .tiled-card-view .topic-card {
        /* Remove margin-bottom from heading */
        /* Hide description */
    }

        .tiled-card-view .topic-card .ae-card__content-heading {
            margin-bottom: 0;
        }

        .tiled-card-view .topic-card .ae-card__content-body-text {
            display: none;
        }
}

/**
 * 7. Trumps: Highest specificity layer.
 * Utilities and helper classes.
 */
/* -------------------------------------------------------------------------
   Details Page
   ------------------------------------------------------------------------- */
/**
 * 1. Settings
 * This layer should only contain settings that need to be accessed from anywhere.
 */
/**
 * 2. Tools: Globally available tooling - mainly functions and mixins.
 * Any function/mixin that does not need to be accessed globally belongs in the
 * partial to which it relates.
 */
/**
 * 3. Generic: High-level, far reaching styles.
 * This layer is seldom modified, and is the first layer that produces any CSS.
 * e.g. Global box-sizing rules, CSS resets, Normalize.css would go here, but 
 * it's already being added by Bootstrap.
 */
/**
 * 4. Elements: Unclassed, element-based selectors.
 * This is the last layer where we should find bare HTML element selectors.
 */
/**
 * 5. Objects: This is the first layer in which we find class-based selectors.
 * Objects can range from something as simple as a .wrapper element, to layout systems.
 * e.g. The Media Object (already added by Bootstrap)
 */
/**
 * Details Page - Content
 *
 * Wrapper for the main content of the page.
 */
.o-details-content {
    height: calc(100vh - 55px - 64px - 40px);
    padding-bottom: 30px;
    padding-right: 10px;
    /*border-left-style: solid;
    border-left-width: thin;*/
}

    .o-details-content .toolboxWrapper:last-child .dialogContent {
        height: calc(100vh - 55px - 64px - 40px);
        padding-bottom: 0;
    }

/* -------------------------------------------------------------------------
    Details Page - Content: Modifiers
    ------------------------------------------------------------------------- */
/**
 * o-details-content--hide-right-sidebar
 *
 * This class is only applied on the "My Content" page, and was added to adjust 
 * layout as required to hide the right sidebar (containing the categories)
 */
.o-details-content--hide-right-sidebar .dialogTool {
    display: none;
}

/**
 * Details Page - Sidebar
 *
 * Wrapper for the sidebar of the details page.
 */
/**
 * Details Page - Toolbox Content Area
 *
 * Wrapper for the content area of the toolbox content
 */
.o-toolbox-content-area {
    /**
     * Updates to media object
     */
    /**
     * Modifier Classes
     */
}

    .o-toolbox-content-area a,
    .o-toolbox-content-area a:hover {
        color: #4b7b00;
    }

    .o-toolbox-content-area .media-left {
        padding-right: 15px;
    }

    .o-toolbox-content-area .media-body {
        color: rgba(54, 66, 74, 0.87);
        font-size: 14px;
    }

        .o-toolbox-content-area .media-body .media-heading {
            margin-top: 3px;
            color: #36424a;
        }

    .o-toolbox-content-area .media-right {
        padding-left: 15px;
    }

        .o-toolbox-content-area .media-right .btn-group,
        .o-toolbox-content-area .media-right .btn-group-vertical {
            margin-top: 0;
            margin-bottom: 0;
        }

        .o-toolbox-content-area .media-right .btn {
            text-decoration: none;
        }

            .o-toolbox-content-area .media-right .btn:first-child {
                margin-top: 0;
            }

            .o-toolbox-content-area .media-right .btn:last-child {
                margin-bottom: 0;
            }

    .o-toolbox-content-area .panel--hover {
        cursor: pointer;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

        .o-toolbox-content-area .panel--hover:hover {
            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }

    .o-toolbox-content-area .media-right--min-width-90-btns .btn {
        display: block;
        min-width: 90px;
    }

/* -------------------------------------------------------------------------
    My Appplications List Styles
    ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
    My Favourties List Styles
    ------------------------------------------------------------------------- */
#UserFavsList.o-toolbox-content-area a {
    text-decoration: none;
    color: #4b7b00;
}

#UserFavsList.o-toolbox-content-area .panel-body {
    padding: 10px 15px;
}

#UserFavsList.o-toolbox-content-area .media-left i {
    margin-top: 6px;
    font-size: 26px;
    color: #4b7b00;
}

#UserFavsList.o-toolbox-content-area .media-body {
    font-size: 18px;
}

    #UserFavsList.o-toolbox-content-area .media-body a:hover {
        text-decoration: underline;
    }

#UserFavsList.o-toolbox-content-area .media-right .btn-toolbar .btn--remove {
    box-shadow: none;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    #UserFavsList.o-toolbox-content-area .media-right .btn-toolbar .btn--remove:hover {
        background-color: #EEE;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    #UserFavsList.o-toolbox-content-area .media-right .btn-toolbar .btn--remove i {
        font-size: 20px;
        color: #b1b7bd;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    #UserFavsList.o-toolbox-content-area .media-right .btn-toolbar .btn--remove:hover i {
        color: #f44336;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

/**
 * Job Listings - Container
 *
 * Wrapper for the job listing template.
 */
/* -------------------------------------------------------------------------
    Job Listings
    ------------------------------------------------------------------------- */
.o-job-list-container .dialogNewsContent {
    width: 100%;
}

.o-job-list-container .dialogContent a.job-list-item {
    display: block;
    color: #4b7b00;
    border-bottom: 1px solid #EEE;
}

    .o-job-list-container .dialogContent a.job-list-item:last-child {
        border-bottom: none;
    }

    .o-job-list-container .dialogContent a.job-list-item:hover {
        text-decoration: underline;
        background-color: #f3f3f3;
    }

    .o-job-list-container .dialogContent a.job-list-item p {
        display: inline-block;
    }

        .o-job-list-container .dialogContent a.job-list-item p:hover {
            text-decoration: underline;
        }

.o-job-list-container .toolbox-content-area {
    padding-bottom: 50px;
}

/* -------------------------------------------------------------------------
    Job Listings: Modifiers
    ------------------------------------------------------------------------- */
/**
 * o-job-list-container--
 *
 * 
 */
/**
 * 6. Components: Recognizable pieces of UI.
 * Adding new components should make up the vast majority of development.
 */
/* -------------------------------------------------------------------------
   Empty State Component

   Styles for an empty state message containing an icon, a heading, text,
   and a CTA (call to action)
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   Empty State
   ------------------------------------------------------------------------- */
.c-empty-state {
    margin: 30px auto;
    padding: 0 15px;
    max-width: 450px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   Empty State - Picture
   ------------------------------------------------------------------------- */
.c-empty-state__picture i.material-icons {
    font-size: 120px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35);
    color: #e3e5e7;
}

/* -------------------------------------------------------------------------
   Empty State - Heading
   ------------------------------------------------------------------------- */
.c-empty-state__heading {
    margin-top: 10px;
    margin-bottom: 13px;
    color: #889299;
}

/* -------------------------------------------------------------------------
   Empty State - Text
   ------------------------------------------------------------------------- */
.c-empty-state__text {
    margin-bottom: 20px;
    color: #889299;
}

/* -------------------------------------------------------------------------
   Empty State - CTA
   ------------------------------------------------------------------------- */
.c-empty-state__cta {
    text-decoration: none !important;
}

/* -------------------------------------------------------------------------
   Pill Component

   Used to style the detail page "categories"
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
#topic-details .o-details-content ul.categories li {
    margin: 0;
    padding: 10px 15px 0;
    border: none;
}

    #topic-details .o-details-content ul.categories li:hover {
        background: none;
    }

    #topic-details .o-details-content ul.categories li > .category-title {
        display: block;
        /* -------------------------------------------------------------------------
           Pill
           ------------------------------------------------------------------------- */
        /**
         * Adjustments to make the entire anchor tag clickable rather than only the text
         */
        /* -------------------------------------------------------------------------
           Pill - Modifiers
           ------------------------------------------------------------------------- */
        /**
         * Pill - Current language
         *
         * Identifies which element in the DOM is the current language, when dynamically
         * toggled between English and French.
         */
    }

/*#topic-details .o-details-content ul.categories li > .category-title .c-pill {
            padding: 8px 5px;
            width: 100%;
            border: 1px solid #36424A;
        }

            #topic-details .o-details-content ul.categories li > .category-title .c-pill:hover {
                text-decoration: none;
                color: #333;
                background: #f1f3f4;
            }

            #topic-details .o-details-content ul.categories li > .category-title .c-pill.is-current-lang {
                display: block !important;
            }*/

/* -------------------------------------------------------------------------
   Journey Specific Category Pill Modifications
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Topic Menu Component

   Used to style the the topic menu/navigation on the details page
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
#topic-details .c-topic-menu .subTopic.selected,
#topic-details .c-topic-menu .toolboxItem .selected a {
    background: #36424A;
}

#topic-details .c-topic-menu a:hover {
    text-decoration: none;
}

#topic-details .c-topic-menu .subTopic.selected:after,
#topic-details .c-topic-menu .toolboxItem .selected a:after {
    border-color: transparent transparent transparent #36424A;
}

#topic-details .c-topic-menu .activeSubTopic,
#topic-details .c-topic-menu .toolboxItemContainer {
    background: #f1f3f4;
}

#topic-details .c-topic-menu .subtopicName {
    font-size: 22px;
}

#topic-details .c-topic-menu .subtopicTitle {
    font-size: 16px;
    line-height: 32px;
}

/* -------------------------------------------------------------------------
   Topic Menu - Breakpoints
   ------------------------------------------------------------------------- */
@media screen and (max-width: 990px) {
    #topic-details .c-topic-menu {
        /**
         * Hide the selected item "arrow" on mobile
         */
    }

        #topic-details .c-topic-menu .subTopic.selected:after,
        #topic-details .c-topic-menu .subTopics .toolboxItemContainer .toolboxItem .selected a:after {
            display: none;
        }
}

/* -------------------------------------------------------------------------
   Journey Specific Topic Menu Modifications
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Journey Back Button

   Used to style the the journey-specific back button on the details page and
   search page.
   ------------------------------------------------------------------------- */
/**
 * UI Library - Mixins
 */
/* -------------------------------------------------------------------------
   Font Size
   ------------------------------------------------------------------------- */
/* Example Usage:
    p {
      @include font-size($font-size-small, $line-height-large);
    }
*/
/* -------------------------------------------------------------------------
   SVG background images with PNG and retina fallback
   ------------------------------------------------------------------------- */
/* Example Usage:
    body {
      @include background-image('pattern');
    }
*/
/* -------------------------------------------------------------------------
   Animations and keyframes
   ------------------------------------------------------------------------- */
/* Example Usage:
    @include keyframes(slide-down) {
      0% { opacity: 1; }
      90% { opacity: 0; }
    }

    .element {
      width: 100px;
      height: 100px;
      background: black;
      @include animation('slide-down 5s 3');
    }
*/
/* -------------------------------------------------------------------------
   Transitions
   ------------------------------------------------------------------------- */
/* Example Usage:
    a {
        color: gray;
        @include transition(color .3s ease);
        &:hover {
        color: black;
        }
    }
*/
/* -------------------------------------------------------------------------
   Miscellaneous Browser Prefixes
   ------------------------------------------------------------------------- */
.back-to-grid-btn.journey-btn {
    box-sizing: border-box;
    position: relative;
    margin-left: 10px;
    padding: 3px 8px;
    width: auto;
    background: none;
    border: 1px solid #FFF;
    /**
	 * Styles for the back arrow
	 */
    /**
	 * Journey-specific Background & Arrow Colors
	 */
    /* -------------------------------------------------------------------------
	   Journey Back Button - Icon
	   ------------------------------------------------------------------------- */
    /**
	 * Journey-specific icons
	 */
    /* -------------------------------------------------------------------------
	   Journey Back Button - Label
	   ------------------------------------------------------------------------- */
}

    .back-to-grid-btn.journey-btn:before {
        content: '';
        position: absolute;
        top: 7px;
        left: -10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 10px 8px 0;
    }

    .back-to-grid-btn.journey-btn.wrapper-early-childhood {
        background: #EC098C;
    }

        .back-to-grid-btn.journey-btn.wrapper-early-childhood:before {
            border-color: transparent #FFFFFF transparent transparent;
        }

    .back-to-grid-btn.journey-btn.wrapper-elementary {
        background: #00AFDC;
    }

        .back-to-grid-btn.journey-btn.wrapper-elementary:before {
            border-color: transparent #FFFFFF transparent transparent;
        }

    .back-to-grid-btn.journey-btn.wrapper-junior-high {
        background: #EDB700;
        border: 1px solid #1c2227;
    }

        .back-to-grid-btn.journey-btn.wrapper-junior-high:before {
            border-color: transparent #1c2227 transparent transparent;
        }

    .back-to-grid-btn.journey-btn.wrapper-high-school {
        background: #6b992d;
    }

        .back-to-grid-btn.journey-btn.wrapper-high-school:before {
            border-color: transparent #FFFFFF transparent transparent;
        }

    .back-to-grid-btn.journey-btn.wrapper-ministry {
        background: #D06F19;
    }

        .back-to-grid-btn.journey-btn.wrapper-ministry:before {
            border-color: transparent #FFFFFF transparent transparent;
        }

    .back-to-grid-btn.journey-btn.wrapper-school-administration {
        background: #69737B;
    }

        .back-to-grid-btn.journey-btn.wrapper-school-administration:before {
            border-color: transparent #FFFFFF transparent transparent;
        }

    .back-to-grid-btn.journey-btn .journey-btn__icon {
        float: left;
        display: block;
        margin-right: 0.375rem;
        width: 24px;
        height: 24px;
        background-size: 150%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .back-to-grid-btn.journey-btn.wrapper-early-childhood .journey-btn__icon {
        background-image: url(/images/early-childhood.png);
    }

    .back-to-grid-btn.journey-btn.wrapper-elementary .journey-btn__icon {
        background-image: url(/images/elementary.png);
    }

    .back-to-grid-btn.journey-btn.wrapper-junior-high .journey-btn__icon {
        background-image: url(/images/journey-color/juniorhigh-dark.png);
    }

    .back-to-grid-btn.journey-btn.wrapper-high-school .journey-btn__icon {
        background-image: url(/images/highschool.png);
    }

    .back-to-grid-btn.journey-btn.wrapper-ministry .journey-btn__icon {
        background-image: url(/images/ministry.png);
    }

    .back-to-grid-btn.journey-btn.wrapper-school-administration .journey-btn__icon {
        background-image: url(/images/school-system.png);
    }

    .back-to-grid-btn.journey-btn .journey-btn__label {
        float: left;
        display: block;
        font-size: 14px;
        line-height: 24px;
        color: #FFF;
    }

@media only screen and (max-width: 1024px) {
    .back-to-grid-btn.journey-btn .journey-btn__label {
        display: none !important;
    }

    .back-to-grid-btn.journey-btn .journey-btn__icon {
        margin-right: 0 !important;
    }
}

.back-to-grid-btn.journey-btn.wrapper-junior-high .journey-btn__label {
    color: #1c2227;
}

@media only screen and (max-width: 1024px) {
    .topic.topicDetailsHeader .subtopicTitle {
        display: none !important;
    }
}

/**
 * 7. Trumps: Highest specificity layer.
 * Utilities and helper classes.
 */
/* -------------------------------------------------------------------------
   Home Page
   ------------------------------------------------------------------------- */
/**
 * 1. Settings
 * This layer should only contain settings that need to be accessed from anywhere.
 */
/**
 * 2. Tools: Globally available tooling - mainly functions and mixins.
 * Any function/mixin that does not need to be accessed globally belongs in the
 * partial to which it relates.
 */
/**
 * 3. Generic: High-level, far reaching styles.
 * This layer is seldom modified, and is the first layer that produces any CSS.
 * e.g. Global box-sizing rules, CSS resets, Normalize.css would go here, but 
 * it's already being added by Bootstrap.
 */
/**
 * 4. Elements: Unclassed, element-based selectors.
 * This is the last layer where we should find bare HTML element selectors.
 */
/**
 * 5. Objects: This is the first layer in which we find class-based selectors.
 * Objects can range from something as simple as a .wrapper element, to layout systems.
 * e.g. The Media Object (already added by Bootstrap)
 */
/* Homepage layout styles */
.alertBox {
    box-sizing: border-box;
}

.home .mini-footer {
    position: relative;
}

.home #journey {
    display: none;
}

.home .spacer {
    padding: 35px;
}

.home article {
    width: 100%;
    padding: 0;
}

.home .masGrid {
    width: calc(80% - 1px);
    padding: 0.5%;
    max-width: none;
    box-shadow: 2px 0 0 0 #eee;
    border-right: 1px solid #ddd;
}

.masonry.home {
    padding-top: 0px;
}

.home .spacer {
    padding: 0px;
}

.ae-tour {
    display: inline-block;
}

.journey-list-wrapper {
    width: 100%;
}

@media screen and (max-width: 1100px) {
    .ae-tour {
        display: none;
    }
}

.journeyList {
    width: 79.25%;
    top: 250px;
    position: absolute;
    height: 575px;
    z-index: -9999;
}

@media screen and (max-width: 1250px) {
    .home .masGrid {
        width: 99%;
        border: 0;
    }
}

@media screen and (max-width: 600px) {
    .home .spacer {
        padding: 0;
    }
}

#container {
    clear: both;
    background: #fafafa;
}

.mainContent {
    width: 100%;
    /*display: table; <!-- this was breaking stuff */
    display: block;
    background: #F7F7F7;
}

    .mainContent article {
        min-height: 300px;
        display: table-cell;
        float: left;
        padding-top: 10px;
    }

.masGrid {
    max-width: 1200px;
    float: left;
}

.home .rightSidebar {
    width: 18%;
    margin: 0.4%;
}

.home .welcome,
.home .news {
    margin: 7px 10px;
}

.home .news {
    margin-top: 25px;
    position: relative;
}

.news h5 {
    margin-bottom: 5px;
}

a.news-view-all-btn {
    font-size: 14px;
    display: inline-block;
    margin: 5px 0;
    color: #fff;
    padding: 5px 10px;
    border-radius: 2px;
    background-color: #36424a;
}

@media screen and (max-width: 1250px) {
    .home .rightSidebar {
        width: 99%;
        border: 0;
    }

    .welcome {
        min-height: 0;
    }

    .home .welcome, .home .news {
        margin: 7px auto 20px;
    }
}

@media screen and (max-width: 620px) {
    .home .welcome, .home .news {
        margin: 0 2px;
        width: calc(100% - 14px);
        padding: 5px;
        background: #fff;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 600px) {
    .home .news {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 380px) {
    .welcome {
        width: 250px;
    }
}

/**
 * 6. Components: Recognizable pieces of UI.
 * Adding new components should make up the vast majority of development.
 */
.home .flexslider .flex-control-nav {
    bottom: 0px;
}

@media screen and (max-width: 620px) {
    .masonry.home .item {
        height: 70px;
    }
}

.flexslider.normal {
    display: block;
}

@media screen and (max-width: 400px) {
    .flexslider.normal {
        display: none;
    }
}

.flexslider.mobile {
    display: none;
}

@media screen and (max-width: 400px) {
    .flexslider.mobile {
        display: block;
    }
}



.home .item.w1 {
    width: 24%;
}

.home .item.w3 {
    width: 32%;
}

.home .item.w4 {
    width: 99%;
}

.home .banner.item.w4 {
    height: auto;
}

    .home .banner.item.w4:hover {
        transform: none;
        box-shadow: none;
    }

.home .item.h2 {
    height: 600px;
}



.home-link-box {
    background-color: rgba(255, 255, 255, 0.8);
    width: 78%;
    padding: 10px;
    margin: 0 auto;
    max-width: 290px;
    border-radius: 10px;
    box-shadow: 0 3px 10px -6px #000 inset;
}

    .home-link-box a {
        display: block;
        text-align: center;
        padding: 4px 2px;
        margin: 5px 0;
        border-bottom: 2px solid transparent;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
        font-size: 14px;
    }

        .home-link-box a:hover {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            text-decoration: none;
            color: #333;
        }



@media screen and (max-width: 400px) {
    .masonry.home .item.card.postSecondary, .masonry.home .item.card.administration {
        height: 70px;
    }

        .masonry.home .item.card.postSecondary h1, .masonry.home .item.card.administration h1 {
            padding-top: 25px;
            padding-left: 40%;
            height: 45px;
            margin: 0;
            padding-bottom: 0;
            text-align: left;
        }

    .home .card h1 {
        /*padding-top: 75px;*/
    }
}

/**
 * 7. Trumps: Highest specificity layer.
 * Utilities and helper classes.
 */

/**
 * 8. TWINS specific css
 */

.twins-desktop-badge .mdl-badge[data-badge]:after {
    background-color: red;
    right: -15px;
}

.twins-mobile-badge .mdl-badge[data-badge]:after {
    background-color: red;
    right: 35px;
    /*margin-top: 5px;*/
}

.twins-mobile-badge .fa-envelope-open-o {
    margin-top: 17px;
}


.twins-top-menu .mdl-menu__container {
    margin-left: -41px;
    /*width: 20px;*/
}




/*.mdl-menu
.twins-top-menu .mdl-menu__outline {
    width: 20px;
}

.mdl-layout__drawer {
    width: 500px;
    left: -250px;
}*/

/****************** CUSTOM STYLES - ARD ****************/
/*********** MOVE WHEREVER APPROPRIATE LATER ********/



/***** CONTAINER FIXES ************/

body, main {
    background-color: #f1f1f1 !important;
}


.mainArea {
    background-color: #f1f1f1 !important

}
.page-section {
    background-color: #fff;
    border-radius: 7px !important;
    border: solid 2px #dbdbdb;
    padding: 30px;
    margin-bottom: 20px;
}

.page-section h2:first-of-type{

    margin-top: 0px;
}

@media screen and (max-width: 480px) {

    .page-section {
        padding: 15px;
    }
}




.site-title {
    font-weight: 700;
    font-size: 18px;
}

@media screen and (max-width: 480px) {

    .site-title {
        font-size: 14px;
    }
}

#progress-bar {
    display: none;
}
.main-content-area {
    margin-bottom: 50px;
}

.content-area {
    margin-bottom: 20px;
}

.no-side-padding {
    padding-left: 0px;
    padding-right: 0px;
}


.details-inner-container {
    margin: 40px;
}


@media screen and (max-width: 768px) {
    .header-spacer {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 480px) {
    .header-spacer {
        margin-top: 40px;
    }
}



/**** SIDE BAR and menu*****/
/*#sidebar {
    padding-left: 20px;
}*/

.subTopic-expand {
    display: none;
}


.sidebar-card h2 {
    margin-top: 0px;
}

/* mobile menu*/

.mobile-menu {
    border: solid 1px #afb6ba;
    padding: 0px;
    width: calc(100% - 30px);
}

    .mobile-menu a.selected {
        border-radius: 0px;
    }


.mobile-menu .subTopics a:before {
   
    left: 0px;
    width: 100%; /* or 100px */

}

.login-header {
    margin-top: 10px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #005072;
}
/**** AE Styles OVERRIDES*/
.alberta-theme h1, .alberta-theme h2, .alberta-theme h3 {
    font-family: "Lato", "Helvetica", Arial, sans-serif !important;
}

.alberta-theme a:active {
    color: #71B800 !important;
    border-bottom: none !important;
}

.alberta-theme a:hover {
    border-bottom: none !important;
}

#header .navbar-default .navbar-nav > li > a {
    color: #fff;
}
/******  ED Styles OVERRIDES ******/


a:focus {
    outline: 1px dotted #01698c !important;
}

.alert h2 {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    margin-top: 12px;
    margin-bottom: 6px;
}

.alert a {
    text-decoration: underline;
}


/* user-details*/



.user-details {
    /*background-color: #005983 !important;
    color: #fff !important;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 6px solid #71B800;*/
    background-color: #fff !important;
    color: #005072;
    padding: 0px;
    border-radius: 7px !important;
}


.user-detail-section {
    margin-bottom: 10px;
}

.user-detail-label {
    font-weight: 700;
    font-size: 14px;
}

.user-detail-number {
    font-weight: 700;
    font-size: 16px;
}

.user-detail-text {
    font-weight: 400;
    font-size: 14px;
}

.confidential {
    font-size: 12px;
    line-height: 24px;
}


#user-details-more {
    margin-top: 10px;
    font-size: 14px;
    display: none;
}

#user-details-extra-section {
    display: block;
}



.user-details-more-button:before {
    font-family: FontAwesome;
    content: "\f055" !important;
    margin: 0 6px 0 0;
    color: fff;
    font-size: 16px;
}



.user-details-more-button.minus:before {
    content: "\f056" !important;
}

.user-details-more-button a {
    color: #005072 !important;
    text-decoration: underline;
}


@media only screen and (max-width: 480px) {
    #user-details-extra-section {
        display: none;
    }


}


.authority-section {
    margin-bottom: 12px;
}



.authority-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.authority-message {
    font-size: 14px;
    line-height: 22px;
    line-height: 20px;
}

.authority-title {
    font-size: 16px;
}

.authority-dates {
    font-size: 14px;
}

.authority-date {
    margin-right: 30px;
}



@media only screen and (max-width: 480px) {
    .authority-date {
        width: 100%;
        display: block;
    }

    .authority-label {
        line-height: 20px;
    }

    .authority-date {
        line-height: 20px;
    }

    #user-details-more {
        margin-bottom: 10px;
        display: block;
    }
}

/*** Alert boxes *****/
.alert-messages .alert-message .alert-title, .alert-messages .alert-message .alert-header {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
}



.alert-messages .alert-detail {
    font-size: 14px;
}

    .alert-messages .alert-detail.no-title {
        padding-left: 0px;
    }

.alert-messages .alert-title:before {
    font-family: FontAwesome;
    content: "\f071" !important;
    margin: 0 6px 0 0;
    color: #ff5722;
    font-size: 16px;
}

.alert-messages .alert-message {
    padding-top: 20px;
}

.alert-messages {
    padding: 0px 20px 20px 20px;
    margin-bottom: 20px;
}

.alert-messages .title {
    font-size: 15px;
    padding-top: 20px;
    font-weight: 700;
}

.alert-messages.orange {
    background-color: #fed6c9;
    border-left: 6px solid #ff5722;
}


.alert-messages.red {
    background-color: #fedede;
    border-left: 6px solid #ff0000;
}

.alert-messages.blue {
    background-color: #dceaf0;
    border-left: 6px solid #03a9f4;
}


.icon-upload-in-message {
    background-image: none !important;
}

.icon-upload {
    background-image: none !important;
    height: 23px !important;
}

.icon-upload:after, .icon-upload-in-message:after {
    font-family: FontAwesome;
    content: "\f093" !important;
    margin: 0 6px 0 0;
    color: #005072 !important;
    font-size: 20px;
    font-style: normal !important;
}

/*.back-icon {
    position: absolute;
    overflow: hidden;
    color: #333;
    text-align: right;
    width: 100%;
}

    .back-icon i {
        position: relative;
        left: -20px;
        font-size: 200px;
        color: rgba(255, 255, 255, .3);
        z-index: 0;
        top: -10px;
    }*/

@media only screen and (max-width: 480px) {
    .alert-messages .alert-detail {
        padding-left: 20px;
    }
}

/** checklist ****/
.checklist-section {
    margin-bottom: 20px;
}

.checklist-field-description {
    border-right: 0 !important;
}

.checklist-field-action {
    border-left: 0 !important;
    text-align: center;
}

.link-icons #checklist-table a[target="_blank"]:before {
    content: "" !important;
}

.cell-check {
    font-family: FontAwesome;
    color: #005983;
    font-size: 16px;
    text-align: center; 
}

.col-date {
    min-width: 80px;
}

/* additional info section */
.additional-info-section {
    margin-top: 20px;
    color: #ff0000;
}


/** table sorting **/

table.table thead {
    color: #fff;
}

table.table.table-sortable thead th{
    position: relative;   
    color:white;
    text-decoration:none;
    vertical-align:top !important;	
    text-transform:uppercase;
	
    padding:12px;
    padding-right:18px !important;
    cursor: pointer;
}

table.table th.tablesorter-headerDesc,
table.table th.tablesorter-headerAsc,
table.table th.headerSortDown,
table.table th.headerSortUp {
    text-decoration: none;
}

table.table thead th {
    /*position: relative;*/
    /*background-image: none !important;*/
}

    table.table thead th::after,
    table.table thead th.tablesorter-headerDesc::after,
    table.table thead th.tablesorter-headerAsc::after,
    table.table thead th.headerSortDown::after,
    table.table thead th.headerSortUp::after {
        position: absolute;
        top: 6px;
        right: 6px;
        display: block;
        font-family: FontAwesome;
    }

    table.table thead th.tablesorter-header::after, table.table thead th::after {
        content: "\f0dc";
        color: #fff;
        font-size: 1em;
        padding-top: 6px;
    }

table.table thead th.sorter-false::after {
    content: "" !important;
    color: #fff;
    font-size: 1em;
    padding-top: 6px;
}

    table.table thead th.sorter-false {
        cursor: default;
    }
    table.table thead th.tablesorter-headerAsc::after, a.mobile-sort.tablesorter-headerAsc::after,
    table.table thead th.headerSortUp::after, a.mobile-sort.headerSortUp::after {
        content: "\f0de" !important;
    }
    table.table thead th.tablesorter-headerDesc::after, a.mobile-sort.tablesorter-headerDesc::after, 
        table.table thead th.headerSortDown::after, a.mobile-sort.headerSortDown::after {
        content: "\f0dd" !important;
    }

table.table thead th span{
    color:white;
}


    /**** Personal information display *****/


.user-info {
    /*background-color: #e6e7e8 !important;*/
    background-color: fff !important;
    color: #333;
    padding: 0px;
    border-radius: 7px !important;
}

@media screen and (max-width: 800px) {
    .user-info {
        padding: 0px;
    }
}



.display-label-value-pair, .editor-label-value-pair {
    margin-bottom: 8px;
}

.display-form-label label, .editor-form-label label {
    font-size: 13px !important;
    font-weight: 400;

    margin-bottom: 0px;

}


.display-form-label {
    /*text-align: right;*/
    text-transform: uppercase;
}


.editor-form-label {
    min-height: 33.4px; 
}


@media only screen and (max-width: 767px) {
    .no-label {
        min-height: 0px; 
    }

}


.editor-label-value-pair label {
    color: #005072 !important;
    font-weight: 700 !important;
}

.editor-form-label label {
    padding-top: 10px;
    padding-bottom: 5px;
}

    .editor-label-value-pair .checkbox {
        margin-top: 0px !important;
    }

    .checkbox label {
        padding-top: 0px !important;
    }

    .display-form-value {
        overflow-wrap: break-word;
    }

    .display-form-value, .editor-form-value {
        font-size: 18px !important;
        font-weight: 700;
        text-align: left;
    }

    span.editor-form-checkbox {
        margin-left: 10px;
    }

    span.radio-button-container {
        padding-right: 10px;
    }

    .editor-form-value input[type='text'] {
        width: 100%;
    }

    .editor-form-value select {
        width: 100%;
        margin-top: 0px;
        margin-left: 0px;
    }

    .editor-form-radio {
        font-weight: 400;
        font-size: 13px !important;
        margin-left: 5px;
        margin-right: 10px;
    }

    .sm-input {
        width: 100px !important;
    }


    .phone-north-america {
        font-size: 11px;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .check {
        margin-left: 5px;
    }

    .phone-text {
        font-weight: 400;
    }

    .phone-input {
        display: inline-block;
        margin-right: 2px;
    }

    .form-group {
        margin-bottom: 0px !important;
    }

    .form-control-select {
        display: inline-block;
        width: 90%;
        margin-left: 0px;
    }

    .form-control input, .form-control select {
        border: none;
    }

    .form-control {
        margin-bottom: 5px;
    }

    .required {
        color: red;
        font-size: 24px;
        line-height: 12px;
    }


    .phone-country-code {
        width: 12% !important;
    }

    .phone-country-code-with-plus {
        display: inline-block;
        width: 90% !important;
    }

    .country-code-plus {
        margin-right: 5px;
    }

.phone-number {
    width: 48% !important;
}

    .phone-ext {
        width: 20% !important;
    }

    @media only screen and (max-width: 768px) {
        .display-form-label {
            text-align: left;
        }

            .display-form-label label, .editor-form-label label {
                margin-bottom: 0px;
            }



        .phone-country-code {
            width: 20% !important;
        }

        .phone-number {
            width: 50% !important;
        }
    }

    .contact-name-inline {
        display: inline-block !important;
    }

    .contact-name-title {
        width: 20% !important;
    }

    .contact-name-given {
        width: 38% !important;
    }

    .contact-name-surname {
        width: 38% !important;
    }

    .year-month-control {
        display: inline-block !important;
    }

    .year-control {
        width: 100px !important;
    }

    .month-control {
        width: 200px !important;
    }


    @media only screen and (max-width: 480px) {
        .note-div {
            height: 0px !important;
        }

        .year-month-control {
            display: block !important;
            width: 100% !important;
        }
    }


    .fee-message {
        border-top: 1px solid #dbdbdb;
        padding-top: 20px;
        margin-top: 40px;
        font-weight: 700;
        font-size: 16px;
    }

    .summaryLine {
        color: #00637f;
        margin: 25px 0 0 2px;
        padding: 0 2px 1px;
        font-size: 16px;
        font-weight: bold;
        border-top: 1px solid #00637f;
    }

    p.section-lede {
        font-size: 20px;
        line-height: 25px;
        margin-top: 6px;
    }

    #table-message {
        font-size: 16px;
    }

    .radio-button-group label {
        margin-right: 20px;
        margin-left: 5px;
    }

    #contact-change-section {
        display: none;
    }

    #remaining-content-section {
        display: none;
    }


    .table-actions {
        width: 25px;
    }

    @media (max-width: 768px) {
        .table-actions {
            width: 100%;
        }
    }

    .ng-content ul {
        list-style-type: disc !important;
        margin-left: 2em !important;
        margin-bottom: 20px;
    }

    .btn-sign-in {
        background-color: #005983 !important;
    }

    .btn-sign-up {
        background-color: #4bacc6 !important;
    }

    .aboriginal-select select {
        margin-top: 0px;
    }

    div.repeater-icons
    {
        padding-top: 10px;
    }

    div.repeater-item {
        padding: 20px !important;
    }

    .repeater-first-row {
     /*   padding-left: 6px;*/
    }

    @media only screen and (max-width: 480px) {

        .repeater-first-row {
            /*padding-left: 16px;*/
        }
    }



    .address-hint, .address-suggestion {
        padding: 15px 10px;
        border: solid 2px #03a9f4;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        background-color: #dceaf0;
        display: none;
        margin-bottom: 10px;
    }


#address-suggestion-string {
    margin-top: 20px;
    margin-bottom: 20px;
}

.address-suggestion-inputs {
    display: none;
}
.disclosure-question {
    font-weight: 700;
}

    .declaration-message, .declaration-message label {
        font-weight: 700;
        font-size: 16px;
        color: #455560;
        display: inline;
    }

    .e-signature-section {
        margin-top: 80px;
    }

    .e-signature-content {
        min-height: 32px;
        font-weight: 700;
        font-size: 18px;
    }

    .e-signature-label {
        min-height: 32px;
        font-weight: 700;
        font-size: 14px;
        border-top: 2px solid #455560;
    }

    .inline-label label {
        display: inline !important;
    }

    .authorize-section, .authorize-section label {
        font-size: 16px;
        font-weight: 700;
    }

    @media (max-width: 587px) {
        .extra-margin-tall-label {
            margin-top: 17px;
        }
    }

    span.spacer-sm {
        margin-right: 10px;
    }

    span.spacer-md {
        margin-right: 20px;
    }

    .textbox-inline {
        display: inline !important;
    }

    .textbox-30 {
        width: 30%;
    }

    .textbox-20 {
        width: 20%;
    }

    .textbox-10 {
        width: 10%;
    }

    .radio.radio-primary span.circle, .radio.radio-primary span.check {
        margin: 0px;
    }

    .radio-same-line {
        display: inline;
    }

    .radio.radio-primary label {
        color: #455560;
    }

    .radio label {
        padding-left: 35px;
    }

    /*** MSG BOARD ***/

    .message-board-action-panel a.btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    @media only screen and (max-width: 768px) {

        msg-board-message-detail .message {
            margin-top: 20px !important;
        }

        .preference-row select {
            margin-bottom: 20px;
        }
    }

    @media only screen and (max-width: 480px) {
        msg-board-message-detail .message .dates .senton, msg-board-message-detail .message .dates .expireson {
            display: block !important;
            float: none !important;
        }

        app-msg-board ul.nav li a {
            padding-left: 6px !important;
            padding-right: 6px !important;
        }
    }

@media only screen and (max-width: 480px) {
    #wizard-buttons .btn {
        font-size: 12px;
    }
}

.environmentName-public {
    left: 225px !important;
}

div[ngbdatepickerdayview].btn-light.bg-primary.text-white {
    background-color: #337ab7 !important;
}