/* jqueryUI background remover */
:root {
    --primary:#495ba9;
    --primary-hover: #253799;
    --border-radius:3px;
}

.the-header.sprite a.ui-state-default {
    color: white;
}

#popupoverlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}


/* General Button Structure ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
html body #wrap a.ui-button,
html .button_admin_primary,
html .button_admin,
/* Grey admin buttons */
html body .button_admin_alt,
/* Buttons in Popups */
.ui-dialog-content .ui-button:not(.popped_content .ui-button, .blockOcode .ui-button) {
    height: auto;
    padding: 6px 20px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    border-radius:var(--border-radius);
    background-image: none !important;
}

.ui-dialog-content .ui-button {
    height: auto !important;
}

/* Create New Item Button...  */
.button_admin,
html div.main_content .button_admin_sorted {
    background: var(--primary) !important;
}

.button_admin:hover,
html div.main_content .button_admin_sorted:hover {
    background-color: var(--primary-hover) !important;
}
html a.pages {
    background-image: none!important;
    border-radius:var(--border-radius);
}
html a.pages.curr,
html a.pages:hover {
    background-color: var(--primary);

}


/* BLue Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Part of the jquery ui upgrade */
.ui-button:not(.the-header.sprite a,
    .the-header.sprite input,
    .popped_content .ui-button,
    .leftfloating .ui-button,
    .ui-dialog-titlebar button.ui-button.ui-dialog-titlebar-close,
    .ui-button.searchbutton, .clone-item-button,
    .blockOcode .ui-button,
    body[data-recollect-page*='-users'] .ui-button,
    .regenButton.ui-button,
    .butty.ui-button,
    .voting a.ui-button,
    .ui-dialog .vote-form input.ui-button,
    body[data-recollect-page*="-nodes-view-"] .ui-dialog-buttonset .ui-button,
    .blockOcode_block input.ui-button,
    .mCustomScrollBox input.ui-button,
    .submit .ui-button
   ),
a.ui-button:not(.the-header.sprite a,
    a.clone-item-button.ui-button,
    .blockOcode a.ui-button,
    a.oauth-login-link.ui-button,
    a.regenButton.ui-button,
    .voting a.ui-button
    ),

input.ui-button:not(.popped_content input.ui-button,
    .leftfloating .ui-button,
    .the-header.sprite a,
    .the-header.sprite input,
    input.searchbutton.ui-button,
    .blockOcode input.ui-button,
    body[data-recollect-page*='-users'] .ui-button,
    input.butty.ui-button,
    .mCustomScrollBox input.ui-button
)


    /* Modal buttons such Batch Edit, etc - not login modal buttons */
.ui-dialog-content .submit .ui-button:not(.popped_content input.ui-button) {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: white;
}
.ui-dialog .ui-dialog-content .clone-form .ui-dialog-buttonset .ui-button {
    background-color: red!important;
}

/* Hover - do not use #IDS in part of the :not() - this will raise the specificity of the rule and apply recollect colours where we dont want to */
/* Part of the jquery ui upgrade */
.ui-dialog-content .submit .ui-button:hover:not(.popped_content input.ui-button, .vote-form .submit input.ui-button),
.button_admin_primary:hover,
.ui-button:not(.the-header.sprite a,
    .the-header.sprite input,
     .blockOcode .ui-button,
    .popped_content .ui-button,
    .ui-dialog-titlebar button.ui-button.ui-dialog-titlebar-close,
    .leftfloating .ui-button,
    .clone-item-button.ui-button,
    body[data-recollect-page*='-users'] .ui-button,
    input.butty.ui-button,
    a.regenButton.ui-button,
    .the-edit-form .ui-button,
    .voting .ui-button,
    body[data-recollect-page*="-nodes-view-"] .ui-dialog-buttonset .ui-button,
    .submit .ui-button
   ):hover,


a.ui-button:not(.the-header.sprite a,
    .the-header.sprite input,
    .popped_content a.ui-button,
    a.clone-item-button.ui-button,
    .blockOcode a.ui-button,
    .the-edit-form a.ui-button,
    .voting a.ui-button,
    a.regenButton.ui-button):hover,

input.ui-button:not(.the-header.sprite a,
    .the-header.sprite input,
    .popped_content input.ui-button,
    .blockOcode input.ui-button,
    .leftfloating .ui-button,
    body[data-recollect-page*='-users'] .ui-button,
    .butty.ui-button,
    .ui-dialog .vote-form input.ui-button,
    .submit .ui-button):hover {
    background-color: var(--primary-hover);
    border: 1px solid  var(--primary-hover);
    color: white;
}

/* 'add a new page button' - Keeping separate to avoid increasing specificity of main selector above */
html #admin_menu3 .butt_on {
    background-color: var(--primary);
    border: 1px solid var(--primary)
}

html #admin_menu3 a.butt_on:hover{
        color:white;
        background-color: var(--primary-hover);
}

.adminlisttable .button_admin_primary:hover {
    background-color: var(--primary-hover)!important;
}

html a.button_admin_primary,
html a.button_admin {
    color: white !important;
}

/* Grey Button Only ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Override important elsewhere */
html #wrap a.button_admin_alt.ui-button,
input.button_admin_alt {
    background-color: #eeeeee !important;
    border: solid #adadad 1px !important;
    height: unset !important;
    color: #333333 !important;
}

html #wrap a.button_admin_alt:hover,
input.button_admin_alt:hover {
    background: #adadad !important;
    border: solid #adadad 1px;
}

/* Exceptions/Fixes */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
html body a#cloneitembutton.ui-button,
html body .clone-item-button.ui-button {
    padding: .4em 1em!important;
    width:auto!important;
}

a.clone-item-button:focus {
    color:white;
}

/* Buttons in the map picker modal */
#googlewrap .ui-button {
    font-size: 11px;
    padding:6px 16px;
    margin:.1em;
}

/* Edit Item save buttons etc */
.the-header.sprite a.ui-state-default.ui-button,
.the-header.sprite input#save1.ui-state-default.ui-button,
.the-header.sprite input#save2.ui-state-default.ui-button,
.the-header.sprite a.ui-state-default.ui-button:hover,
.the-header.sprite input#save1.ui-state-default.ui-button:hover,
.the-header.sprite input#save2.ui-state-default.ui-button:hover {
    padding: 7px 20px !important;
    background-image: none;
    font-size: 14px !important;
    line-height: normal !important;
    height:auto;
}

.the-header.sprite .ui-state-hover:hover {
    color: white;
    background: #adadad;
    border: 1px solid #adadad;
}

.the-header.sprite #nodetitlefield {
    margin-right: .1em;
}


/* The close button for modals */
.ui-dialog-titlebar button.ui-button.ui-dialog-titlebar-close {
    background-color: #f6f6f6;
    border: 1px solid #c5c5c5;
}

.ui-dialog-titlebar button.ui-button.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar button.ui-button.ui-dialog-titlebar-close:focus {
    background: #ededed;
    border: 1px solid #cccccc;
}


/* Tabs  */

#tabs,
#btabs {
    border: 0;
}
/* Site var tabs */
#fragment-1,
#fragment-2 {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}
/* Batch upload tabs */
#btabs .ui-tabs-panel {
    border:1px solid #dddddd;
    border-top: none;
}

#tabs.ui-tabs .ui-state-default,
#btabs.ui-tabs .ui-state-default {
    background-image: none;
    background-color: white;
}

#tabs.ui-tabs .ui-state-default.ui-state-hover,
#btabs.ui-tabs .ui-state-default.ui-state-hover {
    background-color: #eeeeee;
    color: #333333;
}

#tabs.ui-tabs .ui-state-active,
#btabs.ui-tabs .ui-state-active {
    background-color: var(--primary);
    color: white;
}

#tabs.ui-tabs .ui-state-default.ui-state-active.ui-state-hover,
#btabs.ui-tabs .ui-state-default.ui-state-active.ui-state-hover {
    background-color: var(--primary);
    color: white;
}

