@charset "utf-8";
/*
Theme Name:     Shared Cars
Description:    Frontpage and subpages for sharing cars
Author:         Vincent deelt ... & Cool Collective
Author URI:     https://vincentdeelt.nl
Template:       generic
Version:        2.0.0
Text Domain:    scars
*/

/*noinspection CssUnknownTarget*/

@font-face {
    font-family: 'Cabin Sketch local';
    src: url('fonts/cabin-sketch-v1.02/CabinSketch-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Cool Collective Iconen';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/ccicon-webfont.eot?v=4.0.3');
    src: url('fonts/ccicon-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
        url('fonts/ccicon-webfont.woff?v=4.0.3') format('woff'),
        url('fonts/ccicon-webfont.ttf?v=4.0.3') format('truetype'),
        url('fonts/ccicon-webfont.svg?v=4.0.3#cciconregular') format('svg');
}

/*
 * Clean CSS
 * +joost. | beeldadvies
 * Deze CSS is op basis van een CSS reset zodat de beginwaarden voor
 * de meeste browsers overeenkomen. Deze reset is klaar voor HTML5
 * CSS Reset:
 * HTML5 CSS Reset
 * Based on Eric Meyer's CSS Reset and html5doctor.com HTML5 Reset
 * Copyright (c) 2010 736 Computing Services Limited
 * Released under the MIT license. http://736cs.com/mit-license.php?2010
 */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video {
    background: 0 0;
    border: 0;
    cursor: default;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0
}

body {
    font-family: 'Open Sans', Arial, Verdana, sans-serif;
    line-height: 21px
}

article, aside, blockquote, dialog, figure, footer, header, nav, section {
    display: block
}

ol {
    list-style: decimal;
    margin-left: 28px
}

ul {
    list-style-type: disc;
    margin-left: 28px
}

ul ul {
    list-style-type: none;
    margin-left: 28px
}

blockquote, q {
    quotes: none;
    margin-left: 24px
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '"';
    /*content: none*/
}

ins {
    text-decoration: underline
}

del {
    text-decoration: line-through
}

mark {
    background: 0 0
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted #2c2c2c;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    border: 0;
    border-top: 1px solid #58ae64;
    background-color: #58ae64;
    display: block;
    height: 1px;
    margin: 0;
    padding: 0;
    width: 100%
}

a img, input, select {
    vertical-align: middle;
}

select {
    height: 28px;
}

ul, ol {
    margin-left: 0;
}

/*
 * Einde CSS reset
 *
 * Start Scars Pagina
 */
.clear {
    clear: both;
}

#scars-wrapper {
    background: transparent url('images/scars-header.jpg') no-repeat fixed center top;
    min-height: 460px;
}

div.scars-spacer-1 {
    height: 1px;
}

div.scars-spacer-2 {
    height: 2px;
}

div.scars-spacer-3 {
    height: 3px;
}

div.scars-spacer-5 {
    height: 5px;
}

div.scars-spacer-10 {
    height: 10px;
}

div.scars-spacer-20 {
    height: 20px;
}

#scars-canvas {
    margin: 0 auto;
    width: 978px;
    padding: 0 7px;
}

/*
 * Start Scars Header
 */
#scars-header {
    padding: 7px;
    position: relative;
}

#scars-relative {
    position: relative;
}

ul.scars-network-menu {
    list-style-type: none;
    margin-left: 20px;
    width: 200px;
}

ul.scars-network-menu label {
    color: #ff9119;
}

ul.scars-network-menu li ul {
    display: none;
}

ul.scars-network-menu li:hover > ul {
    background-color: #fff;
    border: 1px solid #589f0a;
    display: block;
    opacity: 0.8;
    padding: 5px;
}

ul.scars-network-menu ul li a:hover {
    font-weight: 600;
}

.telefoonmenu {
    display: none;
}

#scars-quote {
    background: url('images/scars-quote.png') no-repeat;
    float: right;
    height: 140px;
    margin: 4px 21px 0 0;
    width: 317px;
}

#scars-quote-text {
    display: block;
    padding: 30px 30px 0 70px;
}

#scars-quote-text span {
    width: 100%;
}

#scars-quote-loggedin {
    text-align: center;
}

#scars-quote-loggedin span, #scars-quote-notloggedin span {
    display: block;
}

#scars-quote-notloggedin .scars-line-one {
    padding-left: 7px;
}

#scars-quote-notloggedin .scars-line-two {
    padding-left: 14px;
}

#scars-quote-notloggedin .scars-line-three {
    padding-left: 21px;
}

#scars-quote-notloggedin .scars-line-four {
    padding-left: 28px;
}

#scars-quote-notloggedin .scars-line-five {
    padding-left: 35px;
}

/*
 * Einde Scars Header
 *
 * Start Scars Navigatie
 */
nav {
    text-align: center;
    margin-top: 5px;
}

.menu-hoofdmenu-container, .menu-gebruikersmenu-container, .menu-beheermenu-container {
    list-style: none;
    margin: 0;
}

ul#menu-hoofdmenu, ul#menu-gebruikersmenu, ul#menu-beheermenu {
    list-style: none;
    width: auto;
}

/*
 * Einde Scars Navigatie
 *
 * Start Scars Inhoud
 */
#scars-main {
    padding: 0 0 7px;
}

/*
 * Start Scars front-page.php
 */

a.tilehover {
    width: 32%;
    height: 246px;
    float: left;
    border: 2px solid #ffffff;
    margin: 0 1% 1% 0;
}

a.tilehover:hover {
    text-decoration: none;
}

.tile {
    width: 100%;
    overflow: hidden;
}

a.tilehover.drie, a.tilehover.zes, a.tilehover.negen {
    margin: 0 0 1% 0;
}

.scars-login, .scars-logout {
    display: none;
}

.een {
    background-color: #247d9d;
}

.keen {
    border: 1px solid #247d9d;
}

.twee {
    background-color: #81ea73;
}

.ktwee {
    border: 1px solid #81ea73;
}

.drie {
    background-color: #24a39c;
}

.kdrie {
    border: 1px solid #24a39c;
}

.vier {
    background-color: #58ae64;
}

.kvier {
    border: 1px solid #58ae64;
}

.vijf {
    background-color: #fe9b1b;
}

.kvijf {
    border: 1px solid #fe9b1b;
}

.zes {
    background-color: #39842f;
}

.kzes {
    border: 1px solid #39842f;
}

.zeven {
    background-color: #247d9d;
    display: none;
}

.kzeven {
    border: 1px solid #247d9d;
}

.acht {
    background-color: #81ea73;
    display: none;
}

.kacht {
    border: 1px solid #81ea73;
}

.negen {
    background-color: #24a39c;
    display: none;
}

.knegen {
    border: 1px solid #24a39c;
}

.ktien {
    border: 1px solid #58ae64;
}

.tien {
    background-color: #fe9b1b;
    display: none;
}

a .tile img {
    display: block;
    clear: both;
    margin: 0 auto;
}

a:hover .tile img {
    display: inline;
    clear: none;
    float: right;
    padding: 5px;
    width: 40px;
    height: auto;
}

.tile-content {
    position: relative;
    height: 246px;
}

a .tilecontent {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
}

a:hover .tilecontent {
    background-image: url('images/scars-fade.png');
    height: 200px;
}

.tilepadding {
    padding: 5px;
}

/*
 * Einde Scars front-page.php
 *
 * Start Scars page
 */
.scars-page {
    border: 2px solid #fff;
}

.scars-page .scars-title {
    text-align: center;
    padding: 5px 5px 0 5px;
}

