/*The easiest way to manage your CSS vars is by declaring them into the :root pseudo-class. 
Given the fact that the CSS variables follow the rules like any other CSS definition, 
having them in the :root will ensure that all selectors will gain access to these variables.
*/
:root{
  
    --bg_padding:220px;

    --credit-size:10px;
    --border-radius: 5px;
    --rotate_value:353deg;
    --boder_size:1px;

    --col_shadow:rgba(75, 75, 75, 0.4);
    --shadow_style: 5px 8px 8px var(--col_shadow); 

    --col_white07:rgba(255, 255, 255, 0.7);
    --col_white08:rgba(255,255,255,0.8);

    --col_green: rgb(46,124,116);
    
    
    /* --col_lilac:rgb(129,88,147); */
    --col_lilac: #89549b;
    --col_lilac_radio:rgb(228, 182, 247);
    /* --col_lilac: #815694;  */
    --col_lilac_light:rgb(167,122,189); /* navbar */
    /* --col_lilac_hover:rgb(92, 35, 116); */
    --col_lilac_hover:#a878bf;
    --col_btn_backgrnd:  rgba(148, 126, 167, 1.0);
    

    --col_backgrnd_02:rgba(247, 190, 186, 0.2);
    --col_backgrnd:rgba(247, 190, 186, 0.6);

    --col_backgrnd_08:rgba(247, 190, 186, 0.8);
    --col_backgrnd_09:rgba(247, 190, 186, 0.9);
    --col_backgrnd_10:rgba(247, 190, 186, 1.0);

    --col_backgrnd_yellow:rgba(255, 236, 205, 0.7);
    
    --col_border: rgb(197, 193, 203);
    --col_border_transp: rgba(197, 193, 203, 0.8);
    --col_text_grey: rgb(112, 108, 123);
    --col_line:rgba(210, 131, 126, 0.3);
    --col_nav_active:rgb(54, 213, 10);

}

*{
    /* font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 300; */
    font-family: Arial, Helvetica, sans-serif;
}


.height-240{
  max-height: 240px;
}
.wdh{ 
    display: none;
 }  
 .container-main{
  margin-top: 90px;
 }

 .max-w-380{
   max-width: 380px;
 }

 
 .line{
   height: 2px;
   background-color: var(--col_line);
   margin-top: 1.2em; 
   margin-bottom: 1.2em;
 }

 .doubleUnderline {
  border-bottom: 3px double;
  /*text-decoration:underline;
  border-bottom: 1px solid #000;*/
}
.singleUnderline {
  border-bottom: 1px solid;
  /*text-decoration:underline;
  border-bottom: 1px solid #000;*/
}


h1,h2,h3,h4,h5, .display-1,.display-2,.display-3,.display-4,.display-5 {
  /*color: var(--col_lilac);*/
  opacity: .8;
}
h1,h2,h3,h4,h5 {
  font-weight: bold;
}

/* https://stackoverflow.com/questions/23949804/how-to-change-link-color-bootstrap */

xa{
  font-weight: bolder;
}
xa[class="text-lilac"] {
  color: var(--col_lilac)!important;
}
xa[class="text-lilac"]:hover {
  color: var(--col_lilac_hover)!important;
}

ul {
  width: 99%;
  margin: auto;
}

input[type='radio']{
  color:greenyellow !important;

}
/* Repaint radio */
input[type='radio']:after {
  /* width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -3px;
  left: -1px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block; */
  /* visibility: visible; */
  visibility:hidden;
  /* border: 2px solid var(--col_border); */
}

input[type='radio']:checked:after {
  /* width: 15px;
  height: 15px;
  border-radius: 15px; */
  width: 1em;
  height: 1em;
  border-radius: 1em;
  top: -3px;
  left: -1px;
  position: relative;
  background-color: var(--col_lilac_radio);
  content: '';
  display: inline-block;
  visibility: visible;
  border: 4px solid var(--col_lilac);
}

 input[type=checkbox]  {
  color: #ccc;
  /* font-style: italic; */
} 
input[type=checkbox]:checked  {
  /* color: white; */
  /* font-style: normal; */
  border-width: 0;
  /* background-color: var(--col_btn_backgrnd)!important ; */
  background-color: var( --col_backgrnd_08)!important ;
} 

