@charset "UTF-8";
em, small {
    letter-spacing: 0
}

body, li, p {
    line-height: 1.5em
}

.DNNEmptyPane {
    display: none!important
}

.paneOutline {
    border: 1px dashed #ccc
}

a, a img, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, time, tt, u, ul, var, video {
    border: 0
}

.TB_Wrapper, .TB_Wrapper *, .dnnActionMenu, .dnnActionMenu *, .dnnActionMenu:after, .dnnActionMenu:before, .dnn_mact, .dnn_mact *, .dnn_mact:after, .dnn_mact:before, [id*=ControlPanel], [id*=ControlPanel] *, [id*=ControlPanel]:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

[class*=RadAjaxPanel] *, [class*=Digital] * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

html, li, p {
    font-size: 16px
}

ol.list-unstyled, ol.list-unstyled>li, ul.list-unstyled, ul.list-unstyled>li {
    list-style: none;
    margin: 0
}

ul.row {
    margin-left: -15px;
    margin-right: -15px
}

ol, ul {
    list-style: none
}

ul li {
    list-style-type: disc
}

ul li li {
    list-style-type: circle
}

ol li {
    list-style-type: decimal;
    list-style-position: inside
}

.nav li {
    list-style: none!important
}

a {
    outline: 0!important
}

ul#myTab {
    padding: 0;
    margin: 0
}

.popover {
    z-index: 999
}

.mark, mark {
    padding: 0;
    background-color: transparent
}

.bs-callout-danger, .bs-callout-info, .bs-callout-primary, .bs-callout-success, .bs-callout-warning {
    display: block;
    padding: 15px 30px 15px 15px
}

body {
    background: #f0f0f0;
    color: #333;
    font-size: 13px
}

.CommandButton, .Head, .Normal, .NormalBold, .NormalDisabled, .NormalRed, .NormalTextBox, .SubHead, .SubSubHead, a:hover, a:link, a:visited, body, h1, h2, h3, h4, h5, h6, input, table, td, th {
    font-family: 'Barlow Condensed', Arial, sans-serif;
}

.SubHead {
    color: #000
}

Body #Form {
    height: 100%
}

embed, img, object {
    max-width: 100%
}

[class*=map] img, [class*=Map] img, [id*=map] img, [id*=Map] img, table img {
    max-width: none!important
}

img {
    height: auto
}

em {
    font-style: italic
}

strong {
    color: #333;
    font-weight: 700
}

small {
    font-size: 12px
}

a:active, a:link, a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

p {
    margin: 0 0 20px
}

ol li>ol li {
    list-style-type: lower-latin
}

.bs-callout-primary {
    margin: 20px 0;
    border-left: 5px solid #337ab7;
    background-color: #dbe9f5
}

.bs-callout-primary h1, .bs-callout-primary h2, .bs-callout-primary h3, .bs-callout-primary h4, .bs-callout-primary h5, .bs-callout-primary h6 {
    margin-top: 0;
    color: #337ab7
}

.bs-callout-primary p:last-child {
    margin-bottom: 0
}

.bs-callout-primary .highlight, .bs-callout-primary code {
    background-color: #fff
}

.bs-callout-danger {
    margin: 20px 0;
    border-left: 5px solid #d9534f;
    background-color: #f4cecd
}

.bs-callout-danger h1, .bs-callout-danger h2, .bs-callout-danger h3, .bs-callout-danger h4, .bs-callout-danger h5, .bs-callout-danger h6 {
    margin-top: 0;
    color: #d9534f
}

.bs-callout-danger p:last-child {
    margin-bottom: 0
}

.bs-callout-danger .highlight, .bs-callout-danger code {
    background-color: #fff
}

.bs-callout-warning {
    margin: 20px 0;
    border-left: 5px solid #f0ad4e;
    background-color: #fceedb
}

.bs-callout-warning h1, .bs-callout-warning h2, .bs-callout-warning h3, .bs-callout-warning h4, .bs-callout-warning h5, .bs-callout-warning h6 {
    margin-top: 0;
    color: #f0ad4e
}

.bs-callout-warning p:last-child {
    margin-bottom: 0
}

.bs-callout-warning .highlight, .bs-callout-warning code {
    background-color: #fff
}

.bs-callout-info {
    margin: 20px 0;
    border-left: 5px solid #5bc0de;
    background-color: #daf1f8
}

.bs-callout-info h1, .bs-callout-info h2, .bs-callout-info h3, .bs-callout-info h4, .bs-callout-info h5, .bs-callout-info h6 {
    margin-top: 0;
    color: #5bc0de
}

.bs-callout-info p:last-child {
    margin-bottom: 0
}

.bs-callout-info .highlight, .bs-callout-info code {
    background-color: #fff
}

.bs-callout-success {
    margin: 20px 0;
    border-left: 5px solid #5cb85c;
    background-color: #c7e6c7
}

.bs-callout-success h1, .bs-callout-success h2, .bs-callout-success h3, .bs-callout-success h4, .bs-callout-success h5, .bs-callout-success h6 {
    margin-top: 0;
    color: #5cb85c
}

.bs-callout-success p:last-child {
    margin-bottom: 0
}

.bs-callout-success .highlight, .bs-callout-success code {
    background-color: #fff
}

/* REMOVED: Open Sans @font-face declarations.
   Site uses Barlow Condensed (loaded in portal.css). These were unused dead weight. */

/* Heading base styles - sizes and colours are overridden by portal.css.
   Keeping margin and line-height as fallback only. */
h1, h2, h3, h4, h5, h6 {
    color: #363e4c;
    line-height: 1.3em;
    margin: 0 0 10px
}

/* REMOVED: Stepped HTML font-size breakpoints (14px to 22px across 8 breakpoints).
   These conflicted with the clamp() responsive sizing in portal.css because clamp uses rem
   units which scale relative to the HTML base font-size. With both active, text was getting
   unexpectedly large at wider viewports. Portal.css clamp() now handles all responsive sizing.

   Base HTML font-size is set to 16px by the browser default, which is what the clamp values
   are designed against. */
html {
    font-size: 16px;
}

.buttons-wrapper {
    text-align: center
}

a.cta-button-primary, button.cta-button-primary {
    background: #0071b9;
    border: 1px solid #0071b9;
    color: #fff;
    transition: background-color 300ms ease-out 0s
}

a.cta-button, a.cta-button-primary, button.cta-button, button.cta-button-primary {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin: 0 5px 5px 0;
    min-width: 200px;
    padding: 10px 0;
    -webkit-transition: background-color 300ms ease-out 0s;
    -o-transition: background-color 300ms ease-out 0s
}

a.cta-button-primary:hover, button.cta-button-primary:hover {
    background: #32567d;
    border-color: #32567d
}

a.cta-button, button.cta-button {
    background: 0 0;
    border: 1px solid #0071b9;
    color: #0071b9;
    transition: background-color 300ms ease-out 0s
}

