* { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

html, body { margin: 0; padding: 0; }

body { padding: 20px; }

body, input, textarea, select { font-family: 'Lato', Arial; font-size: 13px; line-height: 19px; color: #000; }

a { color: #000; }
a img { border: 0; }

/*
röd: #C81414
blå: #00459a
ljusgrå: #f2f2f2
grå: #E1E2E2
mörkgrå: #C7C8CA
*/

.logo { }

.logged-in { float: right; }

.edit .logo { float: right; }
.edit .logged-in { padding-right: 30px; }

.menu { float: left; width: 100%; margin: 20px 0 40px; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.menu ul li { float: left; margin-right: 10px; }
.menu ul li a { float: left; text-decoration: none; padding: 7px 10px; border-radius: 2px; background: #CCC; border: 1px solid #000; }

label { display: block; font-weight: bold; padding: 0px 0 2px; }
td label { font-weight: normal; padding: 0; }
input[type=text],
textarea,
input[type=date],
input[type=password],
select { border: 1px solid #CCC; padding: 5px; width: 300px; max-width: 100%; }
select { width: auto; }

.customer label { padding-top: 10px; }
.customer td label { padding-top: 0; }

input.small { width: 100px; }
input.mini { width: 60px; }

textarea { width: 300px; height: 80px; }
input.ndi_supplier_number { width: 100px; }
input.datepicker { width: 100px; }
input.tread_depth_new,
input.tread_depth_now,
input.tread_depth_percent { width: 40px; }

input.error, textarea.error { border: 2px solid #CC0000; }

form span.error { color: #CC0000; }

.list { border-collapse: collapse; }
.list th,
.list td { text-align: left; padding: 5px 10px; border-bottom: 1px solid #CCC; }
.list td { border-color: #DDD; }
.list tbody tr:nth-child(odd) td { background: #fafafa; }
.list tfoot td { border: 0; padding-top: 20px; }

input[type=submit],
a.btn { padding: 14px 20px; cursor: pointer; font-size: 15px; background: #5ab451; border: 1px solid #4a9343; color: #FFF; font-weight: bold; text-decoration: none; border-radius: 3px; }

a.btn { background: #121212; border-color: #000; }

.flash { float: left; width: 100%; list-style: none; margin: 0; padding: 0; }
.flash span { float: left; width: 100%; font-size: 14px; border: 2px solid #5ab451; background: #6dde62; padding: 10px 20px 10px 20px; margin-bottom: 20px; border-radius: 3px; }
.flash span.error { border-color: #990000; background-color: #CC0000; font-weight: bold; color: #FFF; }

.head { float: left; width: 100%; padding: 10px; background: #333; color: #FFF; font-weight: bold; font-size: 15px; }
.customer,
.product,
.reason,
.rows,
.row,
.filter,
.vehicle,
.person { float: left; width: 100%; padding: 10px; border: 1px solid #CCC; background: #fafafa; margin-bottom: 20px; }
.customer .contractor { float: left; width: 100%; margin-top: 10px; }

.vehicle div { float: left; margin-right: 30px; }

.reason textarea { width: 220px; }

.product .box { float: left; margin-right: 30px; }
.product .original { display: none; }

.image-loading { position: fixed; z-index: 100; display: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); color: #FFF; text-align: center; }
.image-loading-content { width: 200px; height: 70px; position: absolute; left: 50%; top: 50%; margin: -35px 0 0 -100px; }
.image-loading-content h3 { font-size: 21px; margin: 20px 0 0 0}

a.new-row,
a.remove-row { float: left; text-decoration: none; font-size: 18px; background: #f2f2f2; border: 1px solid #CCC; padding: 12px 15px; border-radius: 8px;  }
a.new-row:hover,
a.remove-row:hover { background: #ebebeb; }
span.add,
span.remove { float: left; width: 20px; height: 20px; border-radius: 10px; margin-right: 10px; background: #5ab451; text-align: center; color: #FFF; font-weight: bold; font-size: 18px; }
span.remove { background: #CC0000; }
a.remove-row { font-size: 14px; padding: 10px; margin-left: 20px; }

ul.row-images { list-style: none; margin: 0; padding: 0; }
ul.row-images li { float: left; margin: 0 10px 10px 0; border: 1px solid #CCC; text-align: center; background: #FFF; padding: 10px; }
ul.row-images li img { display: block; }
ul.row-images li a { display: block; margin: 10px 0 0; }

div.error { float: left; width: 100%; margin: 10px 0; background: #CC0000; color: #FFF; padding: 10px; }
td.error input { border-color: #CC0000; }

.edit h1 { margin-bottom: 30px; }
.edit h4 { margin: 0 0 5px; font-size: 16px; }
.edit .status { float: left; width: 100%; font-size: 18px; margin-bottom: 20px; font-weight: bold; }

.edit .info { float: left; }
.edit .product { float: right; width: auto; }

.edit .status .icon,
.list .icon { float: left; width: 20px; height: 20px; background: #FFF; border-radius: 10px; border: 2px solid #eaeaea; margin-right: 10px; }
.edit .status .status-2,
.edit .status .status-4,
.list .status-2 { background: #2bcc00;  border-color: #23a600; }
.edit .status .status-1,
.edit .row .status .status-2,
.edit .status .status-3,
.list .status-1 { background: #fffc00; border-color: #e6e300; }
.edit .status .status--1 { background: #CC0000; border-color: #990000; }

.edit .logs { float: left; width: 100%; margin-top: 20px; background: #FFF; padding: 20px; border: 1px solid #eaeaea; }
.edit .logs h3 { margin-top: 0; }
.edit .logs [data-lightbox] img { border: solid 1px #ccc; margin: 15px 15px 15px 0; }

.edit .images { float: left; width: 100%; margin-top: 20px; background: #FFF; padding: 20px; border: 1px solid #eaeaea; }

.edit .product .list { float: left; }
.edit .product .image { float: left; margin-left: 20px; padding: 10px; border: 1px solid #eaeaea; background: #FFF; }

.edit table.list td,
.edit table.list th { padding-right: 30px; }

.filter .field { float: left; margin-right: 10px; }
.filter .field input[type=submit] { padding: 4px 10px; }

input.small { width: 100px; }
input.medium { width: 200px; }


/* New */