html * {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}

html,
body {
    min-height: 100%;
}

html {
    scroll-padding-top: 5.5rem;
    scroll-behavior: smooth;
}

.loading {
    background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
    -webkit-transition: background-color 0;
    transition: background-color 0;
    opacity: 80%;
    -webkit-transition: opacity 80%;
    transition: opacity 80%;
}

.body {
    padding: 10px;
}

.logo-lg {
    background-color: #fff;
}

.skin-blue .main-header .logo {
    background-color: #fff;
}

.skin-blue .main-header .logo:hover {
    background-color: #fff
}

.logo-mini {
    background: #fff;
}

/* Collapsed sidebar (50px mini rail): the logo corner shows the square DP icon instead of an
   empty white box; AdminLTE's 0 15px logo padding would leave it only 20px. */
.sidebar-mini.sidebar-collapse .main-header .logo {
    padding: 0;
}

.logo-mini img {
    width: 40px;
    height: 40px;
    margin: 5px;
    vertical-align: top;
}

#maincontent {
    max-width: 1650px;
    padding: 5px;
    padding-top: 0px;
}

body {
    background-color: #eee;
}

.mainpulje {
    background: white;
    padding: 12px;
}

.detail {
    font-size: 4rem;
}

.bigfont {
    font-size: 3rem;
    font-weight: bold;
}

.medfont {
    font-size: 1.4em;
    font-weight: bold;
}

.varifont {
    font-size: 1.1em;
    font-weight: bold;
}

.owfl {
    overflow-x: auto;
}

.right td {
    text-align: right
}

.center {
    text-align: center;
}

.std-pri-btn {
    color: #fff;
    background-color: #3c8dbc;
    border-color: #367fa9;
}

.std-sec-btn {
    color: #fff;
    background-color: #00a65a;
    border-color: #008d4c;
}

.std-dan-btn {
    color: #fff;
    background-color: #dd4b39;
    border-color: #d73925;
}

table.dataTable tr.group td {
    font-weight: bold;
    background-color: #e0e0e0
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
    cursor: default !important
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before {
    display: none !important
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child {
    position: relative;
    padding-left: 30px;
    cursor: pointer
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    top: 9px;
    left: 4px;
    height: 14px;
    width: 14px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 14px;
    content: '+';
    background-color: #31b131
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
    content: '-';
    background-color: #d33333
}

table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child {
    padding-left: 27px
}

table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before {
    top: 5px;
    left: 4px;
    height: 14px;
    width: 14px;
    border-radius: 14px;
    line-height: 14px;
    text-indent: 3px
}

table.dataTable.dtr-column>tbody>tr>td.control,
table.dataTable.dtr-column>tbody>tr>th.control {
    position: relative;
    cursor: pointer
}

table.dataTable.dtr-column>tbody>tr>td.control:before,
table.dataTable.dtr-column>tbody>tr>th.control:before {
    top: 50%;
    left: 50%;
    height: 16px;
    width: 16px;
    margin-top: -10px;
    margin-left: -10px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 14px;
    content: '+';
    background-color: #31b131
}

table.dataTable.dtr-column>tbody>tr.parent td.control:before,
table.dataTable.dtr-column>tbody>tr.parent th.control:before {
    content: '-';
    background-color: #d33333
}

table.dataTable>tbody>tr.child {
    padding: 0.5em 1em
}

table.dataTable>tbody>tr.child:hover {
    background: transparent !important
}

table.dataTable>tbody>tr.child ul.dtr-details {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid #efefef;
    padding: 0.5em 0
}

table.dataTable>tbody>tr.child ul.dtr-details>li:first-child {
    padding-top: 0
}

table.dataTable>tbody>tr.child ul.dtr-details>li:last-child {
    border-bottom: none
}

table.dataTable>tbody>tr.child span.dtr-title {
    display: inline-block;
    min-width: 75px;
    font-weight: bold
}

div.dtr-modal {
    position: fixed;
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    padding: 10em 1em
}

div.dtr-modal div.dtr-modal-display {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    z-index: 102;
    overflow: auto;
    background-color: #f5f5f7;
    border: 1px solid black;
    border-radius: 0.5em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6)
}

div.dtr-modal div.dtr-modal-content {
    position: relative;
    padding: 1em
}

div.dtr-modal div.dtr-modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: 1px solid #eaeaea;
    background-color: #f9f9f9;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    z-index: 12
}

div.dtr-modal div.dtr-modal-close:hover {
    background-color: #eaeaea
}

div.dtr-modal div.dtr-modal-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    background: rgba(0, 0, 0, 0.6)
}


/* @media all and (min-aspect-ratio: 12/9) {
    .desktoponly {
        visibility: visible;
    }
    div {
        background: #9af;
        


}

}*/


/* @media only screen and (min-device-width: 1024px) {
    .varifont {
        font-size: 14px;
        font-weight: 100;
    }
    #maincontent {
        padding-top: 55px;
    }
    .desktoponly {
        visibility: visible;
    }
    .mobileonly {
        visibility: hidden;
        display: none;
    }
} */

.header {
    font-weight: bold;
}

.infobox_warning {
    margin: 10px;
    padding: 10px;
    background: #fae5c4;
    border: 1px solid #c27d0e;
}

.infobox_info {
    margin: 10px;
    padding: 10px;
    background: #bbf1fe;
    border: 1px solid #0c7a95;
}

.dimmed {
    opacity: 0.5;
}

.int {
    text-align: right;
}

.datatable2>thead:first-child>tr:first-child>th:first-child {
    position: absolute;
    display: inline-block;
    background-color: white;
    height: 100%;
}

.datatable2>tbody>tr>td:first-child {
    position: absolute;
    display: inline-block;
    background-color: white;
    height: 100%;
}

.datatable2>thead:first-child>tr:first-child>th:nth-child(2) {
    padding-left: 165px;
}

.datatable2>tbody>tr>td:nth-child(2) {
    padding-left: 165px !important;
    width: 175px;
}

.datatable3>td {
    font-weight: bold;
}

.niceselect {
    -moz-appearance: none;
    -moz-border-radius: 1px;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 1px;
    appearance: none;
    border: 1px solid #d2d2d2;
    border-radius: 1px;
    font-size: 1.2em;
    resize: none;
    vertical-align: baseline;
    width: 100%;
    padding: 10px 10px 10px 10px;
    height: 200px;
}

.puljelogin {
    min-height: 800px;
    overflow-x: auto;
    background-size: cover;
    background-position: right bottom;
}

.login-screen {
    background-color: white;
    padding: 10px;
    width: 300px;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 50px;
}

/* App download box under the login form (templates/login.php) */
.login-screen.app-download {
    margin-top: 15px;
    text-align: center;
}

.app-download h4 {
    margin: 5px 0 10px;
}

