html 
{
 font-family: "roboto", "segoe ui";
 font-size: 16px;
 box-sizing: border-box;
}

body 
{
 margin: 0;
 padding: 0;
 background-color: #FAFAFA; 
}

.clearfix:before,
.clearfix:after 
{
 content: "";
 display: table;
 clear: both;
}
   
.container 
{
 position: relative;
 padding-left: 16px;
 padding-right: 16px;
 margin-left: auto;
 margin-right: auto;
}

.row 
{
 margin-left: -16px;
 margin-right: -16px;
}

@media (min-width: 576px) 
{
 .container 
 {
  width: 540px;
  max-width: 100%;
 }
}

@media (min-width: 768px)
{
 .container
 {
  width: 720px;
  max-width: 100%;
 }
}

@media (min-width: 992px)
{
 .container
 {
  width: 960px;
  max-width: 100%;
 }
}

@media (min-width: 1200px)
{
 .container 
 {
  width: 1140px;
  max-width: 100%;
 }
}

.flex 
{
 display: flex;
}

.flex-wrap 
{
 flex-wrap: wrap;
}

.flex-nowrap 
{
 flex-wrap: nowrap;
}

.flex-wrap-reverse 
{
 flex-wrap: wrap-reverse;
}

.flex-row 
{
 flex-direction: row;
}

.flex-column 
{
 flex-direction: column;
}

.flex-wrap-row 
{
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
}

.flex-wrap-column 
{
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
}

.flex-nowrap-row 
{
 display: flex;
 flex-wrap: nowrap;
 flex-direction: row;
}

.flex-nowrap-column 
{
 display: flex;
 flex-wrap: nowrap;
 flex-direction: column;
}

.flex-wrap-reverse-row 
{
 display: flex;
 flex-wrap: wrap-reverse;
 flex-direction: row;
}

.flex-wrap-reverse-column 
{
 display: flex;
 flex-wrap: wrap-reverse;
 flex-direction: column;
}

.flex-start 
{
 justify-content: flex-start;
}

.flex-end 
{
 justify-content: flex-end;
}

.flex-centre 
{
 justify-content: center;
}

.flex-space-between 
{
 justify-content: space-between;
}

.flex-space-around 
{
 justify-content: space-around;
}

.flex-centre-both 
{
 align-items: center;
 justify-content: center;
}

.flex-1 
{
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis:auto;
}

nav ul 
{
 list-style: none;
 margin: 0;
 padding: 0;
}

nav li > a 
{
 text-decoration: none;
}

table.details td 
{
 border-radius: 0px !important;
 padding: 4px 8px !important;
}

table.details thead th 
{
 background-color: white !important;
 border-bottom: 1px solid rgb(77, 183, 227) !important;
 padding: 4px 8px !important;
}

table.details tbody tr:nth-of-type(2n+1) 
{
 background: #f5f5f5;
}

table.details tbody tr:nth-of-type(2n+2) 
{
 background: #fff;
}

.td-text-right
{
 text-align: right;
}

.td-text-left
{
 text-align: left;
}

.td-text-centre
{
 text-align: center;
}



 #idcard 
 {
  width: 324px;
  height: 204px;
  background-color: #fff;
  border: 0px solid black;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0, 0.05);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 }

 .section-header 
 {
  margin: 0.5rem 0;
  background-color: #C0C0C0;
  font-size: 0.85rem;
  color: #fff;
  font-weight: 500;
  padding: 0.5rem 1rem;
 }

.card 
{
 display: flex;
 flex-direction: column;
 margin-bottom: 40px;
 width: 100%;
 max-width: 100%;
}


@media (min-width: 576px) 
{
 .card 
 {
  width: 100%;
  max-width: 100%
 }
}

@media (min-width: 992px)
{
 .card 
 {
  width: 50%;
  max-width: 50%
 }
}

.approved-inspector {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    text-align: center;
    border: none;
    font-family: Arial, sans-serif;
}