:root {
    /* ── #map stacking hierarchy ──────────────────────────────────────────
       These four elements (#hover-info, #statcard, .mapcard [ShipCard /
       measurecard], .map-button-box) are all descendants of #map, each
       establishing its own stacking context via position+z-index, so only
       relative order among THESE FOUR matters here — everything outside
       #map (headerbar, menubar, dialogs, settings/tableside windows,
       notifications) is `position: fixed` and paints in a separate,
       higher layer regardless of these values.

       Intentional order, back to front: passive hover tooltip, then the
       stats readout, then the persistent map controls (zoom/layers/info),
       then the vessel detail card on top — ShipCard is the highest-priority
       UI layer whenever it is open, so its own content (lat/lon, vessel
       info, action buttons) is never hidden under the map's zoom/layer
       controls. Map controls only regain top priority once the card is
       closed, since at that point .mapcard is not painting over them. */
    --z-map-hover-info: 10;
    --z-map-statcard: 20;
    --z-map-controls: 30;
    --z-map-shipcard: 40;

    --primary-color: #0857b1;
    --secondary-color: #12a5ed;
    --tertiary-color: #0b1033;


    --shadow-color: rgba(0, 0, 0, 0.35);
    --shadow-color-light: rgba(0, 0, 0, 0.18);


    /* Dark Glass panels */
    --settings-bg-color: rgba(12, 28, 50, 0.78);
    --settings-header-bg-color: rgba(15, 45, 80, 0.85);

    --bottombar-color: rgba(11, 16, 51, 0.92);

    --panel-color: rgba(10, 25, 45, 0.72);


    --ok-color: rgb(129, 244, 129);
    --error-color: #ff5252;
    --stationCircleColor: yellow;

    --header-color: var(--primary-color);
    --header-title-color: #4da3ff;


    --selection-color: #ff9800;


    --mainspace-color: rgb(235, 240, 245);
    --backdrop-color: #e8eef5;

    --focus-color: #ff5252;
    --light-gray: #b8c2cc;


    --header-font-color: white;



    /* Menu */
    --menu-background-color:
        rgba(8, 22, 40, 0.82);

    --menu-divider-color:
        rgba(255, 255, 255, 0.18);

    --menu-border-color:
        rgba(255, 255, 255, 0.2);

    --dialog-title-color:
        var(--secondary-color);

    --menu-background-hover-color:
        rgba(18, 165, 237, 0.25);

    --menu-font-color:
        #e8f4ff;



    /* Charts */
    --chart1-color: rgba(93, 169, 213, 0.7);
    --chart2-color: rgba(157, 93, 213, 0.7);
    --chart3-color: rgba(93, 213, 97, 0.7);
    --chart4-color: rgba(213, 157, 93, 0.7);
    --chart5-color: rgba(93, 213, 154, 0.7);
    --chart6-color: rgba(211, 211, 211, 0.7);

    --chart-color: #e8f4ff;
    --chart-grid-color:
        rgba(255, 255, 255, 0.18);



    --mainspace-container-color:
        rgba(255, 255, 255, 0.15);



    /* Table header */
    --tableheader-header-color:
        white;

    --tableheader-header-background-color:
        rgba(8, 87, 177, 0.85);

    --table-header-background-color:
        rgba(8, 87, 177, 0.85);



    --table-border-color:
        rgba(255, 255, 255, 0.18);



    /* Table */
    --table-background-color:
        rgba(12, 30, 55, 0.72);

    --table-selection-background-color:
        rgba(18, 165, 237, 0.25);

    --table-alternate-background-color:
        rgba(255, 255, 255, 0.06);


    /* Table text in ship use  */
    --table-font-color:
        #111111;





    /* Text */
    --main-font-color:
        #ffffff;



    --stat-label-color:
        #b8c7d9;

    --stat-divider-color:
        rgba(255, 255, 255, 0.2);

    --stat-color:
        white;



    /* Ship Card */
    --shipcard-font-color:
        #ffffff;


    --shipcard-header-color:
        rgba(8, 87, 177, 0.70);


    --shipcard-content-color:
        rgba(8, 20, 40, 0.75);


    --shipcard-content-hover-color:
        #12a5ed;


    --shipcard-footer-background-color:
        rgba(5, 10, 18, 0.88);


    --shipcard-footer-font-color:
        #ffffff;


    --shipcard-footer-hover-color:
        var(--secondary-color);


    --shipcard-selection-color:
        rgba(255, 255, 255, 0.08);


    --shipcard-divider-color:
        rgba(255, 255, 255, 0.15);


    --shipcard-footer-shadow-color:
        rgba(0, 0, 0, 0.45);



    /* Hover */
    --hover-transform:
        scale(0.93);

    --hover-transition:
        transform ease-out 0.2s, background 0.4s;


    --hover-background:
        rgba(18, 165, 237, 0.18);



    /* Graph */
    --graph-header-color:
        white;

    --graph-header-bg-color:
        var(--primary-color);


    --graph-header-side-color:
        rgba(242, 248, 255, 0.18);



    /* Tooltip */
    --tooltip-background-color:
        rgba(10, 25, 45, 0.92);

    --tooltip-border-color:
        rgba(255, 255, 255, 0.25);



    --textshadow:
        0 2px 4px rgba(0, 0, 0, 0.6);



    /* Notification */
    --notification-background-color:
        rgba(11, 16, 51, 0.92);

    --notification-font-color:
        white;

    --notification-border-color:
        #0857b1;



    --label-shadow-color:
        rgba(0, 0, 0, 0.8);

    --label-shadow-width:
        2px;



    --link-color:
        #12a5ed;

    --link-hover-focus-color:
        #4da3ff;


    --timestamp-color:
        rgba(255, 255, 255, 0.65);
}

.dark {
    --primary-color: #5dd5d5;
    --secondary-color: #5dd5d5;
    --tertiary-color: #05081f;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --shadow-color-light: rgba(255, 255, 255, 0.1);
    --bottombar-color: black;
    --settings-bg-color: rgb(25, 25, 25);
    --settings-header-bg-color: rgb(25, 25, 25);
    --panel-color: black;
    --ok-color: #7ce481;
    --error-color: #cf6679;
    --stationCircleColor: darkgrey;
    --header-color: #323232;
    --header-title-color: #4a4a4a;
    --selection-color: #9fa8da;
    --mainspace-color: rgb(25, 25, 25);
    --backdrop-color: black;
    --focus-color: #90caf9;
    --light-gray: lightgray;
    --header-font-color: #f8f9fa;
    --menu-background-color: rgb(41, 41, 41);
    --menu-border-color: rgb(17, 17, 17);
    --dialog-title-color: rgb(50, 50, 50);
    --menu-divider-color: rgb(80, 80, 80);
    --menu-background-hover-color: #4d4d4d;
    --menu-font-color: #f8f9fa;
    --mainspace-container-color: #212529;
    --tableheader-header-color: white;
    --tableheader-header-background-color: rgb(30, 30, 30);
    --table-header-background-color: rgb(50, 50, 50);
    --table-border-color: rgb(18, 18, 18);
    --table-background-color: rgb(18, 18, 18);
    --table-selection-background-color: rgb(60, 60, 60);
    --table-alternate-background-color: rgb(30, 30, 30);
    /* Text */
    --main-font-color: #0b1033;
    --stat-label-color: darkgrey;
    --stat-divider-color: rgb(50, 50, 50);
    --stat-color: white;
    --shipcard-footer-background-color:
        rgba(8, 16, 51, 0.65);
    --shipcard-header-color: rgb(50, 50, 50);
    --shipcard-content-color: rgb(13, 13, 13);
    --shipcard-content-hover-color: var(--tertiary-color);
    --shipcard-footer-hover-color: var(--secondary-color);
    --shipcard-footer-shadow-color: black;
    --shipcard-selection-color: rgb(50, 50, 50);
    --shipcard-divider-color: rgb(17, 17, 17);
    --chart1-color: rgba(93, 169, 213, 0.7);
    --chart2-color: rgba(157, 93, 213, 0.7);
    --chart3-color: rgba(93, 213, 97, 0.7);
    --chart4-color: rgba(213, 157, 93, 0.7);
    --chart5-color: rgba(93, 213, 154, 0.7);
    --chart6-color: rgba(211, 211, 211, 0.7);
    --chart-color: lightgrey;
    --chart-grid-color: rgb(56, 56, 56);
    --hover-background:
        rgba(255, 255, 255, 0.35) --graph-header-color: white;
    --graph-header-bg-color: rgb(41, 41, 41);
    --graph-header-side-color: rgb(32, 32, 32);
    --tooltip-background-color:
        rgba(255, 255, 255, 0.85);
    --tooltip-border-color: rgb(30, 30, 30);
    --textshadow: black 1px 1px 0px;
    --notification-background-color: lightgrey;
    --notification-font-color: black;
    --notification-border-color: rgb(17, 17, 17);
    --label-shadow-color: black;
    --link-color: #5dd5d5;
    --link-hover-focus-color: #7ce481;
    --timestamp-color: rgba(255, 255, 255, 0.6);
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    /*-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
    -webkit-touch-callout: none;
    overflow: hidden;
    touch-action: none;
}


/* =========================================================================
   SELF-HOSTED FONTS

   Every family the UI asks for is declared here against frontend/fonts/.
   There is no Google Fonts link, no CDN and no external origin anywhere in
   the project: the app is expected to run on an isolated network, so a
   remote font would mean either a hang or a silent fallback to a system
   face. scripts/build-html.sh copies frontend/fonts/ into dist/ and fails
   the build if any url() below has no matching file.

   Weights are declared, not synthesised. A weight the UI uses but does not
   declare (800 was one) gets faux-bolded by the browser from an adjacent
   face, which is visibly heavier and blurrier than the real cut.
   ========================================================================= */

/* --- Vazirmatn: Persian/Latin UI text, the application's body font ------ */

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- Orbitron: the display face used for the brand wordmark ------------- */

@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* .brand-text asks for Orbitron at 700; without this face the browser
   would faux-bold the 400 cut. */

/* --- Roboto Mono: NMEA sentences, MMSI/IMO and other fixed-width data --- */

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.map-layers-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 1em !important;
    height: 1em !important;

    color: currentColor;
}

.map-layers-button>svg {
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    fill: currentColor !important;
}

.map-layers-button>svg>path {
    fill: currentColor !important;
}

.draggable.dragging {
    cursor: grabbing;
}


a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--link-hover-focus-color);
    text-decoration: underline;
}

.header {
    background: var(--header-color);
    flex: 0 0 40px;
    font-size: 20px;
    display: flex;
    justify-content: stretch;
    color: white;
    position: relative;
}

.header-title {
    flex: 1;
    background-color: var(--header-title-color);
    border-top-right-radius: 25% 50%;
    border-bottom-right-radius: 25% 50%;
    display: flex;
    flex-direction: row;
    padding-right: 14px;
}

.header-title span {
    padding: 15px;
    padding-top: 17px;
    line-height: 20px;
    padding-right: 50px;
}

.header-title div {
    background: var(--header-color);
    padding: 10px;
    margin: auto 0;
    border-radius: 20px;
    font-size: 15px;
    line-height: 15px;
}

.small-icon {
    font-size: 18px;
}

.tabcontent {
    flex: 1 0 1px;
}

.addscrollbar {
    overflow: auto;
}

@media only screen and (max-width: 750px) {
    .header-title div {
        display: none;
    }
}

.header-title div.show {
    display: none;
}

.header-title div i {
    padding: 0px 14px;
    font-size: 18px;
    transition: var(--hover-transition);
}

.header-title div i:hover {
    cursor: pointer;
    transform: var(--hover-transform);
}

.header-title div i.active {
    color: var(--secondary-color);
}

.header-icon {
    width: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
    font-size: 15px;
    line-height: 15px;
}

.receiver-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 8px;
    background: var(--menu-background-color);
    border: 1px solid var(--menu-divider-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 10010;
    min-width: 140px;
    padding: 4px 0;
    white-space: nowrap;
}

.receiver-dropdown-item {
    padding: 5px 14px;
    font-size: 13px;
    color: var(--menu-font-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.receiver-dropdown-item+.receiver-dropdown-item {
    border-top: 1px solid var(--menu-divider-color);
}

.receiver-dropdown-item:hover {
    background: var(--menu-background-hover-color);
}

.receiver-dropdown-item.active {
    color: var(--primary-color);
    font-weight: 600;
}

.pulsating {
    animation: pulse-streaming 1.5s ease-in-out infinite;
}

@keyframes pulse-streaming {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.header-icon:hover {
    cursor: pointer;
    transform: var(--hover-transform);
}

.header-icon.active {
    color: var(--ok-color);
}

.header-menubutton {
    background: var(--menu-background-color);
    color: var(--menu-font-color);
    transition: var(--hover-transition);
    font-size: 24px;
    width: 40px;
    border-right: 1px solid rgb(120, 120, 120);
}

.header-menubutton>div {
    padding: 15px 9px;
    margin: auto;
}

@media (hover: hover) {
    .header-menubutton:hover {
        cursor: pointer;
    }
}

.bottombar {
    display: none;
    flex: 0 0 5px;
    background: var(--bottombar-color);
}




/* ==========================================
   Realtime NMEA Table
   Persian Gulf Traffic Glass UI
========================================== */


#realtime_content {

    direction: rtl;

}


/* panel */

#realtime_content .realtime-panel {

    direction: rtl;

}

/* 
/* table */

#realtime_content table {

    width: 100%;

    direction: rtl;

    border-collapse: separate;

    border-spacing: 0;

    overflow: hidden;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .72);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .12);

}

/* header */

#realtime_content table th {

    text-align: center !important;

    vertical-align: middle;

    direction: rtl;

    background:
        linear-gradient(135deg,
            #0756a8,
            #10a5ed);

    color: white;

    padding: 12px 10px;

    font-weight: 600;

    font-size: 13px;

}

/* body */

#realtime_content table td {

    text-align: center;

    vertical-align: middle;

    padding: 9px 10px;

    color: #263238;

    background:
        rgba(255, 255, 255, .45);

    border-bottom:
        1px solid rgba(0, 80, 150, .12);

    font-size: 12px;

}



/* alternate rows */

#realtime_content table tbody tr:nth-child(even) td {

    background:
        rgba(230, 242, 252, .55);

}



/* hover */

#realtime_content table tbody tr:hover td {

    background:
        rgba(18, 165, 237, .15);

}



/* NMEA text */

#realtime_content .nmea-text {

    direction: ltr;

    text-align: left;

    font-family:
        "Courier New",
        monospace;

    color: #102a43;

    font-weight: 500;

}



/* NMEA container */

#realtime_content .nmea-cell-content {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}



/* channel */

#realtime_content .channel-indicator {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 4px;

}



/* channel boxes */

#realtime_content .channel-box {

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    background: #dbeafe;

    color: #0756a8;

    font-size: 11px;

    font-weight: 600;

}



#realtime_content .channel-box.active {

    background: #10a5ed;

    color: white;

    box-shadow:
        0 0 8px rgba(16, 165, 237, .45);

}



/* decoder button */

#realtime_content .nmea-decoder-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 28px;

    height: 28px;

    border-radius: 7px;

    background:
        rgba(8, 87, 177, .08);

    border:
        1px solid rgba(8, 87, 177, .18);

    transition: .2s ease;

}



#realtime_content .nmea-decoder-icon:hover {

    background:
        rgba(18, 165, 237, .2);

    transform: scale(1.08);

}



/* error */

#realtime_content .nmea-error-row td {

    text-align: center;

    padding: 20px;

}


#menubar {
    z-index: 99999;
    background: var(--menu-background-color);
    color: var(--menu-font-color);
    text-align: center;
    align-items: stretch;
    display: none;
    flex-direction: row;
    visibility: visible;
}

#menubar div {
    flex: 0 1 150px;
    margin: 0 10px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--hover-transition);
    display: flex;
    flex-direction: column;
}

#menubar div i {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 24px;
    line-height: 24px;
}

#menubar div span {
    padding-bottom: 10px;
    font-size: 10px;
    line-height: 10px;
}

@media (hover: hover) {
    #menubar div:hover {
        background: var(--menu-background-hover-color);
        transform: var(--hover-transform);
    }
}

#menubar div.active {
    border-bottom: 4px solid var(--secondary-color);
    color: var(--secondary-color);
}

#menubar.visible {
    display: flex;
}

