/*GRB*

    Gerbera - https://gerbera.io/

    gerbera.css - this file is part of Gerbera.

    Copyright (C) 2005 Gena Batyan <bgeradz@mediatomb.cc>,
                       Sergey 'Jin' Bostandzhyan <jin@mediatomb.cc>

    Copyright (C) 2006-2010 Gena Batyan <bgeradz@mediatomb.cc>,
                            Sergey 'Jin' Bostandzhyan <jin@mediatomb.cc>,
                            Leonhard Wimmer <leo@mediatomb.cc>

    Copyright (C) 2016-2026 Gerbera Contributors

    Gerbera is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License version 2
    as published by the Free Software Foundation.

    Gerbera is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Gerbera.  If not, see <http://www.gnu.org/licenses/>.

    $Id$
*/
/* lato-regular - latin-ext_latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"),
    url("/vendor/lato/lato-v14-latin-ext_latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */ url("/vendor/lato/lato-v14-latin-ext_latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
  color-scheme: light dark;

  --light-color: rgb(51, 51, 51);
  --light-bg: rgb(248, 248, 248);
  --light-bg-hover: rgb(233, 236, 239);
  --light-muted: rgb(108, 117, 125);
  --light-text: rgb(33, 37, 41);
  --light-color-hover: rgb(33, 37, 41);
  --light-modal-bg: rgb(60, 60, 60);
  --light-color-form: #495057;
  --light-bg-form: rgb(255, 255, 255);
  --light-bg-disabled: rgb(233, 236, 239);

  --grb-color: rgb(255, 127, 0);

  --dark-color: rgb(248, 248, 248);
  --dark-bg: rgb(51, 51, 51);
  --dark-bg-hover: rgb(233, 236, 239);
  --dark-color-hover: rgb(33, 37, 41);
  --dark-muted: rgb(146, 153, 160);
  --dark-text: rgb(213, 217, 221);
  --dark-modal-bg: rgb(191, 191, 191);

  --dark-color-form: rgb(172, 179, 185);
  --dark-bg-form: rgb(38, 38, 38);
  --dark-bg-disabled: rgb(128, 128, 128);
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

a:hover {
  color: var(--grb-color);
}

.text-muted {
  color: light-dark(var(--light-muted), var(--dark-muted)) !important;
}

.table,
.btn-default {
  color: light-dark(var(--light-text), var(--dark-text));
}

.form-control {
  color: light-dark(var(--light-color-form), var(--dark-color-form));
  background-color: light-dark(var(--light-bg-form), var(--dark-bg-form));
}

.form-control:disabled {
  color: light-dark(var(--light-color-form), var(--dark-bg-form));
  background-color: light-dark(var(--light-bg-disabled), var(--dark-bg-disabled));
}

.btn-default:hover {
  background-color: light-dark(var(--light-bg-hover), var(--dark-bg-hover));
}

.page-link,
.modal-content {
  /* color: light-dark(var(--light-color), var(--dark-color)); */
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

.page-item.disabled .page-link {
  /* color: light-dark(var(--light-color), var(--dark-color)); */
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

.grb-caption {
  color: light-dark(var(--grb-color), var(--grb-color));
}

.grb-icon {
  color: light-dark(var(--grb-color), var(--grb-color));
  width: 2em;
}

.navbar {
  font-size: 1rem;
  background-color: #222;
  border-bottom: 1px solid var(--grb-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

li.nav-item > a {
  color: #bbb;
}

.navbar-brand,
.nav-link {
  cursor: pointer;
}

@media (max-width: 1110px) and (min-width: 768px) {
  .nav-link span {
    display: none;
  }
}

.navbar-brand,
li.nav-item:hover > a {
  color: white;
}

li.nav-item.active a {
  color: white;
}

.login-field {
  background-color: white;
  background-color: light-dark(var(--light-bg-form), var(--dark-bg-form));
  box-shadow: inset 0px 3px 3px -1px #888;
}

.login-field:focus {
  background-color: white;
  background-color: light-dark(var(--light-bg-form), var(--dark-bg-form));
  box-shadow: inset 0px 3px 3px -1px #888;
  border: 1px solid var(--grb-color);
}

.form-control:focus {
  background-color: white;
  color: light-dark(var(--light-color-form), var(--dark-color-form));
  background-color: light-dark(var(--light-bg-form), var(--dark-bg-form));
  border: 2px solid var(--grb-color);
  box-shadow: inset 0 1px 0 -1px #888;
}

.modal-dialog {
}

.modal-header {
  color: var(--light-bg);
  background-color: var(--light-modal-bg);
  color: light-dark(var(--light-bg), var(--dark-bg));
  background-color: light-dark(var(--light-modal-bg), var(--dark-modal-bg));
  border-bottom: 1px solid var(--grb-color);
}

.modal-header .close {
  opacity: 1;
  color: var(--light-bg);
  color: light-dark(var(--light-bg), var(--dark-bg));
}

input {
  accent-color: var(--grb-color);
}

input:focus-visible {
  outline: 1px solid var(--grb-color);
}

.bg-light {
  background-color: light-dark(var(--light-modal-bg), var(--dark-modal-bg)) !important;
}

.modal-footer .btn-default {
  color: light-dark(var(--light-text), var(--dark-text));
  background-color: light-dark(var(--dark-modal-bg), var(--light-modal-bg));
}

.modal-footer .btn-default:hover {
  color: light-dark(var(--light-color-hover), var(--dark-color-hover));
  background-color: light-dark(var(--light-bg-hover), var(--dark-bg-hover));
}

.modal-footer {
  border-top: 1px solid var(--grb-color);
}

.modal-footer .btn-primary,
#login .btn-primary {
  background-color: var(--grb-color);
  border-color: #e57200;
}

.modal-footer .btn-primary:hover,
#login .btn-primary:hover {
  background-color: #e57200;
  border-color: #cc6500;
}

.close:hover {
  color: white;
}

#mediaimage {
  width: 150px;
  object-fit: contain;
}

.btn-danger {
  background-color: var(--grb-color);
  border-color: #222;
}

.btn-danger:not([disabled]):not(.disabled):active,
.btn-danger:not([disabled]):not(.disabled).active,
.show > .btn-danger.dropdown-toggle,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  color: white;
  background-color: #c66200;
  border-color: var(--grb-color);
  box-shadow: none;
}

.btn-success {
  background-color: var(--grb-color);
  border-color: #222;
}

.btn-success:not([disabled]):not(.disabled):active,
.btn-success:not([disabled]):not(.disabled).active,
.show > .btn-success.dropdown-toggle,
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
  color: white;
  background-color: #c66200;
  border-color: var(--grb-color);
  box-shadow: none;
}