.app-download-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.app-download-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-download .app-qr {
    display: block;
    width: 110px;
    height: 110px;
    margin-bottom: 8px;
}

/* Touch devices (phones, tablets) install directly via the store links - no QR */
.app-download-touch .app-qr {
    display: none;
}

/* iPhone/iPad see only App Store, Android only Google Play */
.app-download-item.app-download-hidden {
    display: none;
}

/* Apple's badge is 40px tall; Google's PNG carries extra transparent margin, so it gets 48px */
.app-download .app-badge-apple {
    height: 40px;
}

.app-download .app-badge-google {
    height: 48px;
    margin-bottom: -4px;
}

.puljefooter {
    padding-top: 20px;
    padding-left: 20px;
    color: white;
    background: #2c3b41;
    bottom: 30px;
    z-index: 999;
}

/* The address doesn't fit the 50px mini rail (it spilled as "Dans / Tung / 6960"); it comes back
   when the rail expands (hover / first tap removes sidebar-collapse). */
@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .puljefooter {
        display: none;
    }
}

.printbutton {
    float: right;
    text-align: center
}

.disabled_div {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(100%);
}

.blank_row {
    height: 10px;
    background-color: #FFFFFF;
}

.horisontfixed {
    display: block;
}

.garminbox1 {
    border: 2px solid #eee;
}

.headerseparator {
    color: red;
    font-weight: bold;
}

.grid-item-content {
    height: 100px;
    background: #D26;
    border: 2px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.grid-item-content--height2 {
    height: 200px;
}

.grid-item-content--height3 {
    height: 300px;
}

.grid-item-content--height4 {
    height: 400px;
}

.grid-item-content--height5 {
    height: 400px;
}

.chart-container {
    position: relative;
    margin: auto;
    height: 80vh;
    width: 80vw;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-gap: 0.6rem;
    max-width: 10000px;
}

/* Rounded corners for the #3c8dbc content cards and the frontpage grid tiles. */
.box[style*="3c8dbc"],
.grid-item {
    border-radius: 3px;
}

.grid-item {
    align-self: start;
    border: 2px solid #3c8dbc;
    border-top: 10px solid #3c8dbc;
    background: white;
    height: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
}

.grid-high-item {
    padding: 5px;
    min-height: 350px;
    border: 1px solid #eee;
    background: white;
    box-shadow: 0 8px 6px -6px black;
}

.chart-canvas {
    height: 60%;
    min-height: 180px;
    max-height: 320px;
}

.circle {
    font-weight: bold;
    font-size: 11px;
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 50%;
    padding: 5px;
    padding-left: 5px;
    padding-top: 5px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 6px -6px black;
}

.circle:hover {
    cursor: pointer;
}

.topbox {
    font-weight: bold;
    font-size: 11px;
    border: 2px solid #ccc;
    padding: 5px;
    padding-left: 5px;
    padding-top: 5px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 6px -6px black;
}

/* Dropdown indicator on the top-bar control buttons (desktop only).
   Excludes the notification bell, which carries no .topcaret. */
.navbar-control .topcaret {
    margin-left: 6px;
}

@media (max-width: 991px) {
    .navbar-control .topcaret {
        display: none;
    }
}

/* ========================================
   MODERN NAVBAR CONTROLS
   ======================================== */

.navbar-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: white !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    height: 36px;
    box-sizing: border-box;
    line-height: 1 !important;
    vertical-align: middle;
    text-decoration: none !important;
}

.navbar-control:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-control:active {
    transform: translateY(0);
}

.navbar-control-icon {
    margin-right: 6px;
    opacity: 0.8;
    line-height: 1 !important;
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
}

/* User Control - with avatar circle */
.navbar-control.user-control {
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    box-sizing: border-box;
    line-height: 1;
}

.user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

/* Year Control - with calendar icon */
.navbar-control.year-control {
    min-width: 70px;
    text-align: center;
}

/* Ship Control - with ship icon */
.navbar-control.ship-control {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ship dropdown - add internal padding */
.ship-control + .dropdown-menu {
    padding-left: 12px;
    padding-right: 12px;
}

.ship-control + .dropdown-menu li {
    margin-left: 0;
    margin-right: 0;
}

.ship-name {
    display: inline-block;
    line-height: 1 !important;
    vertical-align: middle;
}

/* Notification Envelope - icon only with badge */
.navbar-control.notification-control {
    padding: 8px 12px;
    position: relative;
    min-width: auto;
}

.notification-control .fa-envelope-o {
    font-size: 16px;
    margin: 0;
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #e74c3c;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    line-height: 1;
    min-width: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile circle style - modern version */
.user-circle-mobile {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-circle-mobile:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ship dropdown menu - desktop */
.ship-dropdown-menu {
    max-height: 630px;
    overflow-y: auto;
    right: 0;
    left: auto;
    min-width: 400px;
}

/* Notification header text - desktop only */
#notification-header-text {
    margin-left: 5px;
}

/* All navbar dropdowns aligned to right edge of navbar on desktop */
.navbar-right {
    position: relative;
}

.navbar-right > li.dropdown {
    position: static;
}

.navbar-right > li.dropdown > .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 5px;
    left: auto;
    transform-origin: top right;
    animation: dropdownZoomOut 0.35s ease-out;
}

/* Zoom out animation from top-right to bottom-left */
@keyframes dropdownZoomOut {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: top right;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        transform-origin: top right;
    }
}

/* Responsive adjustments */
/* The device-width branch is capped at 991px: iOS reports device-width as the portrait width in
   both orientations, so iPad mini (744) / iPad 9th gen (768) in landscape (>= 992px, desktop
   layout) matched it and the position:absolute below pushed every .desktoponly cell/span off-screen. */