.mainspace-container {
    flex: 1 0 0;
    position: relative;
    background: var(--backdrop-color);
    border-top: solid 1px var(--mainspace-container-color);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.mainspace {
    background: var(--mainspace-color);
    margin: 0px;
    flex: 1;
    border: 1px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

@media only screen and (max-height: 1000px) {
    .menubar {
        display: flex;
    }

    .header-menubutton {
        display: block;
    }

    .bottombar {
        display: none;
    }
}

/* =========================================================
   ABOUT PAGE
   Premium, self-contained marketing-grade page. Always dark
   (matches the headerbar / settings-window "hormoz" glass
   language, which is theme-independent by existing precedent),
   scoped entirely under .aboutpage so it never leaks into the
   rest of the app and never depends on the light/dark toggle.
   ========================================================= */

.aboutpage {
    --ap-navy-950: var(--hormoz-navy-950, #05080f);
    --ap-navy-900: var(--hormoz-navy-900, #0a0f1d);
    --ap-navy-800: var(--hormoz-navy-800, #0f1626);
    --ap-navy-700: var(--hormoz-navy-700, #16203a);
    --ap-turquoise: var(--hormoz-turquoise, #14e0c4);
    --ap-turquoise-dim: var(--hormoz-turquoise-dim, #0ea99a);
    --ap-cyan: var(--hormoz-cyan, #22d3ee);
    --ap-text: var(--hormoz-text, #e8f1f2);
    --ap-text-muted: var(--hormoz-text-muted, #8fa3ab);
    --ap-text-dim: var(--hormoz-text-dim, #5c7078);
    --ap-glass-bg: var(--hormoz-glass-bg, rgba(15, 22, 38, 0.55));
    --ap-glass-border: var(--hormoz-glass-border, rgba(20, 224, 196, 0.18));
    --ap-glass-border-strong: var(--hormoz-glass-border-strong, rgba(20, 224, 196, 0.35));
    --ap-radius: var(--hormoz-radius, 16px);
    --ap-radius-lg: var(--hormoz-radius-lg, 22px);
    --ap-radius-sm: var(--hormoz-radius-sm, 10px);

    display: block;
    min-height: 100%;
    background-color: var(--ap-navy-950);
    background-image:
        radial-gradient(ellipse 900px 600px at 15% -10%, rgba(20, 224, 196, 0.08), transparent 60%),
        radial-gradient(ellipse 900px 700px at 100% 10%, rgba(34, 211, 238, 0.06), transparent 55%),
        radial-gradient(ellipse at top, var(--ap-navy-800), var(--ap-navy-950));
    color: var(--ap-text);
    font-size: 14px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.aboutpage * {
    box-sizing: border-box;
}

/* Fade/slide-up reveal primitive, shared by every section. */
.aboutpage .ap-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease var(--ap-delay, 0ms), transform .6s cubic-bezier(.22, 1, .36, 1) var(--ap-delay, 0ms);
    will-change: opacity, transform;
}

.aboutpage .ap-reveal.ap-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aboutpage .ap-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.aboutpage .ap-icon {
    width: 26px;
    height: 26px;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.aboutpage .ap-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 88px 24px 56px;
    overflow: hidden;
    isolation: isolate;
}

.aboutpage .ap-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.aboutpage .ap-hero-grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(20, 224, 196, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 224, 196, 0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
}

.aboutpage .ap-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
}

.aboutpage .ap-hero-glow-1 {
    top: -160px;
    right: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(20, 224, 196, 0.35), transparent 70%);
}

.aboutpage .ap-hero-glow-2 {
    top: -80px;
    left: -160px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.28), transparent 70%);
}

.aboutpage .ap-radar-sweep {
    position: absolute;
    top: -220px;
    left: 50%;
    width: 640px;
    height: 640px;
    margin-left: -320px;
    border-radius: 50%;
    border: 1px solid rgba(20, 224, 196, 0.10);
    background: conic-gradient(from 0deg, rgba(20, 224, 196, 0.22), transparent 22%, transparent 100%);
    animation: ap-spin 9s linear infinite;
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
    .aboutpage .ap-radar-sweep {
        animation: none;
    }
}

@keyframes ap-spin {
    to {
        transform: rotate(360deg);
    }
}

.aboutpage .ap-hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aboutpage .ap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(20, 224, 196, 0.10);
    border: 1px solid var(--ap-glass-border);
    color: var(--ap-turquoise);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.aboutpage .ap-hero-title {
    margin: 22px 0 0;
    font-size: clamp(30px, 5.2vw, 52px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.5px;
    color: var(--ap-text);
}

.aboutpage .ap-gradient-text {
    background: linear-gradient(135deg, var(--ap-turquoise) 0%, var(--ap-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.aboutpage .ap-hero-sub {
    margin: 20px 0 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--ap-text-muted);
}

.aboutpage .ap-hero-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.aboutpage .ap-btn-primary {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 13px 28px;
    border-radius: var(--ap-radius-sm);
    background: linear-gradient(135deg, var(--ap-turquoise) 0%, var(--ap-cyan) 100%);
    color: #05201d;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(20, 224, 196, 0.25);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.aboutpage .ap-btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 30px rgba(20, 224, 196, 0.32);
}

.aboutpage .ap-btn-primary:focus-visible {
    outline: 2px solid var(--ap-cyan);
    outline-offset: 2px;
}

.aboutpage .ap-btn-lg {
    padding: 15px 34px;
    font-size: 15.5px;
}

.aboutpage .ap-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: var(--ap-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--ap-text);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.03);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.aboutpage .ap-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

.aboutpage .ap-hero-stats {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 40px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-glass-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--ap-glass-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    flex-wrap: wrap;
    justify-content: center;
}

.aboutpage .ap-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 96px;
}

.aboutpage .ap-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--ap-text);
    font-variant-numeric: tabular-nums;
}

.aboutpage .ap-stat-unit {
    font-size: 15px;
    font-weight: 700;
    color: var(--ap-turquoise);
}

.aboutpage .ap-stat-label {
    font-size: 12px;
    color: var(--ap-text-muted);
}

.aboutpage .ap-stat-divider {
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------
   SECTIONS (shared)
   --------------------------------------------------------- */

.aboutpage .ap-section {
    padding: 72px 24px;
    max-width: 1160px;
    margin: 0 auto;
}

.aboutpage .ap-section-alt {
    background: linear-gradient(180deg, transparent, rgba(20, 224, 196, 0.035) 15%, rgba(20, 224, 196, 0.035) 85%, transparent);
    max-width: 100%;
}

.aboutpage .ap-section-alt>* {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
}

.aboutpage .ap-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.aboutpage .ap-section-title {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--ap-text);
}

.aboutpage .ap-section-sub {
    margin: 0;
    font-size: 15px;
    color: var(--ap-text-muted);
    line-height: 1.8;
}

/* ---------------------------------------------------------
   MISSION / VISION
   --------------------------------------------------------- */

.aboutpage .ap-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.aboutpage .ap-mission-card {
    padding: 36px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-glass-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--ap-glass-border);
    transition: border-color .25s ease, transform .25s ease;
}

.aboutpage .ap-mission-card:hover {
    border-color: var(--ap-glass-border-strong);
    transform: translateY(-3px);
}

.aboutpage .ap-mission-tag {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ap-turquoise);
    letter-spacing: .2px;
}

.aboutpage .ap-mission-title {
    margin: 14px 0 12px;
    font-size: 21px;
    font-weight: 800;
    color: var(--ap-text);
}

.aboutpage .ap-mission-text {
    margin: 0;
    color: var(--ap-text-muted);
    font-size: 14.5px;
    line-height: 1.9;
}

/* ---------------------------------------------------------
   CAPABILITY CARDS
   --------------------------------------------------------- */

.aboutpage .ap-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.aboutpage .ap-card {
    padding: 28px 26px;
    border-radius: var(--ap-radius);
    background: var(--ap-glass-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--ap-glass-border);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.aboutpage .ap-card:hover {
    border-color: var(--ap-glass-border-strong);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.aboutpage .ap-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(20, 224, 196, 0.12);
    color: var(--ap-turquoise);
    margin-bottom: 18px;
}

.aboutpage .ap-card-title {
    margin: 0 0 10px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ap-text);
}

.aboutpage .ap-card-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ap-text-muted);
}

/* ---------------------------------------------------------
   PIPELINE / TECHNOLOGY FLOW
   --------------------------------------------------------- */

.aboutpage .ap-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.aboutpage .ap-flow-step {
    flex: 1 1 0;
    padding: 26px 22px;
    border-radius: var(--ap-radius);
    background: var(--ap-glass-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--ap-glass-border);
    transition: border-color .25s ease, transform .25s ease;
}

.aboutpage .ap-flow-step:hover {
    border-color: var(--ap-glass-border-strong);
    transform: translateY(-3px);
}

.aboutpage .ap-flow-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--ap-turquoise);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

.aboutpage .ap-flow-title {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ap-text);
}

.aboutpage .ap-flow-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ap-text-muted);
}

.aboutpage .ap-flow-arrow {
    flex: 0 0 auto;
    align-self: center;
    width: 28px;
    height: 1px;
    margin: 0 6px;
    background: linear-gradient(90deg, var(--ap-turquoise-dim), transparent);
    position: relative;
}

.aboutpage .ap-flow-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--ap-turquoise-dim);
    border-bottom: 1px solid var(--ap-turquoise-dim);
    transform: translateY(-50%) rotate(135deg);
}

html[dir="rtl"] .aboutpage .ap-flow-arrow::after {
    right: auto;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--ap-turquoise-dim);
    border-top: 1px solid var(--ap-turquoise-dim);
    transform: translateY(-50%) rotate(135deg);
}

/* ---------------------------------------------------------
   ENGINEERING PRINCIPLES
   --------------------------------------------------------- */

.aboutpage .ap-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.aboutpage .ap-principle {
    display: flex;
    gap: 18px;
    padding: 26px;
    border-radius: var(--ap-radius);
    background: var(--ap-glass-bg);
    border: 1px solid var(--ap-glass-border);
    transition: border-color .25s ease, transform .25s ease;
}

.aboutpage .ap-principle:hover {
    border-color: var(--ap-glass-border-strong);
    transform: translateY(-2px);
}

.aboutpage .ap-principle-index {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 800;
    color: var(--ap-turquoise-dim);
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.aboutpage .ap-principle-title {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ap-text);
}

.aboutpage .ap-principle-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ap-text-muted);
}

/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.aboutpage .ap-cta {
    position: relative;
    margin: 24px;
    padding: 64px 32px;
    border-radius: var(--ap-radius-lg);
    text-align: center;
    background:
        radial-gradient(ellipse 700px 300px at 50% 0%, rgba(20, 224, 196, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(20, 224, 196, 0.06), rgba(15, 22, 38, 0.4));
    border: 1px solid var(--ap-glass-border);
    overflow: hidden;
}

.aboutpage .ap-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.aboutpage .ap-cta-title {
    margin: 0;
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
    color: var(--ap-text);
}

.aboutpage .ap-cta-text {
    margin: 0 0 10px;
    color: var(--ap-text-muted);
    font-size: 14.5px;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {
    .aboutpage .ap-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aboutpage .ap-principles {
        grid-template-columns: 1fr;
    }

    .aboutpage .ap-flow {
        flex-direction: column;
    }

    .aboutpage .ap-flow-arrow {
        width: 1px;
        height: 22px;
        margin: 2px auto;
        background: linear-gradient(180deg, var(--ap-turquoise-dim), transparent);
    }

    .aboutpage .ap-flow-arrow::after {
        top: 0;
        right: 50%;
        transform: translateX(50%) rotate(225deg);
        border-right: 1px solid var(--ap-turquoise-dim);
        border-bottom: 1px solid var(--ap-turquoise-dim);
        border-left: none;
        border-top: none;
    }
}

@media (max-width: 720px) {
    .aboutpage .ap-hero {
        padding: 64px 18px 44px;
    }

    .aboutpage .ap-hero-stats {
        gap: 18px;
        padding: 20px 22px;
    }

    .aboutpage .ap-mission-grid {
        grid-template-columns: 1fr;
    }

    .aboutpage .ap-card-grid {
        grid-template-columns: 1fr;
    }

    .aboutpage .ap-section {
        padding: 52px 18px;
    }

    .aboutpage .ap-cta {
        margin: 16px;
        padding: 48px 22px;
    }
}

@media (max-width: 480px) {
    .aboutpage .ap-hero-stats {
        flex-direction: column;
        gap: 14px;
    }

    .aboutpage .ap-stat-divider {
        width: 60px;
        height: 1px;
    }
}



/* ==========================================
   Ship Table
   Persian Gulf Traffic UI
   RTL Header + Center Data
========================================== */


/* Main container */
#shipTable {

    direction: rtl;

    width: 100%;

    height: calc(100vh - 170px);

}




/* Tabulator root */
#shipTable .tabulator {

    height: 100%;

    font-family:
        Vazirmatn,
        Tahoma,
        sans-serif;

    font-size: 13px;

    border-radius: 10px;

    overflow: hidden;

}


/* Header */

#shipTable .tabulator-header {

    direction: rtl;

    background:
        linear-gradient(135deg,
            #0756a8,
            #10a5ed);

    color: white;

    border-bottom: none;

}


/* Header columns */

#shipTable .tabulator-col {

    background: transparent;

    color: white;

    text-align: center;

}


#shipTable .tabulator-col-title {

    text-align: center;

    font-weight: 600;

}


/* Data area */

#shipTable .tabulator-tableholder {

    overflow-y: auto;

}


/* Rows */

#shipTable .tabulator-row {

    min-height: 37px;

    background: rgba(255, 255, 255, 0.95);

}


/* alternate rows */

#shipTable .tabulator-row:nth-child(even) {

    background:
        rgba(8, 87, 177, 0.05);

}


/* hover */

#shipTable .tabulator-row:hover {

    background:
        rgba(16, 165, 237, 0.15);

}


/* Cells */

#shipTable .tabulator-cell {

    direction: ltr;

    text-align: center;

    padding: 8px 6px;

    border-right:
        1px solid rgba(0, 0, 0, 0.08);

}


/* Footer pagination */

#shipTable .tabulator-footer {

    direction: rtl;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.9);

}


/* Pagination buttons */

#shipTable .tabulator-page {

    font-family:
        Vazirmatn,
        Tahoma,
        sans-serif;

}


/* Search */

#shipSearch {

    direction: rtl;

    text-align: right;

    font-family:
        Vazirmatn,
        Tahoma,
        sans-serif;

}


/* Column menu */

#shipTableColumnVisibilityMenu {

    direction: rtl;

    text-align: right;

    font-family:
        Vazirmatn,
        Tahoma,
        sans-serif;


    max-height: 70vh;

    overflow-y: auto;


    min-width: 220px;

    max-width: 280px;


    /* Glassmorphism theme */
    background: var(--panel-color);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);


    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);


    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);


    padding: 10px;

}

.ship-table-column-dropdown-item {

    direction: rtl;

}





.tabulator .tabulator-cell {
    border: none;
    border-bottom: 1px solid var(--table-border-color);
    padding: 6px 14px;
    line-height: 24px;
    font-size: 12px;
    vertical-align: middle;
    color: var(--table-font-color);
}

/* keep inline icons (flags, ship-type markers) centered with the text */
.tabulator .tabulator-cell img,
.tabulator .tabulator-cell svg,
.tabulator .tabulator-cell span {
    vertical-align: middle;
}

.tabulator .tabulator-header {
    border: none;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: var(--table-header-background-color);
    font-size: 12px;
    color: white;
    border: none;
    padding: 8px 14px;
    border-collapse: collapse;
}

.tabulator-row:hover {
    background-color: var(--table-selection-background-color) !important;
}

.tabulator-row-odd {
    background-color: var(--table-background-color);
}

.tabulator-row-even {
    background-color: var(--table-alternate-background-color) !important;
}

.tablesection {
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 10px auto;
    color: var(--main-font-color);
    background-color: var(--table-background-color);
    width: fit-content;
}


.search-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
}

/* other tables */
.mytable {
    height: 100%;
    width: 100%;
    table-layout: fixed;
    box-sizing: border-box;
    overflow: auto;
    border-collapse: collapse;
}

.mytable thead {
    background-color: var(--table-header-background-color);
    font-size: 1em;
    color: white;
}

.mytable thead>tr>th {
    padding: 10px 15px;
    border-collapse: collapse;
}

.mytable tbody th,
td {
    border: none;
    padding: 10px 15px;
}

.mytable>tbody>tr>td {
    padding: 5px 4px;
}

.mytable>tbody>tr:nth-child(even) {
    background: var(--table-alternate-background-color);
}

.mytable>tbody>tr:hover {
    background: var(--table-selection-background-color);
}

.show {
    display: none;
}

/* Map styling */

#map {
    height: 100%;
    width: 100%;
    background-color: black;
}

.crosshair_cursor {
    cursor: crosshair;
}

.map-button-box {
    position: absolute;
    right: 10px;
    z-index: var(--z-map-controls);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--menu-border-color);
    border-radius: 9px;
    background-color: var(--menu-background-color);
    fill: var(--menu-font-color);
    color: var(--menu-font-color);
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: transform 0.3s ease-out;
}

/* Pill-shaped group (capsule ends) for the top "more tools" controls */
.map-button-box.map-pill {
    border-radius: 22px;
}

.map-button-box.active {
    transform: translateX(-425px);
}

.map-button {
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    margin: 0px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--menu-background-color) !important;
    fill: var(--menu-font-color) !important;
    color: var(--menu-font-color) !important;
    border-radius: 0 !important;
}

/* Thin divider between stacked buttons within a group */
.map-button+.map-button {
    border-top: 1px solid var(--menu-border-color) !important;
}

.map-button:hover {
    background-color: var(--menu-border-color) !important;
}

.map-button:focus {
    outline: none !important;
}

.map-button svg {
    width: 19px !important;
    height: 19px !important;
}

/* Top pill holds denser glyphs (ship/ruler) — render them a touch smaller
   so they don't look heavier than the bottom group's line icons */
.map-pill .map-button svg {
    width: 15px !important;
    height: 15px !important;
}

/* Attribution fold-out, opened from the (i) button in the bottom control group */
.map-attribution-foldout {
    position: absolute;
    right: 54px;
    bottom: 30px;
    max-width: 260px;
    z-index: var(--z-map-controls);
    padding: 6px 10px;
    border: 1px solid var(--menu-border-color);
    border-radius: 8px;
    background-color: var(--menu-background-color);
    color: var(--menu-font-color);
    box-shadow: 0 2px 8px var(--shadow-color);
    font-size: 10px;
    line-height: 1.4;
}

.map-attribution-foldout a {
    color: inherit;
}

#tableselection {}

#hover-info {
    position: absolute;
    display: flex;
    flex-direction: column;
    /* Overall container stacks cards vertically */
    flex: 0 0 auto;
    height: auto;
    width: auto;
    z-index: var(--z-map-hover-info);
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
}

.tooltip-card {

    direction: rtl;

    display: flex;
    flex-direction: row-reverse;

    align-items: center;

    gap: 12px;

    min-width: 230px;
    max-width: 320px;


    background:
        linear-gradient(135deg,
            rgba(20, 20, 25, .88),
            rgba(5, 15, 25, .75));


    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);


    border: 1px solid rgba(255, 255, 255, .12);


    border-radius: 16px;


    padding: 12px 15px;


    color: #fff;


    box-shadow:
        0 10px 30px rgba(0, 0, 0, .55),
        inset 0 0 20px rgba(255, 255, 255, .04);


    font-family: Vazirmatn, Tahoma, sans-serif;


    text-align: center;


    animation: tooltipFade .2s ease;


    overflow: hidden;

}



/* بخش متن اصلی */

.tooltip-card .tooltip-text,
.tooltip-info {

    flex: 1;

    direction: rtl;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    line-height: 1.8;

    text-align: center;

}



/* نام کشتی */

.tooltip-title {

    width: 100%;

    font-size: 15px;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 5px;

}



/* ردیف اطلاعات */

