// $Id$
//****** Misc. Global Classes (layout and style) ****/
// highlight on interface text to draw attention;
// also highlight on "button" links, e.g. if there are some comments it
// highlights the "button" link in #page-bar under the content of the wiki pages

// (this and the following color-related selectors are moved to _tiki-selectors.scss)
// .searchresults blockquote em,
// .highlight,
// .button.highlight a,
// .button a.highlight {
//     background: $state-danger-bg;
//     color: $state-danger-text;
// }
//
// .button a.highlight:hover {
//     background: darken($state-danger-bg, 15%);
// }
// Negative margin to offset 0.75rem padding in row so, ex, backgrounds go full width (replaces .mx--15px)
.tiki .mx-n2point5 {
    margin-left: ($spacer * -0.75);
    margin-right: ($spacer * -0.75);
}
// Avoid long URLs overflow and wrap them into several lines instead
a {
    word-wrap: break-word;
}

// Since button background is actually applied to the link within the button, apply button highlight to same bg area as normal button state .
.button.highlight {
    background: inherit;
}

// Highlight effect is just visual distinction, so no need for block element.
span.highlight {
    padding: 0 .3em;
}

// Border and background should "shrinkwrap" to text size.
div.highlight {
    display: inline-block;
}

// ...except for admin preference blocks
div.highlight.adminoptionbox {
    display: block;
    padding: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

.rating .highlight {
    padding: inherit;
}

.ratingResultAvg {
    font-weight: bold;
}

.articletitle span.ratingResultAvg {
    font-weight: normal;
}

.rbox > div.highlight {
    display: block;
    font-weight: bold;
}

.wikiactions .icon.highlight {
    border-radius: .2rem;
    width: 1.8rem;
    padding: .2rem;
}

// Input fields with browse file type - fixes the button height glitch in FF
input[type="file"] {
    height: auto;
}

// Input fields auto-fill/
// Webkit-based browser specific (Google Chrome, Chromium, etc.)
// input:-webkit-autofill {
//     background-color: $input-bg !important; /* needs important because Chrome has it already important */
//     background-image: none !important;
//     color: $input-color !important; /* the Google guys forgot the number-one rule... when they specify background they should specify forgeround color too ;) */
// }

// Support for orphans & widows on block level elements (useful when printing or when using columns of text)
// More info at https://css-tricks.com/almanac/properties/w/widows/
address,
blockquote,
dd,
dl,
dt,
h1, h2, h3, h4, h5, h6,
li,
nav,
noscript,
ol,
p,
pre,
ul {
widows: 3;
orphans: 3;
}

// Put together all the one-liners which should not display
#attzone,
#bottom_modules .box-rsslist br,
#comzone,
#edithelpzone,
#forumpost,
#polledit,
#pollzone,
#rules-copy-panel,
#tiki-clean a.editplugin,
.collapsed ul,
    // .comment.archived,
.convene-no img,
.s5-slide a.editplugin,
.tabs br,
.wiki-edithelp,
.wpfade-div-plain,
form[name=editpageform] .mb-3 .tab-content .alert-warning {
    display: none;
}

#attzoneopen,
#comzoneopen,
#pollopen,
.flex-column.collapsing, // to prevent jumpy behavior of flex-column collapsing sub-items in vertical menus
.all .comment.archived {
    display: block;
}

// Ajax, jquery. etc.
// Ajax Loading Overlay
#ajaxLoadingBG {
    display: none;
    z-index: 9999;
    position: absolute;
    //    background: transparent url('#{$imagePathToImgDir}overlay-light.png');
}

#ajaxLoading {
    display: none;
    z-index: 10000;
    position: absolute;
    text-align: center;
    vertical-align: top;
    height: 80px;
    width: 220px;
    font-size: 2em;
    font-weight: bold;
    //    color: $gray-300;
    //    background: transparent url('#{$imagePathToImgDir}loading-light.gif') no-repeat 50% 50%;
}

// cookie consent style
#cookie_consent_div {
    //    padding: $alert-padding;
    margin: 1em;
    //    border: 1px solid $alert-info-border;
    //    color: $alert-info-text;
    //    background-color: $alert-info-bg;
}

#cookie_consent_div.banner {
    position: fixed;
    //    padding: $alert-padding;
    margin: 0;
    //    border: 1px solid $alert-info-border;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1100;
}

#cookie_consent_div .description {
    font-style: normal;
    font-size: 1.1em;
//    font-weight: bold;
}

// cookie settings module
.box-cookiesettings {
    position: fixed;
}

.box-cookiesettings.none {
    position: unset;
}

.box-cookiesettings.topleft {
    left: 0;
    top: 0;
    border-bottom-right-radius: $border-radius;
}

.box-cookiesettings.topright {
    right: 0;
    top: 0;
    border-bottom-left-radius: $border-radius;
}

.box-cookiesettings.bottomleft {
    left: 0;
    bottom: 0;
    border-top-right-radius: $border-radius;
}

.box-cookiesettings.bottomright {
    right: 0;
    bottom: 0;
    border-top-left-radius: $border-radius;
}

