/*
 * Additions on top of AdminLTE 4 / Bootstrap 5 for all layouts.
 * The shared server side elements (shared/web/elements) emit Bootstrap markup themselves,
 * so this file only contains what Bootstrap does not provide.
 */

/* ---- sidebar / header ---- */
.app-sidebar .nav-link.active { background-color: rgba(255, 255, 255, .15); }
.app-sidebar .nav-header:empty { padding: .25rem 0; }

/* ---- generic content ---- */
.app-content { font-size: .95rem; }
.nowrap { white-space: nowrap; }
.important { color: red; }
.header { font-weight: bold; }
span.hint { color: gray; font-size: .8rem; }
span.red { color: red; }
.inactive { color: gray; }
pre, pre * { font-family: "Courier New", Courier, monospace; }
form { margin: 0; }
img { border: none; vertical-align: middle; }
/* icon buttons replacing the former image buttons, see IconButton */
.icon-btn { vertical-align: middle; line-height: 1; }
.icon-btn + .icon-btn { margin-left: .25rem; }
.timeInput { text-align: center; }
#SelectTable { min-height: 200px; }
#selectMemberCount { float: right; color: gray; }

/* "page is loading" overlay, see showLoading()/hideLoading() */
#Loading {
    position: fixed; z-index: 64000; top: 40%; left: 0; right: 0; height: 100px;
    text-align: center; font-family: monospace; font-weight: bold;
    background: rgba(242, 242, 242, .8) url(/img/layout/loading.gif) no-repeat center;
}

/* ---- messages ---- */
.highlighted, .error:not(td):not(tr) {
    padding: .5rem .75rem; margin-bottom: .5rem; color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle); border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
}
.errortext { color: var(--bs-danger); font-weight: bold; font-size: .9rem; }

/* ---- DBTable / AutoTable ---- */
.DBTable .pos { font-size: 12px; display: inline-block; }
.DBTable th.orderby { background-color: var(--bs-primary-bg-subtle); }
.DBTable td.orderby { background-color: var(--bs-primary-bg-subtle); }
.DBTable .Total td { background-color: var(--bs-dark) !important; color: var(--bs-light); }
.DBTable .Group { font-weight: bold; padding-top: 6px; white-space: nowrap; }
.navigation { font-size: .9rem; }
.Title, .AutoTable .Title { font-weight: bold; padding-left: 0; }
table.ListTable td, table.ListTable th { vertical-align: top; }
.AutoTable .spacer { height: 12px; }
/* left spacer column of the AutoTable, optionally with the marker for mandatory fields */
td.lsp, td.lsp_mand { padding: 0; width: 20px; min-width: 20px; }
td.lsp_mand { background: url(/img/def/star.gif) no-repeat 14px 0.5em; }
.NumInputTable { border: 0; display: inline; vertical-align: bottom; }
.NumInputTable td { padding: 0; text-align: right; vertical-align: middle; }
textarea[rows="1"] { height: 20px; }