.tooltip-row {

    width: 100%;

    font-size: 13px;

    color: #d7e9ff;

}



.tooltip-row b {

    color: #4fc3ff;

    font-weight: 700;

}



/* زمان آخرین دریافت */

.tooltip-time {

    font-size: 11px;

    opacity: .7;

    color: #fff;

}



/* پرچم */

.tooltip-card .tooltip-flag {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* عکس پرچم */

.tooltip-card img {

    border-radius: 5px;

}



/* پیام های AIS هواشناسی */

.tooltip-meteo {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid rgba(255, 255, 255, .1);

    color: #d7e9ff;

    font-size: 12px;

}



/* جلوگیری از بزرگ شدن Tooltip */

.tooltip-card {

    max-height: 420px;

    overflow-y: auto;

}



/* اسکرول زیباتر */

.tooltip-card::-webkit-scrollbar {

    width: 4px;

}


.tooltip-card::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, .25);

    border-radius: 10px;

}



@keyframes tooltipFade {

    from {

        opacity: 0;

        transform: translateY(5px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

#hover-info div div {
    text-align: left;
}

#hover-info div span {
    font-size: 26px;
}


.fill-red {
    fill: #ff0000 !important;
}

.fill-green {
    fill: green !important;
}

.fill-orange {
    fill: #ff9900 !important;
}

.fill-gray {
    fill: #9e9e9e !important;
}



#hover-info {
    max-width: 350px;
    overflow: hidden;
    pointer-events: none;
}

@media only screen and (max-height: 300px) {
    .min-height-300 {
        display: none;
    }
}

@media only screen and (max-height: 350px) {
    .min-height-350 {
        display: none;
    }
}

@media only screen and (max-width: 1500px) {
    .min-width-1500 {
        display: none;
    }
}

@media only screen and (max-width: 1400px) {
    .min-width-1400 {
        display: none;
    }
}

.shipicon {
    background: url("data:image/png;base64,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");
    width: 20px;
    height: 20px;
    opacity: 1;
    display: inline-block;
}

.staticon {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAACXUlEQVRYhe3Ru47aQABG4UMWKSGJUJRqW9JlN+yKJim59duQBwD2kShyqXBtkheghJ4KF0gICewCISxRMgg7BYYYe2ZtME0uI42EMDr6Pwz/j/S8A1L/Su9+MGCmaXy5UPQeBjPQLtYbwEzjMvvuDAPTdXGFYKNpfE0YvQPDBNcFsQEtcc8A0wVXwEYj2b68YWC5Lu7+JkTnwbB22P1NhM4bYPliidAfglgJ+tkpvTA2hD6pF8RK0LF7SmwA/S1m9AnsETp2T4UNoGP1bqOwfnS7HRm9jcb60e3IXhTWj25HoG9k2NGIZb9PazhkokB/V0Rv5NjREvotGE4UaGVPhh3Bsg+tIUwUaGnvvQy73SIKBR6833xarRAStPDQV/6eHLsVUDj0YCUkaOGhj3oy7BZEAd8+EBK08NBX7OW1GtfZLC8k/6qby/Ha+/wmlcIN/iCdhkyGt8Dz/XcpateQlfYgd+hBKtSDNJA56n2G6yyKffj2IdkHZDjeB0C9TtU0sYNv0LKwez264zGL4DPHQeg6P4GX4S31Kph2+A1aNvS6MF6EnzkCdGmvDlUT7OAbtMDuQXcMi+AzB4SOah/QaFCRoWXXw/5QxnbFihwtu44A/cleAyoytOx62Ih9MdHxsKego7GnoGNj96fZpKxCe9hO7NiuWFajHQH6Sb0mlFVoD3vivh26FEQ7DutO54zYrlgKo501dM7qNaEURDuw7pyDPUR9aA+rA6/Oiu2Kpd9oZw2dRD0/2sMm3Ac8PlKcTpknxx6KRZjOk2IPNShOYX4RrO98vGTsD+j9PecXIj9PVcetObkAAAAASUVORK5CYII=");
    width: 20px;
    height: 20px;
    opacity: 1;
    display: inline-block;
}

.helicoptericon {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAADxUlEQVRIx61VXWgcVRg9d+7Mnd3Zmd1N405oE5KakLbYgDTFH5BUEFo1WJuUNkiLEkVFxSb4UEVsUCutbWPAH1y10qAP2tJa6kMJltKU+CDqKmxQMNZV2ZikSkKSNTP7Mz97fcnCMuxuNq3n8Z7vO+fe7565A6wOr3wSDM5up/RL3AS2UuAogJoSXPiYovwV13V+OhRaAnBvGY37KPAmAFJYEDwFzW+r6r49ongRQJ2H69zq96sAsFGW6TrgwRIGe48oyqdPMdZVyeTcAcOIdvh8Db2S9BWAhgJRA2yIUBpcbvL3+nxtnt7HBwOBwWnHSX1oWT0A8uVMAOBEv2Gc2MyY9jRjlwC0AMB+xjYW10cobS/a7fNDgcDAhGWlopbVBeCnYkGhzFzfP2iabzSJotQny5cAtNWLYlNxwS2iuGb57l5+V1UP/pjLzZ6y7YcAJLxitEIIxkdte+ZhWd7VLgjddaJY3yhJSoHMcb54JZttf0vT9n6dzSbPOE4XgJlSQnSFtP0yats/389Y13ZVrSNFJw8IArmbMe28aV674Lq7AMyVExFWMFkPoHHOdVPEsyGREH8mn1cuuu73ABqL0+QFKeO8+5Dff6iVsfVNkiQHBUEpJ5DjPDdt2/nfLOvvkWz2s7F8fsBbI5ZqfEKStu3WtC3VfL0yIXIzY2hm7FZFELrHDKM6k89t+1pbOp3QKQ01SVIgUOEkNufmjOPwSdv+N5bLjVc9riJsALDvPVXt71CUcIlRzW2bnU3mgD4AMQD2jVy8uV8UOzmQOT4/H8sD2QJxfmkpNriw8PuQqq7VgZ0AnBt5LFselaTYUCCQBHAAwCNXa2sX47rO47rOd1IaBaB1Uno5qml/rAPeKTf+critj7GJo4ryK4Dewui+CIdTcV3nP0QiBoD+5XXfPYJw4aSmJbcQMlytUfsLspw4oihTAHqK1tWPNG0xrut8tLZ2EcCe4pDdQcjpU8HgP3cKwjkAcsX/yYs+X+J1v38SQKeXPKYo38V1nZ8Nh1MAWr1JvZ2Q4Y81bXIHpSOVnvqWaceZfzWTeQzAiNfkuutOAsC860oAkh7aGef8ycOGcSZMSH0VoSqNTYS8Ftf1/HFF+WY1fatym+B8Lsu5Ne26U6vpqyYJzwIgD1DasFkUO1zOxRpB2PQcYx9ELetPAD4AhysJkBUdGBvuDYW6ZUJC3nqHc/OKaV5/KZ1uvamTcCD/bSZjraHU0CmlEVGUFlzXnHddOmXbbppzEf8DegCMAVgLYMddgpAA8AyAZgADAE6uJPAfk1U+b+R6xyUAAAAASUVORK5CYII=");
    width: 25px;
    height: 25px;
    opacity: 1;
    display: inline-block;
}

.sprites {
    background: url('data:image/png;base64,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');
    width: 25px;
    height: 25px;
    opacity: 1;
    display: inline-block;
}

.table-shiptype-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: scale(0.8);
}


#statcard {
    top: 10px;
    left: auto;
    right: 60px;
    display: none;
    z-index: var(--z-map-statcard);
    position: absolute;
    max-width: calc(100vw - 80px);
    background: var(--menu-background-color);
    color: var(--menu-font-color);
    cursor: auto;
    border-radius: 6px;
    border: 1px solid var(--menu-border-color);
    padding: 4px 6px;
}

.statcard_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
    gap: 0;
    column-gap: 2px;
    row-gap: 0;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 4px;
}

.stat-item[data-zero="true"] {
    display: none;
}

.stat-item+.stat-item {
    border-left: 1px solid var(--menu-border-color);
    padding-left: 6px;
}

.stat-item .shipicon,
.stat-item .staticon,
.stat-item .helicoptericon {
    flex-shrink: 0;
    margin: -4px;
}

.tablecard_inner table {
    width: 100%;
    font-size: 11px;
    margin: 6px 0;
    color: var(--menu-font-color);
    border: 1px solid var(--settings-header-bg-color);
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}


/* Header */
.tablecard_inner table thead {
    background-color: var(--tableheader-header-background-color);
    color: var(--tableheader-header-color);
}

.tablecard_inner table thead>tr>th {
    text-align: center;
    vertical-align: middle;
    padding: 12px 5px;
    font-weight: 600;
    white-space: nowrap;
    direction: rtl;
    border-bottom: 1px solid var(--settings-header-bg-color);
}


/* تمام سلول ها */
.tablecard_inner table th,
.tablecard_inner table td {
    text-align: center;
    vertical-align: middle;
}


/* Body */
.tablecard_inner table>tbody>tr>td {
    padding: 7px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* آخرین ردیف خط نداشته باشد */
.tablecard_inner table>tbody>tr:last-child td {
    border-bottom: none;
}


/* ردیف های زوج */
.tablecard_inner table>tbody>tr:nth-child(even) {
    background: var(--table-alternate-background-color);
}


/* Hover */
.tablecard_inner table>tbody>tr:hover {
    background: var(--table-selection-background-color);
    transition: background 0.2s ease;
}


/* Flag */
.tablecard_inner table th:nth-child(1),
.tablecard_inner table td:nth-child(1) {
    width: 32px;
    text-align: center;
}


/* Name */
.tablecard_inner table th:nth-child(2),
.tablecard_inner table td:nth-child(2) {

    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}


/* Distance */
.tablecard_inner table th:nth-child(3),
.tablecard_inner table td:nth-child(3) {
    width: 55px;
}


/* Speed */
.tablecard_inner table th:nth-child(4),
.tablecard_inner table td:nth-child(4) {
    width: 55px;
}


/* Type */
.tablecard_inner table th:nth-child(5),
.tablecard_inner table td:nth-child(5) {
    width: 45px;
}


/* Last */
.tablecard_inner table th:nth-child(6),
.tablecard_inner table td:nth-child(6) {
    width: 75px;
}


/* اسکرول نرم تر */
.addscrollbar {
    overflow: auto;
    scrollbar-width: thin;
}

.sort-icon::after {
    content: "\25B2";
    font-size: 8px;
    margin-left: 2px;
    vertical-align: middle;
    color: transparent;
}

.sort-icon.ascending::after {
    content: "\25B2";
    color: var(--tableheader-header-color);
}

.sort-icon.descending::after {
    content: "\25BC";
    color: var(--tableheader-header-color);
}

/* Shipcard styling */

.pinned {
    border-color: #12a5ed;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-25 {
    opacity: 0.5;
}

.mapcard {
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    z-index: var(--z-map-shipcard);
    position: absolute;
    visibility: hidden;
    background: var(--menu-background-color);
    color: var(--menu-font-color);
    cursor: auto;
    border-radius: 5px;
}


/* اندازه کارت
   ─────────────────────────────────────────────────────────────────────────
   The card is position:absolute over the map, so it is NOT constrained by
   any parent: its own box must do the constraining. Three rules do that:

   1. `width` is clamped to the viewport, so a narrow window can never push
      the card off-screen horizontally.
   2. `max-height` bounds it against the viewport, leaving room for the
      offset from the top edge plus a small breathing gap.
   3. `min-width: 0` + `min-height: 0` let the flex children below actually
      shrink; without them a flex item's automatic minimum size is its
      content size and no amount of overflow rules on descendants helps.

   `.mapcard` itself is `display:flex; flex-direction:column`, so header and
   footer stay fixed while only the content area scrolls (see
   `#shipcard_content`). */
.shipcard-width {
    width: 400px;
    max-width: calc(100vw - 20px);
}

.mapcard {
    /* 10px top offset + 10px gap at the bottom, budgeted against the
       positioning container's OWN height (`#map`, via `.mapcard`'s
       `position: absolute` + `top: 10px`), not the raw viewport.

       `#map` sits below the ~53px header/toolbar row (see `.header`,
       `#menubar`), so `100vh` overshoots the card's real budget by however
       tall that chrome is. `.mapcard` is absolutely positioned and `#map`
       is `position: relative` with a definite height (`height: 100%` of a
       flex item), so `100%` here correctly resolves against `#map`'s
       rendered height instead — the card is then guaranteed to fit below
       the toolbar with no vh/dvh unit needed, and it self-adjusts if the
       toolbar's height ever changes. This was the root cause of the
       header/footer/action-buttons being pushed off the bottom edge on
       desktop and tablet at 100% zoom. */
    max-height: calc(100% - 20px);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.mapcard.floating {
    border-radius: 9px;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.measurecard-width {
    width: 450px;
}

#measurecard {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    top: 16px;
    left: 16px;
}

#measurecard .mapcard_header {
    flex-basis: 24px;
    font-size: 13px;
    margin-top: 5px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--table-border-color);
}

.mapcard.visible {
    visibility: visible;
}


/* ==============================
        Body Content
================================ */


.mapcard_content,
#shipcard_content {

    background:

        linear-gradient(135deg,
            rgba(15, 20, 30, .85),
            rgba(5, 8, 15, .85));


    backdrop-filter: blur(18px);

    border-radius: 14px;


    margin: 8px;


    border:

        1px solid rgba(255, 255, 255, .1);


    color: white;


    direction: rtl;


    text-align: center;


    /* ── Containment ──────────────────────────────────────────────────────
       This is THE scroll region of the card, and the only one. The header
       and footer are `flex: 0 0 auto` siblings, so bounding this element
       bounds the whole card.

       `min-height: 0` is the load-bearing declaration: as a flex item its
       automatic minimum size would otherwise be its content height, which
       makes `overflow-y: auto` a no-op and lets tall content (long
       description + image + 10 metadata rows) push the footer off-screen.

       `overflow-x: hidden` is not a symptom patch here — every descendant
       is independently constrained to wrap (see the row and text rules
       below), so nothing should ever reach it. It is a backstop against
       unforeseeable API strings, not the mechanism. */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;

    /* Thin, theme-appropriate scrollbar rather than the default chunky one. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.mapcard_content::-webkit-scrollbar,
#shipcard_content::-webkit-scrollbar {
    width: 8px;
}

.mapcard_content::-webkit-scrollbar-track,
#shipcard_content::-webkit-scrollbar-track {
    background: transparent;
}

.mapcard_content::-webkit-scrollbar-thumb,
#shipcard_content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .22);
    border-radius: 4px;
}

.mapcard_content::-webkit-scrollbar-thumb:hover,
#shipcard_content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .35);
}

/* ==============================
        Header
================================ */


.mapcard_header {

    /* `0 0 auto` rather than a hard 35px basis: the title may wrap to two
       lines (long vessel names) and the header must grow to contain it
       instead of letting the text spill past its own border.

       No `min-height` here on purpose — #measurecard overrides flex-basis to
       24px and relies on `min-height: auto` to grow to its own ~42px
       content. A blanket minimum would clip it. The shipcard's minimum is
       set on #shipcard_header below. */
    flex: 0 0 auto;

    /* Header must never shrink away, but must also never be pushed out of
       the card by its own content. */
    min-width: 0;
    box-sizing: border-box;

    padding: 8px 12px;
    margin: 8px;

    border-radius: 14px;


    color: #fff;

    background:
        linear-gradient(135deg,
            rgba(25, 35, 50, 0.9),
            rgba(5, 10, 20, 0.85));


    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);


    border: 1px solid rgba(255, 255, 255, 0.12);


    display: flex;

    flex-direction: row-reverse;

    align-items: center;

    justify-content: space-between;


    direction: rtl;


    text-align: center;


    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45);

}

/* Preserves the shipcard header's original 35px visual height for the common
   single-line title, while still allowing growth to two lines. Scoped to the
   shipcard so #measurecard keeps its own (taller) intrinsic header. */
#shipcard_header {
    min-height: 35px;
}

/* عنوان کشتی */

#shipcard_header_title {

    /* ROOT CAUSE of the header controls being pushed outside the card.
       `flex: 1` expands to `1 1 0%`, but a flex item's automatic minimum
       size is `min-content` — for an unbreakable string (a long vessel name
       with no spaces, or a very long name generally) that minimum exceeds
       the header width, so the item refused to shrink and shoved the drag
       handle, min/max, menu and close buttons out of the card entirely,
       making the close button unclickable.

       `min-width: 0` removes that automatic floor so the title yields to
       its siblings; the wrapping rules below then keep the text inside. */
    flex: 1 1 0;
    min-width: 0;

    text-align: center;

    color: white;

    font-weight: 600;

    /* Long names stay readable: wrap to at most two lines, then ellipsis.
       `overflow-wrap: anywhere` breaks unbreakable strings; `line-clamp`
       bounds the header height so a pathological name cannot make the
       header taller than the map. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}


/* پرچم / لوگو */

#shipcard_header_flag {

    flex: 0 0 auto;

    margin-left: 8px;

    margin-right: 0;


    order: 3;


}


/* دکمه بستن */

.mapcard_header button,
.mapcard_header .close {

    order: 1;

    margin-right: 0;

    margin-left: 8px;


    color: white !important;

}




/* ==============================
       Validation Border
================================ */


.shipcard-validated {

    border-right: 10px solid #7cfc00;

    border-left: none;

}



.shipcard-not-validated {

    border-right: 10px solid #aaa;

    border-left: none;

}

.shipcard-dubious {

    border-right: 10px solid red;

    border-left: none;

}





.message-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #dc0000;
    color: white;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 100;
    pointer-events: none;
}

#shipcard_footer>div {
    position: relative;
}


.mapcard-footer {


    background:

        linear-gradient(135deg,
            rgba(10, 15, 25, .95),
            rgba(0, 0, 0, .85));


    color: white;


    flex: 0 0 50px;


    border-radius: 14px;


    display: flex;


    flex-direction: row;


    justify-content: center;


    align-items: center;


    margin: 8px;


    border:

        1px solid rgba(255, 255, 255, .12);



    backdrop-filter: blur(15px);


}



