@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');



body, html, * {
    margin: 0px;
    padding: 0px;
    outline: none;
    background: #fff;
}


body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #555;
}

.clr {
    clear: both;
    float: none;
    display: block;
    height: 0px;
    width: 100%;
    font-size: 0px;
    line-height: 0px;
}

hr {
  box-shadow: 0px;
  line-height: 1px;
  height: 1px;
  border: none;
  background: gray;
  margin: 5px 0;
}

h3 {
    margin: 10px 0 20px 0;
    font-size: 28px;
}
h3.pagetitle {
    color: #344861;
    border-bottom: 1px solid #000;
}









.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}












.mainbox {
    width: 100%;
    max-width: 796px;
    margin: 0px auto;
    border: 1px solid #666;
    border-radius: 4px;
    background: #fff;
    z-index:  99999;
}

.innerbox {
    width: 98%;
    margin: 1%;
}

a {
    color: #344861;
    text-decoration: none;
}
a:hover,
a.logout {
    color: #E00A1C;
}

i.fas {
    font-size: 24px;
    margin: 10px 0 0 0;
}

.menubox {
  position: fixed;
  left: 0px;
  top: 0px;
  border: 0px solid #CCD1D7;
  height: 100%;
  background: #CCD1D7;
  padding: 50px 0 0 5px;
}
.menubox .icon {
  display: inline-block;
  width: 35px;
  text-align: center;
  background: none;
}
.menubox i, .menubox svg, .menubox .backbutton {
  cursor: pointer;
  color: #555;
  font-size: 24px;
  background: none;
}
.menubox .backbutton {
  display: inline-block;
  border-bottom: 1px solid gray;
  font-size: 16px;
  width: 98%;
  padding: 5px 0 5px 2%;
}
.menubox ul {
  width: 40px;
  overflow: hidden;
  transition: all ease 0.5s;
  background: #CCD1D7;
}
.menubox ul.open {
  width: 250px;
}
.menubox ul li {
  display: block;
  white-space: nowrap;
  padding: 0px 0;
  margin: 0 0 0px 0;
  border-bottom: 1px solid gray;
  background: none;
}
.menubox ul li ul.submenu {
  visibility: hidden;
  opacity: 0;
  height: 0px;
  transition: all ease 0.5s;
}
.menubox ul li .submenu.show {
  visibility: visible;
  opacity: 1;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  background: #CCD1D7;
  width: 100%;
  height: 100%;
}
.menubox .more {
  border-left: 1px solid gray;
  padding: 3px 0px 3px 8px;
  background: none;
}
.menubox ul a {
  margin: 0 15px;
  display: inline-block;
  width: 60%;
  padding: 8px 0;
  background: none;
}
.menubox .active, .menubox .active svg {
  color: #fff;
}










.headbox {
    border-bottom: 1px solid #666;
    border-top: 1px solid #666;
    border-radius: 4px 4px 0 0;
    position: fixed;
    width: 100%;
    max-width: 796px;
    background: #fff;
    top: 0;
    z-index: 9999;
}
.headbox .infobox,
.headbox .logobox {
    float: left;
    text-align: center;
    display: block;
    min-height: 20px;
}
.headbox .infobox {
    width: 25%;
}
.headbox .logobox {
    width: 50%;
    text-align: center;
}

.headbox img.logo {
    width: 110px;
    height: auto;
}

.headbox .button-mobile-menu {
    float: right;
    margin: 30px 0 0 0;
}
.headbox .button-mobile-menu a {
    display: block;
}
.headbox .button-mobile-menu span.l1,
.headbox .button-mobile-menu span.l2,
.headbox .button-mobile-menu span.l3 {
    display: block;
    width: 40px;
    margin: 0 0 7px 0;
    height: 4px;
    background: #344861;
    border-radius: 2px;
    transition: all ease 0.5s;
  }
.headbox .button-mobile-menu span.l2 {
    width: 30px;
    margin-left: 10px;
  }
.headbox .button-mobile-menu:hover span.l1,
.headbox .button-mobile-menu:hover span.l3 {
    width: 30px;
    margin-left: 10px;
  }
.headbox .button-mobile-menu:hover span.l2 {
    width: 40px;
    margin-left: 0;
}
.headbox .mietpreisbox {
    text-align: center;
    padding: 30px 0 0 0;
}

.headbox .quickaccess {
  position: absolute;
  right: -55px;
  top: 40%;
  padding: 5px;
}
.headbox .quickaccess svg {
  width: 40px;
  height: auto;
}
.headbox .quickaccess .clickbox {
  display: inline-block;
  cursor: pointer;
}
.headbox .infoboxes {
  position: absolute;
  right: 0px;
  z-index: 9999999999;
  padding: 5px;
  background: rgba(52, 72, 97, 0.95);
  color: #fff;
}
.headbox .infoboxes table,
.headbox .infoboxes table tbody,
.headbox .infoboxes table tbody tr,
.headbox .infoboxes table tbody td,
.headbox .infoboxes table tr,
.headbox .infoboxes table tr td,
.headbox .infoboxes table th,
.headbox .infoboxes table i {
  background: transparent;
}


.headbox .show_cars_box2,
.headbox .show_prices_box2 {
  display: none;
}