#tabs.ui-tabs .ui-state-default.ui-state-active.ui-state-hover a,
#btabs.ui-tabs .ui-state-default.ui-state-active.ui-state-hover a {
    user-select: none;
    cursor: pointer;
}
#tabs.ui-tabs .ui-state-default.ui-state-active a {
    /* Overide !important in themed files */
    color:white!important
}

/* Site vars custom features */
.ui-checkboxradio-icon {
    display: none;
}

#SitevarIndexForm .ui-checkboxradio-label.ui-button {
    background-color: #eeeeee;
    border: 1px solid #9c9c9c;
    color: black;
}

#SitevarIndexForm .ui-checkboxradio-label.ui-state-active.ui-button,
#SitevarIndexForm .ui-checkboxradio-label.ui-checkboxradio-checked,
#SitevarIndexForm .ui-checkboxradio-label.ui-button:hover {
    background: var(--primary) !important;
    color: white;
}

/* Stop batch upload table spilling off page  */
body[data-recollect-page='-batches'] table.stable.adminlisttable tr td:nth-child(3) {
    max-width: 150px;
}

body[data-recollect-page='-batches'] table.stable.adminlisttable tr td:nth-child(1) {
    width: 60px;
}

/* Add a small margin between table and button for pages under "Review Contributions */
body[data-recollect-page*='-metatags-'] .adminlisttable,
body[data-recollect-page*='-metatags-'] .nonefound {
    margin-top: 12px;
    margin-left: 5px;
}

/* 'Public, Private, Offline' buttons in create new item type */
#browser a.button_admin_alt {
    height: auto;
    border-radius: var(--border-radius);
    padding:7px 12px;
    background-color: #eeeeee!important;
}

#utilsportal .regenButton:hover {
    background:#f0f0f0;
    color:black;
    border:#adadad 1px solid;
}



.ui-widget-header,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.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,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background-image: none;
}

.ui-widget-header {
    background-color: #eeeeee;
}

.ui-tabs-nav {
    height: 28px;
}

li.ui-menu-item {
    list-style-type: none;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
}

.ui-dialog-title {
    font-size: 14px;
}


/* LS 2017-03-08: Latest jquery update changed the default button text color to #454545 and background color to grey, so changing it back */

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    color: #ffffff;
    background: var(--primary);
    border: 1px solid var(--primary);
}

.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 var(--primary-hover);
    background:var(--primary-hover);
    font-weight: normal;
    color: #ffffff;
}


/*** STYLE ***/

html,
body {
    width: 100%;
    height: 100%;
    min-width: 960px;
}

body_removed_till_jquery_bug_resolved {
    overflow-y: scroll;
}

* {
    margin: 0;
    vertical-align: top;
}

ul,
ol {
    margin-left: 12px;
}

ul li {
    list-style-type: circle;
    padding: 2px;
}

table,
tr,
td,
th {
    margin: 0;
    border: 0;
    text-align: left;
}

body {
    background-color: #ffffff;
    font-size: 12px;
    color: #111111;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

a {
    text-decoration: underline;
    color: #000000;
}

#recollect_bar {
    font-size: 13px;
    font-weight: bold;
    padding: 0;
    background-color: #111111;
    color: #eeeeee;
    vertical-align: middle;
    text-align: right;
    display: block;
}

#recollect_bar img {
    padding-right: 6px;
}

#recollect_bar a {
    color: #eeeeee;
}

#recollect_bar a:hover {
    color: #ffffff;
}

#menuBar {
    background-color: #eeeeee;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    width: 290px;
    padding: 2px;
}

#rightMenu {
    background-color: #eeeeee;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    width: 290px;
    padding: 2px;
}

#mainContent {
    background-color: #ffffff;
    padding: 2px;
    padding-left: 6px;
    width: 99%;
}

.downsize {
    font-variant: small-caps;
}

ul.downsize {
    font-size: 10.9px;
    /* because firefox is a bit silly */
}

.colapse {
    cursor: s-resize;
}

#logohole {
    text-align: center;
    margin-bottom: 5px;
}

#logohole img {
    max-width: 290px;
}


/* HEADINGS */

h1 {
    /* Page Titles */
    background-color: #111111;
    font-size: 20px;
    color: #ffffff;
    font-weight: normal;
    padding: 6px 1px 6px 6px;
    margin-bottom: 5px;
}

h2 {
    /* Node Titles */
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-top: 10px;
    border-bottom: 1px solid #cccccc;
}

h3 {
    /* Subsection Titles */
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #cccccc;
}

h4 {
    /* Highlighted Titles */
    background-color: #EBEDFA;
    color: #111111;
    font-weight: bold;
    font-size: 14px;
    padding: 4px;
}

h5 {
    /* NodeType Title */
    color: #ffffff;
    background-color: #111111;
    font-weight: bold;
    font-size: 20px;
    padding: 2px;
    padding-left: 4px;
}

h6 {
    /* Accordions (usually) */
}


/* underline strip from linked headings */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    text-decoration: none;
}

p {
    margin-bottom: 6px;
}

.pagelinksminibg {
    background-color: #EBEDFA;
    vertical-align: middle;
}

img {
    border: 0;
}

div.submit {
    display: inline-block;
}

#searchForm div.submit {
    margin-top: 12px;
}

label {
    color: #333333;
    display: block;
    font-weight: 300;
    font-size: 1.1em;
}

.clear {
    clear: both;
}

.notitlebar .ui-dialog-titlebar {
    display: none;
    padding: 0px;
}

#remove_titval,
#remove_related {
    float: right;
}

.blockOcode {
    padding: 6px;
}

.blockOcode ul,
.blockOcode ol {
    margin-left: 34px;
}

fieldset {
    border: 1px dashed #cccccc;
    padding: 6px;
}

legend {
    color: #333333;
    font-weight: 400;
    font-size: 1.2em;
    background-color: #FFFFFF;
    padding: 0 2px;
    margin-left: 12px;
}

#searchForm {
    font-size: 13px;
}

#searchForm input,
#searchForm select {
    width: 235px;
}

#facet input {
    width: auto;
}

#facet input.facetFind {
    width: 210px;
}

#searchForm input.half,
#searchForm select.half,
#facet input.half,
#facet .half select {
    width: 80px;
}

#searchForm div.submit input.half {
    width: 110px;
}

#searchForm input.checkbox {
    width: auto;
    height: auto;
    margin-left: 6px;
    margin-right: 6px;
}

#searchForm table.typeselect label {
    margin-top: 0px;
    cursor: pointer;
}

fieldset.facetgroups {
    margin-top: 6px;
}

#searchForm select option {
    overflow: visible;
    white-space: nowrap;
}

#searchForm label {
    margin-top: 6px;
}

#facet {
    margin-top: 10px;
}

#facet div.checkbox label {
    display: inline;
    margin: 3px;
}

#facet .autoComplete {
    width: 170px;
}

.search_by_val,
.search_rel_link {
    border: 1px dashed #999999;
    background-color: #FFFFCC;
    padding: 4px;
}

.keywordHighlight {
    background-color: #FFFFAA;
}

#menulogin {
    display: block;
    background-color: #000000;
    color: #eeeeee;
    text-align: center;
    padding: 6px 1px;
    font-size: 12px;
    font-weight: 800;
}

#menulogin a {
    color: #eeeeee;
    text-decoration: none;
}

#menulogin a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.menutitle {
    display: block;
    font-variant: small-caps;
    font-size: 18px;
    padding: 4px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

#menuTabs select {
    margin-bottom: 3px;
}

#menuBar div.menutab ul {
    margin-left: 5px;
}

#menuBar div.menutab ul li {
    list-style-type: none;
}

#menuBar div.menutab a {
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

#menuBar div.menutab a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

