/**
 * KnoWau 
 *
 * Open source website tool
 *
 * Copyright (c) 2020, KnoWau-Software
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * @package	KnoWau Homepage-Modul
 * @author	Klaus Schnatz
 * @copyright	Copyright (c) 2020, KnoWau-Software
 * @license	http://opensource.org/licenses/MIT	MIT License
 * @link	https://www.knowau.de
 * @since	Version 1.2.9
 * @filesource
 */
/* ******************************************************
**    Variables
****************************************************** */
/* ******************************************************
**    Basic html, body
****************************************************** */
html {
  position: relative;
  /* to keep footer in position at bottom */
  min-height: 100%;
}

body {
  padding-top: 30px;
  background-color: #e0e0e0;
  color: #8e9138;
  /* Margin bottom by footer height */
  margin-bottom: 40px;
  font-size: 1.0em;
}

.kw-preview-area {
  padding-top: 0;
  background-color: transparent;
  color: #000000;
  margin-bottom: 0;
  font-size: 1.0em;
}

.kw-preview-area .btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.kw-preview-area .btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.container-fluid {
  padding: 0;
  margin: 0;
}

.kw-p0-m0 {
  margin: 0;
  padding: 0;
}

.kw-scroll-content {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  resize: vertical;
}

.kw-content-scale {
  width: 100%;
  transform: scale(1);
  transform-origin: top left;
}

.kw-preview-header {
  background-color: #CCCCCC;
  text-align: center;
  font-size: 1.2em;
  padding: 3px;
}

.help-block {
  background-color: #FF0000;
  color: #000000;
  padding: 10px;
  display: block;
}

.kw-startpage-card {
  border-radius: 10px;
  background-color: #9eA148;
}

.kw-startpage-card:hover {
  background-color: #8e9138;
}

/* ******************************************************
**    Modal Dialog
****************************************************** */
.modal-content {
  background-color: #195C8B;
  color: #E4EAD6;
}

#kwMenuModalTitle {
  font-size: 1.2em;
}

#kwMenuModalText {
  font-size: 1.0em;
}

#kwModalTitle {
  font-size: 1.2em;
}

#kwModalText {
  font-size: 1.0em;
}

#kwBtnModalMenu {
  font-size: 1.0em;
}

/* ******************************************************
**    KW Color Picker 
****************************************************** */
.kw-selected-color-img {
  margin-top: 5px;
  width: 26px;
  height: auto;
}

.kw-selected-color-img-plus {
  margin-top: 5px;
  width: 26px;
  height: auto;
}

.kw-selected-color-value {
  border: 1px solid #CCCCCC;
  padding-top: 0 5px 5px 5px;
}

.kw-display-none {
  display: none;
}

.kw-color-input {
  min-width: 40px;
}

.kw-color-select-tag option {
  font-size: 0.8em;
}

/* ******************************************************
**    ContentEditable
****************************************************** */
.kw-contenteditable-div {
  position: relative;
}

.kw-contenteditable-div div {
  overflow-y: scroll;
  font-size: 1.0em;
  height: 72px;
  background-color: #FFFFFF;
  color: #000000;
}

.kw-contenteditable-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}

/* ******************************************************
**    KW Padding or Margin input support 
****************************************************** */
.kw-var-size-div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.kw-var-size-div-p {
  background-color: #F3F557;
}

.kw-var-size-div-m {
  background-color: #60D860;
}

.kw-fixed-size-div {
  position: relative;
}

.kw-fixed-size-div-small {
  width: 200px;
  height: 200px;
  background-color: #F3F557;
}

.kw-fixed-size-div-large {
  width: 240px;
  height: 240px;
  display: flex;
  flex-direction: column;
  background-color: #60D860;
}

.kw-inner-div-btn {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: #28A745;
  color: white;
  border-radius: 2px;
  padding-top: 2px;
}

.kw-pm-val {
  position: absolute;
  width: 26px;
  text-align: center;
  font-size: 0.8em;
}