/* Modals -------------------------------------------------------------------- */

 .modal-footer, .modal-header{
  color: white !important;
  /* background-color: var( --col_backgrnd_08); */
  background-color:  var( --col_btn_backgrnd);
}
.modal-body{
  color: var(--col_text_grey);
  background-color: var( --col_backgrnd_02);
}



/* Navbar -------------------------------------------------------------------- */

.___navbar-custom {
  background-color: var(--col_lilac_light);  
  /* == color: #a878bf; */
}
.navbar-custom .navbar-toggler {
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.7) !important;
}


.navbar-custom .dropdown-menu { /* dropdown background */
  /* background-color: var(--col_lilac_radio); */
  background-color: rgb(160,124,170);
}
.navbar-custom .dropdown-menu>li>a { /* a href in dropdown überschreibt link-light link-dark */
  /*text-color überschreibt link-light link-dark */
  color: var(--col_white07);
  /* Hintergrund der einzelnen links: */
  /* nicht verwendet: background: red; */
}
.navbar-custom .dropdown-menu>li>a:hover { /* hovered item */
  background-color: var(--col_lilac);
  color:white;/*text-color*/
}
 .navbar-custom .dropdown-menu>li>a:active { /* activated item */
  color:white;/*text-color*/
}


/* Footer ---------------------------------------------------------------------*/
#footer-bar a,
#footer-bar a:link{
  /* background-color: var(--col_lilac_light); */
  color: var(--col_lilac) !important;
  /* border-radius: var(--radius) */
}

#footer-bar a:hover {
    /* background-color: var(--col_lilac_light); */
    color: rgb(230, 23, 23) !important;
    /* border-radius: var(--radius) */
  }

  #footer-bar{
    color: var(--col_lilac)!important;
    background-color: white !important;
    opacity: 0.9;
}


/* Card ---------------------------------------------------------------------*/

/* Text grey -------------------------------------------------------  */
.card, .alert, .offcanvas, .text-grey{
  color: var(--col_text_grey)!important;
}

 

/* Color & Border */
 .card, .alert, .carousel-inner, .img_credit_container, .rounded-border{
  /* border-radius: 4 !important; */
  border-radius: var(--border-radius)!important;;
  /* border: 2px solid var(--col_border_transp) !important; */
  border: 2px solid var(--col_border)!important;
  overflow: hidden;
}

/* back-color */

.card, .alert, .carousel-inner {
  background-color: var(--col_backgrnd) !important;
}

.offcanvas{
  background-color: var(--col_backgrnd_09)!important;
 /* color:var(--col_text_grey); */
}
.card-body, .alert-body{
  /* background-color: var(--col_backgrnd) !important; */
  /* border: 2px solid var(--col_border_transp); */
  /* border-radius: 4; */
  opacity: 0.9 !important;

}

/* Alert ---------------------------------------------------------------------*/
.alert-custom-yellow{
  background-color: var(--col_backgrnd_yellow) ; /*transparent 0.8*/
  border: 2px solid var(--col_border_transp);
  color: var(--col_text_grey);
}

.alert-custom-default{
  background-color: var(--col_backgrnd) ;
  border: 2px solid var(--col_border_transp);
  color: var(--col_text_grey)
}

/* Button Custom1 --------------------------------------------------------------------------------------------------*/
/*This is modifying the btn-primary colors but you could create your own .btn-something class as well
https://stackoverflow.com/questions/25923623/change-hover-color-on-a-button-with-bootstrap-customization
*/
._btn-custom1 {
  color: #fff;
  /* background-color: #0495c9; */
  background-color: var(--col_btn_backgrnd) ;
  /*border-color: #357ebd; set the color you want here*/
}
._btn-custom1:hover, .btn-custom1:focus, .btn-custom1:active, .btn-custom1.active, .open>.dropdown-toggle.btn-primary {
  color: #fff;
  background-color: var(--col_lilac_hover);
  /*border-color: #285e8e; set the color you want here*/
}


