:root {
    --linkcolor-light: #007aac;
    --linkcolor-dark: #36B0E2;
    --link-color-blue: #2d74c7;         /* används inte än*/
    --link-color-blue-dark: #36B0E2;
}

/* generellt */
body {
    background-color: #f1f1f1;
    height: 100%;
}

html.dark a, a {
    color: var(--linkcolor-light);
}

/* tar bort ram på textbox */
.form-control {
    position: relative;
    /*top: -6px;*/
    border: none;
    background: none;
    padding-left: 0px;
    left: 15px;
    /*top: 0px;*/

    width: calc(100% - 30px) !important;    

}
.form-control:focus {
    border-color: none;
    box-shadow: none;
}

.left-10 {
    left: -13px !important;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html.dark .form-control {
    background-color: var(--darktextboxbackground);
    border-color: #2c3237;
}

html.dark .form-control {
    background-color: #282d36;
    border-color: #393d44;
    color: #eee;
}

.input-group .form-control {
    height: auto;
}

input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], textarea {
    -webkit-appearance: none;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    /*border: 1px solid #ced4da;*/
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.text-item {
    display: block;
    width: 100%; /* Justera bredden som behövs */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.second-row {
    white-space: nowrap;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}


.form-control:not(.form-control-sm):not(.form-control-lg) {
    font-size: 13.6px;
    font-size: .85rem;
    line-height: 1.85;
    min-height: 38.4px;
    min-height: 2.4rem;
}

/* styr bredden på sidan om man kör web */
.max-web-width {
    max-width: 800px;
}

html {
    width: 100%;
    margin: 0;
    padding: 0;
}

a {
    font-weight: 600;
    text-decoration: underline;
}

.text-right {
    top: 0px !important;
}

.break-line {
    height: 1.5em;
    position: relative;
    top: -5px;
}

.text-selected {
    color: var(--linkcolor-dark) !important;
}

.click-select {
    color: #2d74c7;
}

html.dark .click-select {
    color: var(--linkcolor-dark);
}

.click-select:hover, .click-select:focus, .click-select:active {
    color: var(--link-color-blue);
    cursor: pointer;
}

html.dark .click-select:hover, html.dark .click-select:focus, html.dark .click-select:active {
    color: white;
}

/* max 1 rad */
.max-rows-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 30px;
}


/* vita paneler med alternativ */

.panel-section {
    background-color: #fff;
    border-radius: 10px;
    margin: 5px;
}
html.dark .panel-section {
    background-color: #2a2d31;
}

.panel-header a {
    color: var(--link-color-blue);
}
html.dark .panel-header a {
    color: var(--link-color-blue-dark);
}

.panel-row {
    min-height: 55px;
    padding-top: 14px;
    margin-left: 0px;
}

.panel-border {
    position: relative;
    border-bottom: 1px solid #eae7e7;
    display: flex;
    margin-left: 10px;
    width: calc(100% - 20px);
}
html.dark .panel-border {
    border-color: #363739;
}

.panel-border:last-child {
    border-bottom: none;
}

.text-item {
    color: black;
    padding-left: 5px;
    font-weight: 600;
}
html.dark .text-item {
    color: #9a9b9d;
}

.text-marked {
    /*color: #2d74c7;*/
}

.panel-header {
    color: #515254;
    font-size: 0.85em;
    font-weight: 600;
    padding-left: 20px;
    text-transform: uppercase;
}
html.dark .panel-header {
    color: #ccced1;
}

.panel-text {
    color: #515254;
}
html.dark .panel-text {
    color: #eae7e7;
}

.panel-next {
    color: #2d74c7;
    cursor: pointer;
}
html.dark .panel-next {
    color: var(--linkcolor-dark);
}

.panel-next:after {
    position: absolute;
    right: 10px;
    content: '\f054';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
}

.panel-prev {
    color: var(--linkcolor-light);
    padding-left: 30px;
    font-weight:600;
}
html.dark .panel-prev {
    color: var(--linkcolor-dark);
    font-weight: 600;
}

.panel-prev:before {
    position: absolute;
    left: 10px;
    content: '\f053';
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
}

.panel-warning {
    background-color: #ba5959 !important;
}

.panel-warning .text-item, .panel-warning .panel-text {
    color: white !important;
}

.panel-warning .panel-border {
    border-color: #df9595 !important;
}


/* popupmeny*/

.moveup {
    position: relative;
    top: -11px;
}

.menu {
    position: absolute;
    top: -10px;
    left: -15px;
    width: calc(100% + 15px);
    border-radius: 0px;
    padding-top: 10px;
    padding-left: 15px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: calc(100% + 28px);
}

.nav {
    padding-top: 30px;
}

.ddn {
    height: 48px;
    width: 100%;
    padding-left: 10px;
    padding-top: 11px;
}

.ddn.selected {
    font-weight: 600;
    background-color: #e9e8e89e;
    width: calc(100% - 10px);
}

html.dark .ddn.selected {
    background-color: #414244;
}

.ddn.selected a {
    color: #f96464;
}

html.dark .ddn.selected a {
    color: #fff;
}


.border-right {
    position: relative;
    height: 80px;
    margin-top: 8px;
}

.pt-8 {
    position: relative;
    top: 8px;
}

.click-select {
    cursor: pointer;
}


/* inte 100% bredd på mobilsidor */
@media (min-width: 500px) {
    .w-100-mobile {
        width: 50% !important;
    }

    .main-document {
        width: 75%;
        margin: 0 auto;
    }
}


/* två rader data */
.two-rows {
    position: relative;
    top: 0px;
}

.second-row {
    display: block;
    position: relative;
    top: -8px;
    font-size: 0.85em;
    color: #808080;
}

.two-rows:after {
    position: absolute;
    right: 5px;
    top: 6px;
    content: '\f054';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
}


/* statuspanel */
.panel-red {
    background-color: #fb7a7a;
}

.panel-green {
    background-color: #87ba82;
}


/* bak-platta */
.panel-section-info, .panel-section-info p {
    border-radius: 10px;
    color: white !important;
    font-weight: 600;
    margin: 6px;
    padding-top: 1px;
    padding-bottom: 1px;
}              


/* gauge / slider */
.ui-slider .ui-slider-handle {
    border: 6px solid #edb8b8;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    background: #e15d5d !important;
}
.ui-slider.ui-widget-content,
html.dark .ui-slider.ui-widget-content {
    background: #dc5e5e !important;
}


/* checkbox */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    input[type="checkbox"]:not(:checked):before {
        font-family: "Font Awesome 6 Pro";
        font-style: normal;
        width: 1em;
        height: 1em;
        content: '';
        margin-right: .3em;
    }

    input[type="checkbox"]:checked:before, input[type="radio"]:checked:before {
        font-family: "Font Awesome 6 Pro";
        content: '\f00c';
        margin-right: .3em;
        font-size: 17px;
        color: dodgerblue;
    }

html.dark input[type="checkbox"]:checked:before, html.dark input[type="radio"]:checked:before {
    color: dodgerblue;
}

/* radioknapp */
input[type="radio"]:not(:checked):before {
    font-family: "Font Awesome 6 Pro";
    content: '';
    margin-right: .3em;
    font-size: 17px;
    font-weight: 100;
}

/* meny */
.menu-navigation {
    position: relative;
    top: 5px;
    font-weight: 600;
    font-size: 0.9em;
    color: #1b1b1d;
}

html.dark .menu-navigation {
    color: #ccc;
}

/* förklaringstext i botten */
.row-bottom {
    padding: 7px;
    padding-right: 20px;
    padding-top: 20px;
    position: absolute;
    bottom: 10px;
    /*background-color: #f55e5e40;*/
    height: 50px;
    overflow: hidden;
}



/* åter knapp */
.panel-prev::before {
    content: '\f053'; /* Font Awesome: chevron-left */
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 14px;
    color: #333;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    color: #fff;
    background-color: rgba(108, 108, 108, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.panel-prev:hover::before {
    background-color: rgba(108, 108, 108, 0.4);
}

.panel-prev {
    position: relative;
    display: inline-block;
    padding-left: 50px; /* reserv plats för ikonen + marginal */
    line-height: 36px; /* vertikalcentrering om du vill matcha ikonhöjd */
    color: #00aaff;
    font-weight: 500;
}

html.dark .panel-prev::before {
    background-color: rgba(255, 255, 255, 0.1);
}

html.dark .panel-prev:hover::before {
    background-color: rgba(255, 255, 255, 0.2);
}