@media (max-width: 768px), (max-device-width: 768px) and (max-width: 991px) {
    /* Hide desktop-only elements - force hide with maximum specificity */
    .navbar-nav .desktoponly,
    .nav.navbar-nav .desktoponly,
    li.dropdown.desktoponly,
    .desktoponly,
    li.desktoponly,
    .dropdown.desktoponly {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Show mobile-only elements */
    .navbar-nav .mobileonly,
    .nav.navbar-nav .mobileonly,
    .mobileonly,
    li.mobileonly,
    .dropdown.mobileonly {
        display: inline-flex !important;
        visibility: visible !important;
    }

    .navbar-control {
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin: 0 !important;
        height: 38px !important;
        border-radius: 8px;
        min-width: auto !important;
        width: auto !important;
    }

    .navbar-control-icon {
        margin-right: 6px !important;
        font-size: 15px !important;
    }

    /* Hide ship name text on mobile */
    .ship-control .ship-name {
        display: none !important;
    }

    /* Ship control - icon only */
    .navbar-control.ship-control {
        padding: 8px 14px !important;
        width: auto !important;
    }

    .navbar-control.ship-control .navbar-control-icon {
        margin-right: 0 !important;
    }

    /* Year control - icon + year */
    .navbar-control.year-control {
        padding: 8px 12px !important;
        width: auto !important;
    }

    .year-control .navbar-control-icon {
        margin-right: 6px !important;
    }

    .year-control .year-text {
        display: inline-block;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* Keep controls in single row - compact */
    .nav.navbar-nav.navbar-right {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin-top: 7px !important;
        margin-right: 8px !important;
        gap: 4px !important;
        width: auto !important;
        justify-content: flex-end !important;
    }

    .nav.navbar-nav.navbar-right > li {
        float: none !important;
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        position: relative !important;
    }

    /* Adjust user control - avatar only, compact */
    .navbar-control.user-control {
        gap: 0 !important;
        padding: 8px 10px !important;
        width: auto !important;
        min-width: auto !important;
        justify-content: center !important;
    }

    .navbar-control.user-control span {
        display: none !important;
    }

    .user-avatar {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        margin: 0 !important;
    }

    /* Notification control - compact */
    .navbar-control.notification-control {
        padding: 8px 10px !important;
        width: auto !important;
        display: inline-flex !important;
    }

    .notification-control .fa-envelope-o {
        font-size: 18px !important;
        margin: 0 !important;
    }

    .notifications-menu {
        display: inline-block !important;
    }

    /* Fix dropdown styling on mobile */
    .nav.navbar-nav.navbar-right .dropdown-menu {
        background-color: #fff !important;
        border: 1px solid rgba(0,0,0,.15) !important;
        border-radius: 6px !important;
        box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
    }

    .nav.navbar-nav.navbar-right .dropdown-menu li a {
        color: #333 !important;
    }

    .nav.navbar-nav.navbar-right .dropdown-menu li a:hover {
        background-color: #f5f5f5 !important;
    }

    /* Year dropdown - make it narrower on mobile */
    .year-control + .dropdown-menu {
        min-width: 120px !important;
        width: 150px !important;
    }

    .year-control + .dropdown-menu li a {
        padding: 10px 15px !important;
        font-size: 14px !important;
        color: #333 !important;
    }

    .year-control + .dropdown-menu li.active a {
        background-color: #337ab7 !important;
        color: #fff !important;
    }

    /* Ship dropdown on mobile - responsive width with same positioning */
    .ship-dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: 3px !important;
        left: auto !important;
        width: 98vw !important;
        max-width: 700px !important;
        min-width: 300px !important;
        max-height: calc(100vh - 150px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 10px !important;
        margin-top: 2px !important;
        transform-origin: top right !important;
        animation: dropdownZoomOut 0.35s ease-out !important;
    }

    /* Mobile dropdowns - keep same positioning and animation as desktop */
    /* Force navbar-right to be positioning context on mobile */
    .navbar-nav.navbar-right,
    .nav.navbar-nav.navbar-right {
        position: relative !important;
    }

    .navbar-right > li.dropdown,
    .navbar-right > li.notifications-menu {
        position: static !important;
    }

    .navbar-right > li.dropdown > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: 5px !important;
        left: auto !important;
        transform-origin: top right !important;
        animation: dropdownZoomOut 0.35s ease-out !important;
        width: auto !important;
        max-width: 95vw !important;
        background-color: #fff !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
        margin-top: 2px !important;
    }

    /* Notification dropdown - responsive width and positioning */
    .notification-dropdown-menu,
    .navbar-nav .notifications-menu .dropdown-menu,
    .notifications-menu > .dropdown-menu,
    .notification-control + .dropdown-menu,
    .navbar-right > .notifications-menu > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: 5px !important;
        left: auto !important;
        width: 95vw !important;
        max-width: 500px !important;
        min-width: 300px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 2px !important;
        transform-origin: top right !important;
        animation: dropdownZoomOut 0.35s ease-out !important;
    }

    .notification-dropdown-menu .menu,
    .notifications-menu .dropdown-menu .menu {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .notification-dropdown-menu li,
    .notifications-menu .dropdown-menu > li {
        padding: 8px 0 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .notifications-menu .dropdown-menu ul.menu li {
        width: 100% !important;
    }

    .notification-dropdown-menu .header,
    .notifications-menu .dropdown-menu .header {
        padding: 8px 10px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        font-size: 13px !important;
    }

    .notification-dropdown-menu .footer,
    .notifications-menu .dropdown-menu .footer {
        padding: 8px 10px !important;
    }

    /* Notification list items - prevent text clipping */
    .notifications-menu .dropdown-menu ul.menu li {
        white-space: normal !important;
        word-wrap: break-word !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .notifications-menu .dropdown-menu ul.menu li a,
    .notifications-menu .dropdown-menu ul.menu li > div {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Notification link - remove padding on mobile but keep left margin */
    .notifications-menu .menu > li > a,
    .notification-item .notification-link {
        padding: 0 !important;
        margin-left: 5px !important;
    }

    /* Notification icon in dropdown - smaller on mobile */
    .notification-item .notification-icon {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 14px !important;
        margin-right: 8px !important;
        float: left !important;
    }

    .notification-item .notification-content {
        margin-left: 36px !important;
    }

    /* Reset notification header text margin on mobile */
    #notification-header-text {
        margin-left: 0 !important;
    }
}

/* Notification dropdown styling - applies to both desktop and mobile */
.navbar-nav > .notifications-menu > .dropdown-menu {
    width: 500px !important;
    max-width: 90vw !important;
}

.notifications-menu .menu {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ccc transparent !important;
}

.notifications-menu .menu::-webkit-scrollbar {
    width: 6px !important;
}

.notifications-menu .menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.notifications-menu .menu::-webkit-scrollbar-thumb {
    background-color: #ccc !important;
    border-radius: 3px !important;
}

.notification-item .notification-icon {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
    margin-right: 8px !important;
    float: left !important;
}

.notification-item .notification-content {
    margin-left: 36px !important;
}

.notifications-menu .menu > li > a,
.notification-item .notification-link {
    padding: 0 !important;
}

.notification-dropdown-menu li,
.notifications-menu .dropdown-menu > li {
    padding: 8px 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.notifications-menu .dropdown-menu ul.menu li {
    white-space: normal !important;
    word-wrap: break-word !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.notifications-menu .dropdown-menu ul.menu li a,
.notifications-menu .dropdown-menu ul.menu li > div {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.mydropdown {
    display: none;
    padding: 10px;
    border: 1px solid #999;
    float: right;
    margin-top: 10px;
    /* overflow: hidden!important; */
    overflow-y: scroll;
    z-index: 9999;
    background: white;
    box-shadow: 0 8px 6px -6px black;
}

.menulight:hover {
    background: #eee;
}

th[scope=row] {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
    background: white;
}

th[scope=row] {
    background: white;
    vertical-align: top;
    color: inherit;
}

.borderless td,
.borderless th {
    border: none;
}

.pulje-icon {
    color: #002590;
    font-size: 2.5rem;
}

.searchhighlight {
    background-color: yellow;
    color: black;
}

/* News list (lte/views/simple/news.php): title + date in the box header */
.newsarticle .news-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.newsarticle .news-header .box-title {
    flex: 1 1 auto;
    display: block;
    margin: 0;
    line-height: 1.3;
}

.newsarticle .news-header .news-date {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.3;
    padding-top: 4px;
    opacity: 0.85;
}

.newsarticle .box-body {
    cursor: pointer;
}

/* PDF in a news item (inserted by admin edit_news.php; same look in its TinyMCE, js/tinymce.js) */
a.news-pdf {
    display: inline-block;
    max-width: 100%;
    margin: 2px 0;
    padding: 5px 10px 5px 34px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d93025' d='M6 1h8.5L20 6.5V21a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3Cpath fill='%23f5b5ae' d='M14.5 1v5.5H20z'/%3E%3Ctext x='12' y='18.5' font-family='Arial,Helvetica,sans-serif' font-size='6.5' font-weight='700' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E") no-repeat 8px center;
    background-size: 20px 20px;
    color: #1f2937;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.news-pdf:hover,
a.news-pdf:focus {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
}

@media (max-width: 767px) {
    /* Drop the 15px grid gutter so the cards use (almost) the full screen width */
    .news-list {
        padding-left: 3px;
        padding-right: 3px;
    }

    .newsarticle .news-header {
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
    }

    /* Date becomes a small line above the title */
    .newsarticle .news-header .news-date {
        order: -1;
        font-size: 12px;
        padding-top: 0;
    }

    .newsarticle .news-header .box-title {
        font-size: 16px;
    }

    .newsarticle .box-body {
        padding: 10px 12px;
    }
}

.kystfisk::before {
    font-family: fontAwesome;
    content: "\f023";
}


/* .navbar-right>li{
          color:inherit;
          border:0}}
          .main-header 
          .sidebar-toggle{
              float:left;
              background-color:transparent;
              background-image:none;
              padding:15px 15px;
              font-family:fontAwesome
            }.main-header .sidebar-toggle:before{content:"\f0c9"}.main-header  */

.close-button {
    border: none;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    border: 1px solid #000000;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.topright {
    position: absolute;
    right: 0;
    top: 0
}

.table_pulje>thead>tr>th,
.table_pulje>tbody>tr>th,
.table_pulje>tfoot>tr>th,
.table_pulje>thead>tr>td,
.table_pulje>tbody>tr>td,
.table_pulje>tfoot>tr>td {
    padding: 8px 4px 8px 4px;
}

.btn_pulje {
    border: 1px solid #000000;
}

.checkbox-slider--b-flat {
    position: relative;
}

.checkbox-slider--b-flat input {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 0%;
    margin: 0 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.checkbox-slider--b-flat input+span {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-slider--b-flat input+span:before {
    position: absolute;
    left: 0px;
    display: inline-block;
}

.checkbox-slider--b-flat input+span>h4 {
    display: inline;
}

.checkbox-slider--b-flat input+span {
    padding-left: 40px;
}

.checkbox-slider--b-flat input+span:before {
    content: "";
    height: 20px;
    width: 40px;
    background: rgba(100, 100, 100, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
    transition: background 0.2s ease-out;
}

.checkbox-slider--b-flat input+span:after {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0;
    display: block;
    background: #ffffff;
    transition: margin-left 0.1s ease-in-out;
    text-align: center;
    font-weight: bold;
    content: "";
}

.checkbox-slider--b-flat input:checked+span:after {
    margin-left: 20px;
    content: "";
}

.checkbox-slider--b-flat input:checked+span:before {
    transition: background 0.2s ease-in;
}

.checkbox-slider--b-flat input+span {
    padding-left: 40px;
}

.checkbox-slider--b-flat input+span:before {
    border-radius: 20px;
    width: 40px;
}

.checkbox-slider--b-flat input+span:after {
    background: #ffffff;
    content: "";
    width: 20px;
    border: solid transparent 2px;
    background-clip: padding-box;
    border-radius: 20px;
}

.checkbox-slider--b-flat input:not(:checked)+span:after {
    -webkit-animation: popOut ease-in 0.3s normal;
    animation: popOut ease-in 0.3s normal;
}

.checkbox-slider--b-flat input:checked+span:after {
    content: "";
    margin-left: 20px;
    border: solid transparent 2px;
    background-clip: padding-box;
    -webkit-animation: popIn ease-in 0.3s normal;
    animation: popIn ease-in 0.3s normal;
}

.checkbox-slider--b-flat input:checked+span:before {
    background: #5cb85c;
}

.checkbox-slider--b-flat.checkbox-slider__left label {
    position: relative;
}

.checkbox-slider--b-flat.checkbox-slider__left span {
    margin-left: 0px;
    padding-left: 0;
    padding-right: 40px;
}

.checkbox-slider--b-flat.checkbox-slider__left input+span:before {
    right: -10px;
    left: auto;
}

.checkbox-slider--b-flat.checkbox-slider__left input+span:after {
    right: 10px;
    left: auto;
}

.checkbox-slider--b-flat.checkbox-slider__left input:checked+span:after {
    right: -10px;
    left: auto;
    margin-right: 0;
}

.checkbox-slider--b-flat.checkbox-slider__left-sm label {
    position: relative;
}

.checkbox-slider--b-flat.checkbox-slider__left-sm span {
    margin-left: 0px;
    padding-left: 0;
    padding-right: 40px;
}

.checkbox-slider--b-flat.checkbox-slider__left-sm input+span:before {
    right: -10px;
    left: auto;
}

.checkbox-slider--b-flat.checkbox-slider__left-sm input+span:after {
    right: 10px;
    left: auto;
}

.checkbox-slider--b-flat.checkbox-slider__left-sm input:checked+span:after {
    right: -10px;
    left: auto;
    margin-right: 0;
}


.checkbox-slider--b-flat.checkbox-slider-md input+span:before {
    border-radius: 30px;
}

.checkbox-slider--b-flat.checkbox-slider-md input+span:after {
    border-radius: 30px;
}

.checkbox-slider--b-flat.checkbox-slider-lg input+span:before {
    border-radius: 40px;
}

.checkbox-slider--b-flat.checkbox-slider-lg input+span:after {
    border-radius: 40px;
}

.checkbox-slider--b-flat input+span:before {
    box-shadow: none;
}


/*#####*/

.checkbox-slider-info.checkbox-slider--b input:checked+span:before,
.checkbox-slider-info.checkbox-slider--b-flat input:checked+span:before,
.checkbox-slider-info.checkbox-slider--c input:checked+span:before,
.checkbox-slider-info.checkbox-slider--c-weight input:checked+span:before {
    background: #5bc0de;
}

.checkbox-slider-warning.checkbox-slider--b input:checked+span:before,
.checkbox-slider-warning.checkbox-slider--b-flat input:checked+span:before,
.checkbox-slider-warning.checkbox-slider--c input:checked+span:before,
.checkbox-slider-warning.checkbox-slider--c-weight input:checked+span:before {
    background: #f0ad4e;
}

.checkbox-slider-danger.checkbox-slider--b input:checked+span:before,
.checkbox-slider-danger.checkbox-slider--b-flat input:checked+span:before,
.checkbox-slider-danger.checkbox-slider--c input:checked+span:before,
.checkbox-slider-danger.checkbox-slider--c-weight input:checked+span:before {
    background: #d9534f;
}

/*******************************************************
  Sizes
  *******************************************************/

.checkbox-slider-sm {
    line-height: 10px;
}

.checkbox-slider-sm input+span {
    padding-left: 20px;
}

.checkbox-slider-sm input+span:before {
    width: 20px;
}

.checkbox-slider-sm input+span:after,
.checkbox-slider-sm input+span:before {
    height: 10px;
    line-height: 10px;
}

.checkbox-slider-sm input+span:after {
    width: 10px;
    vertical-align: middle;
}

.checkbox-slider-sm input:checked+span:after {
    margin-left: 10px;
}

.checkbox-slider-md {
    line-height: 30px;
}

.checkbox-slider-md input+span {
    padding-left: 60px;
}

.checkbox-slider-md input+span:before {
    width: 60px;
}

.checkbox-slider-md input+span:after,
.checkbox-slider-md input+span:before {
    height: 30px;
    line-height: 30px;
}

.checkbox-slider-md input+span:after {
    width: 30px;
    vertical-align: middle;
}

.checkbox-slider-md input:checked+span:after {
    margin-left: 30px;
}

.checkbox-slider-lg {
    line-height: 40px;
}

.checkbox-slider-lg input+span {
    padding-left: 80px;
}

.checkbox-slider-lg input+span:before {
    width: 80px;
}

.checkbox-slider-lg input+span:after,
.checkbox-slider-lg input+span:before {
    height: 40px;
    line-height: 40px;
}

.checkbox-slider-lg input+span:after {
    width: 40px;
    vertical-align: middle;
}

.checkbox-slider-lg input:checked+span:after {
    margin-left: 40px;
}

.udbud-table {
    padding-bottom: 5px;
}

.confirmformtable td {
    padding: 0 0 0 15px;
}

.panel-title {
    position: relative;
}

.panel-title::after {
    content: "\f107";
    color: #333;
    top: -2px;
    right: 0px;
    position: absolute;
    font-family: "FontAwesome"
}

.panel-title[aria-expanded="true"]::after {
    content: "\f106";
}

/*
   * Added 12-27-20 to showcase full title clickthrough
   */

.panel-heading-full.panel-heading {
    padding: 0;
}

.panel-heading-full .panel-title {
    padding: 10px 15px;
}

.panel-heading-full .panel-title::after {
    top: 10px;
    right: 15px;
}

.table-sc>tbody>tr>td,
.table-sc>tbody>tr>th,
.table-sc>tfoot>tr>td,
.table-sc>tfoot>tr>th,
.table-sc>thead>tr>td,
.table-sc>thead>tr>th {
    padding: 2px;
}

tr.border-bottom td {
    border-bottom: 1px solid #e1e1eb;
}

tr.border-top td {
    border-top: 1px solid #e1e1eb;
}




@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.dtr-modal div.dtr-modal-display {
        width: 95%
    }

    #maincontent {
        padding-top: 105px;
    }

    .mobileonly {
        visibility: visible;
    }

    .desktoponly {
        visibility: hidden;
        display: none;
    }

    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

    #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    #no-more-tables td:before {
        content: attr(data-title);
    }
}

@media only screen and (min-device-width: 768px) {
    .varifont {
        font-size: 14px;
        font-weight: 100;
    }

    #maincontent {
        padding-top: 55px;
    }

    .desktoponly {
        visibility: visible;
    }

    .mobileonly {
        visibility: hidden;
        display: none;
    }
}


/* @media screen and (max-device-width: 727px) */

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .varifont {
        font-size: 14px;
        font-weight: 100;
    }

    #maincontent {
        padding-top: 55px;
    }

    .desktoponly {
        visibility: visible;
    }

    .mobileonly {
        visibility: hidden;
        display: none;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    .varifont {
        font-size: 14px;
        font-weight: 100;
    }

    #maincontent {
        padding-top: 105px;
    }

    .desktoponly {
        visibility: visible;
    }

    .mobileonly {
        visibility: hidden;
        display: none;
    }
}

/* Phone landscape: the fixed header is 100px below 768px (logo bar stacked above the navbar) and
   50px from 768px. The device-width rules above pick the padding by pixel ratio instead, and iOS
   reports the portrait width as device-width in both orientations, so an iPhone SE (dpr 2, 667px)
   got 55px and hid the top of the page, while dpr-3 iPhones (844-932px) got 105px and a 50px gap.
   Decide by viewport width instead; same specificity, so these must stay after the rules above. */
@media only screen and (max-width: 767px) and (orientation: landscape) {
    #maincontent {
        padding-top: 105px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
    #maincontent {
        padding-top: 55px;
    }
}

.colorbox {
    float: left;
    height: 20px;
    width: 20px;
    margin-bottom: 1px;
    margin-right: 5px;
    border: 1px solid black;
    clear: both;
}

.puljered {
    background-color: red;
}

.puljegreen {
    background-color: #00b200;
}

.puljeredtext {
    color: red;
}

.puljegreentext {
    color: #00b200;
}

.puljesalmon {
    background-color: darkkhaki;

}

.selskabplate {
    margin-top: 1px;
    margin-left: 5px;
    background-color: darkkhaki;
    border-radius: .9em
}

.sum-border {
    border-top: black thin solid !important;

}

.sum-border-end {
    border-bottom: black medium solid !important;

}

.selskab td {
    background-color: #b3e0f7 !important;
}

.selskab-sum td {
    background-color: white !important;
}

.reductioncolor {
    color: orange;
}

.reductioncolor-light {
    color: rgb(255, 204, 138);
}

@media screen and (max-width: 991px) {
    /* Breathing room above the first frontpage card on mobile */
    .grid-container {
        margin-top: 10px;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    .hide-on-mobile-portrait,
    td.mobileonly.hide-on-mobile-portrait,
    th.mobileonly.hide-on-mobile-portrait {
        /* the double-class selectors outrank the later td.mobileonly { table-cell !important } */
        display: none !important;
    }
}

/* Counterpart to hide-on-mobile-portrait: shown only on phones in portrait, hidden everywhere else.
   Pair a .hide-on-mobile-portrait element with a .mobile-portrait-only one to swap e.g. a full
   fish name for its code only when the screen is at its narrowest; phone landscape then shows the
   desktop content, as the original site did. (Unlike desktoponly/mobileonly, which switch at 992px.) */
.mobile-portrait-only,
td.mobileonly.mobile-portrait-only,
th.mobileonly.mobile-portrait-only {
    display: none !important;
}
@media screen and (max-width: 767px) and (orientation: portrait) {
    .mobile-portrait-only {
        display: block !important;
    }
    span.mobile-portrait-only {
        display: inline !important;
    }
    tr.mobile-portrait-only {
        display: table-row !important;
    }
    td.mobile-portrait-only,
    th.mobile-portrait-only,
    td.mobileonly.mobile-portrait-only,
    th.mobileonly.mobile-portrait-only {
        display: table-cell !important;
    }
}

/* Transaktioner on a phone in landscape: the desktop columns are shown (hide-on-mobile-portrait),
   so keep each row on one line - the date with its company label beside it instead of wrapping
   onto 2-3 lines - and put the title, fish selector and print button on one line so the table
   starts higher. Applies to the transaktioner list (#fisk_table) and the per-fish overview
   (#fish_transactions in snippets/transaktioner_overblik.php). */
@media (max-width: 991px) and (orientation: landscape) {
    #fisk_table > thead > tr > th,
    #fisk_table > tbody > tr > td,
    #fish_transactions > thead > tr > th,
    #fish_transactions > tbody > tr > td {
        padding: 5px 6px;
    }
    #fisk_table td.trans-date,
    #fish_transactions td.trans-date {
        white-space: nowrap;
    }
    #fisk_table td.trans-date .selskabplate,
    #fish_transactions td.trans-date .selskabplate {
        float: none !important;
        margin-left: 4px;
        vertical-align: middle;
    }
    .trans-head .col-md-6 {
        float: left;
        width: auto;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .trans-head > .owfl {
        float: left;
    }
    .trans-head #artselectpanel {
        padding-top: 5px;
    }
    .trans-head::after {
        content: '';
        display: table;
        clear: both;
    }
}
/* Small phones in landscape (iPhone SE/mini, 667-740px): Bootstrap's .table-responsive makes every
   cell nowrap below 768px, which pushed the list to ~975px. Drop the ID column, let the description
   wrap and use a slightly smaller font so the table fits the screen. */
@media (max-width: 767px) and (orientation: landscape) {
    #fisk_table .trans-id {
        display: none;
    }
    .table-responsive > #fisk_table > tbody > tr > td.trans-desc {
        white-space: normal;
        min-width: 120px;
    }
    #fisk_table {
        font-size: 13px;
    }
    #fisk_table > thead > tr > th,
    #fisk_table > tbody > tr > td {
        padding: 5px 4px;
    }
}

