.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.embedBlok {display: block; width: 100%;}

#in_message {
    position: absolute;
    left: -9999em;
    top: 0;
}

body                                            { display: flex !important; }

/*------------------------RESET---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}
article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }
/*------------------------------------------------------*/
.chyba                                          {background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.custom-select-wrapper .spoustecVyhledavani  { position:relative; top:-4.3rem; left:0rem; color:#c62703; }
.lb_lokalita { padding-left:2rem; cursor:pointer; }

#bt_prihlaseni span { text-align:center; }

#pn_vykresy a { margin:3px 0; }

:root                                           {
                                                --font1:        'inter', sans-serif; /* font-variation-settings: "slnt" -10 - 0, "wght" 100-900; */

                                                --color0:       #252525;
                                                --color1:       #102564; 
                                                --color1b:      #020b28;
                                                --color1c:      #0a1b4d;
                                                --color1d:      #b5c8ff;
                                                --color1e:      #2f4a9b;
                                                --color1f:      #415fb9; 
                                                --color2:       #db330d;
                                                --color2b:      #c62703;
                                                --color3:       #eaeaea;
                                                --color3b:      #e0e0e0;
                                                
                                                --menu-width:     18rem;
                                                --inner-padding:  min(3em, calc(0.6em + 3vw));
                                                --height1:        2.4em;
                                                --border-radius1: 0.3rem;
                                                --border-radius2: 0.45rem;
                                                --gap1:           1.2rem;
                                                --form-gap:       1rem;
                                                --h1:             min(2.25rem, calc(1.3rem + 2vw));
                                                --h2:             min(1.4rem, calc(0.8rem + 2vw));
                                                --h2:             min(1.1rem, calc(0.5em + 2vw));
                                                }
  @media screen and (min-width: 1081px)         {
  :root                                         {
                                                --header-height:  4rem;
                                                --padding1:       2rem;        
                                                }                                              
  }
  @media screen and (max-width: 1080px)         {
  :root                                         {
                                                --header-height:  3.2rem;
                                                --padding1:       min(1.5rem, calc(0.7rem + 2vw));        
                                                }                                                 
  }

.minheight { min-height:2.1em; }

.zakazano {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(100%);
}
.fa-fire {
    color: #FF5733;
}
.fa-xmark {
    color: var(--color1);
    font-size: 1.3em;
    position:relative;
    top:-2px;
}
.fa-snowflake {
    color: #50BFF7;
}



html                                            {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: min(16px, calc(11px + 1vw)); color: var(--color1); font-variation-settings: "slnt" 0, "wght" 500; line-height: 1.15; background: var(--color1c); font-family: var(--font1); overflow: hidden; box-sizing: border-box;}
  @media screen and (min-width: 1081px)         {
  html                                          {padding: calc(0.3rem + 1vw);}                                              
  }
  @media screen and (min-width: 1081px) and (max-height: 500px){
  html                                          {font-size: min(12px, calc(8px + 1vh));}                                              
  }


body                                            {display: flex; width: 100%; max-width: 110rem; max-height: 100%; margin-inline: auto; position: relative; transition: .15s ease-in-out;}

html:has(.entry)                                {padding: 2em;}
.entry                                          {width: 30rem; max-height: 100%; height: auto;}
.entry form                                     {display: flex; width: 100%; height: 100%; height: auto; border-radius: var(--border-radius2); background: white; overflow: hidden;}
.entry .main                                    {display: flex; width: 100%; max-height: 100%; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto;}
.entry .main > div                              {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 1rem; position: relative; padding: min(3em, calc(1em + 5vw)) min(5em, calc(0.5em + 8vw)); box-sizing: border-box;}
.entry-head                                     {display: flex; width: 100%; max-width: 19em; justify-content: center; flex-wrap: wrap; gap: 0.7em;}
.entry-head > span                              {display: flex; width: 100%; justify-content: center; text-align: center; font-variation-settings: "slnt" 0, "wght" 750; text-transform: uppercase; position: relative; z-index: 1;}
.entry-head .appname                            {font-size: 0.8em; color: var(--color2); letter-spacing: 0.1em;}
.entry-head .appname:before                     {display: block; width: 70%; height: 0.13em; background: var(--color2); position: absolute; left: 15%; top: calc(50% - 0.2em); z-index: 1; content: "";}
.entry-head .appname span                       {display: block; background: white; padding-inline: 0.5em; box-sizing: border-box; position: relative; z-index: 1;}
.entry-head .title                              {font-size: min(2.3em, calc(1em + 3vw));}
.entry .form-item                               {width: 100%;}
.entry .info                                    {display: block; width: 100%; text-align: center; font-size: 0.85em;}
.entry-link1                                    {display: block; text-align: center; font-size: 0.8em; color: var(--color1); font-variation-settings: "slnt" 0, "wght" 550; letter-spacing: 0.1em; text-decoration: underline; transition: 0.15s ease-in-out;}
.entry-link1:hover                              {color: var(--color1b); text-decoration-color: transparent;}
.entry .button                                  {width: 100%;}
.entry .logo                                    {display: block; width: 7em; height: auto; margin-top: 1em;}
  @media screen and (min-width: 1081px)         {
  .entry form                                   {border-radius: var(--border-radius2); box-shadow: 0 0 1rem rgba(0,0,0,0.5);}
  }
  @media screen and (max-width: 1080px)         {
  .entry form                                   {flex-direction: column;}
  }
  @media screen and (min-width: 769px)          {
  .entry.register                               {width: 46rem;}
  .entry.register :is(.form-item, .button)      {width: calc(50% - var(--form-gap) / 2);}
  }

.app form                                       {display: flex; width: 100%; background: var(--color1); overflow: hidden;}
.app form :is(.menu, .container)                {display: flex;}
.app form .menu                                 {width: var(--menu-width);}
.app form .container                            {flex-direction: column;}
  @media screen and (min-width: 1801px)         {
  .app                                          {height: 100%; max-height: 60rem;}
  .app form                                     {border-radius: var(--border-radius2); box-shadow: 0 0 1em rgba(0,0,0,0.3);;}
  }
  @media screen and (max-width: 1800px)         {
  html:has(.app)                                {padding: 0;}
  html .app                                     {width: 100%; max-width: 100%; height: 100%;}
  }
  @media screen and (min-width: 1081px)         {
  .app form .container                          {width: calc(100% - var(--menu-width));}
  }
  @media screen and (max-width: 1081px)         {
  .app form .container                          {width: 100%;}
  }

.menu                                           {height: 100%; flex-direction: column; align-items: center; gap: 2em; background: var(--color1); position: relative; z-index: 10000; padding: var(--padding1) 0; box-sizing: border-box;}
.menu .logo                                     {display: none;}
.menu .logo img                                 {display: block; width: 100%; height: 100%; object-fit: contain;} 
.menu :is(nav, nav ul, nav ul li)               {display: block; width: 100%; box-sizing: border-box;}
.menu .inner                                    {display: flex; width: 100%; flex-direction: column; justify-content: space-between; gap: 1em; flex-grow: 2; overflow-y: auto}
.menu nav ul li:not(:last-child)                {border-bottom: solid 1px rgba(255,255,255,0.15);}
.menu nav .bt_section                                     { line-height:0; cursor:pointer; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.5em; padding-inline: var(--padding1); box-sizing: border-box; transition: .15s ease-in-out;}
.menu nav .bt_section span                                {display: block; flex-grow: 2; text-align: left; font-size: 1em; color: var(--color1d); font-variation-settings: "wght" 550; text-decoration: none; padding-block: 0.93em 0.7em; transition: .15s ease-in-out;}
.menu nav .bt_section svg                                 {display: block; width: auto; height: 1.15em; fill: var(--color1d); position: relative; top: -0.03em; transition: .15s ease-in-out;}
.menu nav .bt_section svg:last-of-type                    {height: 0.85em;}
.menu nav .bt_section:hover                               {background: rgba(0,0,0,0.08);}
.menu nav .bt_section:hover span                          {color: white;}
.menu nav .bt_section:hover svg                           {fill: white;}
.menu nav .bt_section.sel                                 {background: rgba(0,0,0,0.35);}
.menu nav .bt_section.sel span                            {color: white;}
.menu nav .bt_section.sel svg:first-of-type               {fill: var(--color2);}
.menu nav .bt_section.sel svg:last-of-type                {fill: transparent;}
.menu nav .bt_section.unavailable                         {opacity: 0.35; pointer-events: none;}
.menu .elements                                 {display: flex; width: 100%; position: relative; padding-inline: calc(0.1 * var(--padding1)); box-sizing: border-box; margin-top: 1rem;}
.menu .elements .buttonsl                          {display: flex; cursor:pointer; width: 50%; flex-direction: column; align-items: center; gap: 0.6em; text-align: center; color: var(--color1d); font-variation-settings: "slnt" 0, "wght" 600; transition: .15s ease-in-out;}
.menu .elements .buttonsl svg                      {display: block; width: 1.8em; height: 1.8em; fill: var(--color1d); transition: .15s ease-in-out;}
.menu .elements .buttonsl:hover                    {color: white;}
.menu .elements .buttonsl:hover svg                {fill: white;}
.menu .elements:before                          {display: block; width: 1px; height: 100%; background: rgba(255,255,255,0.15); position: absolute; left: 50%; content: "";}
  @media screen and (min-width: 1081px)         {
  .menu .logo                                   {display: block; max-width: 10rem; padding: 0 var(--padding1);}
  .menu .header-head                            {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  .menu                                         {height: calc(100% - var(--header-height)); background: var(--color1c); position: absolute; left: calc(0px - var(--menu-width)); top: var(--header-height); transition: .25s ease-in-out;}
  .menu .title                                  {display: block; font-size: 1.2em; color: white; font-variation-settings: "slnt" 0, "wght" 700; position: relative; top: 0.14em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .menu .header-head                            {display: flex; width: calc(100% - 2 * var(--padding1)); min-height: 3em; justify-content: space-between; align-items: center; margin-inline: var(--padding1); box-sizing: border-box;}
  .menu .header-head a                          {display: flex; width: 1.4rem; height: 1.4rem; justify-content: center; align-items: center; background: var(--color1e); margin-inline: -0.15em; border-radius: 100%; transition: .15s ease-in-out;}
  .menu .header-head a svg                      {display: block; width: auto; height: 50%; fill: white;}
  .menu .header-head a:hover                    {background: var(--color1f);}
  .menu .header-head:has(a)                     {width: calc(100% - var(--padding1)); margin-inline: 0 var(--padding1); background: var(--color1d); border-radius: 0 1.5em 1.5em 0; padding: 0 var(--padding1);}
  .menu .header-head:has(a) .title              {width: calc(100% - 1.7rem); font-size: 1em; color: var(--color1)}
  .menu .elements .buttonsl                        {font-size: 0.8em;}
  }

.header                                         {display: flex; width: 100%; height: var(--header-height); justify-content: space-between; align-items: center; align-items: center; gap: 1em; padding-inline: 1.3em; box-sizing: border-box;}
.header .logo                                   {display: block; height: 45%; width: auto;}
.header .logo img                               {display: block; height: 100%; width: auto;}
.header .title                                  {display: block; font-size: 1.2em; color: white; font-variation-settings: "slnt" 0, "wght" 700; position: relative; top: 0.14em;}
.header .header-head                            {display: flex; align-items: center; gap: 0.6em;}
.header .header-head a                          {display: flex; width: 1.5em; height: 1.5em; justify-content: center; align-items: center; background: var(--color1e); border-radius: 100%; transition: .15s ease-in-out;}
.header .header-head a svg                      {display: block; width: auto; height: 50%; fill: white;}
.header .header-head a:hover                    {background: var(--color1f);}
.header .elements                               {display: flex; height: 60%; justify-content: flex-end; align-items: center; gap: 2.4em; flex-grow: 2; position: relative;}
.header .elements .buttonsl                             {display: flex; cursor:pointer; align-items: center; gap: 0.6em; text-align: center; color: var(--color1d); font-variation-settings: "slnt" 0, "wght" 600; position: relative; transition: .15s ease-in-out;}
.header .elements .buttonsl svg                         {display: block; width: auto; height: 1.1em; fill: var(--color1d); transition: .15s ease-in-out;}
.header .elements .buttonsl span                        {position: relative; top: 0.12em;}
.header .elements .buttonsl:hover                       {color: white;}
.header .elements .buttonsl:hover svg                   {fill: white;}
.header .elements .buttonsl:last-child:before           {display: block; width: 1px; height: 140%; background: rgba(255,255,255,0.2); position: absolute; top: -20%; left: -1.2em; content: "";}
 
.header .elements a                             {display: flex; align-items: center; gap: 0.6em; text-align: center; color: var(--color1d); font-variation-settings: "slnt" 0, "wght" 600; position: relative; transition: .15s ease-in-out;}
.header .elements a svg                         {display: block; width: auto; height: 1.1em; fill: var(--color1d); transition: .15s ease-in-out;}
.header .elements a span                        {position: relative; top: 0.12em;}
.header .elements a:hover                       {color: white;}
.header .elements a:hover svg                   {fill: white;}
.header .elements a:last-child:before           {display: block; width: 1px; height: 140%; background: rgba(255,255,255,0.2); position: absolute; top: -20%; left: -1.2em; content: "";}


@media screen and (min-width: 1081px)         {
  .header :is(.logo, #navicon)                  {display: none;}
  }
  @media screen and (max-width: 1081px)         {
  .header .header-head                         {display: none;}
  .header #navicon                              {display: block; width: 1.3em; height: 16px; cursor: pointer; position: relative; z-index: 10;}
  .header #navicon span                         {display: block; height: 2px; background: var(--color1d); position: absolute; border-radius: 1px;}
  .header #navicon span:nth-child(1)            {width: 82%; top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {width: 100%; top: calc(50% - 1px);}
  .header #navicon span:nth-child(4)            {width: 60%; bottom: 0;}
  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
  body.show #navicon span:nth-child(2)          {transform: rotate(45deg);}
  body.show #navicon span:nth-child(3)          {transform: rotate(-45deg);}
  body.show #navicon span:nth-child(1), 
  body.show #navicon span:nth-child(4)          {opacity: 0 !important;}
  body.show #navicon div                        {display: block;}
  body.show .menu                               {left: 0;}
  }
  @media screen and (max-width: 640px)          {
  .header .elements span                        {display: none;}
  }

.main                                           {display: block; width: 100%; background: white; flex-grow: 2; overflow-y: auto;}
.main .inner                                    {display: flex; width: 100%; min-height: 100%; flex-direction: column; justify-content: flex-start; gap: var(--gap1); flex-grow: 2; padding: var(--inner-padding); box-sizing: border-box;}
  @media screen and (min-width: 1081px)         {
  .main                                         {border-top-left-radius: var(--border-radius2);}
  }
  @media screen and (max-width: 1080px)         {
  .main                                         {width: 100%; height: calc(100% - var(--header-height));}
  }
  @media screen and (max-height: 440px)         {
  .main                                         {overflow-y: auto;}
  .main .inner                                  {height: auto;}
  }

.grid                                           {display: flex; width: 100%; /*max-width: 60rem;*/ align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1);}
.grid > .grid                                   {margin-top: 0 !important;}
.grid.control-buttons                           {margin-top: 1em;}
.grid.control-buttons *                         {row-gap: 0.5rem;}
.grid > *                                       {width: 100%;} 
.grid .h2                                       {width: 100% !important; margin-block: 0.2em -0.4em;}
.grid .h3                                       {width: 100% !important; margin-block: 0.2em -0.4em; padding-left: 0.6em; box-sizing: border-box;}
  @media screen and (min-width: 961px)          {
  .grid.g66-33 > *:nth-child(1),
  .grid.g33-66 > *:nth-child(2)                 {width: 66%;} 
  
  .grid.g60-40 > *:nth-child(1)                 {width: 59%;} 
  .grid.g60-40 > *:nth-child(2)                 {width: 39%;} 

  .grid.g66-33 > *:nth-child(2),
  .grid.g33-66 > *:nth-child(1)                 {width: calc(34% - var(--gap1));} 
  }
  @media screen and (max-width: 960px)          {
  .grid.g66-33 > *, .grid.g33-66 > *            {width: 100%;} 
  .grid.g60-40 > *                              {width: 100%;} 
  }
  @media screen and (min-width: 641px) and (max-width: 960px){
  }  
  @media screen and (min-width: 769px)          {
  .grid.g50-50b > *                             {width: calc(50% - 0.5 * var(--gap1));} 
  } 
  @media screen and (min-width: 581px)          {
  .grid.g50-50 > *                              {width: calc(50% - 0.5 * var(--gap1));} 
  .grid.g33-33 > *                              {width: calc(33% - 0.5 * var(--gap1));} 
  }  
  @media screen and (max-width: 580px)          {
  .grid > *:not(:first-child):has(.h2)          {margin-top: 1rem;}
  }

.gray-box                                       {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: calc(0.4 * var(--gap1)); font-size: 0.9em; background: var(--color3); padding: 0.6em; margin-bottom:1rem; box-sizing: border-box; border-radius: var(--border-radius1);}
.gray-box.components-checks                     {padding: var(--padding1);}
  @media screen and (min-width: 961px)          {
  .gray-box.components-checks                   {margin-top: calc(var(--h2) + var(--gap1));}
  .gray-box.components-checks .checkbox         {width: 100%;}
  }
  @media screen and (max-width: 960px)          {
  .gray-box.components-checks .checkbox         {width: 12em;}
  }

  .grid.oneline { display:block!important; width:100%!important; }
    .grid.oneline > .grid {
        display: flex !important;
        flex-direction: row;
        width:100%;
    }
  .grid.oneline > .grid > div { width:32%; margin-top:1rem; }
  .grid.oneline > .grid .h2 { margin-bottom:.5rem; min-height:2.5rem; }

    .grid.oneline2 { width:100%!important; display: flex; flex-direction: row; }
    .grid.oneline2 > .grid {
        flex:1 1 auto;
    }
  .grid.oneline2 > .grid > div1 { width:32%; margin-top:1rem; }
  .grid.oneline2 > .grid .h2 { margin-bottom:0rem; /*min-height:2.5rem;*/ }

button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}

.h1, .h2, .h3                                   {display: block; color: var(--color1); font-variation-settings: "wght" 750; box-sizing: border-box;}
.h1                                             {font-size: var(--h1);}
.h2                                             {font-size: var(--h2);}
.h3                                             {font-size: var(--h3);}
p, li                                           {width: 100%;}
p a, li a                                       {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
p a:hover, li a:hover                           {color: var(--color2); text-decoration-color: transparent;}

.note1                                          {display: block; width: 100%; font-size: 0.85em; opacity: 0.5;}
.note1 em                                       {font-variation-settings: "wght" 500, "slnt" -10;}

.section                                        {display: flex; width: 100%; flex-direction: column; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1); box-sizing: border-box;}
.section:last-child                             {flex-grow: 2;}
.section.divider                                {padding-top: calc(var(--padding1) - 0.4rem); border-top: solid 1px rgba(0,0,0,0.15);}
.section:last-child:has(.table)                 {padding-bottom: 0;}
.section:last-child:has(.pagination)            {padding-bottom: var(--padding1);}

.button                                         {display: flex; height: var(--height1); justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.45em; text-align: center; font-size: min(0.9em, calc(0.3em + 2vw)); color: white; font-variation-settings: "wght" 600; letter-spacing: 0.08em; text-transform: uppercase; border: none; outline: solid 2px transparent; cursor: pointer; border-radius: var(--border-radius1); padding: 0.3em 1.4em 0; box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}
.button svg                                     {display: block; width: auto; height: 1.1em; fill: white; position: relative; top: -0.16em;}
.button.gray                                    {background: var(--color3); color: #666666;}
.button.gray:hover                              {background: var(--color3b); color: #252525;}
.button.color1                                  {background: var(--color1);}
.button.color1:hover                            {background: var(--color1b);}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2b);}
.button.border                                  {color: var(--color1); border: solid 0.1em var(--color1);}
.button.border svg                              {fill: var(--color2);}
.button.border:hover                            {color: var(--color2); border-color: var(--color2);}
.button:has(> span)                             {padding-inline: 1em;}
.button span                                    {display: block; text-align: left; flex-grow: 2; letter-spacing: 0.04em;}

.contact                                        {display: flex; align-items: center; gap: 0.35em; font-size: 0.8em; color: var(--color0c);}
.contact svg                                    {display: block; width: 1em; height: 1em; fill: var(--color0c);}
.contact a                                      {color: var(--color0c); text-decoration: underline; transition: .15s ease-in-out;}
.contact a:hover                                {color: white; text-decoration-color: transparent;}

.head                                           {display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 0.6rem; margin-block: -0.08rem 0.5em; box-sizing: border-box;}
.head .nav-button                               {display: flex; width: 0.9em; height: 0.9em; justify-content: center; align-items: center; font-size: var(--h1); background: var(--color2); border-radius: 100%; border: none; outline: none; transition: .15s ease-in-out; cursor: pointer;}
.head .nav-button svg                           {display: block; width: auto; height: 40%; fill: white;}
.head .nav-button:hover                         {background: var(--color2b);}
.head .nav-button.forward                       {transform: rotate(180deg); margin-inline-start: -0.16em;}
.head :is(.h1, .h2)                             {max-width: calc(100% - 0.6em - 0.6rem); flex-grow: 2;}
.head:has(.h1) .button                          {height: 2.8em; font-size: min(0.8em, calc(0.5em + 1vw));}

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--form-gap); box-sizing: border-box;}

.table                                          {display: block; width: 100%; overflow-x: auto; box-sizing: border-box;}

.custom-table                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em; font-size: 0.9em;}
.custom-table .row                              {display: flex; width: 100%; min-height: 2.4em; justify-content: space-between; align-items: center; gap: 0.6em; border: solid 0.1em rgba(0,0,0,0.2); border-radius: var(--border-radius1); padding: 0.45em 0.9em; box-sizing: border-box; transition: .15s ease-in-out;}
.custom-table .row:not(.empty):hover            {background: rgba(0,0,0,0.04);}
.custom-table .row > *                          {display: flex; align-items: center; font-size: 1em; color: var(--color0);}
.custom-table .row > * strong                   {font-variation-settings: "wght" 700;}
.custom-table .row > span                       {gap: 0.25em; position: relative; top: 0.2em;}
.custom-table .row > span a                     {color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}
.custom-table .row > span a:hover               {color: var(--color1e); text-decoration-color: inherit;}
.custom-table .row .admin-added                 {display: flex; width: 100%; max-width: 1.6em; aspect-ratio: 1; justify-content: center; align-items: center; font-size: 0.75em; color: var(--color2); font-variation-settings: "wght" 750; border: solid 0.14em var(--color2); border-radius: 100%; box-sizing: border-box; padding-top: 0.22em; position: relative; top: -0.2em;}
.custom-table .row .buttons                     {justify-content: flex-end;}
.custom-table .row .buttons > *                 {display: flex; width: 1.7em; height: 1.7em; justify-content: center; align-items: center; border-radius: 100%; position: relative; cursor: pointer; transition: .15s ease-in-out;}
.custom-table .row .buttons > * svg             {display: block; width: 1.05em; height: 1.05em; fill: var(--color1); transition: .15s ease-in-out;}
.custom-table .row .buttons > *:hover           {background: rgba(0,0,0,0.08);} 
.custom-table .row .buttons .delete svg         {fill: var(--color2);}
.custom-table .row.empty > *:nth-child(1)       {width: 100%; opacity: 0.5;}