// print mode only - to make sure print templates will use and print on seamless white bg color
// html#print {
//     background: #ffffff;
//     color: #000000;
// }

body.db_error {
    background: none;
}

body.fullscreen {
    text-align: left;
    //    background: #ffffff;
}

#fullscreenbutton {
    background-color: rgba(0, 0, 0, 0.25);
    border-bottom-left-radius: 100%;
    padding: 5px 5px 15px 15px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}

// When Fullscreen is activated, shift menu toggle button to the left to avoid overlapping the full-screen button
#fullscreenbutton ~ nav .navbar-toggle { right: 42px; }

#show-errors-button {
    z-index: 1024;
}

#errors {
    z-index: 1023;
}

// Misc. Global Classes (layout and style)

#edithelpzone code {
    font-size: 1.2em;
}

// .attention {
//     color: $alert-danger-text;
// }

// .openid_url {
//     background: #ffffff url('#{$imagePath}icons/login-OpenID-bg.gif') 1px 1px no-repeat;
// }

.bannertext {
    font-size: .95em;
    text-decoration: none;
}

#debugconsole {
    //    background: $navbar-inverse-bg;
    //    color: $navbar-inverse-link-color;
    padding: 5px;
    //    border: 2px solid $navbar-inverse-border;
    font-size: 1em;
    position: absolute;
    top: 0;
    left: 20px;
    width: 60%;
    height: auto;
    z-index: 1000;
}

// #debugconsole form {
//     color: $navbar-inverse-link-active-bg;
// }
//
// #debugconsole a {
//     color: $navbar-inverse-link-active-color;
// }

.cachedStatus,
.mini {
    font-size: .9em;
}

/* Icons */
a.icon,
img.icon {
    border: none;
    //    background: transparent;
}

//a .icon:not(.icon-help,.icon-reset) { Commented out because it made heading link icons much too large.
//    font-size: 1.2em;
//}

.nav a .icon.icon-menuitem {
    font-size: 0.8em;
}

// Anchor icon
a.tiki_anchor {
    font-size: 60%;
    opacity: 0;
}

h1:hover a.tiki_anchor,
h2:hover a.tiki_anchor,
h3:hover a.tiki_anchor,
h4:hover a.tiki_anchor,
h5:hover a.tiki_anchor,
h6:hover a.tiki_anchor {
    opacity: 1;
}

// So a span can act like a link and avoid the width of a button (e.g., for action icons)
span.btn-link {
    cursor: pointer;
}

// So form submit buttons with icons and text used in popover actions can look just like links
// .dropdown-item, Sorry but this is affecting *all* dropdown-items; scope should be narrowed. - G_C-L
.popover button.btn-link {
    font-size: $popover-font-size;
}

// make "menu" icons fixed width
.popover .iconmenu .icon,
.popover a.link-list .icon,
.popover button.btn-link.link-list .icon,
.dropdown-item .icon,
.dropdown-item .iconmenu .icon,
.dropdown-item a.link-list .icon,
.dropdown-item button.btn-link.link-list .icon {
    font-size: $popover-font-size;
    text-align: center;
    width: 1.25em;
}

.popover button.btn-link.link-list,
// .popover button.btn-link.link-list .icon, <- this broke the FontAwesome lock and unlock icons in templates/fgal_context_menu.tpl because of the font-weight: normal definition below
.dropdown-item button.btn-link.link-list,
.dropdown-item button.btn-link.link-list .icon {
    text-transform: initial;
    text-align: start;
    font-weight: normal;
    border: none;
    border-radius: 0;
    padding: 0;
}

.popover button.btn-link.link-list,
.dropdown-item button.btn-link.link-list {
    vertical-align: top;
}

// Create whitespace below buttons when the row wraps added by Gary on July 31, 2018.
.t_navbar.mb-3 > .btn {
    margin-bottom: 6px;
}

.t_navbar.btn-group {
    flex-wrap: wrap;
}

// div #metadata fieldset.tabcontent, div #metadata div.tabs {
//     background-color: transparent;
// }

.magnify {
    float: right;
    padding-top: 2px;
}

// Modal submit buttons need to be hidden to avoid blink
.modal-body div.submit {
    display: none;
}

// ColorBox
// #cboxTitle {
//     background-color: $body-bg;
// }
//
// #captchaImg {
//     border: 1px solid $panel-default-border;
// }

/* fix for lists with empty dl items, e.g. tracker items
 * thanks hayksaakian on https://github.com/twbs/bootstrap/issues/4062
 * to be removed when we update to bs 3.2
 */
.dl-horizontal > dd:after {
    display: table;
    content: "";
    clear: both;
}

//Title for bootstrap dropdowns that drop down upon hover
.dropdown-title {
    text-align: center;
    padding-right: 5px;
    padding-left: 5px;
    opacity: .75;
}

.jscal input[type=text] {
    width: calc(100% - 26px);
    display: inline-block;
    margin-right: 2px;
}