.mapcard-footer>div {
    flex: 0 1 100px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    transition: var(--hover-transition);
}

@media (hover: hover) {
    .mapcard-footer>div:hover {
        cursor: pointer;
        background: var(--hover-background);
        transform: var(--hover-transform);
    }
}

.mapcard-footer>div>i {
    flex: 1;
    font-size: 2px;
    margin: auto;
    padding: 10px;
}

.mapcard-footer>div>span {
    flex: 1;
    font-size: 9px;
    line-height: 3px;
    text-align: center;
}

.mapcard-footer>div.disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* This footer entry now doubles as "نمایش مسیرحرکت | تحلیل شناور" — much
   longer than the other footer labels (پیام‌ها, پیگیری NMEA), which use a
   compressed line-height that only works for a single short word. Widen the
   column and give it real line-height so the wrapped label stays legible. */
#shipcard_track_option {
    flex: 0 1 130px;
}

#shipcard_track_option>span {
    line-height: 1.3;
    padding: 0 2px;
}

/* Second half of the header overflow: `flex-shrink: 0` meant this span
   could grow but never give the space back. `1 1 0` + `min-width: 0` lets
   it yield once the header runs out of room. */
.mapcard header>span:first-child {
    flex: 1 1 0;
    min-width: 0;
}

/* The icon spans are fixed-size controls: they must never be compressed to
   nothing (or ejected) to make room for a long title. Keeping them
   `flex-shrink: 0` guarantees the close button stays clickable no matter
   what the vessel name is. */
.mapcard_header>span:not(#shipcard_header_title) {
    flex: 0 0 auto;
    min-width: 0;
}

.mapcard-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0px;
    border-radius: 10px;
    font-size: 24px;
    transition: var(--hover-transition);
    cursor: pointer;
}

@media (hover: hover) {
    .mapcard-header-icon:hover {
        cursor: pointer;
        transform: var(--hover-transform);
    }
}

/* .mapcard_content {
    display: flex;
    flex-direction: column;
} */

/* تمام متن های داخل کارت
   ─────────────────────────────────────────────────────────────────────────
   This blanket rule (specificity 1-0-1 via #shipcard) used to force EVERY
   descendant to pure white, which silently defeated the deliberately dimmer
   metadata labels and made label and value visually identical — the card
   had no typographic hierarchy as a result.

   `:where()` has zero specificity, so this now behaves as a DEFAULT that any
   normal class rule can override, while still colouring everything that has
   no explicit colour of its own. The visual result for untargeted elements
   is unchanged.

   No plain-selector fallback is paired with this rule on purpose: any such
   rule needs specificity >= 1-0-1 to be useful in a non-supporting engine,
   which would then also outrank the label colours in supporting engines and
   flatten the hierarchy again (verified — it did). `:where()` has been
   supported in all major engines since 2021, and the card's ambient text
   colour is white anyway, so an engine that drops this rule still renders
   readable light text rather than unstyled text. */
:where(#shipcard, .mapcard_content) * {

    color: white;

    text-align: center;

}


.mapcard-table {
    width: 100%;
    border-collapse: collapse;
}

.mapcard-table th,
.mapcard-table td {
    line-height: 14px;
    font-size: 10px;
    text-align: left;
    padding: 2px 5px;
}

.mapcard-table th {
    color: rgb(111, 128, 124);
}

.mapcard-content-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: flex-start;
    padding: 10px;
    gap: 8px;
    transition: var(--hover-transition);
    /* Row is a flex item of the scrolling column: allow it to shrink and
       keep its own children inside its box. */
    min-width: 0;
    box-sizing: border-box;
}

/* Rows are clickable (shipcardSelectSelf). Only give them a hover affordance
   on devices that actually hover — on touch the :hover state sticks after a
   tap and makes the card look permanently highlighted. */
@media (hover: hover) {
    .mapcard-content-row:hover {
        cursor: pointer;
        background: rgba(255, 255, 255, .05);
    }
}

/* Touch/active feedback for both pointer types. */
.mapcard-content-row:active {
    background: rgba(255, 255, 255, .09);
}

/* Keyboard accessibility: these rows carry a click handler, so the focus
   ring must be visible when tabbed to. */
.mapcard-content-row:focus-visible {
    outline: 2px solid var(--hz-turquoise, #00d9c0);
    outline-offset: -2px;
}

.mapcard-content-row>div {
    /* ROOT CAUSE of metadata cells overflowing sideways: `flex: 1` alone
       leaves the automatic min-content floor in place, so a long value
       (destination names, station lists, "AIS، ترمینال") widened the cell
       past its share and pushed its siblings out of the row. `overflow:
       hidden` was already here and did NOT help — it clips painting, it
       does not stop a flex item from sizing to min-content. `min-width: 0`
       is what actually lets the cell shrink to its flex share. */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    justify-content: stretch;
    flex-direction: column;
}

.mapcard-content-row>div>span:first-child {
    /* Lifted from rgb(111,128,124): that sat at ~3.6:1 on this background,
       below the WCAG AA 4.5:1 threshold for the 10px label text. This is a
       cool slate that keeps the label clearly subordinate to the value
       while remaining legible. */
    color: rgb(148, 165, 178);
    text-transform: uppercase;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: .02em;
    /* Labels are short and known; keep them on one line and ellipsis rather
       than letting them wrap and misalign the value baselines across cells. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapcard-content-row>div>span:last-child {
    line-height: 20px;
    font-size: 14px;
    text-transform: initial;
    /* Values are arbitrary API strings (destination, receiver name, sources).
       They must wrap inside their cell — including strings with no spaces,
       which is what `anywhere` handles and plain `break-word` does not. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mapcard-content-row>div>span:last-child:empty:after {
    content: "-";
}


/* آیکون ها */


.shipcard-tech-icon {

    font-size: 14px !important;

    cursor: help;

    opacity: .8;

    display: inline-block !important;

    vertical-align: text-top;

    margin-left: 4px;

    line-height: 1;

}


.shipcard-min-only {
    display: none;
}

.shipcard-min-only.visible {
    display: inherit;
}

.shipcard-max-only.hide {
    display: none;
}


/* ردیف اطلاعات */

.shipcard-row-selected {


    background:

        rgba(255, 255, 255, .08);


    display: flex;

    flex-direction: row;


    justify-content: center;

    align-items: center;


    direction: rtl;


    /* Primary telemetry (speed / course / altitude) is the row an operator
       reads first. It was visually identical to the ten secondary rows; a
       leading accent bar plus a slightly heavier value gives it rank in the
       hierarchy without adding a new component or extra chrome.

       `border-inline-start` (not border-left) so the accent stays on the
       correct edge under RTL. */
    border-inline-start: 3px solid var(--hz-turquoise, #00d9c0);
    align-items: stretch;
}

.shipcard-row-selected>div>span:last-child {
    font-weight: 600;
    font-size: 15px;
}

/* جداکننده ها */

.shipcard-row-selected,
.shipcard-row {

    border-bottom:

        1px solid rgba(255, 255, 255, .12);

}



/* Technical details popover */
.tech-popover {
    position: absolute;
    background: var(--menu-background-color);
    color: var(--menu-font-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    min-width: 200px;
    max-width: 300px;
    font-size: 12px;
    padding: 8px 12px;
}

.tech-popover>div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-popover>div:last-child {
    border-bottom: none;
}

.tech-popover>div>span:first-child {
    font-weight: 500;
    opacity: 0.8;
}

.tech-popover>div>span:last-child {
    font-weight: bold;
    margin-left: 12px;
}

/* ==============================
       Mobile
================================ */


/* ── Short viewports (laptops, landscape phones) ──────────────────────────
   Previously `@media (max-height: 800px)` set `.shipcard-ismax{height:100%}`
   and pinned the card to 0,0 — which also fired on a 1366x768 DESKTOP,
   docking the card to the corner and, because `height:100%` was applied to
   a card whose content could not scroll, pushing the bottom rows straight
   out of the card. That was a direct cause of the reported desktop overflow.

   Height alone is no longer used to decide "this is a phone". A short
   desktop window keeps the floating card; it simply gets a bounded height
   and scrolls internally, which the base rules now provide. */
/* The short-viewport tuning for this breakpoint lives further down, right
   after .ship-photo-media / .ship-description-text are defined — see
   "Responsive overrides for the media/description blocks". Those base rules
   appear LATER in this file, so an override written here would lose the
   cascade at equal specificity.

   No rule is needed for the card shell itself: the base `max-height` plus
   internal scrolling already handle short windows correctly. */

/* ── Mobile ───────────────────────────────────────────────────────────────
   Not a scaled-down desktop: the card becomes a full-bleed bottom sheet
   anchored to the viewport, which is the standard pattern for map-overlay
   detail panels and keeps the vessel identity + primary telemetry visible
   while the map stays partly in view above it. */
@media only screen and (max-width: 500px) {

    .shipcard-width {
        width: 100%;
        max-width: 100%;
    }

    /* Scoped to #shipcard, NOT .mapcard: #measurecard shares .mapcard and
       must keep its own top-left floating placement and sizing. */
    #shipcard {
        /* Anchor to the bottom edge and span the full width. `!important` is
           required only here because positionAside() writes inline
           left/top for the desktop floating placement; on mobile that
           placement is meaningless and must be overridden. */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0;
        /* Bottom sheet: at most ~78% of the (dynamic) viewport so the map
           remains visible and the sheet never covers the whole screen. */
        max-height: 78vh;
        max-height: 78dvh;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .55);
        /* Respect the home-indicator / notch area. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Tighter chrome so content, not padding, gets the space. */
    #shipcard_header,
    #shipcard_content,
    #shipcard .mapcard-footer {
        margin: 6px;
    }

    #shipcard_header {
        font-size: 14px;
        border-radius: 12px;
        /* Trim the horizontal padding so the five control icons plus the
           vessel name fit on a 360px sheet without the name being clipped. */
        padding: 6px 4px;
        gap: 2px;
    }

    /* Comfortable touch targets (was a 24px glyph with zero padding, well
       under the ~44px guideline) while staying narrow enough that an
       ordinary vessel name is not ellipsised. Width is the scarce axis on a
       phone, so the target grows mainly in height.

       Scoped to #shipcard: #measurecard's header also uses
       .mapcard-header-icon, but on a chip button that carries a text label,
       where a min-width would distort it. */
    #shipcard .mapcard-header-icon {
        font-size: 21px;
        padding: 8px 2px;
        min-width: 34px;
        min-height: 44px;
    }

    /* The flag is decorative and least important; let it go first. */
    #shipcard_header_flag {
        margin-left: 2px;
    }

    /* Two lines on mobile too: an ordinary name should never be ellipsised
       just because the sheet is narrow, and the header grows to fit. */
    #shipcard_header_title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 14px;
    }

    /* Two columns instead of three: three 14px values in ~110px each is
       unreadable on a 360px screen. Wrapping keeps every field visible
       (nothing is hidden) while giving each value real width.

       Scoped to #shipcard so the measure card's own content layout is
       untouched. Applies to both ship and plane rows, which share this
       class inside the card. */
    #shipcard .mapcard-content-row {
        flex-wrap: wrap;
        padding: 8px 10px;
        row-gap: 10px;
    }

    #shipcard .mapcard-content-row>div {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    /* (.ship-photo-media and .ship-description-text mobile overrides are
       further down, after their base rules — see the cascade note above.) */
}

/* Very narrow phones: single metadata column so Persian labels and long
   numeric values (MMSI/IMO) are never cramped. */
@media only screen and (max-width: 360px) {
    #shipcard .mapcard-content-row>div {
        flex: 1 1 100%;
    }
}

@keyframes pulsate {
    0% {
        transform: opacity 0.25;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: opacity 0.25;
    }
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.settings-bg {
    background-color: var(--settings-bg-color);
}

.blue {
    color: #12a5ed;
}

.green {
    color: green;
}

.red {
    color: red;
}

.grey {
    color: dimgray;
}

.lightgrey {
    color: lightgrey;
}

.floating-menu {
    position: fixed;
    display: none;
    background-color: var(--menu-background-color);
    border: 1px solid var(--menu-border-color);
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    list-style-type: none;
    padding: 8px 0;
    z-index: 10005;
    font-size: 14px;
    color: var(--menu-font-color);
    width: auto;
    margin: 0;
}

.floating-menu li {
    display: flex;
    align-items: center;
    height: 24px;
    margin: auto;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
}

.floating-menu .divider {
    height: 1px;
    background-color: var(--menu-divider-color);
    margin: 0.5rem 0;
    pointer-events: none;
}

.floating-menu li:hover {
    background-color: var(--menu-background-hover-color);
}

.floating-menu li.disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

.floating-menu i {
    margin-right: 8px;
    font-size: 16px;
    width: 16px;
}

/* Map & overlays selection dialog */
#map-menu {
    width: 300px;
    padding: 16px 18px;
}

#map-menu table {
    width: 100%;
    border-collapse: collapse;
}

#map-menu td {
    padding: 6px 0;
    vertical-align: top;
}

#map-menu td:first-child {
    white-space: nowrap;
    padding-right: 16px;
    padding-top: 9px;
    font-weight: 500;
    opacity: 0.7;
}

#baseMapSelector {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--menu-border-color);
    border-radius: 6px;
    background-color: var(--menu-background-color);
    color: var(--menu-font-color);
    font-size: 14px;
    cursor: pointer;
}

#overlayContainer input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 9px 0 0;
    vertical-align: -3px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

#overlayContainer label {
    cursor: pointer;
    line-height: 1.9;
}

#overlayContainer label:hover {
    color: var(--primary-color);
}

.marker {
    display: inline;
    margin-left: 16px;
    color: var(--menu-marker-color);
}

.hidden {
    display: none;
}

/* Meteo Tooltip Styling */
.meteo-tooltip {
    margin-top: 0;
    padding: 4px 8px 6px;
    max-width: 280px;
    color: inherit;
    border-top: 1px solid currentColor;
    border-top-color: rgba(128, 128, 128, 0.3);
}

#hover-info .meteo-tooltip {
    color: rgba(255, 255, 255, 0.95);
}

/* Vessel image feature ("مشاهده تصویر شناور") - new classes only, no existing rules touched */
/* Fixed height (not min-height) so the shipcard's overall size/position never
   changes when the placeholder is swapped for the loaded image. The image
   itself is absolutely positioned inside .ship-photo-media so its intrinsic
   size can never influence the size of any ancestor (spec-guaranteed, unlike
   relying on min-width:0 on flex items). */
.ship-photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    min-width: 0;
    /* Must not shrink when the card is height-constrained, and must not be
       stretched by the flex column either. */
    flex: 0 0 auto;
    /* `contain: size` was dropped along with the fixed height: with an
       aspect-ratio media box the element's size now depends on its own
       content box width, which `size` containment would zero out.
       `layout paint` still isolates it from the rest of the card. */
    contain: layout paint;
}

/* Section headings for the two content blocks. Uppercase micro-label in the
   same idiom as the metadata labels, so the card reads as one system rather
   than a stack of unrelated panels. */
.ship-photo-card-title,
.ship-description-card-title {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(148, 165, 178);
    opacity: 1;
    margin-bottom: 6px;
    width: 100%;
    text-align: center;
    flex: 0 0 auto;
    /* Titles are fixed Persian strings, but keep them contained regardless. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Intentional, consistent aspect ratio instead of a hard 160px box: vessel
   photography is overwhelmingly landscape, and 16/9 keeps the frame
   proportional at every card width (400px desktop → full-bleed mobile)
   rather than becoming a letterbox slot on wide cards and a squat strip on
   narrow ones. The ratio reserves layout space before the image loads, so
   the card does not jump when the photo arrives. */
.ship-photo-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Fallback for engines without aspect-ratio; harmless where supported
       because the ratio wins on the taller of the two. */
    max-height: 220px;
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
}

.ship-photo-thumb {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

/* Base (in-flow) form. The class is used in two places: overlaying the
   shipcard thumbnail, and as the "no image" body of the vessel-image dialog.
   Only the first wants absolute positioning — see the scoped rule below.

   It must NOT be absolute here: in the dialog there is no positioned
   ancestor, so `inset: 0` resolved against the dialog itself and stretched
   the placeholder over the close button, swallowing the click. */
.ship-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0.6;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    /* The placeholder carries API-driven text ("تصویری موجود نیست" /
       "در حال بارگذاری تصویر...") and shares the media frame, so it must
       wrap rather than widen it. */
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Thumbnail overlay: fills .ship-photo-media, which is position: relative. */
.ship-photo-media>.ship-photo-placeholder {
    position: absolute;
    inset: 0;
}

.ship-photo-modal-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    border-radius: 6px;
}

/* Professional "no photo" empty state + upload affordance. Fills
   .ship-photo-media exactly like .ship-photo-placeholder does, so the media
   box's fixed aspect-ratio/height (see .ship-photo-media above) never
   changes whether the card is showing a real photo, the loading text, or
   this state - no layout shift in any case. A soft maritime gradient +
   dashed border reads as an intentional dashboard placeholder rather than a
   broken/missing image. */
.ship-photo-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(160deg, rgba(98, 170, 200, .12), rgba(20, 40, 55, .18));
    border: 1px dashed var(--menu-divider-color, rgba(128, 128, 128, 0.35));
    border-radius: 6px;
}

.ship-photo-empty-icon {
    width: 30px;
    height: 30px;
    opacity: 0.55;
}

.ship-photo-empty-text {
    font-size: 11px;
    opacity: 0.65;
}

.ship-photo-add-btn,
.ship-photo-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    background: rgba(255, 255, 255, .08);
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.ship-photo-add-btn i,
.ship-photo-change-btn i {
    width: 13px;
    height: 13px;
}

.ship-photo-add-btn:hover,
.ship-photo-change-btn:hover {
    background: rgba(255, 255, 255, .16);
}

/* Small floating action over an existing photo, bottom-start corner (RTL:
   visually left) so it never sits over the "Uploaded by" label, which
   anchors bottom-end. Shown only once a photo has actually loaded - see
   setShipPhotoChangeButtonVisible() in script.js. */
.ship-photo-change-btn {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 6px;
    z-index: 1;
    padding: 4px 9px;
    font-size: 10px;
    background: rgba(10, 20, 28, .55);
    backdrop-filter: blur(2px);
}

