@charset "utf-8";
/*
Copyright (C) 2009-2017 Ing. Maroš Šándor, IČO: 03046346. All rights reserved.
*/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('fonts/OpenSans400.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url('fonts/OpenSans400italic.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('fonts/OpenSans700.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('fonts/OpenSans700italic.woff') format('woff');
}
@font-face {
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    src: local('Icons'), local('Icons-Regular'), url('fonts/icons.woff') format('woff');
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    /*noinspection CssNoGenericFontName*/
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyph {
    /*noinspection CssNoGenericFontName*/
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ddsmoothmobile {
    display: none;
}

#fs-mobile-search {
    margin: 4px;
}

#fs-mobile-search input {
    padding: 4px;
}

#fs-mobile-menu {
    display: none;
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.mobile-menu-header, .mobile-menu-item, .mobile-menu-button {
    cursor: pointer;
}
.mobile-menu-header, .top-stripe-label {
    width: 100%;
    padding: 8px;
    background-color: #ff00ff;
    color: white;
    /*font-weight: bold;*/
    font-size: 125%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-stripe-label {
    font-size: 110%;
    margin: 0 0 2px 0;
}

.popup-mobile-menu {
    border-bottom: 4px solid #909090;
}

#mobile-menu {
    width: 100%;
    background-color: #ff00ff;
    color: white;
    /* No bottom margin: the gap below the bar is .pinned-stripe, which outlives the bar. */
}
.mobile-menu-item {
    padding: 16px;
    border-bottom: 1px solid black;
}
.mobile-menu-button {
    margin: 0 16px 0 auto;
    padding: 8px 0 0 0;
}

html {
    box-sizing: border-box;
    /* Anchors and scrollIntoView() must land below the pinned menu bar, not underneath it. */
    scroll-padding-top: calc(var(--pinned-top) + 8px);
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: #ffffff;
    margin: 0;
    /*font-family: Arial, Helvetica, sans-serif; COLOR: black;*/
    font-family: 'Open Sans', sans-serif;
    font-size: 10.5pt;
    padding: 0;
    top:0 !important;
}
img {
    border-style: none;
    max-width: 100%;
}
table td img {
    max-width: none;
}
table {
    border-collapse: collapse;
}
a, a:link {
    text-decoration: none
}
a:hover {
    text-decoration: underline
}
.actions a:hover, .form-actions a:hover {
    text-decoration: none
}
textarea {
    font-family: inherit;
}

#hp-container {
    width: 100%;
}
#hp-header {
    position: relative;
    margin: 0 0 2px 0;
}
#hp-header-logo {
    overflow: hidden;
    max-height: 20%;
}
#hp-header-logo img {
    display: block;
}
#hp-header-logo-shadow {
    display: none;     /* hidden by default */
    box-shadow: 0 0 16px 24px
}

#hp-footer {
    margin: 4px 0 0 0;
    text-align: center;
    font-size: 90%;
    padding: 0.2em;
    color: white;
    background-color: #ff00ff;
    clear: both;
    display: flex;
    flex-direction: column;
}
#hp-footer a {
    color: white;
    text-decoration: underline;
}
/* The help and RSS cells keep the width of the icon they hold. They sit in a nowrap flex row beside the
   copyright text, so by default they are as shrinkable as it is, and on a narrow window they were squeezed
   to 23px around a 24px icon carrying a 6px margin: the icon then spilled out of its own cell and 3px past
   the right edge of the page, which was enough to give the whole page a horizontal scrollbar. The text is
   what should give way here — it wraps, an icon cannot. */
.footer-icon {
    flex-shrink: 0;
}
/* The empty part of the classic menu bar links to the home page (see header-menu.jspf), so the whole bar
   shows the hand - except the search box in it, which would inherit the hand over a text field. */
#hp-classic-menu {
    cursor: pointer;
}
#hp-classic-menu input {
    cursor: auto;
}
#hp-menu img, .message-stripe img, .mobile-menu-item img  {
    position: relative;
    top: 2px;
    margin-right: 2px
}
.menu-icon {
    margin: 0 6px 0 0;
    font-size: 17px;
    position: relative;
    top: 2.5px;
}
a:hover .menu-icon, a.selected .menu-icon {
    color: #101010 !important;
}
.welcome-page-container img {
    max-width: 100%;
}
.message-stripe {
    font-size: 90%;
}
.news-item-header {
    background: linear-gradient(to right, #ff00ff, #ffD0ff);
    position: relative;
    padding: 4px;
    display: flex;
    flex-direction: row;
}
.news-item-title-and-author {
    display: flex;
    flex-direction: column;
}
.news-item-header-icon {
    margin: auto 8px auto 0;
}
.news-item-header-icon span {
    font-size: 36px;
    text-shadow: 1px 1px 2px #404040;
    margin: auto 4px auto 4px;
}
.news-item-actions {
    text-align: right;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: auto 0 auto auto;
    z-index: 10;
}
.news-item-actions-icons {
}
.news-item-title {
    font-size: 125%;
    font-weight: bold
}
.news-item-author {
    font-size: 90%;
}
.news-category-header {
    font-size: 90%;
    margin-bottom: 4px;
}
div.mce-fullscreen {
    z-index: 5000;
}
.notification-area-container {
    display: flex;
}
.notification-area-message {
    margin: auto;
}
.notification-area-actions {
}
/* ClearFix http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best */
#hp-container:after {
    display: table;
    content: "";
    clear: both;
}
/* ClearFix END */











#google_translate_element {
    position: absolute;
    bottom: 8px;
    right:4px;
    text-align: right;
    z-index: 9;
}

.comments-link img {
    POSITION: relative; TOP: 2px; MARGIN-RIGHT: 2px
}
#hp-content {
    margin: 2px 2px 0 2px;
    /* A block formatting context, so the content column sits beside the floated quickbar instead of
       flowing under it. "overflow: hidden" used to do this, but an overflow:hidden ancestor is a
       scrollport, and a scrollport that never scrolls silently disables "position: sticky" for
       everything inside it — which is what .pinned-head relies on. "clip" clips exactly like "hidden"
       without becoming a scrollport. */
    display: flow-root;
    OVERFLOW: clip;
}

