/*
Red: #d02c3a
Blue: #039be5
 */
@import "devices.css";
@import "followup.css";
:root {
    --blue-marker: #1da5f4;
    --blue-secondary: rgba(7, 144, 224, 0.12);
    --blue-secondary-text: #0586d1;
    --red: #d02c3a;
    --divider-medium: #d9dde1;
    --yellow-background: #fff9c4;
    --body-background: #f5f7f9;
}

body {
    /*background-color: #b71c1c;*/
    /*background-color: #039be5;*/
    /*background-color: #ececec;*/
    /*background-color: #fafafa;*/
    /*font-family: Cabin;*/
    /*background-color: #f5f7f9;*/
    background-color: #f5f7f9;
}
.text-underline {
    text-decoration: underline;
}
ul.bulletList {
    margin-left: 1em;
}
ul.bulletList li {
    list-style-type: circle !important;
}
.noWrap {
    white-space: nowrap;
}
.main {
    position: relative;
}
#mainContent {
    
}
.subNav {
    background-color: #fff;
    box-shadow: 0 3px 3px -2px rgba(37, 52, 69, 0.02), 0 6px 9px -2px rgba(37, 52, 69, 0.02), 0 15px 16px -6px rgba(37, 52, 69, 0.04), 0 30px 50px -23px rgba(37, 52, 69, 0.05);
}
table.subNavTable {
    background-color: #fff;
}
div.equalHeightsContainer div.row {
    display: flex;
}
div.equalHeightsContainer div.col {
    display: flex;
    flex-direction: column;
}

div.equalHeightsContainer div.card-panel {
    flex: 1;
}
.clearBoth {
    clear: both !important;
}
button.btn-secondary, button.btn-secondary:active, div.btn-secondary {
    background-color: var(--blue-secondary) !important;
    color: var(--blue-secondary-text);
    box-shadow: none;
}
button.btn-secondary:hover {
    color: #fff;
    background-color: #039be5 !important;
    box-shadow: none;
}
/*
Vue js, hide before mounted
 */
[v-cloak] > * { display:none; }
[v-cloak]::before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
}
div.version {
    position: absolute;
    right: 20px;
    top: 4px;
    color: #ccc;
    font: 11px Verdana;
}
.flex {
    display: flex;
    flex-wrap: wrap;
}
.withDivider {
    border-bottom: 1px solid var(--divider-medium);
    padding-bottom: 1em !important;
}
.withDividerLeft {
    border-left: 1px solid var(--divider-medium);
    padding-left: 2em !important;
    margin-left: -1em !important;
}
.withDividerLeft label {
    margin-left: 1em;
}
.content {
    padding-top: 1em;
    background-color: var(--body-background);
}
a {
    color: #039be5;
}
.red-text, code {
    color: #d02c3a !important;
}
.red-text a {
    color: #d02c3a;
    text-decoration: underline;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-small {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.logoContainer img {
    width: 200px;
    margin-top: 15px;
}
table {
    margin-top: 1em;
}
td {
    vertical-align: top;
}
table tr td, table tr th {
    padding: 0.15rem 0;
    vertical-align: top;
}
tr {
    /*border: none;*/
}
strong {
    font-weight: 600;
}
table.autoWidth {
    width: auto;
}
table.autoWidth td, table.autoWidth th {
    padding-right: 1em;
}
table.autoWidth th {
    vertical-align: top;
}
table.smallTable td, table.smallTable th {
    padding: 2px 1em 2px 0;
    font-size: 11px;
}
.mainColorText {
    color: #039be5;
}
.mainColorBackground {
    background-color: #08587f;
}
.mainColorBorder {
    border-color: #039be5;
}
ul.mainMenu ul.mainMenu li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.mainMenu li a {
    display: inline-block;
    float: left;
    color: #fff;
    /*text-transform: uppercase;*/
    padding: 9px .5em;
    font-size: 13px;
    line-height: 22px;
}
ul.mainMenu li a:hover {
    text-decoration: underline;
}
ul.mainMenu li.active a {
    /*color: #d02c3a;*/
    /*background-color: white;*/
    text-decoration: underline;
}
hr {
    border: none;
    color: #ccc;
    background-color: #ccc;
    height: 1px;
}
.thinGrayLineRight {
    border-right: 1px solid #e6e6e6;
}
/*
.modal {
    z-index: 3000 !important;
    width: 600px;
}
div.modal div.modal-footer {
    background-color: #039be5;
    color: #fff;
}
*/


/*
Forms
 */

textarea.browser-default {
    border: 1px solid #ccc;
    margin-top: 8px;
    padding: 0.5em;
}

div.input-field label {
    /*color: #039be5 !important;*/
}

input[type='text'],
textarea:not(.browser-default)
{
    background-color: transparent !important;
}

input:not([type]),
input[type="text"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="email"]:not(.browser-default),
input[type="url"]:not(.browser-default),
input[type="time"]:not(.browser-default),
input[type="date"]:not(.browser-default),
input[type="datetime"]:not(.browser-default),
input[type="datetime-local"]:not(.browser-default),
input[type="tel"]:not(.browser-default),
input[type="number"]:not(.browser-default),
input[type="search"]:not(.browser-default),
textarea:not(.browser-default)
{
    border-bottom-style:dashed;
    height: 2.2rem;
    margin-top: 0.33rem;
}
.select-month input:nth-child(1), div.select-wrapper:nth-child(2) > input:nth-child(1) {
    border-bottom: none;
}
.dropdown-content {
    position: absolute;
    z-index: 3001;
}

input[type='text'].size-2 {
    width: 2rem;
}
input[type='text'].size-3 {
    width: 3rem;
}
input[type='text'].size-4 {
    width: 4rem;
}
input[type='text'].size-5 {
    width: 5rem;
}
input[type='text'].size-6 {
    width: 6rem;
}
input[type='text'].size-7 {
    width: 7rem;
}
input[type='text'].size-8 {
    width: 8rem;
}
input[type='text'].size-9 {
    width: 9rem;
}
input[type='text'].size-10 {
    width: 10rem;
}
input[type='text'].size-11 {
    width: 11rem;
}
input[type='text'].size-12 {
    width: 12rem;
}
input[type='text'].required {
    background-color: #FFCDD2 !important;
}
div.input-field .centerVertical {
    margin-top: -6px;
}
textarea.materialize-textarea {
    /*padding: 0.5em;*/
    background-color: #fff !important;
}
input[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    background-color: #039be5;
    border-color: #039be5;
}
input[type=text].browser-default {
    border: 1px solid #ccc;
}
input[type='text'].styled.browser-default {
    border-top: none;
    border-right: none;
    border-bottom: 1px dashed #9e9e9e;
    border-left: none;
}

.form-error {
    background-color: rgb(255, 235, 238);
}
input[type='text'].white-input, input[type='select'].white-input, textarea.white-input {
    background-color: #fff !important;
}

table.radioTable {
    margin-top: 0;
}
table.radioTable td {
    text-align: right;
    padding-right: 1em;
}
table.radioTable th {
    color: #616161;
    font-weight: 500;
    padding-left: 1em;
}
table.radioTable label {
    margin-left: 2em;
}

[type="checkbox"] + span:not(.lever), [type="radio"]:not(:checked) + span, [type="radio"]:checked + span {
    padding-left: 28px;
}

label span {
    color: #000;
}

div.missing input[type=text] {
    background-color: #FFCDD2 !important;
}

div.addon-after {
    position: absolute;
    top: .8rem;
    right: .75rem;
    padding: 2px 5px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
input.with-addon-after {
    width: calc(100% - 2em) !important;
}

/*
Cards / panels
 */
div.card span.card-title {
    margin-top: -0.5rem;
}
div.tools {
    margin-top: -20px;
    z-index: 0;
}
div.tools .card-panel {
    border: none !important;
    margin-top: -4px;
    background-color: #5b77a1;
    color: #fff;
    box-shadow: none;
}
div.tools .card-panel a {
    color: #fff;
    text-decoration: underline;
}
div.tools .cardHeader {
    border-bottom: none;
}
div.tools .cardHeader h2 {
    font-size: 24px;
    padding: 0.5em 0;
    font-weight: 400;
    text-transform: uppercase;
}
div.tools .cardHeader h4 {
    border-top: 1px solid #b5c8e5;
    font-size: 16px;
    padding: 1.5em 0 0;
    font-weight: 400;
    text-transform: uppercase;
}
div.tools .cardHeader h4 i {
    /*display: inline-block;*/
    /*margin-top: -7px;*/
    /*color: #8b8c8d;*/
    /*font-size: 30px;*/
}
div.tools div.first {
    padding-top: 0;
    margin-top: -10px !important;
}
div.tools table.condensed tr {
    border-bottom: none;
}
div.tools table.condensed td, div.tools table.condensed th {
    padding-left: 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: normal;
}
div.tools input[type=text] {
    background-color: #fff !important;
}
div.tools button.toolsBtn {
    background-color: #b5c8e5 !important;
    color: #000 !important;
}
div#mainContent .card-panel, div#mainContent .card {
    box-shadow: none;
    border: 1px solid #dfdfdf;
}
div.cardHeader {
    color: #b5c8e5;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px;
    margin-top: 26px;
}
div.cardHeader h4 {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 0 0 0.35rem;
}
div.cardHeader i {
    /*float: right;*/
}
div.smallRoundedPanels div.card-panel {
    border-radius: 6px;
    padding: 0.75em 1.5em 1em;
}
div.smallRoundedPanels div.card-panel button.btn {
    border-radius: 2em;
}
div.smallRoundedPanels div.card-panel span.card-title {
    font-size: 16px;
    font-weight: 500;
    display: block;
    text-align: center;
    padding-bottom: 0.33em;
}
div.horizontalCenteredButtons {
    text-align: center;
}
div.horizontalCenteredButtons button {
    margin-left: 0.33em;
    margin-right: 0.33em;
    border-radius: 2em;
}


a.more {
    /*text-decoration: underline;*/
    /*text-decoration-style: dashed;*/
}
a.more i {
    margin-left: 0.5rem;
}

a.btn.next {
    background-color: #fff;
    color: #000;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 24px;
    box-shadow: none;
}
a.btn.next i {
    font-size: 12px;
}

.debugContainer {
    background-color: #ccc;
    padding: 1px 1em;
    font-size: 12px;
    line-height: 14px;
}
.headerContainer {
    /*background-color: #055883;*/
    position: relative;
    z-index: 1000;
    background-color: #355481;/* light-blue darken-4 */
    padding: 8px 0;
    margin-bottom: 1.5rem;
    height: 70px;
    /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);*/
}
#headerSearch {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 200px;
}
#headerSearch #headerSearchInput, #headerSearch #headerSearchBtn {
    background-color: white !important;
    border: none;
    border-radius: 2px;
    padding: 0 0.5em;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
}
#headerSearch #headerSearchInput {
    width: 120px;
    font-size: 12px;
}
#headerSearch #headerSearchBtn {
    color: rgb(5, 134, 209);
    font-weight: 300;
    font-size: 12px;
    width: 60px;
    background-color: #e0f2fc !important;
}
nav {
    /*margin: 0 0 2rem;*/
    padding: 0 0 0 0;
    /*background-color: #000;*/
    box-shadow: none;
}
div.formHeader {
    margin: 0 0 0.5em;
    font-size: 26px;
    padding: 0 0.75rem;
}
nav#mainNavigation {
    height: auto;
}
/* User links */
#userLinks {
    float: right;
    margin-top: 26px;
    /*margin-right: 24px;*/
}
#userLinks a {
    color: #e6e6e6;
}
#userLinks a:hover {
    color: #fff;
}
.userLinks {
    display: inline-block;
    white-space: nowrap;
}
.userLinks a i {
    position: absolute;
    font-size: 25px;
    right: 0;
    top: 20px;
}
#userLinksContainer {
    position: relative;
}
#frontpageNewsContainer {
    padding-bottom: 0;
    margin-bottom: 2em;
    box-shadow: 0 3px 3px -2px rgba(37, 52, 69, 0.02), 0 6px 9px -2px rgba(37, 52, 69, 0.02), 0 15px 16px -6px rgba(37, 52, 69, 0.04), 0 30px 50px -23px rgba(37, 52, 69, 0.05) !important;
}
#frontpageNewsContainer table, #frontpageTasksContainer table {
    border-bottom: none;
    margin-bottom: 0;
    margin-top: -.33rem;
}
#frontpageTasksContainer {
    padding-bottom: 3em;
}
#frontpageTasksContainer table {
    margin-top: 1em;
    margin-bottom: 1em;
    border-bottom: 1px solid #ccc;
}
#tasksContainer {
    position: absolute;
    right: 5rem;
    top: 4.3rem;
    width: 400px;
    background: white;
    padding: 1em;
    border-radius: 5px;
}
#tasksContainer h2, #frontpageNewsContainer h2, #frontpageTasksContainer h2 {
    margin-top: 0;
    color: #738197;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}
div#headerTasks, div#headerTasksEdit {
    position: relative;
    display: inline-block;
    border-left: 1px solid #536E95;
    margin-left: .5rem;
    padding-left: .5rem;
    margin-right: 30px;
    color: white;
}
div#headerTasks, #headerTasksEdit i {
    font-size: 20px;
}
div#headerTasks i {
    cursor: pointer;
}
div#tasksContainer div.timeTodo {
    margin-top: .5em;
}
table.tasksTable a {
    color: black;
}
table.tasksTable a:hover {
    text-decoration: underline;
}
#headerTasks #tasksBadge {
    position: absolute;
    right: -1em;
    top: -.66em;
    font-size: 11px;
    line-height: 1.5em;
    background-color: #ec543d;
    border: 1px solid white;
    border-radius: 1em;
    padding-left: .5em;
    padding-right: .5em;
}
div#userInfo {
    display: none;
    position: absolute;
    min-width: 200px;
    right: 0;
    top: 70px;
    /*padding: 0.5rem 1rem;*/
    border-radius: 2px;
    z-index: 2000;
    /*font-size: 13px;*/
    background-color: #fff;
}
div#userInfo table td {
    padding: 0.25rem 1rem;
}
div#userInfo a, div#userInfo a:hover {
    color: #039be5;
}

.chipPoints {
    background-color: #616161;
    font-size: 18px;
    padding: 0 0.5em 2px;
    border-radius: 16px;
    margin-right: 6px;
}
.chipPoints a {
    font-size: 12px;
    color: #e0e0e0;
}
.chipPoints i.left {
    margin: 5px 0 0 0;
    font-size: 18px;
}

img.logo {
    height: 64px;
}
div.hits {
    background-color: #fff;
}
div.counter span.btn-floating.btn-large {
    width: auto;
    min-width: 100px;
    height: 100px;
    font-size: 42px;
    padding: 24px 1rem;
}

.pushUp {
    margin-top: 0;
    padding-top: 0;
}

.col.categories {
    margin-top: -1rem;
    margin-bottom: -1rem;
}
.categories a {
    color: #ccc;
}
.categories a.active {
    color: #00acc1;
}
.card-panel.item {
    padding: 0.25em 1em 1px 1em;
    cursor: pointer;
}
.card-panel img {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
#logoUploader .card-image.fancybox img {
    box-shadow: none !important;
}
#logoUploader .card-image.fancybox {
    background-color: #ccc;
}
.card-panel.item span.card-title {
    font-size: 16px;

}
.card-panel.item .price {
    display: inline-block;
    font-size: 20px;
    background-color: #505050;
    margin-bottom: 5px;
    padding: 2px 8px;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.card-panel.item .favorite {
    padding: 6px 6px 0 6px;
    background: url("../images/gui/1x1_black_60_pst.png");
    position: absolute;
    border-radius: 0 0 6px;
}
.card-panel.item .favorite i.material-icons {
    font-size: 24px;
    color: #00acc1;
}
.card-panel.item i.material-icons {
    color: #00acc1;
    margin: 0;
}
.card-panel.item i.favoriteLink {
    color: #505050;
}
.card-panel.item .sellerContainer {
    background: url("../images/gui/1x1_black_60_pst.png");
    text-align: center;
    color: #fff;
    margin-top: -56px;
    padding: 6px 1em;
    font-size: 13px;
    /*background: #000;*/
    position: relative;
    height: 50px;
    /*opacity: .6;*/
}
.card-panel.item .ratingContainer .material-icons {
    font-size: 16px;
}
.horizontalCheckboxes p {
    float: left;
    margin-right: 1rem;
}
.horizontalCheckboxes p label {
    padding-left: 1.7rem;
    font-size: 13px;
}
.horizontalCheckboxes p {
    margin: 0 1rem 0 0;
    width: 30%;
}
.wrapDown {
    clear: both;
    font-size: 1px;
}

.block {
    width: 100%;
}
.page-header {
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
}
#kjennemerke {
    /*text-transform: uppercase;*/
}
.small {
    font-size: 1.25rem;
    font-weight: 300;
}
p.small {
    font-size: 0.75em;
    line-height: normal;
}
.btn-block.small { 
    display:block;
    width: 100%; 
}
table.condensed td, table.condensed th {
    padding: 2px 1em;
    font-size: 11px;
}
table.semi-condensed td, table.semi-condensed th {
    padding: 2px 1em;
    font-size: 12px;
}
.card-panel.main {
    min-height: 700px;
    background: transparent;
}
div.fieldInfo {
    font-size: 11px;
    margin-top: -0.6rem;
    color: #039be5;
}
div#gjKm {
    display: none;
}
#carTable tr:hover, #utstyrTable tr:hover, .customersTable tr:hover, table.tableRowHilite tr:hover {
    background-color: #d9d9d9 !important;
    /*cursor: pointer;*/
}
#carTable td span {
    background-color: #039be5;
    color: #fff;
    padding: 1px 0.25rem;
    border-radius: 10px;
}
#utstyrTable td label span  {
    font-size: 11px;
}
.compactTable {
    font-size: 13px;
    line-height: 13px;
}
.compactTable td, .compactTable th {
    padding: 10px 8px 4px 0;
}
.compactTable select {
    margin-top: -6px;
}
.compactTable.bordered, .normalTable.bordered {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.compactTable.bordered td, .compactTable.bordered th, .normalTable.bordered td, .normalTable.bordered th {
    border-right: 1px solid #ccc;
    padding-left: 8px;
}
#ofvContainer, #carsContainer, #utstyrContainer {
    display: none;
}
table.condensed input[type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
table.condensed input[type="checkbox"].filled-in:checked + span:not(.lever)::after
{
    width: 16px;
    height: 16px;
}
[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    /*background-color: #039be5;
    border-color: #039be5;*/
}
table.condensed input[type="checkbox"].filled-in:checked + span:not(.lever)::before {
    top: 0;
    left: 0;
    height: 9px;
    width: 8px;
}
table.condensed label span {
    height: 16px !important;
    line-height: 16px !important;
}
table.condensed label, table.condensed label span {
    /*font-size: 11px;*/
    /*font-weight: bold;*/
    /*color: #000;*/
}
table.condensed label.add {
    margin-right: 1em;
}
table.condensed input[type="text"].browser-default {
    margin-right: 2em;
}
table.condensed button#utstyrCustomAddBtn {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    margin-top: -2px;
}
select#utstyrAdd {
    padding: 0;
}
table.bordered td, table.bordered th {
    padding-left: 0;
    vertical-align: top;
}
table td.noWrap, table th.noWrap {
    white-space: nowrap;
}
.btn.small {
    font-size: 11px;
    text-transform: none;
    padding: 0.3rem 1em 0.3rem 1em;
    line-height: normal;
    height: auto;
}
.btn.small i {
    font-size: 11px;
}
i.spinnerOnWait {
    display: none;
}
i.spinnerItemDone, i.spinnerOnWait {
    font-size: 18px;
    margin: 5px 0 0 0.1em;
    color: #7a7a7a;
}
tr.noBorderTop {
    border-top: none;
}
table.bordered tbody tr.noBorderBottom {
    border-bottom: none;
}
table.no-border tr {
    border: none;
}
#arsavvikInfo {
    display: none;
}
#regSok {
    display: inline-block;
    border: 2px solid #666;
    background-color: #fff;
    color: #666;
    border-radius: 5px;
    padding: 0 1rem;
    margin-top: -11px;
    height: 38px;
}
.kjennemerkeInput {
    display: inline-block;
    border: 2px solid #666;
    border-radius: 5px;
    background-image: url("/img/gui/reg_no.png");
    background-repeat: no-repeat;
    font-size: 24px;
    height: 38px;
    padding-left: 26px;
    width: 160px;
}
.m1881Lookup {
    display: inline-block;
    border: 2px solid #666;
    border-radius: 5px;
    background-image: url("/img/1881Logo.png");
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: 2px 2px;
    font-size: 24px;
    height: 38px;
    padding-left: 44px;
    width: 180px;
}
#whitelistMsg {
    display: none;
}
#login #loginFooter {
    border-top: 1px solid #ccc;
    margin: 0.5em 0 0;
}
#login .card-content {
    padding: 24px 24px 12px 24px;
}
.switch label strong {
    color: #000;
}
.switch {
    margin: 4px 0 4px -1em;
}
div#userToggle, div#notLoggedinLink {
    font-size: 13px;
    cursor: pointer;
    color: #fff;
}
div#userToggle:hover, div#notLoggedinLink:hover {
    color: #fff;
    text-decoration: underline;
}
div#userToggle i {
    font-size: 20px;
    margin-left: 0.5em;
}
.page-header.loose {
    color: #fff;
}
.roundedBox {
    border-radius: 4px;
}
#userTabs {
    margin-top: 7px;
    border: 1px solid #039be5;
}
.xtra, .hidden, .dinevalg_xtra {
    display: none;
}
.dev {
    display: none;
}
#save {
    display: none;
}
ul.tabs li a.active {
    background-color: #e6e6e6;
}
.tabsSubmenu li a {
    text-transform: none;
    color: #000 !important;
}
.tabsSubmenu li a i {
    font-size: 20px;
    padding-right: 4px;
}
.tabsSubmenu li a.active {
    background-color: #039be5 !important; /* #757575 */
    color: #fff !important;
}
.tabsSubmenu li a:hover {
    color: #355481 !important;
}
.tabsSubmenu li a.active:hover {
    color: #fff !important;
}
.tabsSubmenu .indicator {
    height: 0;
}
/* Main Tabs */
div.mainTabsContainer {
    position: relative;
    /*margin: 0 0.75rem 0;*/
    /*box-shadow: none;*/

}
div.mainTab.active .inner {
    box-shadow: none;
}
div.mainTabsContainer.kunder .inner {
    font-size: 14px;
}
div.dottedLineBehind {
    position: absolute;
    z-index: 500;
    height: 1px;
    border-top: 2px dotted #ccc;
    width: 70%;
    margin-left: 15%;
    top: 40px;
}
div.col.mainTab {
    font-size: 14px;
    text-align: center;
    padding: 8px 0;
    /*border-bottom: 1px solid #ccc;*/
    cursor: pointer;
}
div.mainTab div.inner {
    position: relative;
    background-color: #fff;
    margin: 1em;
    padding: 0.5em;
    border: 1px #039be5 solid;
    border-radius: 2em;
    z-index: 1500;
}
div.mainTab div.inner a {
    color: #000;
}
div.mainTab div.inner a:hover {
    color: #039be5;
}
div.col.mainTab:hover div.inner {
    color: #039be5;
}
div.mainTab.disabled div.inner a:hover {
    color: #ccc;
}
div.col.mainTab.disabled:hover div.inner {
    color: #ccc;
}
div.mainTab.active div.inner, div.mainTab.active div.inner a {
    background-color: #039be5;
    color: #fff;
    border: none;
}
div.mainTab.active:hover div.inner {
    color: #fff;
}
div.col.mainTab a i {
    margin-right: 0.5em;
}
div.col.mainTab.disabled {
    cursor: default;
    color: #ccc;
}
div.col.mainTab.disabled .inner {
    border: 1px dashed #ccc;
}


.btnInlineSmall {
    font-size: 12px;
    line-height: 12px;
    height: auto;
    padding: 3px 10px;
    border-radius: 12px;
}
.btnInlineSmallSquare {
    font-size: 12px;
    line-height: 12px;
    height: auto;
    padding: 3px 10px;
}
.kjennemerke {
    color: #000;
    font-family: sans-serif, Helvetica;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    /*letter-spacing: 0.07em;*/
    display: inline-block;
    padding: 7px 12px 0 24px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-image: url("/img/gui/reg_no.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
}
.kjennemerkePlacement {
    float: right;
    margin-top: 36px;
}
input[type=text]#kjopspris, input[type=text]#salgspris {
    font-size: 20px;
}
button#kjopBtn, button#selgBtn {
    margin-left: 1em;
}
a.kjopBruk.disabled, a.selgBruk.disabled, .kalkulertKjopsprisBruk.disabled {
    color: gray;
    pointer-events: none;
    cursor: default;
}
div.infoPanel {
    padding: 1em;
}
.no-margin {
    margin: 0;
}
.no-margin-top {
    margin-top: 0;
}
div.radioTopLevelLabel {
    color: #9e9e9e;
    font-size: 12px;
    margin-bottom: 4px;
}
div#help_text_lev_innb_bil {
    color: #d02c3a;
    font-size: 12px;
    text-align: left;
    margin-top: -8px;
}
table tr.summationRow td, table tr.summationRow th {
    border-top: 1px solid;
    border-bottom: 3px double;
}
div.actions {
    position: relative;
    background-color: #e6e6e6;
    margin-top: -1.4rem;
    margin-bottom: 1.7em;
    border-radius: 0 0 4px 4px;
    text-align: right;
    z-index: 1000;
}
.actions .half {
    width: 48.6%;
}
.actions .quarter {
    width: 24%;
}
.crewOnly {
    display: block;
}
.kundevisning {
    display: none;
}
tr.kundevisning_kjopspris_row td, tr.kundevisning_kjopspris_row th {
    /*font-size: 16px;*/
    font-weight: 800;
    color: #d02c3a;
}
div.formGroupHeader {
    font-size: 13px;
    line-height: 16px;
}
div.radarIcon {
    margin: 45px 0 0 20px;
}
div.radarIcon a {
    margin-left: 8px;
}
button.mini {
    background-color: #039be5;
    color: #fff;
    border: none;
    font-size: 10px;
    padding: 0.5em 1em;
    border-radius: 2px;
}
#utstyrAddAllContainer {
    display: none;
}
#utstyrAddContainer button {
    float: right;
    margin: 0.5em 0;
}
select#utstyrAdd {
    height: 2rem;
}
/*
Radar
 */
div#radar {
    text-align: center;
    margin-top: 10em;
}
div#radar i {
    color: #fff;
}
div.radarContainer {
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
}
div.radarContainer a i {
    font-size: 30px;
}
div.radarContainer a {
    color: #5b77a1;
}

input[type=checkbox]:disabled + span {
    color: #ccc !important;
}
input[type=checkbox]:disabled + span::after {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

.checkbox-red.filled-in[type="checkbox"] + span:after {
    border: 2px solid #d02c3a !important;
    background: transparent;
}
.checkbox-red.filled-in[type="checkbox"]:checked + span:not(.lever)::after {
    background: #d02c3a;
}
.checkbox-red.filled-in[type="checkbox"]:checked + span:before {
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
div.refresh {
    /*margin: 0 2em 1em;*/
    /*font-size: 20px;*/
}
.dashedDivider {
    clear: both;
    font-size: 1px;
    border-bottom: 1px dashed #039be5;
    padding: 6px 0;
    margin: 0 -24px 0 -24px;
}
div.buttonContainerLibre {
    margin: 0.5em 0 1em;
}
/*
.select-wrapper .caret {
    right: .5rem;
    z-index: 1;
}
*/
div#nedtrekkSection div.row {
    margin-bottom: 0;
}
/*
Radar by Serge
 */
.radar-placeholder { width: 75px; height: 75px; margin-top:3px; position: relative; }

.radar-icon-elements { position: absolute; width: 100%; height: 100%; }
.radar-icon-bg { z-index: 0; }
.radar-circles { fill: none; stroke: #039be5; }
.radar-sections { opacity: 0.5; }
.radar-frame { stroke-width: 2; }
.radar-arc { fill:url(#radar-icon-gradient); }
.radar-car { fill: #039be5;  }
.radar-active {
    animation: radar-rotation 5s infinite linear;
}
.radar-found { opacity: 0;
    animation: radar-findings 5s 1.7s infinite linear;
}
.radar-second-car { animation-delay: 3s; }
.radar-third-car { animation-delay: 4s; }
/*.radar-paused .radar-active, .radar-paused .radar-found { animation-play-state: paused; }*/

@keyframes radar-rotation {
    0%   { transform: rotate(0deg);	}
    100% { transform: rotate(360deg); }
}

@keyframes radar-findings {
    0%   { opacity: 0;	}
    15%, 20% { opacity: 100; }
    95%	 { opacity: 0; }
}

span.treff {
    background-color: #039be5;
    color: #fff;
    font-weight: 400;
    padding: 4px 1rem;
    border-radius: 24px;
}
a.editPencilGroup {
    float: right;
    font-size: 16px;
    margin-top: 5px;
}

.px24 {
    font-size: 24px;
}
table.adminTable td.icons {
    padding-top: 6px;
}
i.fixedIconWidth {
    display: inline-block;
    width: 1.66em;
}
ul.leftMenu li {
    font-size: 20px;
    font-weight: 200;
}
ul.leftMenu li i {
    display: inline-block;
    width: 1.66em;
}
ul.leftMenu li a:hover {
    text-decoration: underline;
}
/* Errors */
div.errorPanel {
    font-size: 12px;
    padding: 0.75em;
    margin-bottom: 1em !important;
}
div.errorPanel ul {
    margin: 0;
}
ul.actionsLeft {
    width: 100%;
}
ul.actionsLeft li {
    font-size: 1.15em;
    border-bottom: 1px solid #ccc;
}
ul.actionsLeft li i {
    width: 30px;
    text-align: center;
}
ul.actionsLeft li.active a, ul.actionsLeft a:hover {
    color: #d02c3a;
}
div.fetch1881 img {
    width: 40px;
    margin-top: 14px;
}
div.fetchBrreg img {
    height: 30px;
    margin-top: 18px;
}
.no-margin-bottom {
    margin-bottom: 0 !important;/* For helvete!! */
}
.half-margin-bottom {
    margin-bottom: 0.5rem !important;/* For helvete!! */
}
.no-padding-bottom {
    padding-bottom: 0 !important;
}
.no-padding-top {
    padding-top: 0 !important;
}
table tr td.no-padding-right {
    padding-right: 0 !important;
}
.no-margin-top {
    margin-top: 0 !important;
}
table.no-padding-left td, table.no-padding-left th {
    padding-left: 0;
}
.no-margin {
    margin: 0 !important;
}
.no-border {
    border: none !important;
}
.padding-half {
    padding: .5em 1em !important;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.btn-small {
    margin-top: 3px;
    height: 30px;
    font-size: 12px !important;
    line-height: 12px !important;
}
.btn-xs {
    height: 16px;
    padding: 3px 1em;
    font-size: 10px !important;
    line-height: 10px !important;
}
.emph-kjennemerke span {
    /*background-color: #ccc;*/
    /*border: 1px solid #999;*/
    background-color: #039be5;
    color: #fff;
    font-size: smaller;
    display: inline-block;
    padding: 0 0.5em;
    border-radius: 3px;
    margin-left: 0.25em;
}
.lineWrap::before, .lineWrap::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 70px;
    border-top: 1px solid #ccc;
    content: "";
}
.lineWrap::before {
    right: 100%;
    margin: 0 8px 0 0;
}
.lineWrap::after {
    left: 100%;
    margin: 0 0 0 8px;
}
span.notification {
    position: absolute;
    display: inline-block;
    margin-top: -2px;
    margin-left: -2px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 9px;
    padding: 4px;
    font-size: 9px;
    line-height: 9px;
    text-align: center;
    color: #fff;
    background-color: #d02c3a;
}
label.required::before {
    content: '* ';
    color: #d02c3a;
}
.bigArrow {
    font-size: 70px;
    margin-top: 8px;
    color: #fff;
    text-align: right;
}
dl.notificationDl dt {
    margin-top: 1em;
    font-size: 14px;
}
dl.notificationDl dd {
    font-size: 12px;
}
div.focusLink {
    width: 100%;
    padding: 30px 0;
    margin-bottom: 1.5rem;
    font-size: 18px;
    text-align: center;
    border: 1px solid #039be5;
    /*cursor: pointer;*/
    border-radius: 12px;
}
div.focusLink i {
    -webkit-text-stroke: 1px #fff;
    display: block;
    font-size: 60px;
    margin-top: 1rem;
    color: #039be5;
}
div.frontPage.focusLink {
    background-color: #fff;
}
div.focusLink:hover i {
    color: #039be5;
}
div.focusLink.isDone {
    /*background-color: #e1f5fe;*/
}
div.focusLink span.notification {
    font-size: 15px;
    border-radius: 15px;
    padding: 8px;
}
div.focusLink .emph {
    background-color: #f0f0f0;
    font-size: 12px;
    /*border-radius: 15px;*/
    padding: 0.5em;
}
div.focusLink span.isDone {
    font-size: 25px;
    margin-top: -10px;
}
/* Frontpage focus boxes */
div.frontPage.focusLink {
    border: 2px solid #ccc;
}
div.frontPage.focusLink h4 {
    margin-top: 0;
}
div.frontPage.focusLink:hover {
    cursor: pointer;
    border-color: #039be5;
}
div.frontPage.focusLink a:hover {
    text-decoration: underline;
}

div#build-id {
    font-size: 12px;
    color: #858585;
    border-top: 1px solid #ccc;
    margin: 0 0.75rem 3em 0.75rem;
    padding-top: 0.25rem;
}
span.isDone {
    color: #d02c3a;
    position: absolute;
    margin: -3px 0 0 -8px;
}
div.card-panel.followup {
    /*background-color: #faf6bd;*/
    color: #000;
    background-color: #fff9c4;
    padding-top: 0;
    margin-top: 0.5rem;
    border: 1px #039be5 dashed !important;
}
div.card-panel.followup div.cardHeader {
    background-color: #f3edb1;
}
div.boundCustomer, div.miniHeader {
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
}
div.card-panel.followup h4 {
    color: #000;
}
div.card-panel.followup h4 i {
    margin-top: -30px;
}
div.card-panel.followup a {
    color: #039be5;
}
div.card-panel.followup input[type=text],
div.card-panel.followup textarea,
div.card-panel.followup input[type="checkbox"].filled-in + span::after
{
    /*background-color: white;*/
}
div#followupContainer {
    display: none;
    padding-top: 1em;
}
div.tools div.followupContainer {
    background-color: var(--body-background);
    padding: 1em;
}
div.accordeonWannabe h4 {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid #ccc;
}
div.accordeonWannabe h4 i {
    float: right;
    margin-right: 0.5rem;
    font-size: larger;
}
div.hideableInfo {
    position: relative;
}
div.hideableInfo span[class^=fa] {
    position: absolute;
    top: 4px;
    right: 5px;
}

/* Påminnelser */
table.tasksTable {
    border-top: none;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1em;
}
table.tasksTable tr {
    border-top: 1px solid #ccc;
    border-bottom: none;
}
table.tasksTable th {
    font-style: italic;
}
table.tasksTable td, table.tasksTable th {
    padding: 1em;
    font-size: 13px;
    line-height: 16px;
}
table.tasksTable tr.details td div.editor {
    background-color: #fff9c4;
    padding: 1em;
}
table.tasksTable td.iconCell {
    font-size: 20px;
    padding-bottom: 0;
    padding-top: .66em;
    padding-right: 0;
}
table tr.clickableRow, table td.clickableTd {
    cursor: pointer;
}
td.iconRight i {
    float: right;
    margin-right: 1em;
}
table.tasksTable td i.taskIcon {
    font-size: 24px;
}
a#closeTaskssWindow {
    font-size: 24px;
}

/*
.horizontalCheckboxes p label:after {
    width: 16px !important;
    height: 16px !important;
}
*/

/*
 Password Strength widget
 */
table#feedbackTable td a.feedbackScoreBtn i {
    font-size: 14px;
}
div.password-strength-feedback {
    font-size: 10px;
    color: #d02c3a;
}
div.password-strength-feedback ul {
    margin-top: 0;
}
.password-strength-meter .determinate {
    transition: background-color 300ms linear,
    width .3s linear;
}

div.fixedContainer {
    position: fixed;
    padding: 0;
}
div.requiredInfoPanel {
    margin-top: 0.75rem;
    /*padding: 0 1em;*/
}
div.requiredInfoPanel h4 {
    margin-top: 0;
    font-size: 16px;
    color: #d02c3a;
}
div.requiredInfoPanel ul {
    margin-bottom: 0;
}
.emptyInfoBoxField[type="text"], .emptyInfoBoxField {
    background-color: #ffcdd2 !important;
}

tr.cloak {
    display: none;
}
#uncloakLink {
    font-size: 15px;
}
table#carTable tr.selected, table#carTable tr.selected:hover {
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    background-color: #e1f5fe;
    /*color: #fff;*/
}
div.choicesContainer {
    position: relative;
    text-align: center;
}
.verticalLineBehind {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #d1d1d1;
}
div.checkedContainer {
    position: relative;
}
div.choicesContainer span.isDone {
    z-index: 200;
    font-size: 20px;
    margin-top: -14px;
    margin-left: 16px;
}
div.choicesContainer div.subLinks {
    position: relative;
    z-index: 50;
    display: none;
    background-color: transparent;
    margin-top: -24px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 24px;
}
div.choicesContainer div.subLinks div {
    position: relative;
    z-index: 1000;
}
div.subLinks a {
    color: #000;
}
div.subLinks a:hover {
    color: #039be5;
}
button.choicesBtn, button.choicesBtnNoJs {
    position: relative;
    z-index: 100;
    text-align: left;
    /*border-radius: 2em;*/
    width: 240px;
    clear: both;
    margin-bottom: 1.5em;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
}
button.choicesBtn:hover, button.choicesBtnNoJs:hover {
    background-color: #fff;
    /*color: #fff;*/
}
button.choicesBtnNoJs.nextStep {
    background-color: #fff;
    color: #000;
}
button.choicesBtnNoJs:disabled.active {
    color: #fff !important;
    background-color: #039be5 !important;
}
#modeTitle span {
    color: #ccc;
}
.mainTab.active #modeTitle span {
    color: #fff;
}
.ourCarsTable td strong {
    font-size: 1.3em;
}
.ourCarsTable input[type=text].searchField, .customersTable input[type=text].searchField {
    background-color: #fff !important;
    width: 85px;
    font-size: 12px;
    padding: 4px;
}
abbr {
    border-bottom: 1px dotted #ccc;
}
*:hover>abbr[data-title]	{
    position: relative;
    cursor: help;
}
abbr:hover::after {
    content: attr(data-title);
    position: absolute;
    top: -2em;
    left: -1em;
    color: #fff;
    background-color: #000;
    opacity: .6;
    border-radius: 1em;
    white-space: nowrap;
    padding: 0.25em 1em;
    text-transform: uppercase;
    /* .. */
}
ul.errorList {
    margin: 0;
}
ul.errorList li:before {
    content: '- ';
}
@media only screen and (max-width: 2000px) {
    .fullWidthAble {
        position: absolute;
        left: 0;
        margin:0 5%;
        width: 90%;
    }
}


/*
Publish
 */
div.publishUtstyr input[type='text'].browser-default {
    background-color: #e1f5fe !important;
    padding: 3px;
}

div.publishUtstyr div.card-action i {
    font-size: 24px;
    margin-right: 6px;
}
div.publishGeneralContainer .card {
    min-height: 340px;
}
div.publishInfo {
    margin-top: 0.5rem;
    background-color: #fff;
    border: 1px solid #fafafa;
    border-radius: 10px;
    padding: 1.5em;
}

div.pubStandardTextContainer {
    font-size: 11px;
    padding: 1em;
}

div.insertButtonsContainer {
    margin: -24px 2em 0;
}

.publishDescription {
    height: 10em;
    border: 1px solid #ccc;
    padding: 1em;
}

div.imageItem div.card-content, div.imageItem div.card-action {
    padding: 0.66em;
}
div.imageItem div.card-content input[type=text] {
    margin-top: 0;
}
div.imageItem div.card-content textarea {
    min-height: auto;
}
div.imageItem .card-action {
    border-top: none;
}
.imageItem .imageNumberContainer {
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 50%;
    /*border: solid 1px white;*/
    background: #000;
    opacity: 0.5;
    width: 20px;
    height: 20px;
}
.imageItem .imageNumber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 12px;
}
.imageItem .card .card-image img {
    border-radius: 0;
}
/*
div.imageItem[draggable] {
    cursor: move;
}
*/
div.imageItem {
    border: solid 1px white;
    border-radius: 2px;
}
div.imageItem.qqDndOver {
    border: dashed 1px #222;
    border-radius: 2px;
}
div.imageItem .qq-upload-delete-selector i {
    vertical-align: middle;
}

div#publiseringForm div.card-action strong a {
    color: red !important;
}

div.equipmentCheckboxesInline label span {
    top: 9px;
    margin-right: -5px;
}
div.equipmentCheckboxesInline input[type='text'] {
    margin-right: 2em;
}
div#equipmentContainer div.card div.card-action a.toggleDiv {
    color: #039be5;
    font-weight: 500;
}
button#contractTradeinFetchBtn {
    /*width: 130px;*/
}
input[type='text'].contractTradinKjennemerke {
    border-color: #039be5;
    /*margin-top: 4px;*/
    text-align: center;
    /*margin-left: 2em;*/
    width: 100px;
    font-size: 11px;
    height: 26px;
}
div.contractTradinFormContainer button.small {
    height: 26px;
}
span#contractTradeinMessage {
    font-size: 11px;
}
span#contractTradeinMessage.error {
    color: #d02c3a;
}
#total_salesprice_view {
    color: #000;
    font-weight: bold;
}
div#calcTableContainer {
    padding: 0.75rem;
}
table.calcTable input[type='text'] {
    background-color: #e1f5fe !important;
    border: none;
    width: 65%;
    text-align: right;
    padding: 2px;
}
table.calcTable th.negative {
    color: #d02c3a;
}
table.calcTable th.negative:before {
    content: '- ';
}
table.calcTable th {
    font-weight: normal;
    white-space: nowrap;
}
table.calcTable tr {
    border-bottom: 1px dashed #9e9e9e;
}
table.calcTable td {
    text-align: right;
}
table.calcTable td:after {
    content: ',-';
}
div#kunderModal {
    /*
    width: 50% !important;
    height: 100% !important;
    */
}
div.modalWannabe {
    position: absolute;
    left:10%;
    width: 80%;
    top:15%;
    padding: 1em;
    background: #fff;
}
body.modalBody {
    background: #9f9f9f;
}

/*
Feedback
 */
div#feedback table {
    margin-top: 0;
}
div#feedback table tr {
    border-bottom: none;
}
div#feedback table td {
    /*padding-top: 1em;*/
}
div#feedback table td.helper {
    width: 75px;
    white-space: nowrap;
}
div#feedback textarea {
    width: 100%;
    margin-top: -0.5rem;
    padding-bottom: 0 !important;
}
div#feedback td i {
    font-size: 18px;
    margin: 0 0.25rem;
}

/*
Warranty
 */
table.warrantyTable td.selected a {
    color: #d02c3a;
}
tr.hilite td {
    background-color: #e1f5fe;
}
input.hilite {
    background-color: #ffcdd2 !important;
    padding-left: .5em !important;
    padding-right: .5em !important;
}

.unselectableGrayMonospaceText {
    font-size: 11px;
    user-select: none;
    color: darkgray;
    font-family: Monaco, "Courier New", Courier, monospace;
}
div.sp-container  input[type=text].sp-container {
    background-color: #fff !important;
}

.loaderWrapper {
    position: relative;
    display: inline;
}
.loader {
    position: absolute;
    top: 8px;
    right: 0;
    border: 3px solid #dfdfdf; /* Frame */
    border-top: 3px dotted #039be5; /* Spinner */
    border-right: 3px dotted #039be5; /* Spinner */
    border-bottom: 3px dotted #039be5; /* Spinner */
    border-left: 3px dotted #039be5; /* Spinner */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

span.helper-text.counterHelper {
    font-size: 12px;
    float: left;
    padding-bottom: 1em;
}

table tr.deactivated td, table tr.deactivated td a, table tr.deactivated strong {
    color: #d02c3a;
    opacity: .75;
    font-weight: normal;
}

/*
vue.js transision
 */
.fade-leave-active {
    transition: opacity .1s; 
}
.fade-enter-active {
    transition: opacity 1s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}
/*
Vue modal
 */
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-top: 0;
    /*color: #42b983;*/
}

.modal-body {
    margin: 20px 0;
}

.modal-default-button {
    float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */
.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.modal.open, .modal.open .modal-footer {
    /*background-color: #e8f5e9;*/
}
.modal.open a.modal-close {
    font-size: 20px;
}

/*
Car Progress
 */
div.progressBarSmall {
    display: none;
}
table.progressBar {
    background-color: #fff;
    width: auto;
    margin: 0 0 1em;
    border-top: 1px solid #dfe4e7;
}
table.progressBar td {
    /*text-align: center;*/
    /*width: 12.5%;*/
    padding-right: 1.5em;
    padding-top: 18px;
    white-space: nowrap;
}
table.progressBar td.active {
    border-top: 2px solid var(--blue-marker);
}
table.progressBar td span:after {
    /*content: ' →';*/
    /*display: inline-block;*/
    /*margin-left: 0.25em;*/
}
table.progressBar div.progressTitle {
    position: relative;
}
table.progressBar td.done span:before {
    /*color: #000;*/
    content: '•';
    /*font-size: 1.5em;*/
    font-weight: 200;
    color: var(--red);
    position: absolute;
    top: -.8em;
    left: -1px;
}
div.progressBarSmall ul li.active a {
    color: var(--red);
    font-weight: bold;
}
div.progressBarSmall ul {
    margin-top: -.5em;
    font-size: 16px;
    line-height: 27px;
}
table.progressBar td a:hover, table.progressBar td.done a:hover {
    /*color: #039be5;*/
}
table.progressBar tr {
    border-bottom: none !important;
}
table.progressBar td div.progressTitle {
    /*height: 26px;*/
    font-size: 16px;
    line-height: 28px;
    /*text-transform: uppercase;*/
    /*background-color: #eee;*/
    /*background-image: url("/img/gui/progress_arrow.png");*/
    /*background-repeat: no-repeat;*/
    /*background-position-x: right;*/
}
table.progressBar td div.progressTitle span {
    opacity: .7;
}
table.progressBar td.done div.progressTitle {
    /*background-color: #b3e5fc;!*#dcedc8;*!*/
}
table.progressBar td div.progressCustomer {
    margin-top: -8px;
    overflow: hidden;
}
table.progressBar td div.progressCustomer small {
    font-size: 10px;
}
.progressBarChild.clickableTd div.progressTitle:hover,
.progressBarChild.active div.progressTitle
{
    /*background-color: #039be5 !important;*/
    color: #000;
    /*text-decoration: underline;*/
}
.progressBarChild.unclickableTd {
    cursor: not-allowed;
}


i.allowed {
    color: green;
}
i.denied {
    color: #d02c3a;
}
table.kundekort th {
    text-align: right;
}
table.kundekort th:after {
    content: ":";
}

.loading {
    background-color: #ffffff;
    background-image: url("/img/gui/spinner_32.gif");
    background-size: 25px 25px;
    background-position:right center;
    background-repeat: no-repeat;
}

#carList a {
    color: #039be5 !important;
}

div.file-field.input-field div.btn {
    font-size: 13px;
    padding: 0 1.5em;
    line-height: 28px;
    height: 28px;
}
div.file-field.input-field .file-path-wrapper .file-path {
    height: 21px;
}

/*Tooltip*/
a.tip {
    /*border-bottom: 1px dashed;*/
    /*text-decoration: none*/
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background-color: #03a9f4;
    color: #fff;
    margin: 10px;
    width: 250px;
    position: absolute;
    left: -42px;
    top: 10px;
    text-decoration: none
}

div.btn-group .btn {
    margin: 0 0 1em;
}
div.hilite {
    color: #fff;
    background: #d02c3a;
    display: inline-block;
    padding: 0 0.25em;
    border-radius: 5px;
}
.hamburger {
    float: right;
    margin: -4px 0.75rem 0 0;
    font-size: 30px;
    line-height: 30px;
}
.hamburger a {
    color: #fff;
}

label {
    color: #039be5;
}

tr.headersTr th {
    padding: 8px;
    font-weight: normal;
    font-style: italic;
}

tr.searchTr, tr.searchTr:hover {
    background-color: #f0f0f0;
}
tr.searchTr td {
    padding: 0;
}

input.searchField {
    background: transparent;
    padding: 4px 8px;
    border: none !important;
    width: 100%;
}
input.searchField::placeholder {
    color: #d02c3a;
}
.datepicker-day-button {
    color: #000 !important;
}
.datepicker-table td.is-today {
    background-color: #ccc;
}
table tr.datepicker-row td, table.datepicker-table th {
    border: none !important;
    padding: 0 !important;
}
select.browser-default.small {
    font-size: 12px;
    height: 2rem;
}
/**
Fine-uploader makes cursor pointer on the input button
 */
div.qq-upload-button-selector input[type=file] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.qq-gallery.qq-uploader {
    border-color: var(--blue-marker) !important;
    border-radius: 10px !important;
    border-style: dashed !important;
}

div.divided {
    border-bottom: 1px solid #ccc;
}
div.divided:last-child {
    border-bottom: none;
}