/* "Uploaded by: USERNAME" overlay - subtle, bottom-end corner, never
   obstructing the vessel itself (a thin strip, not a band across the
   photo). Rendered only when the current photo is a confirmed user upload
   with a known uploader (see setShipPhotoUploaderLabel) - never shown empty. */
.ship-photo-uploader {
    position: absolute;
    bottom: 6px;
    inset-inline-end: 6px;
    z-index: 1;
    max-width: calc(100% - 12px);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    background: rgba(10, 20, 28, .55);
    backdrop-filter: blur(2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Upload dialog: file preview thumbnail, mirrors .ship-photo-modal-img's
   sizing so the dialog reads as one family regardless of which action
   opened it. */
.ship-photo-upload-preview {
    margin: 4px 0 2px;
    text-align: center;
}

.ship-photo-upload-preview img {
    display: inline-block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 6px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
}

@media only screen and (max-width: 500px) {
    .ship-photo-empty-icon {
        width: 26px;
        height: 26px;
    }

    .ship-photo-empty-text {
        font-size: 10px;
    }

    .ship-photo-add-btn,
    .ship-photo-change-btn,
    .ship-photo-uploader {
        font-size: 10px;
    }
}

/* Vessel description feature - new classes only, no existing rules touched.
   Mirrors .ship-photo-card's spacing/border so it reads as the same family
   of content block, but is variable-height text rather than a fixed-size
   media frame. */
/* Vessel dimensions - technical top-view diagram.
   Mirrors .ship-photo-card / .ship-description-card so it reads as the same
   family of content block. The diagram itself is a viewBox'd SVG whose
   internal geometry is metre space, so everything here is about the frame,
   not the drawing. */
.ship-dimensions-card {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    min-width: 0;
    flex: 0 0 auto;
    overflow: hidden;
    /* Technical-drawing palette, kept local so the diagram cannot leak
       colours into the rest of the card. */
    --vd-hull: #38bdf8;
    --vd-line: #7dd3fc;
    --vd-label: #cbd5e1;
    --vd-ref: #f8fafc;
}

.ship-dimensions-card-title {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(148, 165, 178);
    margin-bottom: 6px;
    width: 100%;
    text-align: center;
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Diagram and read-out sit side by side so the section stays short: the ship
   card is height-constrained, and stacking them cost ~90px of vertical space
   for no benefit now that the hull is drawn horizontally. */
.ship-dimensions-body {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.vessel-dim-figure {
    flex: 1 1 auto;
    min-width: 0;
}

/* The SVG keeps its own aspect ratio via preserveAspectRatio; the height cap
   stops a 300 m tanker (very tall viewBox) from pushing the rest of the ship
   card off-screen, while the width cap keeps a short, wide vessel from
   ballooning. */
/* Wider and shorter than the old vertical drawing - the hull now runs along
   the card's long axis, which is what allows it to be drawn large enough to
   read comfortably. max-height must track VIEW_H in vesseldimensions.js. */
.vessel-dim-svg {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 150px;
    margin: 0 auto;
    overflow: visible;
}

/* A single narrow column beside the diagram: six short key/value pairs read
   as a spec table, and it fills the vertical space the hull no longer uses. */
.vessel-dim-legend {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.25));
    direction: rtl;
}

/* Narrow cards: the diagram needs the full width, so the read-out drops below
   it and spreads back out into columns rather than squeezing the hull. */
@media (max-width: 380px) {
    .ship-dimensions-body {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .vessel-dim-legend {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 8px;
        padding-inline-start: 0;
        border-inline-start: 0;
        padding-top: 8px;
        border-top: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.25));
    }
}

/* Key and value on one line in the sidebar form; the narrow-card grid below
   overrides this back to stacked. */
.vessel-dim-legend-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .vessel-dim-legend-item {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1px;
    }
}

.vessel-dim-legend-key {
    font-size: 9px;
    letter-spacing: .02em;
    color: rgb(148, 165, 178);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The card is RTL; the value is a number followed by a Latin unit, so it must
   be laid out LTR or bidi renders it as "m 229". */
.vessel-dim-legend-val {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--vd-label, #cbd5e1);
    white-space: nowrap;
    direction: ltr;
    text-align: right;
}

.vessel-dim-legend-val.is-missing {
    opacity: 0.45;
}

.vessel-dim-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    font-size: 11px;
    color: rgb(148, 165, 178);
    text-align: center;
    border: 1px dashed var(--menu-divider-color, rgba(128, 128, 128, 0.35));
    border-radius: 4px;
}

.vessel-dim-empty-icon {
    opacity: 0.6;
    flex: 0 0 auto;
}

.vessel-dim-empty-partial {
    margin-bottom: 2px;
}

.ship-description-card {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    min-width: 0;
    /* Do not let the flex column stretch or compress this block; its height
       is determined by its own (already bounded) text. */
    flex: 0 0 auto;
    overflow: hidden;
}

/* (.ship-description-card-title is styled together with
   .ship-photo-card-title above — the duplicate rule that used to live here
   was removed so the two block headings cannot drift apart.) */

.ship-description-text {
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.9;
    text-align: right;
    white-space: normal;
    min-width: 0;
    /* `word-wrap: break-word` (legacy alias of overflow-wrap) does NOT break
       a single unbroken token — a long URL in a scraped description still
       overflowed horizontally. `anywhere` does, and additionally allows the
       break to shrink the intrinsic min-content width, which is what keeps
       the flex/grid parents from being widened. */
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Long descriptions must not blow up the shipcard: scroll internally
       instead of growing the card past a sane height. Relative to viewport
       height so a short laptop window gets a proportionally shorter block
       rather than a fixed 220px that dominates the card. */
    max-height: min(220px, 26vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.ship-description-text::-webkit-scrollbar {
    width: 6px;
}

.ship-description-text::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .22);
    border-radius: 3px;
}

/* ── Responsive overrides for the media/description blocks ────────────────
   These MUST come after the base .ship-photo-media / .ship-description-text
   rules above: the mobile and short-viewport media queries live earlier in
   this file (next to the rest of the card's responsive rules), and at equal
   specificity a later base rule would otherwise win the cascade. */

/* Short desktop/laptop windows: reclaim vertical space without changing the
   layout model. */
@media only screen and (max-height: 800px) and (min-width: 501px) {
    .ship-photo-media {
        max-height: 150px;
    }

    .ship-description-text {
        max-height: min(160px, 22vh);
    }
}

@media only screen and (max-width: 500px) {

    /* The bottom sheet is short, so the photo gets a shallower crop than the
       16:9 desktop frame — otherwise the image alone eats a third of it. */
    .ship-photo-media {
        aspect-ratio: 2 / 1;
        max-height: 30vh;
    }

    /* A long description must not push the vessel's telemetry below the fold:
       on a phone the identity + speed/course are the reason the card was
       opened. Capping the description (which scrolls internally) keeps the
       metadata rows reachable with a short scroll. Nothing is hidden — only
       bounded. */
    .ship-description-text {
        max-height: 20vh;
        font-size: 12.5px;
        line-height: 1.65;
    }
}

/* Persian translation - the primary, always-visible text. Vazirmatn (the
   project's Persian font) is already the ambient body font, so no
   font-family override is needed here. */
.ship-description-fa {
    text-align: right;
}

.ship-description-fallback {
    opacity: 0.65;
    font-style: italic;
}

.ship-description-loading,
.ship-description-error,
.ship-description-empty {
    text-align: center;
    opacity: 0.65;
    padding: 6px 0;
}

.ship-description-error {
    color: var(--error-color, #e05a5a);
    opacity: 0.85;
}

/* English original - collapsed by default via native <details>, same idiom
   as .binary-message-details/.binary-raw-data used for the binary message
   raw-data viewer. Kept LTR since the source text is English prose. */
.ship-description-original {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
}

.ship-description-original summary {
    cursor: pointer;
    font-size: 11px;
    opacity: 0.7;
    text-align: right;
    list-style: none;
}

.ship-description-original summary::-webkit-details-marker {
    display: none;
}

.ship-description-original summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
}

.ship-description-original[open] summary::before {
    transform: rotate(90deg);
}

.ship-description-en {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    opacity: 0.8;
    text-align: left;
    /* Scraped English prose can contain long URLs / IMO strings; same
       unbreakable-token handling as the Persian text above. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The <details> wrapper is a block in the RTL column; keep it contained. */
.ship-description-original {
    min-width: 0;
    overflow: hidden;
}

.ship-description-original summary {
    overflow-wrap: anywhere;
}

/* User-contributed vessel information ("توضیحات شناور توسط کاربران").
   Same block family as .ship-photo-card/.ship-description-card (border,
   radius, spacing) so the three read as one system, but always visible
   (no data-driven display:none) since it must offer "افزودن اطلاعات" even
   with zero contributions. */
.ship-contrib-card {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    min-width: 0;
    flex: 0 0 auto;
    overflow: hidden;
}

.ship-contrib-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    min-width: 0;
}

.ship-contrib-card-title {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(148, 165, 178);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ship-contrib-add-btn {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    background: rgba(255, 255, 255, .06);
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.ship-contrib-add-btn:hover {
    background: rgba(255, 255, 255, .12);
}

/* اطلاعات شناور / اطلاعات سفر / آخرین دریافت سیگنال. Same block family as
   .ship-contrib-card (border, radius, spacing) so the headed key/value
   sections read as one system with the cards above them.

   These sections deliberately do NOT reuse .mapcard-content-row: that class
   carries a `flex-direction: row` layout plus the .shipcard-row-selected
   override (row + align-items:center, built for one standalone telemetry
   row), and nesting it inside a titled card collapsed the label/value pairs
   into each other. A self-contained grid keeps each pair intact. */
.shipcard-section-card {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 8px 10px 10px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    min-width: 0;
    flex: 0 0 auto;
}

.shipcard-section-title {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(148, 165, 178);
    margin-bottom: 8px;
    text-align: center;
}

/* Two compact key/value columns. `minmax(0, 1fr)` (not a bare 1fr) is what
   lets a long value shrink inside its column instead of widening the track
   and pushing the sibling column out of the card. */
.shipcard-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.shipcard-kv {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
    text-align: center;
}

.shipcard-kv-label {
    color: rgb(148, 165, 178);
    font-size: 10px;
    line-height: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    /* Labels are short and known: one line, ellipsis if the card is narrowed,
       so value baselines stay aligned across the grid. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shipcard-kv-value {
    font-size: 14px;
    line-height: 20px;
    min-width: 0;
    /* Values are arbitrary AIS strings (destination, receiver name); they must
       wrap inside their own column, including strings with no spaces. */
    overflow-wrap: anywhere;
    /* AIS values are mostly Latin/numeric with trailing units ("30 m x 8 m",
       "7.7 kts", 26°20'6.2"N). Under the page's RTL direction the bidi
       algorithm moves those units/hemisphere letters to the wrong end.
       `plaintext` picks each value's direction from its own first strong
       character, so Latin values read LTR and Persian ones (وضعیت, گیرنده)
       still read RTL — without hard-coding a direction per field. */
    unicode-bidi: plaintext;
    /* plaintext resolves each value's own direction, which would otherwise
       also flip its alignment to that direction's start edge — pushing Latin
       values (EPA2558, 7.7 kts) to the opposite side from their label.
       Centering pins both halves of the pair to the same axis regardless of
       the direction plaintext resolves. */
    text-align: center;
}

/* Empty value (missing AIS field) must still render the app's placeholder
   rather than collapsing the cell and misaligning the grid. */
.shipcard-kv-value:empty:after {
    content: "-";
    color: rgb(148, 165, 178);
}

/* Very narrow phones: one column, matching the existing
   `#shipcard .mapcard-content-row>div { flex: 1 1 100% }` breakpoint. */
@media only screen and (max-width: 360px) {
    .shipcard-kv-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ship-contrib-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    font-size: 11px;
    opacity: 0.75;
    background: none;
    border: none;
    border-top: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.3));
    padding: 6px 0 2px;
    margin-top: 4px;
    cursor: pointer;
    color: inherit;
}

.ship-contrib-toggle:hover {
    opacity: 1;
}

.ship-contrib-count {
    opacity: 0.7;
}

.ship-contrib-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Many contributions must not blow up the shipcard - scroll internally,
       same idiom as .ship-description-text. */
    max-height: min(260px, 30vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
    min-width: 0;
}

.ship-contrib-list::-webkit-scrollbar {
    width: 6px;
}

.ship-contrib-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .22);
    border-radius: 3px;
}

.ship-contrib-loading,
.ship-contrib-error,
.ship-contrib-empty {
    text-align: center;
    font-size: 12px;
    opacity: 0.65;
    padding: 6px 0;
}