/* ======================================================
    PINNED PAGE CHROME

    The page scrolls normally, so the header image scrolls out of sight, but nothing needed to navigate
    goes with it: the menu bar sticks to the top of the viewport, and the quickbar and a listing's
    <ws:pinned> head (folder list, item count, "show all", the create button) stick right below it. Only
    the items themselves scroll away. On narrow viewports the quickbar is hidden anyway and the mobile
    menu bar, which sits above the image rather than below it, is what stays.

    Scrolling further down lets the menu bar scroll away too, giving the listing the whole window;
    scrolling back up even a little brings it straight back, together with the head and quickbar that
    ride below it. The header image is deliberately not part of that: it stays where it is in the
    document, so it comes back only once the reader has scrolled all the way to the top.

    Between the bar and the page below it sits .pinned-stripe, and it is always there: page-coloured
    while the bar is showing, where it is simply the gap the bar's bottom margin used to leave, and
    menu-coloured once the bar has slid away, where that gap becomes the only thing left of the menu and
    so tells the reader there is one folded up above. It is a real element rather than a margin because
    a margin exists only while the bar is in the flow, and the gap has to survive the bar sticking and
    then leaving.

    --menu-height is the height of whichever menu bar the viewport currently shows. It is measured by
    updatePinnedTop() in app.js rather than hardcoded, because the bar swaps between its mobile and
    desktop variant at 960px and wraps to more lines when the window is narrow or the customer's menu
    is long. --stripe-top is where the stripe sits, --pinned-top where everything below it starts; both
    lose the bar's height once it is slid away.
====================================================== */
:root {
    --menu-height: 0px;
    --stripe-height: 8px;
    /* The head's own separator from the items below it. Thinner than the menu stripe: it divides two
       parts of one listing, not the page furniture from the page. */
    --head-stripe-height: 4px;
    --stripe-top: var(--menu-height);
    --pinned-top: calc(var(--menu-height) + var(--stripe-height));
}
body.menu-hidden {
    --stripe-top: 0px;
    --pinned-top: var(--stripe-height);
}
#mobile-menu, #hp-classic-menu {
    position: sticky;
    top: 0;
    /* Above .pinned-stripe, .pinned-head and #hp-quickbar. Kept below #fs-mobile-menu (500), which is
       the overlay this bar opens and which is meant to cover it. */
    z-index: 100;
}
#hp-classic-menu {
    /* The classic bar needs more, because it is the one with dropdowns and pinning it made it a
       stacking context: everything ddsmoothmenu paints now sits at this one z-index rather than at the
       1000-and-up it assigns its own elements, so the bar itself has to out-rank anything a page may
       put over the area a dropdown unfolds into — #current-day in set-current-day.jspf carries 500.
       Still below the overlays that are meant to cover the menu: the media viewer (2000), the TinyMCE
       fullscreen editor (5000), the datepicker (9999) and the whole page cover (10000). */
    z-index: 1000;
}
/* Replaces the .ddshadow helper divs ddsmoothmenu would otherwise append to the body (turned off with
   shadow:false where the menu is initialised). Those carried z-index 1000+ in the page's own stacking
   context, so once this bar became one of its own they covered the dropdown they belong under — and
   being real elements they swallowed the pointer, closing the menu the moment it reached a child item.
   A box-shadow on the submenu itself cannot be hit, and travels with it. */
.ddsmoothmenu ul li ul {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
body.menu-hidden #mobile-menu, body.menu-hidden #hp-classic-menu {
    /* Parked just above the window, rather than translated out of it.
       The difference shows at the moment the bar first reaches the top. A sticky box is only ever held
       back, never pulled up, so at that moment the stripe and the listing head are still resting a
       bar's height further down and cannot rise into a strip the bar has only just vacated: translating
       the bar away there leaves a hole. Parking it does not, because the bar keeps its place in the
       flow — it is not yet past the parking point, so it simply carries on scrolling out of sight with
       the stripe and the head following it up the way they always do.
       Further down the page, where the bar is genuinely being held at the top and everything below it
       is held too, this puts it out of sight in one step and they all rise together. */
    top: calc(-1 * var(--menu-height));
}
.pinned-stripe {
    position: sticky;
    top: var(--stripe-top);
    /* Under the bar, which slides over it, but over the listing scrolling past underneath. */
    z-index: 90;
    height: var(--stripe-height);
    background-color: #ffffff;      /* the page behind it; themed per customer in override.css */
}
body.menu-hidden .pinned-stripe {
    background-color: #ff00ff;      /* the menu that is folded up above it; likewise themed */
}
/* Never put "top" in a transition on a sticky box: Chrome then resolves the offset to zero and the box
   sticks to the very top of the window, underneath the menu bar. Only the bar itself slides; whatever
   rides below it moves in one step, which is hidden anyway while the bar passes over it. */
.pinned-head {
    position: sticky;
    top: var(--pinned-top);
    z-index: 30;
    /* Opaque, because the items scroll underneath it. Themed per customer in override.css, matching
       #hp-container's background. */
    background-color: #ffffff;
    /* Separates the controls from the items running under them, the way the menu stripe separates the
       bar from the page. A border rather than an element: it stays put at the bottom of the box when a
       long head scrolls inside itself, which a last child would not. It is reserved but transparent
       until there is something to separate, so that the listing does not shift by its width the moment
       the reader starts scrolling. */
    border-bottom: var(--head-stripe-height) solid transparent;
    /* A head taller than half the window would defeat the point of pinning it, so an unusually long
       one (a folder list of dozens of entries) scrolls within itself instead of eating the viewport. */
    max-height: 50vh;
    max-height: 50dvh;      /* where supported: the window a mobile browser actually leaves us */
    overflow-y: auto;
}
/* Only once the head has actually been left behind by the listing, which updatePinnedHeads() in app.js
   decides by comparing it against the anchor marking where it rests. At the top of the page the items
   start right below the head and there is nothing to divide. Coloured like the sidebar blocks. */
.pinned-head-stuck {
    border-bottom-color: #ff00ff;
}
/* Marks where the head rests; carries no height of its own. */
.pinned-head-anchor {
    height: 0;
}
#search-control-form A {
    POSITION: absolute
}
.sidebar-block {
    BACKGROUND-COLOR: #ff00ff;
    MARGIN-bottom: 8px;
    border: 1px solid #909090;
    padding: 4px;
}
.sidebar-block-title {
    MARGIN-BOTTOM: 0.3em; FONT-SIZE: 1em; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}
.sidebar-block-title A {
    COLOR: inherit
}
.sidebar-block-body {

}

.fb-like {
    margin-top: 6px;
    vertical-align: middle;
}

.twitter-share-button {
    vertical-align: middle;
    margin-top: 6px;
    width: 80px !important;
}

table.form-listing {
    border: 2px solid white;
}
table.form-listing TD {
    border: 1px solid white;
    padding: 0.5em;
    BACKGROUND-COLOR: #f9e1b0
}




