html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Arial Narrow", sans-serif;
  font-size: 14px;
  text-align: center;
  background: #A5CF38;
}

header {
  width: 100%;
  margin:0;
  padding:0;
}

div.bottom {
  width: 100%;
  padding: 10px;
  margin:0;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.anchor {
  display: block;
  visibility: hidden;
  position: relative;
  top: -70px;
}

#wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

#cont_wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  padding-top: 60px;
}

/* bootstrap hacks and additions */
.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 14px/1 "Arial Narrow", sans-serif;
}

.text-right {
  text-align: right !important;
}

.fullwidth {
  width: 100% !important;
}

.nintywidth {
  width: 90% !important;
}

/*--------------------------------------------
              Navigation
----------------------------------------------*/
.navbar {
  padding: 0 !important;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  height: 60px !important;
  background: #ffffff;
  margin: 0;
}

.nav-link {
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: semibold;
  height: 60px !important;
  padding: 15px 30px !important;
  color: #000000 !important;
  text-transform: uppercase;
  font-style: italic !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: #606060 !important;
}

.navbar-toggler {
  border: 1px solid #000000 !important;
  border-radius: 0;
  margin: 10px 20px !important;
}

.navbar-toggler-icon {
  background: none !important;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.navbar-toggler-icon i {
  color: #000000;
  display: block;
}

.navbar-nav {
  background: #ffffff;
}

.navbar-brand {
  margin-left: 20px;
  height: 48px;
}

.navbar-brand img{
  max-height: 100% !important;
  height: 100% !important;
}


/*   generic    */
.error {
  width: 100%;
  margin: 5px 0;
  padding: 2px 0;
  text-align: center;
  color: #c00000;
}

.error_black {
  color: black;
}

.success {
  width: 100%;
  margin: 5px 0;
  padding: 2px 0;
  text-align: center;
  color: #006000;
}

.message {
  width: 100%;
  margin: 5px 0;
  padding: 2px 0;
  text-align: center;
}

.error_div {
  padding: 5px;
  margin: 0 auto 15px auto;
  background-color: #c00000;
  color: #ffff00;
  font-size: 18px;
  font-weight: bold;
}

.message_div {
  padding: 5px;
  margin: 0 auto 15px auto;
  background-color: #00a000;
  color: #ffff00;
  font-size: 18px;
  font-weight: bold;
}

h1 {
  display:block;
  width:100%;
  text-align:center;
  font-size: 24px;
  margin: 15px 0 10px 0;
}

h2 {
  display:block;
  width:100%;
  text-align:center;
  font-size: 20px;
  margin: 5px 0 10px 0;
}

h3 {
  display:block;
  width:100%;
  text-align:center;
  font-size:18px;
  margin: 5px 0 10px 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.hidden_link {
  text-decoration: line-through;
}

a.hidden_link:hover {
  text-decoration: line-through;
}

a.subhead {
  display: block;
  color: #303000;
  width: 100%;
  margin: 0;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
}

div.subhead {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

div.subhead a{
  display: inline-block;
  color: #303000;
  margin: 0 15px;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
}

div.subhead a {
  display: inline-block;
  padding: 3px;
  font-size: 16px;
}

div.cb {
  width: 100%;
  height: 0.1px;
  clear: both;
  font-size: 0.1px;
}

img.pdf_preview {
  margin: 15px 0;
  width: 100%;
}

.wide {
  width: 100% !important;
}

.narrow-inline {
  width: auto;
  display: inline-block;
}


/*   generic form   */
input, select {
  border-radius: 0 !important;
}

input:not([type=checkbox]){
  border: 1px solid #a0a0a0;
  margin: 0 0 5px 0;
  font-size: 16px;
  padding: 2px 5px;
}

select{
  border: 1px solid #a0a0a0;
  border-radius: 0;
  margin: 0 0 5px 0;
  font-size: 16px;
  padding: 2px 5px;
  width: 100%;
}

select.narrow {
  width: auto;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #a0a0a0;
  margin: 0 0 5px 0;
  font-size: 16px;
  padding: 2px 5px;
  border-radius: 0;
  resize: none;
}

#scan input {
  padding: 5px;
  text-align: center;
  font-size:20px;
}

form.admin_form {
  width: 100%;
  background-color: #ffffff;
}

.form_col {
  padding: 5px 20px;
}

/*   navigation    */
img.home_link {
  max-width: 120px;
  max-height: 70px;
  width: 100%;
  height: 100%;
}

.dropdown-menu {
  border-radius: 0;
  margin-top: 8px;
}

/*    login     */
#login_form {
  font-size: 18px;
}

#login_form table {
  text-align: center;
  width: auto;
  margin: 0 auto;
}

#login_form table td {
  max-width: 200px;
  padding: 3px;
}

#login_form table th {
  max-width: 150px;
  padding: 3px;
}

#login_form input {
  max-width: 150px;
  padding: 3px;
}


/*   tables     */
table.list {
  width: 100%;
  margin: 0 0 1% 0;
  border: 1px solid #d0d0d0;
  border-collapse: collapse;
  font-size: 14px;
  background-color: #f0f0f0;
}

table.list th{
  border: 1px solid #d0d0d0;
  margin: 0;
  padding: 3px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
}

