:root {
  --color-scheme: light;

  --main-product-color: #0DAB20;
  --main-product-text-color: #0DAB20;
    --main-product-light-color: #5ACE68;
    --main-product-light-color-rgba: rgba(90, 206, 104, .4);
  --secondary-product-color: #98999C;
    --secondary-product-light-color: #000029;
  
  --main-color-background: #f6f7f9;

  --main-color-text: #636363;
  --second-color-text: #707070;

  --color-palatte-light-blue: #D9F3FF;
  --color-palette-gray: #5B5B5D;
  --color-palette-light-gray: #98999C;
  --color-palette-green: #0dab20;
  --color-palette-light-green: #7bdcb5;
  --color-palette-light-green-rgba : rgba(123,220,181, 0.5);
  --color-palette-red: #cf2e2e;
    --color-palette-red-rgba: rgba(207,46,46, 0.5);
  --color-pallete-light-red: #f78da7;
  --color-pallete-light-orange-rgba: rgba(255, 200, 0, .4);


  --color-pallete-white-rgba: rgba(255, 255, 255, .85);
  --color-pallete-gray-rgba: rgba(147, 149, 152, .85);

  --color-pallete-green-2-rgba: rgba(90, 206, 104, .2);
  --color-pallete-green-05-rgba: rgba(90, 206, 104, .05);

  --color-pallete-highlight: #0DAB20;
  --color-pallete-highlight-light : #F7FDF7;

  --fs--3: clamp(0.3694rem, -0.3669rem + 1.2273vi, 0.6149rem);
	--fs--2: clamp(0.4924rem, -0.2438rem + 1.2271vi, 0.7378rem);
	--fs--1: clamp(0.6564rem, -0.0306rem + 1.145vi, 0.8854rem);
	--fs-0: clamp(0.875rem, 0.3125rem + 0.9375vi, 1.0625rem);
	--fs-1: clamp(1.1664rem, 0.8405rem + 0.5431vi, 1.275rem);
	--fs-2: clamp(1.53rem, 1.6291rem + -0.1239vi, 1.5548rem);
	--fs-3: clamp(1.836rem, 2.7821rem + -1.1826vi, 2.0725rem);
	--fs-4: clamp(2.2032rem, 4.4411rem + -2.7973vi, 2.7627rem);

  --br-main: 16px;
  --pd-main: 16px;
}

  html {
    color-scheme: var(--color-scheme);
  }

  body {
    background-color: var(--main-color-background);
  }

/*** HEADER ***/
/*
  .header-inner {
    width: var(--vp-width-50);
  }
*/
  .header--wrapper.header-bottom {
    background-color: transparent;
    background-image: unset;  
  }
    .header__wrapper .phone a {
      color: var(--main-product-color);
    }
    .heading--right-container .heading-item__wrapper {
      font-size: var(--fs--2);
    }

  /* breads */
    .map-container a.active {
      font-size: var(--fs--2);
    }
    .map-container a.deactivated {
      color: var(--main-color-text);
      font-size: var(--fs--2);
    }

    .header_content--logo .elm_logo g:first-child, .header_content--logo .elm_logo g:last-child {
      /*  fill: #000; */
      fill: #0095da;
    }

/* FORM */
  /* helper */
  .page-helper a {
    background-color: var(--main-product-color);
    color: #fff;
  }
    .page-helper a:hover {
      background-color: #fff;
      color: var(--main-product-color);
    }

  /* iconized */
  .item-iconized__wrapper input[type="radio"]:checked + label img {
    outline: 2px solid var(--color-pallete-highlight);
    border-radius: calc( var(--br-main) / 2);
    scale: 1.1;
  }
  .item-iconized__wrapper input[type="radio"]:checked + label span {
    color: var(--color-pallete-highlight);
    scale: 1.1;
    font-weight: 700;
    margin-top: 0.5rem;
  }

  /* ERROR message ~ spise reset kvuli UI */
  .errorBox{
    border-radius: calc( var(--br-main) / 2);
    margin-left: unset;
    padding: 5px;
    border: unset;
    color: var(--color-palette-red);
    font-size: var(--fs--2);
    font-weight: 600;
    width: 100%;
  }

  /* button */    
  button.button--calc {
    background-color: var(--color-palette-green);
    text-transform: uppercase;
    font-size: var(--fs-2);
    color: #fff;
  }
    button.button--calc.ui-small {
      width: fit-content;
    }
  button.button--back {
    background-color: var(--color-palette-light-gray);
    text-transform: uppercase;
    font-size: var(--fs-1);
    color: var(--color-palette-gray);
    width: 50%;
    margin-inline: auto;
    margin-block: 0.5rem;
  }
  button.button--config {
    background-color: var(--main-product-light-color);
    text-transform: uppercase;
    font-size: var(--fs--2);
    color: #fff;
    width: 50%;
    margin-inline: auto;
  }

  /* input[type=""] */
  input[type="radio"] {
    width: 20px;
  }

  /* switch */
  .switch {
    outline: 2px solid var(--color-palette-gray);
  }
    input:checked + .slider {
      background-color: var(--color-pallete-light-blue);
    }
    input:focus + .slider {
      box-shadow: 0 0 1px var(--color-pallete-light-blue);
    }
  /* radio icons */
  .info-payment-container::before,
  .wiredpayments-section::before {
    background-color: var(--secondary-product-color) !important;  
  } 
  .cardpayment-container::before {
    background-color: var(--main-product-color) !important;  
  }
  .payment-section--content-wrapper {
    position: relative;
  }

