/* =========================
   CSS Proměnné pro barvy a fonty
   ========================= */
:root {
    /* Barvy */
  --colorPrimary: #61AB00;
  --colorSecondary: #376300;
  --colorLogo: #004B85;
  --colorBackground: #fff;
  --colorBodyBackground: rgba(248,249,250,1);
  --colorBackgroundBWL: #D1FE97;
  --colorHighlight: #003700;
  --colorLowlight: #2F5400;
  --colorTextPrimary: #1F2E00;
  --colorTextSecondary: #d90113;
  --colorTextUrl: #0050da;
  --fontMain: Roboto,sans-serif;
  
    /* Rozměry */
  --menu-width: 350px; 
  --submenu-bg: #e3e3e3;
  --transition-speed: 0.3s;
  
  --menuBoxShadowColor: rgba(0,0,0,.125);
  
    /* --- paleta duhy --- */
  /*--rainbow-red:    #e53935;*/
  --rainbow-red:    #E22522;
  --rainbow-orange: #fb8c00;
  /*--rainbow-orange: #DE5901;*/
  --rainbow-yellow: #fdd835;
  --rainbow-green:  #38853C;
  /*--rainbow-green:  #43a047;*/
  --rainbow-blue:   #1879CD;
  /*--rainbow-blue:   #1e88e5;*/
  --rainbow-violet: #8e24aa;
}

/* =========================
   Globální nastavení
   ========================= */
body {
  font-family: var(--fontMain);
  background-color: var(--colorBackground);
  color: var(--colorTextPrimary);
  background-image: url("../imgs/bg.svg"); /* tvé SVG */
  background-repeat: repeat;          /* opakování */
  background-size: 50px 50px;  
  background-position: 0px 10px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-wrapper {
  min-height: 100vh;        /* zabere celou výšku okna */
  display: flex;
  flex-direction: column;   /* svislé řazení */
}

.mainContent {
  flex: 1;                  /* vyplní prostor mezi headerem a footerem */
}

.bg-white{
    border: 2px solid var(--colorPrimary);
}

/* Odkazy */
a {
  color: var(--ColorTextUrl);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.text-justify {
  text-align: justify;
}
/* Red*/
.rainbowBtn-red, .rainbowBtn-red svg, .rainbowBtn-red bi, .rainbowBtn-red h4, .rainbowBtn-red a{
    fill: var(--rainbow-red);
    color: var(--rainbow-red) !important;
    text-decoration: none !important;
    
}
.rainbowBtn-red:hover .panel, .rainbowBtn-red:hover h4, .rainbowBtn-red:hover svg{
    background-color: var(--rainbow-red) !important;
    fill: #fff !important;
    color: #fff !important;
    border: none;
}
/* Orange */
.rainbowBtn-orange, .rainbowBtn-orange svg, .rainbowBtn-orange bi, .rainbowBtn-orange h4, .rainbowBtn-orange a{
    fill: var(--rainbow-orange);
    color: var(--rainbow-orange) !important;
    text-decoration: none !important;
}
.rainbowBtn-orange:hover .panel, .rainbowBtn-orange:hover h4, .rainbowBtn-orange:hover svg{
    background-color: var(--rainbow-orange) !important;
    fill: #000 !important;
    color: #000 !important;
    border: none;
}
/* Yellow */
.rainbowBtn-yellow, .rainbowBtn-yellow svg, .rainbowBtn-yellow bi, .rainbowBtn-yellow h4, .rainbowBtn-yellow a{
    fill: var(--rainbow-yellow);
    color: var(--rainbow-yellow) !important;
    text-decoration: none !important;
}
.rainbowBtn-yellow:hover .panel, .rainbowBtn-yellow:hover h4, .rainbowBtn-yellow:hover svg{
    background-color: var(--rainbow-yellow) !important;
    fill: #000 !important;
    color: #000 !important;
    border: none;
}
/* Green */
.rainbowBtn-green, .rainbowBtn-green svg, .rainbowBtn-green bi, .rainbowBtn-green h4, .rainbowBtn-green a{
    fill: var(--rainbow-green);
    color: var(--rainbow-green) !important;
    text-decoration: none !important;
}
.rainbowBtn-green:hover .panel, .rainbowBtn-green:hover h4, .rainbowBtn-green:hover svg{
    background-color: var(--rainbow-green) !important;
    fill: #fff !important;
    color: #fff !important;
    border: none;
}
/* Blue */
.rainbowBtn-blue, .rainbowBtn-blue svg, .rainbowBtn-blue bi, .rainbowBtn-blue h4, .rainbowBtn-blue a{
    fill: var(--rainbow-blue);
    color: var(--rainbow-blue) !important;
    text-decoration: none !important;
}
.rainbowBtn-blue:hover .panel, .rainbowBtn-blue:hover h4, .rainbowBtn-blue:hover svg{
    background-color: var(--rainbow-blue) !important;
    fill: #fff !important;
    color: #fff !important;
    border: none;
}
/* Violet */
.rainbowBtn-violet, .rainbowBtn-violet svg, .rainbowBtn-violet bi, .rainbowBtn-violet h4, .rainbowBtn-violet a{
    fill: var(--rainbow-violet);
    color: var(--rainbow-violet) !important;
    text-decoration: none !important;
}
.rainbowBtn-violet:hover .panel, .rainbowBtn-violet:hover h4, .rainbowBtn-violet:hover svg{
    background-color: var(--rainbow-violet) !important;
    fill: #000 !important;
    color: #000 !important;
    border: none;
}