.scars-page .scars-title img {
    float: right;
    width: 40px;
    height: auto;
}

.scars-page .scars-content {
    clear: both;
    background-image: url('images/scars-content-bg.png');
    display: block;
    padding: 0.5%;
}

.scars-page .scars-content img.alignleft,
.scars-page .scars-content img.alignright {
    margin-top: 0;
    margin-bottom: 0.25em;
}

.scars-page .scars-content img.alignleft {
    margin-right: 0.5em;
    float: left;
}

.scars-page .scars-content img.alignright {
    margin-left: 0.5em;
    float: right;
}

.scars-page .scars-content div#login {
    max-width: 360px;
    margin: auto;
    padding: 0;
    width: 100%;
}

.scars-page .scars-content ul ul li,
.scars-page .scars-content ol ul li {
    list-style-type: circle;
}

.scars-page .scars-content ul ol li,
.scars-page .scars-content ol ol li {
    list-style-type: decimal;
}

.scars-page .scars-content div#login h1 {
    font-size: 110%;
}

.scars-page .scars-content div#login h1 a,
.scars-page .scars-content div#login h1 a:hover {
    text-decoration: none;
}

.scars-page .scars-content div#login form#loginform {
    margin-bottom: 10px;
}

.scars-page .scars-content div#login form#loginform p {
    margin: 15px 0;
}

.scars-page .scars-content div#login form#loginform div div.wp-pwd {
    margin-top: 0;
    position: relative;
}

.scars-page .scars-content div#login form#loginform div div.wp-pwd .button.wp-hide-pw {
    background-color: inherit;
    border: none;
    color: #24890d;
    right: 0;
    width: 5%;
}

div#login form#setupform input, input#user_login {
    width: 97%;
}

input#user_pass {
    padding-right: 0;
    width: 85%;
}

.wp-cancel-pw>.dashicons, .wp-hide-pw>.dashicons {
    top: 0;
}

/* jquery-ui overrides */
.ui-widget input, .ui-widget button {
    font-size: 1.2em;
}

.ui-widget textarea {
    font-size: 1em;
}

.ui-widget textarea::placeholder {
    font-size: 0.8em;
}

/* jquery-ui confirm dialog */
.scars-dialog .ui-dialog-titlebar-close {
    visibility: hidden;
}

.scars-dialog .ui-dialog-content {
    display: none;
}

form#bookSharedCarDialog {
    padding: 0;
}

form#bookSharedCarForm .scar-availability {
    border: 1px solid #589f0a;
    margin: 0.5em 0;
    padding: 0.5em;
}

form#bookSharedCarForm .available-until {
    border-color: orange;
}

form#bookSharedCarForm .available-from {
    border-color: red;
}

form#bookSharedCarForm .scar-availability label {
    font-size: large;
}

form#bookSharedCarForm .scar-availability label {
    color: #24890d;
    font-size: large;
}

form#bookSharedCarForm .scar-availability div.scar-available label {
    display: block;
    font-size: smaller;
    width: 100%;
}

form#bookSharedCarForm .scar-availability.available-until div.scar-available label {
    color: orange;
}

form#bookSharedCarForm .scar-availability.available-from div.scar-available label {
    color: red;
}

form#bookSharedCarForm .scar-availability div.scar-available button {
    font-size: smaller;
    padding: 5px;
    width: 48%;
}

form#bookSharedCarForm .scar-availability div.scar-available button:focus {
    outline: none;
}

.scars-dialog {
    width: 360px !important;
}

.scars-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 0;
}

.scars-dialog .ui-dialog-buttonpane button {
    margin: 0.1em 0;
}

#dialog-form {
    padding: .5em .5em;
}

#dialog-form label {
    font-weight: normal;
    width: 100%;
}

#dialog-form label.unit {
    width: 15%;
}

#dialog-form input {
    width: 82%;
}

#dialog-form input[type=number] {
    height: 1.7em;
    margin: 2px 0;
    width: 74%;
}

.scars-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}

.ui-widget {
    opacity: 90%;
}

/* jquery-ui tabs */
.ui-tabs ul.ui-tabs-nav {
    border: none;
    margin: 0;
    padding: 0;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0.1em 0.2em;
}

.ui-tabs .ui-tabs-nav li {
    margin: 1px .1em 0 0;
}

.ui-tabs .ui-tabs-panel {
    background: whitesmoke;
    border-color: #d4ccb0;
    border-style: solid;
    border-width: 1px;
    padding: 1%;
}

/* jquery-ui tooltips */
.scars-tooltip-left, .scars-tooltip-right {
    border: 1px solid #589f0a;
    font-size: small;
}

.scars-tooltip-left {
    max-width: 200px;
}

.scars-tooltip-right {
    max-width: 360px;
}

/*
 * Categorieoverzicht
 */
.scars-category .hentry {
    padding: 1%;
    background-color: #ffffff;
    margin-bottom: 7px;
}

.scars-category .hentry:last-child {
    margin-bottom: 0;
}

/*
 * Einde categorieoverzicht
 *
 * Start overzichtpagina's
 */
form, table {
    clear: both;
}

div#right {
    float: right;
    padding-left: 5px;
    width: 688px;
}

div.form-title {
    float: left;
    line-height: normal;
    margin-left: 35px;
    position: relative;
}

div#left {
    float: left;
    width: 260px;
}

div#left-top table {
    border-spacing: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

div#left-top th {
    padding: 3px 10px 2px 0;
    text-align: right;
}

div#left-top td {
    padding: 2px 0;
    text-align: left;
}

div#left-top tr:first-child td,
div#left-top tr:nth-child(2) td {
    text-align: center;
}

div#left-middle table {
    border-spacing: 0;
    text-align: center;
}

div#left-middle th, div#left-middle label  {
    padding: 1px;
    text-align: left;
}

div#left-middle td {
    padding: 1px;
    text-align: left;
}

div#left-middle h4 {
    padding-bottom: 0;
    text-align: center;
}

/*
 * Start image buttons
 */
img.next, img.prev {
    height: 25px;
    vertical-align: middle;
    width: 25px;
}

img.next.selectable:hover, img.prev.selectable:hover {
    cursor: pointer;
}

/*
 * Einde image buttons
 *
 * Einde overzichtpagina's
 *
 * Einde Scars page
 *
 * Start Scars footer
 */
div#scars-footer {
    background-color: #599f0b;
    border-top: 1px solid #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
}

#scars-footer-tekst {
    font-size: 140%;
    width: 100%;
}

/*  ajax-loader style:
    Start by setting display:none to make this hidden.
    Then we position it in relation to the viewport window
    with position:fixed. Width, height, top and left speak
    for themselves. Background we set to 80% white with
    our animation centered, and no-repeating */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .4) url('images/ajax-loader-32.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
/*
 * Start snackbar toast
 * see https://www.w3schools.com/howto/howto_js_snackbar.asp
 */
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: ivory;
    color: darkgreen;
    text-align: center;
    border: 1px solid green;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 45%;
    bottom: 130px;
    font-size: 17px;
}

#snackbar.fail {
    background-color: lightpink;
    color: darkred;
    border: 1px solid red;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 130px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 130px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 130px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 130px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
/*
 * End snackbar toast
 */
/*
 * Einde Scars footer
 *
 * Einde Scars
 */

/*
 * Begin login tabellen
 */
table#login th {
    padding: 3px 10px 2px 0;
    text-align: right;
}

table#login td {
    padding: 2px 0;
    text-align: left;
}

/*
 * Einde login tabellen
 *
 * Start tabellen
 *
 * Scar tables
 */
