html {
  height: auto;/*100%;*/
  padding-top: 33px !important; /*fixed high after navbar*/
}

body {
    height: 100%;
    margin:0;
    padding:0;
    padding-right: 0 !important; /*Only when Modal is called the padding is moving, here to set to avoid*/
    padding-top: 33px !important; /*fixed high after navbar*/
    background-color: #e5e5e5 !important;
    /* is now in base.html for dynamic background image
    background-image: url('Dash_background6.png')!important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;*/
    background: transparent;
  }
  
/*.bs-tooltip-right {
  background-color:#12a51c !important
}*/

.btn.active {
  background-color: #e61a1a;
}

.tbl {
  border-spacing: 2px;  /*Trennliniendicke*/
  border-collapse: separate;
  background-color:#282828;
  width: 100%;
}
.tbl_row:nth-child(odd) {
  background-color: #d5d5d5;
}
.tbl_row:nth-child(even) {
  background-color: #f5f5f5;
}
.tbl_head {
  text-align: left;
}

.tbl_cell {
  padding: 8px;
  text-align: left;
}
.tbl_hd {
  padding: 8px;
  background-color: rgb(193, 193, 193);
}
/*modal formular*/
.modal-backdrop {

  z-index: 1040 !important;
}
.modal-open {
  overflow: hidden;
  z-index: 1041;
}
.modal-content {
  margin: 2px auto;  display: none;
  z-index: 1100 !important;
}
.modal-dialog {
  top: 100px;
  right: center;
  min-width: 1000px;
  background-color:#fff;
}
.select-menu {
  /*min-width: 800px;*/


}



.box-shadow--6dp {
  box-shadow: 0 6px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 6px -1px rgba(0, 0, 0, .2)
}
.pane-center{
  z-index:inherit !important;
}

.col {
  margin: 10px 0;
  width: 200px !important;
  min-width: 200px;
  max-width: 200px;
}

.carousel-inner {
  background-color:#343a40/*#FF5000*/

}

.carousel-inner .item img {
    position: relative;
  width: 100%;
  height: 100%;
    
    /*height: 32rem;
    object-fit: cover !important;
    display: contents;*/
  }  
.foto_frame{
  border-radius: 8px;
  background-color: rgb(#fff);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.footer { 
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here
  height: 160px; */
  background-color: #ce1313;
  transform:translateY(0px);
  }
.view {
    position: relative;
    overflow: hidden;
    margin-left: 0px;
    margin-top: 0px;
    outline: unset !important;
    /*background-color: #FF5000; rgba(52, 58, 64, 1);*/

   /* 
    -ms-transform:  translateY(-1px);
    -moz-transform:  translateY(-1px);
    -webkit-transform: translateY(-1px);
    transform: translateX(0%) translateY(-1%); darf nicht aktiviert werden, da sonst modal nicht richtig funktioniert
    */
    
  }
.navbar-dark .navbar-nav .nav-link {
    color: rgba(235, 235, 235, 0.5)
}
.carousel-control-prev {
    background-color:  transparent;
    opacity: 4;
    border: none;

  }
.carousel-control-next {
    background-color:  transparent;
    opacity: 4;
    border: none;
    
  }
  .alert {
    margin-bottom: 0 !important;
  }

  video {
    position: relative;
    width: auto;
    height: auto;
    top: 0%;
    left: 0%;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    -ms-transform: translateX(0%) translateY(0%);
    -moz-transform: translateX(0%) translateY(0%);
    -webkit-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(-3%); /* Parameter to move the video in x-y pos*/
    margin-top: 0px !important;
    padding-top: 0px !important;
    border-image: 0px;
    /*
    outline: unset !important;
    box-shadow: none;
    display: flex;
    /*border-top: none !important;
    box-shadow: none !important;
    border-image-width: 0px;
    border-top: 0px;
    -o-border-image: 0px;*/
  } 
  video:focus{
    outline: 0!important;
    outline: none!important;
    outline-width: 0;
   -webkit-tap-highlight-color: rgba(0,0,0,0)!important;
}

.disable-link {
    pointer-events: none;
}

textarea {
  resize: vertical;
  display:block;
  width: 97%;
  height: 90%;
  margin-bottom: 10px;
  background-color: #e9ecef;
}

img#client_layout {
  position: absolute;
  opacity: 0.1;
  pointer-events: none;
  max-width: 200%;
  height: 145px;

}