//date picker dropdowns
select.form-control.date {
    padding: 0;
    margin-left: 0;
    width: auto;
    display: inline;
}

//CSS-only Masonry Grid Layout for various items
.masonry {
    -moz-column-count: auto;
    -webkit-column-count: auto;
    column-count: auto;
    -moz-column-gap: 1.5rem;
    -webkit-column-gap: 1.5rem;
    column-gap: 1.5rem;
    -moz-column-width: 21rem;
    -webkit-column-width: 21rem;
    column-width: 21rem;
    font-size: 0; /* this is to prevent displaying of white space rendered by unwanted nbsp e.g. in plugin LIST */
}
.masonry > * {
    display: inline-block;
    font-size: initial; /* this is to reset the zero font size setting above */
    width: 100%;
}
.masonry * {max-width: 100%}
.masonry > br, .masonry > .editplugin {display: none !important}
.masonry > * .img-fluid,
div[style*="text-align: center"] .img-fluid {margin: auto}

.masonry.nogaps {-moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0}
.masonry.nogaps > a, .masonry.nogaps > img, .masonry.nogaps img {display: block}

.masonry.flex-horiz {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.masonry.flex-horiz > * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0;
    width: auto;
}
.masonry.flex-horiz * {
    max-width: 100%;
}

//Social login buttons
.social-buttons {
    margin: 0 auto;
    width: 250px;
}
.btn.btn-social {
    margin-bottom: $padding-y;
    display: block;
}
.btn-social.btn-facebook {
    @include button-variant(#ffffff, #3b5998, darken(#3b5998,5%)); //facebook blue is: #3b5998
}
.btn-social.btn-linkedin {
    @include button-variant(#ffffff, #4875B4, darken(#4875B4,5%)); //linkeidn blue is: #4875B4
}

#col1 {
    z-index: 1;
}

textarea.wikiedit {
    z-index: 2;
}

.dropdown-menu > li > .btn { text-align: left; }

.modal-dialog #alert-wrapper .alert {
    margin-bottom: 0;
}

// Workaround for Firefox bug (https://bugzilla.mozilla.org/show_bug.cgi?id=504622) Todo remove when Firefox 53 is released
//@-moz-document url-prefix() {
//    fieldset {
//        display: table-cell;
//    }
//}

// Reduce visual size of external link icon to a little over the x height of text
.tiki .wiki.external + .icon-link-external,
.tiki .wiki.external .icon-link-external {
    font-size: 70%; margin-left: 1px;
}

.side-col-toggle { z-index: 2; }
.tiki .side-col-toggle + #col1 {
    margin-top: $tiki-top-margin-compensation-for-side-col-toggle;
    padding-top: $line-height-base;
}

div.categbar {
    text-align: right;
    clear: both;
}

// Special class to make semi-transparent elements and make them opaque on mouse over
.opacity50 {opacity: .5; transition: opacity 1s !important}
.opacity100, .opacity50:hover, .opacity50:focus {opacity: 1}

.sitelogo .btn {display: none}
.sitelogo:hover .btn {display: block}

// Special links in "More" button of page-bar
.dropdown-menu > .btn-link {
    padding: 0.25rem 1.5rem;
}

// Auto unique-numbered ordered lists (for ordered lists wrapped in class="uol" wrapper (or when enabled globally) to generate unique "chapter like" numbering X.Y.Z)
.uol {
    margin-left: 2rem;
}
.uol ol:not(.media-list), ol.uol {
    counter-reset: item;
}
.uol ol:not(.media-list) > li { display: block; } // negative text-indent here simulates the common ol rendering indentation
.uol ol:not(.media-list) > li:before { content: counters(item, ".") ".\0000a0"; counter-increment: item; margin-left: -3rem; } // \0000a0 is nbsp Unicode escaped
.uol ol:not(.media-list) > li ol > li:before { content: counters(item, ".") "\0000a0"; counter-increment: item } // here we remove the last dot (looks better?)

.nouol ol > li { display: list-item; text-indent: 0 }
.nouol ol > li:before, .nouol ol > li ol > li:before { content: "" }

// default styling for <blockquote> element (#7093)

blockquote {
    padding: .5rem 1rem;
        margin: .8rem 0;
}

// Improve horizontal spacing of breadcrumb icons and separators
.breadcrumb-item { padding-right: 0.5rem;}
.breadcrumb .tips { padding-right: 0.5rem;}

// Vertical Smartmenus hack, until a proper solution is committed
// For a vertical menu, assign a bootstrap menu, type "horiz", and add "smartmenu_vert" as containing class.
.smartmenu_vert .navbar-nav { flex-direction: column; }
@media (min-width: 768px) {
    .smartmenu_vert .navbar-nav .dropdown-menu { margin-left: 6rem !important; margin-top: -1.8rem !important; }
}
.smartmenu_vert .navbar, .smartmenu_vert .navbar.bg-light, .smartmenu_vert .navbar.bg-dark { background: transparent !important; }
.smartmenu_vert .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow {
    margin-left: .255em;
    vertical-align: .0em;
    border-left: .3em solid;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
}