.ship-contrib-error {
    color: var(--error-color, #e05a5a);
    opacity: 0.85;
}

.ship-contrib-item {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px;
    border: 1px solid var(--menu-divider-color, rgba(128, 128, 128, 0.25));
    border-radius: 5px;
    background: rgba(255, 255, 255, .03);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ship-contrib-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.ship-contrib-author {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ship-contrib-account {
    font-weight: 400;
    opacity: 0.65;
    font-size: 0.92em;
}

.ship-contrib-time {
    font-size: 10px;
    opacity: 0.6;
    white-space: nowrap;
}

.ship-contrib-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.ship-contrib-field {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ship-contrib-field-label {
    color: rgb(148, 165, 178);
}

/* tel: link - clickable but must never widen the card on a long/odd
   formatted number. */
.ship-contrib-phone {
    color: inherit;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.ship-contrib-desc {
    opacity: 0.9;
    white-space: pre-wrap;
}

/* Add-contribution form, rendered into the shared #dialog-box. */
.ship-contrib-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: right;
}

.ship-contrib-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ship-contrib-form-row label {
    font-size: 12px;
    opacity: 0.8;
}

.ship-contrib-required {
    color: var(--error-color, #e05a5a);
}

.ship-contrib-form-error {
    font-size: 12px;
    color: var(--error-color, #e05a5a);
}

.ship-contrib-submit-btn {
    align-self: flex-start;
}

@media only screen and (max-width: 500px) {
    .ship-contrib-list {
        max-height: 24vh;
    }

    .ship-contrib-submit-btn {
        align-self: stretch;
    }
}

/* Improved Dialog Box Styling - Preserving Original Structure */
#dialog-box {
    position: fixed;
    max-height: 80vh;
    width: 90%;
    max-width: 900px;
    /* Stack the three rows explicitly. Without this the box is a plain
       block: any absolutely-positioned message content resolves against
       #dialog-box (the nearest positioned ancestor) and can paint over the
       close button. Flow layout keeps the button an untouchable sibling.

       Declared on :not(.hidden) so the generic `.hidden { display: none }`
       is not outranked: an id selector beats a class one, and a bare
       `display: flex` here would keep the dialog permanently on screen. */
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--menu-background-color);
    color: var(--menu-font-color);
    border: 0px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow-color);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10004;
    overflow: hidden;
}

/* Only the shown dialog is a flex column; `.hidden` keeps display: none. */
#dialog-box:not(.hidden) {
    display: flex;
}

.dialog-title {
    padding: 15px 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    border-bottom: solid 1px var(--menu-divider-color);
    /* Full width under the flex column above; the box is no longer a plain
       block, so these two rows must claim the width explicitly. */
    align-self: stretch;
    box-sizing: border-box;
}

.dialog-message {
    padding: 15px 20px;
    font-size: 14px;
    user-select: text;
    overflow-y: auto;
    max-height: calc(80vh - 130px);
    box-sizing: border-box;
    align-self: stretch;
    /* Contains any absolutely-positioned content the message may carry, so
       it can never escape the message area and reach the close button. */
    position: relative;
}

.dialog-close {
    /* Above the message in paint order, as a final guarantee that content
       can never end up on top of the only way to dismiss the dialog. */
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 8px 20px;
    background-color: var(--menu-background-hover-color);
    border: none;
    color: var(--menu-font-color);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 0px 15px 15px 15px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.dialog-close:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Binary Messages Dialog Styling */
.binary-messages-list {
    padding: 10px 0;
}

.binary-message-count {
    font-size: 0.9em;
    color: var(--menu-font-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--menu-divider-color);
    display: none;
    /* Hide this since we'll show count in title */
}

.binary-message-item {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.05);
}

.binary-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.binary-message-time {
    font-weight: bold;
    color: var(--menu-font-color);
}

.binary-message-source {
    color: var(--secondary-color);
}

.binary-message-details {
    margin-top: 10px;
    font-size: 0.9em;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.binary-raw-data {
    margin-top: 10px;
}

.binary-raw-data summary {
    cursor: pointer;
    font-size: 0.85em;
    color: var(--menu-font-color);
    opacity: 0.8;
    padding: 5px 0;
}

.binary-raw-data pre {
    margin-top: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: 0.8em;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Message Count Badge */
.message-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #d32f2f;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 10px;
    min-width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Binary Message Content */
.binary-message-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.binary-message-content div {
    margin-bottom: 8px;
}

.binary-message-content strong {
    display: block;
    font-size: 0.85em;
    color: var(--menu-font-color);
    opacity: 0.75;
    margin-bottom: 4px;
}

.binary-message-content span {
    font-size: 1.1em;
    font-weight: 500;
}

/* Handle Dark Mode */
.dark .binary-message-item {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .binary-message-content strong {
    color: rgba(255, 255, 255, 0.7);
}

.dark .binary-raw-data pre {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .binary-message-content {
        grid-template-columns: 1fr;
    }
}

/* Mobile Adjustments */
@media only screen and (max-width: 600px) {
    #dialog-box {
        width: 95%;
        max-height: 90vh;
        border-radius: 4px;
    }

    .dialog-title {
        font-size: 16px;
        padding: 12px 15px;
    }

    .dialog-message {
        padding: 12px 15px;
        font-size: 13px;
        max-height: calc(90vh - 110px);
    }

    .dialog-close {
        font-size: 13px;
        padding: 8px 15px;
        margin: 0px 12px 12px 12px;
    }

    .binary-message-item {
        padding: 8px;
    }

    .meteo-tooltip {
        max-width: 250px;
    }
}

.can-copy {
    user-select: text;
}


.Icon {
    position: relative;
    display: inline-block;
}

.ownShipIcon {
    position: relative;
    display: inline-block;
}

.ownShipIcon i {
    color: var(--secondary-color);
    font-size: 18px;
}

.ownShipIcon div {
    position: absolute;
    top: -11px;
    left: -12px;
    width: 40px;
    height: 40px;
    background-color: var(--stationCircleColor);
    border-radius: 50%;
    opacity: 75%;
    z-index: -1;
}


.comment_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M240-400h480v-60H240v60Zm0-130h480v-60H240v60Zm0-130h480v-60H240v60ZM140-240q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v740L720-240H140Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.mail_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm340-302L140-685v465h680v-465L480-462Zm0-60 336-218H145l335 218ZM140-685v-55 520-465Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.table_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm240-240H200v160h240v-160Zm80 0v160h240v-160H520Zm-80-80v-160H200v160h240Zm80 0h240v-160H520v160ZM200-680h560v-80H200v80Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.terminal_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm0-60h680v-436H140v436Zm160-72-42-42 103-104-104-104 43-42 146 146-146 146Zm190 4v-60h220v60H490Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* NMEA decoder.
   A signal-processing unit with a decoded digital pulse inside it: the
   framed, pinned body carries the "navigation data being processed" idea
   and, being a solid mass, holds its shape down to the 15px toolbar size
   like the filled glyphs beside it; the inner pulse reads as the decoded
   AIS/GPS sentence at 20px and above. Drawn on the same 960 grid and
   optical weight as the rest of the icon set.
   (A pure waveform was tried first and rejected - too many direction
   changes to survive at toolbar size.) */
.decode_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M440-80v-80h-80v80h-80v-80h-40q-33 0-56.5-23.5T160-240v-40h-80v-80h80v-80h-80v-80h80v-80h-80v-80h80v-40q0-33 23.5-56.5T240-800h40v-80h80v80h80v-80h80v80h80v-80h80v80h40q33 0 56.5 23.5T800-720v40h80v80h-80v80h80v80h-80v80h80v80h-80v40q0 33-23.5 56.5T720-160h-40v80h-80v-80h-80v80h-80Zm240-160v-480H240v480h440Z"/%3E%3Cpath d="M310-470h55v-95h65v190h65v-95h55" fill="none" stroke="black" stroke-width="62" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.drag_indicator_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M349.91-160q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm260 0q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm-260-250q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm260 0q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm-260-250q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm260 0q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.delete_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M261-120q-24 0-42-18t-18-42v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm106-146h60v-399h-60v399Zm166 0h60v-399h-60v399Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.visibility_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M480.12-330q70.88 0 120.38-49.62t49.5-120.5q0-70.88-49.62-120.38T479.88-670Q409-670 359.5-620.38T310-499.88q0 70.88 49.62 120.38t120.5 49.5Zm-.36-58q-46.76 0-79.26-32.74-32.5-32.73-32.5-79.5 0-46.76 32.74-79.26 32.73-32.5 79.5-32.5 46.76 0 79.26 32.74 32.5 32.73 32.5 79.5 0 46.76-32.74 79.26-32.73 32.5-79.5 32.5Zm.24 188q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.visibility_off_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M816-64 648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM480-330q14 0 30-2.5t27-7.5L320-557q-5 12-7.5 27t-2.5 30q0 72 50 121t120 49Zm278 40L629-419q10-16 15.5-37.5T650-500q0-71-49.5-120.5T480-670q-22 0-43 5t-38 16L289-760q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93ZM585-463 443-605q29-11 60-4.5t54 28.5q23 23 32 51.5t-4 66.5Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Outlined ("open") Material Symbols variants for the measure-card row icons. */
#measurecardInner .visibility_icon {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/%3E%3C/svg%3E');
}

#measurecardInner .visibility_off_icon {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m637-425-62-62q4-38-23-65.5T487-576l-62-62q13-5 27-7.5t28-2.5q70 0 119 49t49 119q0 14-2.5 28t-9.5 27Zm133 133-52-52q36-28 65.5-61.5T882-480q-50-111-150-175.5T480-720q-25 0-47.5 3T387-708l-56-56q35-15 72-23t77-8q140 0 257.5 79.5T898-498q5 11 5 22t-5 22q-23 58-58.5 108.5T770-292ZM480-280q-140 0-256-78T48-562q-5-11-5.5-22.5T48-607q23-57 58-107t82-90L80-913l51-51 736 736-51 51-130-130q-35 13-71.5 20t-74.5 7ZM222-708q-37 27-71 64t-57 84q50 111 150.5 175.5T480-320q14 0 27.5-1t27.5-3l-42-42q-8 2-15.5 3t-15.5 1q-70 0-119-49t-49-119q0-8 1-15.5t3-15.5l-86-86Zm259 116Zm-101 44Z"/%3E%3C/svg%3E');
}

#measurecardInner .delete_icon {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/%3E%3C/svg%3E');
}

.feed_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h462l198 198v462q0 24-18 42t-42 18H180Zm99-171h402v-60H279v60Zm0-159h402v-60H279v60Zm330-159h171L609-780v171Zm-330 0h201v-60H279v60Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.business_center_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M140-120q-24 0-42-18t-18-42v-191h311v60h180v-60h309v191q0 24-18 42t-42 18H140Zm311-251v-60h60v60h-60ZM80-431v-229q0-24 18-42t42-18h180v-100q0-24 18-42t42-18h200q24 0 42 18t18 42v100h180q24 0 42 18t18 42v229H571v-60H391v60H80Zm300-289h200v-100H380v100Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.cloud_download_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M251-160q-88 0-149.5-61.5T40-371q0-78 50-137t127-71q18-90 83-150t151-68v349l-83-83-43 43 156 156 156-156-43-43-83 83v-349q101 11 169 90t68 185v24q72-2 122 46.5T920-329q0 69-50 119t-119 50H251Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.view_list_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M350-160h470q24.75 0 42.375-17.625T880-220v-114H350v174ZM80-626h210v-174H140q-24.75 0-42.375 17.625T80-740v114Zm0 233h210v-173H80v173Zm60 233h150v-174H80v114q0 24.75 17.625 42.375T140-160Zm210-233h530v-173H350v173Zm0-233h530v-114q0-24.75-17.625-42.375T820-800H350v174Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/*--------------------------------------- */
.map_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m612-120-263-93-179 71q-17 9-33.5-1T120-173v-558q0-13 7.5-23t19.5-15l202-71 263 92 178-71q17-8 33.5 1.5T840-788v565q0 11-7.5 19T814-192l-202 72Zm-34-75v-505l-196-66v505l196 66Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*-------------------------------------- */

.info_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"%3E%3Cpath d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.help_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M484-247q16 0 27-11t11-27q0-16-11-27t-27-11q-16 0-27 11t-11 27q0 16 11 27t27 11Zm-35-146h59q0-26 6.5-47.5T555-490q31-26 44-51t13-55q0-53-34.5-85T486-713q-49 0-86.5 24.5T345-621l53 20q11-28 33-43.5t52-15.5q34 0 55 18.5t21 47.5q0 22-13 41.5T508-512q-30 26-44.5 51.5T449-393Zm31 313q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.play_circle_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.leaderboard_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M80-120v-480h200v480H80Zm300 0v-720h200v720H380Zm300 0v-400h200v400H680Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.settings_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.fullscreen_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M200-200v-193h60v133h133v60H200Zm0-367v-193h193v60H260v133h-60Zm367 367v-60h133v-133h60v193H567Zm133-367v-133H567v-60h193v193h-60Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.link_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M450-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140-422 180.833-381q40.834 41 99.167 41h170v60ZM325-450v-60h310v60H325Zm185 170v-60h170q58.333 0 99.167-40.765 40.833-40.764 40.833-99Q820-538 779.167-579 738.333-620 680-620H510v-60h170q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H510Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.more_vert_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M479.858-160Q460-160 446-174.142q-14-14.141-14-34Q432-228 446.142-242q14.141-14 34-14Q500-256 514-241.858q14 14.141 14 34Q528-188 513.858-174q-14.141 14-34 14Zm0-272Q460-432 446-446.142q-14-14.141-14-34Q432-500 446.142-514q14.141-14 34-14Q500-528 514-513.858q14 14.141 14 34Q528-460 513.858-446q-14.141 14-34 14Zm0-272Q460-704 446-718.142q-14-14.141-14-34Q432-772 446.142-786q14.141-14 34-14Q500-800 514-785.858q14 14.141 14 34Q528-732 513.858-718q-14.141 14-34 14Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.close_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.push_pin_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m634-448 86 77v60H510v241l-30 30-30-30v-241H240v-60l80-77v-333h-50v-60h414v60h-50v333Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.content_copy_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M180-81q-24 0-42-18t-18-42v-603h60v603h474v60H180Zm120-120q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h440q24 0 42 18t18 42v560q0 24-18 42t-42 18H300Zm0-60h440v-560H300v560Zm0 0v-560 560Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Vessel photo upload feature ("افزودن تصویر" / "تغییر تصویر") - Material
   Symbols "add_a_photo" glyph, same inline-SVG-mask idiom as every other
   icon in this file. */
.add_a_photo_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-60q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240v60H387l-73 80H160v480h640v-360h60v360q0 33-23.5 56.5T780-120H160Zm620-520v-80h-80v-60h80v-80h60v80h80v60h-80v80h-60ZM480-440Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.undo_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M259-200v-60h310q70 0 120.5-46.5T740-422q0-69-50.5-115.5T569-584H274l114 114-42 42-186-186 186-186 42 42-114 114h294q95 0 163.5 64T800-422q0 94-68.5 158T568-200H259Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.remove_circle_outline_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M280-453h400v-60H280v60ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.label_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M840-480 671-241q-13 18-31 29.5T600-200H180q-24.75 0-42.375-17.625T120-260v-440q0-24.75 17.625-42.375T180-760h420q22 0 40 11.5t31 29.5l169 239Zm-75 0L611-700H180v440h431l154-220Zm-585 0v220-440 220Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.signal_cellular_alt_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M185-160v-117h127v117H185Zm253 0v-379h126v379H438Zm252 0v-640h126v640H690Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.timeline_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M109.912-240Q81-240 60.5-260.589 40-281.177 40-310.089 40-339 60.494-359.5t49.273-20.5q5.233 0 10.233.5 5 .5 13 2.5l200-200q-2-8-2.5-13t-.5-10.233q0-28.779 20.589-49.273Q371.177-670 400.089-670 429-670 449.5-649.366t20.5 49.61Q470-598 467-577l110 110q8-2 13-2.5t10-.5q5 0 10 .5t13 2.5l160-160q-2-8-2.5-13t-.5-10.233q0-28.779 20.589-49.273Q821.177-720 850.089-720 879-720 899.5-699.411q20.5 20.588 20.5 49.5Q920-621 899.506-600.5T850.233-580Q845-580 840-580.5q-5-.5-13-2.5L667-423q2 8 2.5 13t.5 10.233q0 28.779-20.589 49.273Q628.823-330 599.911-330 571-330 550.5-350.494T530-399.767q0-5.233.5-10.233.5-5 2.5-13L423-533q-8 2-13 2.5t-10.25.5q-1.75 0-22.75-3L177-333q2 8 2.5 13t.5 10.233q0 28.779-20.589 49.273Q138.823-240 109.912-240Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.jamboard_kiosk_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M250-120v-60h200v-140H140q-24 0-42-18t-18-42v-400q0-24 18-42t42-18h680q24 0 42 18t18 42v400q0 24-18 42t-42 18H510v140h200v60H250ZM140-380h680v-400H140v400Zm0 0v-400 400Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.zoom_in_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Zm-31-85v-82h-82v-60h82v-81h60v81h81v60h-81v82h-60Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.menu_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M120-240v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.directions_boat_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M156-200 82-457q-4-12 1.5-23.5T101-496l59-20v-224q0-25 17.5-42t42.5-18h150v-120h220v120h150q25 0 42.5 17.5T800-740v225l60 19q11 4 16.5 15t1.5 23l-74 258q-48-5-89.5-29T641-286q-32 36-72.5 61T480-200q-48 0-88.5-25T319-286q-32 33-73.5 57T156-200ZM80-40v-60h80q42 0 83-13t77-37q36 24 77 36t83 12q42 0 83-12t77-36q36 24 77 37t83 13h80v60h-80q-41 0-81-10.5T640-81q-39 20-80 30.5T480-40q-39 0-80-10.5T320-81q-39 20-79 30.5T160-40H80Zm140-495 260-84 260 85v-206H220v205Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.directions_aiscatcher_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('/my-logo.png');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.dns_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M286.882-717Q266-717 251.5-702.382q-14.5 14.617-14.5 35.5Q237-646 251.618-631.5q14.617 14.5 35.5 14.5Q308-617 322.5-631.618q14.5-14.617 14.5-35.5Q337-688 322.382-702.5q-14.617-14.5-35.5-14.5Zm0 414Q266-303 251.5-288.382q-14.5 14.617-14.5 35.5Q237-232 251.618-217.5q14.617 14.5 35.5 14.5Q308-203 322.5-217.618q14.5-14.617 14.5-35.5Q337-274 322.382-288.5q-14.617-14.5-35.5-14.5ZM154-839h651q16 0 25.5 9.5t9.5 25.813V-535q0 17.425-9.5 29.212Q821-494 805-494H154q-15 0-24.5-11.788Q120-517.575 120-535v-268.687q0-16.313 9.5-25.813T154-839Zm26 60v225h600v-225H180Zm-26 353h647q15 0 27 12.5t12 28.527V-121q0 20-12 30.5T801-80H159q-16 0-27.5-10.5T120-121v-263.973q0-16.027 9.5-28.527T154-426Zm26 60v226h600v-226H180Zm0-413v225-225Zm0 413v226-226Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mail_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm340-302L140-685v465h680v-465L480-462Zm0-60 336-218H145l335 218ZM140-685v-55 520-465Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.content_paste_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M180-120q-26 0-43-17t-17-43v-600q0-26 17-43t43-17h202q7-35 34.5-57.5T480-920q36 0 63.5 22.5T578-840h202q26 0 43 17t17 43v600q0 26-17 43t-43 17H180Zm0-60h600v-600h-60v90H240v-90h-60v600Zm300-600q17 0 28.5-11.5T520-820q0-17-11.5-28.5T480-860q-17 0-28.5 11.5T440-820q0 17 11.5 28.5T480-780Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.search_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.public_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-43-61v-82q-35 0-59-26t-24-61v-44L149-559q-5 20-7 39.5t-2 39.5q0 130 84.5 227T437-141Zm294-108q22-24 38.5-51t28-56.5q11.5-29.5 17-60.5t5.5-63q0-106-58-192.5T607-799v18q0 35-24 61t-59 26h-87v87q0 17-13.5 28T393-568h-83v88h258q17 0 28 13t11 30v127h43q29 0 51 17t30 44Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.build_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M705-128 447-388q-23 8-46 13t-47 5q-97 0-165-67.5T121-602q0-31 8-60.5t23-55.5l145 145 92-86-149-149q26-15 55-23.5t59-8.5q99 0 168.5 69.5T592-602q0 24-5 47t-13 46l259 258q11 11 11 26.5T833-198l-76 70q-11 11-26 11t-26-11Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.brightness_4_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M481-29 346-160H160v-186L26-480l134-134v-186h186l135-134 133 134h186v186l134 134-134 134v186H614L481-29Zm-2-191q111 0 186-75.5T740-481q0-110-75.5-185.5T479-742q-27 0-52 5.5T373-718q69 32 111 96t42 141q0 77-42 141t-111 97q24 11 50.5 17t55.5 6Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.keyboard_arrow_down_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.keyboard_arrow_up_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M480-554 283-357l-43-43 240-240 240 240-43 43-197-197Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.more_horiz_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M0 0h24v24H0V0z" fill="none"/%3E%3Cpath d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.timer_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M360-840v-80h240v80H360Zm80 440h80v-240h-80v240Zm40 320q-74 0-139.5-28.5T226-186q-49-49-77.5-114.5T120-440q0-74 28.5-139.5T226-694q49-49 114.5-77.5T480-800q62 0 119 20t107 58l56-56 56 56-56 56q38 50 58 107t20 119q0 74-28.5 139.5T734-186q-49 49-114.5 77.5T480-80Zm0-80q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.showflex {
    display: flex;
}

.hide {
    display: none;
}

.notification-container {
    position: absolute;
    margin: 5px;
    z-index: 10005;
}

.notification {
    background-color: var(--notification-background-color);
    color: var(--notification-font-color);
    border-radius: 2px;
    width: 300px;
    border-color: var(--notification-border-color);
    padding: 10px;
    opacity: 0.8;
    transition:
        opacity 0.5s ease-in-out,
        transform 0.5s ease-in-out;
    margin-bottom: 5px;
}

@media only screen and (max-width: 750px) {
    .notification {
        border-radius: 0px;
    }
}

.flash-up {
    opacity: 0;
    animation: flash 0.25s ease forwards;
}

