@import url('https://fonts.googleapis.com/css?family=Quicksand:500');

body
{
    font-family: Quicksand;
    font-size: 12pt;
    width: 90%;
    max-width: 900px;
    margin: auto; 
    color: black; 
    background-color: #fff; //#fff; //
    
/*    min-width: 570px;*/
    min-height: 600px;
    
/*    background-image: linear-gradient(#f5f5f5, #FAFAFA); */
   padding-top: 10px;
   
/*transform:scale(0.95);*/
    
}

::selection {
  background: yellow; /* WebKit/Blink Browsers */
/*    color: white;*/
}
::-moz-selection {
  background: yellow; /* Gecko Browsers */
/*    color: white;*/
}

a
{
    color: blue;
    text-decoration: none;
}

a:hover
{
    color: red;
    text-decoration: none;
}

.css_top_header
{
    width:90%;
    max-width: 900px;
    top: 0;
    margin: auto;
    position: fixed;
/*    padding: 10px 0 7px 0; */
    vertical-align: middle;
    font-weight:none;
    background-color: #fff;
    padding-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #d40055;
    z-index: 1000;
/*    box-shadow: 0px 5px #f5f5f5;        */
    
    
    
}

.css_logo
{
/*    Height: 50px;*/
    width: 50%;
    color: black;
    font-size: 150%;
/*    margin-left: 10px;*/
    min-width: 200px;
    
}

hr
{
    border: none; 
    border-bottom: 1px solid #d40055;
/*    margin: auto;*/
/*    width: 95%;*/
}

/*
td
{
    text-align: center;
}
*/










/* [TOOLTIP] */
/* Set all elements with data-tooltip property to have relative position */
/* This is necessary to properly position the custom tooltip */
[data-tooltip] {
  position: relative;
    z-index: 1000;
}

/* We can set more optional visual cues */
[data-tooltip] {
  background: #fea;
  font-weight: bold;
  font-style: italic;
}

/* This will style & position the tooltip */
[data-tooltip]:before {
  /* Set text of the tooltip */
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  /* Size of tooltip */
  width: 150px;
  padding: 10px;
  /* position */
  position: absolute;
  bottom: 100%;
  left: -50%;
  margin-bottom: 12px;
  /* Colors */
  background-color: #555;
  color: #fff;
}

/* Create a triangle to make it look like a speech bubble */
[data-tooltip]:after {
  content: " ";
  border: 10px solid transparent;
  border-top-color: #555;
  border-bottom: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
}

/* Hide the data-tooltip by default */
[data-tooltip]:before, [data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  transition: all 0.3s;
}

/* Show the tooltip on hover */
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}


.css_footer
{
/*    padding-top: 30px;*/
/*
    position: absolute;
    bottom: 0px;
*/
    margin: auto;
/*    right: 5%;*/
    width: 100%;
/*    max-width: 900px;*/
    text-align: center;
/*    margin-bottom: 10px;*/
/*    color: gray;*/
    background-color: transparent;
    padding-bottom: 10px;
    font-size: 80%;
}

.css_page_load_footer
{
    width:100%; 
    text-align: center; 
/*    margin-top: -8px;*/
/*    margin-bottom: 5px;*/
    font-style: italic;
/*    color: gray;*/
}



/********************** /
#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
/*  background-position: 10px 12px;  Position the search icon */
/*  background-repeat: no-repeat;  Do not repeat the icon image */
/*  width: 100%;  Full-width */
/*  font-size: 120%;  Increase font-size */
/*  padding: 12px 20px 12px 40px;  Add some padding */
/*  border: 1px solid #ddd;  Add a grey border */
/*  margin-bottom: 12px;  Add some space below the input */
/*}*/

/*
#myTable {
  border-collapse: collapse;  Collapse borders 
*/
/*  width: 100%;  Full-width */
/*  border: 1px solid #ddd;  Add a grey border */
/*  font-size: 140%;  Increase font-size */
/*    text-transform: capitalize;*/
/*}*/

/*#myTable th, #myTable td {*/
/*  text-align: left;  Left-align text */
/*  padding: 12px;  Add padding */
/*  font-size: 95%;*/
  
/*    text-transform: capitalize;*/
/*  title: 'Click to copy to clipboard';*/
/*}*/

/*
#myTable tr {
   Add a bottom border to all table rows 
  border-bottom: 1px solid #ddd;
    text-transform: capitalize;
}
*/

/*#myTable tr.header, #myTable tr:hover {*/
  /* Add a grey background color to the table header and on hover */