.btn-primary:not([disabled]):not(.disabled):active,
.btn-primary:not([disabled]):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  color: white;
  background-color: #1435ad;
  border-color: #5a70c2;
  box-shadow: none;
}

.btn-primary {
  background-color: #04819e;
  border-color: #4ba2b7;
}

.btn-default {
  border: 1px solid #888;
}

.btn-default:focus {
  box-shadow: 0 0 0 0.1rem #888;
}

ul.itemspager {
  overflow-x: auto;
  max-width: calc(71vw - 320px);
}

ul.itemspager10 {
  overflow-x: auto;
  max-width: calc(71vw - 400px);
}

ul.pagination {
  margin-bottom: 0px;
}

/*********************
 * Page Layout Elements
 *
 * Menu             = 5vh
 * Trail            = 7vh + ~2vh padding-top,bottom
 * Tree             = fullHeight - (menu + trail)
 * Items datagrid   = fullHeight - (menu + trail)
 * Items table head = 36px
 * Items table foot = 49px
 * Items table body = fullHeight - (menu + trail) - header - footer
 *********************/

html,
body,
#container {
  height: 100vh;
  overflow: hidden;
  color: var(--light-color);
  background-color: var(--light-bg);
  color: light-dark(var(--light-color), var(--dark-color));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