.kw-pm-ok-btn {
  position: absolute;
  top: 87px;
  left: 87px;
  width: 36px;
  height: 26px;
  background-color: gray;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

.kw-pm-ok-btn:hover {
  -moz-box-shadow: .125em .125em .25em #24202c;
  -webkit-box-shadow: .125em .125em .25em #24202c;
  box-shadow: .125em .125em .25em #24202c;
}

.kw-margin-img {
  height: 30px;
  width: auto;
}

/* ******************************************************
**    alerts
****************************************************** */
.alert-warning {
  background-color: #bbbca1;
  border-color: #bbbca1;
  color: #FFFFFF;
}

.alert-light {
  background-color: #bbbca1;
  border-color: #bbbca1;
  color: #FFFFFF;
}

.btn-primary {
  background-color: #8e9138;
  border-color: #8e9138;
}

.btn-primary:hover {
  background-color: #6e7118;
  border-color: #6e7118;
}

.btn-secondary {
  background-color: #A5A852;
  border-color: #A5A852;
}

.dropzone {
  background-color: #ccc;
}

.dropzone .dz-preview {
  width: 100%;
  margin: 0;
}

.kw-tooltip:hover span {
  display: block;
}

.kw-tooltip-text {
  display: none;
  margin-top: 5px;
  top: 0;
  left: 0;
  right: 0;
  font-weight: normal;
  background-color: transparent;
  color: white;
}

/*.kw-list-item-tooltip {
	background-color: #CCCCCC;
	color: #000000;
	display: block;
}*/
.kw-sub-object-heading-text {
  padding: 10px;
  color: black;
}

.kw-input-form input, .kw-input-form select, .kw-input-form textarea {
  font-size: 1.0em;
}

.kw-input-form input, .kw-input-form select {
  line-height: 1.0;
  height: calc(1.75rem + 10px);
}

.kw-select-editable input {
  font-size: 1.0em;
  line-height: 1.0;
  height: calc(1.75rem + 2px);
  margin-left: 10px;
}

.kw-input-form select {
  padding-top: 2px;
  font-size: 1.0em;
}

/* ******************************************************
**    Help
****************************************************** */
#kwHelp {
  background-color: #bbbca1;
  color: #FFFFFF;
  padding: 3px;
  border-radius: 3px;
  text-align: center;
  width: 40px;
  margin-right: 10px;
}

#kwHelp a img {
  width: 20px;
  margin-bottom: 4px;
}

#kwHelp:hover {
  background-color: #8e9138;
}

/* ******************************************************
**    Logout
****************************************************** */
#kwLogout {
  background-color: #bbbca1;
  color: #FFFFFF;
  padding: 3px;
  border-radius: 3px;
  text-align: center;
  width: 80px;
}

#kwLogout div {
  display: none;
  font-size: 0.8em;
}

#kwLogout a img {
  width: 20px;
  margin-bottom: 4px;
}

#kwLogout:hover {
  background-color: #8e9138;
}

#kwLogout:hover div {
  display: block;
}

/* ******************************************************
**    Footer
****************************************************** */
.kw-admin-footer {
  font-size: 0.9em;
}

.kw-no-db-footer {
  background-color: #bbb;
  text-align: center;
  padding: 10px 0 10px 0;
}

/* ******************************************************
**   Video download
****************************************************** */
.kw-progress {
  height: 20px;
}

.kw-progress-bar {
  width: 0%;
  height: 20px;
}

/* ******************************************************
**    General select->editable
****************************************************** */
/* editable select with options*/
.kw-select-editable {
  position: relative;
  background-color: white;
  width: 100%;
  height: 28px;
  border-radius: 5px;
  border-color: #ced4da;
}

.kw-select-editable select {
  position: absolute;
  top: 0px;
  left: 0px;
  border: none;
  width: 100%;
  margin: 0;
}

.kw-select-editable input {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 90%;
  padding: 1px;
  border: none;
  height: 28px;
}

.kw-select-editable select:focus, .kw-select-editable input:focus {
  outline: none;
}

/* ******************************************************
**    Fonts
****************************************************** */
.font-select, .font-select a span {
  color: black;
}

/* ******************************************************
**    General Contents Jumbotron
****************************************************** */
.kw-info-jumbotron {
  background-color: #ccc;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.kw-info-jumbotron h3 {
  background-color: #bbb;
  text-align: center;
  margin-top: -5px;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
}

.kw-info-jumbotron ul li {
  margin-left: 50px;
}

.kw-info-jumbotron p {
  margin: 10px;
}

/* ******************************************************
**    General Contents Card
****************************************************** */
.kw-card {
  background-color: #eeeeee;
  margin-top: 10px;
  border: 0;
}

.kw-admin-card {
  background-color: #eeeeee;
  margin-left: 15px;
  margin-top: 15px;
  border: 0;
}

