.disabled {
    border: 1px solid #888;
    background-color: #ddd;
    color: #333;
}

.numeric_r {
    text-align: right;
}
.value_green {
    color:#393;
}
.value_ok {
    color:#393;
    background-color:#CFC;
    border:1px solid #494;
}
.value_nok {
    color:#933;
    background-color:#FCC;
    border:1px solid #944;
}
.value_pending {
    color:#666;
    background-color:#DDE;
    border:1px solid #999;
}
.nowrap {
    white-space:nowrap;
}
/* MESSAGES & ERRORS */

ul.messagelist {
    padding-inline-start: 5px;
}

ul.messagelist li {
    font-size: 12pt;
    display: block;
    padding: 4px 5px 4px 25px;
    border-bottom: 1px solid #ddd;
    color: #666;

    background: #cfc url(/static/admin/img/icon-yes.svg) no-repeat 0.5em 0.5em;
}

ul.messagelist li.warning{
    background: #ffc url(/static/admin/img/icon-alert.svg) no-repeat 0.5em 0.5em;
}

ul.messagelist li.error{
    background: #fcc url(/static/admin/img/icon-no.svg) no-repeat 0.5em 0.5em;
}        

/* FORMS */

input, select, textarea {
    background-color: #fffefe;
    border:1px solid #aaa;
    color: black;
    padding:2px;
    line-height:1em;
}
input {
    /* fix chrome */
    padding-top:4px;
    padding-bottom:2px;
}
input:disabled {
    border:1px solid #aaa;
    background-color: #ddd;
    color: #555;
}

.inline p {
    display: inline;
    vertical-align: baseline;
    /*float:left;*/
}
div.lineform ul {
    list-style: none;
    padding-left: 1em;
}
div.lineform ul.inl li {
    margin-bottom: 1px;
    display:inline;
}

.lineform ul {
    display: table;
}

ul.errorlist {
    display:block !important;
}

ul.errorlist li {
    border-bottom: 1px solid #Fdd;
    color:red;
}
.lineform ul li.errorlist {
    color:red;
}

.lineform ul li {
    display: table-row;
    vertical-align:top;
    white-space: nowrap;
}

.lineform ul li label, .lineform ul li input {
    display: table-cell;
    vertical-align:top;
}

div.lineform ul.inl li label, input{
    vertical-align:baseline;
}

.label100 ul li label {
    width:100px;
}
.label120 ul li label {
    width:120px;
}
.label150 ul li label {
    width:150px;
}
.ulnopadding ul {
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;

}

.lineform li input:read-write, .lineform li input:disabled {
    min-width: 150px;
    width:20em;
}
.lineform li input[type=checkbox], .lineform li input[type=radio] {
    width: 15px; height:15px;
    margin-top: 3px;
}
.fill150 li select, .fill150 li input[type=text], .fill150 li textarea {
    min-width: 150px;
    width:20em;
}
.fill100pc input[type=text],.fill100pc textarea,.fill100pc select {
    width:100% !important;
}
input.fill100pc {
    width:100%;
}
select.fill150 {
    min-width: 150px;
    width:20em;
}
div.lineform ul li span.formlike {
    display: inline-block;
    min-width: 100px;
}
.lineform li div {
    display: table-cell;
    border:1px solid #ddd;
    width:20em;
}
.boxed {
    border:1px solid #ddd;
    padding: 1px;
}

/* PAGINATION */
.pagination li {
    display: inline-block;
}

.pagination li a,span { 
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination li.active,a.active {
    border: 1px solid black;
    color: white;
}
.pagination li.inactive {
    font-color: #999;
}
.pagination li.disabled {
    font-color: #999;
    border:0;
}

.pagination a:hover:not(.active) {background-color: #eee;}


.ui-autocomplete-loading {
    background: white url("/static/images/ajax-loader.gif") right center
    no-repeat;
}
input.input-dyn {
    background-color: #fffffa;
}

input.input-dyn-result-ok {
    background: white url("/static/images/ok.png") right center no-repeat;
    border: 1px solid green;
    background-color: #fcfffc;
}

input.input-dyn-result-nok {
    background: white url("/static/images/nok.png") right center no-repeat;
    border: 1px solid red;
    background-color: #fffbfb;
}

/* W3.css overload*/
html,body{font-family:Roboto,Verdana,sans-serif;font-size:14px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}

h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Roboto,Arial,sans-serif,sans;font-weight:400;margin:5px 0}.w3-wide{letter-spacing:4px}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:4px 8px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-container,.w3-panel{padding:0.01em 8px !important}.w3-panel{margin-top:8px !important;margin-bottom:8px !important}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:4px 4px;display:table-cell;text-align:left;vertical-align:middle}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-tiny{font-size:9px!important}.w3-small{font-size:10px!important}.w3-medium{font-size:12px!important}.w3-large{font-size:15px!important}

.page-title, h3 {
    font-size:18px;
    font-weight:bold;
}
.page-title {
    padding:2px;
}

/* https://css-tricks.com/triangle-breadcrumbs/ */
.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 14px Sans-Serif;
  padding: 0px;
}
.breadcrumb li {
  float: left;
}
.breadcrumb li a {
  color: gray;
  text-decoration: none;
  padding: 5px 0 5px 45px;
  background: lightgray;   /* fallback color */
  /* background: hsla(34,85%,35%,1);*/
  position: relative;
  display: block;
  float: left;
}
.breadcrumb li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid lightgray;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}
.breadcrumb li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li.bc_green a {
    background: #6CBB3C;
    color: white;
}
.breadcrumb li.bc_green a::after {
     /* background: green; */
    border-left: 30px solid #6CBB3C;
}

.breadcrumb li.bc_orange a {
    background: #ff9800;
    color: white;
}
.breadcrumb li.bc_orange a::after {
     /* background: green; */
    border-left: 30px solid #ff9800;
}

.breadcrumb li.bc_red a {
    background: #E55B3C;
    color: white;
}
.breadcrumb li.bc_red a::after {
     /* background: green; */
    border-left: 30px solid #E55B3C;
}

div.error {
    color:red;
}