table.list th img{
  max-width: 20px !important;
  max-height: 24px !important;
}

table.list td{
  border: 1px solid #d0d0d0;
  margin: 0;
  padding: 3px;
  cursor: move;
}

table.list td a{
  color: #303030;
}

table.list td a:hover{
  color: #606060;
}

table.nonsort td{
  cursor:auto !important;
}

table.overview {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  border: 2px solid #808080;
}

table.overview th {
  margin: 0;
  padding: 3px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #808080;
}

table.overview td {
  margin: 0;
  padding: 3px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #808080;
}

table.overview td.left_separator {
  border-left: 2px solid #808080;
}

table.overview th.left_separator {
  border-left: 2px solid #808080;
}

table.overview td.right_separator {
  border-right: 2px solid #808080;
}

table.overview th.right_separator {
  border-right: 2px solid #808080;
}

tr.top_separator th {
  border-top: 2px solid #808080 !important;
}

tr.top_separator td {
  border-top: 2px solid #808080 !important;
}

tr.bottom_separator th {
  border-bottom: 2px solid #808080 !important;
}

tr.bottom_separator td {
  border-bottom: 2px solid #808080 !important;
}

th.top_separator {
  border-top: 2px solid #808080 !important;
}

td.top_separator {
  border-top: 2px solid #808080 !important;
}

th.bottom_separator {
  border-bottom: 2px solid #808080 !important;
}

td.bottom_separator {
  border-bottom: 2px solid #808080 !important;
}

tr.table_income {
  background-color: #e0ffe0;
}

tr.table_costs {
  background-color: #ffe0e0;
}

tr.table_header {
  background-color: #e0e0e0;
}

th.table_plus {
  background-color: #00ff00;
}

th.table_minus {
  background-color: #ff6060;
}


table.pricelist4 {
  width:100%;
  margin: 10px 0;
  border-collapse:collapse;
  border:1px solid black;
  font-size:13px;
  background-color: #ffffff;
}

table.pricelist4 th{
  text-align: center;
  line-height:21px;
  vertical-align:top;
  border:2px solid black;
}

table.pricelist4 th.first{
  width:20% !important;
}

table.pricelist4 td{
  text-align: center;
  line-height:21px;
  vertical-align:top;
  border:1px solid black;
}

input.pricelist4_input {
  width: 100% !important;
  margin: 0;
  padding: 2px;
  text-align: center;
}

input.send {
  margin: 15px 5px;
  padding: 2px 15px;
  
}

/*  items    */
div.main_cat_break {
  width: 100%;
  margin: 5px 0;
  padding: 5px;
  width: 100%;
  background-color: #e0e0e0;
  color: #000000;
  text-align: left;
  font-weight: 600;
}

div.cat_break {
  width: 100%;
  margin: 5px 0;
  padding: 3px 10px;
  width: 100%;
  background-color: #e0e0e0;
  color: #000000;
  text-align: left;
  font-weight: 300;
}



#images ul{
  list-style-type:none;
  display:table;
  width:100%;
}

#images ul li{
  display:inline-block;
  width:15%;
  height:150px;
  text-align:center;
  border:1px solid #e0e0e0;
  padding:1%;
  margin:1%;
  background:#ffffff;
  cursor:move;
}

#images ul li div{
  width:100%;
  height:90%;
  margin:0;
  padding:0;
}

#images ul li div img{
  max-width:100%;
  max-height:100%;
}

#images ul li a{
  display:block;
  color: #303030;
  width:100%;
  height:8%;
  margin:0;
  padding:1% 0;
}



/*--------------------------------------------
              Item table
----------------------------------------------*/
.table_large_image_wrapper {
  position: absolute;
  left: -99999px;
  top: -100px;
  width: 300px;
  max-width: 90vw;
  max-height: 90vh;
}

.table_large_image_wrapper img{
  max-width:100%; 
}


.table_thumbnail:hover + .table_large_image_wrapper {
  left: 100px;
}


.table_large_image {
  border-radius: 4px;
  box-shadow: 1px 1px 3px 3px rgba(127, 127, 127, 0.15);
}

.barcode_preview {
  margin: 15px auto 5px auto;
}

.barcode_preview_div {
  display: inline-block;
  width: 300px;
}

.table_barcode {
  margin: 0 auto 2px auto;
}

td.active_rental {
  background-color: #ffffc0;
}

td.missed_rental {
  background-color: #ff8080;
}

td.today_rental {
  background-color: #60A0ff;
}


/*--------------------------------------------
              Rentals
----------------------------------------------*/
.rental_header_div {
  margin: 10px 0 5px 0;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #c0c0c0;
  background-color: #e0e0e0;
}

.set_title_div {
  margin: 0;
  padding: 5px 15px;
  text-align: left;
  font-size: 16px;
  border: 1px solid #c0c0c0;
  border-bottom: none;
  background-color: #e0e0e0;
}

.set_bottom_div {
  margin: -5px 0 5px 0;
  padding: 5px 15px;
  text-align: right;
  font-size: 16px;
  border: 1px solid #c0c0c0;
  border-bottom: none;
  background-color: #e0e0e0;
}

tr.selected_item td {
  background-color:#ffff00 !important;
}