#container {
  display: flex;
  flex-direction: column;
}

#content {
  display: flex;
  flex: 1;
  flex-grow: 2;
  flex-shrink: 0;
  overflow: auto;
}

#clients {
  height: 100%;
  overflow: auto;
}

#config {
  display: flex;
  height: calc(100% - 115px);
  width: 100%;
}

#left {
  height: 100%;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  flex-grow: 2;
  flex-shrink: 0;
  color: var(--light-color);
  background-color: var(--light-bg);
  color: light-dark(var(--light-color), var(--dark-color));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  border-right: 1px solid #e9ecef;
}

#splitterBar {
  flex-grow: 0;
  flex-shrink: 0;
  background: #3c3c3c;
  width: 0.2rem;
  cursor: col-resize;
  margin: 0 0 0 auto;
}

.hidden {
  display: none;
}

.card-style {
  color: var(--light-color);
  background-color: white;
  color: light-dark(var(--light-color), var(--dark-color));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  border: 1px solid #e9ecef;
}

.card-style-bottom {
  border-bottom: 1px solid #e9ecef;
}

#login {
  background-color: var(--light-bg);
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

#login-form {
  border: 1px solid #e9ecef;
  background-color: light-dark(white, black);
}

.flowers {
  background: linear-gradient(rgba(60, 60, 60, 0.85), rgba(60, 60, 60, 0.85)), url("home-bg.jpg") no-repeat center;
  /*background-repeat: no-repeat;*/
  background-size: cover;
}

#tree {
  padding: 0.5rem;
}

#right {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  /* overflow-y: hidden; */
  flex-grow: 5;
  flex-shrink: 1;
}

#datagrid,
#clientgrid {
  height: 100%;
  overflow: auto;
  flex-grow: 2;
  flex-shrink: 0;
  color: var(--light-color);
  background-color: var(--light-bg);
  color: light-dark(var(--light-color), var(--dark-color));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

.grb-dataitems-search {
  height: unset !important;
}

#configframe {
  height: 100%;
  width: 100%;
}

#configgrid {
  height: calc(100% - 60px);
  overflow-y: auto;
  color: var(--light-color);
  background-color: var(--light-bg);
  color: light-dark(var(--light-color), var(--dark-color));
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

#datagrid table,
#clientgrid table {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  max-width: calc(100% - 10px);
  margin-bottom: 0px;
}

#clientgrid table {
  display: table;
}

#clientgrid hr {
  margin-top: 0;
  margin-bottom: 0;
}

#datagrid table tbody {
  flex: 1 0 auto;
  overflow-y: auto;
  width: 100%;
  display: inline-block;
}

.grb-table-fs tbody {
  height: calc(100vh - 115px);
}

.grb-table-db tbody {
  height: calc(100vh - 215px);
}

.grb-table-search tbody {
  height: calc(100vh - 215px);
}

#clientgrid table tbody,
#clientgrid table thead {
  flex: 1 0 auto;
  overflow-y: scroll;
  width: 100%;
}

#datagrid table tfoot {
  overflow-x: auto;
  width: 100%;
  flex-shrink: 0;
  display: block;
  border-top: 1px solid #dee2e6;
}

#datagrid table tfoot tr {
  display: inline-block;
}

#datagrid table tfoot tr,
#datagrid table tfoot td {
  width: 100%;
  border: none;
}

.datagrid-row:hover,
#clientgrid table tbody tr:hover {
  background-color: var(--light-bg-hover);
  color: var(--light-color-hover);
  background-color: light-dark(var(--light-bg-hover), var(--dark-bg-hover));
  color: light-dark(var(--light-color-hover), var(--dark-color-hover));
}

#clientgrid td,
#clientgrid th {
  min-width: 50px;
}

.grb-client-time {
  min-width: 220px !important;
}

.grb-client-flags {
  max-width: 270px !important;
}

.searchLabel {
  width: 66%;
}