/* rotated Message ----------------------------------------------------------------*/

.rotate-10{
  margin-top: 1em;
  transform: rotate(-10deg);
  float:left;
}



body { 
  /* The fixed navbar will overlay your other content, unless you add padding to the top of the body. */
  padding-top: 40px; 
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 90px;
}



/* Flip-Card ----------------------------------------------------------------- */

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the 
       flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect 
       
       https://www.w3schools.com/howto/howto_css_flip_card.asp
       */

       .flip-card {
        max-width: 380px;
        background-color: transparent;
        /* width: 200px;  -> w-100*/
        height: 200px;
        /* border: 1px solid #f1f1f1; */
        /* Remove this if you don't want the 3D effect */
        /* perspective: 1000px; */

        }

        /* This container is needed to position the front and back side */
        .flip-card-inner {
          position: relative;
          width: 100%;
          height: 100%;
          text-align: center;
          transition: transform 0.9s;
          transform-style: preserve-3d;
          /* border: 2px solid #f1f1f1; OK */
          /* overflow: hidden; */
          /*border-color: rgb(203, 176, 182);
          /*neu runde Ecken bringt nicht wenn bild in inner*/
          /* border-radius: 5px; */
          /* border-radius: var(--border-radius); OK */
      }
      /* Do an horizontal flip when you move the mouse over the flip box container */
      .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
      }

      /* Position the front and back side */
      .flip-card-front,
      .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        /* -webkit-backface-visibility: hidden; */
        /* Safari */
        backface-visibility: hidden;
        /* border-radius: 5px; */
        border-radius: var(--border-radius);
        /* border: 2px solid rgb(203, 176, 182);  --col_border */
        border: 2px solid var(--col_border);
        /* overflow: hidden; */
        /*neu ecken rundung verstecken*/
      }
      /* Style the front side (fallback if image is missing) */
      .DISABLED_flip-card-front {
       /* moved to index.php inline style for easy replacement */
        background: url("../images/martin-adams-qriVlQKnqS8-unsplash_500px.jpg");
        background-size: cover;  background-position: center;
        
      }
      /* Style the back side */
      .flip-card-back {
        background-color: var(--col_backgrnd);
        color: white;
        transform: rotateY(180deg);
      }

/* Shadow -------------------------------------------------------------------- */

.my-shadow{
    /* transform: rotate(353deg); */
    
    /* transform: rotate(var(--rotate_value)); */
    box-shadow: var(--shadow_style); /* box-shadow: 3px 3px 5px rgb(90, 90, 90, 0.8); */
}




/* Background Image ----------------------------------------------------------- */
.OLD_background-image{
    /* position: relative; */
    background:url("../images/kyle-cottrell-QGSD-bfJHIw-unsplash-hell 2000.jpg");
    /* min-height: 100vh; */
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
}
.background-image {
  background: url("../images/kyle-cottrell-QGSD-bfJHIw-unsplash-hell 2000.webp") center/cover no-repeat;
  background: -webkit-image-set(
    url("../images/kyle-cottrell-QGSD-bfJHIw-unsplash-hell 2000_big.webp") 1x, 
    url("../images/kyle-cottrell-QGSD-bfJHIw-unsplash-hell 2000.webp") 2x) 
    center/cover no-repeat, 
    url("../images/kyle-cottrell-QGSD-bfJHIw-unsplash-hell 2000.jpg")
    center/cover no-repeat;
  background-attachment: fixed;
}
/* Images ------------------------------------------------------------------------- */
img {
  pointer-events: none; /* remove all mouse-actions on image */
}

  /* Image rotate ----------------------------------------------------------------- */
  /* If screen size is more than 410px wide, set the value */
