/* 
    Created on : 10.11.2023, 08:27:46
    Update     : 08.08.2025, 22:50:00
    Author     : pedro
*/



: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;
  --media_min_width: 300px;
  --media_max_width: 601px;
  --font_size_body: 10px;
  --color_txt: white !important; 
  --body_background: linear-gradient(135deg, #2e56a2 0%, #3461af 100%); /*linear-gradient(135deg, #b48667 0%, #a87f27 100%);*/

    /* valores por defecto */
  --item-width-clamp: clamp(5.5rem, 6.5vw, 8.5rem);
  --grid-min: 7rem; /* mínimo ~112px */
  --gap: clamp(0.5rem, 1.2vw, 1rem); /* mínimo 8px, escalable */
}


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


body 
{
  background-image: url("../images/background/22.png");
  background-color: #3f9ecf;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  color: white;

}

.glass 
{
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3);
  border-radius: 2rem;
}

body.color-dark {
  background-image: url("../images/background/13.png");
  background-color: #580019;
  --color_txt: white;

}

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

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

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

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

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

}

.flexContentdivWithImg 
{
  margin-left: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(7rem + 1.5vw), 1fr));
  gap: var(--gap);
  width: 100%;
  align-items: start;
  /*border-radius: 20px;*/

  .divContentDivWithImg 
  {
    width: clamp(6.875rem, 6.5vw, 8.5rem);

    .divWithImg {
      position: relative;
      text-align: center;
      margin: 40px 08px 08px;
      font-weight: bold;
      margin-block: 20px;
      border-left-color: rgba(225, 225, 225, 0.5);
      /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);*/

      width: clamp(3rem, 10vw, 6rem);
      height: clamp(3rem, 10vw, 6rem);

      .pngimg {
        clip-path: circle(50%);
        cursor: pointer;
        background-color: var(--divWithImageColor);

        width: clamp(3rem, 10vw, 6rem);
        height: clamp(3rem, 10vw, 6rem);
      }
    }

    .spancentered 
    {
      width: clamp(3rem, 10vw, 6rem);
      font-size: clamp(0.5rem, 2vw, 1rem);
      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;
    }

  }
}