/*

      Data Card CSS

      [Modified: 30/08/2018]

*/

.tabular span
{
  text-overflow:ellipsis;
}

a.help:link , a.help:visited, a.help:active
{
  text-decoration: none;
  font-family: Arial,Helvetica,sans-serif; 
  font-weight: bold;
  font-size: 10pt; 
  white-space:nowrap;
  color: #ff4208;
}

a.help:hover
{
  text-decoration:underline;
}

i.fa.icon
{
  color: #ff4208;
}

i.fa.error
{
  color: Red;
  font-size: larger;
}

div.result
{
  padding:8px;
  font-family: Arial,Helvetica,sans-serif; 
  font-weight: bold;
  font-size: 10pt; 
  white-space:nowrap;
  color: #ff4208;
}

span.message
{
  font-family: Arial,Helvetica,sans-serif; 
  font-weight: bold;
  font-size: 10pt; 
  white-space:nowrap;
  color: #ff4208;
}

div.question
{
  padding:8px;
  font-family: Arial,Helvetica,sans-serif; 
  font-weight: bold;
  font-size: 10pt; 
  white-space:nowrap;
  color: #ff4208;
}

button.question
{
  padding:8px;
  font-family: Arial,Helvetica,sans-serif; 
  font-weight: bold;
  font-size: 10pt; 
  white-space:nowrap;
  pointer-events: none !important;
  cursor:pointer;
  color: #ff4208;
}

span.appidentity
{
  font-family: sans-serif;
  font-size: 6pt;
  color: silver;
}

span.uk-vehicle-registration-plate
{
  color:black;
  font-family: sans-serif;
  font-size: 12pt !important;
  font-weight:bold;
  background-color: yellow;
  border: 1px solid black;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
}

td.bounded , div.bounded
{
  border: 1px solid #ff4208 !important;
}

div.header
{
  cursor:default;
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 14pt; 
  text-align:center;
  white-space:nowrap;
  border: none;
  padding: 12px;
  background-color: #ff4208;
  color:white;
}

textarea
{
  font-family: Arial,Helvetica,sans-serif; 
} 

h1
{
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 18pt; 
  color: #ff4208;
}

table.data-card-stack
{
  border-collapse:collapse;
  min-width: 340px;
  width: 340px;
}

i.fa-spin
{
  visibility:hidden;
}

._busy i.fa-spin
{
  visibility:visible;
}

._busy i.fa-spin.__collapsed
{
  display:block;
}

table.data-card-stack table.data-card
{
  width:100%;
}

table.data-card
{
  border-collapse:collapse;
}

.data-card label
{
  color: #ff4208;
  white-space:nowrap;
}

.data-card
{
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 10pt; 
}

.data-card input , .data-card textarea , .data-card select { border:1px solid #ff4208; padding: 8px; }

.data-card input[readonly]
{
  border: 1px solid silver;
}


.__collapsed 
{
  display:none;
}

button.card-toggle
{
  white-space:nowrap;
  border: none;
  padding: 12px;
  background-color: #ff4208;
  color:white;
  cursor:pointer;
}

button.card-toggle:focus
{
  outline: none;
}

button.card-toggle i.fa
{
  vertical-align:middle;
  font-size:14pt;
}

button.card-action
{
  cursor: pointer;
  border-radius: 12px;
  background-color: transparent;
  border: 1px solid #ff4208;
  padding: 12px;
  font-size:8pt;
  color: #ff4208;
}

button.card-action.inverse
{
  border: 1px solid white;
  color: white;
}

button.card-action *
{
  pointer-events: none !important;
}

button.card-action:focus
{
  outline: none;
}

button.card-action:hover
{
  border-style: dashed;
}

button.card-action i.fa
{
  vertical-align:middle;
  background-color: transparent;
  font-size:13pt;
}

button.card-refresh
{
  cursor:pointer;
  font-size:14pt;
  background-color: transparent;
  border: 1px solid transparent;
  color: #ff4208;
}

button.card-refresh:hover
{
  border: 1px dashed #ff4208;
}

button.card-refresh:focus
{
  outline:none;
}

.data-card tbody.detail td i[data-error]
{
  visibility:hidden;
  font-size: 11pt;
  cursor: pointer; 
  float:right;
  color:red;
}

.data-card tbody.detail td i._error
{
  visibility:visible;
}

.data-card ._invalid
{
  border: solid 2px Red;
  color: Red;
}

.data-card div.http-service-error
{
  padding: 20px;
  vertical-align:middle;
}

.data-card div.http-service-error i.fa
{
  font-size: 18pt;
  color:red;
}

.data-card div.http-service-error span.http-status-code
{
  padding: 8px 4px 8px 14px;
  font-family: Arial,Helvetica,sans-serif; 
}

.data-card div.http-service-error span.http-status-text
{
  font-family: Arial,Helvetica,sans-serif; 
  padding:8px;
}

.data-card .tooltip
{
  position: relative;
  display: inline-block;
  padding-left:6px;
}

.data-card .tooltiptext
{
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 8pt !important;
  padding:40px;
  border: 1px solid silver;
  visibility:hidden;
  background-color: #ff4208;
  width: 200px;
  color: white;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 205%; 
}

.data-card .tooltip:hover .tooltiptext 
{
  visibility: visible;
}

.data-card thead
{
  font-size: 8pt;
  color:  #ff4208;
}
.data-card thead th
{
  text-align:left;
}

.data-card button._action
{
  cursor:pointer;
  vertical-align:middle;
  border: none;
  font-size:8pt;
  background-color: #ff4208;
  color: white;
}

.data-card button._action i.fa
{
  font-size:14pt;
}

span.brackets:not(:empty):before
{
  color:dimgrey;
  content: "("
}
span.brackets:not(:empty):after
{
  color:dimgrey;
  content: ")"
}

button.button-link
{
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 8px;
  font-size:8pt;
  color: #ff4208;
}
button.button-link:hover
{
  border: 1px dashed #ff4208;
  background-color: #ff4208;
  color: white;
}
button.button-link:focus
{
  outline: none;
}

span.feet:not(:empty):after
{
  vertical-align:super;
  font-size:smaller;
  content: "ft"
}

span.inches:not(:empty):after
{
  vertical-align:super;
  font-size:smaller;
  content: "in"
}