/* Licensoversigt (licens_data): below 992px the table scrolls sideways inside .table-responsive.
   Freeze the first column - the licence number, plus the category and "Licens" header cells -
   at the left edge so rows stay identifiable while scrolling horizontally. */
@media (max-width: 991px) {
    #licenstable th:first-child,
    #licenstable td:first-child {
        position: sticky;
        position: -webkit-sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 2px 0 3px -1px rgba(0, 0, 0, .15);
    }
    #licenstable thead tr.info th:first-child {
        background: #d9edf7;
    }
    /* The category cell spans 4 columns, so the cell itself can't stay put - pin its text instead */
    #licenstable thead tr.info th:first-child>b {
        position: sticky;
        position: -webkit-sticky;
        left: 8px;
        display: inline-block;
    }
    #licenstable.table-hover>tbody>tr:hover>td:first-child {
        background: #f5f5f5;
    }
}

/* Rationsfiskeri (rationsfiskeri): same idea - freeze "Fra dato" + "Til dato" (the first two
   columns) and the header cells while the wide table scrolls sideways on phones. The second
   column is offset by the fixed width given to the first. The sum-row labels ("I alt" /
   "Tildelt Rationsmængde" / "Difference") sit in a colspan=2 cell exactly as wide as the two
   date columns, so that cell is frozen too - a wider sticky label cell would cover the values
   scrolling in behind it. Long labels wrap inside it instead of widening the date columns.
   Also on touch devices of any width: a tablet in landscape is >= 1024px, but the table still
   scrolls sideways there. On a mouse-driven desktop nothing changes. */
