@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}
 
@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}
 
@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}
 
@media (min-width: 624px) {
    html {
        font-size: 9px;
    }
}
 
@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}

body        { background: #04112f;
              border-style: none!important;
              font-family: 'Courier New', Courier, monospace;
            }
html        {
              border-style: none!important;

            }
 .tophead   {
              background-image: url('img/widb-sm.png');
              background-color: #090e60;
              /* width :930px;  */
              height: 109px;
              background-repeat: no-repeat;
              border-style: none!important;
              padding-bottom: 0px;
              padding-top: 0px;
             }

  .col1 {
          animation: fade 2s infinite;
          -webkit-animation: fade 2s infinite;
          -moz-animation: fade 2s infinite;
          -o-animation: fade 2s infinite;
          -ms-animation: fade 2s infinite;  

        }


  @keyframes fade {
                    0%   { background-color: rgba(255, 0, 0, 0.431); color: rgb(255, 242, 0); }
                    50%  { background-color: rgba(0, 0, 0, 0.431);   color: #9aef61; font-optical-sizing: 2; }
                    100% { background-color: rgba(255, 0, 0, 0.431); color: rgb(255, 242, 0); }
                  }


  .col2 {
          animation: fade2 2s infinite;
          -webkit-animation: fade2 2s infinite;
          -moz-animation: fade2 2s infinite;
          -o-animation: fade2 2s infinite;
          -ms-animation: fade2 2s infinite;
        }
  @keyframes fade2 {
                    0%   { background-color: rgba(255, 0, 0, 0.431); color: rgb(255, 0, 0); }
                    50%  { background-color: rgba(0, 0, 0, 0.431);   color: rgb(255, 225, 0); }
                    100% { background-color: rgba(255, 0, 0, 0.431); color: rgb(255, 0, 0);}
                   }
  
  .col3     { color:blueviolet; }
  .col4     { color:#2ef72b;  }

 .css_text  { color: #9aef61; vertical-align:top; padding-left: 0.4em; }
 .css_cap   { color: #dc3333; vertical-align:top; width:4.8em; max-width:7em; white-space: preserve nowrap; padding-left: 0.6em; }
 .css_date  { color: #eded13; vertical-align:top; width:6.5em; max-width:7em;white-space: preserve nowrap; }
 .css_id    { color: #2ef72b; vertical-align:top; white-space: preserve nowrap; }
 .css_soort { color: #e94949; vertical-align:top; white-space: preserve nowrap;}
 .capcode_list { max-height:60pt;  
                 overflow: hidden; 
                 text-overflow: ellipsis; 
                 -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
                 transition: transform .6s; /* Animation */
                 background-color: #010346;
               }

 .capcode_list:hover { max-height:120%;
                       transform: scale(1.2);
                       background-color: #11137d;
                       text-overflow: clip;
                       -webkit-mask-image:unset; 
                       
                        border: 3pt linearGradient;
                        z-index:9;
                        border-radius: 10px 2px;
                        text-align: center;       
                     }
 .capcode_item {
                       background-color: #010346;  
               }

 .capcode_item:hover {
                         background-color: #011a46;
                     }
 thead      { background-color: #11137d; 
              position: sticky;
              top: 0px;  
              z-index:10;
            }
 table      { border-collapse: collapse;
              width: 100%; 
              font-size:2em;
            }

 tr         { 
              border-bottom: 1pt solid rgba(79, 68, 239, 0.542); padding:3px;
            }
 tr:nth-child(even) {
                        background-color: #031046;
                    }
 tr:nth-child(odd) {
                        background-color: #040546;
                    }
 td         { 
              max-height: 4em; border-left: 1pt solid rgba(61, 37, 37, 0.477); 
            }

 .jumptop { z-index:12;
             
             text-align: right;
             position: sticky;
             font-size: large;
             color: #d9ff00;
             float: right;
             white-space: preserve nowrap;
          }
 @keyframes fade3 {
                    0%   { background-color: #3035bad6; }
                    10%  { background-color: #9698cdd6; }
                    100% { background-color: #3035bad6; }
                    }
.imgborder {
             border-top: 2px #4247c972 solid;     
             border-right: 2px #4247c972 solid;     
             border-bottom: 2px #15186272 solid;    
             border-left: 2px #15186272 solid;      
             border-collapse: collapse; 
             background-color: #3035bad6;
             border-radius: 2em;
            }
.imgborder:hover {
            animation: fade3 1s ease-in-out;
            -webkit-animation: fade3 1s ease-in-out;
            -moz-animation: fade3 1s ease-in-out;
            -o-animation: fade3 1s ease-in-out;
            -ms-animation: fade3 1s ease-in-out;
            /* background-color: #9698cdd6; */
            }