html {
    height: 100%;
    overflow-x: hidden;
    touch-action: manipulation;
}

body {
    padding-top: 60px;
    padding-bottom: 50px;
    background-color: #f9f9f9;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    overflow: hidden;
}

*[onclick] {
    cursor: pointer;
}

.has-kundorder {
    background-color: rgb(0, 186, 69);
}

.navbar-nav>li>a:focus,
.navbar-nav>li>a:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

.navbar-nav>li.open>a,
.navbar-nav>li.active>a {
    background: rgba(0, 0, 0, 0.2) !important;
}

body,
body>.container,
body>.container>.row,
body>.container>.row>div {
    height: inherit;
}

body>.container>.row>div>.panel {
    height: 100%;
}

body>.container>.row>div {
    padding-left: 5px;
    padding-right: 5px;
}

body>.container>.row>div>.panel>.panel-heading {
    height: 40px;
    min-height: 40px;
}

body>.container>.row>div>.panel>.panel-heading h5 {
    margin-top: 3px;
    margin-bottom: 3px;
}

body>.container>.row>div>.panel>.panel-heading.form-inside {
    padding: 3.5px 3px;
}

body>.container>.row>div>.panel>.panel-heading.form-inside h3.panel-title {
    padding: 6.5px 12px;
}

body>.container>.row>div>.panel>.panel-heading.form-inside input,
body>.container>.row>div>.panel>.panel-heading.form-inside button,
body>.container>.row>div>.panel>.panel-heading.form-inside select {
    height: 32px;
}

body>.container>.row>div>.panel>.panel-heading.form-inside button i {
    font-size: 14px;
}

body>.container>.row>div>.panel>.panel-heading.form-inside button,
body>.container>.row>div>.panel>.panel-heading.form-inside a[role="button"] {
    padding: 5px 10px;
}

body>.container>.row>div>.panel>.panel-heading.form-inside .dropdown-toggle {
    padding: 6px 10px;
}

body>.container>.row>div>.panel>.panel-body {
    height: calc(100% - 40px);
    overflow-y: scroll;
}

.col-panel-left>.panel>.panel-body {
    padding: 0px;
}

.col-panel-left>.panel>.panel-body ul.list-group li:first-child {
    border-top: 0;
}