a.cta-button:hover, button.cta-button:hover {
    color: #fff;
    background: #0071b9;
    border-color: #32567d
}

.search {
    position: relative;
    min-width: 35px;
    width: 0;
    height: 34px;
    float: right;
    overflow: hidden;
    -webkit-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
	margin-right:10%;
}

.search.search-open {
    width: 25%
}

.search.small-screens.search-open {
    width: 100%
}

.search.small-screens.search-open .searchInputContainer input {
    padding: 0 124px 0 20px
}

.searchInputContainer {
    display: block!important
}

.searchInputContainer input {
    top: 0;
    right: 0;
    border: 0;
    outline: 0;
    background: #dcddd8;
    width: auto;
    height: 34px;
    margin: 0;
    padding: 0 52px 0 20px;
    font-size: 15px
}

.searchInputContainer input::-webkit-input-placeholder {
    color: #818181
}

.searchInputContainer input:-moz-placeholder {
    color: #818181
}

.searchInputContainer input::-moz-placeholder {
    color: #818181
}

.searchInputContainer input:-ms-input-placeholder {
    color: #818181
}

.searchInputContainer a.dnnSearchBoxClearText {
    right: 45px!important
}

.searchInputContainer a.dnnSearchBoxClearText.dnnShow {
    bottom: 2px
}

#search-action, .SearchButton, .search-toggle-icon {
    background: url(images/search.png) center center no-repeat #c3c1c1;
    width: 35px;
    height: 34px;
    display: block;
    position: absolute;
    top: 0;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 22px;
    right: 0;
    padding: 0;
    margin: 0;
    outline: 0;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    color: #dcddd8;
    text-indent: -9999px
}

#search-top {
    clear: both;
    width: 100%;
    background: #7CA0C0;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: all .1s ease-in-out
}

#search-top.active {
    height: auto;
    padding: 15px 0;
    overflow:visible;
}

#search-top span {
    display: inline!important
}

#search-top input {
    background: #fff;
    border: none;
    font-size: 1.2em;
    height: 46px;
    margin: 0 0 0 15px;
    width: 70%
}

#search-top a.SearchButton {
    background: url(images/search.png) center center no-repeat #e0dfdf;
    height: 46px;
    position: relative;
    display: inline-block;
    text-indent: -9999px;
    width: 60px;
    padding: 0;
    top: 5px
}

#search-action {
    display: none;
    float: right;
    height: 34px;
    margin: 0;
    padding: 6px 12px
}

#login {
    padding-right: 10px
}

@media only screen and (max-width:768px) {
    #search-action {
        display: block
    }
    #login {
        padding-right: 21px
    }
}

@media only screen and (max-width: 500px){
    ul.searchSkinObjectPreview {
        width:auto;
        min-width:240px;
    }
}

@media only screen and (max-width: 350px){
    ul.searchSkinObjectPreview {
        right:-30px;
    }
}

#login .loginGroup, #login .loginGroup *, #login .registerGroup, #login .registerGroup * {
    display: block
}

#login .loginGroup, #login .registerGroup {
    float: right;
    padding: 0;
    margin: 0
}

#login .loginGroup a, #login .registerGroup a {
    display: block;
    position: relative;
    height: 34px;
    min-width: 12px;
    padding: 7px 15px 0;
    color: #fff;
    font-size: 11px;
    vertical-align: middle
}

#login .loginGroup a:hover, #login .registerGroup a:hover {
    background: #d7d7d7;
    color: #333;
    text-decoration: none
}

#login .loginGroup a:active, #login .registerGroup a:active {
    color: #333
}

#login .loginGroup a strong, #login .registerGroup a strong {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    text-indent: -9999px
}

#login .registerGroup li {
    float: left;
    line-height: 1.2em
}

#login .registerGroup li:first-child:hover {
    border-left: #222
}

#login .registerGroup .buttonGroup {
    margin-right: 0
}

#login .registerGroup .userProfileImg a {
    min-width: 25px;
    min-height: 32px;
    padding: 0;
    background: 0 0
}

#login .registerGroup a span {
    display: inline-block;
    position: absolute;
    right: 2px;
    top: -9px;
    min-width: 7px;
    margin-right: 3px;
    background: #3b96b6;
    text-align: center;
    font-size: 11px;
    color: #fff;
    -webkit-text-shadow: 0 1px 0 #333;
    text-shadow: 0 1px 0 #333
}

#login .registerGroup a img {
    height: 32px;
    width: 32px;
    background: #333
}

#login .userNotifications {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc
}

#login .userNotifications strong {
    height: 100%;
    background: url(images/notification_icon.png) center center no-repeat
}

#login .userMessages strong {
    height: 100%;
    background: url(images/message_icon.png) center center no-repeat
}

#login .userMessages a, #login .userNotifications a {
    padding: 0 18px
}

#login .userMessages a span, #login .userNotifications a span {
    display: inline-block;
    margin-top: 9px;
    margin-right: 0;
    background-color: transparent;
    font-size: 10px
}

#topHeader {
    background: #0071b9;
    -moz-box-shadow: 1px 50px 100px 0 #cacaca;
    -webkit-box-shadow: 1px 50px 100px 0 #cacaca;
    box-shadow: 1px 50px 100px 0 #cacaca;
    min-width: 25px;
    min-height: 35px;
    padding: 0
}

header {
    background: #fff;
    border-bottom: 1px solid #91AFCA
}

#mainHeader-inner {
    padding: 30px 0
}

#mainHeader-border {
    background: #8fb299;
    height: 5px
}

#logo {
    padding-left: 15px
}

.navbar .brand {
    float: left;
    padding: 0!important;
    max-width: 120px
}

@media only screen and (max-width:768px) {
    .main-navigation {
        height: auto;
        width: 100%
    }
    nav {
        display: none
    }
    a.mobile-nav-btn {
        display: block;
        float: right;
        width: 50px;
        height: 46px;
        margin-top: 15px;
        text-align: center;
        color: #0071b9
    }
    a.mobile-nav-btn:hover {
        text-decoration: none
    }
    #navbar-top-wrapper {
        clear: both;
        position: relative;
		width:75%;
		float:left;
    }
    #navbar {
        float: none!important
    }
}

@media only screen and (min-width:767px) {
    #navbar {
        float: right
    }
}

#breadcrumb {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px dashed;
    border-color: #ccc;
    background-color: transparent;
    padding: 5px 0;
    margin: 0;
    display: block
}

#breadcrumb a {
    margin-left: 10px;
    font-weight: 600;
    font-size: 11px;
    color: #626262
}

#breadcrumb a:first-child {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 11px!important;
    font-weight: 400;
    color: #7b7d82;
    margin: 0
}

#breadcrumb img, #breadcrumb span {
    margin-left: 10px
}

main {
    background: #fff;
    border: 1px solid #ececec;
    border-top: none;
    margin-bottom: 15px;
    min-height: 350px
}

main.no-bg {
    background: 0 0
}

#mainContent-inner {
    padding: 10px
}

