/* gradienty */
/*
https://cssgradient.io/

 background: rgb(201,201,201);
background: linear-gradient(0deg, rgba(201,201,201,1) 4%, rgba(255,255,255,1) 48%); 
*/

/* původně mělo zabraňovat scrollování mimo <dialog>, ale nefunguje správně
body:has(dialog[open]) 
{
    overflow: hidden;
}*/


:root
{
  --asp_table_row_header_bgcolor: blue;
}



/* prevence proti scrollu control pod zobrazeným <dialog> pro různé prvky*/
body:has(dialog[open]) { overflow-y: hidden !important;}
*:has(dialog[open]) {overflow-y: hidden !important;}

/* vypnutí podtržítka u odkazů*/
a { text-decoration: none }

/* Definice vlastního paddingu, protože W3.CSS na toto nestačí. 
Princip je ten, že se dá zvolit padding, jeho strana a velikost.
Možné příklady: asp-padding left small  //provede levý padding 4px
Je také možné nastavit hodnotu none pro vypnutí jak jednotlivých stran, tak všeho
*/
.asp-padding-0 { padding: 0px !important; }
.asp-padding-l0 {padding-left: 0px !important;}
.asp-padding-l2 { padding-left: 2px !important; }
.asp-padding-l4 { padding-left: 4px !important; }
.asp-padding-l8  { padding-left: 8px !important;}
.asp-padding-l16 {padding-left: 16px !important; }
.asp-padding-l32 {padding-left: 32px !important;}
.asp-padding-l48 {padding-left: 48px !important;}
.asp-padding-r0 {padding-right: 0px !important;}
.asp-padding-r2 { padding-right: 2px !important; }
.asp-padding-r4 { padding-right: 4px !important; }
.asp-padding-r8 { padding-right: 8px !important; }
.asp-padding-r16 {padding-right: 16px !important;}
.asp-padding-r20 {padding-right: 20px !important;}
.asp-padding-r32 {padding-right: 32px !important;}
.asp-padding-t0 {padding-top: 0px !important;}
.asp-padding-t2 { padding-top: 2px !important; }
.asp-padding-t4 { padding-top: 4px !important; }
.asp-padding-t8 { padding-top: 8px !important; }
.asp-padding-t16 {padding-top: 16px !important;}
.asp-padding-t20 {padding-top: 20px !important;}
.asp-padding-t32 {padding-top: 32px !important;}
.asp-padding-b0 {padding-bottom: 0px !important;}
.asp-padding-b2 { padding-bottom: 2px !important; }
.asp-padding-b4 { padding-bottom: 4px !important; }
.asp-padding-b8 { padding-bottom: 8px !important; }
.asp-padding-b16 {padding-bottom: 16px !important;}
.asp-padding-b20 {padding-bottom: 20px !important;}
.asp-padding-b32 {padding-bottom: 32px !important;}
.asp-padding-2 { padding: 2px 2px 2px 2px !important; }
.asp-padding-4 { padding: 4px 4px 4px 4px !important; }
.asp-padding-8 { padding: 8px 8px 8px 8px !important; }
.asp-padding-16 {padding: 16px 16px 16px 16px !important;}
.asp-padding-20 {padding: 20px 20px 20px 20px !important;}
.asp-padding-32 {padding: 32px 32px 32px 32px !important;}
.asp-padding-s1 { padding: 1px 2px 1px 2px !important; }
.asp-padding-s2 { padding: 2px 4px 2px 4px !important; }
.asp-padding-s3 { padding: 4px 8px 4px 8px !important; }
.asp-padding-s4 {padding: 8px 16px 8px 16px !important;}
.asp-padding-s5 {padding: 16px 24px 16px 24px !important;}
.asp-padding-s6 {padding: 24px 48px 24px 48px !important;}

.asp-padding-tb2 { padding-bottom: 2px !important;padding-top: 2px !important;}
.asp-padding-tb4 { padding-bottom: 4px !important;padding-top: 4px !important;}
.asp-padding-tb6 { padding-bottom: 6px !important;padding-top: 6px !important;}
.asp-padding-tb8 { padding-bottom: 8px !important;padding-top: 8px !important;}
.asp-padding-tb16 {padding-bottom: 16px !important;padding-top: 16px !important;}
.asp-padding-tb20 {padding-bottom: 20px !important;padding-top: 20px !important;}
.asp-padding-tb32 {padding-bottom: 32px !important;padding-top: 32px !important;}

.asp-padding-lr2 { padding-left: 2px !important;padding-right: 2px !important;}
.asp-padding-lr4 { padding-left: 4px !important;padding-right: 4px !important;}
.asp-padding-lr6 { padding-left: 6px !important;padding-right: 6px !important;}
.asp-padding-lr8 { padding-left: 8px !important;padding-right: 8px !important;}
.asp-padding-lr16 {padding-left: 16px !important;padding-right: 16px !important;}
.asp-padding-lr20 {padding-left: 20px !important;padding-right: 20px !important;}
.asp-padding-lr32 {padding-left: 32px !important;padding-right: 32px !important;}

/* Definice vlastního marginu, protože W3.CSS na toto nestačí. Princip je ten, že se dá zvolit margin, jeho strana a velikost.
Možné příklady: asp-margin left small  //provede levý margin 4px
*/
.asp-margin-none { margin: 0px !important; }
.asp-margin-l0 { margin-left: 0px !important; }
.asp-margin-l2 { margin-left: 2px !important; }
.asp-margin-l4 { margin-left: 4px !important; }
.asp-margin-l6 { margin-left: 6px !important; }
.asp-margin-l8 { margin-left: 8px !important; }
.asp-margin-l16 {margin-left: 16px !important;}
.asp-margin-l20 {margin-left: 20px !important;}
.asp-margin-l32 {margin-left: 32px !important;}   
.asp-margin-r0 { margin-right: 0px !important; }
.asp-margin-r2 { margin-right: 2px !important; }
.asp-margin-r4 { margin-right: 4px !important; }
.asp-margin-r6 { margin-right: 6px !important; }
.asp-margin-r8 { margin-right: 8px !important; }
.asp-margin-r16 {margin-right: 16px !important;}
.asp-margin-r20 {margin-right: 20px !important;}
.asp-margin-r32 {margin-right: 32px !important;}
.asp-margin-t0 { margin-top: 0px !important; }
.asp-margin-t2 { margin-top: 2px !important; }
.asp-margin-t4 { margin-top: 4px !important; }
.asp-margin-t6 { margin-top: 6px !important; }
.asp-margin-t8 { margin-top: 8px !important; }
.asp-margin-t16 {margin-top: 16px !important;}
.asp-margin-t20 {margin-top: 20px !important;}
.asp-margin-t32 {margin-top: 32px !important;}
.asp-margin-b0 { margin-bottom: 0px !important; }
.asp-margin-b2 { margin-bottom: 2px !important; }
.asp-margin-b4 { margin-bottom: 4px !important; }
.asp-margin-b6 { margin-bottom: 6px !important; }
.asp-margin-b8 { margin-bottom: 8px !important; }
.asp-margin-b16 {margin-bottom: 16px !important;}
.asp-margin-b20 {margin-bottom: 20px !important;}
.asp-margin-b32 {margin-bottom: 32px !important;}
.asp-margin-0 { margin: 0px !important; }
.asp-margin-2 { margin: 2px 2px 2px 2px !important; }
.asp-margin-4 { margin: 4px 4px 4px 4px !important; }
.asp-margin-6 { margin: 6px 6px 6px 6px !important; }
.asp-margin-8 { margin: 8px 8px 8px 8px !important; }
.asp-margin-16 {margin: 16px 16px 16px 16px !important;}
.asp-margin-20 {margin: 20px 20px 20px 20px !important;}
.asp-margin-32 {margin: 32px 32px 32px 32px !important;}

