@layer base, tt, site, module, sitemodule, special;

@property --ttsite 
{
  syntax: "tt|tumtek|athome|pannman|aston|comfort";
  inherits: true;
  initial-value: tt;
}

@property --ttmodule 
{
  syntax: "<string>";
  inherits: true;
  initial-value: '';
}

@layer tt
{
  [data-ttmodule]
  {
    --ttmodule: attr(data-ttmodule raw-string, '' );
  }

  :root
  {
    --linkcolor:                   #006699;
    --framebox-bg-color:           #EEE;
    --logobox-bg:                  linear-gradient(0deg, #EEE 0%, #D0D0E0 30%, #EEF 100%);
    --footbox-bg:                  var( --logobox-bg );
                                   
    --framebox-shadow:             1px 1px 2px 1px #999;
    --submenu-shadow:              0px 0.8em 0.8em 0px rgba(0,0,0,0.5);
                                   
    --body-bg-color:               #EEE;
    --table-border-color:          #AAA;
    --th-bg-color:                 #CCC;  
    --tr-hover-bg-color:           #CCF;  
    --th-invisible-bg-color:       #CCC;
                                   
    --td-negnum-bg-color:          #FCC;
    --td-negnum-hover-bg-color:    #FAA;
                                   
    --menu-bg-color:               #DDDDDD;
    --menu-color:                  #555;
    --menu-hover-color:            #333;
    --submenu-bg-color:            #D8D8D8;
    --menu-hover-bg-color:         #3332;
                                   
    --menu-pagelink-color:         #F00;
    --menu-pagelink-hover-color:   #A00;
                                   
    --menu-hamburger-bg-color:     #666;
    --pagemenu-hamburger-bg-color: #D33;

    --corner-radius:               6px;
    --scroll-radius:               5px;
    --framebox-margin:             3px;
    --framebox-padding:            5px;
    --contentbox-padding:          3px;

    font-size:                     12px;
  }


  .nbsp
  {
    white-space: nowrap;  
  }

  .ttdebugtable
  {
    table& { width:100%; }
    .line  { background-color: #EEE; text-align: center; font-weight: bold; width: 6ch; font-size: 1.2em; };
    .count { background-color: #EEF;color: #D00; text-align: center; font-weight: bold; width: 6ch; font-size: 1.2em; };
    .file  { background-color: #EFE;text-align: right; width: 20ch; }
    .cat1  { background-color: #CFC9; font-weight: bold; }
    .cat2  { background-color: #99F9; font-weight: bold; }
    .cat3  { background-color: #F8F9; font-weight: bold; }
    .cat4  { background-color: #F669; font-weight: bold; }
    .cat5  { background-color: #F449; font-weight: bold; }
    .cat6  { background-color: #F229; font-weight: bold; }
  }

  .debet, .kredit
  {
    text-align: right;  
  }

  textarea
  {
    min-height: 2em;
    resize:     none;
  }

  button, input[type=submit]
  {
    background-color: #33A;
    padding:          0.5em 3ch;
    margin:           0.2em;
    border:           2px solid #0000AA;
    border-radius:    3px;
    box-sizing:       border-box;
    min-height:       2em;
    color:            white;
    font-weight:      bold;
  }
  button:focus, input[type=submit]:focus
  {
    background-color: #66E;
    border:           5px solid #FFAAFF;
    border-radius:    1em;  
  }

  select.ttform, textarea.ttform, input[type="text"].ttform
  {
    min-width:        min( 90vw, 56ch); 
  }

  input[type="email"].ttform
  {
    min-width:        min( 80vw, 50ch);
  }


  .GreenHighlight
  {
    background-color: #AAFFAA;
    
  }

  @media screen
  {
    .onlyfirstonscreen:not(:first-of-type)
    {
      display:none;    
      
    }


  }

  body 
  {
    margin:           0px;
    padding:          0px;
    color:            #000000;
    background-color: var( --body-bg-color );
    height:           100vh;
    font-family:      Verdana, Arial, Helvetica, sans-serif; 
    font-size:        1rem;
  }
  nav {  display: inline-block;  }

  a:link, 
  a:visited, 
  a:hover,
  a:active 
  {
    color:           var( --linkcolor );
    text-decoration: none;
  }

  a:hover 
  {
    text-decoration: underline;
  }

  form 
  {
    margin:          0px;
  }
  p 
  {
    margin:          0px;
  }

  h2 
  {
    margin-bottom:   8px;
    font-size:       1.4rem;
    font-weight:     bold;
  }
  h3  
  {
    margin:          0px;
    font-size:       1.2rem;
    font-weight:     bold;
  }
  .list 
  {
    margin-top:      0px;
    margin-bottom:   0px;
    list-style-type: square;
  }
  .list li 
  {
    margin-top:      3px;
    margin-bottom:   3px;
  }
  .contentImage 
  {
    border:          1px solid #333333;
    clear:           both;
    margin-left:     5px;
    margin-right:    5px;
  }

  .FrameBox 
  {
    width:            calc(100% - var(--framebox-margin) *2 + 1 );	
    background-color: var(--framebox-bg-color);	
    position:         relative;	
    box-shadow:       var( --framebox-shadow );

  /*  box-shadow: 1px 1px 2px 1px #999;*/

    border-radius:    var( --corner-radius );
    padding:          var( --framebox-padding );
    Margin:           var( --framebox-margin );
    overflow:         hidden;
    box-sizing:       border-box;
  }

  .MenuBox
  {
    font-size:        1rem;
    background-color: var( --menu-bg-color);
    display:          flex;
    flex-direction:   row;
    justify-content:  space-between;
  }

  .FeedbackBox
  {
    background-color: #FFDDDD;
  }

  .FeedbackBox:empty
  {
    display:          none;
  }

  .ContentBox
  {
    padding:          var( --contentbox-padding );
    font-size:        1rem;	
  }

  .FootBox
  {
    font-size:        0.9rem;
    padding-left:     1em;
  }

  .LogoBox
  {
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*  align-items: center;*/
  }

  /*spara*/
  .DebugBox
  {
    background-color: #FFFFDD;
    font-family:      monospace;
    white-space:      pre;  
    font-size:        0.8rem;
    max-height:       50%;
    overflow:         auto;
  }  

  .DebugBox:empty
  {
    display:          none;
  }

  .Heading
  {
    font-size:        1.4rem; 
    padding-left:     1rem;

    display:          inline;
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
  }

  .HeadingInfo
  {
    font-size:        1rem; 
    padding-left:     3rem;                    
    display:          inline;
  }

  .LogoBox {  background: var( --logobox-bg ); }
  .FootBox {  background: var( --footbox-bg ); }

  /*
    background: linear-gradient(0deg, #EEEEEE 0%, #D0D0E0 30%, #EEEEFF 100%);
    */


  input[type="radio"]{  border-radius : 50%; }
  input:where([type="checkbox"], [type="radio"]):disabled{  background-color : #eee; }

  input[type="checkbox"]:checked::before,
  input[type="radio"   ]:checked::before
  {
    display:    block;
    text-align: center;
    height:     100%;
    width:      100%;
    font-size:  1.1em;
    color:      #666;
    
    content: '\2714';
    margin : -0.22em 0 0 0em;  
  }

  input[type="radio"]:checked::before
  {
    content: '\2B24';
  }

  input:where([type="checkbox"], [type="radio"])
  {
    box-sizing         : border-box;  
    appearance         : none;
    width              : 1.2em;
    height             : 1.2em;
    margin             : 0 0.25rem 0 0;
    vertical-align     : top;
    border             : 1px solid #666;

    background         : #fff;
  }

  [data-status="error"]
  {
    background-color: #FFDDDD;  
  }

  [data-status="error"]:hover
  {
    background-color: #FF6666;  
  }


  [data-status="original"]
  {
    background-color: #EEFFEE;  
  }

  [data-status="sent"]
  {
    background-color: #AAAAAA;  
  }
  [data-status="changed"]
  {
    background-color: #FFFFDD;  
  }

  .searchbox 
  {
    padding-top: 0rem;
  }

  @media  print 
  {
    .pgbreak  { page-break-after:  always           }
    thead     { display:           table-row-group  }
    tfoot     { display:           table-row-group  }
    tr        { page-break-inside: avoid            }
     .noprint { display:           none !important; }
      .noshow { display:           block !important;}
      
    .ContentBox
    {
      padding: 0pm;    
    }  

    .FrameBox  
    {
      width:            100%;	
      background-color: #FFFFFF;	
      position:         relative;	
      box-shadow:       none;
      border-radius:    0;
      padding:          0px;
      Margin:           0px;
      overflow:         hidden;
      box-sizing:       border-box;
    }
     
    body {
      margin:           0;
      padding:          0;
      color:            #000000;
      background-color: #FFFFFF;
    }
  }

  .search, #search 
  {  
    border:        2px solid #AAAAAA; 
    border-radius: 0.5em; 
    width:         12ch;
  }

  .searchbox 
  {
    font-size:     1rem;	 
    padding-top:   0.5rem;
  }

  div.image img
  {
    border-radius: var( --corner-radius );
  }

  /*****************************************************************/
  .cbxnav
  {
    position: absolute;
    top:      0;
    display:  none;
  }
  ul.Menu 
  {
    list-style-type:  none;
    margin:           0;
    padding:          0;
    overflow:         hidden;
    background-color: var( --menu-bg-color );
  }
    
  ul.SubMenuBox 
  {
    list-style-type:  none; 
  }  

  .SubMenuItem a[target]:before
  {
    position: absolute;
    right:    2px;
    content:  "\2C3\2C3";
    display:  inline-block;
    color: red;
  /*  width:    1ch;
    height:   0;
    border:   0px solid transparent;*/
  }

    
  @media all and (hover: hover) and (min-width : 801px) 
  {
    li.SubMenuItem > A::after
    {
      content: '\21A7';
    }

    .MenuItem, .SubMenuItem
    {
      float:            left;
      padding-left:     0.1rem;
      padding-right:    0.1rem;
    }

    .MenuItem a, .SubMenuItem a
    {
      display:          inline-block;
      color:            var( --menu-color );
      padding:          0.2em 0.8em;
      text-decoration:  none;
    }

    li.MenuItem a:hover, li.SubMenuItem a:hover
    {
      color:            var( --menu-hover-color    );
      background-color: var( --menu-hover-bg-color );
    }




    .SubMenuItem a
    {
      font-style:       italic;
    }

    ul.SubMenuBox a, 
    div.SubMenuBox a 
    {
      display:          block;
      color:            var( --menu-color );
      padding:          0.4em 1em;
    }

    ul.SubMenuBox hr,
    div.SubMenuBox hr 
    {
      display:          block;
      color:            var( --menu-color );
    }

    .SubMenuBox 
    {
      display:          none;
      position:         absolute;
      background-color: var( --submenu-bg-color );
      min-width:        10em;
      box-shadow:       var( --submenu-shadow );
      z-index:          2;
      border-radius:    var( --corner-radius );
      padding-left:     0ch;
    }
    
    li.SubMenuItem:hover ul.SubMenuBox, 
    li.SubMenuItem:hover div.SubMenuBox 
    {
      display:          block;
    }

    .menulabel
    {
      display:          none;
    }
  }
  /**MOBILE************************************************/
  @media all and (max-width : 800px), (hover: none) 
  {
    nav
    {
      font-size:        2em;
      vertical-align:   top;
    }

    li
    {
      padding-block-start: 0;
      padding-block-end:   0;
      margin:              0;
    }

    .MenuItem a,
    .SubMenuItem a
    {
      display:             block;
      color:               var( --menu-color );
      padding:             0.4em 0.8em;
      text-decoration:     none;
      min-height:          1.2em;
      border-bottom:       2px solid #CCC;
    }

    .SubMenuItem a
    {
      padding:             0em 0.8em;
      font-style:          italic;
    }

    ul.SubMenuBox a, 
    div.SubMenuBox a 
    {
      display:             block;
      color:               var( --menu-color );
      padding:             0.4em 1em;
    }

    ul.SubMenuBox hr 
    div.SubMenuBox hr 
    {
      display:             block;
      color:               var( --menu-color );
    }

    li.SubMenuItem .SubMenuBox a:hover,
    li.MenuItem a:hover
    {
      color:               var( --menu-hover-color    );
      background-color:    var( --menu-hover-bg-color );
    }

    .SubMenuBox 
    {
      display:             block;
      background-color:    var( --submenu-bg-color );
      padding-left:        2ch;
    }

    .cbxnav ~ ul
    {
      display:             none;
    }

    .cbxnav:checked ~ ul
    {
      display:             block;
    }

    nav.pagemenu label
    {
      background-color:    var( --pagemenu-hamburger-bg-color );
    }

    .menulabel
    {
      background-color:    var( --menu-hamburger-bg-color );
      display:             inline-block;
      padding:             0.3em;
      text-align:          center;
      border:              none;
      font-weight:         bold;
      box-sizing:          border-box;  
      font-size:           0.7em;
      color:               #CCC;
      
      nav:first-of-type &
      {
        width:             4ch;
        border-radius:     1em 0 0 1em;
      }

      nav:last-of-type &
      {
        width:             4ch;
        border-radius:     0 1em 1em 0;
      }

      nav:only-of-type &
      {
        width:             5ch;
        border-radius:     10px;
      }
    }

    .cbxnav:checked ~ .menulabel
    {
  /*    border-radius: 15px 15px 0 15px;*/
      width:               4ch;
      border-radius:       50% 50% 0 50%;
    }

    .cbxnav:checked ~ .menulabel::after{ content: '\2715'; }
    .menulabel::after                  { content: '\2630'; }
  }

  .PageMenuLink a,
  div.SubMenuBox a.PageMenuLink,
  ul.SubMenuBox a.PageMenuLink
  {
    color:                var( --menu-pagelink-color );
  }

  li.PageMenuLink a:hover,
  div.SubMenuBox a.PageMenuLink:hover,
  ul.SubMenuBox a.PageMenuLink:hover
  {
    color:                var( --menu-pagelink-hover-color );
  }

  nav.pagemenu a,
  nav.pagemenu a div.SubMenuBox a,
  nav.pagemenu a ul.SubMenuBox a
  {
    color:                var( --menu-pagelink-color );
  }

  nav.pagemenu a:hover,
  nav.pagemenu div.SubMenuBox a:hover,
  nav.pagemenu ul.SubMenuBox a:hover
  {
    color:                var( --menu-pagelink-hover-color );
  }

  .MenuBox
  {
    overflow:         visible;
    min-height:       1.5em;
  }                   

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

                      
  td                  
  {                   
    vertical-align:   top;
  }                   
                      
  P                   
  {                   
    margin:           0px;
    margin-top:       2px;
  }                   
                      
  TABLE, TD, TH
  {                   
    border-color:     var( --table-border-color );
    border-width:     1px;
    border-style:     solid;
    border-collapse:  collapse;
    empty-cells:      show;
    vertical-align:   top;
  }

  TD, TH
  {                   
    padding:          1px;
  }


  TH
  {
    background-color: var( --th-bg-color );
    font-weight:      bold;
  }

  pre                 { margin:       0px;    }

  div.right           { float:        right;  }

  td.right,   .right  { text-align:   right;  }
  td.center,  .center { text-align:   center; }
  td.left,    .left   { text-align:   left;	  }
  td.italic   .italic { font-style:   italic; }

  .smaller            { font-size:    0.8em;  }

  td.hide, th.hide    { display:      none;   }

  .indent             { padding-left: 2em;    }

  .inline             { display:      inline; }

  tr:hover            { background-color: var( --tr-hover-bg-color );      


                      }

  TH                  { text-align:       left; }

  td.negnum           { background-color: var( td-negnum-bg-color );       }
  tr:hover td.negnum  { background-color: var(--td-negnum-hover-bg-color); }

  TABLE.invisible
  {
    &,/* TR,*/ TD, TH
    {
      border-style:    none;
      vertical-align:  top;
      border-collapse: collapse;
    }

    TH
    {
      background-color: var( --th-invisible-bg-color );
      font-weight:      bold;
    }
  }

  body 
  {
    display:        flex;
    flex-direction: column;
    flex-wrap:      nowrap;
    > *           { flex-shrink: 0; }
  }

  .ContentBox
  {
    flex-grow:   1;
    flex-shrink: 1;
    overflow:    auto;
    min-height:  10rem;
  }

  ::-webkit-scrollbar 
  {
    width:       0.9rem;
  }

  ::-webkit-scrollbar-track 
  {
    box-shadow:    inset 0 0 5px grey; 
    border-radius: var( --scroll-radius );
  }
   
  ::-webkit-scrollbar-thumb 
  {
    background:    #CCCCCC; 
    box-shadow:    inset 0 0 5px grey; 
    border-radius: var( --scroll-radius );
  }

  ::-webkit-scrollbar-thumb:hover 
  {
    background:    #DDDDDD; 
  }

  img.logo
  {
    height:        2.6em;
  }

  .sticky,
  tr:first-of-type th 
  {
    position: sticky;
    top:      0; 
  }

  tr:nth-of-type(2) th 
  {
    position: sticky;
    top:      1.5em; 
  }

  select option 
  { 
    height:   1.4em;
  }

  #clearsearch
  {
    padding:         0.2em;
    background:      #777777;
    margin:          0.2em;
    border-radius:   3px;
    color:           #DDDDDD;
    text-decoration: none;
    box-sizing:      border-box;


  }

  @media  print 
  {
    body {display: initial}
    html{	font-size: 9px; }
  }

  .material-icons
  {
    &.md-1em  { font-size: 1em;   }
    &.md-14em { font-size: 1.4em; }
    &.md-10   { font-size: 10px;  }
    &.md-12   { font-size: 12px;  }
    &.md-14   { font-size: 14px;  }
    &.md-18   { font-size: 18px;  }
    &.md-24   { font-size: 24px;  }
    &.md-36   { font-size: 36px;  }
    &.md-48   { font-size: 48px;  }
  }

  .RedBlink { animation: RedBlink 1.5s linear infinite; }
  @keyframes RedBlink
  {
    0%  {color: #660000;}
    50% {color: #FF0000;}
    100%{color: #660000;}
  } 

  .YellowBlink { animation: YellowBlink 1.2s linear infinite; }
  @keyframes YellowBlink
  {
    0%  {color: #f7f200;}
    33% {color: #fcfbb8;}
    66% {color: #fcbb33;}
    100%{color: #f7f200;}
  } 

  .IMAGEUPLOADBUTTON
  {
    margin:           0em 0.2em 0.2em 0ch ;
    padding:          0.2em 1ch;
    font-size:        1.5em;
    background-color: #EEDDFF;
    color:            #0000FF;
    border-color:     #44F;
    border-style:     solid;
    border-width:     2px;
    border-radius:    7px;
    font-weight:      bold;
    display:          inline-block;
    justify-content:  center;  
  }

  .clLinkIcon, .clLargerLinkIcon
  {
    font-size:     1em;
    border:        2px solid var(--linkcolor);  
    border-radius: 0.5em;
    padding:       1px;
    cursor:        pointer;
  }
  .clLargerLinkIcon
  {
    font-size:     1.5em;
  }

  a:hover.clLinkIcon,a:hover.clLargerLinkIcon
  {
    text-decoration:  none;
    background-color: #AEE;
  }

  button.mini
  {
    background-color: #BBB;
    padding:          0.2em 1ch;
    margin:           0.2em;
    border:           1px solid #0000AA;
    border-radius:    4px;
    box-sizing:       border-box;
    min-height:       1.3em;
    color:            #000;
    font-size:        0.8em;
  }

  button 
  {
    cursor:        pointer;
  }

  A.eMailIcon
  {
    font-size:        1.6em;  
  }

  tr.NoShow { display:none; }

  .clGridboxLayoutGroup
  {
    padding:          0.5em;
    border:           2px solid #DDD;  
    border-radius:    1em;
    display:          inline;
    background-color: #F8F8F8;
    align-self:       stretch;
  }

  .clGridboxLayout
  {
    --minGridColSize:      30ch;
    display:               grid;
    gap:                   0.2em;
    grid-template-columns: repeat(auto-fit, minmax(var(--minGridColSize), 1fr));
    max-width:             100vw;
    grid-auto-flow:        dense;

   .clGridboxLayout1_1 { grid-column-end: span 1; grid-row-end: span 1;}  
   .clGridboxLayout2_1 { grid-column-end: span 2; grid-row-end: span 1;}  
   .clGridboxLayout3_1 { grid-column-end: span 3; grid-row-end: span 1;}  
   .clGridboxLayout4_1 { grid-column-end: span 4; grid-row-end: span 1;}  
   .clGridboxLayout5_1 { grid-column-end: span 5; grid-row-end: span 1;}  
   .clGridboxLayout6_1 { grid-column-end: span 6; grid-row-end: span 1;}  
   .clGridboxLayout7_1 { grid-column-end: span 7; grid-row-end: span 1;}  
   .clGridboxLayout8_1 { grid-column-end: span 8; grid-row-end: span 1;}  
   .clGridboxLayout1_2 { grid-column-end: span 1; grid-row-end: span 2;}  
   .clGridboxLayout2_2 { grid-column-end: span 2; grid-row-end: span 2;}  
   .clGridboxLayout3_2 { grid-column-end: span 3; grid-row-end: span 2;}  
   .clGridboxLayout4_2 { grid-column-end: span 4; grid-row-end: span 2;}  
   .clGridboxLayout5_2 { grid-column-end: span 5; grid-row-end: span 2;}  
   .clGridboxLayout6_2 { grid-column-end: span 6; grid-row-end: span 2;}  
   .clGridboxLayout7_2 { grid-column-end: span 7; grid-row-end: span 2;}  
   .clGridboxLayout8_2 { grid-column-end: span 8; grid-row-end: span 2;}  
   .clGridboxLayout1_3 { grid-column-end: span 1; grid-row-end: span 3;}  
   .clGridboxLayout2_3 { grid-column-end: span 2; grid-row-end: span 3;}  
   .clGridboxLayout3_3 { grid-column-end: span 3; grid-row-end: span 3;}  
   .clGridboxLayout4_3 { grid-column-end: span 4; grid-row-end: span 3;}  
   .clGridboxLayout5_3 { grid-column-end: span 5; grid-row-end: span 3;}  
   .clGridboxLayout6_3 { grid-column-end: span 6; grid-row-end: span 3;}  
   .clGridboxLayout7_3 { grid-column-end: span 7; grid-row-end: span 3;}  
   .clGridboxLayout8_3 { grid-column-end: span 8; grid-row-end: span 3;}  
   .clGridboxLayout1_4 { grid-column-end: span 1; grid-row-end: span 4;}  
   .clGridboxLayout2_4 { grid-column-end: span 2; grid-row-end: span 4;}  
   .clGridboxLayout3_4 { grid-column-end: span 3; grid-row-end: span 4;}  
   .clGridboxLayout4_4 { grid-column-end: span 4; grid-row-end: span 4;}  
   .clGridboxLayout5_4 { grid-column-end: span 5; grid-row-end: span 4;}  
   .clGridboxLayout6_4 { grid-column-end: span 6; grid-row-end: span 4;}  
   .clGridboxLayout7_4 { grid-column-end: span 7; grid-row-end: span 4;}  
   .clGridboxLayout8_4 { grid-column-end: span 8; grid-row-end: span 4;}  
   .clGridboxLayout1_5 { grid-column-end: span 1; grid-row-end: span 5;}  
   .clGridboxLayout2_5 { grid-column-end: span 2; grid-row-end: span 5;}  
   .clGridboxLayout3_5 { grid-column-end: span 3; grid-row-end: span 5;}  
   .clGridboxLayout4_5 { grid-column-end: span 4; grid-row-end: span 5;}  
   .clGridboxLayout5_5 { grid-column-end: span 5; grid-row-end: span 5;}  
   .clGridboxLayout6_5 { grid-column-end: span 6; grid-row-end: span 5;}  
   .clGridboxLayout7_5 { grid-column-end: span 7; grid-row-end: span 5;}  
   .clGridboxLayout8_5 { grid-column-end: span 8; grid-row-end: span 5;}  
   .clGridboxLayout1_6 { grid-column-end: span 1; grid-row-end: span 6;}  
   .clGridboxLayout2_6 { grid-column-end: span 2; grid-row-end: span 6;}  
   .clGridboxLayout3_6 { grid-column-end: span 3; grid-row-end: span 6;}  
   .clGridboxLayout4_6 { grid-column-end: span 4; grid-row-end: span 6;}  
   .clGridboxLayout5_6 { grid-column-end: span 5; grid-row-end: span 6;}  
   .clGridboxLayout6_6 { grid-column-end: span 6; grid-row-end: span 6;}  
   .clGridboxLayout7_6 { grid-column-end: span 7; grid-row-end: span 6;}  
   .clGridboxLayout8_6 { grid-column-end: span 8; grid-row-end: span 6;}  
   .clGridboxLayout1_7 { grid-column-end: span 1; grid-row-end: span 7;}  
   .clGridboxLayout2_7 { grid-column-end: span 2; grid-row-end: span 7;}  
   .clGridboxLayout3_7 { grid-column-end: span 3; grid-row-end: span 7;}  
   .clGridboxLayout4_7 { grid-column-end: span 4; grid-row-end: span 7;}  
   .clGridboxLayout5_7 { grid-column-end: span 5; grid-row-end: span 7;}  
   .clGridboxLayout6_7 { grid-column-end: span 6; grid-row-end: span 7;}  
   .clGridboxLayout7_7 { grid-column-end: span 7; grid-row-end: span 7;}  
   .clGridboxLayout8_7 { grid-column-end: span 8; grid-row-end: span 7;}  
   .clGridboxLayout1_8 { grid-column-end: span 1; grid-row-end: span 8;}  
   .clGridboxLayout2_8 { grid-column-end: span 2; grid-row-end: span 8;}  
   .clGridboxLayout3_8 { grid-column-end: span 3; grid-row-end: span 8;}  
   .clGridboxLayout4_8 { grid-column-end: span 4; grid-row-end: span 8;}  
   .clGridboxLayout5_8 { grid-column-end: span 5; grid-row-end: span 8;}  
   .clGridboxLayout6_8 { grid-column-end: span 6; grid-row-end: span 8;}  
   .clGridboxLayout7_8 { grid-column-end: span 7; grid-row-end: span 8;}  
   .clGridboxLayout8_8 { grid-column-end: span 8; grid-row-end: span 8;}  
  }

  @media only screen and (max-width: 800px) 
  { 
    .clGridboxLayout      {  display: block;  }
    .clGridboxLayoutGroup {  display: block;  }
  }

  .ttfilter
  {
    display:          flex;
    /*flex-wrap:        wrap;*/
    padding:          0.5em 0.5em;
    border-radius:    5px;
    background-color: #CCD;
    user-select:      none;
    margin:           0 0.3em;
    
    .filtercbx
    {
      padding:       0.2em 0.6em;
      border-radius: 0.5em;
      margin:        0 0.2em;
      cursor:        pointer;
      input[ type='checkbox' ] {  display: none; }
    }

    .filterradio
    {
      padding:          0.2em 0.6em;
      border-radius:    0.5em;
      margin:           0 0.2em;
      cursor:           pointer;
      background-color: #BFB;
      &:has( :checked ){  background-color: #BBF; }
      input[ type='radio' ] {  display: none; }
    }
    
    &.typehide 
    {
      .filtercbx                {  background-color: #BFB; 
                                   &:has( :checked ){  background-color: #FBB; }
                                }
    }

    &.typeshow 
    {
      .filtercbx                {  background-color: #FBB; 
                                   &:has( :checked ){  background-color: #BFB; }
                                }
    }
  }


  .tablenav
  {
    display:          inline-block;
    padding:          0.2em;
    border-radius:    0.7em;
    background-color: #BBB;
    user-select:      none;

    a:hover 
    {
      text-decoration:  none;
      background-color: #AA0;
      color:            #FFF;
    }
    .tablenavgray,
    .tablenavcurrent,
    .tablenavbtn
    {
      background-color: #DDF;
      padding:          0 0.5em;
      border-radius:    0.5em;
      margin:           0 0.1em; 
      text-decoration:  none;
      display:          inline-block;  
      color:            #000;
      min-width:        2ch;
      text-align:       center;
    }

    .tablenavfirst
    {
      margin:           0 0.6ch 0 0.1em ;
      background-color: #CCF;
    }

    .tablenavlast
    {
      margin:           0 0.1em 0 0.6ch;
      background-color: #CCF;
    }

    .tablenavgray
    {
      background-color: #DDD;
    }

    .tablenavbtn
    {
      cursor: pointer;
    }
    .tablenavcurrent
    {
      background-color: #BFB;
    }
  }

  th.sortable
  {
    position: relative;
    cursor:   pointer;
  }

  th.sorted_desc:after,
  th.sorted_asc:after 
  {
    position: absolute;
    right:    0;
    content:  "";
    display:  inline-block;
    width:    0;
    height:   0;
    border:   6px solid transparent;
  }

  th.sorted_asc:after 
  {
    bottom:              2px;
    border-bottom-color: #4A4;
  }
  th.sorted_desc:after
  {
    bottom:           -4px;
    border-top-color: #C55;
  }

  .tt_timeedit
  {
    width:     6ch;
    
    &::placeholder 
    {
      color:   red;
      opacity: 1; 
    }
  }

  label.clError
  {
    margin:           0.2em;
    border-radius:    0.3em;
    padding:          0.2em 0.5em;
    background-color: #DDD;
    display:          inline-block;
    border:           1px solid red;
  }


}