html, body, .grid-container { 
    height: 100%; 
    margin: 0; 
    font-family: ingra, rift,sans-serif;
    /* font-size: 2rem;
     width: 100%; */
}


.rlLink {text-decoration: none;
color: rgb(82, 82, 82);
font-weight: bold;
}
.grid-container {
    display: grid;
    grid-template-columns: 0.1fr 0.6fr 2.6fr 0.1fr;
    grid-template-rows: 0.5fr auto auto  auto auto;
    /* grid-template-rows: 0.1fr 2.5fr 0.3fr; */
    grid-template-areas: ". logo top ." 
                         ". menu rlmain ." 
                         ". lfoot foot .";
    grid-column-gap: 5px;
  }

.grid-container > div {
  /* background-color: rgba(192, 189, 189, 0.8); */
  border: 0px solid black;
  /* text-align: center; */
  
}

.datagrid {
    display: grid; 
    grid-template-columns:  1fr 3fr 2fr 2fr 2fr 1fr;
    justify-items: center;
    font-size:1rem;
    /* font:  13px ingra;'/
    /* 
    align-items: center;
    
    text-align: center; */
    
}
/* .datagrid:hover span {
  background-color: gray;
} */
/*
.datagrid > span {
    border-bottom: 1px dotted lightgray; 
    font:  13px ingra;
    padding-left:5px;
}
*/  


.menu {
    display: grid;
    /* grid-template-columns: 1fr; */
    /* grid-template-rows: 0.6fr auto1.4fr; */
    grid-template-rows: 0.1fr auto;
    grid-template-areas: "." "rlother";
    grid-area: menu;
  }
  
.rlother { 
  grid-area: rlother; 
  align-self: end;
   
}
.lfoot {
  grid-area:lfoot;
}

.rlJson { 
  grid-area: rltable;  
  /* height: 120px;  */
  /* width: 50px */
}

.top { 
  grid-area: top;  
  /* height: 120px; */
}

.rlmain {
    display: grid;
    /* lr ts*/
    align-self: stretch;
    /* lr ts end*/
    grid-template-columns: 1fr;
    /* grid-template-rows: 0.1fr 1.8fr; */
    grid-template-rows: 0.1fr auto;
    grid-template-areas: "." "rltable";
    grid-area: rlmain;
    
  }

  .rltable {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-rows: 1.8fr 0.2fr; */
    
    grid-template-areas: "." "rlfoot";
    grid-area: rltable;
/*Test*/
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
    /*Test*/
  }
  .rltable a { 
    text-decoration: none;
    color: rgb(82, 82, 82);
    font-weight: bold;
  }
  .rldatatable
  {
    position: absolute;
    left: 10px;
    top: 10px;
    
  }

  
.rlfoot { 
    grid-area: rlfoot; 
    /* font-size: 50Px; */
    /*visibility: hidden; */
  }
    

.foot{
  grid-area: foot;
  font-size:0.8rem;
  /*font-size: 14px;
   height: 65px; */

}    
.frametext{ 
      font-size: 1rem;
      /* height: 65px; */
      /* visibility: hidden; */
      font-weight: normal;
}
/* Use: text info messages */
.uid {
  background: url("loggedin.png") no-repeat;
  background-size: 25px 20px;
  background-position: left;
  display: block;
  /*width: 25px;
  height: 250px;
  margin-top: 35px;
  margin-bottom: 65px;*/
  font-size: 0.8rem;
  padding-left: 20px;
  color: rgba(211, 211, 211, 0.4);
}
.faqq{
  padding-top: 5px;
  font-size: 0.8rem;
  font-weight: bolder;
  /* text-align: left; */
}
.faqb{
  font-size: 0.8rem;
  padding-left: 5px;
}
.bread {
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 100;
}
.errortext
{
  color:red;
  background:yellow;
}
.infomsg{
  color: black;
  background: white;
  font-size: 0.8rem;
  font-style: normal;
}

.logo { grid-area: logo; }
.headerigc { color: #A3A3A3; font-weight: bold; text-align: center; font-size: 6rem; padding:0; margin:auto; font-family:'rift',sans-serif; }
.icglogo { width: 185px;}
.imgzoom { 
  padding: 0px; 
  transition: transform .2s; /* Animation */
  height: 20px;
  margin: 0 auto;
  /*    background-color: green;*/
  /* width: 30px; */
}
.imgzoom:hover {
  transform: scale(5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  transform-origin: right bottom;
  /* transform-origin: 30px 10px; */
  transition:.3s ease-in-out;
}

.pilotname {
  font-size:larger;
  font-weight: bolder;
}
h2 {padding:0px; margin:0px;}
p  {padding:0px; margin:0px;}
/* span.hover {cursor: ew-resize;} */

.flag {
  width: 20px;
  vertical-align: -webkit-baseline-bottom;
  float: left; 
}

.rb {font-size: 0.6rem ingra;}

/* Pilot details page */
.pilotimage { 
  width: 182px;
  padding:1px;
  border:1px solid rgb(228, 227, 227);
 }
 .pilotsponsorlink { 
  width: 100px;
  padding:1px;
  border:1px solid rgb(228, 227, 227);
 }

 /* -------------------- Rounded Corners */
 
.rounded {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-color: lightgray;
}

.semi-square {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/* Side Bar*/
 
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
/*font-size: 13px;*/
font-size: 1rem;
width: 180px; /* Main menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: blue; /*  rgb(40, 74, 140); background of menu tabs (default state)*/
    /**Why mnu item transparent*/
    z-index: -1;
    opacity: 1.0;
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: gray;
}

    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 170px; /*Sub menu Items width */
    top: 0;
    visibility: hidden;
    }

    .sidebarmenu a.subfolderstyle{
    background: url(right.gif) no-repeat 97% 50%;
    }
    /* Holly Hack for IE \*/
    * html .sidebarmenu ul li { float: left; height: 1%; }
    * html .sidebarmenu ul li a { height: 1%; }
    /* End */

/**************** Side Bar menu css *************************/
/* Nested Side Bar menu
Project URL: http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
*/

.nestedsidemenu {
  font-size:  1rem ingra;
  position: relative;
  width: 165px;
}


/* top Level menu */
.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}