table#agenda td.cell-hour div {
    display: block;
}

table#agenda td.cell-hour.column-group-odd {
    background-color: #e6e6e6;
}

table#agenda td.cell-hour.column-group-even {
    background-color: #fff;
}

table, table#add-km-pricetable#agenda, table.scar-users td, table#gauges th.comment, table.transactions td a, table.km-scar-users td a, table#agenda td.cell-hour div {
    width: 100%;
}

table#kosten-individueel {
    width: 96%;
}

table#agenda th {
    padding: 0;
}

table#agenda td {
    border: #808080 solid thin;
    height: 15px;
    padding: 0;
    width: 2%;
}

table#agenda td:first-child {
    padding-left: 2px;
    width: 10%;
}

table#agenda tr td:nth-child(2), table#agenda tr td:nth-child(3), table#agenda tr td:nth-child(4),
table#agenda tr td:nth-child(5), table#agenda tr td:nth-child(6), table#agenda tr td:nth-child(7),
table#agenda tr td:nth-child(8), table#agenda tr td:nth-child(9), table#agenda tr td:nth-child(10),
table#agenda tr td:nth-child(11), table#agenda tr td:nth-child(12), table#agenda tr td:nth-child(13) {
    width: 1%;
}

th.comment, td.comment, table.transactions td.comment div, table.scar-users td.comment div, table.km-scar-users td.comment div {
    width: 300px;
}

table.staten th.comment, table.staten td.comment, table.scars th.comment, table.scars td.comment {
    width: 195px;
}

table.staten td.comment div {
    width: 190px;
}

table#select-month select.list, table#selection-list select.list, table#select-scar-user select.list {
    width: 100%;
}

table#select-month td:first-child, table#select-month td:last-child,
table#selection-list td:last-child, table#selection-list td:first-child {
    width: 1%;
}

table#select-month td:nth-child(2), table#selection-list td:nth-child(2) {
    width: 96%;
}

tr:first-child:hover, table.km-scar-users tr:first-child:hover,
table.scar-users tr:first-child:hover, table.scars tr:first-child:hover, table.staten tr:first-child:hover,
table.transactions tr:first-child:hover, table.transactions tr:last-child:hover {
    background-color: transparent;
    color: #2c2c2c;
}

td.cell-hour div.foreign {
    background-color: silver;
}

td.cell-hour div.free {
    background-color: transparent;
}

td.cell-hour div.now {
    background-color: #ff9119;
}

td.cell-hour div.own {
    background-color: #6699ff;
}

td.cell-hour div.selected, td.cell-hour div.selected.foreign.now:hover,
td.cell-hour div.selected.own.now:hover, td.cell-hour div.selectable.foreign.now:hover,
td.cell-hour div.selectable.own.now:hover, table#agenda tr:hover,
table.transactions tr:hover, table.km-scar-users tr:hover, table.scar-users tr:hover,
table.scars tr:hover, table.staten tr:hover {
    background-color: #666666;
    color: #ffffff;
}

ul.active {
    background-color: silver;
    color: #2c2c2c;
}

td.cell-hour div.selected.free, td.cell-hour div.selectable.free:hover {
    background-color: lightgreen;
    color: #ffffff;
}

table.km-scar-users tr.selected, table.scar-users tr.selected, table.scars tr.selected,
table.staten tr.selected, table.transactions tr.selected {
    background-color: #2c2c2c;
    color: #ffffff;
}

table.scars tr.selected, table.transactions tr.selected, table.staten tr.selected, table.scar-users tr.selected, table.km-scar-users tr.selected {
    border: #589f0a solid thin;
}

table#select-month, table#select-reservation td {
    border: none;
}

td.cell-hour div {
    height: 100%;
}

table#kosten-overzicht td {
    padding: 1px 12px 1px 0;
    vertical-align: top;
}

table.transactions th.comment, table.transactions td.comment, table.scar-users th.comment, table.scar-users td.comment, table.km-scar-users th.comment, table.km-scar-users td.comment,
table#select-month:first-child, table#select-reservation:first-child, table.cabinsketch td {
    text-align: left;
}

table#select-month:last-child, table#select-reservation:last-child, table.cabinsketch th {
    text-align: right;
}

.now {
    color: #ff9119;
}

.now, .weekend {
    font-weight: bolder;
}

div.now, div#km-som,div#kosten-som {
    float: right;
    font-weight: 300;
}

div.now:hover {
    text-decoration: underline;
}

table.transactions td.comment div, table.scar-users td.comment div, table.km-scar-users td.comment div, table.staten td.comment div {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

table.staten td.comment div, table.scar-users td, table.transactions th, table.scar-users th, table.km-scar-users th, table.transactions td.comment div, table.scar-users td.comment div, table.km-scar-users td.comment div, table.transactions td, table.staten td, table.km-scar-users td, table.scars td, table.staten th, table.scars th {
    white-space: nowrap;
}

table#kosten-individueel, table.transactions, table.scar-users, table.km-scar-users, table#kosten-overzicht {
    margin-bottom: 20px;
}

table.scar-users td, table.transactions td, table.staten td, table.km-scar-users td, table.scars td, table.staten th, table.scars th, table#kosten-samenvatting th, table#kosten-samenvatting td, table#kosten-breakdown th, table#kosten-breakdown td, table#kosten-individueel th, table#kosten-individueel td, table#gauges td {
    padding: 1px 5px;
}

table.transactions th, table.scar-users th, table.km-scar-users th, table#gauges th {
    padding: 5px;
}

table.cabinsketch th, table#gauges table.comment td {
    padding: 0;
}

table.cabinsketch td {
    padding-left: 5px;
}

th {
    padding: 3px 10px 2px 0;
}

td {
    padding: 2px 0;
}

/*
 * Einde tabellen
 */
blockquote {
    font-style: italic;
    margin-left: 0;
}

code {
    font-family: monospace;
    font-size: 80%;
}

div.code {
    background-color: #fff;
    border: thin solid #599f0b;
    margin: 10px;
    padding: 10px;
}

.scars-contentcanvas .scars-post, .scars-contentcanvas .add-post, .scars-page .scars-contentcanvas {
    float: left;
}

.content-sidebar {
    float: right;
}

.content-sidebar, .scars-contentcanvas .add-post, .scars-contentcanvas .scars-post {
    padding: 5px;
}

.scars-contentcanvas .add-post, .scars-contentcanvas .scars-post, .comment-respond, .comments-area {
}

.comment-form-comment label {
    display: block;
}

.comment-form-comment textarea,
form#commentform p.form-submit input {
    max-width: 100%;
}

div#comments.comments-area {
    margin: 10px;
    width: 82.5%;
}

.scars-page .scars-contentcanvas {
    width: 70%;
    max-width: 600px;
}

/*
 * Einde globale markup
 *
 * Start formulieren
 */
select, input, textarea, .list {
    background-color: #ffffff;
    max-width: 360px;
}

select, .list {
    width: 100%;
}

.scar-units {
    border: thin solid #599f0b;
}

.scar-units th, .scar-units label {
    padding: 0 0 0 3px !important;
}

.scar-units input {
    width: 87%;
}

.scar-units tr:first-child th:first-child {
    font-weight: bold;
}

.scar-units tr th:nth-child(2), .scar-units tr td:nth-child(2) {
    text-align: right !important;
    width: 40%;
}

.scar-units tr th:nth-child(3), .scar-units tr td:nth-child(3) {
    width: 30%;
}

input[type="number"] {
    width: 60%;
}

textarea {
    min-height: 50px;
    width: 97%;
}