.table-projects .row > *:nth-child(1)           {width: 3em;}
.table-projects .row > *:nth-child(2)           {width: calc(100% - 41em);}
.table-projects .row > *:nth-child(3)           {width: 25em;}
.table-projects .row > *:nth-child(4)           {width: 5em;}
.table-projects .row > *:nth-child(5)           {width: 8em;}
  @media screen and (max-width: 640px)          {
  .table:has(.table-projects)                   {width: calc(100% + 2 * var(--inner-padding)); margin-inline: calc(0px - var(--inner-padding)); padding-inline: var(--inner-padding);}
  .table-projects                               {width: 36rem;}
  }

 @media screen and (max-width: 1080px)          {
        .table-projects .row > *:nth-child(1)           {width: 3em;}
        .table-projects .row > *:nth-child(2)           {width: calc(100% - 31em);}
        .table-projects .row > *:nth-child(3)           {width: 15em;}
        .table-projects .row > *:nth-child(4)           {width: 5em;}
        .table-projects .row > *:nth-child(5)           {width: 8em;}
 }
  @media screen and (max-width: 1080px)          {
        .table-projects .row > *:nth-child(1)           {width: 3em;}
        .table-projects .row > *:nth-child(2)           {width: calc(100% - 26em);}
        .table-projects .row > *:nth-child(3)           {width: 10em;}
        .table-projects .row > *:nth-child(4)           {width: 5em;}
        .table-projects .row > *:nth-child(5)           {width: 8em;}
 }

