/*

      Data Card CSS

      [Modified: 27/03/2019]

*/

/*
  Mozilla being ugly...
*/
button::-moz-focus-inner 
{
  border: 0;
}

div.not-implemeted
{
  font: 15px sans-serif;
  color: black;
}

span.super
{
  vertical-align:super;
  font-size:smaller;
}

span.note
{
  text-overflow: ellipsis;
  overflow:hidden;
}

.tabular span
{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
}

tr.detail th
{
  padding:6px;
}

tr.header th
{
  border: 1px solid #ff4208;
  padding:8px;
  font-size: 10pt;
  font-weight:normal;
  background-color: #ff4208;
  color: white;
}

tr.header.center th
{
  text-align:center;
}

tr.header.group th
{
  background-color: transparent;
  color: #ff4208;
}

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

tr.record td
{
  border: 1px solid #ff4208;
  padding:8px;
}

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;
}

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

th.registration
{
  vertical-align:middle;
  font-size: x-large;
}

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

div.section-header
{
  padding: 10px;
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 14pt; 
  background-color: #ff4208;
  color: white;
}

div.card-header
{
  padding: 10px;
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 11pt; 
  background-color: #ff4208;
  color: white;
}

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

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

i.fa-spin
{
  visibility:hidden;
}

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

td.indicator i.fa.icon
{
  visibility:hidden;
  cursor:default;
}

tr.__selected td.indicator i.fa.icon
{
  visibility:visible;
}

tr.__selected td.indicator i.fa.icon.inverse
{
  color:white;
  background-color: #ff4208;
  padding: 6px;
}

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

div.section
{
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 18pt; 
  vertical-align:middle;
  white-space:nowrap;
  border: none;
  color: #ff4208;
}

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

.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] , .data-card textarea[readonly] { border:1px dashed #ff4208; }

.data-card input[readonly]:focus , .data-card textarea[readonly]:focus
{
  outline: none;
}

.data-card caption
{
  /*
  white-space:nowrap;
  border: none;
  padding: 12px;
  color:white;
  cursor:default;
  */
}

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

button.card-action.navigation
{
  width: 120px !important;
}

button.card-action.navigation i.fa-arrow-circle-o-right
{
  visibility:hidden;
}

button.card-action.navigation:hover i.fa-arrow-circle-o-right
{
  visibility:visible;
}

button.card-action.navigation.__current
{
  background-color: #ff4208;
  color:white;
}

button.card-action.navigation.__current i.fa-arrow-circle-o-right
{
  visibility:visible;
}

button.card-action.navigation span
{
  display: inline-block;
}

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 *
{
  pointer-events: none !important;
}

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


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;
}

div[data-error]
{
  display:none;
}
div[data-error]._error
{
  display:block;
}

.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; 
  border: 1px solid silver;
  visibility:hidden;
  background-color: white;
  color: #ff4208;
  padding: 4px 0;
  padding-right: 8px;
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 10%;
}
.data-card .tooltiptext:before
{
  padding: 4px;
  color: red;
  font-family: FontAwesome;
  content: "\f071 ";
}
/*
.data-card .tooltiptext:after
{
  padding: 4px;
  color: red;
  font-family: FontAwesome;
  content: "\f12a ";
}
*/

.data-card .tooltiptext .inverse
{
  border: 1px solid black;
  background-color: white;
  color: #ff4208;
}

.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;
}

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


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

span.link:not(:empty)
{
  cursor: pointer;
  border: 1px solid transparent;
  padding: 2px;
  color: #ff4208;
}
span.link:not(:empty):hover
{
  border: 1px dashed #ff4208;
}
span.link:not(:empty):before 
{
  font-family: FontAwesome;
  content: "\f0C1\00a0";
}

span.pound:not(:empty):before
{
  content: "£"
}

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

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

span[data-bit="1"]:before
{
  font-family: FontAwesome;
  content: "\00a0\f00C\00a0";
}

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"
}


/*
span.__placeholder:empty:before
{
  font-family: FontAwesome;
  content: "\00a0\f111\00a0";
}
*/