#menuBar div.menutab a.search_backlink {
    display: block;
    color: #111111;
    text-decoration: none;
    padding: 4px;
    padding-left: 22px;
    margin-bottom: 8px;
    border: 1px dotted #aaaaaa;
    background-color: #f0f0f0;
    font-weight: normal;
}

#menuBar div.menutab a.search_backlink:hover {
    background-color: #cccccc;
}

#menuBar div.menutab a.search_backlink img {
    margin-right: 4px;
    margin-left: -18px;
}

a.refinesearchlink {
    display: block;
    margin: 10px;
    margin-top: 4px;
}

a.tooltiplink,
a.tooltiplink:hover {
    color: #FFFFFF;
}

a.extlink {
    cursor: alias;
}

div.error-message,
span.error {
    font-weight: bold;
    color: #FF0000;
}

div.error-message,
span.error {
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    background-color: #cc0000;
    padding: 1px 6px 1px 20px;
    border: 2px inset #ff0000;
    background-image: url(/img/i_alert.png);
    background-position: left;
    background-repeat: no-repeat;
}

div.copyright_footer {
    border-top: 1px solid #eeeeee;
    margin-top: 12px;
    padding-top: 12px;
    font-size: 11px;
    text-align: center;
    line-height: 16px;
    color: #666666;
    clear: both;
}

div.copyright_footer a {
    color: #666666;
}

div.copyright_footer a:hover {
    color: #000000;
}

.addpadd {
    padding: 6px;
}

#menuBar ul.historypages li>a,
#menuBar ul.bookmarkpages li>a {
    font-weight: normal;
    font-size: 90%;
}

#menuBar ul.historypages li>a.downsize,
#menuBar ul.bookmarkpages li>a.downsize {
    font-weight: bold;
    font-size: 110%;
}

.userhead {
    margin-left: 5px;
    margin-top: 2px;
    width: 14px;
    height: 14px;
    opacity: 0.3;
}

.userhead:hover {
    opacity: 1.0;
}

.ui-autocomplete-loading {
    background-image: url(/img/ajax-loader.gif);
    background-position: right;
    background-repeat: no-repeat;
}


/* @ST Autocomplete */

.newresults {
    font-weight: bold !important;
    color: grey;
    line-height: 20px;
    text-transform: uppercase;
}

.newresults:hover {
    background-color: white !important;
    color: grey;
    border: 1px solid white;
    cursor: default !important;
}


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

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 10px;
    background: #262626;
    color: #111111;
}


/*ORIG ... a.sprite, span.sprite, .sprite a {
@BB 2019-09-23: this needs to be like all themed versions so we have consistency with background sprites
*/

a.sprite,
span.sprite,
.sprite a,
#showHideTags label span,
.request_action,
.request_download,
.toolbox_button,
#zoom_wrap,
.ui-slider-vertical .ui-slider-handle,
.img_tag span,
.img_tag a {
    background-image: url(/css/images/sprite.png);
    background-repeat: no-repeat;
}

/* Retina-specific stuff here
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  a.sprite, span.sprite, .sprite a {
    background-image: url(/css/images/sprite-retina.png);
    background-size: 1122px 837px;
  }
}
*/

.ui-widget {
    font-family: 'Source Sans Pro', sans-serif;
}

.ui-resizable-handle {
    z-index: auto !important;
}

#header {
    background: #fff;
    padding: 10px 20px 10px 20px;
    height: 40px;
}

#client_header {
    width: 980px;
    padding: 0;
    margin: 0 auto;
    background-color: #ffffff;
    border: 0;
    border-bottom: 2px solid #ff0000;
}

#client_logo {
    float: left;
    vertical-align: middle;
    padding: 0;
}

#client_logo img {
    height: 40px;
}

#login_logout {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 34px;
    margin: 3px 0;
    text-align: right;
    white-space: nowrap;
}

#logout {
    display: inline-block;
    padding-left: 15px;
    border-left: solid 1px #f0f0f0;
    margin-left: 15px;
}

#logout a {
    display: inline-block;
    padding-right: 18px;
    background-position: -1010px -90px;
    color: var(--primary);
    text-decoration: none;
    width: 36px;
}

#logout a:hover {
    background-position: -1010px -124px;
    color: #ee631b;
}

#welcome {
    display: inline-block;
}

#welcome a {
    text-decoration: none;
    color: #333;
}

#welcome a:hover {
    color: #ee631b;
}