/* Desktop (nothing frozen): the sum-row label runs on over the empty cells to its right, as it did
   when the label cell spanned 5-8 columns, instead of wrapping inside the narrow colspan=2 cell. */
#rationsstable .rf-rowlabel {
    display: inline-block;
    width: 0;
    white-space: nowrap;
}
@media (max-width: 991px), (pointer: coarse) {
    #rationsstable .rf-rowlabel {
        width: auto;
        white-space: normal;
    }
    #rationsstable th:first-child,
    #rationsstable td:first-child:not([colspan]),
    #rationsstable th:first-child:not([colspan])+th,
    #rationsstable td:first-child:not([colspan])+td {
        position: sticky;
        position: -webkit-sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        white-space: nowrap;
    }
    #rationsstable th:first-child:not([colspan]),
    #rationsstable td:first-child:not([colspan]) {
        width: 92px;
        min-width: 92px;
    }
    #rationsstable th:first-child:not([colspan])+th,
    #rationsstable td:first-child:not([colspan])+td {
        left: 92px;
        box-shadow: 2px 0 3px -1px rgba(0, 0, 0, .15);
    }
    #rationsstable thead tr.info th:first-child {
        background: #d9edf7;
    }
    #rationsstable thead tr.info th:first-child>.rf-cathead {
        position: sticky;
        position: -webkit-sticky;
        left: 8px;
        display: inline-block;
    }
    #rationsstable td:first-child[colspan="2"] {
        position: sticky;
        position: -webkit-sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 2px 0 3px -1px rgba(0, 0, 0, .15);
        white-space: normal;
    }
    #rationsstable.table-hover>tbody>tr:hover>td:first-child,
    #rationsstable.table-hover>tbody>tr:hover>td:first-child:not([colspan])+td {
        background: #f5f5f5;
    }
}

