/*Body soll nicht scrollbar sein */
html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
    
}

/*Scrollbars für Touchdevice*/
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 5px;
}

::-webkit-scrollbar:horizontal {
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 0px;
    border: 1px solid #ffffff;

}

::-webkit-scrollbar-track {
    border-radius: 2px;  
    background-color: #ffffff; 
}



.hidescrollbar::-webkit-scrollbar { width: 0 !important }


table.table-bordered {
   border: 01px solid black;
}

 /* Damit das erste Modal scrollbar ist wenn das zweite geschlossen wurde */
.modal { overflow: auto !important; }       

.btn{
   border-radius: 10px;
   border-width: 1px;
} 



.btn-block {
    padding: 8px;
    // define values in pixels / Percentage or em. whatever suits 
    //   your requirements
}

button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{
  outline:none !important;   
}

.form-control{
   border-radius: 0px;
}

////////////////////////
//Buttons Outline


//primary
.btn-outline-primary {
  color: #013328; //#100C0D;        
  background-color: white; //rgb(243,243,243); //#ffffff   rgb(240,240,240)     #e7f0f5
  border-color: #100C0D;
  //border-radius: 17px;
  border-width: 0px;
}

.btn-outline-primary { //muss zweimal da stehen, keine Ahnung warum ???
  color: #013328; //#100C0D;        
  background-color: white; //rgb(243,243,243);  
  border-color: #100C0D;
  //border-radius: 17px;
  border-width: 0px;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:hover{
  color: #ffffff;        
  background-color: #100C0D;    
  border-color: #000000;
}


//secondary
.btn-outline-secondary {
  color: rgb(176,176,176) !important;      
  background-color: white; //rgb(243,243,243); //#ffffff   rgb(240,240,240)     #e7f0f5
  border-color: rgb(176,176,176) !important;  
  border-radius: 17px;
  border-width: 1px;
}

.btn-outline-secondary { //muss zweimal da stehen, keine Ahnung warum ???
  color: rgb(176,176,176) !important;           
  background-color: white; //rgb(243,243,243);  
  border-color: rgb(176,176,176) !important;   
  border-radius: 17px;
  border-width: 1px;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:hover{
  color: #ffffff;        
  background-color: #100C0D;    
  border-color: #000000;
}

.btn-outline-secondary:disabled{
  color: rgb(176,176,176);        
  background-color: #ffffff;  
  border-color: #100C0D;
}

//info
.btn-outline-info {
  color: #013328;        
  background-color: #ffffff;
  border-color: #013328;
  //border-radius: 17px;
  border-width: 2px;
}

.btn-outline-info { //muss zweimal da stehen, keine Ahnung warum ???
  color: #013328;
  color: #013328;         
  background-color: #ffffff;
  border-color: #013328;
  //border-radius: 17px;
  border-width: 2px;
}


.btn-outline-info:focus,
.btn-outline-info.focus,
.btn-outline-info:hover{
  color: #013328;        
  background-color: rgb(247,247,247);
  border-color: #000000;
}

//success
.btn-outline-success {
  color: #CC8B65;        
  background-color: #ffffff;
  border-color: #CC8B65;
  border-radius: 17px;
  border-width: 2px;
}

.btn-outline-success { //muss zweimal da stehen, keine Ahnung warum ???
  color: #CC8B65;
  color: #CC8B65;         
  background-color: #ffffff;
  border-color: #CC8B65;
  border-radius: 17px;
  border-width: 2px;
}


.btn-outline-success:focus,
.btn-outline-success.focus,
.btn-outline-success:hover{
  color: #CC8B65;        
  background-color: rgb(247,247,247);
  border-color: #000000;
}




//gekauft Button von jemand
.btn-outline-gekauft {
  color: #ffffff;
  background-color: #013328;  //#e74c3c
  border-color: #e74c3c;
  //border-radius: 17px;
  border-width: 0px;
}
.btn-outline-gekauft { //muss zweimal da stehen, keine Ahnung warum ???
  color: #ffffff;
  color: #ffffff;
  background-color: #013328;  //#e74c3c
  border-color: #e74c3c;
  //border-radius: 17px;
  border-width: 0px;
}

//gekauft Button von mir
.btn-outline-gekauft-mir {
  color: #ffffff;
  background-color: #CC8B65;  //#e74c3c
  border-color: #e74c3c;
  //border-radius: 17px;
  border-width: 0px;
}
.btn-outline-gekauft-mir { //muss zweimal da stehen, keine Ahnung warum ???
  color: #ffffff;
  color: #ffffff;
  background-color: #CC8B65;  //#e74c3c
  border-color: #e74c3c;
  //border-radius: 17px;
  border-width: 0px;
}





.divider{
    position: relative;
    width: 100%;
    height: 1px;
    background: #ddd;
    margin: 30px auto;
}
.divider:after{
  content: 'oder';
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  font-size: 12px;
  color: #666;
  background: #fff;
  border:1px solid #f0f0f0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  text-align: center;
}

.icon-size{
   font-size:26px; 
}

 /* Add Button rechts unten*/
.overlaybutton {
    position: fixed; /* Stay in place */   
    height: 54px ;
    width: 54px;    
    z-index: 10; /* Sit on top */    
    right: 14px;
    bottom: 14px;
    border-radius: 25px;
    /*background-color: rgb(255,255,255);  */
    text-align: center;    
    /*box-shadow: 3px 3px 10px -2px rgb(160,160,160);  */
    box-shadow: 4px 4px 10px -2px rgb(160,160,160);
    //border:0.3px solid rgb(186,186,186);

}
.overlaybutton-innen {
    font-size:25px; 
    position: relative; 
    top:15px;
    /*top: 5px;   */
}


 /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    /*transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    transition-delay: 500ms; /*Ladesymbol nur anzeigen wenn die Ladezeit länger als 0,5 sek ist*/
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

 /* loadbutton2*/
.loadsymbol2overlay {
  margin-left: auto;
  margin-right: auto;
    height: 31px;
    width: 31px;
    border-radius: 20px;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 50%;
    margin-left: -15px;
    top: 65px;
    background-color: rgb(255,255,255); /* Black fallback color */
    border: 1px solid rgb(224,224,224); 
    //overflow-x: hidden; /* Disable horizontal scroll */
}

/* Position the content inside the overlay */
.loadsymbol2overlay-content {
    position: relative;
    left: 6px;
    top: 5px;
    color:#013328;
}

/* Panel Collapse Icon hoch und runter */
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
    
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

/*keine Abrundung der Boxen*/
.panel {
    border-radius: 10px;
    /*border:1px solid black;*/
    border:1px solid rgb(192,192,192);
    padding:0px;

    
}


/* Damit die Navbar immer Collapsed ist */
body {
	padding-top:70px;
}

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;    
}   
ul.navbar-nav li {
  margin: 8px;
  padding: 0px;
}                         


/* Damit die Nav scrollbar ist */
#bs-example-navbar-collapse-1
{
 overflow-y: scroll !important;
/* max-height: 400px !important; */
}


/* Für das x beim search feld*/
::-ms-clear {
  display: none;
}

.form-control-clear {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer; 

}

/*Popup Image Container */
.bigimagecontaineroverlay {
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity */
    overflow: hidden; /* Disable  scroll */
    padding: 15px;
}

.bigimagecontaineroverlay img{
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
  max-width: 100%; 
  height: auto;
  
}

/* Page Scroll */
.pagescroll {
  position: relative;
  overflow-y:auto; 
  height:calc(100vh - 55px);
  top:-15px;
  border: 0px solid blue; 
  margin-bottom: -10px;
  /*scrollbar-width: none;   Gilt nur für Firefox */
  -webkit-overflow-scrolling: touch;  
    
}

/* Page Headline */
.pageheadline {
  position: relative;
  background-color: white; 
  margin: 0 auto;
  max-width:850px;
  top:0px;
  text-align: center;
  font-weight: ;
  padding: 5px; 
  border: 1px solid silver; 
  margin-bottom:8px;
}

/* Page Submenu */
.pagesubmenu{
    position: relative; 
    top:0px; 
    margin: 0 auto;
    max-width:850px;
    height:52px;   /* 52 */ 
    background: ;   
    z-index: ;  /* 10000 */   
    padding: 8px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space:nowrap; 
    margin-bottom:10px; 
    border: 0px solid silver; 
    /*scrollbar-width: none;   Gilt nur für Firefox */
    /*-webkit-overflow-scrolling: touch;   */
}

/* Buttons Shop*/
.shopbuttons {
  width:100%; 
  max-width:350px;
  height:100px;  
  background-color: white; 
  padding:5px; 
  margin-bottom:5px;
  border: 1px solid silver; 
  overflow: /*hidden;  Disable  scroll */
}
/* Buttons Shop*/
.shopbuttons img {
  position: relative;
  top: ;

  max-width: 180px; 
  max-height: 54px;

}

/* ***************************************** */
/* Side Navigagion */
/* ***************************************** */

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 260px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    white-space: nowrap;
    z-index: 20000; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #ffffff; /* Black #111   */
    overflow-x: hidden; /* Disable horizontal scroll */
    
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;  /* Damit es flüssig läuft */
    
    /*padding-top: 20px; /* Place content 60px from the top */
    /*padding-left: 10px; /* Place content 60px from the top */
    display: none;
    /*transition: 0.3s;  0.5 second transition effect to slide in the sidenav */
}

