/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
Todo: check, if this is needed? (It doesn't work with the build system)

.tobago-file-real {
  filter: alpha(opacity: 0);
}
*/

/*
 * theme: standard
 * agent: standard
 */

/* box -------------------------------------------------------------- */

.tobago-box-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

/* button -------------------------------------------------------------- */

/* XXX fixes a problem with image in button inside a segmentLayout (with FF40 and IE11)
   test page: buttons-with-image.xhtml
   This might not be a good solution, is works only with images not larger then 16px
*/
.tobago-button > img {
  margin-top: -1px;
  margin-bottom: -1px;
}

/* collapsible -------------------------------------------------------------- */

.tobago-collapsed.tobago-box .card-block,
.tobago-collapsed.tobago-section .tobago-section-content,
.tobago-collapsed.tobago-panel {
  display: none;
}

/* date -------------------------------------------------------------- */

.tobago-date {
  min-width: 7em;
}

/* Remove IE10's "clear field" X button */
.tobago-date::-ms-clear {
  display: none;
}

/* for pickers with more than one icon, e.g. date-time picker */
.btn > .fa:nth-child(n+2) {
  margin-left: .3em;
}

/*
XXX workaround for Bootstrap with datetimepicker needed for popups
*/
.bootstrap-datetimepicker-widget {
  z-index: 2000 !important;
}

/*
XXX need for fixing wrong positioning of bootstrap datepicker.
See https://github.com/Eonasdan/bootstrap-datetimepicker/issues/790 for more information.
*/
body {
  position: relative;
}

/* file -------------------------------------------------------------- */

.tobago-file {
  position: relative;
}

.tobago-file-pretty {
  text-overflow: ellipsis;
}

.tobago-file-real {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  z-index: 2;
}

/* flexLayout -------------------------------------------------------------- */

.tobago-flexLayout {
    display: -webkit-flex; /* needed e.g. for Safari 8.0.2 */
    display: -ms-flexbox; /* needed for IE 10 */
    display: flex;
    min-width: 0; /* without this, Firefox/Webkit are different from IE:
    Set the minimal width to zero make flex-layout responsive for the width,
    even if there is overflowing content.
    currently e.g. PRE-code blocks in the demo are too wide. XXX */
}

.tobago-flexLayout-markup-vertically {
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

/* XXX this fixes the margin left from .btn:nth-child(n+2), but is ugly */
.tobago-flexLayout-markup-vertically > .btn:nth-child(n+2) {
  margin-left: 0 !important;
}

.tobago-flexLayout > .form-control:nth-child(n+2),
.tobago-flexLayout > .btn-group:nth-child(n+2),
.tobago-flexLayout > .input-group:nth-child(n+2),
.tobago-flexLayout > .tobago-input-group-outer:nth-child(n+2),
.tobago-flexLayout > .tobago-out:nth-child(n+2),
.tobago-flexLayout > .tobago-file:nth-child(n+2),
.tobago-flexLayout > .tobago-panel:nth-child(n+2),
.tobago-flexLayout > .tobago-label:nth-child(n+2),
.tobago-flexLayout > .tobago-selectManyShuttle:nth-child(n+2),
.tobago-flexLayout > .twitter-typeahead:nth-child(n+2) {
    margin-left: 5px;
}

.tobago-alignItems-baseline {
  align-items: baseline;
}

.tobago-alignItems-center {
  align-items: center;
}

.tobago-alignItems-flexEnd {
  align-items: flex-end;
}

.tobago-alignItems-flexStart {
  align-items: flex-start;
}

.tobago-alignItems-stretch {
  align-items: stretch;
}

.tobago-justifyContent-center {
  justify-content: center;
}

.tobago-justifyContent-flexStart {
  justify-content: flex-start;
}

.tobago-justifyContent-flexEnd{
  justify-content: flex-end;
}

.tobago-justifyContent-spaceBetween{
  justify-content: space-between;
}

.tobago-justifyContent-spaceAround{
  justify-content: space-around;
}

/* footer -------------------------------------------------------------- */

.tobago-footer {
  background-color: #ffffff;
  padding: 5px 10px;
  -webkit-box-shadow: 0 0 5px 5px rgba(200,200,200,0.5);
  -moz-box-shadow: 0 0 5px 5px rgba(200,200,200,0.5);
  box-shadow: 0 0 5px 5px rgba(200,200,200,0.5);
}

.navbar-fixed-bottom {
  margin-top: 10px;
}

/* gridLayout -------------------------------------------------------------- */

.tobago-gridLayout {
    width: 100%;
    height: 100%;
/*
    border-spacing: 5px;
    border-collapse: separate;
*/
    border-spacing: 0;
    border-collapse: collapse;
}

table.tobago-gridLayout > tbody > tr > td {
    vertical-align: top;
    padding: 0;
    border-left: 5px solid transparent;
    border-top: 5px solid transparent;
    height: 100%; /* needed for Firefox */
}

table.tobago-gridLayout > tbody > tr > td:first-child {
    border-left: 0;
}

table.tobago-gridLayout > tbody > tr:first-child > td {
    border-top: 0;
}

table.tobago-gridLayout > tbody > tr > td > * {
  height: 100%;
  width: 100%;
}

/* header ----------------------------------------------------------- */

.tobago-header {
    margin-bottom: 1rem;
}

.tobago-header.navbar-fixed-top {
    margin-bottom: 0;
}

/* image ----------------------------------------------------------- */

.tobago-image-markup-disabled {
  filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
}

/* in ----------------------------------------------------------- */

.tobago-in-markup-number {
  text-align: right;
}

/* link ----------------------------------------------------------- */

.tobago-link {
  white-space: nowrap;
}

.tobago-link span {
  white-space: normal
}

button.tobago-link, button.tobago-command, button.tobago-treeCommand {
  color: #0275d8;
  border-width: 0;
  padding: 0;
  background-color: transparent;
  text-align: left;
}

button.tobago-link:focus, button.tobago-link:hover,
button.tobago-command:focus, button.tobago-command:hover,
button.tobago-treeCommand:focus, button.tobago-treeCommand:hover {
  color: #014c8c;
  text-decoration: underline;
  background-color: transparent;
  outline: none;
}

button.tobago-link-markup-disabled, button.tobago-command-markup-disabled {
  cursor: not-allowed;
  opacity: .65;
}

button.tobago-link-markup-disabled:hover, button.tobago-command-markup-disabled:hover {
  color: #0275d8;
  text-decoration: none;
}

/* messages ----------------------------------------------------------- */

.tobago-messages label {
  display: block;
}

.tobago-messages label:last-child {
  margin-bottom: 0;
}

/* nav ----------------------------------------------------------- */

.nav-item > span > .tobago-link, .nav-item > span > .tobago-command {
  padding-top: .425rem;
  padding-bottom: .425rem;
  display: inline-block;
}

/* styles for drop down menu first level */
.dropdown-toggle:focus, .dropdown-toggle:hover {
  text-decoration: none;
}

/* styles for drop down menu with deeper level */
.tobago-dropdown-submenu {
  position: relative;
}

/* no bottom border in navtabs, if panel-body under it */
.nav-tabs {
  border-bottom-width: 0;
}

.nav-tabs > li.active > a {
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  background-repeat: repeat-x;
  border-bottom: #dddddd;
}

.nav-tabs > li.active > a:hover {
  border-bottom: #dddddd;
}

.tobago-dropdown-submenu > span {
  display: inline-block;
  width: 100%;
}

.tobago-dropdown-submenu > span > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.tobago-dropdown-submenu:hover > span > .dropdown-menu {
  display: block;
}

.tobago-dropdown-submenu:after {
  content: " ";
  float: right;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 7px;
  margin-right: -10px;
}

.tobago-dropdown-submenu > span > button:after {
  display: none;
}

.tobago-dropdown-submenu:hover > span > a:after {
  border-left-color: #ffffff;
}

.tobago-dropdown-submenu.pull-left {
  float: none;
}

.tobago-dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.dropdown-menu .form-check {
  display: block;
}

/* out -------------------------------------------------------------------- */

.tobago-out-markup-strong {
  font-weight: bold;
}

.tobago-out-markup-deleted {
  text-decoration: line-through;
}

.tobago-out-markup-number {
  display: block;
  text-align: right;
}

/* make sure, tc:out has always the same height, no matter if value is empty */
span.tobago-out:empty:before {
  content: "\200b";
}

/* page ----------------------------------------------------------- */

.tobago-page {
  padding-top: 1rem;
}

.tobago-page-overlay {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* TODO: better z-index strategy */
  z-index: 500; /* less than the bootstrap navbar */
}

.tobago-page-overlay-markup-wait {
  cursor: wait;
}

.tobago-page-overlay-markup-error {
  cursor: default;
}

.tobago-page-overlayCenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  /* TODO: better z-index strategy */
  z-index: 500; /* less than the bootstrap navbar */
}

.tobago-page-overlayCenter img {
  position: relative;
}

.tobago-page-noscript {
  position: absolute;
  top: 100px;
  left: 100px;
  right: 100px;
  height: 50px;
  border: 1px solid black;
  padding: 30px;
  background-color: white;
  font-size: 15px;
}

.tobago-page-preventFrameAttacks {
  display: none;
}

.tobago-spread {
  height: 100%;
}

/* popup ------------------------------------------------------------- */
.modal-content > .card {
  margin-bottom: 0;
}

/* section ----------------------------------------------------------- */

/* to separate the icon from the rest of the title */
h1 > .fa:first-child,
h2 > .fa:first-child,
h3 > .fa:first-child,
h4 > .fa:first-child,
h5 > .fa:first-child,
h6 > .fa:first-child {
  margin-right: 0.7em;
}

.tobago-section-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

/* selectBooleanCheckbox ----------------------------------------------- */
.tobago-selectBooleanCheckbox input {
  margin-right: 0.3em;
  margin-bottom: 0.4ex;
  vertical-align: text-bottom;
}

.tobago-selectBooleanCheckbox .form-check-label {
  margin-top: 0.5ex;
  vertical-align: text-top;
}

/* selectManyCheckbox ----------------------------------------------------------- */

.tobago-selectManyCheckbox {
  padding-left: 0;
  list-style: none;
}

.tobago-selectManyCheckbox input {
  margin-right: 0.3em;
  margin-bottom: 0.4ex;
  vertical-align: text-bottom;
}

.tobago-selectManyCheckbox-inline {
  margin-left: -1.25rem;
  margin-top: 6px;
}

/* selectManyShuttle ----------------------------------------------------------- */

.tobago-selectManyShuttle {
  display: flex;
}

.tobago-selectManyShuttle .tobago-selectManyShuttle-unselected,
.tobago-selectManyShuttle .tobago-selectManyShuttle-selected {
  flex: 1 0 0px;
}

.tobago-selectManyShuttle-hidden {
  display: none;
}

.tobago-selectManyShuttle-toolBar {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
}

.tobago-selectManyShuttle-toolBar > button {
  display: block;
}

.tobago-selectManyShuttle-toolBar > div {
  flex: 1 0 0px;
}

/* XXX this fixes the margin left from .btn:nth-child(n+2), but is ugly */
.tobago-selectManyShuttle-toolBar > * {
  margin-left: 0 !important;
}

/* selectOneRadio ---------------------------------------------------------- */

.tobago-selectOneRadio {
  padding-left: 0;
  list-style: none;
}

.tobago-selectOneRadio input {
  margin-right: 0.3em;
  margin-bottom: 0.4ex;
  vertical-align: text-bottom;
}

.tobago-selectOneRadio-inline {
  margin-left: -1.25rem;
  margin-top: 6px;
}

.dropdown-menu .tobago-selectOneRadio > .form-check {
  display: block;
}

/* segmentLayout ----------------------------------------------------------- */

.tobago-segmentLayout {
  /*
  Makes, that the height of the div is set.
  Otherwise floating elements below, may flew into the area of the segmentLayout.
  */
  /*display: inline-block;
  todo: this breaks the general layout in IE11 and others
  */
}

/* separator -------------------------------------------------------------- */
hr.tobago-separator {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

p.tobago-separator {
  text-align: center;
  border: 0;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  padding: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

p.tobago-separator:before, p.tobago-separator:after {
  content: "";
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  display: inline-block;
  vertical-align: middle;
}

p.tobago-separator:before {
  width: 80px;
  margin-left: 0;
  margin-right: 5px;
}

p.tobago-separator:after {
  width: 100%;
  margin-left: 5px;
  margin-right: 0;
}

/* sheet -------------------------------------------------------------- */

th.tobago-sheet-headerCell {
  font-weight: normal;
}

th.tobago-sheet-headerCell .tobago-out {
  font-weight: bold;
}

.tobago-sheet-header {
  overflow: hidden;
  flex-shrink: 0;
}

.tobago-sheet-columnSelector {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.tobago-sheet {
  display: flex;
  flex-direction: column;
}

.tobago-sheet-cell-markup-right {
  text-align: right;
}

.tobago-sheet-cell-markup-center {
  text-align: center;
}

.tobago-sheet-cell-markup-justify {
  text-align: justify;
}

.tobago-sheet-cell-markup-filler {
  padding: 0 !important; /* fix for IE 11 */
}

.tobago-sheet-footer {
  text-align: center;
}

.tobago-sheet-paging-markup-left {
  float: left;
}
.tobago-sheet-paging-markup-center {
}

.tobago-sheet-paging-markup-right {
  float:right;
}

.tobago-sheet-pagingInput {
  text-align: center;
  display: none;
  margin: -4px 0;
  width: 3em;
}

.tobago-sheet-pagingText {
  cursor: pointer;
}

.tobago-sheet-body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.tobago-sheet-headerTable {
  margin-bottom: 0;
}

.tobago-tableLayout-fixed {
  table-layout: fixed;
}

.tobago-sheet-headerCell-markup-filler {
  border-width: 0 !important;
}

.tobago-sheet-headerCell {
  position: relative;
}

.tobago-sheet-headerResize {
  position: absolute;
  right: -5px;
  top: 0;
  width: 10px;
  height: 100%;
  z-index: 1;
  cursor: col-resize;
}

.tobago-sheet-headerCell {
  overflow: hidden;
}

.tobago-sheet-cell div {
  overflow: hidden;
}

/* suggest ---------------------------------------------------------------------- */

.tobago-suggest {
  display: none;
}

.twitter-typeahead {
  width: 100%;
  display: inherit !important; /* height of tc:in must not be influenced by tc:suggest */
}

.typeahead {
  background-color: #FFFFFF;
}

.typeahead:focus {
  border: 2px solid #0097CF;
}

.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
  color: #aaaaaa;
}

.tt-menu {
  display: none;
  position: absolute;
  z-index: 1060;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 1px;
  padding: 8px 0;
}

.tt-open {
  display: block;
}

.tt-empty {
  display: none;
}

.tt-suggestion {
    padding: 3px 20px;
}

.tt-suggestion:hover {
    background-color: #0097CF;
    color: #FFFFFF;
    cursor: pointer;
}

.tt-suggestion.tt-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}

.tt-suggestion p {
  margin: 0;
}

/* tab / tab-group ----------------------------------------------------------------- */

.tobago-tab {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-left: 0.2rem;
}

.tab-content {
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.3rem;
}

.tobago-tabGroup > .tobago-tabGroup-header.nav-tabs {
  border-bottom-width: 0;
}

/* tree ---------------------------------------------------------------------- */

.tobago-treeCommand {
  cursor: pointer;
}

/* out -------------------------------------------------------------- */

.tobago-out {
  display: inline-block;
}

/* menuStore -------------------------------------------------------- */

.tobago-page-menuStore {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

/* Bootstrap workarounds ------------------------------------------------------------------ */

/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
 but in Tobago we have a global form.
 */
/*
.navbar .form-control {
    width: auto;
}
*/

/*
fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.

fixme: there is a problem with the selectManyShuttle with this style.
*/
.navbar button:nth-child(n+2),
.navbar input:nth-child(n+2) {
  margin-left: 5px;
}

.btn:nth-child(n+2) {
  margin-left: 5px;
}

.tobago-button > *:nth-child(n+2),
.tobago-link > *:nth-child(n+2) {
  margin-left: .4em;
}

.tobago-label {
  width: 155px;
}

/* fixes vertical space, todo: why is is needed? is there a better way? */
.form-horizontal > * {
  margin-top: 10px;
  margin-bottom: 5px;
  /* XXX MUST BE REMOVED */
}.form-horizontal .control-label {
   margin-top: 10px;
   margin-bottom: 5px;
 }
/* FIXME: This is to hide the toolbar, until it is implemented */
.tobago-tabGroup-toolBar {
  display: none;
}

.tobago-has-info .form-control-feedback,
.tobago-has-info .form-control-label,
.tobago-has-info .form-check-label,
.tobago-has-info .form-check-inline,
.tobago-has-info .custom-control {
  color: #5bc0de;
}

.tobago-has-info .form-control {
  border-color: #5bc0de;
}

.tobago-has-info .input-group-addon {
  color: #5bc0de;
  background-color: #eaf6ea;
  border-color: #5bc0de;
}

.tobago-has-info .form-control-feedback {
  color: #5bc0de;
}

.tobago-has-info .form-control-success {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==");
}

.tobago-required .tobago-label:after {
  content:"*";
  color:red;
}

/* Bootstrap datetimepicker workarounds ------------------------------------------------------------------ */

/*
 * CSS extension for bootstrap3-datetimepicker to fit with bootstrap4.
 */

.bootstrap-datetimepicker-widget th,
.bootstrap-datetimepicker-widget td {
  padding: 5px;
}