TABLE.listing {
    WIDTH: 100%;
    border: 2px solid white;
}
TABLE.listing TD {
    border: 1px solid white;
    padding: 2px;
}
TABLE.listing TH {
    border: 1px solid white;
    padding: 2px;
}
TABLE.listing TD {
    background-color: #ff00ff;
}
TABLE.listing TD.alternate {
    background-color: #ff00ff;
}
TABLE.listing TH {
    TEXT-ALIGN: center;
    background-color: #ff00ff;
    color: #ff00ff;
    FONT-WEIGHT: bold
}
TABLE.trhover TR:hover TD {
    background-color: #ff00ff;
}
TABLE.trhover TR:hover TD.alternate {
    background-color: #ff00ff;
}
TABLE.tdhover TD:hover {
    background-color: #ff00ff;
}
#polls-actions IMG {

}
.polls-item-actions {

}
.tra-totp-qrcode {
    text-align: center;
    margin: 12px;
}
.tfa-needed-notification-area {
    border: 4px solid #ff9000;
    border-radius: 8px;
    text-align: center;
    padding: 4px;
    margin: 4px;
}
.poll-ended {
    margin: 12px 0 12px 0;
    padding: 12px;
    text-align: center;
    background-color: #ff9090;
    border-radius: 8px;
    font-weight: bold
}
.poll-usneseni-approved,.authenticate-locked {
    margin: 12px 0 12px 0;
    padding: 12px;
    text-align: center;
    background-color: #90ff90;
    border-radius: 8px;
    font-weight: bold;
    font-size: 120%;
}
.poll-usneseni-rejected {
    margin: 12px 0 12px 0;
    padding: 12px;
    text-align: center;
    background-color: #ff9090;
    border-radius: 8px;
    font-weight: bold;
    font-size: 150%;
}
.inline-notification, .inline-notification-error {
    margin: 12px 0 12px 0;
    padding: 12px;
    text-align: center;
    background-color: #99BF68;
    border-radius: 8px;
}
.inline-notification-error {
    background-color: #ff9090;
}
.poll-closing,.authenticate-unlocked {
    margin: 12px 0 12px 0;
    padding: 12px;
    text-align: center;
    background-color: #ffff90;
    border-radius: 8px;
    font-weight: bold
}
.poll-rollam-evaluation-info {
    margin: 12px 0 12px 0;
    padding: 12px;
    text-align: center;
    background-color: #90ff90;
    border-radius: 8px;
    font-weight: bold
}
.poll-item-bar {
    BACKGROUND-COLOR: #6d4a03; HEIGHT: 1em
}
.poll-item-percent {
    POSITION: relative; HEIGHT: 0.8em; COLOR: black; FONT-SIZE: 0.8em; TOP: -1.2em; LEFT: 330px
}
.poll-item-bar-100 {
    BACKGROUND-COLOR: #f9cb6d; HEIGHT: 1em; MARGIN-LEFT: 20px
}
.poll-small-graph {
    TEXT-ALIGN: center; FLOAT: right
}
.poll-graphs {
    MARGIN-TOP: 1em;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.poll-graph-wrapper {
    width: 100%;
}
.poll-graph-legend-message {
    font-weight: bold;
    margin: 0 auto 12px auto;
}
.poll-graph-legend-entry {
    display: flex;
}
.poll-graph-legend-color {
    flex: 0 0 50px;
    margin: 8px;
}
.poll-graph-composite {
    display: flex;
}
.poll-graph-image {
    height: 240px;
    margin: auto 0 auto 0;
}
.poll-graph-legend-wrapper {
    display: flex;
    flex-direction: column;
    margin: auto auto auto 12px;
}
.poll-graph-legend-percent {
    font-size: 90%;
    font-weight: bold;
    margin: auto 0 auto 0;
}
.poll-graph-legend-text {
    font-size: 90%;
    margin: auto auto auto 8px;
}
.poll-graph-wrapper-iframe {
    width: 150px;
    height: 150px;
}
.polls-item-title A {
    COLOR: inherit
}
#poll-add-form DT {
    FONT-WEIGHT: bold
}
#poll-message-options {
    WIDTH: 100%
}
#poll-title-input {
    WIDTH: 100%
}
#poll-message-input {
    WIDTH: 100%
}
#polls-list {
    MARGIN: 0 0 20px
}
.polls-item-block {
    MARGIN: 0 0 20px
}
.polls-item-title {
    FONT-WEIGHT: bold
}
.polls-item-options {
    MARGIN-TOP: 1em;
}
.forum-item-title {
    FONT-SIZE: 1.5em; FONT-WEIGHT: bold;
    margin: auto auto auto 0;
}
.forum-item-title A {
    color: inherit
}
.news-item-title A {
    COLOR: inherit
}
.news-actions {

}
#news-title-input {
    WIDTH: 100%
}
#news-message-input {
    WIDTH: 100%
}
.news-item-block {
    BORDER: #909090 1px solid;
    margin: 0 0 20px;
}

.news-item-block:hover {
    BORDER: black 1px solid;
}

.ack-notification-area {
    padding: 4px;
    background-color: #ff8686;
    font-size: 90%;
    font-weight: bold;
}
.email-recipients-area {
    padding: 4px;
    background-color: #99BF68;
    font-size: 90%;
}
.system-notification-area {
    padding: 8px;
    margin: 0 8px 8px 8px;
    background-color: #fefe74;
    border: 1px solid #909090;
    animation-name: pulsebg;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.cookies-notification-area {
    padding: 8px;
    margin: 0 8px 8px 8px;
    background-color: #99BF68;
    border: 1px solid #909090;
}

@keyframes pulsebg {
    0% {
        background-color: #fefe74;
    }
    50% {
        background-color: #fefe7420;
    }
    100%  {
        background-color: #fefe74;
    }
}

.demo-notification-area, .reponse-notification-area {
    padding: 12px;
    margin: 0 8px 8px 8px;
    background-color: #99BF68;
}

.reponse-notification-area {
    cursor: pointer;
}

.event-notification-area {
    padding: 4px;
    background-color: #99BF68;
}

.story-notification-area-created {
    padding: 4px;
    background-color: #efe034;
}

.story-notification-area-resolved {
    padding: 4px;
    background-color: #99BF68;
}

.story-notification-area-rejected {
    padding: 4px;
    background-color: #ff8686;
}

.news-item-body {
    padding: 4px;
    position: relative;
}
.news-item-body-iframe{
    width: 100%;
    border: 0;
}
.news-item-body-iframe-content {
}
.category-empty {
    font-weight: bold;
}
.category-list {
    font-size: 90%;
}
.span-div-clickable {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 1;
}

.span-div-clickable-body {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 1;
}

.span-div-clickable:hover {
    background-color:rgba(0, 0, 0, 0.1)
}

.span-div-clickable-body:hover {
    background-color:rgba(0, 0, 0, 0.1)
}

.forum-item-header {
    background-color: #ff00ff;
    color: #f0f0f0;
    padding: 4px 0 4px 4px;
    position: relative;
}

.forum-item-edited-info {
    color: #ffff00;
    margin-right: 12px;
}

.icon-actions {
    background-color: #ff00ff;
    margin: -5px 2px 0 0;
    padding: 4px 4px 0 4px;
    border: #000000 1px solid;
    box-shadow: 2px 2px 1px #888888;
    border-radius: 4px;
    FLOAT: right;
}

.forum-item-block .forum-item-header .icon-actions {
    margin: -5px 2px 0 0;
}

.forum-item-block .icon-actions {
    margin: 0;
    position: relative;
    z-index: 10;
}

.icon-actions:hover {
    cursor: pointer;
}

.forum-item-block {
    BACKGROUND-COLOR: #dcf5ad;
    MARGIN-BOTTOM: 1em;
    border: 1px solid #909090;
    padding: 5px;
    position: relative;
}
#account-control {
    TEXT-ALIGN: left
}
#account-control-form INPUT {
    WIDTH: 100%
}
.attachments-list img {
    max-width: none;
}
.attachments-container {
    display: flex;
}
.attachments-list {
    margin: 0 12px 0 0;
    overflow: hidden;
}
.attachments-dropzone {
    min-width: 100px;
    flex-grow: 1;
}
.attachments {
    MARGIN-BOTTOM: 1em
}
.attachments A {
    FONT-WEIGHT: normal
}
.attachments IMG {
    POSITION: relative; MARGIN-LEFT: 5px; TOP: 3px; MARGIN-RIGHT: 5px
}
#hp-header-logo A {
    COLOR: inherit
}
#members-list-table A {
    COLOR: inherit
}
A.link-button {
    FONT-SIZE: 90%
}
A.delete-action {
    COLOR: #ff246f
}
.logout-action {
    vertical-align: middle;
    float: right;
}
.flag-icon {
    vertical-align: middle;
    float: right;
    margin: 0 6px 0 6px;
}
.field-error-label {
    COLOR: red
}
.attachments-list-hiding-wrapper {
    background-color: #FFC0C0;
    padding: 8px;
    margin: 4px;
    text-align: center;
    display: none;
}
.oauth-container {
    margin: 8px 2px 0 2px;
    padding: 4px;
    border-radius: 4px;
    display: flex;
}
.oauth-button-wrapper {
    background-color: #f0f0f0;
    margin: 0 8px 0 0;
    padding: 0 4px;
    border-radius: 6px;
    border: 1px solid #909090;
}
.oauth-button {
    margin: 4px 0 0 0;
}
.oauth-button-wrapper:hover {
    background-color: #e0e0e0;
}
.currentday-notification-label {
    background-color: #FFC0C0;
    text-align: center;
    padding: 8px;
    border: 1px solid #909090;
    margin: 0 0 4px 0;
}
.news-item-attachments {
    MARGIN: 0.4em 0 0.8em 1em;
    font-size: 90%
}
.attachment-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.attachment-groups .news-item-attachment {
    margin-left: 16px;
}
.attachment-group-label {
    font-weight: bold;
}
.attachment-group-label span {
    color: #f0b030;
    margin-right: 8px;
}
.attachment-group-header {
    padding-bottom: 4px;
}
.attachment-group-header:hover {
    cursor: pointer;
    text-decoration: underline;
}
.login-failed-message {
    font-weight: bold;
    background: #c00000;
    color: #f0f0f0;
    padding: 4px;
    text-align: center;
}

