@import "icons.css";
@import "buttons.css";
@import "menu.css";
@import "forms.css";
@import "singles.css";
@import "background.css";
@import "grid.css";
@import "gridlight.css";
@import "gridlightthin.css";
@import "pagecontrol.css";
@import "colors.css";
@import "calonemonth.css";
@import "chat.css";
@import "regulamin.css";
@import "quest.css";
@import "survey_forms.css";
/*
@media screen and (max-device-width : 1920px)
{
*{
  font-size:100%;
}
}
@media screen and (max-device-width : 1300px)
{
*{
  font-size:100%;
}
}
@media screen and (max-device-width : 1200px)
{
*{
  font-size:85%;
}
}
*/
@media screen and (max-width: 1920px)
{
*{
  font-size:100%;
}
}
@media screen and (max-width: 1600px)
{
*{
  font-size:80%;
}
}
@media screen and (max-width: 1200px)
{
*{
  font-size:70%;
}
}
@media screen and (max-width: 1000px)
{
*{
  font-size:50%;
}
}
*{
  font-style:normal;
  /*font-variant:small-caps;*/
  font-variant:normal;
  font-weight:normal;
  /*font-size:1rem;*/
  /*line-height:0.9rem;*/
  font-family:"Segoe UI","Open Sans",sans-serif,serif;
  /*font-family: 'Roboto', sans-serif !important;*/
}
  
body {
  margin:0 auto;
  overflow-x: auto;
  overflow-y: auto;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
        }   
 button {
 border:0px;
 background-color:transparent;
 }
 
.h { display: none }
.v { display: block }
 
 .right {
      margin: 0 auto!important;
      text-align:right!important;
      } 
#menu {
      position:fixed;
      top:0rem;
      z-index:9998;
      font-weight:800;
      color:white;
      text-align:center;
      font-size:4rem;
      height:4rem;
      width:120%;
      margin-left:-10%; 
      padding:10rem 0rem 0rem 0rem;
      white-space:normal;
      border: 0rem solid #003322;
      background:linear-gradient(to bottom, #373B43 0%, #4F5460 98%, #C1DFF5 99%, #027CD7 100%);
}
#smp_ps_main   {
    height:100vh;
    width:calc(99vw - 13rem);
    position:relative;
    top:0rem;
    left:13rem;
    background-color:white;
    }
/*tekst nagłówka*/
#hl p {
    padding-right:1.8rem;
    border:1px solid red;
    height:2.5rem;
    position:absolute;
    left:0rem;
    top:0rem;
    }
#hm {
    width:99vw;
    height:2rem;
    line-height:2rem;
    color:white;
    text-align:center;
    /*font-variant:small-caps;*/
    font-weight:300;
    letter-spacing:0.1rem;
    font-size:1.5rem;
    position:fixed;
    left:0rem;
    top:0rem;
    }
 #user {
    width:30rem;
    height:2rem;
    line-height:0.5rem;
    color:black;
    text-align:right;
    font-weight:800;
    position:fixed;
    top:0rem;
    right:5rem;
    float:right;
    padding:0rem 1rem 0rem 1rem;
    z-index:9999;
    cursor: pointer;
    display:float ;
    }
 #usericon img {
    text-align:center;
    width:1.4rem;
    padding:0.2rem;
    float:right;
    }
 #username {
    text-align:right;
    font-size:0.8rem;
    padding:0.7rem;
    float:right;
    }
#usermess {
    text-align:left;
    font-weight:800;
    width:1.4rem;
    padding:0.2rem 0rem 0rem 0rem;
    float:right;
    position:fixed;
    top:0rem;
    right:1.5rem;
    /*border:1px solid blue;*/
} 
#usermess span {
 text-align:left;
 font-weight:800;
 color:red;
}
#chatmess {
    text-align:left;
    font-weight:800;
    width:1.4rem;
    padding:0.2rem 0rem 0rem 0rem;
    float:right;
    position:fixed;
    top:0rem;
    right:3.5rem;
} 
#chatmess span {
 text-align:left;
 font-weight:800;
 color:red;
}
#logoutpanel {
    position:relative;
    top:-11rem;
    right:-15.5rem;
    width:23rem;
    height:12rem;
    margin: 0 auto;
    transition:1.3s;
    visibility:hidden;
    }
#logoutpanel h1 {
    background:transparent;
    height:3.2rem;
    width:13rem;
    }
#logoutpanel h2 {
    background:white;
    height:10rem;
    width:23rem;
    text-align:center;
    background-color:white;
    border-radius:0.2rem;
    border-left:1px solid #0276CC;
    border-bottom:2px solid #0276CC;
    }
#pageMainContent {
    height:calc(100vh - 5.3rem);
    width:100%;
    position:relative;
    top:2.5rem;
    }