/*  "Zalozkove" znaceni .box */
  @supports selector(:has(*)) {
    .box-marked-outer:has(.valid)::before,
    .box-marked-inner_container:has(.valid)::before {
      background-color: var(--main-product-color);
    } 
    .box-marked-outer.box-marked-outer:has(.virginValid)::before,
    .box-marked-inner_container.box-marked-inner_container:has(.virginValid)::before {
      background-color: var(--color-pallete-light-blue);
    }
    .box-marked-outer:has(.notValid)::before,
    .box-marked-inner_container:has(.notValid)::before {
      background-color: var(--color-palette-red) !important;
    }
  }

/* POopisky RADIO */
  .item-radio .content label {
    font-size: var(--fs--2);
    color: var(--main-color-text);
  }
  
/* "Krecek" */
  #dialogPlz .buttons {
    font-size: var(--fs--2);
  }
  /* close "X" btn */
    #dialogPlz #closeButton {
      position: absolute;
      top: 0;
      right: 8px;
      font-size: var(--fs-1);
    }
  /* obsahova cast - text */
    #dialogPlz .krecek-text_wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      text-align: center;
      margin-top: 1rem;
      font-weight: 300;
      font-size: var(--fs--2);
      flex-direction: column;
    }
  /* obsahova cast - img */
    #dialogPlz .krecek-img_wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
    }

/* stranka NAPOVED */
  /** INFO **/
  .page-helper__wrapper[data-content="documentation"] .page-helper--content {
    background-color: var(--color-palatte-light-blue); 
  }
  /** DOCUMENTATION **/
  .page-helper__wrapper[data-content="information"] .page-helper--content {
    background-color: #fff;
  }
  .page-helper__wrapper button {
    background-color: var(--color-pallete-light-blue);
    color: #fff;
  }
/* Odrazky */
  .page-helper__wrapper ul li::before {
    border-left-color: var(--main-product-color,var(--main-product-color,#0095da));
  }
/* helper */
/* footer */
  .footer-inner a {
    color: var(--main-product-text-color);
  }
/* progress bar */
/* fa */
 .fa-solid {
  font-size: var(--fs--2);
  margin-top: 4px;
 }

/**FONT-STYLES**/
  /*heading*/
  .heading label{
    font-size: var(--fs--1);
    font-weight: 300;
    line-height: 1.2;
    text-wrap: balance;
    color:var(--main-color-text);
  }
  .item-box__wrapper.item-infobox a {
    color: var(--color-palette-red);
    font-weight: 600;
  }

 .text-highlihted {
    color: var(--color-pallete-highlight);
 }

  .select2-results__option {
    font-size: var(--fs--1);
  }

  a {
    color: var(--color-pallete-highlight);
  }

  .doc_row a {
    font-size: var(--fs--1);
  }

 /** overwritten **/
  .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Ubuntu', sans-serif;
    font-size: var(--fs--1);
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--main-color-text);
    font-size: var(--fs--1);
    padding-top: 4px;
  }
    .select2-selection__arrow {
      padding-top: 4px; 
    }

  /* obmyslena osoba */
  #beneficiariesLabel_container {
    font-size: var(--fs--2);
    color: var(--color-pallete-highlight);
  }
    .adress-ruian_custom {
      cursor: pointer;
    }
    span.beneficiary-icon,
    .ruian_action-edit i {
      padding: 0 .25rem;
    }
    .beneficiary-icon i:hover,
    .ruian_action-edit i:hover {
      scale: 1.1;
    } 
      .beneficiary-icon i.fa-pencil-alt:hover,
      .ruian_action-edit i.fa-pencil-alt:hover {
        color: var(--main-product-color);
      } 
      .beneficiary-icon i.fa-trash-alt:hover {
        color: var(--color-palette-red);
      } 
  
  .oneBeneficiary {
    font-size: var(--fs--1);
/* @request Lenka: Obmyšlený nemá být výraznější než zbytek rekapitulace     color: #000;*/ 
  }

/** FANCY "popup" okno **/
  .fp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .25);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .fancy-popup {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    z-index: 1000;
  }

    .fancy-popup h2.heading {
        color: var(--main-product-color);
        text-align: left;
        font-size: var(--fs-01);
        letter-spacing: 0px;
        opacity: 1;
        margin-bottom: 12px;
    }
    .fp-content {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        font-size: var(--fs-0);
    }
    .fp-row {
        display: flex;
        min-width: 250px;
        gap: 2rem;
        gap: 2rem;
        align-content: center;
        justify-content: left;
    }
        .fp-row img {
            border-radius: var(--br-main);
            outline: 1px solid gray;
        }
        .fp-row label {
            align-content: center;
            font-size: var(--fs--1);
            color: var(--main-color-text);
        }
    .fancy-popup button {
      width: 100%;
    }

  /* VALIDATOR */
  .item-checkbox.notValid label {
    background-color: var(--color-palette-red);
    color: #fff !important;
  }

  input[type="date"].notValid {
    background: unset;
    background-color: rgba(204, 0, 0, 0.3);
    border: 1px solid #CC0000;
    background: calc(100% - 10px) 50% no-repeat url(/Data/Images/Design/Web/22/calendar.png);
    background-size: 17px;
  }

  .adress-ruian_custom {
    font-size: var(--fs--2);
    color: var(--main-color-text);
  }

  /** BLUE sekce **/
  .operator-legend {
    font-size: var(--fs--2);
    font-style: italic;
    color: var(--second-color-text);
  }
  
  .technical-text {
      color: #fff;
  }