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;
}

#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;
}

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

.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 */
@media (max-width: 768px), (max-device-width: 768px) {
    /* 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;
}

.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;
    }
}

.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) {
    .newslist {
        display: none !important;
    }

    /* 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 {
        display: none !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). 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-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full page width */
    height: 100vh;
    /* Full viewport height */
}

iframe {
    width: 100%;
    /* Make iframe width 100% of container */
    height: 100%;
    /* Set iframe height */
    border: none;
    /* Remove border */
}

/* 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;
}