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

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

body, input, textarea, select, td, th { font-family: Lato, sans-serif; font-size: 14px; color: #000; }

.menu { float: left; width: 100%; background: #f0f0f0; margin-bottom: 20px; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.menu ul li { float: left; }
.menu ul li a { float: left; padding: 15px 20px; font-size: 14px; font-weight: bold; color: #262626; text-transform: uppercase; border-right: 1px solid #CCC; }

h1 { margin-top: 0; margin-bottom: 40px; position: relative; display: block; }
h1:after {
	content:'';
	position:absolute;
	left:0; right:0;
	top:100%;
	margin-top: 10px;
	width:80px;
	height:6px;
	background:#ef3c30;
}

p { margin: 0; }

.head { float: left; width: 100%; background: url(../images/bg.jpg) center center; background-size: cover; }

div.top-bar { float: left; width: 100%; height: 5px; background: #ef3c30; }
div.logo { float: left; margin: 0px 0 20px 20px; padding: 20px; background: #FFF; }

a { color: #000; text-decoration: none; }
input[type=submit],
a.btn { display: inline-block; padding: 12px 20px; font-weight: bold; text-transform: uppercase; background: #ef3c30; text-decoration: none; color: #FFF; border-radius: 20px; }
a.btn-small { padding: 7px 12px; font-size: 12px; background: #262626; }
a.btn-r { float: right; }
a.btn-icon { padding: 12px 12px; }
a.btn-grey { background: #eee; color: #262626; }

input[type=submit] { background: #5ab451; border: 0; cursor: pointer; }

.form-data { display: none; }
.config .form-data { display: block; }

.filter { float: left; width: 100%; margin: 20px 0; padding: 10px; border: 1px solid #CCC; background: #F7F7F7; }
.filter input[type=text] { width: 150px; }

.list { border-collapse: collapse; }
.list th,
.list td { text-align: left; padding: 10px; border-bottom: 1px solid #E5E5E5; }
.list thead th { border-color: #CCC; }
.list tbody tr:nth-child(odd) th,
.list tbody tr:nth-child(odd) td { background: #F7F7F7; }
.list .r { text-align: right; }
.list .c { text-align: center; }

td.red { color: red; }
td.green { color: green; }

label { display: block; font-weight: bold; padding: 10px 0 3px; }
select { padding: 5px 10px; border: 1px solid #CCC; border-radius: 1px; }
input[type=password],
input[type=text],
textarea { width: 300px; padding: 10px; border: 1px solid #CCC; border-radius: 1px; }
input[type=text].mini { width: 60px; }
input[type=text].small { width: 80px; }
input[type=text].price { width: 80px; }


.user { float: right; margin: 20px; line-height: 120%; color: #FFF; }
.user a { color: #ef3c30; }

.main { float: left; width: 100%; padding: 20px; }

.box { float: left; background: #FAFAFA; width: 100%; margin-bottom: 20px; }
.box .body { float: left; width: 100%; padding: 20px; }
.box h2 { float: left; margin: 0; width: 100%; padding: 20px; background: #262626; color: #FFF; text-transform: uppercase; }
.box h3 { text-transform: uppercase; color: #262626; position: relative; margin: 0 0 10px; }
.box h3:after { content:'';
		position:absolute;
		left:0; right:0;
		top:100%;
		margin-top: 10px;
		width:80px;
		height:6px;
		background:#ef3c30;}

.box .field { float: left; margin-right: 10px; }
.box .field-submit { padding-top: 20px; }
.box .field label { padding-top: 0; }

/* Flash */
.flash { float: left; width: 100%; margin: 0 0 20px; position: relative; z-index: 1; }
.flash span { float: left; width: 100%; font-size: 18px; text-align: left; font-weight: bold; background: #6dde62; padding: 20px; color: #285524; }
.flash span.error { border-color: #990000; background-color: #e30613; font-weight: bold; color: #FFF; }


.tractor .brand { float: left; padding-right: 20px; }
.tractor .model { float: left; display: none; }
.config .tractor .model { display: block; }
.tractor .result_tractor { float: left; width: 100%; padding-top: 20px; }
.tractor .result_tractor .list { float: left; margin-right: 50px; }

.tire_search { display: none; position: fixed; z-index: 10; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.8); top: 0; left: 0; text-align: center; }
.tire_search a.close { position: absolute; right: 20px; top: 20px; text-transform: uppercase; font-weight: bold; font-size: 16px; color: #CCC; }
.tire_search .content { position: relative; width: 60%; display: inline-block; margin-top: 20px; padding: 40px; background: #FFF; }
.tire_search .content h4 { margin: 0 0 20px; font-size: 18px; text-transform: uppercase; }
.tire_search input[type=text] { font-size: 16px; padding: 20px; margin-top: 20px; width: 60%; }
.tire_search .ignore-box { display: inline-block; width: 60%; padding-top: 10px; text-align: center; }
.tire_search .ignore-box label { display: inline; font-weight: normal; }
.tire_search .radios { float: left; width: 100%; margin-top: 20px; text-align: center; }
.tire_search .radios table a.btn { margin-top: 0; }

.tires { display: none; }
.config .tires { display: block; }
.tires .original { float: left; width: calc(50% - 10px); margin-right: 10px; }

.tires .new { float: right; width: calc(50% - 10px); margin-left: 10px; }

.tires .original a.btn,
.tires .new a.btn { margin-top: 20px; }

.tires h4 { font-size: 16px; margin: 20px 0; }

.tires .result_tire_front_original,
.tires .result_tire_back_original,
.tires .result_tire_front,
.tires .result_tire_back { padding: 10px 0 30px; }

.tires a.delete { padding: 0; }
.tires a.delete span { font-size: 18px; }

.tires .list td,
.tires .list th { padding: 5px; }

.track-width { display: none; }
.config .track-width { display: block; }
input.trackwidth { width: 100px; }

.result,
.result_original { float: left; width: 100%; padding-top: 20px; }

.result .icon,
.result_original .icon { font-size: 16px; color: green; }
.result .icon-warning,
.result_original .icon-warning { color: red; }

.jd-search .tire { float: left; width: calc(65% - 10px); margin-right: 10px; }
.jd-search .tire .body-front,
.jd-search .tire .body-back { float: left; width: 50%; }
.jd-search .axel { float: left; width: calc(35% - 10px); margin-left: 10px; }
.jd-search .axel select { padding: 5px; margin-bottom: 20px; }
.jd-search a.btn { margin-top: 20px; }
.jd-search .result_tire_front,
.jd-search .result_tire_back { padding: 10px 0 30px; }

html { height: 100%; }
body.login { height: 100%; background: url(../images/bg.jpg) center center no-repeat; background-size: cover; }
body.login .login-content { display: inline-block; background: #FFF; padding: 30px; width }
body.login .head { background: none; }
body.login input { max-width: 100%; }

/* Offert */
body.offert { text-align: center; }
body.offert .content { display: inline-block; width: 800px; text-align: left; }

body.offert .logo { margin-left: 0; }

body.offert div.info { float: left; margin: 0 50px 30px 0; line-height: 150%; }

body.offert table.articles { border-collapse: collapse; }
body.offert table.articles th,
body.offert table.articles td { text-align: left; padding: 8px 10px; border: 1px solid #eaeaea; }

body.offert table.articles th.r,
body.offert table.articles td.r { text-align: right; }

body.offert form a { color: #ef3c30; text-decoration: underline; }

.mobile { display: none !important; }

@media only screen and (max-width: 770px) {

	.desktop { display: none !important; }
	.mobile { display: block !important; }

	h1 { margin-left: 15px; }

	img.logo { height: 30px; margin-bottom: 20px; }

	.main { padding: 0; }
	.main p { padding: 15px; }
	.main .btn-r { margin-right: 15px; }
	div.login { padding: 20px; }
	body.login .login-content { width: calc(100% - 40px); margin-left: 20px; }
	body.login h1 { margin-left: 0; }

	body, input, textarea, select, td, th { font-size: 16px; }

	.box h2 { font-size: 18px; padding: 15px; }
	.box .body { padding: 15px; }
	
	.tractor .model,
	.tractor .brand { width: 100%; padding-right: 0; }
	.tractor .brand select,
	.tractor .model select { width: 100%; padding: 10px; }

	.tire_search .content { width: calc(100% - 40px); padding: 15px; }
	.tire_search input[type="text"] { float: left; width: 100%; }
	.tire_search .content h4 { text-align: left; }

	.tractor .result_tractor .list { clear: both; margin-top: 20px; margin-right: 0 }

	.tires .original { width: 100%; margin-right: 0; }
	.tires .new { width: 100%; margin-left: 0; }

	td.rim-front div { margin-top: 10px; }
	td.rim-back div { margin-top: 10px; }


	.jd-search .tire { float: left; width: 100%; margin-right: 0px; }
	.jd-search .tire .body-front,
	.jd-search .tire .body-back { width: 100%; }
	.jd-search .axel { width: 100%; margin-left: 0px; }
	.jd-search .axel select { width: 100%; }


	body.offert .content { width: 100%; }
	body.offert .logo { margin: 0 0 10px 10px; padding: 10px; }
	body.offert .logo img { height: 30px; }
	body.offert h1 { margin: 20px 0 40px; font-size: 24px; }
	body.offert .main .content { padding: 10px; }

	body.offert div.info { width: 100%; margin: 0 0 20px; }
	body.offert table.articles { width: 100%; }
	body.offert table.articles table { border-collapse: collapse; }
	body.offert table.articles table td { font-size: 14px; padding: 6px 8px; }

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


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3akvwj');
  src:  url('fonts/icomoon.eot?3akvwj#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3akvwj') format('truetype'),
    url('fonts/icomoon.woff?3akvwj') format('woff'),
    url('fonts/icomoon.svg?3akvwj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-warning:before {
  content: "\e900";
}
.icon-chevron-down:before {
  content: "\e901";
}
.icon-chevron-small-down:before {
  content: "\e902";
}
.icon-chevron-small-left:before {
  content: "\e903";
}
.icon-chevron-small-right:before {
  content: "\e904";
}
.icon-chevron-small-up:before {
  content: "\e905";
}
.icon-chevron-up:before {
  content: "\e906";
}
.icon-download:before {
  content: "\e907";
}
.icon-save:before {
  content: "\e908";
}
.icon-trash:before {
  content: "\e909";
}
.icon-add-user:before {
  content: "\e90a";
}
.icon-area-graph:before {
  content: "\e90b";
}
.icon-bar-graph:before {
  content: "\e90c";
}
.icon-check:before {
  content: "\e90d";
}
.icon-cross:before {
  content: "\e90e";
}
.icon-cup:before {
  content: "\e90f";
}
.icon-cw:before {
  content: "\e910";
}
.icon-erase:before {
  content: "\e911";
}
.icon-export:before {
  content: "\e912";
}
.icon-grid:before {
  content: "\e913";
}
.icon-heart-outlined:before {
  content: "\e914";
}
.icon-heart:before {
  content: "\e916";
}
.icon-help-with-circle:before {
  content: "\e917";
}
.icon-help:before {
  content: "\e918";
}
.icon-home:before {
  content: "\e919";
}
.icon-info-with-circle:before {
  content: "\e91a";
}
.icon-info:before {
  content: "\e91b";
}
.icon-location-pin:before {
  content: "\e91c";
}
.icon-mail:before {
  content: "\e91d";
}
.icon-menu:before {
  content: "\e91e";
}
.icon-message:before {
  content: "\e91f";
}
.icon-minus:before {
  content: "\e920";
}
.icon-phone:before {
  content: "\e921";
}
.icon-plus:before {
  content: "\e922";
}
.icon-print:before {
  content: "\e923";
}
.icon-shopping-cart:before {
  content: "\e924";
}
.icon-squared-minus:before {
  content: "\e925";
}
.icon-squared-plus:before {
  content: "\e926";
}
.icon-star-outlined:before {
  content: "\e927";
}
.icon-star:before {
  content: "\e928";
}
.icon-sweden:before {
  content: "\e929";
}
.icon-thumbs-down:before {
  content: "\e92a";
}
.icon-thumbs-up:before {
  content: "\e92b";
}
.icon-typing:before {
  content: "\e92c";
}
.icon-user:before {
  content: "\e92d";
}
.icon-users:before {
  content: "\e92e";
}
.icon-flickr:before {
  content: "\e92f";
}
.icon-pencil:before {
  content: "\e915";
}
.icon-file-empty:before {
  content: "\e930";
}
.icon-copy:before {
  content: "\e931";
}