.table-clients .row > *:nth-child(1)            {width: 3em;}
.table-clients .row > *:nth-child(2)            {width: 12em;}
.table-clients .row > *:nth-child(4)            {flex-grow: 2;}
  @media screen and (max-width: 480px)          {
  .table:has(.table-clients)                    {width: calc(100% + 2 * var(--inner-padding)); margin-inline: calc(0px - var(--inner-padding)); padding-inline: var(--inner-padding);}
  .table-clients                                {width: 28rem;}
  }

.table-configurations .row > *:nth-child(1)     {width: 3em;}
.table-configurations .row > *:nth-child(2)     {width: 12em;}
.table-configurations .row > *:nth-child(3)     {flex-grow: 2;}
.table-configurations .row > *:nth-child(4)     {width: 1.3em;}
.table-configurations .row > *:nth-child(5)     {width: 6em}
.table-configurations .row > *:nth-child(6)     {width: 4.5em}
  @media screen and (max-width: 640px)          {
  .table:has(.table-configurations)             {width: calc(100% + 2 * var(--inner-padding)); margin-inline: calc(0px - var(--inner-padding)); padding-inline: var(--inner-padding);}
  .table-configurations                         {width: 36rem;}
  }

.table-units .row > *:nth-child(1)              {width: 3em;}
.table-units .row > *:nth-child(2)              {width: 12em;}
.table-units .row > *:nth-child(4)              {flex-grow: 2;}
  @media screen and (max-width: 540px)          {
  .table:has(.table-units)                      {width: calc(100% + 2 * var(--inner-padding)); margin-inline: calc(0px - var(--inner-padding)); padding-inline: var(--inner-padding);}
  .table-units                                  {width: 34rem;}
  }