@media screen and (min-width: 800px) {
    .img-rotate {
        /* max width -> 320px */
        max-width: 280px; /* Will be AT MOST 320px wide */
        max-height: 280px;
        width: 70%;
        padding-top: 70%; 
        /*90% von width!!!*/
        }
  }


  /* Hide & show elements formaly used for img rotate
  and alert! ----------------------------  */

  /* Show/hide if smaller than 701 px */
  @media screen and (max-width: 1400px) {
    .show-big {
        display: none;
        }
    .show-small {
      display:inline;
      }
  }
  /* Show/hide if bigger than 1400 px */

  @media screen and (min-width: 1400px) {
    .show-small {
        display:none;
        }
  }

  /* Show/hide if smaller than 701 px */
  @media screen and (max-width: 768px) {
    .show-big-symbol {
        display: none;
        }
    .show-small-symbol {
      display:inline;
      }
  }
/* Show/hide if bigger than 768 px */
  @media screen and (min-width: 768px) {
    .show-small-symbol {
        display:none;
        }
  }

  /* Image with animation ------------------------------------------------------------- */
  .img-animate{
    width: 100%;
    
    /* max-width: 100px; */
    padding-top: 100%;
    position:relative;
  }

  .img-animate img{
    display:block;
    /* display: inline-block; */
    /*width:var(--img_rotate_size);*/
    width:100%;
    max-width: 240px;
    margin:0;
    padding:0;
    position:absolute;
    top: 0px;
    /* background-color: aquamarine; */
            /*https://jsfiddle.net/gionaf/Ugc5g/
                https://stackoverflow.com/questions/16771225/css3-rotate-animation */
    animation:spin 300s linear infinite;
  }

  /*
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    */
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

    @keyframes orbit {
        0% {
          transform: rotateZ(0deg); }
      
        100% {
          transform: rotateZ(-360deg); } 
        }

/* set credit: ------------------------------------------------ */

img {
  max-width: 100%;
  max-height: auto;
  object-fit: cover;
}
/* .img-credentials { */
  .img_credit_container{
  position: relative;
  /* text-align: center; OK, better left*/
  color: white;
  /* border-radius: var(--border-radius);
        border: 2px solid var(--col_border); */
}
  /* glob var  --credit-size: 8px; */
  /* Bottom left text */
  .bottom-left {
      font-size: var(--credit-size);
      position: absolute;
      bottom: 8px;
      left: 16px;
  }
  
  /* Top left text */
  .top-left {
      font-size: var(--credit-size);
      position: absolute;
      top: 8px;
      left: 16px;
  }
  
  /* Top right text */
  .top-right {
      font-size: var(--credit-size);
      position: absolute;
      top: 8px;
      right: 16px;
  }
  
  /* Bottom right text */
  .bottom-right {
      font-size: var(--credit-size); 
      position: absolute;
      bottom: 8px;
      right: 16px;
  }
  
  /* Centered text */
  .centered {
      font-size: var(--credit-size);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
/* end test set credit  ------------------------------------------------  */

/*  Data-Tip: -> https://stackoverflow.com/questions/19480010/adding-a-tooltip-to-an-input-box */
[data-tip] {
  position:relative;
}
[data-tip]:before {
  content:'';
  /* hides the tooltip when not hovered */
  display:none;
  content:'';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #1a1a1a;	
  position:absolute;
  top:30px;
  left:35px;
  z-index:8;
  font-size:0;
  line-height:0;
  width:0;
  height:0;
}
[data-tip]:after {
  display:none;
  content:attr(data-tip);
  position:absolute;
  top:35px;
  left:0px;
  /*padding:5px 8px;*/
  padding:0px 5px;
  /*background:#1a1a1a;*/
  background:#ae82bb;
  color:#fff;
  /*color:#ae82bb; */
  z-index:9;
  /*font-size: 0.75em;*/
  font-size: 1em;
  /*height:18px;*/
  height: 1.6em;
  /*line-height:18px;*/
  line-height: 1.5em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  white-space:nowrap;
  word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
  display:block;
}