@font-face {
  font-family: "Century Gothic";
  src: url("GOTHIC.TTF");
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: "Century Gothic";
  src: url("GOTHICB.TTF");
  font-weight:bold;
  font-style:normal;
}

@font-face {
  font-family: "Century Gothic";
  src: url("GOTHICBI.TTF");
  font-weight:bold;
  font-style:italic;
}

@font-face {
  font-family: "Century Gothic";
  src: url("GOTHICI.TTF");
  font-weight:normal;
  font-style:italic;
}

* {
  font-family:'Century Gothic', arial, sans-serif;
  
  font-size: 12pt;
}  

body {
  margin:0;
  padding:0;
  min-width:410px
}

table {
  border:none;
  border-collapse:collapse;
}

caption {
  background-color:#42e2ff;
  padding-top:5px;
}




td, th {
  padding:5px;
} 

td.num, tr.num {
  text-align:right;
  padding-right:5px;
}

td.items, th.items {
  min-width:20px;
  background:#aaa !important;
  display:none !important;
}


td.center {
  text-align:center;
}

thead tr {
  background-color:#42e2ff;
}

tbody tr {
  border-bottom:3px solid #ddd;
}

tbody tr:nth-child(2n) td {
  background:none;
}

tbody tr:nth-child(2n+1) td {
  background:rgba(65,128,255, 0.03);
}

tbody tr:hover {
  background:rgba(65,128,255, 0.1);
}

td.lib {
  background-color:#ccc !important;
  width:20%;
  max-width:200px;
  text-align:right;
  padding:5px;
  display:none;
}

td.val {
  padding:5px;
  background-color:#fff !important;
}

#header {
  background-image:url('fuel_pump.svg');
  background-repeat:no-repeat;
  background-position:20px 5px;
  background-size:120px 120px;
  width:95%;
  height:120px;
  margin:auto;
  margin-bottom:20px;
  text-align:right;
  margin-right:15px;
}

#liste {
  width:100%;
  min-width:380px;
  margin:auto;
}

#login {
  width:400px;
  margin:auto;
}

#login table {
  margin-top:100px;
  width:100%;
  background:#55f8ff44;
}

#login caption {
  background-color:#42e2ff;
  font-size:18pt;
  height:50px;
  padding-top:18px;
}  

#login tr, #login tr:hover,
.form tr, .form tr:hover {
  border:none;
}

#login td, #login tr:hover,
.form tr, .form tr:hover {
  height:40px;
  background:none;
} 

.hidden {
  display:none;
}

.btn {
  background-color:#55f8ff;
  background-color:#48b2ff;
  background-repeat:no-repeat;
  background-position:5px 5px;
  background-size: 32px 32px;
  border:none;
  height:42px;
  width:42px;
  padding:5px;
  margin-left:1px;
  margin-right:1px;
  border-radius:5px;
  opacity:0.2;
}

a.btn {
  display:inline-block;
  padding-left:42px;
  padding-top:10px;
  width:fit-content;
  height:30px;
  color:#000;
  opacity:0.5;
  text-decoration:none;
}

.menu .btn {
  background-position:5px 5px;
  background-size: 50px 50px;
  border:none;
  height:62px;
  width:62px;
  padding:5px;
  margin-left:1px;
  margin-right:1px;
  border-radius:15px;
  opacity:0.2;
}

caption .btn {
  background-color: #1295c2;
  color:#fff;
  font-size: 18pt;
  line-height: 16pt;
  opacity: 1;
  padding: 2px;
}

caption .btn:hover {
  background-color: #16a3d4;
}

caption .btn:disabled, caption .btn:disabled:hover {
  background-color: #16a3d4;
  /*color:#ccc;*/
  opacity:0.5;
}

tr:hover .btn, .menu:hover .btn {
  opacity:0.5;
}

tr:hover .btn:hover, .menu:hover .btn:hover {
  opacity:1;
}


.btn_site {
  background-image:url('site.svg');
  background-size: 50px 50px !important;
  background-position:10px 5px !important;
  
  width:200px !important;
  padding-left:75px !important;
}


.btn_new {
  background-image:url('new.svg');
}

.btn_list {
  background-image:url('list.svg');
}

.btn_logout {
  background-image:url('logout.svg');
}

.btn_settings {
  background-image:url('settings.svg');
  background-size: 45px 45px !important;
  background-position:9px 9px !important;
}

.btn_gonext {
  background-image:url('next_black.svg');
}

.btn_user {
  background-image:url('next_black.svg');
}

.btn_user_add {
  background-image:url('user.svg'), url('add.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_user_edit {
  background-image:url('user.svg'), url('pencil.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_site {
  background-image:url('site.svg');
}

.btn_site_add {
  background-image:url('site.svg'), url('add.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_site_edit {
  background-image:url('site.svg'), url('pencil.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_edit {
  background-image:url('edit.svg');
}

.btn_history {
  background-image:url('history.svg');
}

.btn_entr {
  background-image:url('tools.svg'), url('add.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_entr_edit {
  background-image:url('tools.svg'), url('pencil.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_pj_add {
  background-image:url('pj.svg'), url('add.svg');
  background-size: 30px 30px , 20px 20px !important;
  background-position:2px 2px, bottom right !important;
}

.btn_pj {
  background-image:url('pj.svg');
}


.btn_delete {
  background-image:url(delete.svg);
  color:#ff0000;
}

.btn_first {
  background-image:url('first.svg');
}

.btn_previous {
  background-image:url('previous.svg');
}

.btn_next {
  background-image:url('next.svg');
}

.btn_last {
  background-image:url('last.svg');
}

.btn_close {
  background-image:url('close.svg');
}

.btn_see {
  background-image:url('see.svg');
  display:inline-block;
  padding-left:42px;
  padding-top:10px;
  width:fit-content;
  height:42px;
  color:#000;
  opacity:0.5;
  text-decoration:none;
}



ul.menu {
  width:100%;
  padding:0;
  padding-top: 10px;
  margin:0;
  
}
  
ul.menu li {
  display:inline-block;
  list-style:none;
  padding:0;
  margin:0;
  margin-bottom:4px;
}

.form input[type=text], .form textarea {
  width:98%;
}  

.small {
  display:block;
  width:100%;

}



.due {
  margin:0;
  padding:5px;
  border:yellow solid 5px;
  border-radius:10px;
  font-weight:bold;
  background-color:yellow;
}

.overdue {
  margin:0;
  padding:5px;
  border:orange solid 5px;
  border-radius:10px;
  font-weight:bold;
  background-color:orange;
}

.long_overdue {
  margin:0;
  padding:5px;
  border:red solid 5px;
  border-radius:10px;
  font-weight:bold;
  background-color:red;
  color:white;
}

.uptodate {
  color:green;
}

#check_mdp {
  display:inline-block;
  height:20px;
  width:20px;
  background-size:20px;
  background-repeat:no-repeat;
  background-position:middle right;
  margin-left:20px;
}

.mdp_ok {
  background-image : url(ok.svg)
}

.mdp_nok {
  background-image : url(nok.svg)
}

input:invalid {
  background-color:rgba(255, 0, 0, 0.5);
  color: #fff;
}

#visu_bg {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgba(0, 0, 0, 0.5);
}

#close_visu {
  position:fixed;
  z-index:9999;
  top:5px;
  right:5px;
  opacity:0.5;
}

#close_visu:hover {
  opacity:1;
}

#visu_bg #visu {
  position:fixed;
  left:5%;
  width:90%;
  margin:auto;
  opacity:1;
  z-index:999;
}

#visu_img {
  width:100%;
  opacity:1;
}