@keyframes flash {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.color-picker {
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    width: 100px;
    height: 20px;
    cursor: pointer;
    vertical-align: middle;
    background-color: transparent;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
}

/*------------------------------------------ search ---------------------------*/
.tableside_window {

    display: flex;
    flex-direction: column;

    position: fixed;

    top: 55px;
    right: 0;

    width: 430px;
    height: calc(100% - 55px);

    z-index: 9999;

    background: #172636;

    border-left: 1px solid rgba(255, 255, 255, .08);

    box-shadow:
        -8px 0 25px rgba(0, 0, 0, .35);

    overflow: hidden;

    transform: translateX(432px);

    transition:
        transform .28s ease;

}


.tableside_window.active {

    transform: translateX(0);

}

/*------------------------------------------ search ---------------------------*/

/* =========================================================
   SETTINGS WINDOW
   Sidebar-navigated preferences window sharing Quick Controls'
   black-glass identity (see features/quickcontrols.js). Position/
   slide-in mechanics are unchanged from before (fixed, left-docked,
   toggled by .active) - only the visual language and internal
   layout were redesigned.
   ========================================================= */

.settings_window {
    display: flex;
    flex-direction: column;
    width: 760px;
    max-width: calc(100vw - 16px);
    height: calc(100% - 55px);
    top: 55px;
    left: 0px;
    position: fixed;
    z-index: 9999;

    background:
        linear-gradient(180deg, rgba(10, 13, 20, 0.86), rgba(6, 9, 15, 0.90));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 var(--hormoz-radius, 16px) var(--hormoz-radius, 16px) 0;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

    color: #f2f6f8;
    transform: translateX(-110%);
    transition: transform 0.3s ease-out;
    box-shadow: 10px 0 15px -5px var(--shadow-color), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.settings_window.active {
    transform: translateX(0);
}

@media (max-width: 900px) {
    .settings_window {
        width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 750px) {
    .settings_window {
        width: 100%;
        transform: translateX(-100%);
    }
}

.stg-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    direction: rtl;
    font-size: 13px;
}

/* ---------- Top bar ---------- */

.stg-topbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.stg-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.stg-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #9fb0b8;
    font-size: 14px;
    padding: 5px 9px;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

.stg-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

/* ---------- Search ---------- */

.stg-search-wrap {
    flex: none;
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.stg-search-icon {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    color: #6c7d85;
    pointer-events: none;
}

.stg-search-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--hormoz-radius-sm, 10px);
    color: #f2f6f8;
    font-size: 12.5px;
    padding: 9px 34px 9px 30px;
}

.stg-search-input:focus {
    outline: none;
    border-color: var(--hormoz-cyan, #22d3ee);
}

.stg-search-input::placeholder {
    color: #6c7d85;
}

.stg-search-clear {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #8fa3ab;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 6px;
}

.stg-search-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

/* ---------- Body: sidebar + content ---------- */

.stg-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.stg-sidebar {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    overflow-y: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.stg-navitem {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #a9b8bf;
    font-size: 12.5px;
    font-weight: 500;
    text-align: right;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.stg-navitem svg {
    flex: none;
}

.stg-navitem:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.stg-navitem.stg-nav-active {
    background: rgba(20, 224, 196, 0.14);
    border-color: rgba(20, 224, 196, 0.32);
    color: var(--hormoz-turquoise, #14e0c4);
    font-weight: 700;
}

.stg-nav-spacer {
    flex: 1 1 auto;
}

.stg-reset-all {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    background: rgba(255, 84, 112, 0.08);
    border: 1px solid rgba(255, 84, 112, 0.28);
    border-radius: 9px;
    color: var(--hormoz-danger, #ff5470);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.stg-reset-all:hover {
    background: rgba(255, 84, 112, 0.16);
}

.stg-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px 28px;
}

.stg-no-results {
    padding: 40px 10px;
    text-align: center;
    color: #7d8f97;
    font-size: 12.5px;
}

/* Only the active category shows, unless a search is in progress. */
.stg-cat {
    display: none;
}

.stg-cat.stg-cat-active {
    display: block;
}

.stg-content.stg-searching .stg-cat {
    display: block;
}

.stg-content.stg-searching .stg-cat.stg-cat-empty {
    display: none;
}

.stg-cat-head {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.stg-cat-head h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.stg-content.stg-searching .stg-cat+.stg-cat .stg-cat-head {
    margin-top: 22px;
}

/* ---------- Rows ---------- */

.stg-subgroup {
    margin-bottom: 18px;
}

.stg-subgroup:last-child {
    margin-bottom: 4px;
}

.stg-subgroup-hidden {
    display: none;
}

.stg-subhead {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--hormoz-cyan-soft, #67e8f9);
    opacity: .85;
    margin: 0 2px 8px;
}

.stg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stg-subgroup>.stg-row:last-child {
    border-bottom: none;
}

.stg-row-hidden {
    display: none;
}

.stg-row-block {
    flex-direction: column;
    align-items: stretch;
}

.stg-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stg-row-title {
    font-size: 12.5px;
    color: #e4ecef;
}

.stg-row-desc {
    font-size: 10.5px;
    color: #7d8f97;
    line-height: 1.6;
}

.stg-inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Controls ---------- */

.stg-switch {
    position: relative;
    flex: none;
    display: inline-flex;
    cursor: pointer;
}

.stg-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.stg-switch-track {
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    position: relative;
    transition: background-color .18s ease, border-color .18s ease;
}

.stg-switch-thumb {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #aab8be;
    transition: transform .18s ease, background-color .18s ease;
}

.stg-switch input:checked+.stg-switch-track {
    background: rgba(20, 224, 196, 0.28);
    border-color: var(--hormoz-turquoise, #14e0c4);
}

.stg-switch input:checked+.stg-switch-track .stg-switch-thumb {
    transform: translateX(-17px);
    background: var(--hormoz-turquoise, #14e0c4);
}

.stg-switch input:focus-visible+.stg-switch-track {
    outline: 2px solid var(--hormoz-cyan, #22d3ee);
    outline-offset: 2px;
}

.stg-select,
.stg-select-multi {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--hormoz-radius-sm, 10px);
    color: #f2f6f8;
    font-size: 12px;
    padding: 6px 10px;
    max-width: 230px;
}

.stg-row-block .stg-select-multi {
    max-width: none;
    margin-top: 8px;
}

.stg-select:focus,
.stg-select-multi:focus {
    outline: none;
    border-color: var(--hormoz-cyan, #22d3ee);
}

.stg-color {
    flex: none;
    width: 34px;
    height: 26px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    cursor: pointer;
}

.stg-btn {
    flex: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--hormoz-radius-sm, 10px);
    color: #f2f6f8;
    font-size: 12px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.stg-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.09);
}

.stg-btn-sm {
    padding: 5px 10px;
    font-size: 11px;
}

.stg-slider-wrap {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 170px;
}

.stg-value {
    flex: none;
    min-width: 40px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    padding: 2px 6px;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.stg-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    height: 20px;
    background: transparent;
    cursor: pointer;
    direction: ltr;
}

.stg-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}

.stg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-top: -4.5px;
    background: #fff;
    border: 2px solid var(--hormoz-cyan, #22d3ee);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}

.stg-slider::-moz-range-track {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}

.stg-slider::-moz-range-progress {
    height: 4px;
    border-radius: 4px;
    background: var(--hormoz-cyan, #22d3ee);
}

.stg-slider::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--hormoz-cyan, #22d3ee);
}

.stg-slider:focus-visible {
    outline: 2px solid var(--hormoz-cyan, #22d3ee);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Responsive: sidebar becomes a horizontal strip ---------- */

@media (max-width: 750px) {
    .stg-body {
        flex-direction: column;
    }

    .stg-sidebar {
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 8px;
    }

    .stg-navitem {
        width: auto;
        white-space: nowrap;
    }

    .stg-navitem span {
        display: none;
    }

    .stg-nav-spacer {
        display: none;
    }

    .stg-reset-all {
        width: auto;
        margin: 0 0 0 6px;
    }

    .stg-reset-all span {
        display: none;
    }

    .stg-content {
        padding: 14px 16px 24px;
    }

    .stg-row {
        flex-wrap: wrap;
    }

    .stg-slider-wrap {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings_window {
        transition: none;
    }
}

.settings_main {
    flex: 0 0 1;
    overflow: auto;
}

.settings_header {
    flex: 0 0 44px;
    background-color: var(--settings-bg-color);
    color: var(--menu-font-color);
    border-bottom: solid 1px var(--shadow-color-light);
    font-size: 20px;
    display: flex;
    border-radius: 0px;
    flex-direction: row;
}

.settings_header div:nth-child(1) {
    flex: 0 0 0px;
    transform: scale(1.15) translateX(1px) translateY(8px);
}

.settings_header div:nth-child(2) {
    flex: 1 1 0;
    background-color: var(--settings-header-bg-color);
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 0px;
    font-size: 16px;
}

.settings_header .search-box {
    font-size: 13px;
    height: 32px;
    padding: 5px 12px 5px 36px;
    margin: 0;
}

.settings_header div:nth-child(n + 3) {
    flex: 0 0 auto;
    align-self: center;
    margin-right: 14px;
    font-size: 22px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.settings_header div:nth-child(n + 3):hover {
    opacity: 0.65;
}

.settings_header div:last-child {
    color: red;
}

.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-left: 12px;
    padding-right: 8px;
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
}

.search-box {
    width: 100%;
    height: 32px;
    padding: 5px 12px 5px 36px;
    margin: 2px;
    border-radius: 8px;
    border: solid 1px var(--menu-border-color);
    color: var(--menu-font-color);
    background-color: var(--menu-background-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 15px;
    max-width: 500px;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-box::placeholder {
    color: #9aa0a6;
}

.search-box:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.18);
}

.ship-table-column-dropdown {
    position: relative;
    flex-shrink: 0;
    margin-left: 8px;
}

.ship-table-columns-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--menu-border-color);
    border-radius: 8px;
    background-color: var(--menu-background-color);
    color: var(--menu-font-color);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ship-table-columns-btn:hover {
    border-color: var(--primary-color);
}

.ship-table-columns-btn .chevron {
    opacity: 0.55;
}

.ship-table-column-dropdown-menu {
    display: none;
    position: fixed;
    background-color: var(--menu-background-color);
    color: var(--menu-font-color);
    font-size: 13px;
    min-width: 220px;
    border: 1px solid var(--menu-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    z-index: 9999;
}

.column-menu-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    border-bottom: 1px solid var(--menu-border-color);
}

.column-menu-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.ship-table-column-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.ship-table-column-dropdown-item:hover {
    background-color: var(--menu-background-hover-color);
}

.ship-table-column-dropdown-item input {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.column-menu-footer {
    border-top: 1px solid var(--menu-border-color);
    padding: 8px;
}

.column-menu-reset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--menu-font-color);
    font-size: 13px;
    cursor: pointer;
}

.column-menu-reset:hover {
    background-color: var(--menu-background-hover-color);
    color: var(--primary-color);
}

.info-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 288px;
    height: 100%;
    background: #1f2937;
    color: #f3f4f6;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 20010;
    display: flex;
    flex-direction: column;
}

.info-panel.active {
    transform: translateX(0);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 20000;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.header-info-panel {
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #374151;
    flex-shrink: 0;
}

.header-info-panel .close_icon {
    cursor: pointer;
    border: none;
    background: none;
    color: #9ca3af;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s;
}

.header-info-panel .close_icon:hover {
    background: #374151;
}

.info-panel .content {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #f3f4f6;
    padding: 8px;
    border: 1px solid #4b5563;
    border-radius: 8px;
    font-size: 12px;
    transition: background 0.2s;
    cursor: pointer;
}

.quick-link svg {
    width: 28px;
    height: 28px;
    fill: #d1d5db;
}

.quick-link:hover {
    background: #374151;
    color: #f3f4f6;
    text-decoration: none;
}

.quick-link span {
    margin-top: 4px;
}

.info-panel-section {
    margin-bottom: 16px;
}

.link-list {
    display: flex;
    flex-direction: column;
    border: 1px solid #4b5563;
    border-radius: 8px;
    overflow: hidden;
}

.link-list a {
    padding: 10px 12px;
    border-bottom: 1px solid #4b5563;
    text-decoration: none;
    color: #f3f4f6;
    transition: background 0.2s;
}

.link-list a:last-child {
    border-bottom: none;
}

.link-list a:hover {
    background: #374151;
    text-decoration: none;
    color: #f3f4f6;
}

.link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-item span {
    display: inline-flex;
    align-items: center;
}

.link-item .arrow_right_alt_icon {
    margin-left: auto;
    font-size: 20px;
    color: #9ca3af;
}

.social-box {
    border: 1px solid #4b5563;
    border-radius: 8px;
    padding: 12px 16px;
    background: #374151;
}

.social-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links>span {
    font-size: 13px;
    font-weight: 500;
    color: #f3f4f6;
}

.social-links>a {
    display: inline-flex;
    gap: 16px;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4b5563;
    transition: background 0.2s;
}

.social-icons a:hover {
    background: #6b7280;
}

.social-icons a svg {
    width: 20px;
    height: 20px;
}

.log-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.log-state-indicator {
    padding: 0.5rem 1rem;
    color: #64748b;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.log-content-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.log-content {
    margin: 0;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-entry {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

.log-entry.info {
    color: var(--menu-font-color);
}

.log-entry.warning {
    background-color: #f97316;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.log-entry.error {
    background-color: #ef4444;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.log-entry.error .timestamp,
.log-entry.warning .timestamp {
    color: rgba(255, 255, 255, 0.6) !important;
}

.log-entry.info .timestamp {
    color: var(--timestamp-color) !important;
}


.error_od_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M479.98-280q14.02 0 23.52-9.48t9.5-23.5q0-14.02-9.48-23.52t-23.5-9.5q-14.02 0-23.52 9.48t-9.5 23.5q0 14.02 9.48 23.52t23.5 9.5ZM453-433h60v-253h-60v253Zm27.27 353q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.warning_od_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m40-120 440-760 440 760H40Zm104-60h672L480-760 144-180Zm340.18-57q12.82 0 21.32-8.68 8.5-8.67 8.5-21.5 0-12.82-8.68-21.32-8.67-8.5-21.5-8.5-12.82 0-21.32 8.68-8.5 8.67-8.5 21.5 0 12.82 8.68 21.32 8.67 8.5 21.5 8.5ZM454-348h60v-224h-60v224Zm26-122Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.info_od_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M453-280h60v-240h-60v240Zm26.98-314q14.02 0 23.52-9.2T513-626q0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2Zm.29 514q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.pause_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M370-320h60v-320h-60v320Zm160 0h60v-320h-60v320ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.play_arrow_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="m383-310 267-170-267-170v340Zm97 230q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.filter_alt_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"%3E%3Cpath d="M440-160q-17 0-28.5-11.5T400-200v-240L161-745q-14-17-4-36t31-19h584q21 0 31 19t-4 36L560-440v240q0 17-11.5 28.5T520-160h-80Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.radio_icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"%3E%3Cpath d="M160-80q-33 0-56.5-23.5T80-160v-480q0-25 13.5-45t36.5-29l506-206 26 66-330 134h468q33 0 56.5 23.5T880-640v480q0 33-23.5 56.5T800-80H160Zm0-80h640v-280H160v280Zm231-69q29-29 29-71t-29-71q-29-29-71-29t-71 29q-29 29-29 71t29 71q29 29 71 29t71-29ZM160-520h480v-80h80v80h80v-120H160v120Zm0 360v-280 280Z"/%3E%3C/svg%3E');
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.realtime-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.realtime-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0 1rem;
    border-bottom: 1px solid var(--menu-border-color);
    align-items: center;
}

.realtime-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--menu-background-color);
    border-bottom: 1px solid var(--menu-border-color);
    color: var(--menu-font-color);
    font-size: 0.875rem;
}

.realtime-filter-bar i.filter_list_icon {
    font-size: 16px;
    opacity: 0.7;
}

.realtime-filter-bar .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: var(--menu-background-color);
    border: 1px solid var(--menu-border-color);
    border-radius: 3px;
    color: var(--menu-font-color);
    font-size: 0.85rem;
}

.filter-chip button {
    padding: 0;
    margin-left: 0.2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--menu-font-color);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.filter-chip button:hover {
    opacity: 1;
}

.filter-chip button i {
    font-size: 12px;
}

.realtime-spacer {
    flex: 1;
}

.realtime-clear-btn {
    padding: 0;
    margin-left: 0.2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e01b24;
    transition: opacity 0.2s ease;
    width: 20px;
    height: 20px;
}

.realtime-clear-btn:hover {
    opacity: 0.7;
}

.realtime-clear-btn i {
    font-size: 14px;
}

.realtime-control-btn {
    padding: 0.6rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--menu-font-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
}

.realtime-control-btn:hover {
    background: var(--menu-background-hover-color);
    color: #1c71d8;
}



.realtime-control-btn span {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.realtime-background-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--menu-font-color);
    user-select: none;
}

.realtime-background-toggle input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.realtime-background-toggle:hover {
    color: #1c71d8;
}

.realtime-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--menu-font-color);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.realtime-tab:hover {
    border-bottom-color: var(--menu-border-color);
}

.realtime-tab.active {
    border-bottom-color: #1c71d8;
    color: #1c71d8;
    font-weight: 500;
}

.realtime-panel {
    flex: 1;
    overflow: auto;
    padding: 1rem;
}

.signal-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.signal-table thead th {
    position: sticky;
    top: 0;
    background: var(--menu-background-color);
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--menu-border-color);
    font-weight: 600;
    color: var(--menu-font-color);
}

.signal-table tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--menu-border-color);
    color: var(--menu-font-color);
    white-space: nowrap;
}

.signal-table tbody tr:hover {
    background: var(--menu-hover-color);
}

.signal-table tbody td a {
    color: #1c71d8;
    text-decoration: none;
}

.signal-table tbody td a:hover {
    text-decoration: underline;
}

.nmea-cell-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nmea-decoder-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--menu-border-color);
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    transition: background 0.2s ease;
    font-size: 14px;
}

.nmea-decoder-icon:hover {
    background: var(--menu-background-hover-color);
}

.nmea-decoder-icon i {
    font-size: 14px;
}

.nmea-text {
    flex: 1;
    font-family: monospace;
    font-size: 0.85em;
    white-space: nowrap;
}

.channel-indicator {
    display: flex;
    gap: 2px;
}

.channel-box {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #e0e0e0;
    color: transparent;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
}

.channel-box.active {
    background-color: #10b981;
    color: white;
}

.dark .channel-box {
    background-color: #3a3a3a;
}

.dark .channel-box.active {
    background-color: #10b981;
    color: white;
}

.aiscatcher-logo-control {
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 72px !important;
    height: 72px !important;
    padding: 5px !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
}

.aiscatcher-logo-control:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.aiscatcher-logo-control.disconnected svg path {
    fill: #ff4444 !important;
}

.aiscatcher-logo-control.connected svg path {
    fill: #12a5ed !important;
}

/* This control is only ever shown while kiosk mode is active (.kiosk class,
   toggled via display by features/kiosk.js), so a persistent label beats a
   hover title that touchscreens can't show. */
.aiscatcher-logo-exit-label {
    font-size: 9px;
    color: #fff;
    opacity: .75;
    margin-top: 2px;
    white-space: nowrap;
}

/* NMEA Decoder Styles */

.decoder-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 20px;

    max-width: 1200px;

    margin: 0 auto;

    direction: rtl;
}