/* Login Social media Button Structure ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.popped_content .facebook-login,
.popped_content .linkedin-login {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    padding: 5px 0px;
    width: 207px;
    height: 23px;
    letter-spacing: -0.5px;
    word-spacing: 1px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    overflow: hidden;
}
.facebook-login {
    background: -moz-linear-gradient(180deg, rgba(60,150,204,1) 0%, rgba(50,89,158,1) 50%);
    background: -webkit-linear-gradient(180deg, rgba(60,150,204,1) 0%, rgba(50,89,158,1) 50%);
    background: linear-gradient(180deg, rgba(66,86,148,1) 0%, rgba(54,71,126,1) 50%);
}
.linkedin-login {
    background: -moz-linear-gradient(180deg, rgba(60,150,204,1) 0%, rgba(50,89,158,1) 50%);
    background: -webkit-linear-gradient(180deg, rgba(60,150,204,1) 0%, rgba(50,89,158,1) 50%);
    background: linear-gradient(180deg, rgba(60,150,204,1) 0%, rgba(50,89,158,1) 50%);
}

.facebook-login:hover,
.linkedin-login:hover {
    text-decoration: none;
    color: #fff;
}

.facebook-login .fb-icon,
.linkedin-login .li-icon{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.facebook-login .arrow,
.linkedin-login .arrow {
    width: 17%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facebook-login .fb-icon {
    background: url('../img/facebooklogin-g.png') no-repeat center center;
    background-size: contain;
}

.linkedin-login .li-icon{
    background: url('../img/linkedinlogin-g.png') no-repeat center center;
    background-size: contain;
}

.facebook-login .text,
.linkedin-login .text {
    flex: 1;
    text-align: left;
}

.popped_content .facebook-login .arrow,
.popped_content .linkedin-login .arrow {
    background: url('../img/arrow-right.png') no-repeat center center;
    height: 80%;
    background-size: contain;
    position: static;
}
/* Login Social media Button Structure  Ends~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#header_search {
    text-align: right;
    vertical-align: top;
    padding: 4px;
}

#refinesearchform {
    display: none;
    color: #000000;
    background-color: #ffffff;
    width: 210px;
    border: 1px solid #343434;
    margin-top: 5px;
    position: absolute;
    padding: 12px;
    z-index: 10;
    text-align: left;
}

#refinesearchform select {
    width: 185px;
    margin-bottom: 4px;
}

#refinesearchform select.half {
    width: 80px;
}

#refinesearchform span.ftitle {
    font-weight: bold;
    color: #990000;
    display: block;
}

#main_content_wrap {
    margin: 0 0 0 349px;
    background: #e1e1e1;
    color: #333;
}

#footer {
    clear: both;
    margin: 0 20px 0 69px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #262626;
    z-index: 3;
}

#copyright {
    margin-left: 35%;
    text-align: right;
    color: #FFFFFF;
}

#copyright a {
    color: #FFFFFF;
    text-align: right;
}

#footer-links {
    float: left;
    width: 35%;
    color: #FFFFFF;
}

#footer-links a {
    color: #ffffff;
    text-decoration: none;
}

#footer-links a:hover {
    text-decoration: underline;
}

#menu_bar {
    float: left;
    width: 69px;
    height: 100%;
    background: #262626;
}

#client_menu {
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
}

#client_menu ul,
#client_menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#client_menu li {
    float: left;
    width: 100%;
    border-top: solid 1px #3f3c3c;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
}

#client_menu a {
    float: left;
    display: block;
    width: 100%;
    padding: 44px 0 10px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
}

#client_menu a:hover,
#client_menu a.active {
    background-color: #363636;
}

#client_menu a.active:hover {
    cursor: auto;
}

#client_menu .home a {
    background-position: -35px -105px;
}

#client_menu .contribute a {
    background-position: -35px -170px;
}

#client_menu .search a {
    background-position: -35px -233px;
}

#client_menu .history a {
    background-position: -35px -298px;
}

#client_menu .basket a {
    background-position: -35px -361px;
}

#client_menu .cart a {
    padding: 10px 0 10px !important;
    text-decoration: none;
    background: none;
}

#client_menu .cart .menu_icon{
    display: block;
    margin-bottom: 8px;
    color: #bfbfbf;
    font-size: 26px;
    line-height: 1;
}

#client_menu .cart:hover,
#client_menu .cart:active{
    background-color: #363636;
}

#client_menu .cart:hover .menu_icon,
#client_menu .cart:active .menu_icon{
    color: #EE641C;
}

#client_menu .profile a {
    background-position: -35px -424px;
}

#client_menu .info a {
    background-position: -35px -487px;
}

#client_menu .mycollection a {
    background-position: -35px -554px;
}

#client_menu .admin a {
    background-position: -35px -616px;
}

#client_menu .crowdsource a {
    background-position: -35px -55px;
}

#client_menu .research a {
    background-position: -35px -2px;
}

#client_menu .browse a {
    background-position: -35px -170px;
}

#client_menu .home a:hover,
#client_menu .home a.active {
    background-position: -104px -105px;
}

#client_menu .contribute a:hover,
#client_menu .contribute a.active {
    background-position: -104px -170px;
}

#client_menu .search a:hover,
#client_menu .search a.active {
    background-position: -104px -233px;
}

#client_menu .history a:hover,
#client_menu .history a.active {
    background-position: -104px -298px;
}

#client_menu .basket a:hover,
#client_menu .basket a.active {
    background-position: -104px -361px;
}

#client_menu .profile a:hover,
#client_menu .profile a.active {
    background-position: -104px -424px;
}

#client_menu .info a:hover,
#client_menu .info a.active {
    background-position: -104px -487px;
}

#client_menu .mycollection a:hover,
#client_menu .mycollection a.active {
    background-position: -104px -554px;
}

#client_menu .admin a:hover,
#client_menu .admin a.active {
    background-position: -104px -616px;
}

#client_menu .crowdsource a:hover,
#client_menu .crowdsource a.active {
    background-position: -104px -55px;
}

#client_menu .research a:hover,
#client_menu .research a.active {
    background-position: -104px -2px;
}

#client_menu .browse a:hover,
#client_menu .browse a.active {
    background-position: -104px -170px;
}

#client_menu ul ul {
    display: none;
}

#info_menu,
#info_menu2 {
    display: none;
    position: absolute;
    top: 0px;
    left: 69px;
    min-width: 200px;
    height: 100%;
    background-color: #363636;
    z-index: 120;
    border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    color: #ffffff;
}

#info_menu a,
#info_menu2 a {
    display: block;
    font-size: 14px;
    color: #FFFFFF;
    margin-top: 6px;
    text-decoration: none;
}

#info_menu a:hover,
#info_menu2 a:hover {
    color: #EE631B;
}

#info_menu div.info_menu_inner,
#info_menu2 div.info_menu_inner {
    width: 100%;
    height: 100%;
    padding: 10px;
    vertical-align: bottom;
}

p.smallerer {
    font-size: 0.85em;
}

div.the-header {
    padding: 8px 20px;
    background: #efefef;
    /*  box-shadow: 0 3px 3px rgba(52,52,52,0.05);	*/
}


/* LS 2017-03-13: Added h1 to help migrate from using h2 to h1 for headings */

div.the-header h1,
div.the-header h2 {
    display: block;
    text-align: center;
    font-size: 2.0em;
    line-height: 25px;
    font-weight: 600;
    margin: 0;
    clear: none;
    vertical-align: baseline;
    color: #444444;
    padding: 0;
}

div.the-body {
    background-color: #ffffff;
    margin-left: 70px;
}

div.main_content {
    padding: 12px;
}

legend {
    background: none;
    padding: 4px;
}

#search-back {
    display: block;
    float: left;
    width: 33px;
    line-height: 25px;
    padding: 0 0 0 25px;
    margin-right: 10px;
    background-color: #f0f0f0;
    background-position: -239px -225px;
    border-radius: 2px;
}

#search-back:hover {
    color: #ee631b;
    background-position: -239px -200px;
}

#search-next-prev {
    width: 124px;
    white-space: nowrap;
    overflow: hidden;
}

span.and_date_search {
    color: #dddddd;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    background-color: transparent;
    color: #333333;
    border: 0;
    margin: 6px 0px;
}

h5 {
    text-align: center;
}

a {
    color: var(--primary);
}

a:hover {
    color: #000000;
}

a.button:hover {
    color: #ffffff;
}

ul {
    margin-left: 0;
    padding-left: 16px;
}

ol {
    margin-left: 0;
    padding-left: 20px;
}

ul li {
    list-style-type: disc;
    padding: 0;
}

.centre {
    text-align: center;
}

.smallcaps {
    font-variant: small-caps;
}

.block {
    display: block;
}

.pointer {
    cursor: pointer;
}

.left {
    float: left;
}

.newrec {
    width: 700px;
    height: 80px;
}

.widthwatch {
    max-width: 640px;
    border: 2px solid #ff0000;
}

#flashMessage,
div.message {
    position: absolute;
    text-align: center;
    top: 20px;
    width: 100%;
    font-size: 2.0em;
    color: #990000;
}


/* CONTENT HEADINGS ETC */

div.main_content,
div.popped_content,
div.main_content input {
    font-size: 14px;
    font-weight: normal;
}

.heading1 {
    color: #333333;
    font-size: 28px;
    font-weight: 300;
    display: block;
}

hr.underline {
    border: 0;
    background-color: #eeeeee;
    color: #eeeeee;
    height: 1px;
    margin-bottom: 10px;
}

.leftfloating {
    float: left;
    display: inline;
    margin: 10px;
}


/* PLACEHOLDER TEXT */

::-webkit-input-placeholder {
    color: #dddddd;
    font-size: 0.8em;
    padding: 0.1em;
}


/* WebKit browsers */

:-moz-placeholder {
    color: #dddddd;
    font-size: 0.8em;
    padding: 0.1em;
    opacity: 1;
}


/* Mozilla Firefox 4 to 18 */

::-moz-placeholder {
    color: #dddddd;
    font-size: 0.8em;
    padding: 0.1em;
    opacity: 1;
}


/* Mozilla Firefox 19+ */

:-ms-input-placeholder {
    color: #dddddd;
    font-size: 0.8em;
    padding: 0.1em;
}


/* Internet Explorer 10+ */


/* STICKY FOOTER */

html,
body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    min-width: 960px;
}


/* #main { overflow: auto; padding-bottom: 4.6em; } BB 2016-05-16: fix for bottom scroll & IE9 black space*/

#main {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 4.6em;
}

#footer {
    position: relative;
    margin-top: -4.6em;
    height: 2.6em;
    clear: both;
}

#sqlDump {
    background-color: #eeeeee;
    color: #222222;
    padding: 10px;
    font-size: 13px;
}

#sqlDump table {
    border-collapse: collapse;
}

#sqlDump table td,
#sqlDump table th {
    padding: 2px;
    border: 1px solid #dddddd;
}


/* UTILITIES */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}

.clearfix:before,
.clearfix:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0
}

.clearfix:after {
    clear: both
}

.clearfix {
    zoom: 1
}

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
    line-height: 0
}

.ir br {
    display: none
}

.hidden {
    display: none !important;
    visibility: hidden
}

.visuallyhidden {
    border: 0;
    clip: rect(0000);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    margin: -1px;
    padding: 0
}