/* top level list items */
.nestedsidemenu ul li {
  position: relative;
}

/* top level menu items link style */
.nestedsidemenu ul li a, .nestedsidemenu ul li span {
  display: block;
  position: relative;
  /* background of menu items (default state) */
  background:gray;
  /* background:rgb(40, 74, 140); */
  /* background: #008c9e; */
  /* color: white; */
  padding: 6px 10px;
  color: #2d2b2b;
  text-decoration: none;
}


.nestedsidemenu ul li a:link, .nestedsidemenu ul li a:visited {
  color: white;
}

/* top level menu items link style on hover and when active */
.nestedsidemenu ul li:hover > a {
  /* background: #005f6b; */
  background: lightgray;
}

/* Sub ULs style */
.nestedsidemenu ul li ul {
  position: absolute;
  left: -5000px;
  top: 0;
  opacity: 0;
  width: 200px;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;

  -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
  transition: opacity .3s, visibility 0s .3s, left 0s .3s;
}

/* First Sub Levels UL style on hover */
.nestedsidemenu ul li:hover > ul {
  visibility: visible;
  left: 100%;
  opacity: 1;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

/* Sub level menu list items (alters style from top level List Items) */
.nestedsidemenu ul li ul li {
  display: list-item;
  float: none;
}

/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.nestedsidemenu ul li ul li ul {
  top: 0;
  left: 100%;
}

/* Sub Levels link style on hover and when active */
.nestedsidemenu ul ul li:hover > a {
  /* background: #52616a; */
  background: lightgray;
}

/* Sub Levels UL style on hover */
.nestedsidemenu ul ul li:hover > ul {
  left: 100%;
}

/* Sub level menu links style */
.nestedsidemenu ul li ul li a {
  /* font: normal 14px 'Bitter', sans-serif; */
  padding: 6px;
  margin: 0;
  background: gray;
  /* background:rgb(181, 188, 221); */
  /* background:rgb(40, 74, 140); */
  /* background: #4ea1d3; */
  border-right: none;
  border-top-width: 0;
}

/* LIs with a sub UL style */
.nestedsidemenu ul li > a {
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}

/* LIs with NO sub UL style */
.nestedsidemenu ul li > a:only-child {
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}

/* LIs with a sub UL pseudo class */
.nestedsidemenu ul li > a:after {
  /* add arrow inside LIs */
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-left-color: #FFFFFF;
  top: 40%;
  right: 8px;
}

/* LIs with NO sub UL pseudo class */
.nestedsidemenu ul li > a:only-child:after {
  /* undo arrow for non submenu LIs */
  display: none;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 923px) {
  /* FIRST breaking point
    Last top menu items' sub ULs should drop to the left (instead of right)
    Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
  */

  .nestedsidemenu ul li:nth-last-of-type(-n+1) ul li:hover > ul {
      left: -100%;
  }
}

@media (max-width: 500px) {
  /* SECOND breaking point 
    For mobile and screen browser windows
    Get Sub ULs to expand entire width of document and drop down
    Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
  */
  .nestedsidemenu{
      width: 100%;
  }
  
  .nestedsidemenu ul li > a:after {
      /* add arrow inside LIs */
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      border: 5px solid transparent;
      border-left-color: transparent;
      border-top-color: #fff;
      top: 40%;
      right: 8px;
  }

.nestedsidemenu ul li {
      position: static;
  }

  .nestedsidemenu ul li ul {
      width: 100%;
      border-top: 2px solid rgba(0,0,0,.6);
  /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
  display: none;
  }

  .nestedsidemenu ul li:hover > ul {
  display: block;
      left: 0 !important;
      top: auto;
      box-shadow: 0 0 12px gray;
  }

}
/**************** Side Bar menu END *************************/

/********* ToolTip *****************/
/* setup tooltips */
.tooltip {
  position: relative;
}
.tooltip:before,
.tooltip:after {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.tooltip:after {
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0,0,0,.75); 
  border-left: 6px solid transparent;
  content: '';
  height: 0;
    top: 20px;
    left: 20px;
  width: 0;
}
.tooltip:before {
  background: rgba(0,0,0,.75);
  border-radius: 2px;
  color: #fff;
  content: attr(data-title);
  font-size: 0.8rem;
  padding: 6px 10px;
    top: 26px;
  white-space: nowrap;
}

/* the animations */
/* fade */
.tooltip.fade:after,
.tooltip.fade:before {
  transform: translate3d(0,-10px,0);
  transition: all .15s ease-in-out;
}
.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* expand */
.tooltip.expand:before {
  transform: scale3d(.2,.2,1);
  transition: all .2s ease-in-out;
}
.tooltip.expand:after {
  transform: translate3d(0,6px,0);
  transition: all .1s ease-in-out;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
  opacity: 1;
  transform: scale3d(1,1,1);
}
.tooltip.expand:hover:after {
  transition: all .2s .1s ease-in-out;
}

/* swing */
.tooltip.swing:before,
.tooltip.swing:after {
  transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
  transform-origin: 0 0;
  transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:after {
  transform: translate3d(0,60px,0);
  transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:hover:before,
.tooltip.swing:hover:after {
  opacity: 1;
  transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
}

/********* ToolTip End *************/