IMG.thumbnail {
    margin: 4px 0 0 0;
    border: 2px solid black;
}

.news-item-attachment {
    width: fit-content;
}
.news-item-attachment A:hover {
    TEXT-DECORATION: none
}
.news-item-attachment IMG {
    POSITION: relative; TOP: 2px; MARGIN-RIGHT: 0.6em
}
.news-item-attachment A {
    MARGIN-BOTTOM: 0.3em
}
/* Full-text search: yellow highlight for the matched term and for a matched attachment. */
mark.search-hit {
    background-color: #ffff00;
    color: inherit;
}
.search-hit-attachment {
    background-color: #ffff00;
    border-radius: 3px;
}
.news-item-attachment.search-hit-attachment {
    padding: 2px 6px 4px 0;
}
A.attachment-thumb.search-hit-attachment {
    display: inline-block;
    padding: 3px;
}
.comments-link {
    background: linear-gradient(to right, #ff00ff, #ffD0ff);
    padding: 2px 0 2px 0;
    CLEAR: both
}
input, textarea, select, optgroup, button {
    font-family: inherit;
    font-size: inherit;
}
DD {
    MARGIN-BOTTOM: 0.3em; MARGIN-LEFT: 0
}
.normal-list DT {
    TEXT-ALIGN: justify; MARGIN-BOTTOM: 10px
}

.fieldset-hint {
    font-size: 85%;
    font-style: italic;
    margin: 0 0 12px 0;
}
.fieldset-warning-hint {
    text-align: center;
    padding: 8px;
    background-color: #ffff70;
    border: 1px solid #909090;
    margin-bottom: 8px;
}
.sortArrowLeft {
    margin-right: -3px;
    padding: 0;
    vertical-align: middle;
    font-size: 0.6em;
}

.sortArrowLeft:hover {
    text-decoration: inherit;
    color: white !important;
}

.sortArrowRight {
    margin-left: -3px;
    padding: 0;
    vertical-align: middle;
    font-size: 0.6em;
}

.sortArrowRight:hover {
    text-decoration: inherit;
    color: white !important;
}

.input-hint {
    font-size: 85%;
    font-style: italic;
    margin: 8px 0 0 0;
}

.input-hint-no-label {
    font-size: 85%;
    font-style: italic;
}

legend {
    font-weight: bold;
    padding: 0 12px;
}

form legend {
    font-size: 1.2em;
}
fieldset {
    margin-bottom: 8px;
    border: 1px solid #909090;
}

fieldset[less-border] {
    padding: 0;
    border-top: 1px solid #909090;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

fieldset[bottom-margin] legend {
    margin: 0 0 1em 0;
}

fieldset[less-border] legend {
    margin: 12px;
}
input:not([type=file]), textarea, select {
    border: 2px solid #c0c0c0;
    border-radius: 4px;
}
input:not([type=file]), textarea {
    padding: 4px;
}
.centered-form input:not([type=checkbox]):not([type=radio]):not([type=button]), .centered-form textarea {
    width: 90%;
}
input:focus, textarea:focus, select:focus {
    border: 2px solid #1c94c4;
    border-radius: 4px;
    background-color: #ffffd6;
    outline: none;
}
input[type="color"] {
    width: 64px !important;
    height: 40px;
    border: inherit;
    padding: 0;
}
.centered-form br{
    clear: left;
}
.label-input-wrapper {
    display: flex;
    margin: 0 0 12px 12px;
}
.label-wrapper {
    flex: 1 0 15%;
    min-width: 15%;
    text-align: right;
    padding: 0 12px 4px 0;
    font-weight: bold;
}
.input-wrapper {
    flex: 9 1;
}
.input-wrapper input {
    margin-top: -4px;
}

#login-container DL {
    MARGIN: 10px
}
#login-container #login-submit {
    TEXT-ALIGN: center
}
#login-container DT {
    TEXT-ALIGN: right; LINE-HEIGHT: 1.3em; MARGIN: 0 20px 0 0; WIDTH: 80px; FLOAT: left; CLEAR: right
}
#login-container DD {
    LINE-HEIGHT: 1.3em; MARGIN: 0 0 5px 85px; COLOR: #666
}
#login-container {
    MARGIN: 50px auto auto; WIDTH: 50%; HEIGHT: 50%;
    border: 2px solid rgb(0, 0, 0);
}
#header-login-form DL {

}
#header-login-form #login-submit {
    TEXT-ALIGN: center
}
.file-browser {
    border: medium none;
}
.form-actions {
    /*TEXT-ALIGN: left*/
    text-align: center;
}
.button-link {
    BACKGROUND-COLOR: transparent; COLOR: #00f; FONT-SIZE: 1em;
    CURSOR: hand;
    border: medium none;
    TEXT-DECORATION: underline
}
#header-login-authenticated {
    MARGIN-TOP: 10px; MARGIN-RIGHT: 10px
}
#header-login-form DT {
    TEXT-ALIGN: right; MARGIN: 3px 10px 0 0; WIDTH: 60px; FLOAT: left; CLEAR: right
}
#header-login-form DD {
    MARGIN-LEFT: 70px
}
#header-login-form INPUT {
    FONT-SIZE: 1em
}
#account-header {
    MARGIN-TOP: 0; FLOAT: right; FONT-SIZE: 90%; MARGIN-RIGHT: 20px
}
ul.formal li {
    margin: 0.3em 0 0.5em 0
}

ol.formal li {
    margin: 0.3em 0 0.5em 0
}

.actions {
    text-align: right;
    margin-bottom: 4px;
}