input[type="number"], input[type="submit"], input[type="button"], input[type="text"], input[type="email"],
input[type="password"], input[type="date"], input[type="datetime-local"],
textarea, select, button, .button, .list {
    border: 1px solid #589f0a;
}

.textarea {
    min-height: 50px;
}

input[type="submit"], button, .button {
    color: #ffffff;
}

#scar-usage, #var-unit-amounts, #scar-status, #scar-status-date, .date-comments {
    display: inline-block;
    font-size: 12px;
    width: 100%;
}

#scar-usage, #var-unit-amounts, #scar-status {
    margin: 0;
}

#scar-status label, .date-comments label {
    display: inline-block;
    font-weight: normal;
    padding-left: 2px;
    vertical-align: top;
    width: 25%;
}

#scar-status select, .date-comments input {
    display: inline-block;
    width: 71%;
}

.datetime-pickers, .datetime-locals, .tally, .date-pickers, .unit-amounts {
    display: inline-block;
    font-size: 12px;
    width: 100%;
}

.datetime-pickers, .datetime-locals, .date-pickers, .unit-amounts {
    display: inline-block;
    font-size: 12px;
}

table.scar-usr-details tr th {
    width: 5%;
}

table.scar-usr-details tr:first-child input {
    width: 96%;
}

/*table#scar-usr-details tr:nth-child(2) input,*/
/*table#scar-usr-details tr:nth-child(3) input {*/
/*    width: 96%;*/
/*}*/

td.phone, td.email {
    width: 10%;
}

img.phone, img.email {
    cursor: pointer;
    height: 20px;
    float: right;
}

.datetime-pickers label, .datetime-locals label, .tally label, .cost label, .date-pickers label, .unit-amounts label {
    display: inline-block;
    font-weight: normal;
    height: 20px;
    white-space: nowrap;
}

.datetime-pickers label, .datetime-locals label, .tally.label {
    text-align: center;
    width: 49%;
}

.date-pickers label, .unit-amounts label, .reservation_estimate label {
    text-align: left;
}

#scar-usage .date-pickers {
    width: 100%;
}

.start-period, .end-period, .unit-amount-date, .unit-amount {
    display: inline-block;
}

.start-period, .end-period {
    width: 100%;
}

#scar-details td input {
    width: 97%;
}

#scar-status-date {
    width: 100%;
}

#scar-status-date .date-pickers .start-period {
    width: 100%;
}

.start-period label, .end-period label, #tallies label, #costs label {
    display: inline-block;
    width: 25%;
}

.start-period label, .end-period label {
    font-weight: normal;
}

#tallies-header label, #costs-header label {
    font-weight: bold;
}

#tallies-header label.tally, #costs-header label.cost {
    text-align: center;
    font-weight: normal;
    width: 34%;
}

#var-unit-amounts .date-pickers {
    width: 58%;
}

#var-unit-amounts div#date-pickers label {
    margin-left: 34%;
    width: 63%;
}

#var-unit-amounts div#date-pickers div.unit-amount-date label {
    margin: 0;
    text-align: left;
    width: 30%;
}

#var-unit-amounts div#unit-amounts label {
    margin-left: 12%;
    width: 78%;
}

#var-unit-amounts div#unit-amounts div.unit-amount label {
    margin-left: 0;
    text-align: right;
    width: 4%;
}

.var-unit-amounts {
    margin: 2px 0;
}

.var-unit-amounts .unit-amount {
    width: 30%;
}

.var-unit-amounts .unit-amount input {
    width: 75%;
}

.var-unit-amounts .unit-amount-date {
    width: 68%;
}

.var-unit-amounts .unit-amount-date input {
    display: inline-block;
    width: 60%;
}

.var-unit-amounts .unit-amount-date label,
.var-unit-amounts .unit-amount label {
    display: inline-block;
    font-weight: normal;
}

.var-unit-amounts .unit-amount-date label {
    text-align: left;
    width: 30%;
}

.var-unit-amounts .unit-amount label {
    text-align: left;
    width: 5%;
}

#reservation-user th {
    width: 26%;
}

#reservation-user td {
    width: 74%;
}

#reservation-user select, #reservation-user select list {
    width: 100%;
}

.reservation_estimate span {
    font-weight: bold;
}

.start-period input, .end-period input {
    display: inline-block;
    width: 50%;
}

input.tally, input.currency {
    display: inline-block;
    text-align: right;
    width: 31%;
}

#transaction-edit {
    width: 100%;
}

#transaction-edit div.date-pickers, #transaction-edit div.date-pickers div.start-period {
    width: 100%;
}

#transaction-details tr th {
    width: 1%;
}

#transaction-details tr td {
    width: 40%;
}

#scar-status-date .date-pickers, #scar-status-date .date-locals {
    width: 100%;
}

#scar-status-date .date-pickers .start-period, #scar-status-date .date-locals .start-period {
    width: 100%;
}

#scar-status .date-pickers .start-period label, #scar-status .date-locals .start-period label {
    text-align: left;
    width: 25%;
}

#scar-status .date-pickers .start-period input, #scar-status .date-locals .start-period input {
    width: 68%;
}

/* Select boxes */
.list {
    height: 28px;
    padding: 1px;
}

.select-editable {
    position: relative;
}

.select-editable input, .select-editable select {
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
}

.select-editable input {
    border: none;
    height: 18px;
    left: 1px;
    padding: 1px;
    width: 156px;
}

.select-editable select:focus, .select-editable input:focus {
    outline: none;
}

input[type="number"], input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea {
    padding: 3px;
}

input[type="number"][active="false"], input[type="text"][active="false"], input[type="email"][active="false"], input[type="password"][active="false"],
input[type="date"][active="false"], input[type="datetime-local"][active="false"], select[active="false"], textarea[active="false"],
input[type="number"][disabled], input[type="text"][disabled], input[type="email"][disabled], input[type="password"][disabled],
input[type="date"][disabled], input[type="datetime-local"][disabled], select[disabled], textarea[disabled],
select[disabled] > option {
    color: #202020 !important;
}

/* Specific input boxes */
input[type="submit"][active="false"], input[type="button"][active="false"], button[active="false"], .button[active="false"] {
    background-color: #cccccc;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover {
    background-color: #41a62a;
}

input[type="submit"][active="false"]:hover, input[type="button"][active="false"]:hover, button[active="false"]:hover, .button[active="false"]:hover {
    background-color: #cccccc;
}

input[type="submit"], input[type="button"], button, .button {
    background-color: #24890d;
    width: 100%;
}

input[type="submit"][active="false"], input[type="button"][active="false"],
input[type="checkbox"][active="false"], input[type="radio"][active="false"],
input[type="number"][active="false"], input[type="text"][active="false"], input[type="email"][active="false"], input[type="password"][active="false"],
input[type="date"][active="false"], input[type="datetime-local"][active="false"], button[active="false"], .button[active="false"], select[active="false"] {
    cursor: auto;
}

input[type="checkbox"], input[type="radio"] {
    width: 15px;
}

form#wysija-subscriptions table tr:nth-child(5) th,
form#wysija-subscriptions table tr:nth-child(n+6) td {
    padding-left: 32%;
    text-align: left;
}

form#wysija-subscriptions table tr:nth-child(5) th {
    padding-top: 10px;
}

form#wysija-subscriptions p.submit {
    margin-top: 10px;
    text-align: center;
}

/* Info boxes */
.warning img {
    height: 26px;
    width: 26px;
}

.tooltip {
    padding: 2px 5px;
}

.tooltip table td, .tooltip table th {
    border: 1px;
    padding: 1px 5px;
}