.visuallyhidden:hover {
    color: white;
}

.visuallyhidden:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: absolute;
    width: auto;
    margin: 0;
    background-color: black;
    padding: 5px;
    left: 72px;
    z-index: 99999;
    top: 2px;
    font-size: 16px;
    text-decoration: underline;
    color: white
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
    margin: 0
}

.invisible {
    visibility: hidden
}

.textright {
    text-align: right;
}

.italic {
    font-style: italic;
}


/* mCustomScrollbar */


/* LS 2016-08-11 Added margin to make a gap for scrollbar instead of overlapping */

.mCSB_container {
    margin-right: 20px;
    border-top: 1px solid #f5f5f5;
}

.mCustomScrollBox>.mCSB_scrollTools {
    width: 20px;
}

.mCSB_scrollTools .mCSB_dragger {
    right: 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #000;
    background: rgba(0, 0, 0, 0.2);
    -ms-filter: "alpha(opacity=10)";
    filter: alpha(opacity=10);
}

.ie7 .mCSB_scrollTools .mCSB_draggerRail {
    height: 100%;
    position: absolute;
    right: 5px;
    z-index: 2;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 10px;
    background: #000;
    background: rgba(8, 153, 213, 0.75);
    -ms-filter: "alpha(opacity=10)";
    filter: alpha(opacity=10);
}

.ie7 .mCSB_scrollTools .mCSB_dragger {
    z-index: 3;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar:hover,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: var(--primary);
    background: rgba(8, 153, 213, 0.85);
    -ms-filter: "alpha(opacity=85)";
    filter: alpha(opacity=85);
}


/* horizontal */

.mCSB_horizontal>.mCSB_container {
    margin-bottom: 16px;
}

.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools {
    background: #fff;
}

.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail {
    height: 10px;
    margin: 3px auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.cke_show_borders {
    background: #fff !important;
}


/* BB fixes black background inside editor pane */

body.cke_panel_frame {
    background: #fff !important;
}

.cke_panel_list {
    background: #ffffff !important;
}


.altColor {
    color: var(--primary);
}


/*aim to fix inconsistant .em heights on buttons? */

.ui-button.butt_big span.ui-button-text {
    line-height: 22px !important;
}

.ui-button.butt_big>span {
    font-size: 16px;
    padding: 3px 25px !important;
}

.butt_on {
    background-color: #585455;
    border-color: #585455;
}

.butt_on:hover {
    background-color: #ebe2de;
}

.butt_on:hover span {
    color: #585455;
}

.copyDescrip {
    clear: both;
    padding-top: 12px;
}


/** contributions / form2 helper **/

.contribButtons {
    margin: 5px;
}


/** BB fixing streetview button   **/

img.svedit {
    height: auto !important;
    width: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
}

.trans {
    opacity: 0.4;
    filter: alpha(opacity=40);
    /* For IE8 and earlier */
}

.cursorArrow {
    cursor: initial;
}

.imagePreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}


/* BBCode alignments */

.bbleft {
    text-align: left;
}

.bbright {
    text-align: right;
}

.bbcentre {
    text-align: center;
}


/* BB: fixes default small font in ck-editor */

.cke_show_borders {
    font-size: 14px;
}


/* BB: stuff nodes */

.stuffThumbsLink a {
    text-decoration: none;
    word-wrap: break-word;
}

.mybookmarkitem a.tlink,
.stuffThumbs .parentchildimgs.mychildren .ichild a {
    word-wrap: break-word;
}

div.portlet a.readmore {
    padding: 5px 20px;
    font-size: 14px;
}


/* BB: Audio/Video default */

.avhero {
    overflow-y: hidden;
    height:100%;
    overscroll-behavior: none;
}

.avwrap .captions[style] {
    height: 510px !important;
}
.avwrap .captions ul{
    font-size: 14px;
    line-height: 25px;
    text-transform: initial;
}
.avwrap .avtitle{
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}
.avwrap a.caption{
    max-width: 25vh;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avwrap div.captions span.tag {
    vertical-align: baseline;
}

div.video,
div.audio,
div.captions {
    margin: 0;
    padding: 0;
}

#mapPicker {
    position: relative;
    width: 500px;
    height: 400px;
    inset: 0 0 0 0;

    li {
        list-style: none;
    }
}
.captionWarningTag-icon{
    background-image: url(/css/images/adminsprite.png);
    background-position: -100px 0px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 11px;
}
.captionWarningTag-text{
    margin: 10px 0;
    font-size: 16px;
    display: inline-block;
    color: #d76916;
    max-width: 768px;
}
/*///////////////////////////////////////////////////////
/*               AV track style
//////////////////////////////////////////////////////*/

#tracksTab-container {
    width: 770px;
    margin: 30px 0px 30px 200px;
}

#avTracks .trackGroupId {
    max-width: 750px;
}
.trackUploadSet{
    width: 750px;
    margin-bottom: 23px;
    border-bottom: 1px solid #cdcdcd;
}

#avTracks .trackform-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

#avTracks .trackChapter{
    max-width: 750px;
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 15px;
}
#avTracks .trackChapter .file-input{
    margin-bottom: 5px;
}

#avTracks .trackform-label {
    max-width: 155px;
    width: 100%;
    margin-right: 10px;
}

#avTracks .label-margin{
    margin-right: 13px;
}

#avTracks .form-input,
#avTracks .file-input,
#avTracks .input.text input,
#avTracks select {
    max-width: 583px;
    width: 100%;
}

#avTracks .chapText {
    display: block;
    margin-bottom: 10px;
}
#avTracks .trackVirusscan{
    display: block;
    color: #EE641C;
}


#avTracks .tabs {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin-bottom: 25px;
}

#tracksTab-container .tab li {
    list-style-type: none;
}

#avTracks .tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f1f1f1;
    margin-right: 5px;
    list-style-type: none;
}

#avTracks .tab-link.current {
    background-color: #495BA9;
    color: #fff;
}

#avTracks .tab-content {
    display: none;
}

#avTracks .tab-content.current {
    display: block;
}

#avTracks table {
    width: 750px;
    border-collapse: collapse;
    margin: 20px 0;
}

#avTracks th,
#avTracks td {
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding: 8px;
    width: calc(750px / 7);
}

#avTracks th {
    background-color: #f2f2f2;
}

#avTracks tr:nth-child(even) {
    background-color: #f9f9f9;
    line-height: 20px;
}

#avTracks .delete{
    margin-right: 10px;
    background-position: -60px 0px;
}

#avTracks .delete:hover {
	background-position: -40px 0px;
}

#avTracks .required-asterisk{
    color: red;
    font-size: 15px;
}

#avTracks .tooltip-icon {
    display: inline-block;
    margin-left: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #292626;
    color: white;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    cursor: pointer;
    position: relative;
}

#avTracks .tooltip-icon:hover::after {
    content: attr(title-data);
    position: absolute;
    text-align: left;
    left: 20px;
    top: 0;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    z-index: 1000;
    max-width: 540px;
    min-width: 270px;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: break-word;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#avTracks span.addanewtrackfile{
    background-image: url(/css/images/adminsprite.png);
	background-repeat: no-repeat;
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -999px;
	overflow: hidden;
	background-position: -20px -20px;
	cursor: pointer;
}
#avTracks .srttrackNote{
    display: block;
    margin-bottom: 10px;
}

#avTracks #srtUploadMessage,
#avTracks #srtUploadMessage a{
    margin-bottom: 10px;
}

/* Video player custom style */
.video-js .vjs-menu-button-popup  .vjs-menu .vjs-menu-content{
    width: auto;
    min-width: 7.25rem;
    max-width: 40vh;
    text-overflow: ellipsis;
    right: 0;
    text-transform: initial;
    background-color: rgba(43, 51, 63, 0.8);
    border-radius: 5px;
}