.kw-card-title {
  background-color: #eeeeee;
  margin-bottom: 0;
  padding: .25rem 1rem .5rem 1rem;
  border-radius: 5px;
  font-size: 1.0em;
}

.kw-card-body {
  background-color: #eeeeee;
  font-size: 1.0em;
  border-radius: 5px;
}

#kw-btn-crud-subobject-collapse span {
  color: #FFFFFF;
}

.kw-btn-remove-image {
  margin-top: 5px;
  margin-right: 5px;
  background-color: #CCCCCC;
  color: #333333;
}

/* ******************************************************
**    General Image/File Input
****************************************************** */
.kw-img-input-field {
  margin: 0 0 0 -20px;
  width: 100%;
  border: 0;
}

.kw-file-input-field {
  margin: 0;
  width: 100%;
  border: 0;
}

.kw-img-toggle-button {
  padding: 0 0 0 5px;
  color: black;
  width: 100%;
}

/* ******************************************************
**    General Accordeon Card, Admin Object
****************************************************** */
.kw-admin-accordeon {
  margin-top: 15px;
}

.kw-accordeon-card-header {
  background-color: #bbbca1;
}

.kw-accordeon-card-header button {
  color: #FFFFFF;
}

.kw-accordeon-card-body {
  background-color: #ccc;
  list-style-type: none;
}

.kw-list-object-new {
  margin: 5px 5px 0 0;
  color: #777;
}

.kw-admin-object-header {
  margin: 0 0 20px 0;
  text-align: center;
}

.kw-admin-object-header span {
  padding: 10px 0 10px 0;
  background-color: #bbbca1;
  color: #FFFFFF;
  display: block;
}

/* ******************************************************
**    Navbar
****************************************************** */
.kw-navbar-brand > img {
  max-width: 100px;
  margin-top: -25px;
}

.kw-nav-item a {
  padding: 2px;
}

#kw-navbar {
  margin-bottom: 10px;
  background-color: #eeeeee;
}

#kw-navbar > ul > li > a {
  color: #eee;
}

#kw-navbar > ul > li :hover {
  color: #333;
  background-color: #ccc;
}

.navbar-nav .active {
  color: #333;
  background-color: #ccc;
}

.dropdown-menu {
  padding-left: 10px;
}

.kw-dropdown-item {
  margin: 5px 0 5px 0;
}

.kw-dropdown-item:hover, .kw-nav-item:hover {
  border: 1px solid white;
}

/* ******************************************************
**    LinkList
****************************************************** */
.kw-linkListItem-text {
  font-size: 0.9em;
}

.kw-back-to-list {
  background-color: transparent;
  padding: 10px;
  margin: 0;
}

.kw-video-card, .kw-gallery-card, .kw-textPic-card, .kw-video-card, .kw-news-card, .kw-cards-card, .kw-tabs-card, .kw-documents-card {
  width: 100%;
}

.kw-carousel-card img, .kw-gallery-card img, .kw-textPic-card img, .kw-video-card img, .kw-news-card img, .kw-cards-card img, .kw-tabs-card img, .kw-documents-card img {
  width: 100%;
  height: auto;
  /*max-height: 250px;*/
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
}

/* ******************************************************
**    KwPages
****************************************************** */
.kw-template-card {
  padding: 20px;
  max-width: 250px;
  color: #333333;
}

.kw-template-card img {
  border: 2px solid black;
}

.template-card-title {
  padding: 5px 10px 5px 10px;
  margin-bottom: 5px;
  background-color: #DDDDDD;
}

.template-card-text {
  padding: 5px;
  margin-top: 5px;
  background-color: #DDDDDD;
}

/* btn-xs not supported any longer in bootstrap 4*/
.kw-nav {
  padding: 0;
}

.kw-nav div {
  width: 100%;
  margin: 0;
}

.kw-nav div li {
  list-style-type: none;
}

.kw-pages-website-farb-vorlage {
  padding: 10px 15px 0 15px;
}

