.table-container
{
    margin-bottom:50px;
    min-height:0%;                      /* Works around a (horrible) bug in IE9. This might not be necessary anymore, but keep just in case!*/ 
} 

@media screen and (max-width: 992px)
{
    .table-container {overflow-x:auto;}             /* For tablets: overflow-x so that the table has a scroll bar if the table is too big for the screen*/   
}

.large-table
{
  margin-top:10px;
  border-collapse: collapse;
  border-spacing:0;
  width:100%;
  color:#404040;
}

@media screen and (max-width: 1185px)
{
    .large-table {width: 1065px;}
}

.large-table .header-row
{
    height:60px;
    background-color:#54d2f8;
    font-size:16px;
    font-weight:bold;
}

.large-table tr
{
    height:48px;
    background-color:#cef2fd;
}

.large-table td:first-child {padding-left:5px;}

.large-table tr:nth-child(even) {background-color:#f2f2f2;}
  
.large-table tr:not(.header-row):hover {background-color:#d9d9d9;}

.large-table .table-icon
{
    padding-left:5px;
    padding-right:5px;
}

.large-table .header-row td:first-child {border-color: #54d2f8 !important;}         /*If the first row is defined to be in the class "header-row" (which most of the time it is), then the colors need to change.*/
.large-table .header-row td:last-child {border-color: #54d2f8 !important;}


.large-table tr:first-child { border-bottom:1px solid #cef2fd;}                     /*Specifying different styles between a header-row and a normal row at the top if there is no header-row*/
.large-table .header-row { border-bottom:1px solid #54d2f8 !important;}

.large-table tr:first-child:not(.header-row):hover {border-color: #d9d9d9;}
.large-table tr:first-child:not(.header-row):hover td {border-color: #d9d9d9;}


.large-table *
{
    transition: background-color 0.3s ease-out;
    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
}