.boldtable30
{
font-variant:small-caps;   
font-family:sans-serif;
font-size:30pt;
color:black;
}

.boldtable26
{
font-variant:small-caps;   
font-family:sans-serif;
font-size:26pt;
color:black;
}

.boldtable24
{
font-variant:small-caps;    
font-family:sans-serif;
font-size:24pt;
color:black;
}

.boldtable20
{
font-variant:small-caps;    
font-family:sans-serif;
font-size:20pt;
color:black;
}

.boldtable16
{
font-variant:small-caps; 
font-family:sans-serif;
font-size:16pt;
color:black;
}

.boldtable12
{
font-variant:small-caps; 
font-family:sans-serif;
font-size:12pt;
color:black;
}

table#sortable
{
  font-family: sans-serif;
  font-size:  10pt;
  background-color: #fdf5e6;
  border-collapse: collapse;
}

table#sortable tr:first-child
{
  font-size: 11pt;
  font-weight: bold;
  border-bottom: 2px solid #5e5e5e;
  cursor: pointer;
}


table#sortable tr:nth-child(n+2)
{
  border-bottom: thin solid #4b4b4b;
}



.table10
{
 
 font-family: sans-serif;
 font-size:  10pt;
 color: black;
 background-color: #fdf5e6;
 border-style: inset;
 border-width: 3px;
 border-color: ghostwhite;
 
}

.table10_noborder
{
 font-family: sans-serif;
 font-size:  10pt;
 color: black;
 background-color: #fdf5e6;
 
}

.table12
{
 font-family:sans-serif;
 font-size:12pt;
 color:black;
 background-color:#fdf5e6;
 border-style: inset;
 border-width: 3px;
 border-color: ghostwhite;
}

.table12_noborder
{
 font-family:sans-serif;
 font-size:12pt;
 color:black;
 background-color:#fdf5e6;
}

.table16_noborder
{
 font-variant:small-caps;
 font-family:sans-serif;
 font-size:16pt;
 color:black;
}

.table16
{
 font-variant:small-caps;
 font-family:sans-serif;
 font-size:16pt;
 color:black;
 background-color:#fdf5e6;
 border-style: inset;
 border-width: 3px;
 border-color: ghostwhite;
 
 }
.table20
{
 font-family:sans-serif;
 font-size:20pt;
 color:black;
 background-color:#fdf5e6;
 border-style: inset;
 border-width: 3px;
 border-color: ghostwhite;
}

.breadcrumb
{
 font-family: sans-serif;
 font-size: 10pt;
 color: black;
 background-color: #fdf5e6;
 border-style: inset;
 border-width: 3px;
 border-color: ghostwhite;
}

.big-button
{
  font-variant:small-caps;
  font-family:sans-serif;
  font-size:20pt;
  color:Blue;
  font-weight:bolder;
  background-color: lightsteelblue;
  
}

.big-button-gray
{
  font-variant:small-caps;
  font-family:sans-serif;
  font-size:20pt;
  color:gray;
  font-weight:bolder;
  background-color: lightgrey;
  
}

.bigger-button
{
  font-variant:small-caps;
  font-family:sans-serif;
  color:blue;
  font-weight:bolder;
  background-color: lightsteelblue;
  font-size:14pt;
}

.bigger-button-gray
{
  font-variant:small-caps;
  font-family:sans-serif;
  color:gray;
  font-weight:bolder;
  background-color: lightgrey;
  font-size:14pt;
}

.button
{
    font-family:sans-serif;
    color:blue;
    font-weight: bolder;
    background-color: lightsteelblue;
    font-size:10pt;
}

.button-gray
{
    font-family:sans-serif;
    color:gray;
    font-weight: bolder;
    background-color: lightgrey;
    font-size:10pt;
}

.my-password-field {
  font-family: text-security-disc;
  /* Use -webkit-text-security if the browser supports it */
  -webkit-text-security: disc;
}

.info {
   right: 30%;
   left: 30%;
   height: 10%;
   position: fixed;
}

.rid_list {
   margin: 20%;
   overflow-y: auto;
   bottom: 0;
}

/*----------- popup CSS code -----------*/

 /* Popup container */
 .popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
} 
/*----------- end popup -----------*/

 /*----------------- Dropdown Button ------------------*/
 .dropbtn {
  height:50px;
  width: max-content;
  justify-content: center;
  align-items: center;
  background-color: #fdf5e6;
  color: black;
  /*padding: 6px;*/
  font-size: 16px;
  font-family: sans-serif;
  font-weight: bold;
  border: none;
  text-decoration: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  overflow:auto;
  text-wrap:nowrap;
  display: none;
  position: absolute;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 13px;
  background-color: #f1f1f1;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 12px;
  justify-content: center;
  align-content: center;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #d6cab4;} 



 /* Define a CSS animation named "blink" */
 @keyframes blink {

  0%{
      background-color: #ff0000;
      /* Second color - red */
  }
  100% {
      background-color: #fdf5e6;
      /* First color - FC Tan */
  }
}

/* Apply the "blink" animation to 
elements with class "blinking-effect" */
.dropbtn-blink {
  height:50px;
  width: max-content;
  justify-content: center;
  align-items: center;
  color: white;
  background-color:#fdf5e6;
  /*padding: 6px;*/
  font-size: 16px;
  font-family: sans-serif;
  font-weight: bold;
  border: none;
  animation: blink 10s steps(2,end) infinite;
  /* The animation will run indefinitely */
}