.dnnpane>[class*=col-md], .dnnpane>[class^=col-md] {
    padding: 0 15px
}

.image-wrapper {
    position: relative
}

.image-wrapper img {
    display: block;
    max-width: 100%
}

.image-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center
}

.grid, .grid figure, .grid figure img {
    position: relative
}

.image-wrapper .overlay h2 {
    color: #fff;
    font-weight: 700;
    margin-top: 8%;
    -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    text-transform: uppercase
}

.content-intro {
    padding-top: 30px;
    font-size: 26px;
    line-height: 30px
}

.content-intro p {
    font-size: 22px
}

.grid {
    clear: both;
    margin: 0 auto;
    max-width: 1000px;
    list-style: none;
    text-align: center
}

.grid figure {
    float: left;
    overflow: hidden;
    margin: 10px 0;
    max-height: 360px;
    width: 100%;
    height: auto;
    background: #3085a3;
    text-align: center;
    cursor: pointer
}

.grid figure img {
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: .8;
    width: 100%
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.grid figure figcaption .grid figure figcaption::after, .grid figure figcaption::before {
    pointer-events: none
}

.grid figure figcaption, .grid figure figcaption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

figure.hover-effect {
    background: #333
}

figure.hover-effect h2, figure.hover-effect img {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out
}

figure.hover-effect img {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

figure.hover-effect h2 {
    font-size: 30px;
    color: #0071b9;
    -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, .4);
    -moz-text-shadow: 0 2px 2px rgba(0, 0, 0, .4);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .4)
}

figure.hover-effect h2>span {
    color: #fff;
    font-weight: 700
}

figure.hover-effect h2, figure.hover-effect p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px;
    text-align: center;
    width: 100%
}

figure.hover-effect p {
    text-transform: none;
    font-size: 24px;
    opacity: 0;
    padding: 15px;
    -moz-transition: opacity .35s, -webkit-transform .35s;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    -o-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0)
}

figure.hover-effect:hover h2, figure.hover-effect:hover img {
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0)
}

figure.hover-effect:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.content-block-news, .content-block-reg {
    margin-bottom: 20px
}

.content-block-news .article-layout .item {
    display: block;
    float: left;
    position: relative
}