/*
 * Einde formulieren
 *
 * Override plugins css
 *
 * wp-members
*/
.sidebar .widget-area {
    float: right;
}

figure.wp-block-image.size-large img {
    max-width: 100%;
}

/*
 * End override plugins css
 *
 * Scars lettertypes etc.
 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
    font-size: 220%;
    /* padding-bottom: 15px; */
    text-transform: uppercase;
}

h1.admin-email-heading {
    font-size: 100%;
}

div.admin-email-actions-primary a.button, div.admin-email-actions-primary input {
    height: initial;
    width: initial;
}

body, a, a:visited, a:hover, a:active {
    font-size: 0.95em;
    line-height: 150%;
}

body, a, a:visited, a:hover, a:active, table, td {
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6, .nav-menu a, th, .cabinsketch, .cabinsketch td, .entry-title a, #menu-hoofdmenu li, #menu-gebruikersmenu li, #menu-beheermenu li {
    font-weight: 500;
}

strong, label {
    font-weight: 700;
}

table h1, table h2, table h3, table h4, table h5, table h6, form h1, form h2, form h3, form h4, form h5, form h6 {
    margin-bottom: 5px;
}

form#bookSharedCarForm div.start-period label {
    width: 100%;
}

form#bookSharedCarForm div.start-period input#start-period,
form#bookSharedCarForm div.start-period input#start-workflow-period {
    width: 85%;
}

h1, h2, h3, h4, h5, h6, .scars-site-title a h1, .scars-site-title a h1 span {
    color: #599f0b;
}

.scars-site-title a:hover h1, .scars-site-title a:hover h1 span {
    color: #2c2c2c;
}

.scars-content h1, .scars-content h2, .scars-content h3, .scars-content h4, .scars-content h5, .scars-content h6 {
    color: #599f0b;
}

.scars-content h1, .scars-content h2, .scars-content h3, .scars-content h4 {
    padding-bottom: 10px;
}

.tile h1, .tile h2, .tile h3, .tile h4, .tile h5, .tile h6, .tile p, .tile a, .tile p a, .tile li, .tile li a, body {
    color: #2c2c2c;
}

h2 {
    font-size: 160%;
}

h3 {
    font-size: 140%;
}

h4 {
    font-size: 120%;
}

h5 {
    font-size: 100%;
}

h6 {
    font-size: 90%;
}

.tile h4 {
    display: inline;
    clear: none;
    float: left;
    color: #ffffff;
    padding: 10px 5px;
}

.assistive-text, h3.menu-toggle {
    display: none;
}

#menu-hoofdmenu li, #menu-gebruikersmenu li, #menu-beheermenu li {
    display: inline-block;
    padding: 0 6px;
    text-transform: uppercase;
}

.scars-page .scars-title h4 {
    display: inline;
    clear: left;
    color: #ffffff;
    height: 25px;
}

div.form-title h1 {
    font-size: 120%;
    margin: 0 50px;
}

div.form-title h2 {
    font-size: 110%;
    margin: 0 10px;
}

div.form-title h4 {
    padding-bottom: 0;
}

em {
    font-style: italic;
}

p {
    margin-bottom: 10px;
}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
    margin-top: 25px;
}

#scars-footer-tekst p, #scars-footer-tekst a, input.inlinebutton {
    text-align: center;
}

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

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

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

td, .list {
    text-align: left;
}

th {
    text-align: right;
}

#scars-footer-tekst p, #scars-footer-tekst a {
    font-size: 10px;
    font-weight: bolder;
    padding: 0 5px;
}

.selected:hover, .selectable:hover, a:hover, a.tilehover, .tile *, a, a td, a h1, a span, a img#prev, a img#next, a strong {
    cursor: pointer;
}

.scars-page .scars-title h4, a, a:active, a:link, a td, a h1, a span, a img#prev, a img#next, .tile a:hover, .scars-site-title a:hover {
    text-decoration: none;
}

a:hover .tile h4, a:hover {
    text-decoration: underline;
}

.nav-menu a, .nav-menu a:visited, .nav-menu a:active, .nav-menu a:link, #access a, .tile a h4 {
    color: #ffffff;
}

a, a:visited, a:hover, a:active, a:link {
    color: #ff9119;
}

a .tilecontent, #scars-footer a, a td, a h1, a span, a img#prev, a img#next {
    color: #2c2c2c;
}

.tile a {
    width: 100%;
}

.tile a h4 {
    float: left;
    padding: 5px;
}

table, td, th {
    font-size: 12px;
}

.cabinsketch {
    font-family: 'Cabin Sketch', 'Cabin Sketch local', cursive;
}

span.cabinsketch {
    font-size: 16px;
}

h1 .cabinsketch {
    font-size: 30px;
}

input[type='submit'][active="false"] {
    color: #FFFFFF !important;
}

input.netting {
    background-color: #FFFFFF;
}

input.delete:hover, input.km0, input.kwh0, .redfont, .error {
    color: red !important;
}

input.delete[active="false"]:hover {
    color: #FFFFFF !important;
}

span.message {
    font-size: 80%;
    font-style: italic;
}

.warning {
    color: #ff9119;
}

ul, ol {
    margin-bottom: 10px;
}

ul.nav-menu {
    margin-bottom: 0;
}

li.anker {
    color: #ff9119;
    cursor: pointer;
    font-weight: normal;
}

#scars-main #left ul, #scars-main #left ol {
    margin-left: 0;
}

div#selection-list {
    height: 260px;
}

#scars-main #left ul.list, #scars-main #left ol.list {
    border: none;
    font-size: smaller;
    height: 97%;
    list-style-type: none;
    margin-left: 0;
    overflow-y: scroll;
    padding: 5px;
    width: inherit;
}

#scars-main #left ul.list li:hover, #scars-main #left ol.list li:hover {
    background-color: #aaa;
    cursor: pointer;
}

#scars-main ul, #scars-main ol {
    margin-left: 20px;
}

#scars-main ul.scars-table > li {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 18px;
}

#scars-main ul.scars-table ul li {
    text-transform: none;
    font-size: 12px;
    color: #2c2c2c;
}

#scars-main ul.scars-table ul li.scar-negative-saldo, span.scar-negative-saldo,
#scars-main ul.scars-table ul li.scar-positive-saldo, span.scar-positive-saldo {
    font-weight: bolder;
}

#scars-main ul.scars-table ul li.scar-negative-saldo, .scar-negative-saldo {
    color: red;
}

#scars-main ul.scars-table ul li.scar-positive-saldo, .scar-positive-saldo {
    color: blue;
}

#scars-main ul.scars-table ul ul.selected li,
#scars-main ul.scars-table.horizontal ul ul.selectable:hover li {
    color: #fff;
}

/*
 * Nieuwe edits
 */
div.wpcf7 {
    width: 100%;
}

/*
 * Prikbord / referenties
 */
.categorie-titel, .scars-posts, span.scars-bericht-titel, span.scars-bericht, span.scars-auteur, span.scars-datum {
    display: inline-block;
}

.categorie-titel {
    width: 90%;
}

.scars-posts {
    text-align: right;
    width: 8%;
}

.scars-posts a.post-toevoegen {
    font-family: 'Cool Collective Iconen', sans-serif;
    color: #39842f;
    font-size: 40px;
}

.scars-posts a.post-toevoegen:hover {
    text-decoration: none;
}

.scars-posts .post-toevoegen:after {
    content: "\f067";
}

.scars-posts a.post-toevoegen.min:after {
    content: "\f068";
}

.scars-post-toevoegen {
    display: none
}

