@charset "utf-8";
* {margin:0; padding:0;}

body {width: 100%; background:#f4f6fe; color:#000; font-family: 'Nunito',Arial,sans-serif;}

body a {display:block; font-size: 16px; font-weight: 700; color:#2c49b9; text-decoration:none;}
body a:hover {color:#385be1}

img { max-width: 100%; }

header {position:fixed; top:0; left:0; width:100%; /*background:#f4f6fe;*/ z-index:9997; padding-bottom:14px;}

header .logo { width:215px; height:40px; margin:30px auto 0;}
header .logo a {display:block; text-indent:-9999px;}
header .logo a img {display:block; height:41px;}

container {display:block;}
.wrapper {display:block; position:relative; width:100%; max-width:1170px; margin:0 auto;}

main {display:block; position: relative; margin: 130px auto 0; text-align: center; min-height:400px;}
main section {display:block; position:relative; }
main #form {display:none; position:relative; }
main #form, #results {width: 1170px; max-width: 100%; margin: 0 auto;}
main #form .container {margin-top: 115px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; }

main > .img_loader {display: none;}

/* ---------- Fonts ---------- */
h1,h2,h3,h4,h5,h5 {font-weight: 700; font-family: 'Nunito',Arial,sans-serif;}

h1 {font-size: 40px; line-height: 45px}
h2 {font-size: 22px}
h3 {font-size: 22px}
h4 {font-size: 18px}

p {font-size: 16px; color: #42444a; line-height: 22px; margin: 10px 0}


/* ---------- Hero ---------- */
#hero {display: none; padding: 60px 0;}
#hero .container {width: 980px; max-width: 90%; margin: 0 auto; text-align: center; }
#hero .container h2{color: #42444a; font-weight: 400; margin: 20px 0 30px; line-height: 45px;}
#hero .container a {margin: 0 auto}


/* ------------------------------********* FORM ELEMENTS *********------------------------------ */

label {font-size: 18px; color: black; display: block; clear: both; margin-bottom: 15px}
label > span, label > i  {font-size: 14px; font-style: normal; color: #42444a; display: block; clear: both; }
label.float_left {float: left; margin: 3px 20px 0 0;}


/* ---------- Inputs ---------- */
.input_value { position: relative; }

textarea, input[type="text"], input[type="button"], input[type="submit"]{-webkit-appearance: none;border-radius: 0;}

input {transition: ease-in-out, width .35s ease-in-out; border: none; border-bottom: 1px solid #b0b2be; color: black; font-family: 'Nunito'; background: transparent; font-size: 30px }
input:focus {border-bottom: 1px solid black; outline: none;}

input[type='number'] {font-size: 30px; text-transform: uppercase; }
input[type=date]:invalid::-webkit-datetime-edit {color: #b0b2be;}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; margin: 0;}
input[type='number'] {-moz-appearance:textfield;}

/* Units on inputs */
.unit { position: absolute; font-size: 30px; text-transform: capitalize; font-weight: 700; color: black; display: block; top: 1px; z-index: 9; }
.unit_kms, .unit_days-per-week {font-size: 30px; text-transform: capitalize; font-weight: 700; color: black; padding: 0 0 0 10px}

.unit_left {padding-left: 48px}

.unit_n_year_left {padding-left: 115px}
.unit_n_month_left {padding-left: 140px}
.unit_n_hour_left {padding-left: 110px}
.unit_gallon_left {padding-left: 95px !important}


.per, .during, .months_year, .minutes_day, .unit_days-per-week {padding: 0 10px; font-size: 30px}
.days_per_month, .hours_week, .min {padding: 0 0 0 10px; font-size: 30px}


/* Small input */
.small_input {margin:0 25px 25px 0; }

.small_input label {font-size: 14px; margin-bottom: 10px}
.small_input label > span {color: #42444a}
.small_input input[type='number'] {width: 152px; font-size: 22px; padding-left: 34px}

.small_input input,
.small_input select,
.small_input .unit,
.small_input .per,
.small_input .unit_kms,
.small_input .unit_days-per-week {font-size: 22px}

/*---  Input help classes ---*/
.no_padding_left {padding-left: 0!important}
.input_300 {width: 300px!important;}
.input_200 {width: 200px!important;}
.input_90 {width: 90px!important}
.input_80 {width: 90px!important}
.input_70 {width: 70px!important}
.input_40 {width: 40px!important}
.no_margin_bottom {margin-bottom: 0!important}
input:disabled, span.disabled, label.disabled, input:disabled + .unit  {opacity: 0.3}

.fuel_efficiency {margin-top: 26px}

.time_spent_part1_form3 input, .time_spent_part2_form3 input,
.fuel_efficiency {margin-bottom: 30px}

/* ---------- Radio tabs  ---------- */
.radio_tabs {display: flex;flex-wrap: wrap; margin: 0px 0 20px;}
.radio_tab_container {position: relative; height:  41px; width:  122px; margin: 0;}

.radio_tab_container input[type='radio'] {opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; border: 1px solid black;}

.radio_tab_container label {text-align: center; text-transform: capitalize; font-size: 16px; font-weight: 400; color: black; padding: 8px 0; margin: 0; border: 1px solid #b0b2be;  border-right: none;}
.radio_tab_container:first-child label {border-radius: 5px 0 0 5px}
.radio_tab_container:last-child label {border-right: 1px solid #b0b2be;  border-radius: 0 5px 5px 0}

.radio_tab_container input[type='radio']:checked + label {background-color: black; color: white;}

 /* Small tabs */
 .small_tabs .radio_tab_container  {height:  29px; width: auto;}
 .small_tabs .radio_tab_container label {font-size: 14px; padding: 4px 10px}


/* ---------- Dropdown ---------- */
select {font-family: 'Nunito',Arial,sans-serif; text-transform: capitalize; margin: 0; background: transparent; padding: 5px 24px 0 0; font-size: 22px; border: 0px; border-bottom: 1px solid black; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; background: url('../img/dd_arrow.png') 100% 16px no-repeat transparent;}
select:focus {outline: none;}
select.big-dropdown {font-size: 30px; padding: 0px 30px 0 0;}
select.fuel_efficiency_standard, select.distance_standard {text-transform: none;}

/* CAUTION: IE hackery ahead */
select::-ms-expand {display: none; /* remove default arrow on ie10 and ie11 */}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0) {
    select {/*background:none; padding: 5px;*/} /*it was hiding the select arrow on Chrome*/
}


/* ---------- Buttons ---------- */
.button, input[type="button"].button{display: initial; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 15px 30px; color: white; font-size: 15px; font-weight: 700; text-align: center;}

.cursor_pointer:hover {cursor: pointer;}

.big {font-size: 18px!important; white-space: normal;}
.medium {padding: 8px 30px!important;}

.btn-blue {background-color: #2c49b9}
.btn-blue-loader {background-image: url('/img/loader30x30.gif'); background-position: center; background-repeat: no-repeat;}
.btn-blue:hover {color: white; background-color: #385be1}

.btn-orange {background-color: #efa00b; padding: 8px 20px;}
.btn-orange:hover {color: white; background-color: #ffae16; cursor: pointer;}


/* ---------- Steps ---------- */
.container .steps {position: fixed; width: 24%; margin: 0 0 0 2%; display: block; z-index: 0;}
.container .steps ul {list-style: none;}
.container .steps ul li {display: block; text-align: left; color: white; position: relative;}
.container .steps ul li span { display: inline-block; line-height: 35px; margin: 0 0 0 40px; color: #d7dbee; font-weight: 700; font-size: 14px;}
.container .steps ul li span.wrong{color: #ef474c;}

.container .steps ul li span.optional {font-size: 12px; font-weight: 400; margin: -8px 0 0 0; line-height: 12px; clear: both; display: block;}
.container .steps ul li:first-child {margin-left: unset;}

.container .steps ul li:before {content: ""; width: 35px; height: 35px; background-color: #d7dbee; position: absolute; border-radius: 100%; }
.container .steps ul li:after {position: absolute; content: ''; background-color: #d7dbee; width: 2px; height: 25px; top: -10px; left: 17px; z-index: -11;}
.container .steps ul li > ul > li:before {width: 10px; height: 10px;margin: 7px 0 0 13px;}
.container .steps ul li > ul > li > span {font-size: 12px; font-weight: 400; margin-left: 30px; line-height: 25px;height: 18px;overflow: hidden;}

.container .steps ul .number:before {color: white; padding: 6px 0 0 11px; width: 22px; height: 27px;}
.container .steps ul .one:before {content: "1"}
.container .steps ul .two:before {content: "2"}
.container .steps ul .three:before {content: "3"}
.container .steps ul .one:after {display: none}

.container .steps ul li {cursor: default;}
.container .steps ul li.active {cursor: pointer;}
.container .steps ul li.active:before {background-color: #2c49b9; color: white}
.container .steps ul li.active:after {background-color: #2c49b9;}
.container .steps ul li.active > span, .container .steps ul li.active ul li.active > span {color: #2c49b9}
.container .steps ul li > ul > li.active:before { background-color: #2c49b9; width: 14px; height: 14px; margin: 4px 0 0 10px; border: 1px solid #2c49b9; -webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1); box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1);}
.container .steps ul li > ul > li.done:before {content: "\2713"; line-height: 16px; font-size: 11px; padding-left: 3px; width: 11px; border: 1px solid #2c49b9; -webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1); box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);}
.container .steps ul li > ul > li.wrong:before { background-color: #ef474c; width: 14px; height: 14px; margin: 4px 0 0 10px; border: 1px solid red; }

/* ---------- Bottom bar ---------- */
.calculate_bottom_bar {
    position: fixed;
    bottom: 20px;
    width: 100%;
    height: 80px;
    left: 0;
    z-index: 999;
}
.calculate_bottom_bar a {display: inline-block;}



/* ------------------------------********* FORM CONTENT *********------------------------------ */
.container .form_part {width: 64%; margin: 0 0 0 30%; display: block; text-align: left; z-index: 10;}

.container .form_part h2.lang-fixed_costs_header_1 {font-size: 30px; line-height: 30px; margin: 0 }
.container .form_part p.lang-fixed_costs_header_2 {color: #868790; margin: 0 }

/* see issue #124 https://github.com/jfoclpf/autocosts/issues/124
.container .form_part .form_part_head_title {display none; margin: 8% 0 30px } */

.container .form_part .field_container {display: block; margin-top: 60px;}

.container .form_part .field1 #commercial_value {margin: 30px 0;}

.container .form_part .field_container .next {/*display: none;*/ margin: 17px 0 0;}
.container .form_part .field_container .next > span + span {font-size: 12px; color: #868790; margin-left: 5px}

.container .form_part #daily_tolls_false_div .no_daily_tolls_description {width: 450px;}

.container .form_part .time_spent_part2_form3 {padding-bottom: 150px;}

.container .form_part .bottom_spacer {padding-top:100px; display: block;}

.container .form_part .error_msg {color:#ef474c;}

/* ------------------------------********* RESULTS CONTENT *********---------------------------- */

#results {display: none;}

/* ------------------------------********* SIDEBARS *********----------------------------------- */
.sidebar {display: none}

.btn-left-sidebar, .btn-right-sidebar {border-radius: 50%; border: 3px solid #2c49b9; width: 45px; height: 45px; background: transparent url('/img/sprites_icons.png') 0 0; }
.btn-left-sidebar:hover, .btn-right-sidebar:hover {border-color: #385be1}
.btn-left-sidebar {position: absolute; left: 27px; top: 27px}
.btn-left-sidebar:hover {background-position: -45px 0}
.btn-right-sidebar {position: absolute; right: 27px; top: 27px; background-position: -90px 0}
.btn-right-sidebar:hover {background-position: -135px 0}

.sidebar.left {position: fixed; top: 0; left: 0; bottom: 0; width: 100%; background: white;}
.sidebar.right {top: 0; right: 0; bottom: 0; width: 100%; background: white;}

.sidebars > .sidebar { position: fixed; color: black; text-align: left; z-index: 9999999; background-color: rgba(0, 0, 0, 0); overflow: hidden;}

.sidebar > .sidebar-left-container, .sidebar > .sidebar-right-container {background: white; width: 30%; height: 110%; padding: 40px 20px; -webkit-box-shadow: 6px 0px 15px -5px rgba(0,0,0,0.56); -moz-box-shadow: 6px 0px 15px -5px rgba(0,0,0,0.56); box-shadow: 6px 0px 15px -5px rgba(0,0,0,0.56);}
.sidebar > .sidebar-left-container > .sidebar-contact {margin: 40px 0 0; clear: both;}
.sidebar > .sidebar-right-container {position: absolute; right: 0; padding: 0 0 40px; -webkit-box-shadow: -6px 0px 15px -5px rgba(0,0,0,0.56);-moz-box-shadow: -6px 0px 15px -5px rgba(0,0,0,0.56);box-shadow: -6px 0px 15px -5px rgba(0,0,0,0.56);}

.sidebar > .sidebar-right-container > h3 {margin: 10px 0 0 20px}
.sidebar > .sidebar-right-container > h4 {margin: 10px 0;}
.sidebar > .sidebar-right-container > h4.yellow-bar {margin-top: 20px}
.sidebar > .sidebar-right-container > h4::before {content: " -"; background-color: #2c49b9; color: #2c49b9; margin-right: 10px;}
.sidebar > .sidebar-right-container > h4.yellow-bar::before {background-color: #efa00b; color: #efa00b;}

.sidebar .sidebar-left-container .worldStats {margin: 20px 0 20px 0; float: left;}
.sidebar .sidebar-left-container .worldStats a {float: left;}
.sidebar .sidebar-left-container .worldStats span {float: left; margin-top: 12px;}
.sidebar .sidebar-left-container .chartIcon {width: 45px; height: 45px; float: left; background: transparent url(/img/sprites_icons.png) -90px 0;}

.sidebar .sidebar-right-container .worldStats {margin-top: 10px; float:left;}
.sidebar .sidebar-right-container .headNote {margin: 0 0 45px 20px;}
.sidebar .sidebar-right-container .downloadButton {background-color: #2c49b9; border-radius: 5px; -webkit-border-radius: 5px; width:18px; height: 22px; padding: 6px 5px 1px 7px; float: right; margin: 10px 20px 0 0; cursor: pointer;}

.sidebar > .sidebar-left-container > .close {position: absolute;margin: -11px 0 0 33%;}
.sidebar > .sidebar-right-container > .close {position: absolute;margin: 29px 0 0 -18%;}

.close {position: relative; display: inline-block; width: 45px; height: 45px; border-radius: 50%; border: 3px solid white;}
.close span{ position: relative; display: inline-block; width: 25px; height: 25px; overflow: hidden; margin: 12px 0 0 10px}
.close span::before, .close span::after { content: ''; position: absolute; height: 4px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: white; margin-top: -4px; border-radius: 5px;}
.close span:before {transform: rotate(45deg);}
.close span:after {transform: rotate(-45deg);}


/* ---------- Tables ---------- */
table {width: 90%; font-size: 12px; line-height: 12px; color: #797b82; margin: 3px 0 0 20px}
table tr {border-bottom: 1px solid #e3e3e3; display: flex; padding: 3px 0;}
table tr:last-child {border-bottom: none;}
table tr td {margin-left: 10px; width: 82%}
table tr td:first-child {display: block}
table tr td + td {text-align: right; width: 18%}

table tr.subtotal td, table.total tr th {color: black; font-weight: 700}

table.total {margin-top: 10px}

table.total::before {content:""; width:100%; position:absolute; height:35px; left:0%; z-index:1}
table.blue-bg::before {background-color:#e9ecf8;}
table.yellow-bg::before {background-color:#fdf5e6;}

table.total tr th {font-size: 16px; line-height: 18px; z-index:2; position: relative; padding-top: 3px; width: 75%}
table.total tr th + th {text-align: right; width: 25%}


/* ---------- Home Footer Animation ---------- */
footer {display:block; background: transparent url('/img/animation-bg.jpg') repeat-x left 134px; height: 280px}
footer .animation {display:block; background: transparent url('/img/animation.gif') repeat-x center top; width: 100%; height: 313px}