.col-panel-left>.panel>.panel-body ul.list-group li {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/*
.col-panel-left>.panel>.panel-body ul.list-group li.disabled {
    background-color: white;
    color: #BBBBBB;
}

.col-panel-left>.panel>.panel-body ul.list-group li.active a {
    font-weight: bold;
    color: white;
}
*/

.col-panel-main>.panel>.panel-body {
    padding: 5px;
    padding-top: 5px;
}

.col-panel-main>.panel>.panel-body .artikelrader .well {
    margin-bottom: 5px;
}

.panel-body.artikelrader .artikelraderinfo,
.col-panel-main>.panel>.panel-body .artikelrader .artikelraderinfo,
.col-panel-main>.panel>.panel-body .tabellinfo {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -5px;
    height: 37px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    padding: 8px;
    z-index: 999;
    position: sticky;
    top: -5px;
}

.panel-body.artikelrader .artikelraderinfo {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
    top: -15px;
    z-index: 1000;
    padding: 10px 15px;
}

.panel-body.artikelrader .artikelraderinfo .label,
.col-panel-main>.panel>.panel-body .artikelrader .artikelraderinfo .label,
.col-panel-main>.panel>.panel-body .tabellinfo .label {
    font-size: 12px;
    height: 18px !important;
    background-color: #777;
}

.panel-body.artikelrader .artikelraderinfo .label+.label,
.col-panel-main>.panel>.panel-body .artikelrader .artikelraderinfo .label+.label,
.col-panel-main>.panel>.panel-body .tabellinfo .label+.label {
    margin-left: 5px;
    background-color: #999;
}

.col-panel-main .jumbotron {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.col-panel-main .jumbotron .btn {
    margin-bottom: 5px;
}

.col-panel-main>.panel>.panel-body .carousel {
    display: none;
}

.col-panel-main>.panel>.panel-body .carousel img {
    width: 100%;
}

.navbar-fixed-top>.container {
    padding-top: 10px;
}

.navbar-fixed-top>.container,
.navbar-fixed-bottom>.container {
    padding-left: 5px;
    padding-right: 5px;
}

.navbar-fixed-top .navbar {
    border: 0;
    height: 40px;
    min-height: 40px;
    background-color: white;
    margin-bottom: 10px;
}

.navbar-fixed-top .navbar .navbar-brand {
    padding: 10px 15px;
    height: 40px;
}

.navbar-fixed-top .navbar .navbar-nav>li>a>i {
    margin-right: 2px;
}

.navbar-fixed-top .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-fixed-top .dropdown-menu {
    margin-top: -1px !important;
    font-size: 12px;
    padding: 0px;
}

.navbar-fixed-top .dropdown-menu>li>a {
    padding: 5px 15px;
}

.navbar-fixed-top .dropdown-menu>li:first-child>a {
    padding-top: 10px;
}

.navbar-fixed-top .dropdown-menu>li:last-child>a {
    padding-bottom: 10px;
}

@media (min-width: 992px) {
    .navbar-fixed-top .dropdown:hover>.dropdown-menu {
        display: block;
    }

    .col-panel-main>.panel>.panel-body .carousel img {

        min-height: 280px;
    }
}

.navbar-fixed-bottom {
    height: 40px;
    min-height: 40px;
    background-color: #141414;
}

.navbar-fixed-bottom .input-group-navbar {
    margin-top: 4px;
    /*padding-right: 5px; Lade till input-group + input-group nedan istället */
    float: left;
}

.navbar-fixed-bottom .btn-group.pull-right {
    margin-top: 4px;
    margin-left: 4px;
}

.navbar-fixed-bottom>.container>.btn+.navbar-fixed-bottom>.container>.btn,
.navbar-fixed-bottom>.container>.btn+.input-group-navbar,
.navbar-fixed-bottom>.container>.input-group-navbar+.btn,
.navbar-fixed-bottom>.container>.input-group-navbar+.input-group-navbar {
    margin-left: 5px !important;
}

.navbar-btn.btn-sm {
    margin-top: 4px;
    margin-bottom: 4px;
}

.navbar-toggle {
    padding: 5px 10px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.navbar-nav>li>a {
    line-height: 20px;
}

.navbar-fixed-top .badge {
    background-color: #FFF;
    color: #0075a2;
}

.panel-title {
    margin-top: 1px;
    font-size: 14px;
}

.help-block {
    color: #a6a6a6;
}

h5.modal-title {
    font-size: 16px;
}

.btn-dark {
    background: #474949;
    color: white;
}

.btn-dark:focus,
.btn-dark:hover {
    background: #222;
    color: white;
}

.btn-blue {
    background-color: cornflowerblue;
    border: 1px solid royalblue;
    color: white;
}

.btn-blue:hover,
.btn-blue:focus {
    background-color: royalblue;
    color: white;
}

.btn-gray {
    background-color: #F7F7F7;
    border-color: #CCC;
}

span.mdi {
    font-size: 16px;
}

.bootbox .modal-body {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.bootbox.withfooter .modal-body {
    max-height: 80vh;
}

.bootbox .modal-footer button {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.modalonmodal {
    z-index: 1052;
}

.modalonmodal+.modal-backdrop {
    z-index: 1051;
}

.modal-backdrop {
    visibility: hidden !important;
}

.modal.in {
    background-color: rgba(0, 0, 0, 0.5);
}

input.form-control.error {
    border: 1px solid #ebccd1;
    background: #f2dede;
}

.label-white {
    background: white !important;
    color: #333 !important;
    border: 1px solid #ccc;
}

.grid .label-white,
td[data-colname="benämning"] .label-white {
    padding: .5rem;
    display: block;
}

.label-expandable {
    display: flex;
    gap: .5rem;
    color: #333 !important;
    border: 1px solid #ccc;
    text-align: left;
}

@media (min-width: 992px) {
    .navbar-right {
        margin-right: 0px;
    }

    .insta,
    .loggaut {
        display: none !important;
    }


}

@media (max-width: 768px) {
    html {
        height: auto;
    }

    .col-panel-left {
        height: 50vh !important;
        margin-bottom: 5px;
    }

    .col-panel-main {
        height: auto !important;
        margin-bottom: 5px;
    }
}

.navbar-toggle {
    background-color: white !important;
    padding: 9px 10px !important;
    margin-top: 4px;
}

.list-group-produktmeny {
    margin-top: -1px;
}

@media(max-width:1200px) {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
        background-color: #0075a2 !important;
    }

    .navbar-collapse.in {
        overflow-y: auto !important;
    }

    .collapse.in {
        display: block !important;
    }
}

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }

    .navbar-left,
    .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }

    .navbar-nav>li {
        float: none;
    }

    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .collapse.in {
        display: block !important;
    }
}

.list-group-produktmeny .badge {
    background-color: #CCCCCC;
}

.dropdown-menu {
    font-size: 12px;
}

.popover {
    max-width: 500px;
}

.popover .table {
    margin-bottom: 0px;
}

.col-abr-hide {
    display: none;
}

.col-abr-select,
.col-abr-toggleselect,
.col-abr-search,
.col-abr-search-with-sort,
.col-abr-sort,
.col-abr-pris,
.col-abr-view {
    float: left !important;
    padding-left: 2px;
    padding-right: 2px;
}

.col-abr-toggleselect .input-group-togglecarengine button,
.col-abr-view .input-group-toggleview button {
    padding: 6px 10px !important;
    width: 50%;
}

.col-abr-toggleselect .input-group-togglecarengine button:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* Knapparna för val mellan fordon och motor är default gråade, sätts om i JS */
.col-abr-toggleselect .input-group-togglecarengine button {
    color: #ccc;
}

.col-abr-toggleselect .input-group-togglecarengine button .mdi {
    margin-top: -2px;
}

.col-abr-toggleselect .input-group-togglecarengine button.btn-info {
    color: #fff;
}

.col-abr-toggleselect .input-group-togglecarengine button:last-child,
.col-abr-view .input-group-toggleview button:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


.col-abr-pris .btn-link {
    background: #eeeeee;
    border: none;
}

.bold {
    font-weight: bold;
}

@media (max-width: 768px) {
    .col-abr-toggleselect {
        width: 10%;
    }

    .col-abr-select {
        width: 25%;
    }

    .col-abr-sort {
        width: 10%;
    }

    .col-abr-pris {
        width: 20%;
    }

    .col-abr-view {
        width: 10%;
    }

    #page_artiklar .col-abr-search {
        width: 75%;
    }
}