.form-actions INPUT:hover {
    background-color: #ff00ff;
    color: #101010;
    cursor: pointer;
}
.form-actions INPUT {
    background-color: #ff00ff;
    font-size: 100%;
    border: #000000 1px solid;
    margin: 2px 2px 2px 2px;
    padding: 4px 12px 4px 12px;
    box-shadow: 2px 2px 1px #888888;
    border-radius: 4px;
    color: white;
    width: auto !important;
    min-width: 10em;
}
.form-actions INPUT:disabled, .actions INPUT:disabled, .inline-actions INPUT:disabled {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
    background-color: #e0e0e0;
    color: #101010;
    cursor: not-allowed;
}
.form-actions INPUT:disabled:hover, .actions INPUT:disabled:hover, .inline-actions INPUT:disabled:hover {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

/* A.lazy-showall is a link, not a button (it opens the whole listing as a page), but it stands among these
   buttons and is dressed as one — here and in override_css.ftl, which themes the same three selectors. */
.actions INPUT:hover, .inline-actions INPUT:hover, A.lazy-showall:hover {
    background-color: #ff00ff;
    color: #101010;
    cursor: pointer;
}

.actions INPUT, .inline-actions INPUT, A.lazy-showall {
    background-color: #ff00ff;
    font-size: 100%;
    border: #000000 1px solid;
    margin: 2px 2px 2px 2px;
    padding: 4px 12px 4px 12px;
    box-shadow: 2px 2px 1px #888888;
    border-radius: 4px;
    color: white;
}

.adsense-Title {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
}

.adsense-TitleSmall {
    width: 100%;
    text-align: center;
}

.adsense-Wide {
    width: 100%;
    margin-bottom: 1em;
    text-align: -webkit-center;
    text-align: -moz-center;
}

.adsense-HalfBanner {
    width: 100%;
    margin-bottom: 5px;
}

.adsense-SidebarSquare {
    width: 100%;
    margin-bottom: 5px;
}

.adsense-Social {
    width: 100%;
    margin-bottom: 5px;
}

.adsense-MediumRectangle {
    margin: 0 4px 16px 16px;
    float: right;
    width: 300px;
}

.adsense-HalfBanner-replacement {
    TEXT-ALIGN: left;
    FONT-SIZE: 90%;
    background-color: #ff00ff;
    border: 1px solid #909090;
    padding: 4px;
    height: 50px;
}

.adsense-Social-replacement {
    TEXT-ALIGN: left;
    FONT-SIZE: 90%;
    background-color: #ff00ff;
    border: 1px solid #909090;
    padding: 4px;
    height: 24px;
}

.adsense-SidebarSquare-replacement {
    TEXT-ALIGN: left;
    FONT-SIZE: 90%;
    background-color: #ff00ff;
    border: 1px solid #909090;
    padding: 4px;
    height: 240px;
}

.adsense-MediumRectangle-replacement {
    TEXT-ALIGN: left;
    FONT-SIZE: 1em;
    background-color: #ff00ff;
    border: 1px solid #909090;
    padding: 4px;
    height: 240px;
}

.adsense-WideSkyscraper-replacement {
    TEXT-ALIGN: left;
    FONT-SIZE: 1em;
    background-color: #ff00ff;
    border: 1px solid #909090;
    padding: 4px;
    height: 590px;
}

.adsense-Wide-replacement {
    TEXT-ALIGN: center;
    background-color: #ff00ff;
    border: 1px solid #909090;
    padding: 4px;
    height: 80px;
}

.message-body {
    /*overflow: hidden;*/
}

.adsense-right-wide-skyscraper {
    width: 160px;
    float: right;
    margin: 0 8px 0 8px;
}

.adsense-right-superwide-skyscraper {
    width: 300px;
    float: right;
    margin: 0 8px 0 8px;
}

.adsense-sidebar {
    text-align: center;
}

.list-view-title {
    float: left;
}

.katnotes-container {
    display: flex;
    flex-direction: column;
}
.katnotes-type-wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 1em;
}
.katnotes-header {
    font-weight: bold;
    width: 12em;
    min-width: 12em;
}
.katnotes-list {
    display: flex;
    flex-direction: column;
    font-style: italic;
}
.katnotes-entry {
    display: flex;
    margin-bottom: 8px;
}

/* JQuery customizations */
#ui-datepicker-div {
    font-size:90%;
    /* jQuery UI gives the popup a low inline z-index; lift it above the menu bars (100/1000) and the
       mobile menu overlay (500) */
    z-index: 9999 !important;
}

.link-content {
    border: 1px solid #909090;
    margin: 8px;
    padding: 8px;
    background-color: #FFD590;
}
.menu-button a {
    color: white;
}
.menu-button a:hover {
    text-decoration: none;
}
.menu-button {
    margin: auto 8px auto 0;
    padding: 4px;
    border-radius: 4px;
    font-size: 21px;
}
.link-preview {
    text-decoration: underline;
}
.link-preview-2 {
    text-decoration: underline;
}
.help-content {
    clear: both;
    border: 1px solid #909090;
    margin: 8px;
    padding: 8px;
    background-color: #a0d0ff;
    font-size: 90%;
}
.menuitem-preview-wrapper {
    padding: 8px;
}

#menuitem-preview-label {
    color: white;
}

::-webkit-input-placeholder {
    color: #808080;
}
:-moz-placeholder { /* Firefox 18- */
    color: #808080;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #808080;
}
:-ms-input-placeholder {
    color: #808080;
}

/*
======================================================
KALENDAR
======================================================
*/
.kalendar-container *, .kalendar-container *:before, .kalendar-container *:after {
    transition: all 0.5s ease;
}
.kalendar-controls {
    display: flex;
    flex-direction: row;
    margin: 8px 0 8px 0;
}
.kalendar-controls a {
    color: initial;
    margin: auto 8px auto 8px;
}
.kalendar-cell-dummy {
    border: none;
}
.kalendar-cell:hover {
}
.kalendar-cell-dummy:hover {
    background-color: initial;
}
.kalendar-cell-item {
    padding: 4px;
    margin-bottom: 4px;
    border-radius: 3px;
}
.kalendar-arrow {
}
.kalendar-title {
    font-weight: bold;
    font-size: 120%;
}