.content-block-news .article-layout .item .item-image {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: -webkit-linear-gradient(bottom right, #c55f1e 0, #66d6ff 100%);
    background: -o-linear-gradient(bottom right, #c55f1e 0, #66d6ff 100%);
    background: linear-gradient(to top left, #c55f1e 0, #66d6ff 100%)
}

.content-block-news .article-layout .item .item-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
    opacity: .7;
    filter: alpha(opacity=70);
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.content-block-news .article-layout .item .item-image .item-header {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    background: rgba(0, 0, 0, .1);
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.content-block-news .article-layout .item .item-image .item-header strong {
    color: #fff;
    display: block;
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    font-size: 16px;
    line-height: 130%;
    font-weight: 500;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.content-block-news .article-layout .item .item-image .item-header .item-meta {
    display: block;
    color: #fff;
    padding: 10px 0 17px;
    font-size: 11px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -40px;
    border-top: 1px solid rgba(255, 255, 255, .3);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.content-block-news .article-layout .item .item-image .item-header .item-meta i.fa {
    padding-right: 7px
}

.content-block-news .article-layout .item .item-image .item-header .item-meta span {
    display: block;
    color: #fff
}

.content-block-news .article-layout .item .item-image .item-header .item-category {
    display: block;
    font-size: 18px;
    font-weight: lighter;
    left: 15px;
    position: absolute;
    right: 15px;
    text-transform: none;
    top: 15px
}

.content-block-news .article-layout .item .item-image .item-header .item-category span {
    border: 1px solid #fff;
    color: #000;
    font-size: 24px;
    display: inline-block;
    padding: 6px 10px 5px;
    line-height: 100%;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.content-block-news .article-layout .item .item-content {
    display: block;
    background: #f4f4f4;
    width: 100%;
    font-size: 14px;
    line-height: 150%;
    color: #737373;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.content-block-news .article-layout .item .item-content .item-text {
    display: block;
    padding: 15px
}

.content-block-news .article-layout .item .item-content .item-footer-more {
    display: block;
    padding: 15px 0;
    margin: 0 15px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    border-top: 1px solid rgba(0, 0, 0, .06);
    letter-spacing: .3px;
    color: #737373
}

.content-block-news .article-layout .item:hover .item-header .item-meta {
    bottom: 0;
    opacity: 1
}

.content-block-news .article-layout .item:hover .item-header .item-category span {
    background: #0071b9;
    border-color: transparent!important;
    color: #fff
}

.content-block-news .article-layout .item:hover .item-image img {
    opacity: 1
}

.content-block-news .article-layout .item:hover .item-image .item-header {
    background: rgba(81, 81, 81, .7)
}

.content-block-news .article-layout .item:hover .item-image .item-header strong {
    bottom: 50px
}

.content-block-news .article-layout .item:hover .item-content {
    background: #fff;
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .03)
}

.content-block-news .article-layout .item:hover .item-content .item-footer-more {
    color: inherit;
    font-weight: 700;
    letter-spacing: 0;
    padding-right: 1px
}

.content-block-news .item a:hover .item-content {
    background: rgba(37, 38, 41, .8)
}

.content-block-news .article-layout:after {
    display: block;
    clear: both;
    content: ''
}

.contact-form .form-control {
    border: 1px solid #e3e3e3;
    border-radius: 0;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
    box-shadow: initial;
    height: 50px;
    padding: 12px 15px 15px
}

.contact-form::-webkit-input-placeholder {
    color: #e3e3e3
}

.contact-form:-moz-placeholder {
    color: #e3e3e3
}

.contact-form::-moz-placeholder {
    color: #e3e3e3
}

.contact-form:-ms-input-placeholder {
    color: #e3e3e3
}

footer .footer-above {
    background-color: #00458a;
    padding-top: 25px;
    border-top: none
}

footer .footer-above h2, footer .footer-above p {
    color: #fff
}

footer .footer-below, footer .terms-priv a:link, footer .terms-priv a:visited {
    color: #d2d2d2;
    font-size: 12px
}

footer .footer-col {
    margin-bottom: 25px
}

footer .footer-below {
    background-color: #2d4c72;
    padding: 15px 0
}

footer .copyright {
    float: left
}

footer .terms-priv {
    float: right
}

footer .copyright, footer .terms-priv {
    padding-left: 15px;
    padding-right: 15px
}

footer .links-list ul li {
    float: left;
    width: 100%;
    font-size: 15px;
    line-height: 1.5em
}

footer .links-list ul li a:active, footer .links-list ul li a:link, footer .links-list ul li a:visited {
    color: #fff
}

footer .links-list ul li a:hover {
    color: #f0f0f0
}

footer .links-list ul li a:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #2d4c72;
    position: relative;
    bottom: 1px;
    padding-right: 9px
}

.latest-articles {
    display: block
}

.latest-articles .item {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 20px;
    margin-bottom: 20px
}

.latest-articles .item-header {
    display: block;
    float: left;
    width: 60px
}

.latest-articles .item-header a {
    position: relative;
    display: block
}

.latest-articles .item-header span {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0
}

.latest-articles .item-header img {
    border: 2px solid #fff
}

.latest-articles .item-content {
    display: block;
    margin-left: 85px
}

.latest-articles .item-content p {
    font-size: 15px;
    margin-bottom: 15px
}

.latest-articles .item-content>strong {
    display: block;
    font-weight: 600;
    line-height: 11px;
    margin-bottom: 5px
}

.latest-articles .item-content a {
    color: #d3d3d3;
    font-weight: 700;
    font-size: 14px
}

.latest-articles .publish-date {
    color: #d3d3d3;
    font-weight: 400
}

.latest-articles .publish-date span {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase
}

.contactus ul {
    margin-left: 0
}

.contactus ul li {
    color: #fff;
    font-size: 15px;
    font-weight: 100;
    margin-bottom: 5px;
    list-style: none
}

.contactus ul li img {
    margin-right: 5px
}

.contactus a:link {
    color: #fff;
    text-decoration: none
}

.contactus a:active, .contactus a:hover {
    text-decoration: underline
}

.btn-social {
    background: url(/Portals/0/Images/social-sprite.png);
    display: inline-block;
    height: 34px;
    width: 34px
}

.btn-social.facebook {
    background-position: 0
}

.btn-social.twitter {
    background-position: -40px
}

.btn-social.googleplus {
    background-position: -80px
}

.btn-social.linkedin {
    background-position: -120px
}

.container-content {
    padding: 10px 15px 15px
}

.heading_wrapper {
    padding-left: 0;
    padding-right: 0
}

.DNNContainer_Title_h2 h2 .TitleH2, .DNNContainer_Title_h3 h3 .TitleH3, .DNNContainer_Title_h4 h4 .TitleH4 {
    display: block;
    margin-bottom: 5px
}

.DNNContainer_Title_h2 h2 .TitleH2.centered, .DNNContainer_Title_h3 h3 .TitleH3.centered, .DNNContainer_Title_h4 h4 .TitleH4.centered {
    text-align: center
}

.DNNContainer_Boxed h2 .TitleBoxed {
    display: block;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #7b7878
}

.lms_heading_1, .lms_heading_2, .lms_heading_3, .lms_heading_4, .lms_heading_5, .lms_heading_6 {
    text-align: center
}

.lms_heading_1 .lms_heading_title, .lms_heading_2 .lms_heading_title, .lms_heading_3 .lms_heading_title, .lms_heading_5 .lms_heading_title, .lms_heading_6 .lms_heading_title {
    border-bottom: 1px solid #7b7878;
    font-weight: 400;
    margin-bottom: 17px;
    margin-top: 17px;
    padding: 0 32px 28px;
    position: relative
}

.lms_heading_1 .lms_heading_title:after {
    content: "";
    position: absolute;
    top: 100%;
    margin: -10px 0 0 -5px;
    left: 50%;
    width: 10px;
    height: 20px;
    background: #fff;
    border-left: 2px solid #7b7878;
    border-right: 2px solid #7b7878;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg)
}

.lms_heading_4 .lms_heading_title {
    margin-bottom: 17px;
    margin-top: 17px;
    padding: 0 30px 10px
}

.subtle-line {
    display: block;
    border: none;
    color: #fff;
    height: 1px;
    width: 100%;
    background: -webkit-radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%);
    background: -o-radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%);
    background: -moz-radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%);
    background: radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%);
    margin-bottom: 32px
}

.hexagon {
    background-color: #fff;
    border-left: 3px solid #7b7878;
    border-right: 3px solid #7b7878;
    height: 20px;
    margin: 10.39px auto;
    position: relative;
    top: -27px;
    width: 36px;
    z-index: 10
}

.hexagon::after, .hexagon::before {
    background-color: inherit;
    content: "";
    height: 25.46px;
    left: 2.27px;
    position: absolute;
    -webkit-transform: scaleY(.5774) rotate(-45deg);
    -moz-transform: scaleY(.5774) rotate(-45deg);
    -ms-transform: scaleY(.5774) rotate(-45deg);
    -o-transform: scaleY(.5774) rotate(-45deg);
    transform: scaleY(.5774) rotate(-45deg);
    width: 25.46px;
    z-index: 1
}

.open_rectangle, .rectangle {
    margin: 10px auto;
    z-index: 10
}

.dots-wrapper, .open_rectangle, .rectangle {
    position: relative;
    background-color: #fff;
    width: 36px
}

.hexagon::before {
    border-right: 4.24px solid #7b7878;
    border-top: 4.24px solid #7b7878;
    top: -12.73px
}

.hexagon::after {
    border-bottom: 4.24px solid #7b7878;
    border-left: 4.24px solid #7b7878;
    bottom: -12.73px
}

.open_rectangle {
    border-left: 2px solid #7b7878;
    border-right: 2px solid #7b7878;
    height: 20px;
    top: -27px
}

.rectangle {
    border: 2px solid #7b7878;
    height: 13px;
    top: -24px;
    border-radius: 10px
}

.dots-wrapper {
    height: 10px;
    margin: 10.39px auto;
    top: -23px
}

.dots {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    line-height: 100px;
    background: #7b7878;
    float: left;
    margin: 0 2px 0 0
}

.valid-404 h1 {
    font-size: 10em;
    -webkit-text-shadow: 0 0 7px rgba(0, 0, 0, .75);
    text-shadow: 0 0 7px rgba(0, 0, 0, .75)
}

.valid-404 h2 {
    font-size: 33px
}

.valid-404 h1, .valid-404 h2, .valid-404 p {
    text-align: center
}

.bs-example-modal .modal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block
}

#dnnMenu .menuItem {
    word-wrap: break-word;
}

@media (min-width: 768px) {
    #dnnMenu .menuItem {
        max-width: 720px;
    }
}

@media (min-width: 992px){
    #dnnMenu .menuItem {
        max-width: 940px;
    }
}

@media (min-width: 1200px) {
    #dnnMenu .menuItem {
        max-width: 1138px;
    }
}
/*------------------- Language --------------------------*/
.language {
    float: left;
    margin-top: 5px;
}

.language .language-object {
    float: right;
    display: block;
    margin: 0;
    padding: 0;
}

.language .language-object span {
    float: left;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    margin: 0;
}

.language .language-object span:first-child {
    padding-left: 8px;
}

.language .language-object span img {
    height: 12px;
    width: 17px;
    opacity: 0.3;
}

.language .language-object span:hover img {
    opacity: 1;
}

.language .language-object .Language.selected img {
    opacity: 1;
    border-color: #222;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
}

/*------------------- User Profile --------------------------*/
#UserProfileImg
{
	margin-bottom: 15px;
}
.UserProfileControls ul {
    margin-left: 0;
}
.UserProfileControls ul li {
    display: inline-block;
}