@media (min-width: 768px) {
    .col-abr-toggleselect {
        width: 10%;
    }

    .col-abr-select {
        width: 25%;
    }

    .col-abr-sort {
        width: 10%;
    }

    .col-abr-pris {
        width: 20%;
    }

    .col-abr-view {
        width: 10%;
    }

    #page_artiklar .col-abr-search {
        width: 60%;
    }
}

@media (min-width: 992px) {
    .col-abr-toggleselect {
        width: 10%;
    }

    .col-abr-select {
        width: 25%;
    }

    .col-abr-search-with-sort {
        width: 60%;
    }

    .col-abr-sort {
        width: 6%;
    }

    .col-abr-pris {
        width: 20%;
    }

    .col-abr-view {
        width: 14%;
    }

    #page_artiklar .col-abr-search {
        position: relative;
        width: 60%;
    }
}

@media (min-width: 1200px) {
    .col-abr-toggleselect {
        width: 10%;
    }

    .col-abr-select.tillverkare {
        width: 25%;
    }

    .col-abr-select.modeller {
        width: 35%;
    }

    .col-abr-search-with-sort {
        width: 70%;
        position: relative;
    }

    .col-abr-sort {
        width: 5%;
    }

    .col-abr-pris {
        width: 15%;
    }

    .col-abr-view {
        width: 10%;
    }

    #page_artiklar .col-abr-search {
        position: relative;
        width: 70%;
    }
}

.bootbox-loader .modal-content {
    margin-top: 40vh;
    text-align: center;
}

.bootbox-loader p {
    margin-bottom: 0px;
}

.select-navbar-anvandare {
    width: 180px !important;
}

.regnrhistorik {
    cursor: pointer;
}

.btn-aktuella-kampanjer {
    display: none;
}