.kalendar-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.kalendar-cell-header {
    padding-bottom: 4px;
    display: flex;
    flex-direction: row;
}
.kalendar-cell-body a {
    color: initial;
}
.kalendar-cell-body a:hover {
    text-decoration: none;
}
.kalendar-header-today {
    border-radius: 3px;
}
.kalendar-header {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.kalendar-header-day {
    flex: 1;
    padding: 8px;
    text-align: left;
    text-transform: uppercase;
}
.kalendar-header-action {
    font-size: 17px;
    margin: 0 0 0 auto;
    z-index: 2;
}
.kalendar-header-action a {
    color: #00A000;
    opacity: 0.1;
}
.kalendar-header-action a:hover {
    text-decoration: none;
    opacity: 1;
}
.kalendar-event-login-last {
    color: #3d924a;
    padding: 0;
    margin-bottom: 0;
}
.kalendar-settings {
    margin-bottom: 24px;
}
/*
======================================================
LAZY LOADING (infinite scroll)
======================================================
*/
.lazy-controls {
    float: right;
    margin-top: 4px;
}

.lazy-total {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    font-size: 90%;
    font-weight: bold;
    color: #808080;
}

/* "Show all" is a plain link to the whole listing that is dressed as one of the buttons beside it: it takes
   the shape and the customer's colours from the ".actions INPUT" rules, and only needs the box behaviour an
   inline anchor lacks. Its underline is already suppressed for anchors inside ".actions". */
A.lazy-showall {
    display: inline-block;
    text-align: center;
}

/* Zero-height marker the IntersectionObserver watches, and its counterpart on the final batch which only
   carries the refreshed count; neither must take up visible space. */
.lazy-sentinel, .lazy-end {
    height: 0;
    overflow: hidden;
}

.feedback-error {
    text-align: center;
    background-color: #FFD0D0;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #909090;
}
input.validation-error, div.validation-error {
    background-color: #FFD0D0;
}
textarea.validation-error {
    background-color: #FFD0D0;
}
table.validation-error {
    background-color: #FFD0D0;
    border: 2px solid #909090;
    border-radius: 2px;
}
.field-validation-hint {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: #C00000;
    font-size: 85%;
    margin: 0;
    transition: max-height 0.25s ease-out, opacity 0.25s ease-out, margin-top 0.25s ease-out;
}
.input-wrapper input.validation-error ~ .field-validation-hint,
.input-wrapper textarea.validation-error ~ .field-validation-hint {
    max-height: 20em;
    opacity: 1;
    margin-top: 4px;
    animation: validation-hint-blink 0.4s ease-in-out 1;
}

@keyframes validation-hint-blink {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.member-selector {
    margin: 4px;
    cursor: pointer;
}

.member-selector:hover {
    background-color:rgba(0, 0, 0, 0.1)
}

/*
======================================================
TOGGLE SWITCH
======================================================
*/
.toggle-switch {
    display: none;
}
.toggle-switch::-moz-selection, .toggle-switch:after::-moz-selection, .toggle-switch:before::-moz-selection, .toggle-switch *::-moz-selection, .toggle-switch *:after::-moz-selection, .toggle-switch *:before::-moz-selection, .toggle-switch + .toggle-switch-button::-moz-selection {
    background: none;
}
.toggle-switch::selection, .toggle-switch:after::selection, .toggle-switch:before::selection, .toggle-switch *::selection, .toggle-switch *:after::selection, .toggle-switch *:before::selection, .toggle-switch + .toggle-switch-button::selection {
    background: none;
}
.toggle-switch + .toggle-switch-button {
    outline: 0;
    display: block;
    width: 64px;
    height: 32px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.toggle-switch + .toggle-switch-button:after, .toggle-switch + .toggle-switch-button:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}
.toggle-switch + .toggle-switch-button:after {
    left: 0;
}
.toggle-switch + .toggle-switch-button:before {
    display: none;
}
.toggle-switch:checked + .toggle-switch-button:after {
    left: 50%;
}

.toggle-switch-flip + .toggle-switch-button {
    padding: 2px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    font-family: sans-serif;
    -webkit-perspective: 100px;
    perspective: 100px;
}
.toggle-switch-flip + .toggle-switch-button:after, .toggle-switch-flip + .toggle-switch-button:before {
    display: inline-block;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 32px;
    font-weight: bold;
    color: #fff;
    top: -2px;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 4px;
}
.toggle-switch-flip + .toggle-switch-button:after {
    content: attr(data-tg-on);
    background: #ff00ff;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.toggle-switch-flip + .toggle-switch-button:before {
    background: #c0c0c0;
    content: attr(data-tg-off);
}
.toggle-switch-flip + .toggle-switch-button:active:before {
    -webkit-transform: rotateY(-20deg);
    transform: rotateY(-20deg);
}
.toggle-switch-flip:checked + .toggle-switch-button:before {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.toggle-switch-flip:checked + .toggle-switch-button:after {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    left: 0;
    background: #ff00ff;
    color: white;
}
.toggle-switch-flip:checked + .toggle-switch-button:active:after {
    -webkit-transform: rotateY(20deg);
    transform: rotateY(20deg);
}
.centered-form .switch label {
    width: 80px;
    margin: 0;
}

.switch {
    position: relative;
    display: inline-block;
    height: 24px;
}

.switch input {
    display:none;
}

.switch label {
    float: left;
}
/*
======================================================
TOGGLE END
======================================================
*/
/* ======================================================
    TOUCH CHOICE
====================================================== */
.touch-choice-control {
    display: inline-block;
    margin: 0 0 4px 0;
    max-width: 100%;        /* Without this IE 11 fails to wrap options correctly */
}
.centered-form .touch-choice-control {
    max-width: 90%;        /* Without this IE 11 fails to wrap options correctly */
}
div.touch-choice-control.validation-error {
    background-color: #FFD0D0;
}
.touch-choice-value {
    min-width: 300px;
}
.touch-choice-value-nominwidth {
    min-width: initial;
}
.touch-choice-value-title {
    font-weight: bold;
}
.touch-choice-value-desc {
    font-size: 80%;
    font-style: italic;
}
.touch-choice-name-desc {
    font-weight: normal;
    font-size: 80%;
    font-style: italic;
}
.touch-choice-all-values {
    display: flex;
    flex-wrap: wrap;
}
.touch-choice-all-values .touch-choice-value {
    flex: 1 0 300px;
    margin: 4px;
}
.touch-choice-all-values .touch-choice-value-nominwidth {
    flex: initial;
}
.touch-choice-current-value {
    margin: 0 auto 8px 0;
    display: flex;
}
.touch-choice-current-value .touch-choice-value {
    background-color: #ff00ff;
    color: white;
}
.touch-choice-all-values .touch-choice-value {
    background-color: #e0e0e0;
}
.touch-choice-value {
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}
.touch-choice-value a {
    color: inherit
}
.touch-choice-control-compressed .touch-choice-all-values {
    flex-direction: column;
}
.touch-choice-control-compressed .touch-choice-value {
    flex: 0 0 auto;
    border-radius: 4px;
}
.touch-choice-control-compressed .touch-choice-value-title {
    font-weight: normal;
}
.touch-choice-current-value .touch-choice-value:hover {
    opacity: 0.9;
}
.touch-choice-selected-value {
    background-color: #ff00ff;
    color: white;
}
.touch-choice-selected-value .touch-choice-value-title {
    font-weight: bold;
}

/* ======================================================
 FLEX TABLES
====================================================== */
.small-flex-table .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 4px;
}
.small-flex-table .row:hover {
    background-color:rgba(0, 0, 0, 0.1)
}
.small-flex-table .row .cell img {
    vertical-align: middle;
}
.small-flex-table .row .cell {
    flex-grow: 0;
    padding-left: 8px;
}
.small-flex-table .row .text {
    flex-grow: 1;
}
.small-flex-table .row .icon {
    width: 24px;
}
.movable {
    cursor: move
}
.smallflex-dragging {
    background-color:rgba(0, 0, 0, 0.1)
}

/* ======================================================
    AUTH BOXES
====================================================== */
.block-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.features-block {
    z-index: 20;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 0 12px 0;
    border: 1px solid #909090;
}
.features-block-header {
    font-size: 24px;
    margin-bottom: 18px;
    padding: 12px;
    background-color: #ff00ff;
}
.features-block-detail {
    margin-bottom: 8px;
    text-align: justify;
}
.features-block-detail a {
    text-decoration: none;
}
.middle-block {
    margin: auto 0 auto 0;
    padding: 8px 0 8px 0;
}
.bottom-block {
    margin: auto 0 0 0;
    padding: 8px 0 0 0;
}
button {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
.OAuthProvider-error {
    background: #c00000;
    color: #f0f0f0;
    padding: 8px;
    text-align: center;
    margin: 0 8px 0 8px;
    border-radius: 8px;
}
.OAuthProvider-message {
    margin: 16px;
    text-align: center;
    font-size: 24px;
}
.OAuthProvider-button:hover {
    background-color: #ff00ff;
}
.OAuthProvider-graphics:hover {
    background-color: #e0e0e0;
}
.OAuthProvider-button {
    width: 300px;
    border: 1px solid #ff00ff;
    background-color: #ff00ff;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 0;
    -webkit-text-decoration-line: none;
}
.OAuthProvider-linked {
    cursor: initial;
    pointer-events: none;
}
.OAuthProvider-text {
    color: white;
    padding: 12px;
}
.OAuthProvider-graphics {
    width: 48px;
    padding: 8px 2px 4px 10px;
    background-color: white;
}
.auth-block {
    max-width: 520px;
}
.auth-left-block {
    margin: 16px 8px 8px auto;
}
.auth-right-block {
    margin: 16px auto 8px 8px;
}
/* ======================================================
    GENERAL OVERRIDES
====================================================== */
.polls-item-options .touch-choice-control {
    width: 100%;
}
.polls-item-options .touch-choice-all-values {
    flex-direction: column;
}
.polls-item-options .touch-choice-value {
    padding: 12px 16px 12px 16px;
}
.touch-choice-control-readonly .touch-choice-value:not(.touch-choice-selected-value):hover  {
    color: black;
    background-color: #e0e0e0 !important;
}
.touch-choice-control-readonly .touch-choice-selected-value {
    color: black;
}
.touch-choice-control-readonly .touch-choice-value {
    cursor: not-allowed;
}
/* ======================================================
    FLEX TABLES
====================================================== */
.flt-container {
    padding: 4px;
}
/*noinspection CssNoGenericFontName*/
.flt-sortable-desc:after {
    font-family: 'Glyphicons Halflings';
    content: "\e252 ";
    font-size: 80%;
    margin-left: 4px;
}
/*noinspection CssNoGenericFontName*/
.flt-sortable-asc:after {
    font-family: 'Glyphicons Halflings';
    content: "\e253 ";
    font-size: 80%;
    margin-left: 4px;
}
/*noinspection CssNoGenericFontName*/
.flt-sortable-inactive:after {
    font-family: 'Glyphicons Halflings';
    content: "\e150 ";
    color: #909090;
    font-size: 80%;
    margin-left: 4px;
}
.flt-header .flt-sortable {
    cursor: pointer;
}
.flt-header .flt-sortable:hover {
    background-color: #606060;
}
.flt-header .flt-sortable .span-div-clickable {
    background-color: inherit;
}
.flt-header {
    background-color: #5B4118;      /* TODO: override.css */
    color: white;
    font-weight: bold;
}
.flt-data-row {
    position: relative;
    border-bottom: 1px solid #D0D0D0;
}
.flt-header .flt-column {
    position: relative;
}
.flt-table-row{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 4px;
}
.flt-wrapper {
    display: flex;
    flex-direction: row;
}
.flt-column {
    flex-grow: 0;
    flex-shrink: 0;
    vertical-align: top;
}
.flt-data-row .flt-column span {
    position: relative;
    z-index: 2
}
.flt-data-row .flt-column a {
    position: relative;
    z-index: 2
}
.flt-col-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 4px;
}
.flt-col-header {
    padding-right: 4px;
    vertical-align: middle;
    text-align: left;
    display: flex;
    align-items: center;
}
.flt-col-fulltext {
    overflow-wrap: break-word;
    padding-right: 4px;
}
.flt-col-action, .flt-col-icons {
    z-index: 2 ;
}
.flt-col-action {
    margin: 0 0 0 4px;
    font-size: initial !important;
}
.flt-col-icons {
    margin: 0 4px 0 4px;
}
.flt-col-icons {
    cursor: default;
}
.flt-col-icons span {
    margin: 2px;
}
.flt-col-icons span:hover {
    color: #000000 !important;
}
/* ======================================================
    JS TREE
====================================================== */
#folder-tree-editor {
    display: flex;
    flex-direction: row;
}
#folder-tree-container {
    padding: 8px 12px 12px 0;
    border-right: 1px solid #D0D0D0;
    flex: 1 0 30%;
    max-width: 40%;
}
#folder-tree-settings {
    padding: 8px 8px 12px 8px;
    flex: 0 1 70%;
}
.folder-tree-icon {
    /*noinspection CssNoGenericFontName*/
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-size: 17px;
}
/* Fix for multiline node text */
.jstree-anchor {
    white-space : normal !important;
    height : auto !important;
    padding-right : 24px;
}
/* ======================================================
    MEDIA VIEW
====================================================== */
.mediaview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.mediaview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;         /* the zoomed image must be free to grow up to the full viewport width */
    min-width: 0;
}
.mediaview-title {
    color: white;
    margin: 8px auto 8px auto;
    text-align: center;
}
.mediaview-content-wrapper {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    display: flex;
    overflow: hidden;
}
.mediaview-content {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}
.mediaview-button {
    position: absolute;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    user-select: none;
    border-radius: 100px;
    background-color: rgba(0,0,0,0.5);
    z-index: 2001;
}
.mediaview-button-back {
    left: 20px;
}
.mediaview-button-next {
    right: 20px;
}
.mediaview-button-close {
    top: 20px;
    right: 20px;
    font-size: 2.5rem;
}
/* ======================================================
    MEDIA OVERRIDES
====================================================== */
@media screen and (max-width: 960px) {
    body {
        font-size: 10.5pt;
    }
    .block-container {
        flex-direction: column;
    }
    .features-block {
        margin: 0 auto 16px auto;
    }
    #auth-with-input {
        min-width: 300px;
    }
    .features-block-header {
        font-size: 16px;
    }
    .OAuthProvider-message {
        font-size: 16px;
    }
    #hp-quickbar {
        display: none;
    }
    .top-stripe-label {
        display: none;
    }
    #mobile-menu {
        display: flex;
    }

    #hp-classic-menu, #classic-menu-stripe {
        display: none;
    }

    #hp-header-logo img {
        width: 100%;
    }
    #hp-header-logo-shadow {
        display: none !important;
    }

    #google_translate_element {
        display: none;
    }
    .help-content {
        border: none;
        margin: 0 0 4px 0;
        padding: 8px;
        background-color: #a0d0ff;
        font-size: 90%
    }

    .demo-notification-area {
        margin: 0 2px 2px 2px;
    }

    .adsense-right-wide-skyscraper {
        display: none;
    }
    .adsense-Wide {
        margin-bottom: 16px;
    }
    .katnotes-type-wrapper {
        flex-direction: column;
    }
    .katnotes-header {
        width: 100%;
        min-width: unset;
    }
    .attachments-container {
        flex-direction: column;
    }
    .attachments-list {
        margin: 0 0 12px 0;
    }
    .attachments-dropzone {
        width: 100%;
        flex-grow: 1;
    }
    #folder-tree-editor {
        flex-direction: column;
    }
    #folder-tree-container {
        order: 2;
        padding: 8px 4px 12px 4px;
        border-right: none;
        border-bottom: 1px solid #D0D0D0;
        flex: auto;
        max-width: none;
    }
    #folder-tree-settings {
        order: 1;
        padding: 8px 4px 12px 4px;
        flex: auto;
    }
    .news-item-header {
        padding-bottom: 6px;
    }
    .mediaview-button-back {
        left: 0;
    }
    .mediaview-button-next {
        right: 0;
    }
    .mediaview-button-close {
        top: 0;
        right: 0;
    }

}
@media screen and (max-width: 800px) {
    .poll-graph-wrapper-iframe {
        width: 80px;
        height: 80px;
    }
    .poll-graph-composite {
        flex-direction: column;
    }
    .poll-graph-image {
        order: 1;
    }
}
@media screen and (min-width: 960px) {
    body {
        font-size: 12pt;
    }
    #fs-mobile-search {
        display: none;
    }
    #mobile-menu {
        display: none;
    }
    #hp-quickbar {
        text-align: left;
        width: 258px;       /* includes the margin as we're using box-sizing: border-box */
        padding-right: 8px;
        float: left;
        margin-left: 8px;
        font-size: 90%;
        /* Stays with the reader as the listing beside it scrolls. The "top" here is only the resting place
           a short column keeps; for one taller than the window updateQuickbarFollow() in app.js drives the
           offset, letting the column travel with the page and stopping it once the edge the reader is
           heading for is on screen — its foot going down, its head going back up.
           Deliberately neither capped nor scrollable, whatever its height. The content box is exactly as
           wide as the 250px sidebar ad it has to hold (AdSupport.Type.SidebarSquare, and the fixed 250px
           "ins" in the SidebarSquare.jspf ad snippets), so it has no width to spare: a vertical scrollbar
           takes its width out of the content box, the ad no longer fits, and a horizontal scrollbar
           follows it. "overflow-y: auto" brings that second bar along even where plain "visible" would
           merely have let an oversized ad spill, because a non-visible overflow on one axis turns
           "visible" on the other into "auto". That is how the "max-height" this rule used to carry put two
           scrollbars in the sidebar of every ad-bearing site — the cap was only ever there to make the
           column short enough to pin, which is the job app.js now does without shortening anything. */
        position: sticky;
        top: var(--pinned-top);
        z-index: 20;
    }
    #hp-classic-menu {
        width: 100%;
        display: block;
        /* No bottom margin: the gap below the bar is .pinned-stripe, which outlives the bar. */
    }
    #mobile-menu-stripe {
        display: none;      /* follows #mobile-menu */
    }
    #google_translate_element_bottom {
        display: none;
    }
}