.scars-post-toevoegen.scars-open {
    display: block;
    margin-bottom: 10px;
}

.scars-post-toevoegen.scars-open label {
    display: block;
}

.scars-post-toevoegen.scars-open textarea#bericht,
.scars-post-toevoegen.scars-open input {
    display: block;
    max-width: 98%;
}
.scars-post-toevoegen.scars-open input#titel {
    width: 97%
}
.scars-post {
    display: block;
    margin-bottom: 10px;
    text-align: right;
}

.scars-post img {
    height: auto;
    max-width: 100%;
}

.scars-post iframe {
    max-width: 100%;
}

.scars-avatar, .odd .scars-spreekballon {
    float: left;
}

.even .scars-avatar, .scars-spreekballon {
    float: right;
}

.scars-avatar {
    text-align: center;
    vertical-align: top;
    width: 14.25%;
}

.scars-spreekballon {
    text-align: left;
    width: 82.5%;
    background-color: #fff;
    border: 1px solid #2c2c2c;
    padding: 1.25%;
}

.scars-spreekballon p, .scars-spreekballon strong, .scars-spreekballon a {
    display: inline;
}

#singlepost .scars-spreekballon p {
    display: block;
}

span.scars-reageer, span.scars-edit-link {
    display: block;
    text-align: right;
}

div.scars-meta {
    display: block;
}

span.scars-auteur, span.scars-datum {
    width: 49%;
}

span.scars-datum {
    text-align: right;
}

/*
 * SCARS Tables general
 */
#scars-main ul.scars-table, #scars-main ul.scars-table ul,
#scars-main ul.scars-table.vertical ul li,
#scars-main ul.scars-table.vertical ul ul li {
    display: block;
    clear: both;
}

#scars-main ul.scars-table ul ul {
    margin-bottom: 0;
}

#scars-main ul.scars-table ul ul li {
    padding: 0 0.125%;
}

#scars-main ul.scars-table,
#scars-main ul.scars-table ul,
#scars-main ul.scars-table ul li,
#scars-main ul.scars-table ul ul,
#scars-main ul.scars-table ul ul li {
    list-style: none;
    margin-left: 0;
}

/*
 * SCARS Tables horizontal
 */
#scars-main ul.scars-table.horizontal,
#scars-main ul.scars-table.horizontal ul {
    width: 100%;
}

#scars-main ul.scars-table.horizontal ul ul {
    margin-bottom: 0;
}

ul.list li.selected,
#scars-main ul.scars-table ul ul.selected {
    background-color: #666;
}

#scars-main ul.scars-table.horizontal ul ul.selectable:hover {
    background-color: #aaa;
}

#scars-main ul.scars-table.horizontal ul ul.selectable:hover,
#scars-main ul.scars-table.horizontal ul ul.selectable:hover li {
    cursor: pointer;
}

#scars-main ul.scars-table.horizontal ul ul li {
    display: inline-block;
}

#scars-main ul.scars-table.horizontal ul ul li:nth-child(1) {
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul ul li:nth-child(2) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul ul li:nth-child(3) {
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul ul li:nth-child(4) {
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul ul li:nth-child(5) {
    width: 22%;
}

#scars-main ul.scars-table.horizontal ul ul li:nth-child(6) {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 33.3%;
}

#scars-main ul.scars-table.horizontal ul ul.scars-table-legenda li {
    font-weight: bolder;
}

/*
 * Specifieke horizontale tabellen
 */
#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(1) ul.scars-table-legenda li:nth-child(1) {
    width: 16%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(1) ul.scars-table-legenda li:nth-child(2) {
    text-align: center;
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(1) ul.scars-table-legenda li:nth-child(3) {
    text-align: right;
    width: 14%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(1) ul.scars-table-legenda li:nth-child(4),
#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(1) ul.scars-table-legenda li:nth-child(5) {
    text-align: right;
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(1) ul.scars-table-legenda li:nth-child(6) {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 25%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(1) {
    width: 16%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(2),
#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(3) {
    text-align: center;
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(4),
#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(5) {
    text-align: center;
    width: 7%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(6) {
    text-align: center;
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(7) {
    text-align: right;
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:nth-child(2) ul.scars-table-legenda li:nth-child(8) {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 25%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:last-child ul.scars-table-legenda li:nth-child(1) {
    width: 16.2%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:last-child ul.scars-table-legenda li:nth-child(2) {
    text-align: right;
    width: 19.5%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:last-child ul.scars-table-legenda li:nth-child(3) {
    text-align: right;
    width: 16%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:last-child ul.scars-table-legenda li:nth-child(4),
#scars-main ul.scars-table.horizontal ul#scar-rides li:last-child ul.scars-table-legenda li:nth-child(5) {
    text-align: right;
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides li:last-child ul.scars-table-legenda li:nth-child(6) {
    width: 25%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(1) {
    width: 16%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(2),
#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(3) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(4),
#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(5) {
    text-align: right;
    width: 7%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(6),
#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(7) {
    text-align: right;
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-rides ul li:nth-child(8) {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 25%;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges {
    margin-bottom: 5px;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul li:nth-child(1) {
    width: 15%;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul li:nth-child(2) {
    text-align: right;
    width: 14%;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul li:nth-child(3) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul li:nth-child(4) {
    width: 57%;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul.scars-table-information li div.gauge {
    color: darkslategrey;
    display: block;
    height: 19px;
    padding: 0 5px;
    text-align: right;
    width: 100%;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul.scars-table-information li div.gauge-distance {
    background-color: #ff9119;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul.scars-table-information li div.gauge-consumption {
    background-color: #58ae64;
}

#scars-main ul.scars-table.horizontal ul#scar-gauges ul.scars-table-information li div.gauge-hours {
    background-color: #6699ff;
}

#scars-main ul.scars-table.horizontal ul.scar-txns ul li:first-child {
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul.scar-txns ul li:nth-child(3) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul.scar-txns ul li:nth-child(2) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul.scar-txns ul li:nth-child(4) {
    text-align: right;
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul.scar-txns ul li:nth-child(5) {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 45%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(1) {
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(2),
#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(3) {
    width: 8%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(4),
#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(5),
#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(6) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(7) {
    width: 13%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual ul li:nth-child(8) {
    width: 15%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(1) {
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(2),
#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(3) {
    width: 6%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(4) {
    width: 7%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(5),

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(6),
#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(7) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(8) {
    width: 12%;
}

#scars-main ul.scars-table.horizontal ul#scar-costs-individual-with-usage ul li:nth-child(9) {
    width: 12.5%;
}

#scars-main ul.scars-table.horizontal ul#scar-mail-html ul.scars-table-legenda li:nth-child(1) {
    width: 50%;
}

#scars-main ul.scars-table.horizontal ul#scar-mail-html ul.scars-table-legenda li:nth-child(2) {
    width: 22.5%;
}

#scars-main ul.scars-table.horizontal ul#scar-mail-html ul.scars-table-legenda li:nth-child(3) {
    width: 22.5%;
}

table#scar-mail-notifications {
    border: thin solid #599f0b;
    margin-bottom: 15px;
}

table#scar-mail-notifications tr {
    height: 34px;
}

table#scar-mail-notifications tr:nth-child(1) input,
table#scar-mail-notifications tr:nth-child(2) input {
    height: 20px;
    width: 20px;
}

table#scar-mail-notifications tr.scars-table-legenda th {
    font-weight: bolder;
}

table#scar-mail-notifications tr td {
    text-align: center;
}

table#scar-mail-notifications tr td:first-child {
    padding-left: 3px;
    text-align: left;
    width: 40%;
}

table#scar-mail-notifications tr td:nth-child(2) {
    width: 17.5%;
}

table#scar-mail-notifications tr td:nth-child(3) {
    width: 17.5%;
}

table#scar-mail-notifications tr td:nth-child(4) {
    width: 17.5%;
}

table#scar-mail-notifications tr.scars-table-legenda th {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    height: 24px;
    text-align: center;
    width: 17.5%;
}

table#scar-mail-notifications tr.scars-table-legenda th:first-child {
    background: none;
    padding-left: 3px;
    text-align: left;
    width: 40%;
}

table#scar-mail-notifications tr.scars-table-legenda th:nth-child(2) {
    background-image: url('/scars/images/scars-add.png');
}

table#scar-mail-notifications tr.scars-table-legenda th:nth-child(3) {
    background-image: url('/scars/images/scars-edit.png');
}

table#scar-mail-notifications tr.scars-table-legenda th:nth-child(4) {
    background-image: url('/scars/images/scars-delete.png');
}

#scars-main ul.scars-table.horizontal ul#scar-users ul li:first-child {
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul#scar-users ul li:nth-child(2) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul#scar-users ul li:nth-child(3) {
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-users ul li {
    width: 7.5%;
}

#scars-main ul.scars-table.horizontal ul#scar-users ul li:nth-last-child(2) {
    width: 9%;
}

#scars-main ul.scars-table.horizontal ul#scar-users ul li:last-child {
    width: 15%;
}

#scars-main ul.scars-table.horizontal ul.scar-varkosten ul li:first-child {
    width: 20%;
}

#scars-main ul.scars-table.horizontal ul.scar-varkosten ul li:nth-child(2) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul.scar-varkosten ul li:nth-child(3) {
    width: 10%;
}