.table1                                         {width: 100%; background: var(--color3); font-size: 0.9em; padding:1rem; border-radius: var(--border-radius1);}
.table1 td                                      {padding: 0.6em 0.75em 0.4em; text-align:right;}
.table1 td:first-child                          {font-variation-settings: "wght" 650; text-align:left; /*max-width:8rem;*/ }
.table1 td:not(.title):first-child              {padding-left: 1.2em;}
.table1 td.title                                {font-variation-settings: "wght" 750;}
.table1 td:not(:last-child)                     {/*border-right: solid 1px rgba(0,0,0,0.15);*/}
.table1 tr:not(:last-child) td                  {border-bottom: solid 1px rgba(0,0,0,0.2);}

.control-bar                                    {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.5rem;}
.control-bar .search                            {display: block; height: 100%; flex-grow: 2; position: relative;}
.control-bar .search input                      {display: block; width: 100%; height: 100%; font-size: 0.85em; color: var(--color0); font-variation-settings: "wght" 600; background: transparent; padding-block: 0.2em 0; padding-inline: 2.5em 0.7em; border: none; outline: solid 2px transparent; border-radius: var(--border-radius1); box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}
.control-bar .search input::placeholder         {font-variation-settings: "wght" 500; color: #999999;}
.control-bar .search input:focus                {background: rgba(0,0,0,0.05);}
.control-bar .search button                     {display: flex; width: 3em; height: 100%; justify-content: center; align-items: center; opacity: 0.5; box-sizing: border-box; position: absolute; left: 0; top: 0;}
.control-bar .search button svg                 {display: block; width: 0.9em; height: 0.9em; fill: black;}
  @media screen and (min-width: 541px)          {
  .control-bar                                  {height: 2.4em; background: var(--color3); border-radius: var(--border-radius1);}
  .control-bar .search input                    {max-width: 100%;}
  }
  @media screen and (max-width: 540px)          {
  .control-bar                                  {flex-wrap: wrap;}
  .control-bar .search                          {width: 100%; height: 2.4em;}
  .control-bar .search input                    {background: var(--color3); border-radius: var(--border-radius1);}
  }

.ordering,
.results-num,
.pagination                                     {display: flex; align-items: center;}
.ordering a,
.results-num a,
.pagination a                                   {display: flex; justify-content: center; align-items: center; height: 1.4em; font-size: 0.8em; color: #999999; font-variation-settings: "wght" 500; padding: 0.175em 0.8em 0; box-sizing: border-box; cursor: pointer; transition: .1s ease-in-out;}
.ordering a:not(:first-child),
.results-num a:not(:first-child),
.pagination a:not(:first-child),
.pagination .dots {border-left: solid 1px #999999;}
.pagination .dots { padding:0 7px; }
.ordering a:hover,
.results-num a:hover,
.pagination a:hover                             {color: var(--color1);}
.ordering a.sel,
.results-num a.sel,
.pagination a.sel                               {color: var(--color1); font-variation-settings: "wght" 700;}

.ordering a                                     {padding-top: 0;}
.ordering a svg                                 {display: block; width: auto; height: 0.8em; fill: var(--color0); opacity: 0.5; transition: .1s ease-in-out;}
.ordering a:hover svg,
.ordering a.sel svg                             {opacity: 1; fill: var(--color1);}

.pagination                                     {width: 100%; justify-content: flex-end;}

.bottom-bar                                     {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; flex-grow: 2; margin-top: var(--padding1);}
  @media screen and (min-width: 541px)          {
  .bottom-bar .button:first-child               {width: calc(50% - 0.5 * var(--form-gap));}
  }

.form                                           {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-gap); box-sizing: border-box;}

.form-items                                     {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-gap);}
.form-items.limit-currency > *:nth-child(1)     {width: calc(100% - 5.2em - var(--form-gap));}
.form-items.limit-currency > *:nth-child(2)     {width: 5.2em;}
  @media screen and (min-width: 769px)          {
  .form-items.fi2 .form-item                    {width: calc(50% - var(--form-gap) / 2);}
  }

/*   @media screen and (min-width: 541px)          {
  .form-items .form-item:not(.w100)             {width: calc(50% - 0.5 * var(--form-gap));}
  }
  @media screen and (min-width: 1281px)         {
  .form-items .form-item:not(.w100)             {width: calc(33.33% - 2 / 3 * var(--form-gap));}
  } */

.form-items-special                             {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: calc(0.5 * var(--form-gap));}
.form-items-special.sp1 > *:nth-child(1)        {width: calc(100% - 1em - 4em - var(--form-gap));}
.form-items-special.sp1 > *:nth-child(2)        {display: block; width: 1em; text-align: center;}
.form-items-special.sp1 > *:nth-child(3)        {display: block; width: 4em; text-align: center;}

.form-item                                      {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.3rem; position: relative; box-sizing: border-box; --form-item-padding: 0.75em; --form-item-radius: 0.3em;}
.form-item.unavailable                          {opacity: 0.5; pointer-events: none;}
.form-item.w100                                 {width: 100% !important;}
.form-item > label                              {display: block; width: 100%; font-size: 0.8em; color: var(--color1); font-variation-settings: "slnt" 0, "wght" 600; text-transform: uppercase;}
.form-item.obligatory > label:after             {display: inline-block; margin-left: 0.15em; color: var(--color2); content: "*";}
.form-item > div                                {display: flex; width: 100%; flex-wrap: wrap; gap: 0 0.3rem; position: relative; box-sizing: border-box;}
.form-item :is(input, textarea, select, .custom-select)
                                                {display: block; width: 100%; line-height:1.5em; min-height: var(--height1); background: var(--color3); font-size: 1em; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 600; border: none; outline: solid 0.08em transparent; padding: 0.2em var(--form-item-padding) 0; border-radius: var(--form-item-radius); border: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; position: relative; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item textarea                             {height: 10em; line-height: 1.2; padding: var(--form-item-padding) !important;}
.form-item select                               {padding-right: 2em !important;}
.form-item :is(input, textarea, select .custom-select)::placeholder 
                                                {font-weight: 400; color: #999999;}
.form-item :is(input, textarea, select):focus   {outline-color: var(--color1);}
.form-item > div:has(button) input              {padding-right: calc(var(--form-item) + 0.9rem);}
.form-item.search > div button                  {display: flex; width: var(--form-item); height: var(--form-item); justify-content: center; align-items: center; position: absolute; right: 0; top: 0;}
.form-item.search > div button svg              {display: block; width: 34%; height: 34%; fill: var(--color1b); transition: .15s ease-in-out;}
.form-item.search > div button:hover svg        {fill: var(--color1);}
.form-item .note                                {display: block; width: 100%; font-size: 0.75em; color: #999999;}
.form-item .note a                              {color: var(--color1); text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}
.form-item .note a:hover                        {color: var(--color1b); text-decoration-color: transparent;}
.form-item:has(.input-button) input             {padding-right: 2.7em;}
.form-item .input-button                        {display: flex; width: 3em; height: 100%; justify-content: center; align-items: center; position: absolute; right: 0; top: 0;}
.form-item .input-button svg                    {display: block; width: 1em; height: 1em; fill: black; opacity: 0.3; transition: .15s ease-in-out;}
.form-item .input-button:hover svg              {opacity: 0.6;}

.form-item > div:has(.file-upload)              {border: dotted var(--color2) 0.12em;}
.file-upload                                    {display: flex; width: 100%; height: 2em; justify-content: center; align-items: center; gap: 0.5em; font-size: 0.85em; color: var(--color1); padding-top: 0.2em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.file-upload svg                                {display: block; width: 1.3em; height: 1.3em; fill: var(--color2); position: relative; top: -0.15em;}
.file-upload:hover                              {color: var(--color2b);}
.file-upload input[type="file"]                 {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer;}
.file-upload .file-name                         {display: none;}

.files                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.15em;}
.files .file-item                               {display: block; width: 100%; font-size: 0.85em; color: var(--color0); font-weight: 600; background: var(--color3); padding: 0.6em 2.5em 0.4em 0.9em; position: relative; box-sizing: border-box; border-radius: 0.2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.files .file-item .delete-btn                   {display: block; width: 1em; height: 1em; background: var(--color2); border-radius: 100%; position: absolute; right: 0.9em; top: 0.6em; cursor: pointer; transform: rotate(45deg); transition: .15s ease-in-out;}
.files .file-item .delete-btn:after             {display: block; position: absolute; inset: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='386,229 283,229 283,126 229,126 229,229 126,229 126,283 229,283 229,386 283,386 283,283 386,283' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.files .file-item .delete-btn:hover             {background: var(--color2b);}
.files:not(:has(.file-item))                    {display: none;}

.form-item.accessories textarea                 {height: 3.6em;}
.form-item.summary-note textarea                {height: 3.6em;}
.form-item.unit-detail-text textarea            {height: 3.6em;}

.centered-inputs input                          {text-align: center;}

.form h3                                        {color: var(--color1); margin-bottom: 0.6rem;}
.form .sep                                      {display: block; width: 100%; height: 1px; background: var(--color5); margin-block: 1.4rem 1rem;}
.form .bottom                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8em; box-sizing: border-box; margin-top: 1rem;}
.form .bottom .consent                          {display: block; width: 100%; font-size: 0.8em; line-height: 1.3;}
.form .bottom .consent a                        {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.form .bottom .consent a:hover                  {color: var(--color1); text-decoration-color: transparent;}
  @media screen and (min-width: 641px)          {
  .search                                       {width: 20rem;}
  }

.form-item input[type="file"]                   {position: absolute; left: -9999px;}

.form-item input[type="date"]                   {appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.form-item input[type="date"]::-webkit-calendar-picker-indicator
                                                {width: 0.7em; height: 0.7em; border: none; position: absolute; right: 0.8em; top: 0.6em; opacity: 0.3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M40,800h720c22.1,0,40-17.9,40-40V160c0-22.1-17.9-40-40-40H600V40c0-22.1-17.9-40-40-40c-22.1,0-40,17.9-40,40v80H280V40 c0-22.1-17.9-40-40-40s-40,17.9-40,40v80H40c-22.1,0-40,17.9-40,40v600C0,782.1,17.9,800,40,800z M80,200h640v120H80V200z M80,400 h640v320H80V400z' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; cursor: pointer; transition: .15s ease-in-out;}
.form-item input[type="date"]:hover::-webkit-calendar-picker-indicator
                                                {opacity: 0.9;}
.form-item input[type="date"]::-moz-calendar-picker-indicator
                                                {opacity: 0; position: absolute; right: 100px;}

.custom-select-wrapper                          {display: block; width: 100%; height: var(--height1); margin-bottom:1rem; position: relative;}
.custom-select-wrapper select                   {position: absolute !important; left: -9999px;}
.custom-select-wrapper .custom-select           {display: block; width: 100%; height: 100%; position: relative; cursor: pointer; user-select: none;}
.custom-select-trigger                          {display: flex; width: 100%; height: 100%; color: #999999; align-items: center; gap: 0.4em; padding-block: 0.25em 0; padding-inline-start: var(--form-item-padding); padding-inline-end: 2.5em; position: absolute; inset: 0; box-sizing: border-box;}
.custom-select-trigger .flag                    {display: block; width: 1.15em; height: 1.15em; position: relative; top: -0.16em;}
.custom-select-trigger:after                    {display: block; width: 2.6em; height: 100%; position: absolute; right: 0; top: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: 28% auto; transition: .2s ease-in-out;}
.custom-select-trigger.show:after               {transform: rotateX(180deg);}
.custom-select-trigger.chosen                   {color: var(--color0);}
.custom-options                                 {display: none; width: calc(100% + 2px); max-height: 15em; background: var(--color3); position: absolute; left: -1px; top: calc(100% + 0.3em); border: solid 1px rgba(0,0,0,0.2); border-radius: var(--border-radius1); box-sizing: border-box; overflow-y: auto; z-index: 100;}
.custom-option                                  {display: flex; width: 100%; align-items: center; gap: 0.4em; text-align: left; color: var(--color0); padding: 0.8em var(--form-item-padding) 0.5em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-option:not(:last-child)                 {border-bottom: solid 1px rgba(255,255,255,0.15);}
.custom-option .flag                            {display: block; width: 1.15em; height: 1.15em; position: relative; top: -0.16em;}
.custom-option:hover,
.custom-option.selected                         {background: rgba(0,0,0,0.05);}

.checkbox                                       {display: block; width: 100%;}
.checkbox.change-disabled .chk1 + label         {pointer-events: none;}

.checks-row                                     {display: flex; flex-wrap: wrap; column-gap: 1.2em;}
.checks-row .checkbox                           {width: auto;}

.chk1:not(:checked),
.chk1:checked                                   {position: absolute; top: -9999px; left: -9999px;}
.chk1:not(:checked) + label,   
.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; font-variation-settings: "wght" 700; line-height: 1.15; padding-inline-start: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: 0.95em; height: 0.95em; border-radius: 0.2em; position: absolute; left: 0; top: -0.05em; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before              {background-color: rgba(0,0,0,0.12);}
.chk1:checked + label:before                    {background: URL('/images/check.svg') no-repeat center center, var(--color2); background-size: 100% 100%;}
.chk1:disabled + label,                  
.chk1:disabled + label:before                   {opacity: 0.7;}
.gray-box .chk1:not(:checked) + label:before    {background: white; border: solid 1px rgba(0,0,0,0.25); box-sizing: border-box;}

.radio1                                         {display: block;}
.radio1 input[type=radio]                       {position: absolute; visibility: hidden; left: -9999px;}
.radio1 label                                   {display: inline-block; padding-block: 0.2em 0; padding-inline: 1.35em 0; font-variation-settings: "wght" 700; box-sizing: border-box; cursor: pointer;}
.radio1 label:before,
.radio1 label:after                             {display: block; width: 0.95em; height: 0.95em; border-radius: 100%; position: absolute; left: 0; top: 0.16em; z-index: 2; border: solid 1px rgba(0,0,0,0.25); box-sizing: border-box; content: ""; transition: .15s ease-in-out;}
.radio1 label:before                            {background: rgba(0,0,0,0.15);}
.radio1 label:after                             {transform: scale(0.5); border: none; transition: .15s ease-in-out;}
.radio1 input[type=radio]:checked ~ label:after {background: var(--color2);}

.radio1-row                                     {column-gap: 1.2em;}
.radio1-row .form-item:has(.radio1)             {width: auto;}

.radio2                                         {display: block; width: 100%;}
.radio2 input[type=radio]                       {position: absolute; visibility: hidden; left: -9999px;}
.radio2 label                                   {display: block; width: 100%; border: solid 1px rgba(0,0,0,0.2); outline: solid 1px transparent; border-radius: var(--border-radius1); padding: 1.5em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.radio2 label:hover                             {border-color: var(--color1);}
.radio2 label img                               {display: block; width: 100%; height: auto;}
.radio2 label:before,
.radio2 label:after                             {display: block; width: 1.2em; height: 1.2em; border-radius: 0.2em; position: absolute; bottom: 0.9em; right: 0.9em; content: ""; transition: .15s ease-in-out;}
.radio2 label:before                            {background: var(--color3);}
.radio2 input[type=radio]:checked ~ label       {border-color: var(--color2); outline-color: var(--color2);}
.radio2 input[type=radio]:checked ~ label:before{background: var(--color2);}
.radio2 input[type=radio]:checked ~ label:after {background: URL('/images/check.svg') no-repeat center center; background-size: 100% 100%;}

.slider-range                                   {display: flex; justify-content: space-between; align-items: center; gap: 0.8em 1em;}
.slider-range-wrapper                           {display: block; width: 10em; height: 0.5em; position: relative;}
.slider-range-wrapper .range-slider             {display: block; width: 100%; height: 100%;}
.slider-range-wrapper .range-inner              {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.15); border-radius: 0.25em;}
.slider-range-wrapper .range                    {display: block; height: 100%; background: var(--color2); position: absolute; top: 0; z-index: 1; border: 0; background-position: 0 0;}
.slider-range-wrapper .handle                   {display: block; width: 0.35em; height: 260%; background: var(--color1); margin-left: -2px !important; position: absolute; top: -80%; z-index: 2; transition: .15s ease-in-out;}
.slider-range-wrapper .handle:hover             {background: var(--color1e); cursor: e-resize;}
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .slider-range-wrapper                         {width: 10vw;}
  }
  @media screen and (max-width: 580px)          {
  .row-form-items:has(.slider-range)            {margin-block: 0.7em;}
  .slider-range                                 {flex-wrap: wrap;}
  .slider-range-wrapper                         {width: 100%; order: -1;}
  }  

.img-border                                     {display: block; width: 100%; padding: 1.5em; border: solid 1px rgba(0,0,0,0.2); outline: solid 1px transparent; border-radius: var(--border-radius1); box-sizing: border-box;}
.img-border img                                 {display: block; width: 100%; height: auto;}

.type-select .radio2 label img, .img-border img { max-width: 10em; }

.settings .cond textarea                        {height: 4em;}
.project-detail .descr textarea                 {height: 5.5em;}

.gray-box .form-item :is(input, textarea, .custom-select),
.gray-box .form-item .radio1 label:before       {background: white;}

.row-form-items                                 {display: flex; width: 100%; justify-content: space-between; align-items: center; align-content: center; gap: 0.35em;}
.row-form-items > span                          {display: block; font-size: 1em; color: var(--color1); font-variation-settings: "wght" 700; flex-grow: 2; margin-top: 0.32em; padding-right: 0.7em; box-sizing: border-box;}
.row-form-items > span em                       {font-variation-settings: "wght" 500, "slnt" -10;}
.row-form-items .form-item                      {width: 4.5em; --height1: 2em;}
.row-form-items.one-wide .form-item             {width: 9em;}

.row-form-items .checkbox                       {width: auto; flex-grow: 2; margin-top: 0.2em;}
.row-form-items:has(.checkbox) .units           {width: 1.5em; flex-grow: 0;}
.row-form-items:has(.checkbox) input[disabled]  {opacity: 0.5;}

.h2:has(+ .upper-icons)                         {padding-inline-end: 8em;}
.h3:has(+ .upper-icons)                         {padding-inline-end: 9.5em;}
.upper-icons .row-form-items:first-of-type .radio-item { position:relative; }
.upper-icons .row-form-items:first-of-type .form-item:nth-of-type(-n+2)::before,
.upper-icons .row-form-items:first-of-type .radio-item:nth-of-type(-n+2)::before
                                                {display: block; width: 1.5em; height: 1.5em; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: calc(50% - 0.75em); top: -3.5em; content: "";}
.upper-icons .row-form-items .form-item:nth-of-type(1)::before,
.upper-icons .row-form-items .radio-item:nth-of-type(1)::before {
    background-image: url("/images/icon-snowflake.svg");
}

.upper-icons .row-form-items .form-item:nth-of-type(2)::before,
.upper-icons .row-form-items .radio-item:nth-of-type(2)::before {
    background-image: url("/images/icon-sun.svg");
}

/*.col-disabled.cd-left .form-item:nth-last-child(2),
.col-disabled.cd-right .form-item:last-child    {opacity: 0.5;}*/
input[disabled]                          {opacity: 0.5; cursor: not-allowed;}

.summary-buttons                                {display: block; width: 100%; flex-wrap: wrap; gap: 0.4rem; font-size: 1em;}
.summary-buttons > *                            {width: 100%; margin-bottom:0.5rem; padding:0.5rem 0 0.2rem 0;}
  @media screen and (min-width: 1281px)         {
  .summary-buttons > *                          {width: calc(70% - 0.2rem);}
  }
  @media screen and (min-width: 961px) and (max-width: 1080px){
  .summary-buttons > *                          {width: calc(70% - 0.2rem);}
  }
  @media screen and (min-width: 481px) and (max-width: 768px){
  .summary-buttons > *                          {width: calc(100% - 0.2rem);}
  }

.grid:has(.selection)                           {max-width: 70rem;}

.dropdown-items                                 {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em;}
.dropdown-items .item                           {display: block; width: 100%; border: solid 1px rgba(0,0,0,0.2); outline: solid 1px transparent; border-radius: var(--border-radius1); box-sizing: border-box; transition: .15s ease-in-out;}
.dropdown-items .item > *                       {width: 100%; padding: 1em; box-sizing: border-box;}
.dropdown-items .item-head                      {display: flex; flex-wrap: wrap; padding-block: 0.8em; padding-inline: 1.2em 3.5em; position: relative; cursor: pointer;}
.dropdown-items .item-head:after                {display: block; width: 3em; height: 100%; position: absolute; right: 0; top: 0; content: ""; transform: rotate(-90deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: 25% auto; transition: .2s ease-in-out;}
.dropdown-items .item-head span                 {display: block; padding-top: 0.2em; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.dropdown-items .item-head span.title           {width: 12em; font-variation-settings: "wght" 800; transition: .15s ease-in-out;}
.dropdown-items .item:has(.item-head:hover)     {border-color: var(--color2);}
.dropdown-items .item-head:hover span.title     {color: var(--color2);}
.dropdown-items .collapse                       {display: none; width: 100%; padding-top: 0;}
.dropdown-items .item-detail                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.5em 0;}
.dropdown-items .table                          {width: 30%; font-size: 0.9em;}
.dropdown-items .table .h3                      {margin-bottom: 0.4em;}
.dropdown-items .table .h3:not(:first-child)    {margin-top: 1em}
.dropdown-items .table table                    {font-size: 0.9em;}
.dropdown-items .visual-data                    {display: flex; width: 65%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.dropdown-items .visual-data > div              {display: block; width: 100%;}
.dropdown-items .visual-data > div img          {display: block; width: 100%;}
.dropdown-items .item.show                      {border-color: var(--color2); outline-color: var(--color2);}
.dropdown-items .item.show .item-head:after     {transform: rotate(0deg);}
  @media screen and (max-width: 768px)          {
  .dropdown-items .item-detail > *              {width: 100%;}
  }
  @media screen and (max-width: 540px)          {
  .dropdown-items .item-head span.title         {width: 100%;}
  .dropdown-items .item-head span.info1         {font-size: 0.8em;}
  }

.table2                                         {width: 100%;}
.table2 td                                      {padding: 0.5em 0.7em 0.3em;}
.table2 td:last-child                           {text-align: right; font-variation-settings: "wght" 600;}
.table2 tr:nth-child(odd) td                    {background: var(--color3);}

.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: 5em min(1rem, 5%) 4.5em; box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 100000;}
.wndw:before                                    {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .4s ease-in-out;}
.wndw > .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.wndw > div                                     {width: 100%; max-width: 40em; max-height: calc(100vh - 4rem); background: white; transform: scale(0.95); position: relative; border-radius: var(--border-radius2); overflow: hidden; z-index: 2; overflow-y: auto; overflow-x: hidden; box-shadow: 0 0 1em rgba(0,0,0,0.5); transition: .4s ease-in-out;}
.wndw > div:before                              {display: block; width: 100%; height: 1.2rem; background: white; position: absolute; left: 0; top: 0; content: ""; z-index: 5;}
.wndw > div .overflow                           {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}
.wndw.show                                      {left: 0;}
.wndw.show:before                               {opacity: 1;}
.wndw.show > div                                {transform: scale(1);}
.wndw.show.hide                                 {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;}
.wndw.show.hide:before                          {opacity: 0;}
.wndw.show.hide > div                           {transform: scale(0.95); opacity: 0;}
.wndw .cross                                    {display: block; width: 1.2em; height: 1.2em; cursor: pointer; position: absolute; right: 0.9rem; top: 0.9rem; z-index: 10002;}
.wndw .cross span                               {display: block; width: 100%; height: 2px; background: #cccccc; border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .2s ease-in-out;}
.wndw .cross:hover span                         {background: #252525;}
.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}
.wndw .cross span:nth-child(2)                  {transform: rotate(-45deg);}
.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.3em; font-size: 0.9rem; padding: max(1rem, 7%); box-sizing: border-box;}
.wndw .wndw-content :is(.title, p)              {display: block; width: 100%; text-align: center;}
.wndw .wndw-content .title                      {font-size: 2em; font-variation-settings: "wght" 800; margin-bottom: -0.4em;}
.wndw .form-items                               {width: auto; justify-content: center;}
.wndw .form-item:not(.w100)                     {width: 20rem !important;}
.wndw .flex                                     {align-items: center; gap: 0.35em; margin: 0;}
.wndw .link                                     {display: block; font-size: 0.9em; color: #999999; font-weight: 500; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}
.wndw .link:hover                               {color: var(--color0); text-decoration-color: transparent;}
.wndw .flex .button:not(:only-of-type)          {width: calc(50% - 0.5 * var(--flex-gap));}
  @media screen and (min-width: 541px)          {
  .wndw .form-items                             {width: 100%; justify-content: space-between;}
  .wndw .form-items:has(.form-item:only-child)  {justify-content: center;}
  .wndw .form-item:not(.w100)                   {width: calc(50% - 0.5 * var(--form-gap)) !important;}
  }
  @media screen and (max-width: 540px)          {
  .wndw .upload-types > div                     {width: 33.33%; justify-content: center;}  
  .wndw .wndw-content .upload-types > div .btn  {flex-direction: column; text-align: center;}
  }

/* RTL --------------------------------------------------------------------------------------------------------------------*/
html[dir="rtl"] .custom-select-trigger:after    {right: auto; left: 0;}

html[dir="rtl"] .menu nav a span                {text-align: right;}
html[dir="rtl"] .menu nav a svg:last-of-type    {transform: rotate(180deg);}
html[dir="rtl"] .header .elements a:last-child:before 
                                                {left: auto; right: -1.2em;}
  @media screen and (max-width: 1080px)         {
  html[dir="rtl"] .menu                         {left: auto; right: calc(0px - var(--menu-width));}
  html[dir="rtl"] .menu .title                  {text-align: right;}
  html[dir="rtl"] .menu .header-head:has(a)     {border-radius: 1.5em 0 0 1.5em;}
  html[dir="rtl"] body.show .menu               {left: auto; right: 0;}
  }

html[dir="rtl"] .ordering a:not(:first-child),
html[dir="rtl"] .results-num a:not(:first-child),
html[dir="rtl"] .pagination a:not(:first-child) {border-left: none; border-right: solid 1px #999999;}

html[dir="rtl"] .control-bar .search button     {left: auto; right: 0;}

html[dir="rtl"] .button                         {flex-direction: row-reverse;}
html[dir="rtl"] .button svg:nth-child(1)        {order: 2;}
html[dir="rtl"] .button svg:nth-child(3)        {order: -1; transform: rotate(180deg);}
html[dir="rtl"] .button span                    {text-align: right;}

html[dir="rtl"] .head .nav-button.back          {transform: rotate(180deg);}
html[dir="rtl"] .head .nav-button.forward       {transform: none;}

html[dir="rtl"] .custom-select-wrapper select,
html[dir="rtl"] .chk1:not(:checked),
html[dir="rtl"] .chk1:checked,
html[dir="rtl"] .radio1 input[type=radio],
html[dir="rtl"] .form-item input[type="file"],
html[dir="rtl"] .radio2 input[type=radio]       {left: auto; right: -9999px;}

html[dir="rtl"] .chk1:not(:checked) + label,   
html[dir="rtl"] .chk1:checked + label           {text-align: right;}
html[dir="rtl"] .chk1:not(:checked) + label:before,
html[dir="rtl"] .chk1:checked + label:before    {left: auto; right: 0;}

html[dir="rtl"] .radio1 label                   {text-align: right;}
html[dir="rtl"] .radio1 label:before,
html[dir="rtl"] .radio1 label:after             {left: auto; right: 0;}

html[dir="rtl"] .dropdown-items .item-head:after{left: 0; right: auto; transform: rotate(90deg);}



.pn_section {
    display: none;
}


#pn_4 .checkbox .note { padding-left:1.2rem; margin-top:1rem; }
#pn_4 .gray-box { margin-bottom:0; }
#pn_4 .h2 { margin-block: 0.2em -1em; }

.noicon .form-item::before { display:none !important; }
#pn_2_h2_vymenikVstupVzduchu.noicon { margin-bottom:0px !important; position:relative; top:-2.7rem; }
#pn_2_h2_vymenikVystupVzduchu.noicon { margin-bottom:0px !important; position:relative; top:-4.4rem; }