/* Main panel */

.decoder-panel {

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15);

    border-radius: 8px;

    padding: 20px;

    direction: rtl;

    text-align: right;

}



/* Title */

.decoder-panel h3 {

    margin-top: 0;

    color: #0756a8;

    font-size: 1em;

    font-weight: 700;

}



/* Description */

.decoder-panel p {

    color: #334155;

    margin-bottom: 15px;

    font-size: 0.9em;

    line-height: 1.8;

}



/* NMEA input */

#decoder_input {

    width: 100%;

    min-height: 150px;

    padding: 12px;

    font-family: "Courier New", monospace;

    font-size: 0.9em;


    direction: ltr;

    text-align: left;


    border: 1px solid rgba(7, 86, 168, 0.35);

    border-radius: 8px;


    resize: vertical;


    background: rgba(255, 255, 255, 0.35);

    color: #0f172a;


    box-sizing: border-box;

}


#decoder_input::placeholder {

    color: #64748b;

}



#decoder_input:focus {

    outline: none;

    border-color: #0756a8;

}



/* Buttons */

.decoder-buttons {

    display: flex;

    gap: 10px;

    margin-top: 15px;

}



.decoder-btn-primary,
.decoder-btn-secondary {

    padding: 10px 20px;

    border: none;

    border-radius: 6px;

    font-size: 0.9em;

    cursor: pointer;

    background: #0756a8;

    color: white;

}



/* Status */

.decoder-status {

    margin-top: 15px;

    font-size: 0.9em;

}



.decoder-error {
    color: #b91c1c;
    /* قرمز هشدار خوانا */
    direction: rtl;
    text-align: right;
    font-weight: 600;
}

.decoder-success {
    color: #15803d;
    /* سبز موفقیت خوانا */
    direction: rtl;
    text-align: right;
    font-weight: 600;
}


/* Output */

.decoder-output {

    display: flex;

    flex-direction: column;

    gap: 15px;

    direction: rtl;

}



/* Message card */

.decoder-message {

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);


    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15);


    border-radius: 8px;

    padding: 20px;


    direction: ltr;

    text-align: left;

}



/* Message title */

.decoder-message h4 {

    margin-top: 0;

    margin-bottom: 15px;

    color: #0756a8;

    border-bottom:

        1px solid rgba(7, 86, 168, 0.25);

    padding-bottom: 8px;

    font-size: 0.95em;

    text-align: left;

}



/* Table */

.decoder-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.9em;

    direction: ltr;

}



.decoder-table tr {

    border-bottom:

        1px solid rgba(15, 23, 42, 0.12);

}



.decoder-table tr:last-child {

    border-bottom: none;

}



.decoder-table td {

    padding: 10px;

    text-align: left;

}



/* Key */

.decoder-field-key {

    font-weight: 600;

    color: #334155;

    width: 25%;

    text-align: left;

}



/* Value */

.decoder-field-value {

    color: #0f172a;

    font-family: "Courier New", monospace;

    font-weight: 600;

    width: 35%;

    border-left:

        1px solid rgba(7, 86, 168, 0.2);

    padding-left: 20px;

}



/* Description */

.decoder-field-description {

    color: #475569;

    width: 40%;

    padding-left: 15px;

    text-align: left;

}



/* Mobile */

@media(max-width:768px) {


    .decoder-container {

        padding: 10px;

    }


    .decoder-panel,
    .decoder-message {

        padding: 15px;

    }

}

/* =========================================================
                    HORMOZ AIS BRAND
   ========================================================= */

.header-title {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* لوگوی شیشه‌ای */

.header-brand {

    display: flex;
    align-items: center;

    gap: 2px;

    padding: 7px 20px;

    border-radius: 18px;

    background: linear-gradient(135deg,
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, .04));

    border: 1px solid rgba(255, 255, 255, .20);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        inset 0 1px rgba(255, 255, 255, .25),
        0 0 18px rgba(0, 170, 255, .25);

    transition: .35s;

    cursor: pointer;

    user-select: none;
}

.header-brand:hover {

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px rgba(255, 255, 255, .35),
        0 0 28px rgba(0, 180, 255, .55);

}

/* لنگر */

.brand-anchor {

    font-size: 40px;

    color: #FFD54A;

    text-shadow:
        0 0 8px rgba(255, 215, 0, .8),
        0 0 16px rgba(255, 215, 0, .45);

}

/* متن */

.brand-text {

    font-family: "Orbitron", "Vazirmatn", sans-serif;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #ffffff;

    text-shadow:
        0 0 10px rgba(0, 180, 255, .75);

}

/* AIS */

.brand-ais {

    color: #64F0FF;

    text-shadow:
        0 0 12px rgba(0, 255, 255, .85),
        0 0 20px rgba(0, 180, 255, .45);

}



@keyframes hormozPulse {

    0% {

        opacity: .3;

        transform: scale(.8);

    }

    50% {

        opacity: 1;

        transform: scale(1.35);

    }

    100% {

        opacity: .3;

        transform: scale(.8);

    }

}

#menubar_mini {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: 14px;

}

.mini-tab {

    width: 38px;

    height: 38px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 10px;

    cursor: pointer;

    transition: all .25s ease;

    color: #F4F4F4;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .10);

    backdrop-filter: blur(10px);

}

.mini-tab i {

    font-size: 18px;

}

.mini-tab:hover {

    transform: translateY(-2px);

    background: #D4A017;

    color: #111;

    border-color: #FFD54A;

    box-shadow:
        0 0 12px rgba(255, 212, 74, .45);

}



.tableside_window {

    border-radius: 12px;

    overflow: hidden;

    background: #182736;

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .35);

}


.settings_header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    background: #223548;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}


@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(13, 110, 253, .5);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 20px rgba(13, 110, 253, .6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(13, 110, 253, 0);
    }
}

.hz-map-btn {
    animation: pulse 2s ease-in-out 3;
}


.map-guide {
    position: absolute;

    right: 70px;
    /* کنار دکمه */
    bottom: 110px;

    width: 260px;

    background: #1d2433;
    color: #fff;

    border-radius: 10px;

    padding: 14px;

    z-index: 9999;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .35);

    animation: fadeIn .3s ease;
}

.map-guide.hidden {
    display: none;
}

.map-guide-arrow {
    position: absolute;

    right: -10px;
    top: 50%;

    width: 20px;
    height: 20px;

    background: #1d2433;

    transform: translateY(-50%) rotate(45deg);
}

.map-guide-content strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.map-guide-content div {
    font-size: 13px;
    line-height: 1.6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* INSERT: append to your main stylesheet (e.g. custom/config.css or style.css) */

.hz-onboard-tooltip {
    position: absolute;
    z-index: 1500;
    max-width: 220px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--hz-glass, rgba(15, 30, 46, .85));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
    color: var(--hz-text, #e8f1f2);
    font-size: 12.5px;
    line-height: 1.6;
    animation: hzFadeInUp .35s ease forwards;
    pointer-events: none;
}

.hz-onboard-text {
    position: relative;
    z-index: 2;
}

/* Arrow pointing down-left toward the button (RTL layout, button sits below-right) */
.hz-onboard-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
    border-right: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
    border-bottom: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
    transform: rotate(45deg);
    bottom: -8px;
    right: 20px;
}

@keyframes hzFadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hzFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.hz-onboard-tooltip.hz-hide {
    animation: hzFadeOut .3s ease forwards;
}

/* First-visit basemap hint (features/maphint.js).
   The base .hz-onboard-arrow above is fixed to the bottom-right corner for a
   tooltip that sits above its target. The hint positions itself beside the
   layers button instead (the button stack is in the bottom-right corner, so
   there is no room above it on a phone), which needs the arrow on the inline
   edge and the borders rotated onto the two sides that now face the button.
   When it does fall back to sitting above the button, .hz-maphint-above
   restores the original down-pointing corner. */
.hz-maphint .hz-onboard-arrow {
    border: none;
    border-top: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
    border-right: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
}

.hz-maphint.hz-maphint-above .hz-onboard-arrow {
    border: none;
    border-right: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
    border-bottom: 1px solid var(--hz-border, rgba(0, 217, 192, .25));
}

/* The tooltip itself must never swallow map clicks (the base rule already
   sets pointer-events:none), but the pulse ring is drawn on the button and
   must not block the click it is advertising either. */
.hz-pulse-attention::after {
    pointer-events: none;
}

@media (max-width: 767px) {
    /* Narrower so it clears the button stack on a phone, and a touch smaller
       so a two-line Persian sentence still fits without covering the map. */
    .hz-maphint {
        max-width: 190px;
        font-size: 11.5px;
        padding: 9px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hz-maphint,
    .hz-maphint.hz-hide {
        animation: none;
    }

    .hz-pulse-attention,
    .hz-pulse-attention::after {
        animation: none;
    }
}

/* Pulse ring on the target button while tooltip is visible */
.hz-pulse-attention {
    position: relative;
    animation: hzPulseScale 1.4s ease-in-out infinite;
}

.hz-pulse-attention::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--hz-turquoise, #00d9c0);
    animation: hzPulseRing 1.4s ease-out infinite;
    pointer-events: none;
}

@keyframes hzPulseScale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes hzPulseRing {
    0% {
        opacity: .8;
        transform: scale(.9);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}


#map_tab_mini {
    cursor: pointer !important;
}

/* .powered-by {
    position: fixed;
    bottom: 26px;
    right: 50px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;

    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;

    color: rgba(255, 255, 255, .92);
    text-decoration: none !important;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 30px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .18);

    z-index: 999999;

    transition: all .25s ease;
}

.powered-by:hover,
.powered-by:focus,
.powered-by:active,
.powered-by:visited {
    text-decoration: none !important;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .30);
    transform: translateY(-2px);
}


@media (max-width: 600px) {
    .powered-by {
        width: max-content;
        max-width: 95vw;

        white-space: nowrap;

        font-size: 11px;
        padding: 8px 18px;
    }
}
/* ========================= */
   Social Links
========================= */

/* کل بخش */
.social-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
}

/* هر بخش */
.social-section h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

/* آیکون‌ها کنار هم */
.social-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* عنوان در یک ردیف کامل */
.social-section h4 {
    flex: 0 0 100%;
}

/* لینک */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border-radius: 14px;
    background: rgba(255, 255, 255, .05);

    transition: .25s;
}

.social-link:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-3px);
}

/* لوگوها */
.social-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

/* جداکننده */
.social-sections hr {
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin: 0;
}

/* Watermark, centered directly beneath the Lat/Lon readout. Same glass
   treatment as before — only the placement and scale changed. */
.powered-info {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 4px 10px;

    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);

    border-radius: 8px;

    white-space: nowrap;

    z-index: 9999;
    text-align: center;
}

.live-text {
    font-size: 11px;
    font-weight: 600;
}

.powered-text {
    /* One notch below the 10px Lat/Lon text above it. No top margin: it
       only existed to separate this from .live-text, which is commented
       out, and it would offset the watermark's vertical centering. */
    font-size: 9px;
    opacity: .7;
}

/* Mobile: identical layout and typography — only lifted clear of the
   device safe area / browser UI. */
@media (max-width: 767.98px) {
    .powered-info {
        bottom: calc(15px + env(safe-area-inset-bottom));
    }
}
/* --- Vessel freshness badge (ship card) ---------------------------------
   Visibility is driven by the `visible` class, never by inline display:
   showShipcard() rewrites the inline display of every [data-context-type]
   element when the card switches between ship and plane. */
.shipcard-age-badge {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.shipcard-age-badge.visible {
    display: flex;
}

.shipcard-age-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.shipcard-age-badge.age-delayed {
    color: #f5b942;
    background: rgba(245, 185, 66, 0.12);
    border-color: rgba(245, 185, 66, 0.32);
}

.shipcard-age-badge.age-stale {
    color: #ff5470;
    background: rgba(255, 84, 112, 0.12);
    border-color: rgba(255, 84, 112, 0.32);
}

/* ==========================================================================
   Vessel filter (features/vesselfilter.js)
   Reuses the .stg-* settings design system; only the controls that don't
   already exist there (checkbox grid, dual-range slider, map badge) are
   defined here.
   ========================================================================== */

.vfilter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vfilter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vfilter-summary {
    font-size: 11px;
    color: #7d8f97;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--hormoz-radius-sm, 10px);
    padding: 8px 11px;
    margin-bottom: 16px;
    line-height: 1.7;
}

.vfilter-summary-active {
    color: var(--hormoz-cyan-soft, #67e8f9);
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.07);
}

/* The group is one stg-row-block (so settings-search treats it as a unit);
   strip the row's default separator since the subgroup already spaces them. */
.vfilter-row {
    border-bottom: none !important;
    padding: 0 2px;
    gap: 0;
}

.vfilter-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.vfilter-group-head .stg-subhead {
    margin-bottom: 8px;
}

.vfilter-bulk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vfilter-linkbtn {
    background: none;
    border: none;
    padding: 2px 1px;
    cursor: pointer;
    font: inherit;
    font-size: 10.5px;
    color: var(--hormoz-cyan, #22d3ee);
    border-radius: 4px;
    transition: color .15s ease;
}

.vfilter-linkbtn:hover {
    color: #fff;
    text-decoration: underline;
}

.vfilter-linkbtn:focus-visible {
    outline: 2px solid var(--hormoz-cyan, #22d3ee);
    outline-offset: 2px;
}

.vfilter-sep {
    color: rgba(255, 255, 255, 0.22);
    font-size: 10px;
}

/* Two columns on desktop, matching the reference's compact density. */
.vfilter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
}

.vfilter-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--hormoz-radius-sm, 10px);
    cursor: pointer;
    min-width: 0;
    transition: background-color .15s ease;
}

.vfilter-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.vfilter-item input.vfilter-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vfilter-box {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}

.vfilter-box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #04212a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

.vfilter-check:checked+.vfilter-box {
    background: var(--hormoz-turquoise, #14e0c4);
    border-color: var(--hormoz-turquoise, #14e0c4);
}

.vfilter-check:checked+.vfilter-box::after {
    transform: rotate(45deg) scale(1);
}

.vfilter-check:focus-visible+.vfilter-box {
    outline: 2px solid var(--hormoz-cyan, #22d3ee);
    outline-offset: 2px;
}

/* Sprite swatch: a fixed 20x20 window onto icons.png, so the symbol is the
   same one the vessel gets on the map. The .sprites rule supplies the sheet;
   only the cell offset is set inline. */
.vfilter-icon {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vfilter-icon .sprites {
    width: 20px;
    height: 20px;
}

.vfilter-label {
    font-size: 11.5px;
    color: #e4ecef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.vfilter-item-off .vfilter-label {
    color: #6f8189;
}

.vfilter-item-off .vfilter-icon {
    opacity: .4;
}

.vfilter-empty-note {
    font-size: 10.5px;
    line-height: 1.7;
    color: #f5b942;
    background: rgba(245, 185, 66, 0.08);
    border: 1px solid rgba(245, 185, 66, 0.22);
    border-radius: var(--hormoz-radius-sm, 10px);
    padding: 7px 10px;
    margin-top: 8px;
}

/* ---------- Dual-range speed slider ---------- */

.vfilter-range {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
}

/* The track is LTR so that 0 sits on the left and the maximum on the right,
   matching how a speed scale is read even inside the RTL panel. The two
   Persian value chips stay in the RTL flow either side of it. */
.vfilter-range-track {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    direction: ltr;
}

.vfilter-range-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}

.vfilter-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
    background: var(--hormoz-cyan, #22d3ee);
    pointer-events: none;
}

/* Both inputs overlap the same track. The tracks themselves are transparent
   and non-interactive, so only the two thumbs receive pointer events and
   whichever is nearer the click wins. */
.vfilter-range-input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: none;
    pointer-events: none;
}

.vfilter-range-input::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.vfilter-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-top: -5.5px;
    background: #fff;
    border: 2px solid var(--hormoz-cyan, #22d3ee);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    cursor: pointer;
}

.vfilter-range-input::-moz-range-track {
    height: 4px;
    background: transparent;
}

.vfilter-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--hormoz-cyan, #22d3ee);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    cursor: pointer;
}

.vfilter-range-input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--hormoz-cyan, #22d3ee);
    outline-offset: 2px;
}

.vfilter-range-input:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--hormoz-cyan, #22d3ee);
    outline-offset: 2px;
}

/* ---------- Map button badge ---------- */

.vfilter-map-btn {
    position: relative;
}

.vfilter-map-btn.vfilter-active {
    color: var(--hormoz-turquoise, #14e0c4);
}

.vfilter-badge {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--hormoz-turquoise, #14e0c4);
    color: #04212a;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 1.5px rgba(4, 33, 42, .65);
    pointer-events: none;
}

/* ---------- Responsive: single column, touch-friendly rows ---------- */

@media (max-width: 750px) {
    .vfilter-grid {
        grid-template-columns: 1fr;
    }

    .vfilter-item {
        padding: 10px 8px;
    }

    .vfilter-label {
        font-size: 12.5px;
        white-space: normal;
    }

    .vfilter-head {
        flex-wrap: wrap;
    }

    .vfilter-range {
        margin-top: 14px;
    }

    .vfilter-range-input::-webkit-slider-thumb {
        width: 19px;
        height: 19px;
        margin-top: -7.5px;
    }

    .vfilter-range-input::-moz-range-thumb {
        width: 17px;
        height: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .vfilter-item,
    .vfilter-box,
    .vfilter-box::after,
    .vfilter-linkbtn {
        transition: none;
    }
}

/* ── Phone: the map's top-right pill moves into the tool dock ──────────────
   The pill (#markerCount / ship table / vessel filter / map settings) sits
   at the top-right of the map and is the widest thing competing with the
   search box for that band. On a phone its two useful controls are reached
   elsewhere — the vessel filter as a dock row (features/vesselfilter.js
   builds #vf-toggle-btn, toolbardock adopts it) and map settings from the
   dock's own quick-controls — so the pill is hidden here rather than
   shrunk.

   Search and the strait-gate panel both reserved a 58px right gutter for
   it. With the pill gone that gutter is dead space, so both reclaim it and
   centre properly across the top of the map. */
@media (max-width: 767.98px) {
    .map-button-box.map-pill { display: none; }
}