ul {
  font-size:10px;
  list-style-type: none;
  height: auto;
  width: 100%;
}
.client_head {
  /*position: relative;*/
  max-width: 9999px; /* Maximum width */
  margin: 0 0; /* Center it */
  width: 100%;
  /*background-color: #00030F;*/
  background-image: url('saas_head_person.jpg'); /*head_city.jpg');*/
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
}

.client_head .content {
  position: relative; /* Position the background text */
  top: 20px; /* At the bottom. Use top:0 to append it to the top */
  left: 15px;
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 30%; /* Full width */
  border-radius: 8px;
  height: auto;
  padding: 30px; /* Some padding */
  margin-bottom: 20px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
  
}
.admin_head {
  /*position: relative;*/
  max-width: 9999px; /* Maximum width */
  margin: 0 0; /* Center it */
  width: 100%;
  /*background-color: #00030F;*/
  background-image: url('admin_head.jpg'); /*head_city.jpg');*/
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
}
.admin_head .adm_content {
  position: relative; /* Position the background text */
  top: 20px; /* At the bottom. Use top:0 to append it to the top */
  left: 15px;
  background: rgba(0, 0, 0, 0.7); /* Black background with 0.5 opacity */
  border-radius: 8px!important;
  color: #f1f1f1; /* Grey text */
  width: 70%; /* Full width */
  height: auto;
  padding: 30px; /* Some padding */
  margin-bottom: 20px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
}
/* Kimetis-Farben orange, blau, grau */

.ki_orange_text {
  color: #FF5000; 
}

.ki_orange_border {
  border-color: #FF5000; 
}

.ki_orange_bg {
  background-color: #FF5000;
}

.ki_blau_text {
  color: #1B6CC6;
}

.ki_blau_border {
  border-color: #1B6CC6;
}

.ki_blau_bg {
  background-color: #1B6CC6;
}

.ki_grau_text {
  color: #898989;
}

.ki_grau_border {
  border-color: #898989;
}

.ki_grau_bg {
  background-color: #898989;
}


/* Hintergrundfarben für Container */

/* nicht nutzen */
.hp_buff_bg {
  background-color: #F2CA85;
}

.hp_papaya_bg {
  background-color: #FFF1D7;
}

/* nicht nutzen */
.hp_desert_bg {
  background-color: #EDC9AF;
}

.hp_light_bg {
  background-color: #FED8B1;
}

/* nicht nutzen */
.hp_hellblau_bg {
  background-color: #add8e6;
}

.hp_aliceblau_bg {
  background-color: #f0f8ff;
}


/* Navigation */
.nav{
  margin-top:10px;
  width:100%;
  background-color: dark;
  }

.navbar {
  background-color: #343a40;
  border-bottom: 4px solid #FF5000
}

.nav-item {
  background-color: #343a40;
  color: #FFFFFF;
}
.nav-item:hover {
  color: #FF5000;
}
.dropdown-item:focus, .dropdown-item:hover {
  color: #FF5000 !important;
}
.dropdown-item, .dropdown-divider, .dropdown-menu{
  background-color: #f3f3f3 !important;
}
.dropdown-menu{
  box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.nav-link {
  cursor: pointer;
  color: #a4a4a4!important;
  /*background-color: #9c2222;*/
}
.nav-link.btn.disabled{
  background-color: #343a40!important;
  border: 0;
}

#delete, #change, #add{
  background-color: #343a40!important;
  border: 0;  
}

.nav-link:hover{
  color:#FF5000 !important;
}

.navbar.navbar-nav{
  background-color: #343a40;
  color: #12a51c;
  
}
.nav-item.input-group{
  margin-top: 4px;
}

.nav-link.disabled, .nav-item.disabled{
  color: rgba(101, 101, 101, 0.5)!important;
}

.card:hover{
  transform: scale(1.05); /*popping larger with mouse over*/
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}