.contentbox {
    margin: 150px 0 0 0;
    position: relative;
    z-index: 999;
}



i.fas, i.far {
  font-size: 20pt;
}


.vm_infobox {
  border-bottom: 1px solid #f1f1f1;
}


.mietstatus {
  margin: 0 50px 0 0;
}
.mietstatus.red {
  color: red;
}
.mietstatus.gray {
  color: gray;
}

table td {
    vertical-align: top;
}
table th {
    text-align: left;
}

.box_vermietung h3 {
    font-size: 18px;
    margin: 0 25px 0 0;
    cursor: pointer;
    float: left;
}
.box_vermietung h3 i {
    color: #344861;
}

.detailbox .mieter {
  float: left;
}

.box_vermietung .mieter,
.box_vermietung .status,
.box_vermietung .fahrer,
.uploads {
    width: 50%;
    float: left;
    margin: 15px 0 0 0;
}
.box_vermietung i.fas {
    font-size: 16px;
    margin: 0;
}
.box_vermietung form {
    display: inline;
    /*float: right;*/
    background: transparent;
}
.box_vermietung form button {
    width: 25px;
}

.actions {
  padding: 0px 0;
  float: right;
}

.fahrer1box,
.fahrer2box,
.gsbox,
.anfragebox,
.mietbox,
.button_status {
    display: none;
}

.vm_action {
  float: right;
}

form.vm_action button {
    background: transparent;
    border: none;
    padding: 0px;
    color: #E00A1C;
}

svg {
  background: transparent;
}
.button.red {
    color: #e00a1c;
    cursor: pointer;
}


label {
    color: #344861;
}
label.cat2 {
    font-size: 20px;
    font-weight: 500;
}
input, textarea {
    width: 95%;
    margin: 0 0 20px 0;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    border: 1px solid #666;
    padding: 5px 2%;
    color: #666;
}
textarea {
    height: 60px;
}
select {
    border: 1px solid #666;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    padding: 4px 0;
    width: 100%;
    margin: 0 0 20px 0;
}
input.datum {
    width: 75%;
}
input.checkbox {
    width: auto;
}
div.zeit {
    width: 20%;
}


button, a.button {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border: 1px solid #999;
    background: #344861;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all ease 0.5s;
}
button:hover, a.button:hover {
    background: #E00A1C;
}

form.action {
  display: inline;
}
button.small {
  background: none;
  width: auto;
  color: red;
  border: 0px;
  font-weight: 300;
}
button.small i {
  font-style: normal;
  font-weight: 300;
}


div.num {
    display: inline-block;
    border: 2px solid #e00a1c;
    border-radius: 50%;
    padding: 6px 12px;
    margin: 5px 15px 10px 0;
    float: left;
}
.fa-check {
    color: green;
}


.actionbox, tr.mietinfos td {
    margin: 15px 0 0 0;
    /*background: rgba(52, 72, 97, 0.25);*/
    padding: 5px;
}
.actionbox .action {
  background: rgba(52, 72, 97, 0.25);
  padding: 5px;
  margin: 5px 0 0 0;
}


.delbox_content,
.billbox_content,
.contractbox_content,
.mls_startbox_content,
.mls_endbox_content {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    /*color: #e00a1c;*/
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 99999;
    overflow: scroll;
}

.delbox_content .innerbox,
.billbox_content .innerbox,
.contractbox_content .innerbox,
.mls_startbox_content .innerbox,
.mls_endbox_content .innerbox {
    width: 100%;
    max-width: 796px;
    margin: 0 auto;
    padding: 33vh 0 0 0;
    text-align: center;
}

.delbox_content a.close,
.billbox_content a.close,
.contractbox_content a.close,
.mls_startbox_content a.close,
.mls_endbox_content a.close {
    float: right;
    cursor: pointer;
    display: inline-block;
    position: fixed;
    width: 50px;
    height: 50px;
    margin: 2% 2% 0 0;
    right: 2%;
    top: 2%;
    /*background: url('../images/icon-close.png') center no-repeat;*/
    opacity: 0.8;
    font-size: 38px;
}

.billbox_content form button,
.contractbox_content form button,
.mls_startbox_content form button,
.mls_endbox_content form button {
  width: 100%;
}

.actionsbox {
  float: right;
}
.vm_details {
  cursor: pointer;
  color: green;
  font-size: 12pt;
  margin: 0 20px 0 0;
}



.gutscheine {
  width: 100%;
  margin: 0 0 15px 0;
  padding: 10px;
}
.gutscheine, .gutscheine tr, .gutscheine th, .gutscheine td {
  padding: 0;
  border-spacing: 0;
  border: none;
  vertical-align: middle;
}
.gutscheine th, .gutscheine td {
  width: 13.25%;
  padding: 0.5%;
}
.gutscheine td.red {
  color: red;
}






@media ( max-width: 640px ) {
    .box_vermietung .mieter,
    .box_vermietung .status,
    .box_vermietung .fahrer,
    .uploads {
        width: 100%;
        float: none;
    }
    .contentbox {
        margin: 180px 0 0 0;
    }
}

@media ( max-width: 796px ) {
  .mainbox {
    max-width: 90%;
    margin: 0 0 0 10%;
  }
  .menubox {
    z-index: 99999;
  }
  .menubox.open {
    z-index: 999999;
  }
}