#scars-main ul.scars-table.horizontal ul.scar-varkosten ul li:nth-child(4) {
    width: 15%;
}

#scars-main ul.scars-table.horizontal ul.scar-varkosten ul li:last-child {
    width: 22%;
}

#scars-main ul.scars-table.horizontal ul#scar-scars ul li:nth-child(1) {
    width: 12%;
}

#scars-main ul.scars-table.horizontal ul#scar-scars ul li {
    width: 13%;
}

#scars-main ul.scars-table.horizontal ul#scar-scars ul li:last-child {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 32%;
}

#scars-main ul.scars-table.horizontal ul#scar-statuses ul li:nth-child(1) {
    width: 12%;
}

#scars-main ul.scars-table.horizontal ul#scar-statuses ul li:nth-child(2) {
    width: 15%;
}

#scars-main ul.scars-table.horizontal ul#scar-statuses ul li:nth-child(3),
#scars-main ul.scars-table.horizontal ul#scar-statuses ul li:nth-child(4) {
    width: 13%;
}

#scars-main ul.scars-table.horizontal ul#scar-statuses ul li:last-child {
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    width: 43%;
}

/*
 * SCARS Tables vertical
 */
#scars-main ul.scars-table.vertical li, #scars-main ul.scars-table.vertical ul ul {
    display: inline-block;
}

#scars-main ul.scars-table.vertical li {
    vertical-align: top;
    width: 47.5%;
    margin-right: 2%;
}

#scars-main ul.scars-table.vertical ul, #scars-main ul.scars-table.vertical ul li {
    width: 100%;
    margin-right: 0;
}

#scars-main ul.scars-table.vertical ul ul {
    width: 22.5%;
}

#scars-main ul.scars-table.vertical ul ul:first-child {
    width: 47.5%;
}

/*
 * Headerfix
 */

#scars-title,
#scars-wrapper.fixed #scars-header,
#scars-wrapper.fixed #left,
#scars-wrapper.fixed .scars-title {
    position: fixed;
}

#scars-title {
    margin: 0 auto 0 -482px;
    width: 800px;
    left: 50%;
    top: 10px;
    z-index: 200;
}

#scars-wrapper.fixed #scars-header {
    background: #ffffff url('images/scars-header-fixed.jpg') no-repeat center top;
    height: 100px;
    overflow: hidden;
    top: 0;
    z-index: 150;
}

#scars-wrapper.fixed #scars-quote {
    background-image: none;
    float: left;
    height: auto;
    width: 98%;
    margin: 50px 0 0 0;
}

#scars-wrapper.fixed #scars-quote #scars-quote-text {
    display: block;
    padding: 0;
}

#scars-wrapper.fixed #scars-quote-loggedin {
    text-align: left;
}

#scars-wrapper.fixed #scars-quote-loggedin a {
    display: block;
}

#scars-wrapper.fixed #scars-quote-notloggedin {
    width: 100%;
}

#scars-wrapper.fixed #scars-quote-loggedin span,
#scars-wrapper.fixed #scars-quote-notloggedin span {
    display: inline;
    padding-left: 0;
    width: auto;
}

#scars-wrapper.fixed #scars-quote #scars-quote-loggedin .scars-line-five,
#scars-wrapper.fixed #scars-quote #scars-quote-notloggedin .scars-line-four {
    position: absolute;
    z-index: 2500;
    right: 0;
    top: 0;
}

#scars-wrapper.fixed #scars-quote #scars-quote-loggedin .scars-line-five a,
#scars-wrapper.fixed #scars-quote #scars-quote-notloggedin .scars-line-four a {
    display: inline;
}

#scars-wrapper.fixed #scars-header nav {
    position: absolute;
    bottom: 5px;
    width: 98.5%;
}

#scars-wrapper.fixed #scars-header nav .nav-menu a, #scars-wrapper.fixed #scars-header nav .nav-menu a:link {
    color: #2c2c2c;
}

#scars-wrapper.fixed .scars-title {
    border: 2px solid #fff;
    border-bottom: 0;
    background-color: #81ea73;
    top: 114px;
    z-index: 200;
}

#adminbar-visible #scars-title {
    top: 42px;
}

#adminbar-visible #scars-wrapper.fixed #scars-header {
    background: #ffffff url('images/scars-header-fixed.jpg') no-repeat center -32px;
    top: 32px;
}

#scars-wrapper.fixed .scars-content {
    position: relative;
}

#adminbar-visible #scars-wrapper.fixed .scars-title {
    top: 146px;
}

.beneden .scars-content {
    margin-top: 152px;
}

#left.fixed {
    top: 142px;
}

#scars-screenmode {
    width: 0;
    height: 0;
    display: none;
}

/*
 * Scars responsiveness
 */
@media print {
    #scars-screenmode {
        display: none;
    }

    body, div, a, li, p, table, h1, h2, h3, h4, h5, h6 {
        color: #000000;
        background-color: #ffffff;
        background-image: none;
    }

    img, nav, #scars-quote, #scars-footer {
        display: none;
    }

    .keen, .ktwee, .kdrie, .kvier, .kvijf, .kzes, .kzeven, .kacht, .knegen, .ktien {
        border: 0 solid #81ea73;
    }
}

