/* 
    Created on : 10.11.2023, 08:27:46
    Update     : 10.11.2023, 09:27:46
    Author     : pedro
*/

@import "../css/bootstrap.css";

:root {
  --active_bild-bg-color: black;
  --border_radius: 10px;
  --bild_width_height: 58px;
  --margin_divWithImg: 12px;
  --searchimg_width: 19px;
  --div_border_radius: 40%;
  --size_sidebar: 50px;
  --reaearch_bar_container: #75778b;
  --standard_color2weiss: #e4e4e4;
  --divWithImageColor: #fff8e5;
  --color_marked: #59b4d4;
  --color_light: #1283bc;
  --color_dark: #f2be22;
  --media_min_width: 300px;
  --media_max_width: 601px;
  --font_size_body: 10px;
  --color_: white !important; /*#2B6777;*/
  --body_background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body {
  background-size: cover;
  -ms-overflow-style: scrollbar;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--color_);
  background: var(--body_background);
  margin: 0;
  padding: 0;
}

body.color-dark {
  --body_background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.curved {
  border-radius: var(--border_radius);
}

.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.divContentDivWithImg {
  width: clamp(5.3rem, 10vw, 8rem);
  .divWithImg,
  .divWithImg img {
    width: clamp(3rem, 10vw, 6rem);
    height: clamp(3rem, 10vw, 6rem);
  }
}

input,
select,
textarea {
  font-size: clamp(0.5rem, 2.5vw, 1rem);
}

.spancentered {
  width: clamp(3rem, 10vw, 6rem);
  font-size: clamp(0.5rem, 2vw, 1rem);
}

.flexContentdivWithImg {
  margin-left: 10px;
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(clamp(9%, 13vw, 15%), 1fr));

  grid-gap: 1rem;
  border-radius: 20px;

  backdrop-filter: blur (2rem);
  -webkit-backdrop-filter: blur(2rem);
  box-shadow: 1 3rem 1.3rem 1.3rem rgba(0, 0, 0, 0.5);

  border-top-color: rgba (225, 225, 225, 0.5);
  border-left-color: rgba(225, 225, 225, 0.5);
  border-bottom-color: rgba(225, 225, 225, 0.1);
  border-right-color: rgba(225, 225, 225, 0.1);
  background-color: rgba(225, 225, 225, 0.1);

  .divContentDivWithImg {
    .divWithImg {
      position: relative;
      text-align: center;
      margin: 40px 08px 08px;
      font-weight: bold;
      margin-block: 20px;
      border: none;
      border-radius: var(--div_border_radius);
      /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);*/

      .pngimg {
        border-radius: var(--div_border_radius);
        cursor: pointer;
        background-color: var(--divWithImageColor);
      }
    }

    .spancentered {
      display: block;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      justify-content: center;

      /*Silbertrennung*/
      -moz-hyphens: auto;
      -o-hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
  }
}

#divtabs.ui-widget-content {
  border: none;
  padding: 0;
  margin: 0;
}

#divtabs ul {
  clear: both;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
}

/*
@media only screen and (min-width: 300px) and (max-width: 601px)
{
    .flexContentdivWithImg
    {
         grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    }
}

@media only screen and (min-width: 600px) and (max-width: 890px)
{
    .flexContentdivWithImg
    {
        grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
    }
}
@media only screen and (min-width: 891px) and (max-width: 1023px)
{
    .flexContentdivWithImg
    {
        grid-template-columns: repeat(auto-fill, minmax(12%, 1fr));
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1400px)
{
    .flexContentdivWithImg
    {
        grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
    }
}

@media only screen and (min-width: 1401px)
{
    .flexContentdivWithImg
    {
        grid-template-columns: repeat(auto-fill, minmax(07%, 1fr));
    }
}*/