.video-js .vjs-menu-item{
    justify-content: flex-start;
    padding: 0px 5px;
}
.video-js .vjs-menu li{
    text-transform: initial;
}
.video-js .vjs-text-track-display{
    text-transform: initial;
}
.video-js .vjs-button > .vjs-icon-placeholder:before {
    font-size: 1.6875rem !important;
    line-height: 1.9375rem !important;
}


/* BB: Audio/Video resize on laptop */

@media only screen and (max-width: 1400px) {
    .video-js {
        width: 380px !important;
        height: 308px !important;
    }

    .avhero {
        height:100%;

    }

    .captions[style] {
        height: 316px !important;
    }

    div.video,
    div.audio,
    div.captions {
        margin: 0;
        padding: 0;
    }
}


/* Default mobile view */

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


/* Mobile Last queries - retro-fitting responsiveness (phase 1) */

#rMenuCont,
#rTaxCont {
    display: none;
}

.nomobile_pop {
    font-size: 14px;
    color: #ff0000;
    display: none;
}


/* search_menu - previously only available on nodes/index specific .css - needs to be global for new mobile search box */

#search_menu {
    background-color: #282828;
    padding-top: 4px;
    padding-left: 10px;
    z-index: 99;
}

#search_menu #kwsearch {
    font-size: 16px;
    border: 1px solid #cccccc;
    width: 140px;
    height: 24px;
    color: #333333;
    vertical-align: middle;
}

#search_menu .asearchbutton {
    background-color: var(--primary);
    width: 60px;
    height: 26px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 1.2em;
    text-align: center;
    vertical-align: middle;
    border: 0;
}

#search_menu .asearchbutton:hover {
    background-color: #EE631B;
}

#search_menu .asearchbutton.fullwidth {
    width: 63%;
}

#search_menu a.resetbutton {
    height: 26px;
    background-color: #EE631B;
    color: #ffffff;
    font-size: 12px;
    line-height: 6px;
    font-weight: 600;
    padding: 0px;
    border: 0px;
    display: inline-block;
    width: auto;
    margin: 0;
    vertical-align: middle;
}

#search_menu h2 {
    color: var(--primary);
    font-size: 1.6em;
    font-weight: 400;
    border-bottom: 2px solid var(--primary);
    margin-top: 20px;
}

#search_menu h2:first-of-type {
    margin-top: 0px;
}

#search_menu label {
    color: #dddddd;
    font-size: 1.2em;
    font-variant: normal;
    font-weight: 600;
}

#search_menu label.inline {
    display: inline-block;
    padding-right: 4px;
    width: 40px;
    text-align: center;
    white-space: nowrap;
}

#search_menu div.radio * {
    display: inline-block;
    margin: 3px;
}

#search_menu div.radio label {
    width: 24%;
    min-width: 65px;
    white-space: nowrap;
    overflow: visible;
}

hr.greybeard {
    border: 0;
    background-color: #666666;
    color: #666666;
    height: 1px;
    margin: 8px 0px;
}

#search_menu a.showhistory {
    float: right;
    font-size: 1.3em;
    padding-right: 6px;
}

#search_menu .tick {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 1.4em;
    display: block;
    padding-left: 20px;
}

#search_menu .tick span {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -9999px;
    background-position: -217px -180px;
    margin-right: 4px;
    margin-left: -20px;
}

#search_menu .tick:hover span.none2on,
#search_menu .tick:focus span.none2on {
    background-position: -217px -237px;
}

#search_menu .tick span.on2off,
#search_menu .tick span.alwayson {
    background-position: -217px -237px;
}

#search_menu .tick:hover span.on2off,
#search_menu .tick:focus span.on2off {
    background-position: -217px -204px;
}

#search_menu .tick.showalllessopts {
    color: #EE631B;
}

#search_menu .lab {
    font-size: 1.5em;
    color: var(--primary);
    margin: 2px 0;
    font-weight: 600;
}

#search_menu .taxwrap {
    margin-left: -15px;
}

#search_menu .taxwrap ul,
#search_menu .taxwrap li {
    list-style-type: none;
}

#search_menu .taxwrap li span.expandcolapse {
    float: left;
    display: block;
    width: 9px;
    height: 13px;
    margin-right: 2px;
    cursor: pointer;
    margin-left: -15px;
    background-position: -184px -315px;
}

#search_menu .taxwrap li span.expandcolapse.open {
    background-position: -175px -315px;
}


/* show/hide options enabled in personalised css */

#search_menu #advancedsearch {}

#search_menu #advsearch {
    color: #dddddd;
    padding: 8px;
    font-size: 1.3em;
    font-weight: 800;
    text-decoration: none;
    display: none;
}

#search_menu #advsearch:hover {
    color: #FFFFFF;
}

#search_menu .pick {
    width: 125px;
}

#search_menu .pick2 {
    width: 80px;
}


/* LS 2017-03-09: Very specific CSS to target the x in dialog popups */

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
}

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close:hover,
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close:focus {
    border: 1px solid #cccccc;
    background: #ededed;
}

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close span.ui-button-text {
    line-height: 8px;
}


/* NEW stuff divs - removed table layout in view */

div#StuffCont {
    display: block;
}

div.StuffMainCont {
    display: inline-block;
    width: 68%;
}

div.noSide {
    width: 98%;
}

div.StuffSideCont {
    display: inline-block;
    width: 30%;
}

img.profilepic,
span.profilepictxt {
    width: 100%;
    height: auto;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: none;
    margin: 10px 20px 1px 20px;
    display: block;
}


/* LS 2017-06-07: New Invisible reCaptcha styles */

form#MessageCreateForm div.submit,
form#MessageDisplayForm div.submit {
    display: block;
}

.grecaptcha-badge {
    bottom: 47px !important;
    z-index: 10000;
    position: relative;
    visibility: hidden;
}

body[data-recollect-page='-users-login'] .grecaptcha-badge,
body[data-recollect-page='-users-register'] .grecaptcha-badge,
body[data-recollect-page='-pages-contact'] .grecaptcha-badge,
body[data-recollect-page*='-messages-create'] .grecaptcha-badge {
    visibility: visible;
}

/* redact Audio/Video */

.redactedTitlea {
    color: #ffcccc;
    font-weight: bold;
}

.uLine {
    text-decoration: underline;
}


/*BB 2018-04-09: popupoverlay close button*/

.close-icon {
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-width: 3px;
    border-style: solid;
    border-color: red;
    border-radius: 100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%);
    background-color: red;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}


/* LS 2019-01-30 Adding block quote styles.  They exist in the wysiwyg but not in the rest of the site. */

.metadata blockquote {
    font-style: italic;
    padding: 2px 0;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
    padding-left: 20px;
    padding-right: 8px;
    border-left-width: 5px;
    margin-block-start: 1em;
    margin-block-end: 1em;
}


/* LS 2019-01-30 Extra margins for block quotes if exists in the main block of an Information Item. */

.StuffMainCont blockquote {
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

.oauth-login-link {
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    line-height: 20px;
    margin-left: 5px;
    padding: 6px;
    text-decoration: none;
}
.popped_content .oauth-login-link.ui-button div {
    padding:4px 14px;
}

.oauth-login-link:hover {
    color: #fff;
}

.loading_block {
    display: none;
    position: absolute;
    z-index: 100001;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

#openSearch h1 {
    border: 2px solid gray;
    padding: 5px 10px;
    border-radius: 5px;
    width: 100px;
    text-align: center;
    cursor: pointer;
}

.kitems ul {
    display: block;
}

.kitems ul li {
    list-style: none;
    width: 200px;
}

.geomap_search_block {
    display: none;
    flex-direction: column;
    margin: 20px 20px;
    position: absolute;
    z-index: 10000;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.geomap_search_block>div {
    flex-grow: 1;
    display: block;
    width: 100%;
    margin: 10px 0 20px 0;
}

#searchdata,
#resetsearchdata {
    border: none;
    border-radius: 3px;
    padding: 5px 15px;
    color: white;
    margin: 0 0 0 5px;
}

#searchdata {
    background:var(--primary);
}