/* Full-width banner section */
.hero-banner {
    width: 100%;
}

.heroBannerPane {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
}

/* Full-width container inside main */
.main-fullwidth {
    width: 100%;
    background: #f8f8f8;
    padding: 40px 0;
}

.mainFullWidthPane {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
}

/* Full-width container above footer */
.footer-fullwidth {
    width: 100%;
    background: #e8f5e9;
    padding: 50px 0;
}

.footerFullWidthPane {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================================
   Search bar — repositioned beneath the user account row, made wider.
   Phase A of the search UX revamp.
   The original .search slide-out widget is hidden via .legacy-search-hidden
   below; markup is left in place so any legacy JS / theming hooks still work.
   ============================================================================ */

/* Hide the legacy desktop slide-out search; keep the mobile #search-top
   toggle entirely untouched. */
.legacy-search-hidden {
    display: none !important;
}

/* ---------- logo + search flex row ----------
   The header row that holds the logo on the left and the new search bar on
   the right, vertically centred to each other. !important throughout so
   portal.css can't accidentally undo this with a more specific rule. */
header .logo-search-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    width: auto !important;
    margin: 0px 8% !important;
}

/* On tablet and below (≤991px), drop the side margins so the row uses
   the full available width — keeps the logo and search bar from being
   squeezed too tight on smaller viewports. */
@media (max-width: 991px) {
    header .logo-search-row {
        margin: 0px 0% !important;
    }
}

/* Logo column — sized to its content so the search has whatever's left. */
header .logo-search-row > #navbar-top-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    max-width: 50% !important;
}

/* Mobile menu toggle — desktop-hidden, but ensure it doesn't flex-grow when it's visible. */
header .logo-search-row > .navbar-header {
    flex: 0 0 auto !important;
}

/* The wider search bar itself. Right-aligned within the flex row.
   Width of the bar (NOT its container) is constrained by max-width below. */
.topHeader-SearchBar {
    max-width: 480px;
    margin: 0 0 0 auto;
    position: relative;
}

/* When the bar is the in-header version (paired with the logo), tell flex
   how to size it. Width scales by breakpoint:
     xs (<768)        : hidden via .hidden-xs in markup
     sm (768-991)     : 320px  (compact)
     md (992-1199)    : 480px  (default below)
     lg (1200-1599)   : 560px
     xl (1600+)       : 720px
   The bar shrinks if the logo gets unusually wide.
*/
header .logo-search-row > .header-search.topHeader-SearchBar {
    flex: 0 1 480px !important;
    width: 480px !important;          /* explicit so width:100% from another rule can't win */
    max-width: 480px !important;
    min-width: 240px !important;
    margin: 0 !important;             /* gap on the parent handles spacing */
}

@media (max-width: 991px) {
    header .logo-search-row > .header-search.topHeader-SearchBar {
        flex: 0 1 320px !important;
        width: 320px !important;
        max-width: 320px !important;
    }
}

@media (min-width: 1200px) {
    header .logo-search-row > .header-search.topHeader-SearchBar {
        flex: 0 1 560px !important;
        width: 560px !important;
        max-width: 560px !important;
    }
}

@media (min-width: 1600px) {
    header .logo-search-row > .header-search.topHeader-SearchBar {
        flex: 0 1 720px !important;
        width: 720px !important;
        max-width: 720px !important;
    }
}

/* The custom search input. We target our own class (sydSearchInput) rather
   than the dnn-style .searchInputContainer input — DNN's search JS does a
   global scan for the latter and would otherwise hijack our input and inject
   its own dropdown alongside ours. */
.topHeader-SearchBar .sydSearchInput {
    width: 100%;
    height: 42px;
    padding: 0 56px 0 18px;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 15px;
    line-height: 42px;
    color: #333;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) inset;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.topHeader-SearchBar .sydSearchInput:focus {
    border-color: #7CA0C0;
    box-shadow: 0 0 0 2px rgba(124, 160, 192, .25);
}