/* Fixed layout: .main-sidebar is position:fixed with no overflow (AdminLTE expects slimScroll,
   which isn't loaded), so on short viewports - a phone in landscape is 844px wide, i.e. "desktop"
   to Bootstrap - the bottom menu items were unreachable. Let the sidebar scroll on its own.
   Skipped while collapsed (sidebar-mini), because its hover pop-outs would be clipped. */
.fixed:not(.sidebar-collapse) .main-sidebar {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@media (max-width: 767px) {
    /* No pop-outs below 768px: always scrollable, whatever the collapse state */
    .fixed .main-sidebar {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Account statements (account_status_debtor/creditor): keep #account_table inside its card on
   phones. The header cells carry col-xs-* classes (15px side padding each) which, together with
   the default 8px cell padding, made the table wider than the card. Compact cells + a scrolling
   card body as a fallback for very long texts. */
@media (max-width: 767px) {
    .account-table-body {
        padding: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #account_table {
        font-size: 12px;
        margin-bottom: 0;
    }
    #account_table>thead>tr>td,
    #account_table>tbody>tr>td {
        padding: 3px 2px;
    }
    #account_table td.int,
    #account_table>tbody>tr>td:first-child {
        white-space: nowrap;
    }
    #account_table td.linkcell .fa {
        font-size: 14px !important;
    }
}