#clientgrid,
#configgrid {
  margin: 30px;
}

#configgrid {
  margin-left: 0px;
}

#configgrid .configListItem {
  margin-left: 20px;
  list-style: none;
}

#configgrid .changed {
  background-color: #ff7f0060;
}

#configgrid .changed input {
  background-color: #ff7f0030;
}

#configgrid .removed {
  background-color: #ff7ff060;
}

#configgrid .removed input {
  background-color: #ff7ff030;
}

#configgrid .added {
  background-color: lightyellow;
}

#configgrid .added input {
  background-color: lightyellow;
}

#configgrid .default {
  color: darkgray;
}

#configgrid .default input {
  color: darkgray;
}

#configgrid .reset {
  background-color: lightgreen;
}

#configgrid .reset input {
  background-color: lightgreen;
}

.configItemInput {
  margin-left: 20px;
  min-width: 400px;
}

.configItemLabel {
  min-width: 240px;
  display: inline-block;
}

.page-item.active .page-link {
  background-color: var(--grb-color);
  border-color: #bf5f00;
  color: white;
}

.page-item.active .page-link:hover {
  background-color: #bf5f00;
  border-color: #bf5f00;
}

.page-link {
  color: var(--grb-color);
  cursor: pointer;
}

.page-select > option {
  padding: 0.5rem 0.75rem;
  line-height: 1.25em;
}

.page-select {
  color: var(--grb-color);
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-link:focus,
.page-link:hover {
  color: #222;
}

.stat-value {
  text-align: end;
}

/* Cancel top level padding */
*#tree > .list-group > .list-group-item {
  padding: 0;
}

.list-group-item {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  border: 0px;
  background-color: transparent;
  color: var(--light-text);
  color: light-dark(var(--light-text), var(--dark-text));
  display: inline-block;
  white-space: nowrap;
}

.list-group-item.has-children > span.fa {
  color: var(--grb-color);
}

.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: 0px;
}

.selected-item > span.folder-title {
  background-color: var(--grb-color);
}

.list-group {
  border: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  box-shadow: none;
}

.folder-title {
  padding-left: 10px;
  cursor: pointer;
}

.expandable {
  cursor: copy;
}

.grb-item-url {
  display: inline-block;
}

.grb-media-type {
  width: 120px;
}

.grb-edit-check {
  margin-left: 1em;
}

.grb-edit-check > label {
  margin-left: 1em;
  width: 40%;
}

.grb-edit-check > input {
  width: 40%;
}

.grb-item-table-1,
.grb-item-table-2,
.grb-item-table-3 {
  max-height: calc(100vh - 250px);
}

.grb-item-row-0 {
  width: 100%;
  display: inline-table;
}

.grb-item-row-3 td {
  padding: 0;
}

.grb-item-row-1,
.grb-item-row-2,
.grb-item-row-3 {
  max-height: calc(100vh - 250px);
}