@media screen and (orientation: landscape) {
    .notification-area-container {
        flex-direction: row;
    }
    .notification-area-message {
    }
    .notification-area-actions {
        margin-left: auto;
    }
}

@media screen and (orientation: portrait) {
    .notification-area-container {
        flex-direction: column;
    }
    .notification-area-message {
    }
    .notification-area-actions {
        text-align: right;
    }
}

/*
-------------- MOBILE FORMS HOTFIXES ---------------
 @media screen and (max-width: 960px) {
 @media screen and (max-width: 1960px) {
*/
@media screen and (max-width: 960px) {
    form.centered-form label, form.centered-form input:not(.toggle-switch) {
        display: table-cell;
    }
    form.centered-form label {
        float: none;
        margin: 0;
        text-align: left;
        width: 100%;
    }
    form.centered-form input, form.centered-form textarea, form.centered-form table {
        width: 100%;
    }
    form.centered-form input, form.centered-form textarea, form.centered-form table {
        width: 100%;
    }
    form.centered-form div.fieldset-hint {
        margin: 0;
        width: 100%;
    }
    form.centered-form table tr td label {
        width: auto;
    }
    form.centered-form table tr td input[type="radio"], form.centered-form table tr td input[type="checkbox"] {
        float: left;
        text-align: left;
        width: auto;
    }
    form.centered-form div.form-actions input {
        width: auto;
    }
    form.centered-form div.touch-choice-control {
        margin: 0;
    }
    .label-input-wrapper {
        flex-direction: column;
        margin: 0 0 12px 0;
    }
    .label-wrapper {
        flex: auto;
        text-align: left;
    }
    .input-wrapper input {
        margin-top: 0;
    }
    .centered-form input:not([type=checkbox]):not([type=radio]):not([type=button]), .centered-form textarea {
        width: 100%;
    }
}