/* Mobile overflow safety net: no page should be wider than the screen. If any content (a wide
   data table, a fixed-width block, etc.) exceeds the viewport, scroll it within the content area
   instead of forcing the whole page/body to scroll horizontally. This doesn't change table
   rendering, so it can't disturb the already-responsive transaktioner tables. */
@media (max-width: 767px) {
    .content-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* "Use landscape" hint (snippets/rotate_hint.php): a brief animated overlay shown only on portrait
   phones. It fades out on its own after --rotate-hint-duration (default 3s), and never blocks taps.
   Rotating to landscape hides it immediately (the media query stops matching), and the snippet's
   inline script then removes the element so it isn't shown again if the user rotates back to
   portrait on the same page. Adjust the duration per page via the CSS var (set inline by the
   snippet) or globally by editing the fallback below. */
.rotate-hint {
    display: none;
}
@keyframes rotate-hint-fade {
    0%, 80% { opacity: 1; }
    100%    { opacity: 0; visibility: hidden; }
}
@keyframes rotate-hint-device {
    0%, 35%   { transform: rotate(0deg); }
    65%, 100% { transform: rotate(-90deg); }
}
@media (max-width: 767px) and (orientation: portrait) {
    .rotate-hint {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3000; /* above sidebar (810) / navbar (800) */
        background: rgba(20, 20, 20, 0.9);
        color: #fff;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
        pointer-events: none; /* purely a hint — never traps interaction */
        animation: rotate-hint-fade var(--rotate-hint-duration, 3s) ease forwards;
    }
    .rotate-hint-inner i {
        display: inline-block;
        font-size: 64px;
        margin-bottom: 16px;
        animation: rotate-hint-device 1.4s ease-in-out infinite alternate;
    }
    .rotate-hint-inner p {
        font-size: 18px;
    }
}

/* PDF modal (js/pdf-modal.js) - used by every print button.
   The dialog is sized to the viewport so it fits on laptops; the body
   either holds an iframe (native viewer) or PDF.js canvases (mobile/webview). */
/* The dialog is sized to the visible area by fitHeight(), so the modal itself
   never needs to scroll - and must not, or a swipe on the top bar moves the
   buttons out of reach (Bootstrap sets overflow-y: auto on .modal-open .modal). */
.modal-open #pdfmodal {
    overflow: hidden;
}
#pdfmodal .modal-dialog {
    width: auto;
    max-width: 1400px;
    margin: 10px auto;
}
@media (min-width: 768px) {
    #pdfmodal .modal-dialog {
        width: calc(100vw - 40px);
    }
}
#pdfmodal .modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    overflow: hidden;
}
#pdfmodal .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
#pdfmodal .modal-title {
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#pdfmodal .pdfmodal-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}
#pdfmodal .pdfmodal-actions .btn {
    margin-left: 4px;
}
#pdfmodal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #525659;
}
#pdfmodal .modal-body.pdfmodal-body--pages {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#pdfmodal .pdfmodal-frame {
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
#pdfmodal .pdfmodal-body--frame .pdfmodal-frame {
    display: block;
}
#pdfmodal .pdfmodal-pages {
    display: none;
    padding: 8px;
}
#pdfmodal .pdfmodal-body--pages .pdfmodal-pages {
    display: block;
}
#pdfmodal .pdfmodal-page {
    margin: 0 auto 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#pdfmodal .pdfmodal-page canvas {
    display: block;
}
#pdfmodal .pdfmodal-status {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    text-align: center;
    line-height: 1.8;
}
#pdfmodal .pdfmodal-status.hidden {
    display: none;
}
@media (max-width: 767px) {
    #pdfmodal .modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    #pdfmodal .modal-content {
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    #pdfmodal .pdfmodal-actions .btn span {
        display: none;
    }
}

/* FINAL OVERRIDE - Must be at end of file to override all other media queries */
/* Using 991px to match Bootstrap's mobile breakpoint */
@media (max-width: 991px) {
    .navbar-nav .desktoponly,
    .nav.navbar-nav .desktoponly,
    ul.nav.navbar-nav.navbar-right .desktoponly,
    li.dropdown.desktoponly,
    .desktoponly,
    li.desktoponly,
    .dropdown.desktoponly {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        opacity: 0 !important;
    }

    .navbar-nav .mobileonly,
    .nav.navbar-nav .mobileonly,
    ul.nav.navbar-nav.navbar-right .mobileonly,
    .mobileonly,
    li.mobileonly,
    .dropdown.mobileonly {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    td.mobileonly,
    th.mobileonly {
        display: table-cell !important;
    }

    tr.mobileonly {
        display: table-row !important;
    }

    span.mobileonly {
        display: inline !important;
    }
}

/* Desktop override - show desktoponly on larger screens */
@media (min-width: 992px) {
    .desktoponly {
        display: block !important;
        visibility: visible !important;
    }

    td.desktoponly,
    th.desktoponly {
        display: table-cell !important;
    }

    tr.desktoponly {
        display: table-row !important;
    }

    span.desktoponly {
        display: inline !important;
    }

    .mobileonly {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Ship dropdown: widen for the mobile navbar (kicks in at <=991px).
   Selector matches the specificity of `.navbar-right > li.dropdown > .dropdown-menu`
   (which forces width:auto on mobile) and adds the ul tag to win, so the menu
   spans the screen instead of shrinking to the ship-name content. */
@media (max-width: 991px) {
    .navbar-right > li.dropdown > ul.ship-dropdown-menu {
        right: 5px !important;
        left: auto !important;
        width: 96vw !important;
        max-width: 720px !important;
        min-width: 280px !important;
        box-sizing: border-box !important;
    }
}

/* ── Create-offer type picker (empty-state cards) ───────────────────────── */
#typepicker .typepicker-intro {
    margin-bottom: 12px;
    font-weight: 600;
}
.typecard {
    border: 1px solid #d2d6de;
    border-radius: 4px;
    padding: 18px 12px;
    margin-bottom: 12px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    height: 100%;
}
.typecard:hover,
.typecard:focus {
    border-color: #3c8dbc;
    background: #f6fbfe;
    box-shadow: 0 1px 4px rgba(60, 141, 188, 0.25);
    outline: none;
}
.typecard-icon {
    font-size: 28px;
    color: #3c8dbc;
    margin-bottom: 8px;
}
.typecard-title {
    font-size: 16px;
    font-weight: 600;
}
#typebacklink {
    color: #3c8dbc;
    cursor: pointer;
}


/* ---- Switch-lister (notifikationsindstillinger, favoritfisk) ---------------
   Pages that are a list of on/off choices follow the stamdata layout
   (.grid-container / .grid-item cards). These rules cover the switch itself,
   the multi-column flow inside a card, and the save confirmation. */

/* Items flow into as many columns as the card is wide enough for. */
.pf-optionlist {
    column-width: 210px;
    column-gap: 18px;
}

/* A card with many rows takes two grid columns so its list can flow wider
   instead of turning into one very long column. Only where the grid actually
   has two columns to give: below this width every card is already full width. */
@media screen and (min-width: 1100px) {
    .grid-item--wide {
        grid-column: span 2;
    }
}

/* Let a small card backfill the gap a wide one leaves at the end of a row.
   Opt-in, because on stamdata and the frontpage the reading order matters. */
.grid-container--dense {
    grid-auto-flow: dense;
}

/* Definition rows (symbolforklaring): a short key and its explanation. Flows
   into columns like .pf-optionlist, but the value is allowed to wrap - the old
   page used white-space: nowrap and long names ran into the next column. */
.pf-deflist {
    column-width: 240px;
    column-gap: 22px;
}

.pf-deflist--wide {
    column-width: 340px;
}

.pf-def {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.pf-def-key {
    flex: 0 0 auto;
    min-width: 52px;
    font-weight: bold;
}

.pf-def-value {
    flex: 1 1 auto;
    min-width: 0;
}

.pf-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #f4f4f4;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.pf-option:last-child {
    border-bottom: none;
}

.pf-option-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-rowtable > tbody > tr > td {
    vertical-align: middle;
}

.pf-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 22px;
    margin: 0;
}