.grb-item > td {
  vertical-align: middle;
  line-height: 36px;
  padding: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grb-item-delete,
.grb-item-edit,
.grb-item-download,
.grb-item-add {
  cursor: pointer;
  margin-left: 0.5em;
}

.grb-item-delete:hover,
.grb-item-edit:hover,
.grb-item-download:hover,
.grb-item-add:hover {
  color: var(--grb-color);
}

.grb-item-buttons {
  width: 80px;
}

.grb-item-icon {
  width: 1em;
  height: 1em;
}

.grb-thumbnail {
  image-orientation: from-image;
  margin-right: 10px;
  object-fit: contain;
  background: #eee;
  border: 1px solid #ddd;
  height: 36px;
  width: 48px;
}

.grb-image {
  image-orientation: from-image;
  object-fit: contain;
  background: #eee;
  border: 1px solid #ddd;
  height: calc(100vh - 250px);
  width: 100%;
}

.grb-item-grid {
  display: grid;
  align-content: center;
  padding: 8px;
  border: 1px solid #e9ecef;
}

.grb-item-grid .grb-item-icon {
  font-size: x-large;
}

.grb-item-grid-normal .grb-thumbnail {
  margin-right: 0;
  height: 90px;
  width: 120px;
}

.grb-item-grid-normal > div > a {
  font-size: x-small;
  width: 120px;
}

.grb-item-grid-large .grb-thumbnail {
  margin-right: 0;
  height: 120px;
  width: 160px;
}

.grb-item-grid-large > div > a {
  font-size: x-small;
  width: 160px;
}

.grb-item-grid-item {
  margin-right: 0;
  max-height: calc(100% - 200px);
  max-width: calc(100% - 50px);
}

.grb-item-grid-item > div > a {
  font-size: x-small;
  max-width: 100%;
}

.grb-item-grid:hover {
  background-color: #e9ecef;
}

.grb-item-grid > div {
  display: grid;
}

.grb-item-grid .grb-item-download {
  margin: 0;
}

.grb-trail .breadcrumb > li + li:before {
  content: ">";
  padding: 0 5px;
  color: rgba(255, 255, 255, 0.5);
}

.grb-trail {
  background-color: #3c3c3c;
  color: #ededed;
}

.grb-trail ol.breadcrumb {
  background-color: unset;
}

.grb-trail-buttons {
  list-style: none;
  padding: 8px 15px;
  margin-bottom: 20px;
}

.grb-trail-buttons li {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}

.grb-trail-buttons li a {
  color: #ededed;
}

.grb-trail-button,
.grb-trail-add,
.grb-trail-add-autoscan,
.grb-trail-edit-autoscan,
.grb-trail-edit,
.grb-trail-delete,
.grb-trail-delete-all {
  text-decoration: none;
}

.grb-trail-button:hover,
.grb-trail-add:hover,
.grb-trail-add-autoscan:hover,
.grb-trail-edit-autoscan:hover,
.grb-trail-edit:hover,
.grb-trail-delete:hover,
.grb-trail-delete-all:hover {
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 1110px) {
  .grb-trail-button span {
    display: none;
  }
}

.overflow {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: block;
}

.grb-toast,
.grb-task {
  bottom: 0;
  border-radius: 0;
  border: 0;
  width: 100%;
  z-index: 1000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: fixed;
  margin-bottom: 0;
}

#grb-toast-wrapper {
  float: left;
  width: 80%;
}

#grb-toast-msg {
  text-overflow: ellipsis;
  overflow: hidden;
}

#autoscan-persistent-msg {
  background-color: #e9ecef;
  background-color: light-dark(#e9ecef, #151a1e);
  padding: 10px;
  margin-right: 0.15em;
}

.autoscan {
  cursor: pointer;
  background-color: darkorange;
}

.itemDetailHead {
  cursor: pointer;
  background-color: light-dark(var(--light-bg-form), var(--dark-bg-form));
}

.itemDetailFoot {
  font-weight: bold;
  background-color: light-dark(var(--light-bg-form), var(--dark-bg-form));
}

.autoscan-child {
  background-color: transparent;
  color: light-dark(var(--light-text), var(--dark-text)) !important;
}
.autoscan-child:hover {
  background-color: transparent !important;
  color: light-dark(var(--light-text), var(--dark-text)) !important;
}

.badge {
  font-weight: normal;
}

#loading-wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: var(--light-bg);
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  opacity: 0.75;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #777;
  border-left: 4px solid #777;
  animation: loading 1.5s infinite linear;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#homeintro {
  padding-top: 8vh;
  padding-bottom: 4vh;
  border-bottom: rgb(231, 231, 231) 1px solid;
}

.sublink:hover {
  background-color: var(--light-bg);
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

#home a {
  text-decoration: none;
}

.status-head {
  background-color: var(--light-bg);
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

#status-total {
  font-weight: bold;
}

.stat-value {
  text-align: end;
}

@media (max-height: 600px) {
  #homeintro {
    padding-top: 4vh;
    padding-bottom: 1vh;
  }
}