.asp-margin-tb2 { margin-bottom: 2px !important;margin-top: 2px !important;}
.asp-margin-tb4 { margin-bottom: 4px !important;margin-top: 4px !important;}
.asp-margin-tb6 { margin-bottom: 6px !important;margin-top: 6px !important;}
.asp-margin-tb8 { margin-bottom: 8px !important;margin-top: 8px !important;}
.asp-margin-tb16 {margin-bottom: 16px !important;margin-top: 16px !important;}
.asp-margin-tb20 {margin-bottom: 20px !important;margin-top: 20px !important;}
.asp-margin-tb32 {margin-bottom: 32px !important;margin-top: 32px !important;}

.asp-margin-lr2 { margin-left: 2px !important;margin-right: 2px !important;}
.asp-margin-lr4 { margin-left: 4px !important;margin-right: 4px !important;}
.asp-margin-lr6 { margin-left: 6px !important;margin-right: 6px !important;}
.asp-margin-lr8 { margin-left: 8px !important;margin-right: 8px !important;}
.asp-margin-lr16 {margin-left: 16px !important;margin-right: 16px !important;}
.asp-margin-lr20 {margin-left: 20px !important;margin-right: 20px !important;}
.asp-margin-lr32 {margin-left: 32px !important;margin-right: 32px !important;}

.asp-margin-s1 {margin: 1px 2px 1px 2px !important; }
.asp-margin-s2 {margin: 2px 4px 2px 4px !important; }
.asp-margin-s3 {margin: 4px 8px 4px 8px !important; }
.asp-margin-s4 {margin: 8px 16px 8px 16px !important;}
.asp-margin-s5 {margin: 16px 24px 16px 24px !important;}
.asp-margin-s6 {margin: 24px 48px 24px 48px !important;}



.asp-cursor-crosshair { cursor: crosshair; }
.asp-cursor-pointer { cursor: pointer; }


/* zaškrtávací pole o velikosti 20px a vlastní barvou zaškrtávacího pole*/
.asp-radio
{
  width:20px;
  height:20px;
  top:4px;
  position:relative;
  accent-color: #34b13e;
}