.pf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pf-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 22px;
    transition: background-color 0.2s;
}

.pf-slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.pf-switch input:checked + .pf-slider {
    background-color: #00a65a;
}

.pf-switch input:checked + .pf-slider:before {
    transform: translateX(22px);
}

.pf-switch input:disabled + .pf-slider {
    opacity: 0.6;
    cursor: default;
}

.pf-switch input:focus + .pf-slider {
    box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.4);
}

.pf-locked {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
}

/* Save confirmation, bottom right, disappears on its own. */
.pf-flash {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    padding: 10px 16px;
    border-radius: 3px;
    background: #00a65a;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.pf-flash.is-error {
    background: #dd4b39;
}

.pf-flash.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Notifikationslisten --------------------------------------------------
   Moved out of templates/notifications_list.php so the page carries no inline
   stylesheet. Scoped to the list container: .notification-item and .category-*
   are also used by the bell dropdown, which keeps its own rules above. */

#notification-list-container .notification-item {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
    transition: background-color 0.3s;
}

#notification-list-container .notification-item:hover {
    background-color: #f9f9f9;
}

#notification-list-container .notification-item.unread {
    background-color: #f0f8ff;
    border-left: 3px solid #3c8dbc;
}

#notification-list-container .notification-item .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

#notification-list-container .notification-item .notification-title {
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

#notification-list-container .notification-item.unread .notification-title {
    font-weight: 700;
}

#notification-list-container .notification-item .notification-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 3px;
    margin-left: 10px;
}

#notification-list-container .notification-item .notification-message {
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
}

#notification-list-container .notification-item .notification-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
}

#notification-list-container .notification-item .notification-actions {
    display: flex;
    gap: 10px;
}

#notification-list-container .notification-item .notification-actions button {
    font-size: 12px;
    padding: 3px 10px;
}

#notification-list-container .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

#notification-list-container .empty-state i {
    font-size: 60px;
    color: #ddd;
    margin-bottom: 20px;
}

#notification-list-container .category-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 3px;
    font-weight: normal;
}

#notification-list-container .category-System { background-color: #f39c12; color: white; }
#notification-list-container .category-Skibs { background-color: #3c8dbc; color: white; }
#notification-list-container .category-Fangst { background-color: #00a65a; color: white; }
#notification-list-container .category-Faktura { background-color: #dd4b39; color: white; }
#notification-list-container .category-Kvote { background-color: #605ca8; color: white; }

/* Topbar on a phone in LANDSCAPE: show the buttons exactly as on desktop.
   A landscape phone is < 992px wide, so the "FINAL OVERRIDE" and the 768px mobile block above
   collapse the controls (avatar only, ship ident only, no carets). There is plenty of horizontal
   room in landscape, so restore the desktop variant. Scoped to #mainheader so the rest of the
   page keeps its mobile layout; the id selector outranks the class-only !important rules above.
   Must stay after the (max-width: 991px) / (min-width: 992px) desktoponly/mobileonly blocks. */
@media (max-width: 991px) and (orientation: landscape) {
    #mainheader li.dropdown.desktoponly {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    #mainheader span.desktoponly {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    #mainheader .mobileonly {
        display: none !important;
        visibility: hidden !important;
    }

    /* Desktop button metrics (undo the compact 768px values) */
    #mainheader .navbar-control {
        padding: 0 14px !important;
        margin: 0 4px !important;
        height: 36px !important;
        border-radius: 6px;
    }
    #mainheader .navbar-control .topcaret {
        display: inline-block;
    }

    /* Ship: "ident name" as on desktop */
    #mainheader .ship-control .ship-name {
        display: inline-block !important;
    }
    #mainheader .navbar-control.ship-control {
        padding: 0 14px !important;
        max-width: 200px !important;
    }

    /* User: full name (desktop li) instead of the avatar circle */
    #mainheader .navbar-control.user-control {
        gap: 8px !important;
        padding: 0 14px !important;
    }
    #mainheader .navbar-control.user-control span {
        display: inline !important;
    }

    /* Notification envelope: desktop padding */
    #mainheader .navbar-control.notification-control {
        padding: 8px 12px !important;
    }
    #mainheader .notification-control .fa-envelope-o {
        font-size: 16px !important;
    }
}

/* Ship dropdown on a phone in LANDSCAPE: keep a fixed width instead of the 96vw
   mobile rule above, so the list does not grow to 720px when the phone is rotated.
   400px matches both the desktop min-width and roughly 96vw of a phone in portrait. */
@media (max-width: 991px) and (orientation: landscape) {
    .navbar-right > li.dropdown > ul.ship-dropdown-menu {
        width: 400px !important;
        min-width: 400px !important;
        max-width: 96vw !important;
    }
}