/*  background-color: #f1f1f1;*/
    
/*    text-transform: capitalize;*/
/*}*/


.css_select, .css_input_search_box
{
    font-family: Quicksand;
    width: 48%;
    max-width: 200px;
/*    background-color:  transparent;*/
/*    border: 1px solid #d40055;*/
/*    color: #d40055;*/
/*    cursor: pointer;*/
/*    padding: 5px 0 5px 0;*/
/*    font-size: 102%;*/
/*    background-color: #fff;*/
    
/*
    background-color:  transparent;
    border: 1px solid silver;
*/
    padding: 5px;
/*    float: left; */
}

.css_option
{
/*    cursor: pointer;*/
/*     font-family: Quicksand;*/
/*    background-color: lightyellow;*/
    background-color: white;
}

/*
.css_search_match
{
    background-color: yellow;
}
*/


/*
.css_input_search_box
{
*/
/*    margin: 10px 0 10px 0;*/
/*
    padding: 5px;
    
    font-family: Quicksand;
    
    width: 48%;
    max-width: 200px;
*/
    
/*
    background-color:  transparent;
    border: 1px solid silver;
*/
/*    color: black;*/
/*    cursor: pointer;*/
/*    padding: 5px 0 5px 0;*/
/*    font-size: 100%;*/
/*    background-color: #fff;*/
/*    float: right;*/
/*}*/

/*
.css_input_search_box:hover, .css_input_search_box:focus,
css_select:hover,
css_select:focus
{
*/
/*
    background-color: lightyellow;
    border: 1px solid gray;
*/
/*    background-color: lightyellow;*/
/*}*/

.css_symbols_Table
{
    width: 100%;
    margin: auto;
/*    max-width: 900px;*/
    border: 1px solid #d40055;
    
/*    text-transform: lowercase;*/
    font-size: 110%;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    
}

.css_symbols_Table tr:nth-child(odd) {
    background-color: #f5f5f5;
}


.css_symbols_Table th
{
/*    background-image: linear-gradient(to bottom, #f5f5f5, #fff);*/
    background-color: #EEE;
/*    text-align: center;*/
/*    border-bottom: 1px solid #DDD;*/
      text-align: center;   
  padding: 12px;  
/*  font-size: 95%;*/
/*    position: absolute;*/
/*    width: auto;*/
    
}

.css_symbols_Table td
{
/*    background-color: #fff;*/
/*    text-align: center;*/
/*    border-top: 1px dashed silver;*/
/*    border-right: 1px dashed #d40055;*/
/*    padding-right: -5px;*/
    cursor: pointer;
    color: black;
/*    text-align: left;*/
/*    vertical-align: middle;*/
    
/*    Width: 100%;*/
/*    margin: auto;*/
/*    text-transform: lowercase;*/
    padding-left: 10px;
}

.css_symbols_Table tr
{
    text-transform:capitalize;
    text-align: left;
    font-size: 90%;
}

.css_symbols_Table td:hover
{
/*    background-color: #d40055;*/
/*    color: white;*/
    
/*    background-color: #EEE;*/
/*    background-image: linear-gradient(to bottom, white, #f5f5f5);*/
    color: #d40055;
/*    font-size: 150%;*/
}

.css_symbols_Table td:first-child 
{ 
    font-size: 80%;
    text-align: center;
    padding: 5px;
    color: #d40055; //;
    
    
/*
    -webkit-transition: 1s all;   
    -webkit-transition-delay: 1s; 
    -moz-transition: 1s all;   
    -moz-transition-delay: 1s; 
    -ms-transition: 1s all;   
    -ms-transition-delay: 1s; 
    -o-transition: 1s all;   
    -o-transition-delay: 1s; 
*/
/*
    transition: 0.5s all;   
    transition-delay: 0s;
*/
}


.css_symbols_Table td:first-child:hover
{
    
    font-size: 1300%;
    background-color: white;
    border: 1px solid #d40055;

    position: absolute;
/*    width: 90%;*/
    max-width: 900px;
    
    margin: auto;
    left: 3%;
    right: 3%;
    
/*    color: black;*/
    
    text-align: center;
    vertical-align: middle;
    
/*
   -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
*/
/*    transition-delay: 0s;*/
    
/*    padding: 0;*/
    padding: 10px;
    
}

.css_symbols_Table  tr td:first-child + td
{  
    font-size: 150%;
    padding: 10px;
    
     text-align: center;
}


.css_div_info
{
    float: right;
    font-size: 80%;
    color: gray;
    margin-bottom: 3px;
}