/* Paper has no viewport to pin anything to: a sticky box would print once, at the top of the first
   page, and the scrollable heads would print truncated to whatever happened to fit on screen. */
@media print {
    #mobile-menu, #hp-classic-menu, #hp-quickbar, .pinned-head {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .pinned-stripe {
        display: none;      /* it only means anything next to a menu bar, and those are not printed */
    }
}

#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .8);
    color: white;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    padding: 4px 4px;
    font-size: 80%;
}
.chartjs-tooltip-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border: 1px solid white;
    border-radius: 2px;
}
#whole-page-cover {
    position:fixed;
    top: 0; left: 0;
    width:100%;
    height:100%;
    display: none;
    background: #606060;
    opacity: 0.50;
    z-index: 10000;
}
.wpc-spinner {
    position:fixed;
    top: 50%;
    left: 50%;
    border: 16px solid #f0f0f0;
    border-top: 16px solid #909090;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    animation: spin 2s linear infinite;
    z-index: 10001;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* **********************************************************
   xmas-lights
   ********************************************************** */
.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}
.lightrope li {
    position: relative;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 12px;
    height: 20px;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    -webkit-animation-name: flash-1;
    animation-name: flash-1;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
.lightrope li:nth-child(2n+1) {
    background: #ffff00;
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 255, 0, 0.5);
    -webkit-animation-name: flash-2;
    animation-name: flash-2;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
}
.lightrope li:nth-child(4n+2) {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    -webkit-animation-name: flash-3;
    animation-name: flash-3;
    -webkit-animation-duration: 2.1s;
    animation-duration: 2.1s;
}
.lightrope li:nth-child(odd) {
    -webkit-animation-duration: 2.8s;
    animation-duration: 2.8s;
}
.lightrope li:nth-child(3n+1) {
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
}
.lightrope li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 10px;
    height: 9.3333333333px;
    border-radius: 3px;
    top: -4.6666666667px;
    left: 1px;
}
.lightrope li:after {
    content: "";
    top: -14px;
    left: 9px;
    position: absolute;
    width: 52px;
    height: 18.6666666667px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}
.lightrope li:last-child:after {
    content: none;
}
.lightrope li:first-child {
    margin-left: -40px;
}

@-webkit-keyframes flash-1 {
    0%, 100% {
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }
    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@keyframes flash-1 {
    0%, 100% {
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }
    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}
@-webkit-keyframes flash-2 {
    0%, 100% {
        background: #ffff00;
        box-shadow: 0px 4.6666666667px 24px 3px #ffff00;
    }
    50% {
        background: rgba(255, 255, 0, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 255, 0, 0.2);
    }
}
@keyframes flash-2 {
    0%, 100% {
        background: #ffff00;
        box-shadow: 0px 4.6666666667px 24px 3px #ffff00;
    }
    50% {
        background: rgba(255, 255, 0, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 255, 0, 0.2);
    }
}
@-webkit-keyframes flash-3 {
    0%, 100% {
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }
    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}
@keyframes flash-3 {
    0%, 100% {
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }
    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

#xmas-lights {
    display: none;
}

/* **********************************************************
   END xmas-lights
   ********************************************************** */