.blink {
font-size: 26px;
font-family: cursive;
color: #fff;
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} 
.blink2 {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
      }
      @keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
      @-webkit-keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
/*nagłówki*/
    /*strona logowania*/
.index1 { 
    font-weight:800;
    color:white;
    text-align:center;
    font-size:2rem;
    height:100vh;
    width:99vw;
    min-width:60rem;
    white-space:normal;
    border: 0rem solid #003322;
    } 
 .index1 div {
    width:100%;
    height:10%;
    padding:4% 0 4% 0;
    }
    
 .index1 div span {
    font-size:2.5rem;
    font-weight:100;
    letter-spacing:0.6rem;
    line-height:2.5rem;
    /*color:#B0DEFF;*/
    color:white;
    }    
    .index1l { 
    font-weight:800;
    color:white;
    text-align:center;
    font-size:2rem;
    height:50vh;
    width:20rem;
    float:left;
    border: 1px solid yellow;
    }
    .index1r { 
    font-weight:800;
    color:white;
    text-align:center;
    font-size:2rem;
    height:50vh;
    float:left;
    padding:40% 20rem 0rem 0rem;
    width:calc(99vw - 50rem);
    border: 1px solid red;
    } 
 div.TopMargin {
    height:10%;
    }
div.HEAD0 { 
    font-weight:800;
    color:white;
    text-align:center;
    font-size:2rem;
    width:100%;
    min-width:60rem;
    white-space:normal;
    border: 0rem solid white;
    background:linear-gradient(to right, #028CF2 -20%, #0276CC 50%, #028CF2 100%);
    background-color:#0276CC;
    }
p.HEAD0
    {
    vertical-align:middle;
    margin-top:10rem;
    margin-left:0%;
    height:0rem;
    }
.HEAD1 {
    position:fixed;
    top:0rem;
    z-index:3;   
    color:black;
    text-align:center;
    height:2.5rem;
    width:100%;
    min-width:60rem;
    white-space:normal;
    border-bottom:1px solid #6CB6F9;
    background-image:url('../images/logo.png');
    background-position:0.3rem;
    background-size:2.5rem;
    background-repeat:no-repeat;
    z-index:10;
    }
.HEAD1 section {
    position:relative;
    width:100%;
    height:100%;
    }
.HEAD1 section a {
    width:9.3rem;
    max-width:13rem;
    height:2.5rem;
    left:0rem;
    top:0rem;
    max-width:13rem;
    line-height:2.3rem;
    z-index:10;
    text-decoration:none;
    color:white;
    font-size:1rem;
    text-align:left;
    position:absolute;
    left:0rem;
    top:0rem;
    padding-left:3.6rem;
    }    
div.leftmbar {
    position:fixed;
    top:0rem;
    padding-top:5rem;
    left:0rem;
    z-index:2;   
    color:white;
    text-align:center;
    height:100%;
    width:13rem;
    white-space:normal;
    background:linear-gradient(to right, #028CF2 0%, #0282e3 12%, #028CF2 100%);
    background-color:#027EDB;
    overflow:visible;
    }    
div.HEADmenu {
    position:fixed;
    top:4rem;
    z-index:998;
    color:white;
    text-align:center;
    height:3rem;
    width:100%;
    min-width:60rem;
    padding:1rem 0rem 0rem 0rem;
    white-space:normal;
    background:linear-gradient(to right, #028CF2 -30%, #0276CC 50%, #028CF2 110%);
    background-color:#0276CC;
    }
div.SubHEADmenu {
    position:fixed;
    top:0rem;
    left:13rem;
    padding:0.1rem 1rem 0.5rem 1rem;
    z-index:4;
    color:white;
    text-align:left;
    height:2rem;
    line-height:2rem;
    width:calc(99vw - 40rem);
    /*min-width:60rem;*/
    white-space:normal;
    /*background:linear-gradient(to right, #028CF2 -30%, #0276CC 50%, #028CF2 110%);
    background-color:#0276CC;*/
    /*border:1px solid red;*/
    z-index:20;
    }
p.HEAD1
    {
    font-weight:600;
    font-size:1.5rem;
    color:white;
    vertical-align:middle;
    margin-top:2%;
    margin-left:0%;
    height:0rem;
    }
div.HEAD2 { 
    font-weight:400;
    color:white;
    text-align:center;
    font-size:1.8rem;
    height:70%;
    width:100%;
    min-width:60rem;
    padding:1rem 0rem 0rem 0rem;
    white-space:normal;
    border: 0rem solid #003322;
    background:linear-gradient(to right, #0276CC -20%, #027EDB 50%, #0276CC 100%);
    background-color:#027EDB;
    }
div.HEAD3 { 
    font-weight:400;
    color:white;
    text-align:center;
    font-size:1.8rem;
    height:100rem;
    /*width:100%;*/
    padding-top:3rem;
    min-width:60rem;
    white-space:normal;
    border: 0rem solid #003322;
    background:linear-gradient(to right, #0276CC -20%, #027EDB 50%, #0276CC 100%);
    background-color:#027EDB;
    }
 p.HEAD2 {
    vertical-align:middle;
    margin-top:10rem;
    margin-left:0%;
    }
   
td.hrb {
    padding:0rem;  
    margin: 0 auto;
    text-align:right;
    height:50%;
    max-height:50%;
    width:20%;
    height:3%;
    }   
/*kafelki duże*/
 @keyframes tilebtn
    {
      0% { box-shadow:0.1rem 0.1rem 0.2rem 0.2rem #1B9DFE;width:80%;height:80%; }
      50% { box-shadow:0.1rem 0.1rem 0.2rem 0.3rem #1B9DFE;width:81%;height:81%; }
      100% { box-shadow:0.1rem 0.1rem 0.2rem 0.2rem #1B9DFE;width:80%; }
    } 
.contener
    {
    margin: 0 auto;
    padding:1rem;    
    text-align:center;
    width:15rem;
    height:15rem;         
    /*border-collapse:separate;*/
    z-index:999;
    }
.contenerEmpList
    {
    margin: 0 auto;
    padding:0.5rem;  
    text-align:center;
    width:18rem;
    height:6rem;          
    /*border-collapse:separate;*/
    z-index:999;
    }
.contenerEmpListNotActive
    {
    text-decoration:line-through;
    margin: 0 auto;
    padding:0.5rem;  
    text-align:center;
    width:18rem;
    height:6rem;          
    /*border-collapse:separate;*/
    z-index:999;
    }    
div.FLY
    {
    border-radius:0.3rem;
    margin: 0 auto;
    font-weight:800;
    color:white;
    text-align:center;
    font-size:1rem;       
    background-color:transparent;
    padding:1%;
    width:80%;
    height:80%; 
    box-shadow:0.01rem 0.01rem 0.1rem 0.02rem #1B9DFE;
    transition:0.3s;
    display: flex;
    /*animation:tilebtn 2s infinite;*/
    /* flex-direction: column;*/
    align-items: center;          
    }   
div.FLY:hover
    {
    width:82%;
    height:82%; 
    box-shadow:0.01rem 0.01rem 0.1rem 0.05rem #1B9DFE;
    cursor: pointer;
    }
div.FLY a
    {
    height:100%;
    width:100%;
    text-decoration:none;
    /*border:1px solid green;*/
    }
div.FLY a table
    {
    height:80%;
    width:100%;
    border-collapse:collapse;
    /*border:1px solid yellow;*/
    }
div.FLY a table td
    {
    height:2rem;
    text-decoration:none;
    color:white;
    text-align:center;
    font-size:1.1rem;
    font-weight:300;
    width:100%;
    /*border:1px solid red;*/
    }
div.FLY table td
    {
    height:2rem;
    text-decoration:none;
    color:white;
    text-align:center;
    font-size:1rem;
    font-weight:300;
    width:100%;
    /*border:1px solid red;*/
    }    
div.FLY a table td img
    {
    height:2.5rem;
    padding:0.5rem;
    }
    
/*fly not active*/
div.FLYna
    {
    border-radius:0.3rem;
    margin: 0 auto;
    font-weight:800;
    color:black;
    text-align:center;
    font-size:1rem;       
    background-color:rgba(200, 248, 248, 0.1);
    padding:1%;
    width:80%;
    height:80%; 
    box-shadow:0.01rem 0.01rem 0.1rem 0.02rem #1B9DFE;
    transition:0.3s;
    display: flex;
    cursor: not-allowed;
    /*animation:tilebtn 2s infinite;*/
    /* flex-direction: column;*/
    align-items: center;          
    } 
/*    
div.FLYna:hover
    {
    width:82%;
    height:82%; 
    box-shadow:0.01rem 0.01rem 0.1rem 0.05rem #1B9DFE;
    }
*/
div.FLYna a
    {
    height:100%;
    width:100%;
    text-decoration:none;
    /*border:1px solid green;*/
    }
div.FLYna a table
    {
    height:80%;
    width:100%;
    border-collapse:collapse;
    /*border:1px solid yellow;*/
    }
div.FLYna a table td
    {
    height:2rem;
    text-decoration:none;
    color:black;
    text-align:center;
    font-size:1.1rem;
    font-weight:300;
    width:100%;
    /*border:1px solid red;*/
    }
div.FLYna table td
    {
    height:2rem;
    text-decoration:none;
    color:silver;
    text-align:center;
    font-size:1rem;
    font-weight:300;
    width:100%;
    /*border:1px solid red;*/
    }    
div.FLYna a table td img
    {
    height:2.5rem;
    padding:0.5rem;
    }

/*fly 2*/    
    
div.FLY2
    {
    border-radius:0.3rem;
    margin: 0 auto;
    font-weight:800;
    color:black;
    text-align:center;
    font-size:2%;         
    background-color:white;
    padding:1%;
    width:80%;
    height:80%; 
    box-shadow:0.01rem 0.01rem 0.1rem 0.02rem #1B9DFE;
    transition:0.3s;
    display: flex;
    /*animation:tilebtn 2s infinite;*/
    /* flex-direction: column;*/
    align-items: center;          
    }   
div.FLY2:hover
    {
    width:82%;
    height:82%; 
    box-shadow:0.01rem 0.01rem 0.1rem 0.05rem #1B9DFE;
    }
div.FLY2 a
    {
    height:100%;
    width:100%;
    text-decoration:none;
    /*border:1px solid green;*/
    }
div.FLY2  a table
{
    height:80%;
    width:100%;
    border-collapse:collapse;
    /*border:1px solid yellow;*/
    }
div.FLY2 a table td
    {
    height:2rem;
    text-decoration:none;
    color:black;
    text-align:center;
    font-size:1.1rem;
    font-weight:300;
    width:100%;
    /*border:1px solid red;*/
    }
div.FLY2  a table td img
    {
    height:2.5rem;
    padding:0.5rem;
    }
td.FLYI { 
    text-decoration: none;
    font-weight:400;
    color:white;
    text-align:center;
    font-size:1.1rem;
    vertical-align:middle;
    padding:0%;
    }  
table.Tmenu { 
    vertical-align:middle;
    width:100%;
    height:2.5rem;
    padding-right:6rem;
    }   
img.i1 {
    height:5rem;
    min-height:5rem;
    max-height:5rem;
    }
/*kafelki mini */
.conteners
    {
    margin: 0 auto;
    padding:0.1rem;  
    margin-left:0%; 
    width:15rem;
    height:15rem;
    }
div.FLYS
    {
    margin: 0 auto;
    font-weight:800;
    color:white;
    text-align:center;
    font-size:1.4rem;         
    background-color:#027EDB;
    padding:1%;
    width:80%;
    height:80%; 
    border-radius:0.5rem;
    box-shadow:0.1rem 0.1rem 0.4rem 0.2rem #E1F0FA;
    transition:0.3s;
    display: flex;
    /* flex-direction: column;*/
    align-items: center;              
    }   
div.FLYS:hover
    {
    width:85%;
    height:85%; 
    }         
td.FLYIS { 
    font-weight:400;
    color:white;
    text-align:center;
    font-size:1.4rem;         
    vertical-align:middle;
    padding:0.1rem;
    width:100%;
    }   
img.i1s {
    margin-right: 0rem; 
    margin-bottom: 0rem; 
    width:3rem;
    height:3rem;
    border: 0rem solid silver; 
    background: none; padding: 0.4rem;
    border-radius: 0.3rem;
    }
/*kafelki menu*/
.contenermenu
{
    margin: 0 auto; 
    margin-left:0%; 
    height:2rem;
    }
.FLYmenu
    {
    border-radius:0.4rem;
    margin: 0 auto;
    font-weight:500;
    color:white;
    text-align:center;
    background-color:#027EDB;
    width:95%;
    height:95%; 
    box-shadow:0.1rem 0.1rem 0.2rem 0.1rem #B7E0FF;
    transition:0.3s;
    display: flex;
    /* flex-direction: column;*/
    align-items: center;              
    }             
.FLYmenu:hover
    {
    width:96%;
    height:96%; 
    box-shadow:0.1rem 0.1rem 0.3rem 0.2rem #B7E0FF;
    }
td.FLYmenu {
    border-radius:0.3rem;
    margin: 0 auto;
    font-weight:400;
    color:white;
    text-align:center;
    font-size:4rem;         
    vertical-align:middle;
    padding:0.1rem;
    }
td.FLYImenu {
    border-radius:0.3rem;
    margin: 0 auto;
    font-weight:400;
    font-size:1rem;
    color:white;
    text-align:center;
    vertical-align:middle;
    padding:0.1rem;
    } 
.i1menu {
    margin-right: 0rem; 
    margin-bottom: 0rem; 
    font-size:0.5rem;
    height:3rem ;
    background: none; 
    padding: 0.1rem;
    border-radius: 0rem;
    }
/*Formularz logowania*/       
div.login {
    /*background:linear-gradient(to right, #028CF2 -20%, #0276CC 50%, #028CF2 100%);*/
    /*background-color:#0276CC;*/
    vertical-align:middle;
    font-weight:400;
    color:black;
    text-align:center;
    width:99vw;
    height:calc(100vh);
    white-space:normal;
    padding-top: calc(50vh - 20rem)
    } 
/*rgulamin*/
div.regulamin {
    vertical-align:middle;
    font-weight:400;
    color:black;
    text-align:center;
    width:99vw;
    height:350vh;/*calc(100vh - 16.5rem);*/
    white-space:normal;
    padding-top: 2rem;
    }
div.messtext {
    /*background:linear-gradient(to bottom, white 0%, white 97%, #C1DFF5 99%, #027CD7 100%);*/
    font-size:1.3rem;
    font-weight:400;
    color:black;
    text-align:left;
    width:90%;
    /*min-height:10rem;*/
    height:15rem;
    max-height:15rem;
    padding:1rem;
    white-space:normal;
    border: 0rem;
          }
.messtext {
    color:black;
    }
.NAG { 
    vertical-align:middle;
    font-weight:600;
    color:#E08C00;
    text-align:center;
    font-size:1.5rem;
    white-space:nowrap;
    /*width:100%;*/
    }
.NAGLogin { 
    vertical-align:middle;
    font-weight:600;
    color:#E08C00;
    text-align:center;
    font-size:1.5rem;
    white-space:nowrap;
    /*line-height:5rem;*/
    width:50%;
    }    
.formLabel { 
    vertical-align:middle;
    font-weight:400;
    color:#E08C00;
    text-align:right;
    font-size:1rem;
    white-space:nowrap;
    line-height:2rem;
    }
.formInput { 
    vertical-align:middle;
    text-align:center;
    font-weight:600;
    color:#E08C00;
    text-align:left;
    font-size:1.2rem;
    white-space:nowrap;
    line-height:2rem;
    }
.formInput input:focus { 
    background:#D9EFFF;
    border:0.01rem solid black;
    }     
.formInputbtn { 
    vertical-align:middle;
    font-weight:600;
    color:#E08C00;
    text-align:center;
    font-size:1.8rem;
    white-space:nowrap;
    line-height:2.5rem;
    }      
 .formInputfield {
    width:100%;
    text-align:left;
    }
 input.formInputchbx {
    width:2rem;
    text-align:left;
    border: 0.1rem solid #EAEAEA;
    }              
table.R { 
    margin: 0 auto;
    text-align:center;
    vertical-align:middle;
    width:70%;
    }
table.Rlogin { 
    margin: 0 auto;
    text-align:center;
    vertical-align:middle;
    }
table.T { 
    vertical-align:middle;
    border: 0rem solid black;
    width:60%;
    max-width:60%;
    }
.center { 
    text-decoration: none;
    text-align:center;
    vertical-align:middle;
    margin: 0 auto;
    display: flex;
    /* flex-direction: column;*/
    align-items: center;              
    }
.center100 { 
    text-decoration: none; 
    text-align:center;
    vertical-align:middle;
    margin: 0 auto;
    border: 0rem solid yellow;
    width:100%;
    height:100%;
    display: flex;
    /* flex-direction: column;*/
    align-items: center;          
    } 
img.i1 {
    margin-right: 0rem; 
    margin-bottom: 0rem; 
    height:8rem;
    border: 0rem solid silver; 
    background: none; padding: 0.4rem;
    border-radius: 0.3rem;
    }   
a.label {
    text-decoration: none;
    margin: 0 auto;
    text-align:center;
    height:100%;
    max-height:100%;
    width:100%;
    max-width:100%;
    border: 0rem solid pink;
   }
a.labelLogOff {
    text-decoration: none;
    height:100%;
    max-height:100%;
    width:100%;
    max-width:100%;
   }
div.BOTTOM { 
    font-weight:800;
    color:white;
    text-align:center;
    font-size:4rem;
    height:6rem;
    width:150%;
    padding:1rem 0rem 0rem 0rem;
    white-space:normal;
    border: 0rem solid #003322;
    background:linear-gradient(to bottom, #373B43 0%, #4F5460 100%);
    background-color:#4F5460;
    }
iframe.BOTTOM { 
    height:6rem;
    width:150%;
    padding:1rem 0rem 0rem 0rem;
    white-space:normal;
    border: 0rem solid #003322;
    background:linear-gradient(to bottom, #373B43 0%, #4F5460 100%);
    background-color:#4F5460;
	overflow-x:hidden;
    }
td.BTH { 
    font-weight:400;
    color:white;
    text-align:left;
    font-size:1rem;
    vertical-align:top;
    padding:0.1rem 0.1rem 1rem 0.2rem;
    height:1rem;
	width:5rem;
    }
.BTL { 
    font-weight:100;
    font: 0.7rem/1rem "Arial",Helvetica,sans-serif;
    color: #EFEFEF; /*#D9DBDD;*/
    text-align:left;
    vertical-align:top;
    padding:0rem 0rem 0rem 2rem;
    height:1rem;
    transition:0.5s
    }
.BTL:hover { 
    font-weight:900;
    color: white;
    text-shadow:0.3rem 0.3rem 0.8rem white;
    }
/*moje dane*/
.PDLabel { 
    font-weight:500;
    color: #D9DBDD;
    text-align:left;
    font-size:1.2rem;
    vertical-align:top;
    padding:0rem 0rem 0rem 0.5rem;
    height:2.5rem;
    transition:0.5s
    }
div.DataT {
    background:linear-gradient(to bottom, white 0%, white 98%, #C1DFF5 99.6%, #027CD7 100%);
    font-weight:400;
    color:black;
    text-align:center;
    width:calc(99vw-0rem);
    height:calc(100vh - 2.6rem);
    max-width:100%;
    white-space:normal;
    padding-top:2.6rem;
    /*    padding-left:13.5rem;*/
    padding-right:0.5rem;
    position:relative;
    }

 dv.DataTova    {
    background:linear-gradient(to bottom, white 0%, white 98%, #C1DFF5 99.6%, #027CD7 100%);
    font-weight:400;
    color:black;
    text-align:center;
    width:calc(99vw-0rem);
    height:calc(100vh - 2.6rem);
    max-width:100%;
    white-space:normal;
    padding-top:2.6rem;
    /*    padding-left:13.5rem;*/
    padding-right:0.5rem;
    position:relative;
    }
div.DataTransp {
    background:transparent;
    font-weight:400;
    color:black;
    text-align:center;
    width:100%;
    height:calc(100vh - 12rem);
    max-width:100%;
    white-space:normal;
    padding-top:12rem;
    }    
td.DataTitle {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc578+0,ffbd68+0,fb9d23+100 */
    background: rgb(255,197,120); /* Old browsers */
    background: linear-gradient(to bottom,  rgba(255,197,120,1) 0%,rgba(255,189,104,1) 0%,rgba(251,157,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    font-weight:400;
    color:white;
    text-align:center;
    font-size:1.3rem;
    height:2rem;
    max-height:10rem;
    white-space:normal;
    border: 0rem  solid black;
    padding-bottom:0.3rem;
    letter-spacing:0.2rem;
    /*font-variant:small-caps;*/
    }
td.DataSubTitle {
    background:linear-gradient(to right, #F3BF0A 0%, #EBB80A 30%, #EBB80A 70%, #F3BF0A 100%);
    font-weight:900;
    color:white;
    text-align:center;
    font-size:1.3vw;
    height:5vh;
    max-height:6vh;
    width:25%;
    max-width:25%;
    white-space:normal;
    border: 0rem solid black;
    } 
.DataLabelCol {
    background:linear-gradient(to right, #028CF2 -20%, #0276CC 50%, #028CF2 100%);
    font-weight:300;
    color:white;
    text-align:center;
    white-space:normal;
    }
.GridLabel {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc578+0,ffbd68+0,fb9d23+100 */
    background: rgb(255,197,120); /* Old browsers */
    background: linear-gradient(to bottom,  rgba(255,197,120,1) 0%,rgba(255,189,104,1) 0%,rgba(251,157,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    font-weight:400;
    text-align:center;
    height:1.5rem;
    max-height:10rem;
    white-space:normal;
    border: 0rem  solid black;
    padding-bottom:0.3rem;
    letter-spacing:0.2rem;
    /*font-variant:small-caps;*/
    }
.GridLabel td {
    color:white;
    font-size:1.3rem;
    }
.GridLabel button {
    font-size:0.7rem;
    letter-spacing: 0.01rem;
    } 
.gridColLabel td {
    background:linear-gradient(to bottom, #028CF2 -70%, #0276CC 90%, #028CF2 100%);
    font-size:0.8rem;
    font-weight:500;
    color:white;
    text-align:center;
    white-space:normal;
    height:1.5rem;
    letter-spacing: -0.01rem;
    /*border:1px solid #B3DEFF;*/
    }
.gridFilter {
    position:relative;
}
.gridFilter td {
    text-align:center;
    padding-left:0.1rem;
    padding-right:0.3rem;
    height:1.5rem;
    }
.gridFilter td input {
    background:#EFF9FA;
    color:black;
    font-size:0.8rem;
    text-align:center;
    white-space:normal;
    width:100%;
    height:1.2rem;
    border:0.01rem solid silver;
    }
.gridFilter td input:focus {
    background:#D9EFFF;
    border:0.01rem solid black;
    }
.gridFilter td input.ro {
    background:#E1E6E1;
    color:transparent;
    font-size:0.8rem;
    text-align:center;
    white-space:normal;
    width:100%;
    height:1.2rem;
    border:0.1rem solid transparent;
    }
.gridFilter td input.ro:focus {
          }
.gridFilterBtnA {
    position:relative;
    }
.gridFilterBtnA  td {
    position:absolute;
    top:-5.2rem;
    right:0rem;
    width:12rem;
    }
.gridFilterBtnA  td button {
    position:absolute;
    left:1rem;
    top:0rem;
    }
.gridFilterBtnC {
    position:relative;
    }
.gridFilterBtnC  td {
    position:absolute;
    top:-5.3rem;
    right:0rem;
    width:12rem;
    }
.gridFilterBtnC  td button {
    position:absolute;
    right:1rem;
    top:0rem;
    } 
.gridBodyl td {
    background:#FFFFFF;
    color:black;
    font-size:0.8rem;
    padding:0rem 0.2rem 0rem 0.2rem;
    overflow: hidden;
    white-space:nowrap;
    /*
    border-right:1px solid white;
    border-top:0px solid white;
    border-bottom:0px solid white;
    */
    }
.gridBodyr td {
    background:#F8F8F8;
    color:black;
    font-size:0.8rem;
    padding:0rem 0.2rem 0rem 0.2rem;
    overflow: hidden;
    white-space:nowrap;
    /*
    border-right:1px solid white;
    border-top:0px solid white;
    border-bottom:0px solid white;
    */
}
table.tablegrid {
    width:99.7%;
    border-collapse:collapse;
    padding:0rem 0.02rem 0rem 0.02rem;
    border:0.3rem double silver;
    }
.gridbody {
    background-color:white;
    border-collapse:collapse;
    }
.gridbody td {
    font-size:0.7rem;
    border-right:1px solid #EFEFEF;
    /*border-bottom:1px solid silver;*/
    white-space:nowrap;
    }
td.DataLabel {
    background:linear-gradient(to right, #028CF2 -20%, #0276CC 50%, #028CF2 100%);
    font-weight:600;
    color:white;
    text-align:center;
    font: 0.9vw "Arial",Helvetica,sans-serif;
    width:15vw;
    max-width:25vw;
    height:3vh;
    max-height:3vh;
    white-space:normal;
    border: 0rem solid black;
    padding-left:1rem;
    padding-right:1rem;
    } 
td.StateBar {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,eeeeee+6,cccccc+100;Gren+3D */
    background: rgb(238,238,238); /* Old browsers */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 6%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    font-weight:400;
    color:black;
    text-align:center;
    font: 0.8vw "Arial",Helvetica,sans-serif;
    width:25vw;
    max-width:25vw;
    /*height:3vh;*/
    max-height:8vh;
    white-space:normal;
    border-top: 0.1rem solid black;
    padding:0rem 0rem 0rem 0rem;
    }
td.DataValue {
    background:linear-gradient(to right, #E8E8E8 0%, #DDDDDD 30%, #DDDDDD 70%, #E9E9E9 100%);
    font-weight:400;
    color:black;
    text-align:center;
    font: 0.9vw "Arial",Helvetica,sans-serif;
    width:25vw;
    max-width:20rem;
    height:1.3rem;
    max-height:8rem;
    white-space:normal;
    border: 0rem solid black;
    padding:0.1rem 0.1rem 0.1rem 0rem;
    }
 tr.DataValue {
    /*background:linear-gradient(to right, #E8E8E8 0%, #DDDDDD 30%, #DDDDDD 70%, #E9E9E9 100%);*/
    }
 tr.DataValue td {
    /*background:linear-gradient(to right, #E8E8E8 0%, #DDDDDD 30%, #DDDDDD 70%, #E9E9E9 100%);*/
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,eeeeee+100;Grey+Flat */
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */    
    font-weight:400;
    color:black;
    text-align:center;
    font: 0.6vw "Arial",Helvetica,sans-serif;
    width:25vw;
    max-width:20rem;
    min-height:1.3rem;
    height:1.3rem;
    max-height:8rem;
    white-space:normal;
    border: 0rem solid black;
    padding:0.1rem 0.1rem 0.1rem 0rem;
    }
 tr.DataValueS {
    background:linear-gradient(to right, #E8E8E8 0%, #DDDDDD 30%, #DDDDDD 70%, #E9E9E9 100%);
    }

 table.buttons tr {
    background:transparent;
    }
 table.buttons td {
    background:transparent;
    }    
td.contactTitle {
    background:linear-gradient(to right, #F3BF0A 0%, #EBB80A 30%, #EBB80A 70%, #F3BF0A 100%);
    font-weight:900;
    color:white;
    text-align:center;
    font-size:2rem;
    height:6rem;
    max-height:6rem;
    white-space:normal;
    border: 0rem solid black;
    }       
td.contactLabel {
    background:linear-gradient(to right, #028CF2 -20%, #0276CC 50%, #028CF2 100%);
    font-weight:700;
    color:white;
    text-align:center;
    font: 1.3rem "Arial",Helvetica,sans-serif;
    width:20%;
    max-width:20%;
    height:5rem;
    white-space:normal;
    border: 0rem solid black;
    padding: 1rem 1rem 1rem 1rem;
    } 
td.contactValue {
    background:linear-gradient(to right, #E8E8E8 0%, #DDDDDD 30%, #DDDDDD 70%, #E9E9E9 100%);
    font-weight:400;
    color:black;
    text-align:center;
    font: 1.3rem "Arial",Helvetica,sans-serif;
    width:80%;
    max-width:80%;
    height:5rem;
    white-space:normal;
    border: 0rem solid black;
    padding:0rem 0rem 0rem 0rem;
    }    
td.DataButton {
    text-decoration: none;
    background:linear-gradient(to right, #E8E8E8 0%, #DDDDDD 30%, #DDDDDD 70%, #E9E9E9 100%);
    font-weight:400;
    color:black;
    text-align:center;
    font-size:small;
    width:15vw;
    max-width:15vw;
    height:3vh;
    max-height:3vh;
    white-space:normal;
    border: 0rem solid yellow;
    }
.Button:hover {
    background-color:#D1D1D1;
    background:linear-gradient(to bottom, #E8E8E8 0%, #D1D1D1 20%,  #D1D1D1 100%);
    }
button.LogOffBtn {
    font-weight:400;
    color:black;
    text-align:center;
    font-size:0.6vw;
    width:8vw;
    max-width:8vw;
    height:3vh;
    max-height:3vh;
    white-space:normal;
    border: 0.1rem solid black;
    } 
.error { 
    font-size:2rem;
    font-weight:600;
    color: red;
    /*text-shadow:rem 0.1rem 0.4rem red;*/
    } 
.errorText { 
    font-size:1.3rem;
    font-weight:600;
    color: red;
    line-height:2rem;
    }
.errorText p { 
    font-size:1.3rem;
    font-weight:600;
    color: red;
    line-height:2rem;
    }    
.errorTextBig { 
    font-size:1.5rem;
    line-height:2rem;
    font-weight:600;
    color: red;
    }    
.info { 
    font-size:2rem;
    font-weight:600;
    color: blue;
    /*text-shadow:rem 0.1rem 0.4rem red;*/
    } 
.infoText { 
    font-size:2rem;
    font-weight:600;
    color: blue;
    }     
.headstyle {
    margin: 0 auto;
    text-align:center;
    vertical-align:middle;
    border: 0.1rem solid green;
    width:30%;
    }
.rowstyle {
    margin: 0 auto;
    text-align:center;
    vertical-align:middle;
    border: 0.1rem solid green;
    width:30%;
    } 
.t1 {
    border-collapse:collapse;
    }
.tbs {
    border-collapse:separate;
    border-spacing:1rem 1rem;
    }  
.border1 {
    border: 0.1rem solid silver;
    border-collapse:collapse;
    }
.bordersep1 {
    border-left: 0.1rem solid silver;
    border-top: 0.1rem solid silver;
    border-bottom: 0.1rem solid silver;
    border-right: 0.1rem solid gray;
    border-collapse:collapse;
    }   
.f0 {
    text-align:center;
    color:white;
    font-size:1.5rem;
    font-weight:700;
    }
.f1 {
    text-align:center;
    color:green;
    font-size:1.5rem;
    }
.fl1 {
    text-align:center;
    font-size:1rem;
    }
.c16 {
    text-align:center;
    font-size:1.6rem;
    color:navy;
    width:100%;
    }
.DragHeader {
    width:100%;
    height:6rem;
    font-size:2rem;
    color:#6200C4;
    text-align:center;
    border-bottom: 0.1rem solid #6200C4;
    }
.DragTitle {
    width:100%;
    height:3rem;
    font-size:1.8rem;
    color:white;
    text-align:center;
    }  
.noTitleStuff .ui-dialog-titlebar {display:none}
.dictcontener {
    float:left;
    border:1px solid red;
    padding:1rem;
    margin:0.5rem;
    }

.hint {
    position: relative;
    display: inline-block;
    }

.hint .hinttext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem;;
    position: absolute;
    z-index: 1;
    }

.hint:hover .hinttext {
    visibility: visible;
    }