.sidenav::-webkit-scrollbar {
    display: none;
}

.navbarcolorfade{
    background-image: linear-gradient(to bottom right, #100C0D, #013328);  /* #013328*/
}

/* The navigation menu links 
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}       */

/* When you mouse over the navigation links, change their color  */
.sidenav a:hover {
    color: #f1f1f1;
}    
.sidenav a:link {
    color: rgb(64,64,64);
}  
.sidenav a:visited {
    color: rgb(64,64,64);
}  
.sidenav a:active  {
    color: rgb(64,64,64);
}      

small {
    color: #909090;
    font-size: 11px;
}

/* ***************************************** */
/* Kommentare, Nachrichten, Chat */
/* ***************************************** */
.divmessage1 {
    background-color: rgb(240,240,240);    
    border-radius: 12px;
    padding:5px;
    width: auto;
}
.divmessage2 {
    background-color:  rgb(240,240,240); 
    border-radius: 12px;
    padding:5px;
    width: auto;
}

.messagedate {
    color:rgb(128,128,128);
    font-size: 11px;
}

/*Rahmen für aktiven Wunsch*/
.borderaktiv {
    /*border: 2px solid #013328;*/
    outline: 2px solid #100C0D;
}

/* Text Selection verhindern  ->>> in disableselect.css           //Nur ausgeben wenn App-Version
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
}

[contenteditable="true"] , input, textarea {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    -o-user-select: auto !important;
    user-select: auto !important;  
}      */         

.row{
    margin: 0px;
}

.container{
    max-width:850px;
}


hr{
    height:1px
    margin-top:-5px; 
    margin-bottom:-5px; 
    margin:5px auto;
}


.btn-round{
border-radius: 15px;
}

/* Ladeanimation für Submenü Buttons */
.loadanimation {

    animation:myfirst 2s;
  -moz-animation:myfirst 2s infinite; /* Firefox */
-webkit-animation:myfirst 2s infinite; /* Safari and Chrome */
  }


  @-moz-keyframes myfirst /* Firefox */
{
0%   {background:#95a5a6; border-color: #95a5a6;}
50%  {background:#100C0D; border-color: #100C0D;}
100%   {background:#95a5a6; border-color: #95a5a6;}
}
 
    @-webkit-keyframes myfirst /* Firefox */
{
0%   {background:#95a5a6; border-color: #95a5a6;}
50%  {background:#100C0D; border-color: #100C0D;}
100%   {background:#95a5a6; border-color: #95a5a6;}
}




/* Checkboxen */
.form-check-input{
  position: relative;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #95a5a6;
}

.form-check-label{
  position: relative;
  top: -6px;
  left: 0;
}

/* Dropdown Navbar Menu rechts */
.navbar-dropdown{
  position: absolute;
  top: 55px;
  right:5px;
  /*width: 100px;*/
  /*height: 50px;*/
  border:1px solid rgb(204, 201, 201);
  border-radius: 5px;
  background: white;
  z-index: 200001; /* Sit on top */   
  padding:10px;
}

.divhinderclick{
  position: fixed; /* Stay in place */  
  height: 100%;
  width: 100%;
  z-index: 200000; /* Sit on top */  
}

.affiliatelink{

}

/* Amazon Produkt Suche */

.card-img-top {
    flex-grow: 1;
    object-fit:contain;
}
.card-body{
    flex-grow:0;
}

.price{
    font-weight: bold;
}



.heartbutton{
    //color:#fa2c4d;
    font-size:22px;
}

.textmaxlines{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

 /* amazonproductpage */
.amazonproductpage {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: white; /* Black fallback color */

    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y:auto; 
    -webkit-overflow-scrolling: touch;  
}

 /* Add Button rechts unten*/
.scrollupbutton {
    position: fixed; /* Stay in place */   
    height: 54px ;
    width: 54px;    
    z-index: 10001; /* Sit on top */    
    right: 14px;
    bottom: 14px;
    border-radius: 25px;
    background-color: rgb(255,255,255);  
    text-align: center;    
    border:0.3px solid rgb(186,186,186);

}
.scrollupbutton-innen {
    font-size:25px; 
    position: relative; 
    top:15px;
    color:rgb(168, 168, 168);
    /*top: 5px;   */
}

  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }