/* ==========================================================================
Hide ng-cloak on page load, https://docs.angularjs.org/api/ng/directive/ngCloak
========================================================================== */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/* ==========================================================================
Development Ribbon
========================================================================== */
.ribbon {
    background-color: #00ff00;
    box-shadow: 0 0 20px #222;
    left: -3.5em;
    moz-box-shadow: 0 0 10px #888;
    moz-transform: rotate(45deg);
    ms-transform: rotate(45deg);
    o-transform: rotate(45deg);
    overflow: hidden;
    position: fixed;
    bottom: 30px;
    transform: rotate(45deg);
    webkit-box-shadow: 0 0 10px #888;
    webkit-transform: rotate(45deg);
    white-space: nowrap;
    width: 15em;
    z-index: 9999;
    pointer-events: none;
}

.ribbon a {
    border: 1px solid #006200;
    color: #006200;
    display: block;
    font: bold 85% 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1px 0;
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 3px #aaa;
    pointer-events: none;
}

/* ==========================================================================
Version number in navbar
========================================================================== */
.navbar-version {
    font-size: 10px;
    color: #444;
}

/* ==========================================================================
navbar text
========================================================================== */
.navbar-default .navbar-brand {
    color: #444;
}

/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
Logo styles
========================================================================== */
.navbar-brand.logo {
    padding: 5px 15px;
}

.logo .logo-img {
    height: 45px;
    display: inline-block;
}

/* ==========================================================================
Main page styles
========================================================================== */
.hero-unit {
    margin: 50px auto 0 auto;
    width: 300px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

.hipster {
    display: inline-block;
    width: 347px;
    height: 497px;
    background: url("../images/logo_muldermazda.png") no-repeat center top;
    background-size: contain;
}

/* wait autoprefixer update to allow simple generation of high pixel density media query */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (   min--moz-device-pixel-ratio: 2), only screen and (     -o-min-device-pixel-ratio: 2/1), only screen and (        min-device-pixel-ratio: 2), only screen and (                min-resolution: 192dpi), only screen and (                min-resolution: 2dppx) {
    .hipster {
        background: url("../images/logo_muldermazda.png") no-repeat center top;
        background-size: contain;
    }
}

/* ==========================================================================
Generic styles
========================================================================== */
.error {
    color: white;
    background-color: red;
}

.pad {
    padding: 10px;
}

.break {
    white-space: normal;
    word-break: break-all;
}

.voffset {
    margin-top: 2px;
}

.voffset1 {
    margin-top: 5px;
}

.voffset2 {
    margin-top: 10px;
}

.voffset3 {
    margin-top: 15px;
}

.voffset4 {
    margin-top: 30px;
}

.voffset5 {
    margin-top: 40px;
}

.voffset6 {
    margin-top: 60px;
}

.voffset7 {
    margin-top: 80px;
}

.voffset8 {
    margin-top: 100px;
}

.voffset9 {
    margin-top: 150px;
}

.readonly {
    background-color: #eee;
    opacity: 1;
}

/* Capitalize first letter of TH cells, labels, panel headings, headings */
th > span:first-letter, .panel-title > h3:first-letter, label.control-label:first-letter, .panel-heading:first-letter, td > label:first-letter {
    text-transform: capitalize;
}
/* ==========================================================================
make sure browsers use the pointer cursor for anchors, even with no href
========================================================================== */

a:hover, .hand, [jh-sort-by] {
    cursor: pointer;
}

/* ==========================================================================
Metrics and Health styles
========================================================================== */
#threadDump .popover, #healthCheck .popover {
    top: inherit;
    display: block;
    font-size: 10px;
    max-width: 1024px;
}

#healthCheck .popover {
    margin-left: -50px;
}

.health-details {
    min-width: 400px;
}

/* ==========================================================================
start Password strength bar style
========================================================================== */
ul#strengthBar {
    display: inline;
    list-style: none;
    margin: 0;
    margin-left: 15px;
    padding: 0;
    vertical-align: 2px;
}

.point:last {
    margin: 0 !important;
}

.point {
    background: #DDD;
    border-radius: 2px;
    display: inline-block;
    height: 5px;
    margin-right: 1px;
    width: 20px;
}

/* ==========================================================================
Custom alerts for notification
========================================================================== */
.alerts .alert {
    text-overflow: ellipsis;
}

.alert pre {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
}

.alert .popover pre {
    font-size: 10px;
}

.alerts .toast {
    position: fixed;
    width: 100%;
}

.alerts .toast.left {
    left: 5px;
}

.alerts .toast.right {
    right: 5px;
}

.alerts .toast.top {
    top: 55px;
}

.alerts .toast.bottom {
    bottom: 55px;
}

@media screen and (min-width: 480px) {
    .alerts .toast {
        width: 50%;
    }
}

/* ==========================================================================
entity tables helpers
========================================================================== */
/* Remove Bootstrap padding from the element
   http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

/* bootstrap 3 input-group 100% width
   http://stackoverflow.com/questions/23436430/bootstrap-3-input-group-100-width */
.width-min {
    width: 1% !important;
}

/* Makes toolbar not wrap on smaller screens
 http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#right */
.flex-btn-group-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.jh-table > tbody > tr > td {
    /* Align text in td vertically (top aligned by Bootstrap) */
    vertical-align: middle;
}

.jh-table > thead > tr > th > .glyphicon-sort, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes-alt {
    /* less visible sorting icons */
    opacity: 0.5;
}

.jh-table > thead > tr > th > .glyphicon-sort:hover, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes:hover, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes-alt:hover {
    /* full visible sorting icons and pointer when mouse is over them */
    opacity: 1;
    cursor: pointer;
}

/* ==========================================================================
entity detail page css
========================================================================== */
.dl-horizontal.jh-entity-details > dd {
    margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
    .dl-horizontal.jh-entity-details > dt {
        margin-bottom: 15px;
    }

    .dl-horizontal.jh-entity-details > dd {
        border-bottom: 1px solid #eee;
        padding-left: 180px;
        margin-left: 0;
    }
}

/* ==========================================================================
ui bootstrap tweaks
========================================================================== */
.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default,
.uib-datepicker-popup > li > div.uib-datepicker > table .btn-default {
    border: 0;
}

.datetime-picker-dropdown > li.date-picker-menu div > table:focus,
.uib-datepicker-popup > li > div.uib-datepicker > table:focus {
    outline: none;
}

/* jhipster-needle-css-add-main JHipster will add new css style */

/* fix edit form margins */
form.form-horizontal {
    /*margin:5px;*/
    margin-top: 15px;
}

/* avoid wrapping for 3 action buttons */
.actionButtons {
    min-width: 95px;
}

/**
    FIX to prevent an initially hidden ui-select from having a ui-select-search input of just 10px width
    See line 845 in version 0.19.8, it sets the width to 10px.

    By hiding the search panel by default initially certain methods are not called from select.js controller, causing the correct width not to be calculated and set.

    See https://github.com/angular-ui/ui-select/issues/1617
 */
div.ui-select-container input.ui-select-search {
    width: 100% !important;
    font-size: 0.8em;
    padding-left: 7px;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

/* pimp general panel styling a bit */
.panel {
    -webkit-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.10);
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.10);
}

/* Additonal style for panel,panel-heading used in index */
.mf-panel {
    border: none;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.10);
}

.mf-panel > div > .panel-heading {
    display: flex;
    align-items: center;
    background-color: #fff;
}

.mf-panel > div > .panel-heading > .panel-title {
    margin-right: auto;
}

.mf-panel > div > .panel-heading > .panel-title > h3 {
    font-size: 24px;
}

.mf-panel > div > .panel-heading > .panel-title > .panel-sub-title {
    font-weight: normal;
    font-size: 0.8em;
    color: #a7a7a7;
}

.mf-panel > div > .panel-heading > .panel-buttons {
    margin-left: auto;
    min-width: 88px;
}


.mf-panel > div > .panel-heading > .panel-buttons > button {
    margin-left: 2px;
}

@media print {
    .footer,
    .ribbon,
    button {
        display: none !important;
    }
    body {
        background: transparent;
    }
    .print-visible{
        display: block !important;
    }
}

/* AMI-894 added style for showing licenseplate as a plate, yellow, with license, beer */
.label-license {
    font-size: 1em;
    font-weight: bold;
    border: 2px solid black;
    color: black;
}

/* AMI-920 bugfix for plus button overlappin the select */
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    margin-left: 0px;
}

/* AMI-918 neutralise the spacing for dto edit page with form groups */
div.row.voffset2 div.form-group {
    margin-bottom: 0;
}







/*!
 * jsonformatter
 *
 * Version: 0.6.0 - 2016-08-27T12:58:03.339Z
 * License: Apache-2.0
 */


.json-formatter-row {
    font-family: monospace;
}
.json-formatter-row,
.json-formatter-row a,
.json-formatter-row a:hover {
    color: black;
    text-decoration: none;
}
.json-formatter-row .json-formatter-row {
    margin-left: 1em;
}
.json-formatter-row .children.empty {
    opacity: 0.5;
    margin-left: 1em;
}
.json-formatter-row .children.empty.object:after {
    content: "No properties";
}
.json-formatter-row .children.empty.array:after {
    content: "[]";
}
.json-formatter-row .string {
    color: green;
    white-space: pre;
    word-wrap: break-word;
}
.json-formatter-row .number {
    color: blue;
}
.json-formatter-row .boolean {
    color: red;
}
.json-formatter-row .null {
    color: #855A00;
}
.json-formatter-row .undefined {
    color: #ca0b69;
}
.json-formatter-row .function {
    color: #FF20ED;
}
.json-formatter-row .date {
    background-color: rgba(0, 0, 0, 0.05);
}
.json-formatter-row .url {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}
.json-formatter-row .bracket {
    color: blue;
}
.json-formatter-row .key {
    color: #00008B;
    cursor: pointer;
}
.json-formatter-row .constructor-name {
    cursor: pointer;
}
.json-formatter-row .toggler {
    font-size: 0.8em;
    line-height: 1.2em;
    vertical-align: middle;
    opacity: 0.6;
    cursor: pointer;
}
.json-formatter-row .toggler:after {
    display: inline-block;
    transition: transform 100ms ease-in;
    content: "►";
}
.json-formatter-row .toggler.open:after {
    transform: rotate(90deg);
}
.json-formatter-row > a > .thumbnail-text {
    opacity: 0;
    transition: opacity 0.15s ease-in;
    font-style: italic;
}
.json-formatter-row:hover > a > .thumbnail-text {
    opacity: 0.6;
}
.json-formatter-dark.json-formatter-row {
    font-family: monospace;
}
.json-formatter-dark.json-formatter-row,
.json-formatter-dark.json-formatter-row a,
.json-formatter-dark.json-formatter-row a:hover {
    color: white;
    text-decoration: none;
}
.json-formatter-dark.json-formatter-row .json-formatter-row {
    margin-left: 1em;
}
.json-formatter-dark.json-formatter-row .children.empty {
    opacity: 0.5;
    margin-left: 1em;
}
.json-formatter-dark.json-formatter-row .children.empty.object:after {
    content: "No properties";
}
.json-formatter-dark.json-formatter-row .children.empty.array:after {
    content: "[]";
}
.json-formatter-dark.json-formatter-row .string {
    color: #31F031;
    white-space: pre;
    word-wrap: break-word;
}
.json-formatter-dark.json-formatter-row .number {
    color: #66C2FF;
}
.json-formatter-dark.json-formatter-row .boolean {
    color: #EC4242;
}
.json-formatter-dark.json-formatter-row .null {
    color: #EEC97D;
}
.json-formatter-dark.json-formatter-row .undefined {
    color: #ef8fbe;
}
.json-formatter-dark.json-formatter-row .function {
    color: #FD48CB;
}
.json-formatter-dark.json-formatter-row .date {
    background-color: rgba(255, 255, 255, 0.05);
}
.json-formatter-dark.json-formatter-row .url {
    text-decoration: underline;
    color: #027BFF;
    cursor: pointer;
}
.json-formatter-dark.json-formatter-row .bracket {
    color: #9494FF;
}
.json-formatter-dark.json-formatter-row .key {
    color: #23A0DB;
    cursor: pointer;
}
.json-formatter-dark.json-formatter-row .constructor-name {
    cursor: pointer;
}
.json-formatter-dark.json-formatter-row .toggler {
    font-size: 0.8em;
    line-height: 1.2em;
    vertical-align: middle;
    opacity: 0.6;
    cursor: pointer;
}
.json-formatter-dark.json-formatter-row .toggler:after {
    display: inline-block;
    transition: transform 100ms ease-in;
    content: "►";
}
.json-formatter-dark.json-formatter-row .toggler.open:after {
    transform: rotate(90deg);
}
.json-formatter-dark.json-formatter-row > a > .thumbnail-text {
    opacity: 0;
    transition: opacity 0.15s ease-in;
    font-style: italic;
}
.json-formatter-dark.json-formatter-row:hover > a > .thumbnail-text {
    opacity: 0.6;
}

/* Adjust layout created with bootstrap grid classes to wider screens */
/**
 * Bootstrap stops with class definitions on the screen sizes greater than 1170px
 * but it classes don't look well on even bigger screens. In particular case navigation is taking too much of space
 * off the big screen. Classes below override bootstrap-provided behaviour
 */
@media (min-width: 1300px) {
    body .mmm-nav-side {
        width: 250px;
    }

    body .mmm-nav-ribbon {
        width: calc(100% - 250px);
    }

    body .mmm-content {
        left: 250px;
        width: calc(100% - 250px);
    }
}

/**
 * Styles and bootstrap adjustments for the localized inputs
 */
.localizedinput-group {
    margin-bottom: 10px;
}

/**
 * Make styles success override styles of error so I can have success within error component
 */
.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.has-success .input-group-addon {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #3c763d;
}

.has-error .has-success .form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 6px #67b168;
}

.monospace {
    font-family: monospace;
}