/* check box typu ovál. Má možnost zvolit ještě doplněk barvy "red", "blue" pro pozadí ve zvoleném (zaškrtlém) režimu  */
.asp-check
{
  appearance: none;
  background-color: #949494;
  border-radius: 72px;
  border-style: none;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  position: relative;
  width: 36px; /*30*/
  top: 6px;
  
  &::before 
  {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  } 
  &::after 
  {
    transition: all 100ms ease-out;
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }
  &:checked { background-color: #34b13e; }
  &:checked::after
  {
    background-color: #fff;
    left: 19px;
  }
  &:disabled:checked { background-color: #5ac079;}
  &:disabled:not(:checked) { background-color: #adadad;}
  &:focus:not(.focus-visible) {outline: 0;}

  &.red
  {
    &:checked { background-color: #ff4d40; }
    &:disabled:checked { background-color: #e48c86;}
  }

  &.blue
  {
    &:checked { background-color: #5d95ff; }
    &:disabled:checked { background-color: #aabad6;}
  }
}

.asp-border-0{border:0!important}
.asp-border{border:1px solid #ccc!important}
.asp-border-color-white { border-color: #ffffff !important;}
.asp-border-color-blue1 { border-color: #0ab3dd !important;}
.asp-border-color-blue2 { border-color: #1488d6 !important;}
.asp-border-color-blue3 { border-color: #1a2edf !important;}
.asp-border-color-violet1 { border-color: #d83bb6 !important;}
.asp-border-color-violet2 { border-color: #b744da !important;}
.asp-border-color-violet3 { border-color: #9329f7 !important;}
.asp-border-color-red1 { border-color: #ee1414 !important;}
.asp-border-color-red2 { border-color: #f11d2f !important;}
.asp-border-color-red3 { border-color: #ca2548 !important;}
.asp-border-color-orange1 { border-color: #fc801b !important;}
.asp-border-color-orange2 { border-color: #f79516 !important;}
.asp-border-color-orange3 { border-color: #fd6f11 !important;}
.asp-border-color-green1 { border-color: #4ad114 !important;}
.asp-border-color-green2 { border-color: #4baa26 !important;}
.asp-border-color-green3 { border-color: #268523 !important;}
.asp-border-color-gray1 { border-color: #ddd !important; }
.asp-border-color-gray2 { border-color: #ccc !important; }
.asp-border-color-gray3 { border-color: #a0a0a0 !important; }
.asp-border-color-gray4 { border-color: #7c7c7c !important; }
.asp-border-color-gray5 { border-color: #444444 !important; }
.asp-border-color-black1 { border-color: #222222 !important; }
.asp-border-color-black2 { border-color: #000000 !important; }



/* definice stínu pro objekt. Deklarace: asp-shadow typeX kde X je číslo typu. V tuto chvíli (1) je můj vytvořený default, ostatní 
(až do 30) jsou různé variace z netu.
Je tu i speciální styl custom s parametry spread0..spread4 a podparametrem blur4,blur6,blur8,blur10 a blur16, například:
asp-shadow spread0 blur16
*/
.asp-shadow
{
  &.type1 {box-shadow: 2px 4px 12px 2px rgba(0,0,0,0.25);}
  &.type2 {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}  
  &.type3 {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;}
  &.type4 {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
  &.type5 {box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
  &.type6 {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
  &.type7 { box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
  &.type8 { box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
  &.type9 { box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; }
  &.type10 { box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;}
  &.type11 { box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
  &.type12 { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; }
  &.type13 { box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
  &.type14 { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }
  &.type15 { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; }
  &.type16 { box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; }
  &.type17 { box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;}
  &.type18 { box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;}
  &.type19 { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; }
  &.type20 { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; }
  &.type21 { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; }
  &.type22 { box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; }
  &.type23 { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; }
  &.type24 { box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }
  &.type25 { box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; }
  &.type26 {box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}
  &.type27 {box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;}
  &.type28 {box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;}
  &.type29 {box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;}
  &.type30 {box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;}
  
  &.spread0
  { 
    &.blur4 { box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.25); }
    &.blur6 { box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.25); }
    &.blur8 { box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25); }
    &.blur10 { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); }
    &.blur16 { box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25); }
  }
  &.spread1
  { 
    &.blur4 { box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.25); }
    &.blur6 { box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.25); }
    &.blur8 { box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25); }
    &.blur10 { box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25); }
    &.blur16 { box-shadow: 0px 0px 16px 1px rgba(0,0,0,0.25); }
  }
  &.spread2
  { 
    &.blur4 { box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.25); }
    &.blur6 { box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.25); }
    &.blur8 { box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.25); }
    &.blur10 { box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.25); }
    &.blur16 { box-shadow: 0px 0px 16px 2px rgba(0,0,0,0.25); }
  }
  &.spread3
  { 
    &.blur4 { box-shadow: 0px 0px 4px 3px rgba(0,0,0,0.25); }
    &.blur6 { box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.25); }
    &.blur8 { box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.25); }
    &.blur10 { box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.25); }
    &.blur16 { box-shadow: 0px 0px 16px 3px rgba(0,0,0,0.25); }
  }
  &.spread4
  { 
    &.blur4 { box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.25); }
    &.blur6 { box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.25); }
    &.blur8 { box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.25); }
    &.blur10 { box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.25); }
    &.blur16 { box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.25); }
  }
}

/* barva pozadí webu do index.html */
body.asp-page-body
{
  background-color: #f3f3f3;
  & header  /* odsazení od nabídek níže umístěných pod základním menu*/
  {  
    margin-bottom: 84px !important;
  } 

  /*
  @media only screen and (max-width: 600px) 
  {
    margin-bottom: 99px !important;
  }*/  
}

/* definice nastavení pro titulek stránky s hlavním nadpisem */
.asp-page-title
{
  color: #555;
  background-color: #fafafa;
  text-shadow: 2px 2px 8px #666;
  letter-spacing: 3px;

  /*text-shadow: 1px 1px 30px rgb(50, 50, 50), 0 0 25px rgb(45, 44, 44), 0 0 10px rgb(105, 104, 104);*/
  text-align:center;

  border: 2px rgb(255, 157, 9);
  border-style: none none solid none;
  height: 46px;

  & h3
  {
    font-family: "Verdana", Helvetica, Arial Black, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;    
  }
}

/* barva hlavičky hlavního panelu, kde je nadpis a tlačítka menu */
.asp-page-menu
{
  color: #444;
  /*background: linear-gradient(0deg, rgba(145, 144, 144,1) 20%, rgba(234,234,234,1) 80%);*/
  background-color: #525151; /*5f5e5e*/

  & button, & div > div.button
  {
    font-family: "Century Gothic", Helvetica, "Segoe UI"; 
    background: none;
    border: 0;
    color: #eee;
    text-shadow: 1px 1px 4px #444;
    letter-spacing: 2px;    
  }

  & button:hover
  {
    color:#fff!important;
    /*background-color:#ffeb3b!important*/
    /*background: linear-gradient(0deg, rgba(50, 50, 50,1) 20%, rgba(150,150,150,1) 80%); */
    background-color: #7f7e7e;
  }

  & button.active
  {
    color: #fff !important; 
    text-decoration: underline;
    text-underline-offset: 5px;
  }

}

/* slouží pro nastavení obsahu, aby se neroloval do footeru dole a footer tak nepřekrýval část obsahu */
.asp-content
{
    height: 100% !important;
    margin-bottom: 35px;
}

/* slouží pro spodní panel (footer) tak, aby byl vždy na spodu. Pozor, vždy souvisí s třídou asp-content, která musí 
v závislosti na výšce footeru správně nastavit margin-bottom!*/
.asp-footer
{
  border: 2px rgb(255, 157, 9);
  border-style: solid none none none;

  height: 50px !important;
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #6b6b6b;
  color: #ccc;
}

/*background: linear-gradient(0deg, rgba(145, 144, 144,1) 20%, rgba(234,234,234,1) 80%); */


/* barva hlavičky divu pro menu modulů na hlavního panelu (pod hlavním menu) */
div.asp-page-menumodules
{
  background-color: rgb(155, 154, 154);
  font-family: "Century Gothic", "Segoe UI";
  /*background: linear-gradient(0deg, rgba(115, 114, 114,1) 20%, rgba(155,154,154,1) 80%); */
}

/* definice nastavení barev pro tlačítko odhlášení*/
a.asp-btn-logout
{
  color:rgb(255, 219, 219); /* color:rgb(247, 181, 181); */
}

/* zarovnání prvku vpravo */
.asp-right {float:right!important;}
/* zarovnání prvku vlevo */
.asp-left {float:left!important;}
/* zarovnání prvku na střed */
.asp-center{text-align:center!important}

/* barva pozadí bílá */
.asp-bg-white { background-color:#fff!important; }
.asp-bg-gray1 { background-color:#f3f3f3!important; }
.asp-bg-gray2 { background-color:#f2f2f2!important; }
.asp-bg-gray3 { background-color:#f0f0f0!important; }
.asp-bg-gray4 { background-color:#ddd!important; }
.asp-bg-gray5 { background-color:#ccc!important; }
.asp-bg-gray6 { background-color:#bbb!important; }
.asp-bg-gray7 { background-color:#aaa!important; }
.asp-bg-gray8 { background-color:#888!important; }
.asp-bg-gray9 { background-color:#666!important; }
.asp-bg-gray10 { background-color:#444!important; }


.asp-color-white { color: #ffffff !important;}
.asp-color-blue1 { color: #0ab3dd !important;}
.asp-color-blue2 { color: #1488d6 !important;}
.asp-color-blue3 { color: #1a2edf !important;}
.asp-color-violet1 { color: #d83bb6 !important;}
.asp-color-violet2 { color: #b744da !important;}
.asp-color-violet3 { color: #9329f7 !important;}
.asp-color-red1 { color: #ee1414 !important;}
.asp-color-red2 { color: #f11d2f !important;}
.asp-color-red3 { color: #ca2548 !important;}
.asp-color-orange1 { color: #fc801b !important;}
.asp-color-orange2 { color: #f79516 !important;}
.asp-color-orange3 { color: #fd6f11 !important;}
.asp-color-green1 { color: #4ad114 !important;}
.asp-color-green2 { color: #4baa26 !important;}
.asp-color-green3 { color: #268523 !important;}
.asp-color-gray1 { color: #ddd !important; }
.asp-color-gray2 { color: #ccc !important; }
.asp-color-gray3 { color: #a0a0a0 !important; }
.asp-color-gray4 { color: #7c7c7c !important; }
.asp-color-gray5 { color: #444444 !important; }
.asp-color-black1 { color: #222222 !important; }
.asp-color-black2 { color: #000000 !important; }


.asp-flex-col
{
  display: flex;
  justify-content: start;
  align-items: stretch;
  align-content: start;
  flex-direction: row;
  gap: 8px;

  &.center{justify-content: center !important;}

  /* selektor pro všechny childy
  & > *
  {
  }*/

  @media only screen and (max-width: 600px) 
  {    
    display: table;
  }
}

/* flexibilní řádek pro typy komponent, kde první je label s popiskem a poté je controla. Controla, pokud je 
input, pak se roztáhne do zbytku délky divu, ve kterém hostuje*/
.asp-flex-row
{
  display: flex;
  justify-content: start;
  align-items: stretch;
  align-content: space-between;
  gap: 8px;
  margin-bottom: 8px;

  /* vše kromě checkboxu, se kterým naopak nehýbeme*/
  & input:not([type=checkbox])
  {    
    width: auto!important;
    flex-shrink: 1;
    flex-grow: 1;

    @media only screen and (max-width: 400px) 
    {
      display: block !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      width: 100% !important;      
    }
  }

  /*specialita pro checkbox, ten dáváme na konec řádku*/
  & input:is([type=checkbox])
  {
    margin-left: auto!important;    
  }

  @media only screen and (max-width: 400px) 
  {
    flex-shrink: 0;
    flex-grow: 0;
    display: table;
    width: 100%;
  }
}


/* vstupní pole <input>. 
Oproti w3-input: -má zmenšené rozměry a padding. Podporuje i */
.asp-input
{
  padding:4px;
  padding-left: 4px;
  /*transform: translateY(-4px);*/
  display:block;
  border:none;
  border-bottom:1px solid #ccc;
  width: 100%;
  
  &.float-left
  {
    float:left!important; width: auto !important;
    &::after{content:"";clear: right;} 
  }
  &.width50{width:50%;}

  &.width50px{width:50px;}
  &.width100px{width:100px;}
  &.width200px{width:200px;}
  &.width400px{width:400px;}
  &.center{text-align:center;}
  &.left{float:left!important;}
  &.right{float:right!important;}

  @media only screen and (max-width: 600px) { width: 100% !important; transform: translateY(0px);}
}


/* combobox <select> */
.asp-select
{
  padding:6px 0px;
  width:100%;
  border:none;
  border-bottom:1px solid #ccc;  
  /*border-top-left-radius: 8px;
  border-top-right-radius: 8px;*/
    
  &.blue
  {
    border-bottom: 1px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #1488d6 !important;
    background-color: #ffffff !important;
    color: #1488d6;
  }

  &.green
  {
    border-bottom: 1px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #20a136 !important;
    background-color: #ffffff !important;
    color: #098b34;
  }

  &.gray
  {
    border-bottom: 1px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #ddd !important;
    background-color: #ffffff !important;
    color: #303030;
  }


  &.border-all
  {
    border: 1px;
    border-style: solid;
  }

  
  &.round2{border-radius:2px!important;}
  &.round4{border-radius:4px!important;}
  &.round8{border-radius:8px!important;}
  &.round12{border-radius:12px!important;}
  &.round16{border-radius:16px!important;}
  &.round32{border-radius:32px!important;}

  @media only screen and (max-width: 600px) { width: 100% !important; transform: translateY(0px);}
}


/* 
Standardní tlačítko - Radek Vašta, 12.12.2023.
Zaoblené rohy, bez dekorací, kurzor typu pointer. Interně zpracovává najetí myší na tlačítko, zpracovává také vlastnost disabled a to 
jak atributem, tak třídou. Při disabled je tlačítko zšednuto a kurzor se změní na not-allowed
Další vlastnosti, které je možno uvést za třídu asp-btn, např. asp-btn gray medium
gray: šedé tlačítko
red: červené tlačítko
green: zelené tlačítko
blue: modré tlačítko
green-on-white: zelený text na bílém pozadí
black-on-white: černý text na bílém pozadí

Velikosti
Bez udání velikosti se jedná o standardní velikost. Další možné:
small: malá velikost, menší než základ, malá velikost, font 8px, pad.top bottom:2px, pad: left right: 2px, min height a min width: 26px
normal: obyč velikost - základní, která se nastaví i bez udání velikosti, font 8px, pad.top bottom:4px, pad: left right: 10px, min height a min width: 28px  
medium: střední velikost, font 14px, pad.top bottom:6px, pad: left right: 14px, min height: 34px
large: větší velikost, font 16px, pad.top bottom:8px, pad: left right: 20px, min height: 40px
 */
button.asp-btn
{
  font-size:12px!important;
  border-radius: 6px !important;
  border-width: 1px !important;
  
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;

  margin: 2px 2px 2px 2px;
  
  min-height: 28px;    
  display:inline-block !important;
  vertical-align:middle !important;
  line-height: normal !important;
  overflow:hidden !important;
  text-decoration:none !important;  
  text-align:center !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  color:inherit !important;
  background-color:inherit;  
  border-style: solid !important;
  text-wrap: wrap !important;
  
  /* světle šedé tlačítko bez gradientu */
  &.light-gray
  {
    border-width: 0px !important;
    background-color: #ccc;
    color: #222;
  }

  /* šedé tlačítko */
  &.gray
  {
    border-color: #888 !important;
    background: linear-gradient(180deg, rgb(220,220,220), rgb(189, 184, 178)) !important;    
    color: #111 !important;
  }

  /* červené tlačítko */
  &.red
  {
    border-color: rgb(199, 82, 82) !important;
    background: linear-gradient(180deg, rgb(255, 188, 188), rgb(197, 41, 41)) !important;
    color: white !important;
  }

  /* zelené tlačítko */
  &.green
  {
    border-color: rgb(6, 150, 6) !important;
    background: linear-gradient(180deg, rgb(116, 233, 116), rgb(25, 107, 25)) !important;
    color: #fff !important;
  }

  /* modré tlačítko */
  &.blue
  {
    border-color: rgb(73, 159, 240) !important;
    background: linear-gradient(180deg, rgb(140, 192, 238), rgb(41, 126, 206)) !important;
    color: #ffffff !important;
  }


  &.dark
  {
    background-color: rgb(105, 95, 82) !important;
    color: white !important;
  }


  /* zelený text na bílém pozadí */ 
  &.green-on-white
  {
    border-color: rgb(190, 190, 190) !important;
    color: green !important;
    background-color: #fff !important;
  }


  /* černý text na bílém pozadí */ 
  &.black-on-white
  {
    border-color: rgb(190, 190, 190) !important;
    color: #222 !important;
    background-color: #fff !important;
  }

  &.border0 {border-width: 0px !important;}
  &.round0{border-radius: 0px !important;}
  &.round4{border-radius: 4px !important;}
  &.round6{border-radius: 6px !important;}
  &.round16{border-radius: 16px !important;}
  &.round32{border-radius: 32px !important;}
  &.round64{border-radius: 64px !important;}
  
  

  /* malá velikost, font 8px, pad.top bottom:2px, pad: left right: 2px, min height a min width: 26px */
  &.small
  {
    font-size:8px!important;    
    padding: 2px 2px 2px 2px !important;
    min-height: 26px !important;
    min-width: 26px !important;
  }

  &.small2
  {
    font-size:10px!important;    
    padding: 1px 1px 1px 1px !important;
    min-height: 26px !important;
    min-width: 26px !important;
  }

  /* obyč velikost - základní, která se nastaví i bez udání velikosti, font 8px, pad.top bottom:4px, pad: left right: 10px, min height a min width: 28px */
  &.normal
  {
    font-size:12px!important;    
    padding: 4px 4px 4px 4px !important;    
    min-height: 28px !important;
    min-width: 28px !important;
  }

  /* střední velikost, font 14px, pad.top bottom:6px, pad: left right: 14px, min height: 34px */
  &.medium
  {
    font-size:14px!important;    
    padding: 6px 6px 6px 6px !important;
    min-height: 34px !important;
  }

  /* větší velikost, font 16px, pad.top bottom:8px, pad: left right: 20px, min height: 40px */
  &.large
  {
    font-size:15px!important;    
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 36px;
    min-width: 90px;
  }

  /* největší velikost, font 16px, pad.top bottom:8px, pad: left right: 20px, min height: 40px */
  &.largest
  {
    font-size:16px!important;    
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 40px;
    min-width: 104px;
  }

  /* největší velikost, font 16px, pad.top bottom:8px, pad: left right: 20px, min height: 40px */
  &.x-largest
  {
    font-size:17px!important;    
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 30px;
    padding-right: 30px;
    min-height: 50px;
    min-width: 120px;
  }


  /* největší velikost, font 16px, pad.top bottom:8px, pad: left right: 20px, min height: 40px */
  &.xx-largest
  {
    font-size:18px!important;    
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 48px;
    padding-right: 48px;
    min-height: 60px;
    min-width: 140px;
  }


  /* zabarvení tlačítka při najetí na něj myší - není aktivní, pokud je tlačítko disabled*/
  &:hover:not(.disabled):not(:disabled)
  {    
    filter: brightness(110%) !important;    
  }  

  /* deaktivace tlačítka při atributu, třídou */
  &:disabled, .disabled, [disabled]
  {    
    filter: grayscale(70%) !important; /*filter: brightness(75%) !important;*/
    cursor: not-allowed !important;    
  }

}


/* definice pro DIV pro použití karty, která se dá zobrazovat v nějakém panelu za použití class w3-card*/
div.asp-card
{
    background-color: white; 
    max-width: 15%; 
    min-width: min-content;  
    clear: both; 
    float: none; 
    display: inline-block;  
    margin: 3px;    
    border: 1px solid; 
    /*border-radius: 5px;*/
    box-shadow: none;
    border-color: #d2d2d2;
}

/* definice pro DIV pro použití karty, která se dá zobrazovat v nějakém panelu za použití class w3-card se zaoblenými rohy se stínem*/
div.asp-card-rounded-shadow
{
    background-color: white; 
    max-width: 15%; 
    min-width: min-content;  
    clear: both; 
    float: none; 
    display: inline-block;  
    margin: 3px;    
    border: 1px solid; 
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px rgba(50, 50, 50, 0.15), 0px 0px 5px 0px rgba(000, 000, 000, 0.05);
    /*box-shadow: rgba(0, 0, 0, 0.19) 0px 5px 15px, rgba(0, 0, 0, 0.23) 0px 5px 6px;*/
    border-color: #d2d2d2;
}

/* definice pro DIV pro použití karty, která se dá zobrazovat v nějakém panelu za použití class w3-card se zaoblenými rohy*/
div.asp-card-rounded
{
  background-color:white;
  max-width:15%;
  min-width:min-content;
  clear:both;
  float:none;
  display:inline-block;
  margin:3px;
  border:1pxsolid;
  box-shadow:none;
  border-radius:10px;
  border-color:#d2d2d2;
}

/* definice stylu DIVu pro náhledy modulů v panelu přehledu modulů. Jendá se o styl okének v přehledech modulů (FormModules)*/
div.asp-module-overview-card
{
  max-width: 250px; 
  min-height: 250px; 
  max-height: 250px;
  margin: 16px;
}


/* definice těla uvnitř asp karty, používat v kombinaci s w3-card, asp-card a asp-card-header*/
div.asp-card-body
{
    /*border-radius: 0px 0px 5px 5px; */
    margin-top: 5px;
}


/* náhrada za w3-container, menší okraje a padding. Možnost nastavení margin a padding */
.asp-container
{  
  box-sizing: border-box;
  display: block;
  padding: 2px 8px;
  margin: 6px 6px 12px 6px;

  &::after, &::before
  {
    content:""!important;
    display:table;
    clear:both!important;
  }
  
  &:hover{display:block;}

  &.border { border: 1px solid #d3d3d3!important; }
  &.round2{border-radius:2px!important;}
  &.round4{border-radius:4px!important;}
  &.round8{border-radius:8px!important;}
  &.round12{border-radius:12px!important;}
  &.round16{border-radius:16px!important;}
  &.round32{border-radius:32px!important;}

  /* aktivován responzivní režim, kdy na malé obrazovce upravujeme margin a padding na menší hodnoty pro lepší zobrazení. */
  &.responsive, &.mobile 
  { 
    @media only screen and (max-width: 500px) 
    {
      margin:2px !important; 
      padding:3px !important;
      min-height:auto !important; 
      height: auto !important;
    }
  }
}

.asp-float-left { float: left !important; }
.asp-float-right { float: right !important; }

/*značí, že sloupec bude zabírat třetinu šířky*/
.asp-third
{  
  /* malá obrazovka */
  @media only screen and (max-width: 400px) {width: 100% !important;}

  /* větší obrazovka */
  @media only screen and (min-width: 401px) {width: 33.33333% !important;float: left !important;}
}

/* Definice fontu. Font: Segou UI nebo Verdana, velikosti: xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large*/
.asp-font
{
  font-family: "Segoe UI", "Verdana", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  &.xx-small{font-size:xx-small!important;}
  &.x-small{font-size:x-small!important;}
  &.smaller{font-size:smaller!important;}
  &.small{font-size:12px!important;}
  &.normal{font-size:14px!important;}
  &.medium{font-size:medium!important;}
  &.large{font-size:large!important;}
  &.larger{font-size:larger!important;}
  &.x-large{font-size:x-large!important;}
  &.xx-large{font-size:xx-large!important;}
}

/* definice stylu pro okno */
.asp-form
{
  --tab-active-forecolor: #333;
  --tab-active-backcolor: #ffffff;
  --tab-inactive-forecolor: #333;
  --tab-inactive-backcolor: #ddd;
  --tab-navbar-backcolor: #ffffff;
  --tab-navbar-bordercolor: #ccc;
  --tab-navbar-height: 26px;
  --tab-navbar-padding: 0px 12px 0px 12px;

  box-sizing: border-box !important;
  font-family: "Segoe UI", "Verdana", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  color: #444444 !important;
  border: 1px solid #e7eaec !important;  
  
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px !important;
  
  background-color: white; 
  display: block;  
  padding: 0px 8px !important;
  /*background: radial-gradient(circle, rgba(255,255,255,1) 8%, rgba(255,244,219,1) 82%);*/
  
  max-height: 90%;  
  
  /* vynucená plná výška formuláře */
  &.full-height{ height: 100% !important; }
  /* plná šířka a výška, žádné zaoblené rohy, žádný padding nebo margin */
  &.fullscreen { height: 100% !important; max-height: 100% !important; width: 100% !important; 
    min-width:100%!important;max-width:100% !important; 
    padding:0px!important; margin:0px!important; 
    border-radius:0px!important; box-shadow:none!important;}

  /* automatické šířky pro responsivitu */
  &.width200px{width: 200px !important;max-width: 200px !important;}
  &.width400px{width: 400px !important;max-width: 400px !important;}
  &.width500px{width: 500px !important;max-width: 500px !important;}
  &.width600px{width: 600px !important;max-width: 600px !important;}
  &.width800px{width: 800px !important;max-width: 800px !important;}
  &.width1000px {width: 1000px !important; max-width: 1000px !important; }
  &.width1400px {width: 1400px !important; max-width: 1400px !important; }
  &.width1600px {width: 1600px !important; max-width: 1600px !important; }
  &.width1900px {width: 1900px !important; max-width: 1900px !important; }
  &.width20 {width: 20% !important;max-width: 20% !important;}
  &.width30{width: 30% !important;max-width: 30% !important;}
  &.width40{width: 40% !important;max-width: 40% !important;}
  &.width50{width: 50% !important;max-width: 50% !important;}
  &.width60{width: 60% !important;max-width: 60% !important;}
  &.width70{width: 70% !important;max-width: 70% !important;}
  &.width80{width: 80% !important;max-width: 80% !important;}
  &.width90{width: 90% !important;max-width: 90% !important;}
  &.width100{width: 100% !important;max-width: 100% !important;}

  /* malá obrazovka */
  @media only screen and (max-width: 601px)
  {    
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 2px 2px 2px !important;    
    padding: 1px 1px 1px 1px !important;
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0px !important;
    border-width: 0px !important;
    box-shadow: none !important;
  }

  /* pro všechny sub labely dáme barvu na velmi tmavě šedou */
  :has(label) { color: #333333 !important; }

  &::after, &::before
  {
    content:"" !important;
    /*display:table;*/
    clear:both !important;
  }
}


/* definice stylu pro rámečky uvnitř formu s jednotnou výplní */
.asp-filledframe
{
  box-sizing: border-box;
  font-family: "Segoe UI", "Verdana", Helvetica, Arial, sans-serif !important;
  font-size: 13px;
  color: #676a6c;
  border: none;
  border-color: #eeeeee;
  box-shadow: none;   
  border-radius: 0px;
  background-color: #f0f0f0;
}

/* definice stylu pro rámečky uvnitř formu bez výplně */
.asp-frame
{
  box-sizing: border-box;
  font-family: "Segoe UI", "verdana", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #5c5c5c;
  border: 1px solid;
  border-color: #cecece;
  box-shadow: none;   
  border-radius: 0px;
  background-color: white;
  border-radius: 3px;
}

/* Styl tlačítek v menu*/
.asp-menubuttons
{
  text-decoration: none;
  color: white;
  font-family: "Century Gothic", "Segoe UI", "Arial Black", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

/* plná šířka DIVu */
.asp-full-width {width: 100%;}


/* maximální šířka DIVu 95% */
.asp-max-width-95
{
    width: 95%;
    max-width: 95%;
}

/********************************** Šířky elementů na malých obrazovkách ********************/
@media only screen and (max-width: 601px) 
{
  /* padding pro vnitřek html elementu 0px na mobilech, na velké obrazovce 10px */
  .asp-padding-l10-s0
  {
    padding: 0px 0px 0px 0px !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 95%*/
  .asp-max-width-l95-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 90%*/
  .asp-max-width-l90-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 80%*/
  .asp-max-width-l80-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 70%*/
  .asp-max-width-l70-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 60%*/
  .asp-max-width-l60-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 50%*/
  .asp-max-width-l50-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 40%*/
  .asp-max-width-l40-s100 
  {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }

  /* definice velikostí a okrajů pro třídu Page při malé obrazovce.
   Slouží pro definici margin a velikostí v závislosti na velikosti obrazovky */
  .asp-page
  {
    height: 100%;
    min-height: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/********************************** Šířky elementů na středních/velkých obrazovkách ********************/
@media only screen and (min-width: 602px) 
{
  /* padding pro vnitřek html elementu 0px na mobilech, na velké obrazovce 10px */
  .asp-padding-l10-s0
  {    
    padding: 10px 10px 10px 10px !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 95%*/
  .asp-max-width-l95-s100
  {    
    max-width: 95% !important;
    width: 95% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 90%*/
  .asp-max-width-l90-s100
  {    
    max-width: 90% !important;
    width: 90% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 80%*/
  .asp-max-width-l80-s100
  {    
    max-width: 80% !important;
    width: 80% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 70%*/
  .asp-max-width-l70-s100
  {    
    max-width: 70% !important;
    width: 70% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 60%*/
  .asp-max-width-l60-s100
  {    
    max-width: 60% !important;
    width: 60% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 50%*/
  .asp-max-width-l50-s100
  {    
    max-width: 50% !important;
    width: 50% !important;
  }

  /* auto resize na 100% na mobilech, na velké obrazovce 40%*/
  .asp-max-width-l40-s100
  {    
    max-width: 40% !important;
    width: 40% !important;
  }


  /* definice velikostí a okrajů pro třídu Page při velké obrazovce. Slouží pro definici margin a velikostí v závislosti na velikosti obrazovky */
  .asp-page
  {
    height: 100%;
    min-height: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* max šířka elementu 100% */
.asp-width.max100 { max-width: 100% !important; }

/* šířka elementu 100% */
.asp-width.width100 { width: 100%; }

/* max šířka elementu 95% */
.asp-width.max95 { max-width: 95% !important; }

/* šířka elementu 95% */
.asp-width.width95 { width: 95%; }

/* max šířka elementu 90% */
.asp-width.max90 { max-width: 90% !important; }

/* šířka elementu 90% */
.asp-width.width90 { width: 90%; }

/* max šířka elementu 80% */
.asp-width.max80 { max-width: 80% !important; }

/* šířka elementu 80% */
.asp-width.width80 { width: 80%; }

/* max šířka elementu 75% */
.asp-width.max75 { max-width: 75% !important; }

/* šířka elementu 75% */
.asp-width.width75 { width: 75%; }

/* max šířka elementu 65% */
.asp-width.max65 { max-width: 65% !important; }

/* šířka elementu 65% */
.asp-width.width65 { width: 65%; }

/* max šířka elementu 50% */
.asp-width.max50 { max-width: 50% !important; }

/* šířka elementu 50% */
.asp-width.width50 { width: 50%; }

/* výška 90%, max výška 90% */
.asp-height.height90 { height: 90%; max-height: 90% !important;}
.asp-height.height80 { height: 80%; max-height: 80% !important;}

/****************************************************************


/* plná výška divu */
.asp-full-height
{
    height: 100%;    
    min-height: 100% !important;
}

/*
@description: Maximální výška
max výška a současná výška 95%
*/
.asp-max-height-95
{
  height: 95%;
  max-height: 95%;
}

/* fixace záhlaví tabulky vždy nahoře*/
table.asp-table-fixed-head
{
  position: sticky; 
  top: 0; 
  z-index: 1; 
  inset-block-start: 0;
}

/* styl pro změnu podbarvení aktivního řádku.
Funguje tak, že se počítá s globální proměnnou --asp_table_row_header_bgcolor
která je umístěna zde v :root a její unikátní název nesmí být pro nic jiného 
použit. Podle přepínače třídy pak podbarvuje různými barvami */
table.asp-table-row-hover 
{
    &.lightgreen 
    {
      --asp_table_row_header_bgcolor: rgb(192, 248, 196); 
    }
    &.lightblue
    {
      --asp_table_row_header_bgcolor: rgb(192, 228, 248);
    }     
    &.lightyellow
    {   
      --asp_table_row_header_bgcolor: rgb(248, 247, 192);
    }

    tbody>tr:hover
    {
      background-color: var(--asp_table_row_header_bgcolor) !important;
    }  
}


/* tučný text - aby se nemuselo používat <b>*/
.asp-bold
{
  font-weight: bold;
}

/* definice stylu pro DIVy, které slouží jako stránky (ala TabPage) v TabControlu. Rámeček a zrušení základního paddingu, aby rámeček lícoval s menu tabů, 
dolní odsazení*/
div.asp-tabpage
{
  border:1px solid #ccc!important;
  /*margin-left: -16px; */
  /*margin-right: -16px;*/
  margin-bottom:16px!important;
  /*width: 100%;*/
}

/*  */
.rv-grad-lightgray
{
  background: linear-gradient(180deg,#fdfdfd, #e3e3e3);
}

/*  */
.rv-grad-lightred
{
  background: linear-gradient(180deg,#fdfdfd, #f0e0e0);
}

/* stylování elementu <dialog> (interně použito pro okna) */
dialog[open]
{
  outline: 0px solid transparent !important; /* důležité, jinak bude kolem dialogu strašný tlustý černý rám*/
  border: 0px #ccc solid;
  padding: 0 0 0 0;  
  box-shadow: 2px 4px 12px 2px rgba(0,0,0,0.25);
  border-radius: 10px;
  font-family: "Segoe UI", "Verdana", "Helvetica Neue", Helvetica, Arial, sans-serif;

  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /*position: fixed;*/

  /*overscroll-behavior: contain;*/


  /* automatické šířky pro responsivitu */
  &.width200px{width: 200px !important;max-width: 200px !important;}
  &.width400px{width: 400px !important;max-width: 400px !important;}
  &.width500px{width: 500px !important;max-width: 500px !important;}
  &.width600px{width: 600px !important;max-width: 600px !important;}
  &.width800px{width: 800px !important;max-width: 800px !important;}
  &.width1000px {width: 1000px !important; max-width: 1000px !important; }
  &.width1400px {width: 1400px !important; max-width: 1400px !important; }
  &.width1600px {width: 1600px !important; max-width: 1600px !important; }
  &.width1900px {width: 1900px !important; max-width: 1900px !important; }
  &.width20 {width: 20% !important;max-width: 20% !important;}
  &.width30{width: 30% !important;max-width: 30% !important;}
  &.width40{width: 40% !important;max-width: 40% !important;}
  &.width50{width: 50% !important;max-width: 50% !important;}
  &.width60{width: 60% !important;max-width: 60% !important;}
  &.width70{width: 70% !important;max-width: 70% !important;}
  &.width80{width: 80% !important;max-width: 80% !important;}
  &.width90{width: 90% !important;max-width: 90% !important;}
  &.width100{width: 100% !important;max-width: 100% !important;}
}

/* akce při zobrazení <dialog>, blur pozadí 
dialog::backdrop
{
  /*opacity: 0.2;*/
  /*background-color: rgba(150, 150, 150, 0.7);*/
  /*backdrop-filter: blur(10px);*/
/*}*/


/* stylování <dialog> pro červený nádech (např. chybové MessageBoxy) */
dialog.asp-dialog-red
{
  border: #f9c7c7 solid 1px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 73%, rgba(247,239,239,1) 94%, rgba(241,225,225,1) 100%);
  /*background: linear-gradient(180deg,#fefefe, #f1e1e1);*/
}

/* stylování nadpisu H4 v <dialog> při červeném nádechu */
dialog.asp-dialog-red h4
{
  color: red;
}

/* stylování tlačítka v <dialog> při červeném nádechu */
dialog.asp-dialog-red button
{
  background-color: rgb(243, 117, 117);
}



/* stylování <dialog> pro žlutý nádech (např. chybové MessageBoxy) */
dialog.asp-dialog-yellow
{
  border-color: #ecc851;
  border: solid 1px #ecc851;
  background: linear-gradient(180deg,#ffffff, #fff2db);
}

/* stylování nadpisu H4 v <dialog> při žlutém nádechu */
dialog.asp-dialog-yellow h4
{
  color: rgb(255, 123, 0);
}

/* stylování tlačítka v <dialog> při červeném nádechu */
dialog.asp-dialog-yellow button
{
  background-color: rgb(255, 201, 119);
}

/* stylování <dialog> pro šedavý nádech (např. informační okno) */
dialog.asp-dialog-gray
{
  border-color: #d0d0d0;
  background: linear-gradient(180deg,#fefefe, #f0f0f0);
}

/* stylování nadpisu H3 v <dialog> při šedavém nádechu  */
dialog.asp-dialog-gray h4
{
  color: gray;
}

/* stylování tlačítka v <dialog> při šedavém nádechu */
dialog.asp-dialog-gray button
{
  background-color: rgb(179, 174, 168); 
}


/* stylování <dialog> pro bílém nádech (např. informační okno) */
dialog.asp-dialog-white
{
  border-color: #d0d0d0;
  background-color: #fff;  
  /*background: linear-gradient(180deg,#fff, #fff);*/
}

dialog.asp-dialog-white label, select, text, input
{
  color: #333;
}

/* stylování nadpisu H3 v <dialog> při bílém nádechu  */
dialog.asp-dialog-white h4
{
  color: #222;
}

/* stylování tlačítka v <dialog> při bílém nádechu 
dialog.asp-dialog-white button
{  
}*/

/* blikání labelu v zařízeních */
.asp-blinker-disabled
{
  background-color: #888;
}

.asp-reservation-table-cell
{
  padding: 1px !important;
  margin: 0px 0px 0px 0px !important;  
}

.asp-reservation-table-cell-panel
{
  flex-direction: column;
  display: flex;
  position: relative;  
  padding: 0px 0px 0px 0px !important;
  margin: 0px 0px 0px 0px !important;
  height: 100% !important;
  width: 100% !important;
}

/* styl pro vykreslení divu rezervace v buňce rezervační tabulky */
div.asp-reservation-cell-reservation
{
  position: absolute; 
  width: 100%;
  left: 0px;
  font-size: smaller;
  display: flex;
  

  /* popisek rezervace [čas od-do] Firma */
  & label
  {    
    flex: 1 0;
    word-wrap: break-word; 
    align-content:flex-end;
    text-align:left;
    margin-left: 14px;

    &::after
    {
      content: "";
    }
    
  }  
}

/* controla s firmou pro rezervace na pracovní ploše */
.asp-reservation-company
{  
  width: 100%;  
}

/*  */
.asp-reservation-table
{
  /*overflow-y: scroll;
  overflow-x:hidden;*/
  overflow: auto;
  max-width: 100%;
  /*max-height: 86% !important;*/
  max-height: calc(86% - 10px);

  & table
  {
    border-spacing: 0 !important;
    border-collapse:collapse !important;
    display:table !important;
    padding: 0px !important;
    margin: 0px !important;

    & th
    {
      border: 1px solid #ccc;
      &:first-child { padding-left:4px !important; }      
      padding: 0px;
      top: 0px;
      position: sticky !important;
      display:table-cell;
      text-align:left;
      vertical-align:top; 
      margin-top: 0px;     
    }

    & td
    {      
      border: 1px solid #ccc;
      &:first-child { padding-left:4px !important; }      
      padding: 0px;
      display:table-cell;
      text-align:left;
      vertical-align:top;
    }
    & tbody
    {
      margin: 0px !important;      
      border-collapse:collapse !important;      
      background-color: #fff;
      z-index: 1;      
    }
    & thead
    {
      border-top: 0;
      margin-top: 0;
      padding: 0px !important;
      position: sticky !important;
      /*translate: 0px -4px;*/
      /*height: 36px;*/
      top: 0px;
      z-index:2 !important;
      inset-block-start: 0px;
    }
  }
}

/* pro okna, která nejsou pomocí <dialog>, ale z obyčejného DIVu*/
.asp-popup-form
{
  outline: 0px solid transparent !important; /* důležité, jinak bude kolem dialogu strašný tlustý černý rám*/
  border: 0px #ccc solid;
  padding: 0 0 0 0;  
  box-shadow: 2px 4px 12px 2px rgba(0,0,0,0.25);
  border-radius: 10px;
  font-family: "Segoe UI", "Verdana", "Helvetica Neue", Helvetica, Arial, sans-serif;

  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /*position: fixed;*/
}

/* styl pro plovoucí menu */
.asp-context-menu
{
  background-color: #fff;
  position: absolute;
  border: 1px solid #ccc;
  box-sizing: border-box;
  z-index: 999;
  border-radius: 10px;
  
  /* záhlaví menu */
  & > div[data-Name="HeaderPanel"]
  {
    padding: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #666;    
    vertical-align:middle !important;
    line-height: normal !important;
    overflow:hidden !important;
    
    /* nadpis */
    & > label[data-Name="Title"]
    {
      color: white;
      margin-left: 8px;
      margin-right: 16px;      
      vertical-align:middle !important;
    }

    & > button/*[data-Name="CloseButton"]*/
    {      
      color: #000000;
      background-color: blue;
      float: right;      
    }
  }

  /* položky menu */
  & > ul[data-Name="Items"]  
  { 
    list-style: none;    
    text-align: left;
    padding: 0px;
    margin: 0px;

    & > li
    { 
      padding: 4px;
      margin: 0px;

      &:hover {background-color: #eef; }
    }   
  }
}


/* Style the tab */
.tab 
{
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;


  /* Style the buttons inside the tab */
  & button 
  {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 10px;    
    font-size: medium;

    /* Change background color of buttons on hover */
    &:hover
    {
      background-color: #ddd;
    }


    /* Create an active/current tablink class */
    &.active 
    {
      background-color: #ccc;
    }
  }  

  &.buttons
  {    
  }

  /* Style the tab content */
  &.container
  {
    background-color: white;    
  }

  /* Style the tab content */
  &.content 
  {
    background-color: white;
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
}






/* Blinker - simulace blikání na principu stmívání. */
@keyframes blinker { 0%, 49% { filter: brightness(40%) } 50%, 100% { filter: brightness(100%); } }