/* accounting output */
.Level0 { font-weight: bolder; font-size: 120%; }
.Level1 { font-weight: bolder; font-size: 110%; }
.Level2 { font-size: 110%; }
.Negativ { color: red; }
.Total { text-decoration: underline; font-weight: bold; }
.Invalid { text-decoration: line-through; color: #999; }

/* ---- member select ---- */
.membersLink { max-height: 100px; overflow-y: auto; margin-bottom: 10px; }
.membersLink:empty { margin-bottom: 0; }
.MemberselectLeft, .MemberselectRight { min-width: 200px; padding: 3px 0 0 3px; }

/* ---- file upload element ---- */
div.fileUpload { padding: 0; margin: 0; }
.fileUpload, .fileUploadStatus { font-size: .9rem; }
.fileUploadStatus {
    position: relative; vertical-align: middle; padding: 2px 2px 2px 4px;
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
.fileUploadStatus div { color: #fff; background-color: #000; white-space: nowrap; overflow: hidden; }
.fileUploadStatus div.updating {
    position: absolute; left: 2px; top: 2px; right: 2px; padding: 0 0 0 2px;
}

/* ---- help system ---- */
.helptitle { font-weight: bold; color: #fff; background-color: #333; padding: 2px 10px 4px; }
.helptext { text-indent: 10px; }
.helptext td { text-indent: 0; }
.helpbottom td { text-align: left; padding-left: 3px; padding-right: 3px; }
body.Help.Content { margin: 4px; }
html.Help.Close { height: 100%; background-color: #333; }
#helpfooter { background-color: #333; text-align: center; padding-top: 8px; }

/* ---- public pages (Static layout) ---- */
.DataProtection .Title { display: block; font-weight: bold; }
.static #Content .datenschutz li { list-style: none; }
.static .site-logo { display: inline-block; width: 200px; height: 40px; background: url(/img/layout/logo.gif) no-repeat left center; background-size: contain; }

/* ---- sysadmin pages ---- */
.DatabaseUpdater td.green { background-color: #72b572; }
.DatabaseChecker .Table td { padding: 2px 3px; background-color: grey; }
.DatabaseChecker .Table .TableHeader td { background-color: #333; color: #fff; font-weight: bold; }
.DatabaseChecker .Table .even td { background-color: #F2F2F2; }
tr.mismatch td { color: red; }

/* ---- Superuser layout ---- */
#ClubSelection { position: fixed; top: 0; left: 0; width: 100%; z-index: 1030; }
#FrameContainer { width: 100%; height: 100vh; padding-top: 3.5rem; }
#MainFrame { width: 100%; height: 100%; border: 0; }

/* ---- login (markup comes from the shared LoginServletBase) ---- */
body.cm-login .login-box { width: 420px; max-width: 95%; }
body.cm-login #SysAdminContent p { margin: 0 0 .5rem; }
body.cm-login #SysAdminContent hr { margin: 1rem 0; }

/* ---- user menu in the header (no user picture available yet, so an icon is shown) ---- */
.user-menu .user-avatar { line-height: 1; vertical-align: middle; }
.user-menu .user-avatar-sm { font-size: 1.5rem; margin-right: .25rem; }
.user-menu > .dropdown-menu > li.user-header > .user-avatar { display: block; font-size: 5rem; }

/* ---- searchable dropdowns (Tom Select, Bootstrap 5 theme) ---- */
.ts-wrapper.dropdown-select, .ts-wrapper.dropdown-select-required { min-width: 20rem; }
.ts-dropdown .optgroup-header { font-weight: bold; }
.ts-dropdown .no-results { padding: .375rem .75rem; color: var(--bs-secondary-color); }

/* ---- date inputs (flatpickr + calendar button) ---- */
.dateinput-group > input.dateinput { flex: 0 0 auto; width: 9rem; }
.flatpickr-calendar {
    background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow); font-family: inherit;
}
.flatpickr-calendar:before, .flatpickr-calendar:after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: transparent; color: var(--bs-body-color); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--bs-body-color); }
.flatpickr-day { color: var(--bs-body-color); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.flatpickr-day.today { border-color: var(--bs-primary); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--bs-secondary-color); }
.flatpickr-weekwrapper span.flatpickr-day { color: var(--bs-secondary-color); }
.ts-wrapper.w-auto { display: inline-block; vertical-align: middle; }


.ui-widget-content
{
    border-color: #dddddd;
    background-color: #eeeeee;
    color: #333333;
}
.ui-widget-content a {
    color: #333333;
}

.ui-widget-header
{
    border-color : #339900;
    background-color: #339900;
    background-image: url("/img/default/jquery/ui-bg_gloss-wave_35_339900_500x100.png");
    color: #ffffff;
}
.ui-widget-header a {
    color: #ffffff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default
{
    border-color: #cccccc;
    background-color: #f6f6f6;
    color: #339900;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited
{
    color: #339900;
}

.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-color: #339900;
    background-color: #dddddd;
    color: #339900;
}
.ui-state-hover a,
.ui-state-hover a:hover
{
    color: #339900;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active
{
    border-color: #235809;
    background-color: #ffffff;
    color: #339900;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited
{
    color: #339900;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight
{
    border-color: #339900;
    background-color: #96f467;
    color: #363636;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a
{
    color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error
{
    border-color: #cd0a0a;
    background-color: #b81900;
    color: #ffffff;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a
{
    color: #ffffff;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text
{
    color: #ffffff;
}

.ui-menu .ui-menu-item + .ui-menu-item {
    border-top: 1px solid #339900;
}


/* Sortable */

ul.ui-sortable
{
    display: inline-block;
}
.ui-autocomplete {
    position: absolute;
    cursor: default;
    max-height: 300px;
    overflow-y: auto;
}

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/*
 * jQuery UI Menu @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
    background: none;
}

.ui-menu .ui-menu-item + .ui-menu-item {
    border-top: 1px solid #339900;
}

.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
.pass-graybar {
  height: 3px;
  background-color: #CCC;
  width: 100%;
  position: relative;
}

.pass-colorbar {
  height: 3px;
  background-image: url(/js/password/passwordstrength.jpg);
  position: absolute;
  top: 0;
  left: 0;
}

.pass-percent, .pass-text {
  font-size: 1em;
}

.pass-percent {
  margin-right: 5px;
}

/* following styles belong to Html-Output by Accounting */
.Level0       { font-weight : bolder; font-size: 120% }
.Level1       { font-weight : bolder; font-size: 110%  }
.Level2       { font-size: 110% }
.Positiv      { }
.Negativ      { color: red; }
.Total		  { text-decoration: underline; font-weight: bold; }
.Invalid      { text-decoration: line-through; color: #999999; }



/*
.DBTable tr.highlight td {background-color: #A8CC96}

*/
.cke_autocomplete_panel li{ background: none;}
#selectMemberCount
{
    float: right;
    color: gray;
}