#resetsearchdata {
    background: #EE631B;
}

#itemList_id {
    margin: 0;
}

.rangeValues {
    width: 100%;
}

.geomap_search_block p {
    border-bottom: 1px solid grey;
    padding: 10px 0;
}

.section_input {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.section_input input[type="text"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid grey;
    outline: none;
    width: 80%;
}

.section_input input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    background: #1b2d38;
    position: relative;
    z-index: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 15px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.section_input input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    background: #1b2d38;
    position: relative;
    z-index: 10000;
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 15px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.section_input input[type="range"] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    border-radius: 12.5px;
    background: #e5e5e5;
    height: 10px;
    outline: none;
}

.section_input input[type="range"]::-moz-range-track {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    border-radius: 12.5px;
    background: #e5e5e5;
    height: 10px;
    outline: none;
}

.rangeValues {
    margin-bottom: 10px;
    font-size: 18px;
}


/*=========== Custom colors for client ==============*/

.custom-cl-bg,
.btn-filled {
    color: white !important;
    background-color: var(--primary);
}

.btn-custom {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.show-more,
.custom-cl-color,
.custom-cl-color a {
    color: var(--primary) !important;
}

.custom-cl-color {
    border-color: var(--primary);
}

.custom-cl-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: 0;
    scrollbar-color: var(--primary) var(--primary);
}

.custom-cl-scroll::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: var(--primary);
}

.custom-cl-scroll::-webkit-scrollbar-track {
    background: #bdbdbd;
}

.custom-cl-scroll::-webkit-scrollbar {
    width: 5px;
}

.custom-cl-active i {
    color: var(--primary) !important;
}

#search-within-toggle .custom-cl-scroll {
    scrollbar-width: thin;
    scrollbar-color: inherit;
}

.switcher__label input:checked+.switcher__slider {
    background-color: var(--primary);
}

.bold {
    background: rgba(22, 171, 215, 0.5);
}

.disabled {
    color: grey !important;
    background: #ffffff !important;
    border-color: grey !important;
}

#StaticpageDisplayForm .timthetoolmantable .input .disabled {
    /* needs important to override the above, unsure why the above needs it... */
    background-color: transparent !important;
}

#gcoorsave.disabled,
#gsave.disabled {
    pointer-events: none;
}
/* Warning labels if user enters invalid map coordinates */
.warn-zoom, .warn-lng, .warn-lat {
    color:#ED0226;
    font-weight: bold;
}



/*======== HOVER EFFECT BLOCK  ========*/

.btn-filled:hover,
.custom-cl-list li:hover {
    color: white;
    background-color: #ee631b;
    cursor: pointer;
}

.btn-hover:hover {
    color: #ee631b;
}

.btn-custom:hover {
    color: white !important;
    background: #495BA9;
    border-color: #495BA9 !important;
}

.view-block-buttons__list-block:hover i,
.view-block-buttons__grid-block:hover i {
    color: #ee631b;
}

.page-block:hover i {
    color: #ee631b;
}

.info-block:hover>i,
.info-block:hover>.info-block__title {
    color: #ee631b;
}

/*======================*/
/* Logo was being displayed in reports at orginal size
   added max-width to prevent large logos clogging up the screen */
.reportlogo {
    max-width: 600px;
    height:auto;
}

/* Moderation */
.moderation-notice {
    color: orange;
    font-size: 18px;
    margin-top: 8px;
}

/* Add recollection block height */
#addMyStory {
    height: auto !important;
}

/* display street view block */
.mapdata-select {
    padding: 10px 0;
}

.mapdata-select span {
    display: inline-block;
}

/*@ST R1X-5355: 2021-05-12*/
table.adminlisttable td,
table.adminlisttable th {
    max-width: 350px;
    min-width: 60px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mac only detection for arrow icon issue - R1X-6460 in recollect3.js*/
#navigation .accessible-megamenu-panel li.sub.mac-fix::after {
    content: '' !important;
}

/* Image stretch issue per https://recollectnz.atlassian.net/browse/R1X-6640  */
.StuffMainCont .stuffThumbs .parentchildimgs.mychildren .ichild {
    width: min-content;
}

.StuffMainCont .stuffThumbs .ichild img {
    width: min-content;
}

/* R1X - 7519 */

#tools .toolbox_button:hover,
#tools .toolbox_button:focus {
    line-height: 28px;
    z-index: 5 !important;
}

html body div#viewport.fullmonty {
    z-index: 4 !important;
}

/* Parent Child icons  */

.parent_child_icon i{
    color: #3f423f;
    margin-top: 2px;
    margin-right: 5px;
}

/* R1X - 7397 - Fix overflowing tools on short screens */
@media only screen and (max-height:695px) {

    html #tools {
        width: 80px;
        top: 80px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    html #tools .toolbox_button {
        display: block;
    }

    /* stretches the left panel in item view to accommodate extra tool column */
    #thezone {
        width: calc(100% - 40px);
    }

    #zoomer {
        max-width: 30px;
    }

    /*  Disable tooltips - These are likey to be only devices at this query anway?  */
    #tools .toolbox_button:hover,
    #tools .toolbox_button:focus {
        width: 40px !important;
    }
}

/* Login text style */
/* R1X - 8402  */

body[data-recollect-page="-users-register"] div.main_content div.leftfloating p:nth-of-type(1),
body[data-recollect-page="-users-register"] div.main_content div.leftfloating p:nth-of-type(3),
body[data-recollect-page*="-users"] div.popped_content div.registeroptions p.smallerer,
#logpop div.popped_content div.registeroptions p.smallerer {
    width: 325px !important;
    margin-top: 12px;
}

body[data-recollect-page="-users-forgot"] .main_content hr+p {
    width: 380px !important;
    margin: 20px 0;
    text-align: justify;
}

a.void-pointer {
    cursor: pointer;
}


/* Browser Update Modal */
#browserUpdateModal {
    background: #ffffff;
    color: var(--primary) !important;
    margin: auto;
    min-height: 60vh;
    min-width: 60vw;
    width: 80%;
    height: auto;
    border: 1px solid #dddddd;
    z-index: 105;
    position: absolute;
    top: 90px;
    left: 200px;
    max-height: 80vh;
    max-width: 80vw;
    ;
    overflow: scroll;
    padding-bottom: 35px;
}

.pages-browserUpdate {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100% !important;
    width: 100%;
    height: 100%;
    z-index: auto;
    border: none !important;
    overflow: hidden !important;
    padding: 0;
    margin: 0;
    position: static !important;
}

#closeBrowserUpdate {
    text-align: left;
    padding: 5px;
}

.closeBrowserUpdate {
    float: right !important;
}


#outdatedBrowserAlert {
    font-family: \'Raleway\' !important;
    color: var(--primary) !important;
    font-size: 48px;
    text-align: center;
    font-weight: 800 !important;
}

.browserOutdated {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 29px;
    text-align: center;
    font-weight: 500 !important;
    color: var(--primary) !important;
    margin: 40px 0;
}

.browserUpdateParagraphs {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 16px;
    text-align: left;
    font-weight: 500 !important;
    width: 80%;
    margin: auto;
    line-height: 1.75;
    margin-bottom: 15px;
}


.howUpdate {
    width: 80%;
    margin: 35px auto 10px;
    text-align: left;

}

.browserUpdateParagraphs a {
    color: var(--primary);

}

.browserUpdateParagraphs li {
    margin-bottom: 15px;
}

.paragraph-bold {
    font-weight: 600;
}

.last-paragraph {
    margin-top: 45px;
}

.setting-info {
    margin:5px 20px;
    color:#333333;
    font-weight: 300;
}
/* stop datepicker from being hidden */
/* important to override jquery ui default */
html #ui-datepicker-div {
    z-index: 2 !important;
}