.btn-aktuella-prislistor {
    display: none;
}

.modaljamfor .modal-lg {
    width: 90vw;
    width: fit-content;
    max-width: 90vw;
    min-width: 600px;
}

.modaljamfor .modal-body {
    overflow: auto !important;
    padding-top: 0px;
    padding-bottom: 0px;
    background: #f9f9f9;
}

.modaljamfor table {
    width: auto;
    margin: 0 auto;
    background: white;
}

.modaljamfor table td[data-colname="beställ"] .input-antal {
    width: auto;
}

.modaljamfor table td[data-colname="bild"] {
    height: 250px;
    vertical-align: middle;
}

.modaljamfor table th {
    color: rgb(144, 144, 144);
    text-transform: capitalize;
    font-weight: normal;
    border-bottom: 0px;
}

.modaljamfor table tr:first-of-type th,
.modaljamfor table tr:first-of-type td,
.modaljamfor table tr[data-varde] td {
    border-top: 0px !important;
}

.modaljamfor table th,
.modaljamfor table td {
    text-align: left !important;
}

.modaljamfor td:nth-child(2n+2) {
    background-color: #f9f9f9;
}

.modaljamfor table img {
    max-height: 250px !important;
    max-width: 250px !important;
    mix-blend-mode: multiply;
}

.modaljamfor .fa-check-circle {
    color: rgb(106, 181, 86);
}

.modaljamfor .well {
    margin-top: 15px;
    margin-bottom: 15px !important;
    text-align: center;
}


.well-title {
    margin-top: 1px;
    font-size: 14px;
    margin-bottom: 5px;
    color: inherit;
}

.bootbox-body .well {
    margin-bottom: 5px;
}

.xl-modal>.modal-dialog {
    width: 80vw !important;
}

body.modal-open .datepicker-container {
    z-index: 1052 !important;
}

body.modal-open .datepicker-dropdown {
    box-shadow: 0 3px 6px rgb(0 0 0 / 50%) !important;
}

.flex-group {
    display: flex;
    flex: 1;
    margin-bottom: .5rem;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.gap-5 {
    gap: 5px;
}

/* Minivarukorg */
.minivk.forceopen {
    display: block !important;
}

.minivk li {
    clear: both;
    padding: 10px;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-align: center;
}

.minivk li table {
    text-align: left;
}

.minivk table {
    margin-bottom: 0px;
}

.minivk li table td {
    vertical-align: inherit;
}

.minivk table tr:first-child td {
    border-top: 0;
}

.minivk table .artnr {
    width: 120px;
    font-weight: bold;
}

.minivk table .atgard {
    padding-left: 0;
}

.minivk table .input-antal {
    width: 50px;
}

.minivk .atgard .btn-primary {
    display: none;
}

.list-group-item-nyheter {
    background-color: #FF9C22;
    color: white;
}

/* bootstrap-select */
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    font-size: 12px;
}

.bs-searchbox .form-control {
    font-size: 12px;
    margin-bottom: 5px !important;
}

.bootstrap-select .dropdown-menu {
    padding-bottom: 0;
}

/* Breddning av katalogen 2025-04-02 */
body>.navbar-fixed-top>.container,
body>.container,
body>.navbar-fixed-bottom>.container {
    width: 100%;
    max-width: 1480px;
}

@media (min-width: 992px) {
    .col-panel-left {
        width: 20%;
    }

    .col-panel-main {
        width: 80%;
    }

    .navbar-fixed-bottom input[type="text"] {
        max-width: calc(20% - 5px) !important;
    }
}

th[data-colname="passar"] {
    width: 65px;
}

.panel-heading-flex {
    display: flex;
    gap: 5px;
}

.panel-heading-flex .flex-search {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
}

.panel-heading-flex .flex-search .btn-link {
    position: absolute;
    right: 5px;
}

.panel-heading-flex button[data-toggle="pris"] {
    width: 125px !important;
    justify-content: center;
}

/* override bootstrap input-group */
.input-group-btn:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
    margin-left: -1px;
}

.dropdown-menu>li>span {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.navbar-bottom .input-group-btn button {
    margin-top: 0;
    margin-bottom: 0;
}