.topHeader-SearchBar .sydSearchInput::-webkit-input-placeholder { color: #9a9a9a; }
.topHeader-SearchBar .sydSearchInput:-moz-placeholder            { color: #9a9a9a; }
.topHeader-SearchBar .sydSearchInput::-moz-placeholder           { color: #9a9a9a; }
.topHeader-SearchBar .sydSearchInput:-ms-input-placeholder       { color: #9a9a9a; }

/* The search button that DNN renders as <a class="topHeader-SearchButton">.
   Sits flush to the right of the input as a square icon. */
.topHeader-SearchBar .topHeader-SearchButton {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 42px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0 4px 4px 0;
    background: url(images/search.png) center center no-repeat #c3c1c1;
    text-indent: -9999px;
    line-height: 40px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.topHeader-SearchBar .topHeader-SearchButton:hover {
    background-color: #7CA0C0;
}

/* On smaller-than-large viewports, let the bar use the full container width
   so it doesn't look stranded. */
@media (max-width: 991px) {
    .topHeader-SearchBar {
        max-width: none;
    }
}
/* ---------- Shared header content insets ----------
   Single source of truth: change the two percentages below to shift the
   logo, search bar, login icons AND (optionally) the main menu together.
   Both #topHeader's Bootstrap .container and #mainHeader-inner are pinned
   to the same boundaries so:
     - login icons (above) align right with the search bar (below)
     - logo (left) aligns with the menu items (further below)
   Lower % = closer to viewport edges. Defaults match the menu's visual
   inset of ~5% on a normal desktop viewport. */
#topHeader > .container,
header #mainHeader-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

/* Vertical padding + transparent background so the parent <header>'s
   full-width blue band still shows behind the centred content. */
header #mainHeader-inner {
    background: transparent !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
}

@media (max-width: 991px) {
    header #mainHeader-inner {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }
    /* Tighten the side insets a touch on smaller viewports so the search
       bar doesn't get squeezed too narrow. */
    #topHeader > .container,
    header #mainHeader-inner {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }
}
/* ============================================================================
   End — Phase A search bar
   ============================================================================ */


/* ============================================================================
   Phase B — Custom search-bar dropdown (sydSearchForm).
   Replaces DNN's stock search skin object dropdown so we can render
   per-result thumbnails (Materials/Projects images, FAQ category icons)
   pulled from /searchpreview.aspx?keyword=...
   ============================================================================ */

/* The form that wraps everything. Position relative so the absolutely-
   positioned results dropdown anchors to it correctly. */
.topHeader-SearchBar .sydSearchForm {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

/* Reuse the existing input styling already applied to
   .topHeader-SearchBar .searchInputContainer input — no overrides needed,
   the markup uses the same wrapper class. The submit button is also already
   styled by .topHeader-SearchBar .topHeader-SearchButton. */

/* Tiny "X" clear button when the input has text. Sits on the right edge
   of the input, just inside the search button area. */
.topHeader-SearchBar .sydSearchClear {
    position: absolute;
    top: 50%;
    right: 50px;            /* leave room for the search button */
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 0;
    border-radius: 50%;
    background: #cccccc;
    color: #fff;
    font-family: Arial, sans-serif;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
}

.topHeader-SearchBar .sydSearchClear::before {
    content: "\00d7";   /* multiplication sign — looks better than 'x' */
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    color: #fff;
}

.topHeader-SearchBar .sydSearchClear:hover {
    background: #999999;
}

/* ----- Dropdown panel ----- */

.topHeader-SearchBar .sydSearchResults {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 6px;
    max-height: 460px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 1000;
    padding: 6px 0;
}

/* ----- Each result row ----- */

.topHeader-SearchBar .sydSearchRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: #1f1f1f;
    text-decoration: none;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color .12s ease;
}

.topHeader-SearchBar .sydSearchRow:last-child {
    border-bottom: 0;
}

.topHeader-SearchBar .sydSearchRow:hover,
.topHeader-SearchBar .sydSearchRow:focus,
.topHeader-SearchBar .sydSearchRow.isActive {
    background: #f3f7fb;
    text-decoration: none;
    outline: none;
}

/* ----- Thumbnail slot ----- */

.topHeader-SearchBar .sydSearchThumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background-color: #eef0f2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7CA0C0;
    font-size: 22px;
    line-height: 1;
}

/* Image thumbnails (Materials, Projects) — background-image set inline by JS. */
.topHeader-SearchBar .sydSearchThumb.sydSearchThumbImage {
    background-color: #fff;
    border: 1px solid #ececec;
}

/* Bootstrap-icon thumbnails (FAQ category IconClass). */
.topHeader-SearchBar .sydSearchThumb.sydSearchThumbIcon {
    background-color: #eaf1f7;
}

.topHeader-SearchBar .sydSearchThumb.sydSearchThumbIcon i {
    font-size: 22px;
    color: #0071b9;
    line-height: 1;
}

/* Default fallback thumbnail (no thumb / no icon) — used for HTML pages
   and any other content without per-item imagery. Soft-blue tile with a
   page/document Bootstrap icon to look intentional rather than empty. */
.topHeader-SearchBar .sydSearchThumb.sydSearchThumbDefault {
    background-color: #eaf1f7;
}

.topHeader-SearchBar .sydSearchThumb.sydSearchThumbDefault i {
    font-size: 22px;
    color: var(--syd-primary, #0071b9);
    line-height: 1;
}

/* ----- Title + description text block ----- */

.topHeader-SearchBar .sydSearchText {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.topHeader-SearchBar .sydSearchTitle {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: #1f1f1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topHeader-SearchBar .sydSearchDesc {
    font-size: 12.5px;
    line-height: 1.35;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- "View all results" footer link ----- */

.topHeader-SearchBar .sydSearchMore {
    display: block;
    padding: 12px 14px;
    background: #fafbfc;
    border-top: 1px solid #ececec;
    font-size: 13px;
    font-weight: 600;
    color: #0071b9;
    text-align: center;
    text-decoration: none;
    transition: background-color .12s ease;
}

.topHeader-SearchBar .sydSearchMore:hover,
.topHeader-SearchBar .sydSearchMore:focus {
    background: #f1f5f9;
    color: #0071b9;
    text-decoration: none;
}

/* ----- Empty state ----- */

.topHeader-SearchBar .sydSearchEmpty {
    padding: 18px 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
    font-style: italic;
}

/* ----- Mobile / tablet adjustments ----- */

@media (max-width: 991px) {
    .topHeader-SearchBar .sydSearchResults {
        max-height: 360px;
    }
    .topHeader-SearchBar .sydSearchThumb {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .topHeader-SearchBar .sydSearchThumb.sydSearchThumbIcon i {
        font-size: 18px;
    }
    .topHeader-SearchBar .sydSearchClear {
        right: 46px;
    }
}
/* ============================================================================
   End — Phase B dropdown
   ============================================================================ */


/* ============================================================================
   Phase C — Custom Search Results page widget (#sydsr-app).
   Replaces DNN's stock SearchResults module with our own grid that:
     - source-filter chips (All / Materials / FAQ / Projects with counts)
     - results-per-page selector (10 / 15 / 25 / 50)
     - rich rows: thumbnail + source badge + date + title + description + url
     - First / Prev / numbered / Next / Last pagination
   Uses brand variables defined in /Portals/0/portal.css.
   ============================================================================ */

.sydsr-app {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    color: var(--syd-text-dark, #363e4c);
    margin: 0 auto;
    padding: 24px 0 48px;
    max-width: var(--syd-container-width, 1400px);
}

/* ---------- Top bar: summary + chips + page-size selector ---------- */

.sydsr-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 16px 20px;
    margin-bottom: 18px;
    background: var(--syd-bg-light, #f4f4f4);
    border-radius: var(--syd-border-radius, 8px);
    border: 1px solid #e6e8ec;
}

.sydsr-summary {
    flex: 1 1 240px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--syd-text-body, #424242);
}
.sydsr-summary strong { color: var(--syd-text-dark, #363e4c); }

.sydsr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sydsr-chip {
    appearance: none;
    border: 1px solid #d4d8de;
    background: #fff;
    color: var(--syd-text-dark, #363e4c);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sydsr-chip:hover {
    border-color: var(--syd-primary, #0071b9);
    color: var(--syd-primary, #0071b9);
}

.sydsr-chip.is-active {
    background: var(--syd-primary, #0071b9);
    color: #fff;
    border-color: var(--syd-primary, #0071b9);
}

.sydsr-chip-count {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.sydsr-chip.is-active .sydsr-chip-count {
    background: rgba(255, 255, 255, .25);
}

.sydsr-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--syd-text-body, #424242);
}
.sydsr-pagesize select {
    padding: 4px 24px 4px 10px;
    border: 1px solid #d4d8de;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--syd-text-dark, #363e4c);
    cursor: pointer;
}
.sydsr-pagesize select:focus {
    outline: none;
    border-color: var(--syd-primary, #0071b9);
    box-shadow: 0 0 0 2px rgba(0, 113, 185, .2);
}
.sydsr-pagesize-suffix { color: var(--syd-text-body, #424242); }

/* ---------- Results list ---------- */

.sydsr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: opacity .15s ease;
}
.sydsr-list.is-loading {
    opacity: .5;
    pointer-events: none;
}

.sydsr-row {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: var(--syd-border-radius, 8px);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.sydsr-row:hover {
    border-color: var(--syd-primary, #0071b9);
    box-shadow: var(--syd-shadow, 0 4px 12px rgba(0, 0, 0, .08));
}

.sydsr-row-link {
    display: flex;
    gap: 20px;
    padding: 24px 28px;
    text-decoration: none;
    color: inherit;
}
.sydsr-row-link:hover,
.sydsr-row-link:focus { text-decoration: none; outline: none; }

.sydsr-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    background-color: #eef0f2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sydsr-thumb-image {
    background-color: #fff;
    border: 1px solid #ececec;
}
.sydsr-thumb-icon {
    background-color: #eaf1f7;
}
.sydsr-thumb-icon i {
    font-size: 38px;
    color: var(--syd-primary, #0071b9);
    line-height: 1;
}
/* Default fallback for HTML pages and anything without per-item imagery. */
.sydsr-thumb.sydsr-thumb-default {
    background-color: #eaf1f7;
}
.sydsr-thumb.sydsr-thumb-default i {
    font-size: 38px;
    color: var(--syd-primary, #0071b9);
    line-height: 1;
}

@media (max-width: 580px) {
    .sydsr-thumb { flex-basis: 64px; width: 64px; height: 64px; }
    .sydsr-thumb-icon i { font-size: 28px; }
}

.sydsr-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sydsr-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--syd-text-body, #424242);
}

.sydsr-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--syd-mid-blue, #32567d);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.sydsr-badge--materials { background: var(--syd-primary,   #0071b9); }
.sydsr-badge--faq       { background: var(--syd-mid-blue,  #32567d); }
.sydsr-badge--projects  { background: var(--syd-green,     #8dc263); }

.sydsr-date {
    color: #888;
    font-style: italic;
}

.sydsr-row-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--syd-primary, #0071b9);
}
.sydsr-row:hover .sydsr-row-title {
    color: var(--syd-dark-blue, #2d4c72);
    text-decoration: underline;
}

.sydsr-row-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--syd-text-body, #424242);
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sydsr-row-url {
    font-size: 12.5px;
    color: #6b8aab;
    word-break: break-all;
    margin-top: 2px;
}

/* ---------- Empty state ---------- */

.sydsr-empty {
    background: var(--syd-bg-light, #f4f4f4);
    border: 1px dashed #cfd4da;
    border-radius: var(--syd-border-radius, 8px);
    padding: 36px 28px;
    text-align: center;
    color: var(--syd-text-body, #424242);
}
.sydsr-empty-msg { font-size: 17px; margin: 0 0 10px; }
.sydsr-empty-hint { font-size: 14px; margin: 0; color: #6b7480; }
.sydsr-empty a { color: var(--syd-primary, #0071b9); font-weight: 600; }

.sydsr-error {
    background: #fff4f4;
    border: 1px solid #f1c0c0;
    border-radius: var(--syd-border-radius, 8px);
    padding: 18px 22px;
    color: #7a1f1f;
    list-style: none;
}

/* ---------- Pagination ---------- */

.sydsr-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
}

.sydsr-page {
    appearance: none;
    border: 1px solid #d4d8de;
    background: #fff;
    color: var(--syd-text-dark, #363e4c);
    padding: 6px 12px;
    min-width: 38px;
    height: 38px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sydsr-page:hover:not(.is-disabled):not(.is-active) {
    border-color: var(--syd-primary, #0071b9);
    color: var(--syd-primary, #0071b9);
}
.sydsr-page.is-active {
    background: var(--syd-primary, #0071b9);
    color: #fff;
    border-color: var(--syd-primary, #0071b9);
    cursor: default;
}
.sydsr-page.is-disabled,
.sydsr-page[disabled] {
    opacity: .35;
    cursor: not-allowed;
}
.sydsr-page--first,
.sydsr-page--last,
.sydsr-page--prev,
.sydsr-page--next {
    padding: 6px 14px;
}
.sydsr-ellipsis {
    padding: 6px 4px;
    color: #888;
    user-select: none;
}

/* ---------- Smaller viewports ---------- */

@media (max-width: 768px) {
    .sydsr-app { padding: 16px 12px 32px; }
    .sydsr-bar { padding: 14px; gap: 12px; }
    .sydsr-summary { flex-basis: 100%; font-size: 15px; }
    .sydsr-row-link { gap: 12px; padding: 14px 16px; }
    .sydsr-row-title { font-size: 17px; }
    .sydsr-row-desc { font-size: 13.5px; }
    .sydsr-row-url { font-size: 11.5px; }
    .sydsr-page { padding: 6px 10px; min-width: 34px; height: 34px; font-size: 13px; }
}
/* ============================================================================
   End — Phase C search results page
   ============================================================================ */


/* ============================================================================
   Mobile search widget — lives inside #search-top (the slide-down panel
   that appears when the user taps the magnifying-glass icon on small
   viewports). Same sydSearchForm markup as desktop, just needs CSS to
   (a) beat the legacy "#search-top input" rule on specificity and
   (b) size the dropdown correctly for a phone-width panel.
   ============================================================================ */

/* Make sure the wrapper fills the slide-down panel rather than sticking
   to the 480px desktop max-width. The 15px side margin mirrors Bootstrap's
   default gutter so the widget lines up with the rest of the page. */
#search-top .topHeader-SearchBar.topHeader-SearchBar--mobile {
    max-width: none !important;
    width: auto;
    margin: 0 15px;
    padding: 0;
    float: none;
}

/* Defeat the legacy `#search-top input` rule (ID > class in specificity)
   and give our input the same look-and-feel as the desktop version.
   font-size: 16px prevents iOS Safari from zooming in on focus. */
#search-top .topHeader-SearchBar .sydSearchInput {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 56px 0 16px;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 16px;
    line-height: 44px;
    color: #333;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) inset;
    box-sizing: border-box;
}

#search-top .topHeader-SearchBar .sydSearchInput:focus {
    border-color: #7CA0C0;
    box-shadow: 0 0 0 2px rgba(124, 160, 192, .25);
}

/* Search button: flush to the input's right edge. Absolute positioning
   is relative to .topHeader-SearchBar (which has position:relative). */
#search-top .topHeader-SearchBar .topHeader-SearchButton {
    top: 1px;
    right: 1px;
    height: 42px;
    width: 42px;
    border-radius: 0 4px 4px 0;
}

/* Clear-text button: sits just inside the search button. */
#search-top .topHeader-SearchBar .sydSearchClear {
    right: 52px;
}

/* Dropdown: full width of the widget, appears just below the input. */
#search-top .topHeader-SearchBar .sydSearchResults {
    left: 0;
    right: 0;
    margin-top: 6px;
    max-height: 60vh;   /* don't exceed viewport on tiny screens */
}

/* #search-top.active already sets overflow:visible so the dropdown can
   spill out below the slide-down panel. No extra rule needed here. */
/* ============================================================================
   End — Mobile search widget
   ============================================================================ */

/* ============================================================================
   Phase D — Footer compliance links (.syd-footer-link)
   Styles the three plain <a> links that replaced the stock <dnn:TERMS> /
   <dnn:PRIVACY> skin objects inside .terms-priv: Privacy Policy, Website
   User Policy, Modern Slavery Statement.
   ============================================================================ */
footer .terms-priv .syd-footer-link,
footer .terms-priv .syd-footer-link:link,
footer .terms-priv .syd-footer-link:visited {
    color: #d2d2d2;
    font-size: 12px;
    text-decoration: none;
    padding: 0 6px;
    display: inline-block;
    line-height: 1.6;
    transition: color 0.15s ease-in-out;
}
footer .terms-priv .syd-footer-link:hover,
footer .terms-priv .syd-footer-link:focus {
    color: var(--syd-green, #8dc263);
    text-decoration: underline;
    outline: none;
}
footer .terms-priv {
    line-height: 1.6;
}
@media (max-width: 767px) {
    footer .copyright,
    footer .terms-priv {
        float: none;
        display: block;
        text-align: center;
        padding: 4px 0;
    }
    footer .terms-priv .syd-footer-link {
        padding: 2px 8px;
    }
}
/* ============================================================================
   End — Phase D footer compliance links
   ============================================================================ */

/* ============================================================================
   Phase E — Cookie consent banner (hand-rolled, .syd-cc-banner)
   Drives the bottom-right notice built by Js/syd-cookieconsent.js. No
   external library, no CDN, no third-party signature for ad-blockers
   to match. Branding follows the existing --syd-* tokens with hard
   fallbacks so the banner still looks reasonable if a future skin
   refactor moves the variables.
   ============================================================================ */
.syd-cc-banner {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 360px;
    max-width: calc(100vw - 36px);
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    pointer-events: none;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
}
.syd-cc-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.syd-cc-banner .syd-cc-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-top: 4px solid var(--syd-primary, #0071b9);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 18px 20px 16px;
    color: var(--syd-text-body, #424242);
}
.syd-cc-banner .syd-cc-title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 800;
    font-style: italic;
    color: var(--syd-text-dark, #363e4c);
    letter-spacing: 0.3px;
    border: 0;
    text-transform: none;
}
.syd-cc-banner .syd-cc-body {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.45;
}
.syd-cc-banner .syd-cc-link {
    color: var(--syd-primary, #0071b9);
    text-decoration: underline;
    white-space: nowrap;
}
.syd-cc-banner .syd-cc-link:hover,
.syd-cc-banner .syd-cc-link:focus {
    color: var(--syd-dark-blue, #2d4c72);
}
.syd-cc-banner .syd-cc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.syd-cc-banner .syd-cc-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.syd-cc-banner .syd-cc-btn-primary {
    background: var(--syd-primary, #0071b9);
    color: #ffffff;
    border-color: var(--syd-primary, #0071b9);
}
.syd-cc-banner .syd-cc-btn-primary:hover,
.syd-cc-banner .syd-cc-btn-primary:focus {
    background: var(--syd-dark-blue, #2d4c72);
    border-color: var(--syd-dark-blue, #2d4c72);
    color: #ffffff;
    outline: none;
}
.syd-cc-banner .syd-cc-btn-secondary {
    background: #ffffff;
    color: var(--syd-dark-blue, #2d4c72);
    border-color: var(--syd-dark-blue, #2d4c72);
}
.syd-cc-banner .syd-cc-btn-secondary:hover,
.syd-cc-banner .syd-cc-btn-secondary:focus {
    background: var(--syd-bg-light, #f4f4f4);
    color: var(--syd-dark-blue, #2d4c72);
    outline: none;
}
.syd-cc-banner .syd-cc-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    border-radius: 4px;
}
.syd-cc-banner .syd-cc-close:hover,
.syd-cc-banner .syd-cc-close:focus {
    color: var(--syd-dark-blue, #2d4c72);
    background: var(--syd-bg-light, #f4f4f4);
    outline: none;
}
@media (max-width: 600px) {
    .syd-cc-banner {
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
    }
    .syd-cc-banner .syd-cc-card {
        padding: 14px 16px 12px;
    }
}
/* ============================================================================
   End — Phase E cookie consent banner
   ============================================================================ */

/* ============================================================================
   Phase F — Cookie preferences modal (.syd-cc-modal*)
   Centred overlay modal opened by the footer "Manage Cookies" link or the
   banner's "View cookies" button. Mirrors the cookieconsent v3 library
   look (semi-transparent dark backdrop, white card, accordion-style
   category, OK/close).
   ============================================================================ */
.syd-cc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(45, 76, 114, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
}
.syd-cc-modal-backdrop.is-visible { opacity: 1; }
.syd-cc-modal {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.2s ease-out;
}
.syd-cc-modal-backdrop.is-visible .syd-cc-modal { transform: translateY(0); }
.syd-cc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e4e4e4;
}
.syd-cc-modal-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.15rem;
    font-weight: 800;
    font-style: italic;
    color: var(--syd-text-dark, #363e4c);
    text-transform: none;
    letter-spacing: 0.3px;
}
.syd-cc-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 22px;
    line-height: 1;
    color: var(--syd-text-dark, #363e4c);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.syd-cc-modal-close:hover,
.syd-cc-modal-close:focus {
    background: var(--syd-bg-light, #f4f4f4);
    border-color: var(--syd-dark-blue, #2d4c72);
    outline: none;
}
.syd-cc-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    color: var(--syd-text-body, #424242);
    line-height: 1.5;
    font-size: 0.95rem;
}
.syd-cc-modal-body h3 {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--syd-dark-blue, #2d4c72);
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
}
.syd-cc-modal-body p { margin: 0 0 12px; }
.syd-cc-modal-body p:last-child { margin-bottom: 0; }
.syd-cc-modal-body a {
    color: var(--syd-primary, #0071b9);
    text-decoration: underline;
    font-weight: 600;
}
.syd-cc-modal-body a:hover,
.syd-cc-modal-body a:focus {
    color: var(--syd-dark-blue, #2d4c72);
}
.syd-cc-modal-section {
    margin-bottom: 18px;
}
.syd-cc-modal-category {
    background: var(--syd-bg-light, #f4f4f4);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 14px 16px;
    margin: 12px 0 18px;
}
.syd-cc-modal-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.syd-cc-modal-category-name {
    font-weight: 700;
    color: var(--syd-text-dark, #363e4c);
}
.syd-cc-modal-category-desc {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--syd-text-body, #424242);
}
/* Toggle (locked-on visual indicator — not interactive) */
.syd-cc-modal-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    background: var(--syd-primary, #0071b9);
    border-radius: 22px;
    flex-shrink: 0;
    opacity: 0.7;
    cursor: not-allowed;
}
.syd-cc-modal-toggle.is-locked { opacity: 0.85; }
.syd-cc-modal-toggle-knob {
    position: absolute;
    top: 2px;
    left: 22px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: left 0.15s ease;
}
.syd-cc-modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
@media (max-width: 600px) {
    .syd-cc-modal-backdrop { padding: 8px; }
    .syd-cc-modal-header { padding: 14px 16px 10px; }
    .syd-cc-modal-body { padding: 14px 16px; }
    .syd-cc-modal-footer { padding: 10px 16px 14px; }
    .syd-cc-modal-title { font-size: 1.05rem; }
}
/* ============================================================================
   End — Phase F cookie preferences modal
   ============================================================================ */