/* R1X 8974 adjustment for footer */
body[data-recollect-page="-pages-browserupdate"] {
    #footer {
        margin-top: 0;
    }

    #main {
        padding-bottom: 0;
    }

}

/* For preventing focus outline on Page hits popup links */
#searchresultsdiv a:focus-visible,
#pagehitslist a:focus-visible {
    outline: none;
}

/* custom popup site variable */
.popup-modal.modal_overlay {
    position: fixed;
    top: 0vh;
    bottom:0px;
    left:0px;
    right:0px;
    height:100vh !important;
    min-height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    box-sizing: content-box;
}


.popup-modal .modal {
    font-size: 16px;
    background-color: #fff;
    max-width: 98vw ;
    min-width: 10vw;
    text-align: center;
    padding:0 20px 20px;
    top: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin:auto;
    position:relative;
    max-height: 70vh;
}


 dialog.popup-modal{
    background-color:rgb(0,0,0,0.5);
 }
 .popup-modal .closeModal {
    display: block;
    margin: 0 auto;
    background-color: #1b2d38;
    color: #fff;
    font-size: 16px;
    border: none;
    padding: 11px;
    border-radius: 4px;
    cursor:pointer;
}

/* padding for close button at the bottom of the popup*/
.closePopup{
    padding:12px;
}

.popup-modal .closeModal:hover{
    background-color: gray;
    color:#fff;
}
.popupClose {
    display: block;
    text-align: center;
    float:right;
    margin:16px 0px 5px 0px !important;
    background: none !important;
    line-height: 3px;
    position:sticky;
    top:0px;
    padding-bottom: 0 !important;

}

.popupClose:after {
    clear: both;
    display: table;
    content: "";
}

.popup-modal button.closeModal:not(.popupClose){
    min-width: 80px;
}
.popupId {
    font-weight: bolder;
}

.popupButton {
    width: 200px;
    padding: 15px;

}

.popupTitleBar {
    display:block;
    width: 100%;
    text-align: center;
    padding: 5px !important;
    margin:auto;
    margin-bottom: 20px;
}

.popupHeading{
    font-weight:500;
    text-transform: uppercase;
    /* Added sans-serif fallback for mac-IE font render issue  */
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    color:#000;
    margin-top:20px;
}

.popup-modal .more-button-text{
    display: none;
    font-weight:bold;
    border:none;
    background: none;
    margin:15px auto;
    cursor: pointer;
    color:var(--primary) ;

}
.popup-modal div.more-content {
    display:none;
}

.popup-modal .more-button-text:hover{
    text-decoration: underline;

}
.popup-modal .more-content,
.popup-modal p,
.popup-modal img,
.popip-modal a
{
    width:98%;
}

@media screen and (max-width:1300px){
    .popup-modal .modal_overlay{
        width:90vw !important;
    }
    .popup-modal .modal{
       width:60% !important;
    }
    .popupTitleBar {
        width: 70% !important;
        margin:auto;
        margin-bottom:2%;
    }
}

@media screen and (max-width:790px){
    .popup-modal .modal {
        font-size: 16px;
        max-width: 80vw;
        min-width: 70vw;
        margin: 55px auto;
        padding:0 20px 20px;
        position: relative;
        top: 50vh;
        overflow:scroll;
    }

    .popup-modal .closeModal {
        margin: 0 auto;
        font-size: 16px;
        padding: 11px 12px;
    }

    .popupClose {
        margin: 15px 10px !important;
    }

    .popupTitleBar {
        margin: 5% auto !important;
    }
}

@media screen and (max-width:576px){
    .popup-modal .modal {
        max-width:80vw !important;
    }
    .video-js .vjs-menu-button-popup  .vjs-menu .vjs-menu-content{
        max-width: 35vh;
    }


}

@media screen and (max-width:430px){
    .video-js .vjs-menu-button-popup  .vjs-menu .vjs-menu-content{
        max-width: 27vh;
    }
}

/* Popup style ends */

/* Geomap widget ui for map customization  */
.zoom-lat-lng-widget {
    overflow: auto;
    margin-left: 0px;
}

.zoom-lat-lng-widget label {
    font-style: normal;
}

.lng-widget, .lat-widget {
    width: 200px;
    float: left;
}

html body .zoom-lat-lng-widget .lng-widget input,
html body .zoom-lat-lng-widget .lat-widget input {
    width: 180px;
}

.zoom-widget {
    width: 140px;
}

.sitevar-map-widget {
    margin-top: 12px;
}

html #mapWidgetOrMapDefault.widget-or-default-check {
    display: inline;
    width: 20px;
    margin-top: 7px;
    margin-left: 8px;
}

html .label-for-default-map {
    display: inline-block;
}
.map-widget-switch {
    display: none;
}

.map-widget-switch.show {
    display: block;
}

html .zoom-lat-lng-widget .use-default-map-coords-contain [for|="mapWidgetOrMapDefault"] {
    display: none;
}

.use-default-map-coords-contain [for|="StaticpageLabel-for-widget-custom-settings"] {
    display: inline-block;
}

.use-default-map-coords-contain .input.checkbox {
    display: inline-block;
}

.widget-settings-msg {
    display: block;
    margin: 5px 20px;
}

.use-default-map-coords-contain {
    margin-top: 5px;
    margin-bottom: 2px;
}

/* R1X-9520 needed margin space after check box while removing the unwanted characters in user admin page */
body[data-recollect-page*="-users-admin-edit:"] .the-body .main_content #UserAdminForm #UserRandom {
    margin-right:10px;
}


/* Right click disable site var css   */
/* Custom position and styling for right click toastr warning contains a custom toastr class */
.toast-bottom-center-view {
    bottom: 0;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.toast-bottom-center-view .toast-info {
    background-color: #495ba9;
}

/* CSS method to disable long click in ios long click call out, particularly ios mobile iphone */
#viewport[data-right-disabled="1"] {
    -webkit-touch-callout: none !important;
}


/* Search Orderby & Search for font color change  */
#searchOrderby label,
#nodes-search-for label{
    color: #000;
    font-weight: 400;
}

/* Apple OS blue default is occuring on some elements, this enforces correct color for various search button and search result elements  */
#normal-search-block button.criteria-selector,
body[data-recollect-page="-"] #searchblock button.wg_select_block_button,
body[data-recollect-page*="pages"] #searchblock button.wg_select_block_button,
body[data-recollect-page*="-nodes-search"] #buttons-block .buttons-block button.criteria-selector,
body[data-recollect-page*="-nodes-browse"] #buttons-block .buttons-block button.criteria-selector {
    color: inherit;
}


/* R1X - 12094  */
html  .vjs-menu-button-popup .vjs-menu{
    width:250px;
    left:-130px;
    height:180px;
    overflow:hidden;
    padding-top:15px;
    bottom:-19px;
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content{
    width:100%;
    height:90%;
    min-width:0;
    max-width:none;
    max-height:none;
    overflow:auto;
    text-overflow: ellipsis;
    overscroll-behavior: contain;
    position:relative;
}

/* Theme override for transcription hide/show landscape/portraid buttons  */
html #main_content div#buttonsFullMonty {
    float: left;
    display: none;
}

i.on-screen-icon {
    font-size: 12px;
    line-height: 20px;
    margin-right: 5px;
}

/* Timeline Adjustment For Readability of non active items */
#timeline-embed .tl-timemarker-with-end h2.tl-headline {
    color: #343434;
}

/* Timeline next previous text adjustment important used to override library  */

html body #timeline-embed .tl-slidenav-title {
 opacity: 1 !important;
 color: #fff !important;
}

html body #timeline-embed .tl-slidenav-previous:hover .tl-slidenav-description,
html body #timeline-embed .tl-slidenav-next:hover .tl-slidenav-description {
    opacity: 1 !important;
    color: white;
}