.btn-group-xs > .btn, .btn-xs {
  padding: .2rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

.kw-btn-pagination {
  margin: 4px 3px auto 3px;
}

.kw-btn-pagination-num {
  /* elements are higher and do not need margin-top*/
  margin: auto 3px auto 3px;
}

.kw-list-item {
  padding: 5px 0 0 10px;
  height: 40px;
  /*padding: 5px;*/
  margin-bottom: 5px;
  color: red;
  background-color: #999999;
}

.kw-list-item-even {
  background-color: #bbbca1;
}

.kw-list-item-odd {
  background-color: #9b9c81;
}

.kw-list-item-dropdown-1 {
  background-color: #aaaa88;
}

.kw-list-item-dropdown-2 {
  background-color: #aaaa99;
}

.kw-item-text {
  color: #111;
  background-color: transparent;
}

.kw-new-btn-area {
  /*height: 35px; 
  padding-top: 5px; 
  padding-bottom: 35px; */
  padding: 0 15px 0 15px;
  background-color: #bbbca1;
  color: #FFFFFF;
}

.kw-new-btn-area button {
  margin-left: 10px;
  margin-right: -10px;
}

.kw-bt-remove-page-ref {
  color: #aa0000;
}

.kw-li-btn-right {
  margin-top: 2px;
  margin-right: 5px;
  margin-bottom: 2px;
}

.kw-li-btn-left-1 {
  margin-top: 2px;
  margin-right: 5px;
  margin-bottom: 2px;
}

.kw-li-btn-left-1 span {
  color: #FFE485;
}

.kw-li-btn-left-2 {
  margin-left: 15px;
  margin-top: 2px;
  margin-right: 5px;
  margin-bottom: 2px;
  color: #FFE485;
}

.kw-li-addnl-text {
  background-color: #C1DDC1;
  padding: 0px 5px 0px 5px;
  margin-left: 10px;
  border-radius: 3px;
}

.liBtnView {
  color: #333;
}

.liBtnEdit {
  color: #333;
}

.liBtnDel {
  color: #aa0000;
}

.cardBtnDel {
  color: #aa0000;
}

.cardBtnChangeImage {
  color: #00aaaa;
}

.cardDivBtnDel {
  margin-top: 0;
  padding: 0 5px 5px 0;
}

.kw-btn-level-up {
  color: #333;
}

.kw-btn-level-down {
  color: #333;
}

.kw-btn-level-ban {
  color: #866;
}

.kw-width-100p {
  width: 100%;
}

/* ******************************************************
**    KwContentAssign
****************************************************** */
.kw-edit-or-assign-content {
  background-color: #bbbca1;
  color: #FFFFFF;
  /*margin-top: 20px;
  margin-left: 15px;
  margin-right: 15px; */
}

.kw-btn-content-type {
  margin: 5px 0 5px 0;
  width: 100%;
  height: 170px;
  font-size: 1.0em;
}

.kw-btn-content-type img {
  width: 100%;
  height: auto;
}

.kw-ct-card-title {
  padding: 10px 0 10px 0;
  text-align: center;
  font-size: 1.2em;
}

.kw-single-ct-card {
  width: 200px;
  margin-left: 10px;
  text-align: center;
}

/* ******************************************************
**    General Shaping
****************************************************** */
.kw-shadowemblack {
  -moz-box-shadow: .125em .125em .25em #24202c;
  -webkit-box-shadow: .125em .125em .25em #24202c;
  box-shadow: .125em .125em .25em #24202c;
}

.kw-shadowemgrey {
  -moz-box-shadow: .125em .125em .25em #1b1b1b;
  -webkit-box-shadow: .125em .125em .25em #1b1b1b;
  box-shadow: .125em .125em .25em #1b1b1b;
}

.kw-shadowemwhite {
  -moz-box-shadow: .125em .125em .25em #cccccc;
  -webkit-box-shadow: .125em .125em .25em #cccccc;
  box-shadow: .125em .125em .25em #cccccc;
}

.kw-green-text-box {
  padding: 0 10px 0 10px;
  color: #ddd;
  background-color: green;
}

.kw-red-text-box {
  padding: 0 10px 0 10px;
  color: #333;
  background-color: red;
}

.kw-display-none {
  display: none;
}

.kw-margin-top-20 {
  margin-top: 20px;
}

.kw-admin-strong {
  font-weight: bold;
  color: #441700;
}

.kw-move-left {
  width: auto;
  box-shadow: none;
}

.kw-blur {
  filter: blur(1px);
}

.kw-legend {
  background-color: #bbbca1;
  color: #333;
}

.kw-version-line {
  padding: 10px 5px 0 0;
  font-size: 20px;
}

.kw-alert-success {
  background-color: #81C15B;
  border-color: #81C15B;
  color: #FFFFFF;
}

.kw-alert-success-transparent {
  background-color: transparent;
  border-color: #81C15B;
  color: #8e9138;
}