@media screen and (max-width: 1023px) {
    body {
        background-image: none;
    }

    #scars-screenmode {
        display: inline;
    }

    #scars-title,
    #scars-wrapper.fixed #scars-header,
    #scars-wrapper.fixed #left,
    #scars-wrapper.fixed .scars-title {
        position: relative;
    }

    #scars-title {
        float: left;
        left: 1.25%;
        margin: 0 auto;
        width: 97.5%;
    }

    #adminbar-visible #scars-title {
        position: absolute;
        left: 1.25%;
        top: 42px;
    }

    .scars-site-title h1, .scars-site-title h1 span {
        font-size: 22px;
    }

    #scars-wrapper {
        background: url('images/scars-header-1024.jpg') no-repeat left -10px;
        border: 1px solid #24890d;
        border-top: 0;
    }

    #scars-canvas {
        width: 97.5%;
        padding-top: 5%;
        margin: 0 auto;
    }

    #scars-header {
        padding: 0 0 0 0;
    }

    .scars-site-title a h1 {
        color: #2c2c2c;
    }

    #scars-quote {
        background-image: none;
        float: left;
        height: auto;
        width: 100%;
        margin: 15px 0 0 0;
    }

    #adminbar-visible #scars-quote {
        margin: 30px 0 0 0;
        padding-left: 1.25%;
    }

    #scars-quote #scars-quote-text {
        padding: 0;
    }

    #scars-quote-text span {
        display: inline;
        width: auto;
    }

    #scars-quote-loggedin {
        text-align: left;
    }

    #scars-quote-notloggedin {
        width: 100%;
    }

    #scars-quote-notloggedin .scars-line-one,
    #scars-quote-notloggedin .scars-line-two,
    #scars-quote-notloggedin .scars-line-three,
    #scars-quote-notloggedin .scars-line-four,
    #scars-quote-notloggedin .scars-line-five {
        padding-left: 0;
    }

    #scars-quote #scars-quote-loggedin .scars-line-five,
    #scars-quote #scars-quote-notloggedin .scars-line-four {
        position: absolute;
        z-index: 2500;
        right: 0;
        top: 0;
    }

    nav li a {
        font-size: 14px;
    }

    #menu-item-45 {
        display: none;
    }

    #scars-main {
        display: block;
        margin: 5px 0;
        padding: 0 0 0 0;
    }

    a.tilehover, a.tilehover.een, a.tilehover.drie, a.tilehover.vijf, a.tilehover.zeven, a.tilehover.negen {
        width: 48.75%;
        float: left;
        margin: 0 1.25% 1.25% 0;
    }

    a.tilehover.twee, a.tilehover.vier, a.tilehover.zes, a.tilehover.acht {
        float: right;
        margin: 0 0 1.25% 0;
    }

    div#left {
        width: 97.5%;
    }

    div#right {
        width: 100%;
    }

    div#left, div#right {
        clear: both;
    }

    #left-top, #left-middle {
        clear: none;
        float: left;
        width: 260px;
    }

    #left-middle {
        margin: 0 0 10px 20px;
    }

}

@media screen and (max-width: 782px) {
    input#user_login.input, input#user_pass.input {
        font-size: 1.5em;
    }

    input#rememberme {
        width: 25px;
    }

    nav {
        height: 41px;
    }
    #scars-main #left ul.list, #scars-main #left ol.list {
        font-size: 100%;
    }

}

@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .list {
        height: 2em;
    }

    img.next, img.prev {
        height: 2em;
        width: 2em;
    }

    .privacy-policy-page-link {
        text-align: right;
    }

    #wpadminbar {
        display: none;
    }

    #scars-screenmode {
        display: block;
    }

    #adminbar-visible {
        height: 0;
    }

    #scars-title, #adminbar-visible #scars-title {
        background-color: #599f0b;
        border: 1px solid #fff;
        height: 41px;
        left: 1%;
        margin: 0 auto;
        padding: 3px 0;
        position: fixed;
        top: 3px;
        width: 97.5%;
    }

    .scars-site-title a h1, .scars-site-title a h1 span,
    .scars-site-title h1, .scars-site-title h1 span {
        color: #fff;
        font-size: initial;
        height: 100%;
        padding-left: 1.25%;
        width: 84%;
    }

    .scars-site-title div.cabinsketch {
        color: #fff;
        font-size: 0.8em;
        height: 0;
        left: 22px;
        position: absolute;
        top: 22px;
        width: 84%;
    }

    #scars-header nav {
        display: none;
    }

    #scars-main {
        margin: 5px 0;
    }

    .scars-dialog {
        left: 2%;
        position: fixed;
        top: 60px !important;
        width: 95% !important;
    }

    .telefoonmenu {
        display: block;
        font-family: 'Cool Collective Iconen', sans-serif;
        position: fixed;
        right: 10px;
        top: 18px;
        color: #fff;
        font-size: 45px;
    }

    .telefoonmenu:hover {
        cursor: pointer;
    }

    .start-period input[type="datetime-local"],
    .end-period input[type="datetime-local"] {
        display: inline-block;
        font-size: 1.5em;
        height: 1.5em;
        width: 60%;
    }

    .start-period input[type="datetime-local"]:valid+span:after,
    .end-period input[type="datetime-local"]:valid+span:after {
        color: #24890d;
        content: '✓';
        font-size: 1.5em;
        padding-left: 1px;
    }

    .start-period input[type="datetime-local"]:invalid+span:after,
    .end-period input[type="datetime-local"]:invalid+span:after {
        color: red;
        content: '✖';
        font-size: 1.5em;
        padding-left: 1px;
    }

    .scar-balanse {
        display: none;
    }

    .scars-login, .scars-logout, .zeven, .acht, .negen, .tien {
        display: inline;
    }

    a.tilehover, a.tilehover.een, a.tilehover.drie, a.tilehover.vijf, a.tilehover.zeven, a.tilehover.negen {
        width: 99%;
        height: 40px;
        clear: both;
        display: block;
        float: none;
        margin: 0 0 5px 0;
    }

    .tile-content {
        height: auto;
    }

    .tile-content h4 {
        font-size: 120%;
    }

    a .tile img {
        clear: none;
        display: inline;
        float: right;
        padding: 5px;
        margin: 0 0;
        width: 40px;
        height: auto;
    }

    nav, .tilecontent, #scars-quote {
        display: none;
    }

    /* Input boxes */
    input {
        font-size: 1.3em;
    }

    /* jquery-ui components */
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-size: 1.3em;
    }

    .ui-widget.ui-widget-content {
        border: none;
    }

    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        font-size: 1.1em;
    }
    /* end jquery-ui components */

    .var-unit-amounts .unit-amount {
        width: 38%;
    }

    .var-unit-amounts .unit-amount input {
    }

    .var-unit-amounts .unit-amount-date {
        width: 60%;
    }

    .var-unit-amounts .unit-amount-date input {
        display: inline-block;
    }

    .var-unit-amounts .unit-amount-date label,
    .var-unit-amounts .unit-amount label {
        display: inline-block;
        font-weight: normal;
    }

    .var-unit-amounts .unit-amount-date label {
        text-align: left;
        width: 30%;
    }

    .var-unit-amounts .unit-amount label {
        text-align: left;
        width: 5%;
    }

    .unit-amount-date input[type="date"] {
        margin: 5px 0;
    }

    div#left-top {
        margin: 0 auto;
        width: 100%;
    }

    #scars-canvas {
        padding: 1%;
    }

    #scars-wrapper {
        background: transparent url('images/scars-header-680.jpg') no-repeat fixed -10px 10px;
        min-height: 460px;
        padding-top: 46px;
    }

    #scars-wrapper.scars-home {
        background: transparent url('images/scars-header-680.jpg') no-repeat -10px 30px;
        padding-top: 100px;
    }

    #scars-wrapper.logged-in {
        padding-top: 46px;
    }

    #scars-wrapper.scars-home.logged-in {
        background: transparent url('images/scars-header-680.jpg') no-repeat -10px 30px;
        padding-top: 100px;
    }

    .scars-page .scars-content {
        padding: 1%;
    }

    #left-top, #left-middle {
        float: none;
        margin: 0 auto;
        width: 100%;
    }
}