:root {
            --jh-bg: #e6e0d6;
            --jh-canvas: #d9d9d9;
            --jh-cream: #fbf9f0;
            --jh-row: #eee7da;
            --jh-blue: #174fa0;
            --jh-red: #c33a34;
            --jh-wine: #a32248;
            --jh-magenta: #d72db7;
            --jh-green: #14705a;
            --jh-tab-red: #ed2727;
        }

        html, body {
            margin: 0;
            background: #f0f2f5
        }

        body {
            font-family: 'Lexend Deca',Arial,sans-serif !important
        }

        #app {
            max-width: 1920px
        }

        .jhora-page-container {
            width: 100%;
            padding: 0 0 1rem
        }

        .jhora-browser-frame {
            width: 100%;
            overflow: auto;
            border: 1px solid #858585;
            background: #d7d7d7
        }

        .jh-input-controls {
            display: grid;
            grid-template-columns: minmax(260px, 520px) auto minmax(180px, 1fr);
            gap: 12px;
            align-items: end;
            padding: 10px 12px;
            border-bottom: 1px solid #858585;
            background: #f4f5f7;
            font-family: 'Lexend Deca',Arial,sans-serif
        }

        .jh-person-selector {
            min-width: 260px
        }

        .jh-ayanamsa-control {
            display: grid;
            gap: 4px;
            min-width: 150px;
            color: #313131;
            font-size: 12px
        }

        .jh-ayanamsa-control select {
            min-height: 36px;
            padding: 5px 8px;
            border: 1px solid #999;
            background: #fff
        }

        .jh-data-status {
            align-self: center;
            min-height: 20px;
            color: #4b5563;
            font-size: 12px
        }

        .jh-data-status.is-loading { color: #174fa0 }
        .jh-data-status.is-success { color: #14705a }
        .jh-data-status.is-warning { color: #8a5b00 }
        .jh-data-status.is-error { color: #a32248 }

        .jh-placeholder-notice {
            position: relative;
            z-index: 2;
            margin: 8px;
            padding: 8px 10px;
            border: 1px solid #a76a00;
            background: #fff3cd;
            color: #5e4300;
            font-family: Tahoma,'Segoe UI',Arial,sans-serif;
            font-size: 12px;
            line-height: 1.35
        }

        .jh-placeholder-notice strong {
            margin-right: 4px
        }

        .jh-strength-placeholder {
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            padding: 12px;
            color: #765a1e;
            text-align: center
        }

        .jh-bars.is-placeholder {
            min-height: 150px;
            background: repeating-linear-gradient(-45deg,#f5f1df,#f5f1df 8px,#ece5c9 8px,#ece5c9 16px)
        }

        @media (max-width: 760px) {
            .jh-input-controls {
                grid-template-columns: 1fr;
                align-items: stretch
            }
        }

        #JHoraApp {
            min-width: 1180px;
            height: clamp(720px,calc(100vh - 148px),830px);
            min-height: 720px;
            overflow: hidden;
            color: #111;
            background: #dedede;
            font-family: Tahoma,'Segoe UI',Arial,sans-serif;
            font-size: 12px;
            line-height: 1.12;
            user-select: none;
            isolation: isolate
        }

            #JHoraApp *, #JHoraApp *::before, #JHoraApp *::after {
                box-sizing: border-box
            }

            #JHoraApp button, #JHoraApp input, #JHoraApp select {
                font: inherit;
                border-radius: 0
            }

        .jh-app-shell {
            display: grid;
            grid-template-rows: 33px minmax(0,1fr);
            width: 100%;
            height: 100%;
            border: 1px solid #666;
            background: #dedede;
            box-shadow: inset 1px 1px #fff,inset -1px -1px #888
        }

        .jh-content-host {
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            background: #dedede
        }

        /* tabs */
        .jh-main-tabs, .jh-secondary-tabs, .jh-bottom-tabs {
            display: flex;
            align-items: flex-end;
            gap: 0;
            overflow: hidden;
            white-space: nowrap;
            background: linear-gradient(#f5f5f5,#d9d9d9);
            border-bottom: 1px solid #777
        }

        .jh-main-tabs {
            padding: 4px 4px 0
        }

        .jh-secondary-tabs {
            height: 34px;
            padding: 5px 4px 3px;
            border-top: 1px solid #fff
        }

        .jh-bottom-tabs {
            height: 29px;
            padding: 3px 5px 0;
            border-top: 2px solid #777;
            border-bottom: 0
        }

        .jh-tab {
            appearance: none;
            height: 24px;
            margin-right: -1px;
            padding: 2px 13px;
            border: 1px solid #858585;
            border-bottom-color: #5d5d5d;
            background: linear-gradient(#fff,#dedede);
            box-shadow: inset 1px 1px #fff,inset -1px -1px #aaa;
            color: #111;
            font-family: Georgia,'Times New Roman',serif;
            font-size: 13px;
            line-height: 18px;
            white-space: nowrap;
            cursor: default
        }

        .jh-main-tab {
            min-width: 70px
        }

        .jh-tab.is-active {
            position: relative;
            z-index: 2;
            height: 27px;
            border-bottom-color: #efefef;
            background: #efefef;
            color: var(--jh-tab-red);
            font-weight: 700
        }

        .jh-secondary-tabs .jh-tab, .jh-bottom-tabs .jh-tab {
            height: 23px;
            padding: 1px 14px;
            font-size: 12px
        }

            .jh-secondary-tabs .jh-tab.is-active, .jh-bottom-tabs .jh-tab.is-active {
                height: 25px
            }

        .jh-tab:focus-visible {
            outline: 1px dotted #222;
            outline-offset: -4px
        }

        /* shared split pages and fixed natal chart panel */
        .jh-split-page {
            display: grid;
            grid-template-columns: 31.65% 68.35%;
            width: 100%;
            height: 100%;
            min-height: 0
        }

        .jh-left-pane {
            min-width: 0;
            min-height: 0;
            padding: 3px 5px 3px 4px;
            border-right: 3px ridge #d2d2d2;
            background: #ddd7cf
        }

        .jh-chart-grid {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            grid-template-rows: repeat(3,minmax(0,1fr));
            gap: 3px 8px;
            width: 100%;
            height: 100%
        }

        .jh-chart-window {
            display: grid;
            grid-template-rows: 20px minmax(0,1fr);
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            border: 1px solid #707070;
            background: #e5e5e5;
            box-shadow: inset 1px 1px #fff,inset -1px -1px #999
        }

        .jh-chart-caption {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1px 3px 0;
            min-width: 0;
            color: #222;
            font-family: Georgia,'Times New Roman',serif;
            font-size: 12px;
            line-height: 18px
        }

            .jh-chart-caption span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

        .jh-chart-svg {
            display: block;
            width: 100%;
            height: 100%;
            background: #e8e8e8
        }

        /* common classic tables */
        .jh-table-panel {
            min-width: 0;
            min-height: 0;
            overflow: auto;
            background: var(--jh-cream)
        }

        .jh-data-table, .jh-classic-table {
            border-collapse: collapse;
            table-layout: fixed;
            background: #fffef8;
            font-family: Arial,sans-serif;
            font-size: 13px
        }

        .jh-data-table {
            width: 100%
        }

            .jh-data-table th, .jh-classic-table th {
                position: sticky;
                top: 0;
                z-index: 2;
                height: 23px;
                padding: 2px 7px;
                border: 1px solid #a1a1a1;
                background: linear-gradient(#f7f7f7,#dedede);
                color: #222;
                text-align: left;
                font-family: Georgia,'Times New Roman',serif;
                font-weight: 400;
                box-shadow: inset 1px 1px #fff;
                white-space: nowrap
            }

            .jh-data-table td, .jh-classic-table td {
                height: 23px;
                padding: 2px 7px;
                overflow: hidden;
                border-right: 1px solid rgba(120,120,120,.18);
                color: var(--jh-blue);
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .jh-data-table tbody tr:nth-child(odd) td, .jh-classic-table tbody tr:nth-child(odd) td {
                background: var(--jh-row)
            }

            .jh-data-table tbody tr:nth-child(even) td, .jh-classic-table tbody tr:nth-child(even) td {
                background: #fffef9
            }

            .jh-data-table td:first-child, .jh-classic-table td:first-child {
                color: var(--jh-wine);
                font-weight: 600
            }

        .jh-name-cell {
            color: var(--jh-wine) !important
        }

        .jh-value-cell {
            color: var(--jh-blue) !important
        }

        /* basics */
        .jh-basics-right {
            display: grid;
            grid-template-rows: minmax(0,1fr) 29px;
            min-width: 0;
            min-height: 0;
            background: var(--jh-cream)
        }

        .jh-basics-body {
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            background: var(--jh-cream)
        }

        .jh-basics-key-info {
            display: grid;
            grid-template-rows: 47.5% 52.5%;
            height: 100%;
            min-height: 0
        }

            .jh-basics-key-info > .jh-table-panel {
                border-bottom: 3px ridge #d2d2d2
            }

        .jh-key-info-grid {
            display: grid;
            grid-template-columns: 46% 54%;
            min-width: 0;
            min-height: 0;
            width: 100%;
            height: 100%
        }

        .jh-info-panel, .jh-bav-panel {
            min-width: 0;
            min-height: 0;
            overflow: auto;
            padding: 11px 14px;
            background: var(--jh-cream);
            font-family: Georgia,'Times New Roman',serif
        }

        .jh-info-panel {
            border-right: 3px ridge #d2d2d2
        }

        .jh-section-title {
            margin: 0 0 16px;
            color: #174e9b;
            font-size: 22px;
            font-weight: 400
        }

        .jh-bav-panel .jh-section-title {
            margin-bottom: 13px;
            color: #9b1454
        }

        .jh-info-list {
            display: grid;
            grid-template-columns: 34% minmax(0,1fr);
            row-gap: 9px;
            font-size: 15px
        }

        .jh-info-label {
            color: var(--jh-green);
            font-weight: 700
        }

        .jh-info-value {
            color: #dc251f;
            font-weight: 600
        }

        .jh-bav-description {
            margin: 0 0 10px;
            color: #9b1454;
            font-size: 16px;
            line-height: 1.45
        }

        .jh-mini-chart-grid {
            display: grid;
            grid-template-columns: repeat(3,minmax(105px,1fr));
            gap: 10px 18px;
            width: min(100%,620px)
        }

        .jh-mini-chart-card {
            text-align: center
        }

        .jh-mini-chart-title {
            margin-bottom: 2px;
            color: #c13b43;
            font-size: 16px
        }

        .jh-mini-chart-svg {
            display: block;
            width: 100%;
            max-width: 112px;
            aspect-ratio: 1;
            margin: 0 auto
        }

        .jh-basics-table-scroll {
            width: 100%;
            height: 100%;
            overflow: auto;
            background: var(--jh-cream)
        }

        .jh-houses-table {
            min-width: 825px
        }

        .jh-amsa-table {
            min-width: 620px
        }

        .jh-kp-table {
            min-width: 865px
        }

        /* chakras */
        .jh-chakras-page {
            display: grid;
            grid-template-rows: 34px minmax(0,1fr);
            width: 100%;
            height: 100%;
            min-height: 0;
            background: #e7dfd3
        }

        .jh-chakra-body {
            min-width: 0;
            min-height: 0;
            overflow: auto;
            background: #d8d8d8
        }

        .jh-grey-canvas {
            position: relative;
            min-width: 1120px;
            min-height: 100%;
            overflow: auto;
            padding: 16px 18px;
            background: #d8d8d8
        }

        .jh-many-vargas {
            min-height: 0;
            overflow: auto;
            padding: 6px 0 8px 16px;
            background: #e8e0d5
        }

        .jh-many-vargas-grid {
            display: grid;
            grid-template-columns: repeat(4,238px);
            grid-auto-rows: 238px;
            gap: 5px 10px;
            width: max-content;
            align-content: start
        }

            .jh-many-vargas-grid .jh-chart-window {
                width: 238px;
                height: 238px
            }

        .jh-mixed-vargas {
            display: grid;
            grid-template-columns: 50% 50%;
            height: 100%;
            background: #e5dfd4
        }

        .jh-mixed-left {
            padding: 12px 14px;
            border-right: 3px ridge #d2d2d2;
            overflow: auto
        }

        .jh-mixed-right {
            padding: 10px 12px;
            overflow: auto;
            background: #faf8ef
        }

        .jh-mixed-label {
            font-family: Arial,sans-serif;
            font-size: 21px;
            line-height: 1.3;
            margin: 0 0 4px 6px
        }

        .jh-mixed-chart {
            position: relative;
            height: calc(100% - 58px);
            min-height: 640px;
            background: #d8d8bd;
            border: 1px solid #888;
            overflow: hidden
        }

        .jh-diagram-title {
            font: 28px Arial,sans-serif;
            color: #9a1800;
            margin: 2px 0 8px 4px
        }

        /* strengths */
        .jh-strengths-right {
            display: grid;
            grid-template-rows: minmax(0,1fr) 29px;
            min-width: 0;
            min-height: 0;
            background: #fffef2
        }

        .jh-strengths-body {
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            background: #fffef1
        }

        .jh-strength-ashtakavarga {
            height: 100%;
            overflow: auto;
            padding: 15px 14px 50px;
            background: #f7f3e7;
            color: #982054;
            font-family: Georgia,'Times New Roman',serif
        }

        .jh-strength-bav-heading {
            margin: 0 0 19px;
            font-size: 25px;
            font-weight: 400
        }

        .jh-strength-bav-description {
            margin: 0 0 27px;
            font-size: 20px;
            line-height: 1.2
        }

        .jh-strength-bav-grid {
            display: grid;
            grid-template-columns: repeat(3,142px);
            grid-auto-rows: 157px;
            column-gap: 42px;
            row-gap: 10px;
            width: max-content;
            margin-left: 17px
        }

            .jh-strength-bav-grid .jh-mini-chart-card {
                width: 142px;
                height: 157px
            }

            .jh-strength-bav-grid .jh-mini-chart-title {
                height: 29px;
                font-size: 21px;
                line-height: 27px
            }

            .jh-strength-bav-grid .jh-mini-chart-svg {
                width: 142px;
                height: 128px;
                max-width: none
            }

        .jh-other-strengths {
            display: grid;
            grid-template-rows: 184px 216px minmax(0,1fr);
            height: 100%;
            min-height: 0;
            overflow: hidden;
            background: var(--jh-cream)
        }

        .jh-strength-table-panel {
            min-height: 0;
            overflow: hidden;
            border-bottom: 3px ridge #d2d2d2
        }

        .jh-yoga-panel {
            border-bottom: 0
        }

        .jh-strength-table-scroll {
            width: 100%;
            height: 100%;
            overflow: auto;
            background: var(--jh-cream)
        }

        .jh-strength-classic-table {
            border-collapse: collapse;
            table-layout: fixed;
            background: #fff;
            font-family: Arial,sans-serif;
            font-size: 15px
        }

            .jh-strength-classic-table th {
                position: sticky;
                top: 0;
                height: 24px;
                padding: 2px 7px;
                border: 1px solid #999;
                background: linear-gradient(#f8f8f8,#e7e7e7);
                font-family: Georgia,serif;
                font-weight: 400;
                text-align: left;
                white-space: nowrap
            }

            .jh-strength-classic-table td {
                height: 25px;
                padding: 2px 7px;
                color: var(--jh-blue);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .jh-strength-classic-table tr:nth-child(odd) td {
                background: var(--jh-row)
            }

            .jh-strength-classic-table tr:nth-child(even) td {
                background: #fff
            }

            .jh-strength-classic-table td:first-child {
                color: var(--jh-wine)
            }

        .jh-strength-bars-scroll {
            height: 100%;
            overflow: auto;
            padding: 11px 15px 12px;
            background: #fffef1
        }

        .jh-strength-grid {
            display: grid;
            grid-template-columns: repeat(3,minmax(255px,1fr));
            gap: 10px 12px;
            align-items: start
        }

        .jh-strength-card {
            height: 198px;
            border: 1px solid #b5417d;
            background: #fffff7;
            overflow: hidden
        }

        .jh-strength-title {
            height: 40px;
            padding: 4px 5px 0;
            color: #135833;
            text-align: center;
            font: 28px/32px Arial,sans-serif;
            white-space: nowrap
        }

        .jh-bars {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 154px;
            padding: 21px 5px 0
        }

        .jh-bar-item {
            display: grid;
            grid-template-rows: minmax(0,1fr) 27px;
            flex: 1;
            height: 100%;
            text-align: center
        }

        .jh-bar-space {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center
        }

        .jh-bar {
            width: 100%;
            min-width: 20px;
            max-width: 48px;
            background: #ae7a79
        }

        .jh-bar-value {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: #5c497e;
            font: 22px Arial,sans-serif;
            white-space: nowrap
        }

        .jh-bar-label {
            color: #101eb6;
            font: 24px/25px Arial,sans-serif;
            white-space: nowrap
        }

        /* dasas */
        .jh-dasas-right {
            display: grid;
            grid-template-rows: 48px minmax(0,1fr) 29px;
            min-width: 0;
            min-height: 0;
            background: #fff
        }

        .jh-dasa-toolbar {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px 3px;
            background: #fff
        }

        .jh-small-btn, .jh-wide-btn, .jh-classic-btn, .jh-form-btn {
            height: 27px;
            border: 1px solid #888;
            background: linear-gradient(#fff,#ddd);
            box-shadow: inset 1px 1px #fff;
            color: #111;
            font-family: Georgia,serif
        }

        .jh-small-btn {
            width: 24px;
            padding: 0;
            font-size: 19px
        }

        .jh-wide-btn {
            min-width: 128px;
            font-weight: 700
        }

        .jh-dasa-note {
            color: #9d6b46;
            font: 15px Georgia,serif
        }

        .jh-dasa-content {
            overflow: auto;
            padding: 8px 20px;
            color: #174e9b;
            font: 16px Georgia,serif
        }

        .jh-dasa-heading {
            margin: 0 0 30px;
            font-size: 17px;
            font-weight: 400
        }

        .jh-dasa-subheading {
            margin: 0 0 28px 27px;
            font-size: 17px;
            font-weight: 400
        }

        .jh-dasa-list {
            width: 650px;
            margin-left: 27px
        }

        .jh-dasa-row {
            display: grid;
            grid-template-columns: 120px 220px 25px 230px;
            margin-bottom: 8px;
            color: #dc332d
        }

        .jh-dasa-planet {
            color: #137153
        }

        .jh-dasa-dash {
            color: #b52cb0
        }

        .jh-dasa-help {
            margin-top: 43px;
            color: #9c4a78;
            line-height: 1.35
        }

        /* transits */
        .jh-transits-right {
            display: grid;
            grid-template-rows: minmax(0,1fr) 29px;
            min-width: 0;
            min-height: 0;
            background: var(--jh-cream)
        }

        .jh-transit-page {
            display: grid;
            grid-template-rows: 215px 282px minmax(0,1fr);
            height: 100%;
            min-height: 0
        }

        .jh-transit-form {
            overflow: hidden;
            padding: 10px 12px;
            background: #e4dac9
        }

        .jh-form-btn {
            display: block;
            width: 225px;
            margin-bottom: 3px
        }

        .jh-form-hint {
            width: 225px;
            margin-bottom: 10px;
            color: #a31962;
            text-align: center
        }

        .jh-transit-fields {
            display: grid;
            grid-template-columns: 45px 110px 80px 80px 55px 70px 110px;
            gap: 5px 9px;
            align-items: end;
            width: 750px;
            color: #a31962
        }

            .jh-transit-fields label {
                display: flex;
                flex-direction: column;
                gap: 3px;
                text-align: center
            }

            .jh-transit-fields .jh-label-left {
                align-self: end;
                text-align: left
            }

        .jh-field {
            width: 100%;
            height: 25px;
            border: 1px solid #bbb;
            background: #fff;
            color: #2f667e
        }

        .jh-transit-table-wrap {
            overflow: auto;
            border-top: 3px ridge #d2d2d2;
            border-bottom: 3px ridge #d2d2d2
        }

        .jh-transit-reference {
            padding: 18px 8px 5px;
            color: #f04b7d;
            font-size: 16px
        }

            .jh-transit-reference span {
                margin-left: 28px;
                color: #4d80c7
            }

        .jh-transit-bottom {
            display: grid;
            grid-template-columns: 42% 58%;
            min-height: 0;
            overflow: hidden
        }

            .jh-transit-bottom > .jh-info-panel {
                border-right: 3px ridge #d2d2d2
            }

            .jh-transit-bottom > .jh-table-panel {
                overflow: auto
            }

        /* shared classic control views */
        .jh-module-right {
            min-width: 0;
            min-height: 0;
            background: var(--jh-cream)
        }

        .jh-module-top-two {
            display: grid;
            grid-template-columns: 46% 54%;
            min-height: 0;
            border-bottom: 3px ridge #d2d2d2
        }

        .jh-module-bottom-two {
            display: grid;
            grid-template-columns: 46% 54%;
            min-height: 0
        }

            .jh-module-bottom-two > .jh-info-panel {
                border-right: 3px ridge #d2d2d2
            }

        .jh-tajaka-page, .jh-tithi-page {
            display: grid;
            grid-template-rows: 55% 45%;
            height: 100%
        }

        .jh-classic-panel {
            background: #e4dac9;
            font-family: Georgia,serif;
            color: #a31962
        }

        .jh-tajaka-controls {
            display: grid;
            grid-template-columns: 47% 53%;
            padding: 8px 14px;
            gap: 15px;
            overflow: auto
        }

        .jh-control-column {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 4px
        }

        .jh-control-main-btn {
            width: 100%;
            min-height: 27px
        }

        .jh-classic-hint {
            text-align: center;
            color: #a31962
        }

        .jh-classic-copy {
            text-align: center;
            color: #a31962;
            line-height: 1.25
        }

        .jh-field-row {
            display: grid;
            grid-template-columns: 95px minmax(0,1fr);
            align-items: center;
            gap: 7px
        }

        .jh-classic-field {
            height: 25px;
            border: 1px solid #aaa;
            background: #fff;
            color: #2d7084;
            padding: 1px 5px
        }

        .jh-link-spacer {
            height: 12px
        }

        .jh-tithi-controls {
            display: grid;
            grid-template-columns: 55% 45%;
            padding: 8px 14px;
            gap: 12px;
            overflow: auto
        }

        .jh-numbered-action {
            display: grid;
            grid-template-columns: 22px 1fr;
            align-items: center;
            gap: 5px
        }

        .jh-indented-hint {
            margin-left: 24px
        }

        .jh-daily-row {
            display: grid;
            grid-template-columns: 1fr 95px;
            align-items: center;
            gap: 7px
        }

            .jh-daily-row label {
                display: flex;
                align-items: flex-start;
                gap: 4px
            }

            .jh-daily-row span {
                margin-left: 22px
            }

        .jh-or-label {
            text-align: center;
            margin: 4px 0
        }

        .jh-dual-select {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px
        }

        .jh-select-caption {
            text-align: center;
            margin-bottom: 5px
        }

        .jh-wide-field {
            width: 100%
        }

        .jh-classic-fieldset {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-top: 5px;
            padding: 7px;
            border: 1px solid #aaa
        }

            .jh-classic-fieldset legend {
                width: auto;
                margin: 0;
                padding: 0 4px;
                color: #a31962;
                font-size: 13px
            }

        .jh-date-time-grid {
            display: grid;
            grid-template-columns: 45px 82px 62px 82px;
            gap: 4px 7px;
            align-items: end;
            margin-top: 8px
        }

            .jh-date-time-grid label {
                text-align: center
            }

            .jh-date-time-grid .jh-classic-field {
                width: 100%
            }

        .jh-mundane-page {
            display: grid;
            grid-template-rows: 58% 42%;
            height: 100%
        }

        .jh-mundane-top {
            min-height: 0;
            overflow: hidden;
            border-bottom: 3px ridge #d2d2d2
        }

        .jh-mundane-controls {
            display: grid;
            grid-template-columns: 29% 29% 42%;
            height: 100%;
            gap: 14px;
            padding: 7px 13px;
            overflow: auto
        }

        .jh-mundane-col {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .jh-mundane-left .jh-section-button, .jh-mundane-search .jh-section-button {
            margin-top: 7px
        }

        .jh-eclipse-row, .jh-search-row, .jh-action-select-row {
            display: flex;
            align-items: center;
            gap: 6px
        }

            .jh-search-row > * {
                flex: 1
            }

            .jh-search-row.jh-three > *:first-child {
                flex: 1.7
            }

        .jh-chart-mode-fieldset {
            margin: 0 0 10px
        }

        .jh-action-select-row .jh-classic-btn {
            flex: 1
        }

        .jh-action-select-row .jh-classic-field {
            width: 80px
        }

        .jh-mundane-bottom {
            display: grid;
            grid-template-columns: 42% 58%;
            min-height: 0;
            overflow: hidden
        }

            .jh-mundane-bottom > .jh-info-panel {
                border-right: 3px ridge #d2d2d2
            }

        .jh-misc-page {
            display: grid;
            grid-template-rows: minmax(0,1fr) 29px;
            height: 100%
        }

        .jh-misc-body {
            min-height: 0;
            overflow: hidden
        }

        .jh-misc-top {
            display: grid;
            grid-template-columns: 46% 54%;
            height: 62%;
            border-bottom: 3px ridge #d2d2d2
        }

        .jh-misc-bottom {
            display: grid;
            grid-template-columns: 42% 58%;
            height: 38%
        }

        .jh-progression-controls {
            display: grid;
            grid-template-columns: 51% 49%;
            grid-template-rows: auto auto 31px;
            padding: 8px 14px;
            gap: 6px 10px;
            overflow: auto
        }

        .jh-progression-left, .jh-progression-right {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

            .jh-progression-right label {
                text-align: center
            }

        .jh-progression-date {
            grid-column: 1/3
        }

        .jh-big-mixed-btn {
            grid-column: 1/3;
            width: 100%
        }

        .jh-mixed-chart-panel {
            padding: 10px 20px;
            background: #e5ded1;
            overflow: auto
        }

        .jh-mixed-chart-box {
            position: relative;
            width: 250px;
            height: 250px
        }

        .jh-mixed-small-labels {
            font-size: 9px
        }

        .jh-mixed-chart-title {
            position: absolute;
            top: 0;
            left: 130px;
            font: 17px Georgia,serif
        }

        .jh-mixed-chart-box .jh-chart-svg {
            height: 205px;
            margin-top: 15px
        }

        /* under construction */
        .jh-construction-view {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            height: 100%;
            min-height: 0;
            padding: 36px;
            background: #d8d8d8
        }

        .jh-construction-card {
            width: 500px;
            padding: 22px;
            background: #ededed;
            border: 1px solid #888;
            box-shadow: inset 1px 1px #fff,inset -1px -1px #bbb
        }

            .jh-construction-card h2 {
                margin: 0 0 10px;
                font: 24px Arial,sans-serif
            }

            .jh-construction-card p {
                margin: 0;
                font-size: 15px;
                line-height: 1.45
            }


        /* screenshot-complete dasa, transit and miscellany views */
        .jh-dasas-right {
            grid-template-rows: 51px minmax(0,1fr) 29px;
        }

        .jh-dasa-toolbar {
            gap: 10px;
            padding: 10px 8px 5px;
        }

        .jh-dasa-note {
            margin-left: 2px;
            white-space: nowrap;
        }

        .jh-dasa-content {
            padding: 8px 13px 4px;
            font-size: 16px;
            line-height: 1.08;
        }

        .jh-dasa-heading {
            margin: 0 0 31px;
            font-size: 17px;
        }

        .jh-dasa-subheading {
            margin: 0 0 27px 27px;
            font-size: 17px;
        }

        .jh-dasa-list {
            width: 610px;
            margin-left: 27px;
        }

        .jh-dasa-row {
            grid-template-columns: 120px 211px 25px 230px;
            min-height: 19px;
            margin-bottom: 7px;
            padding: 1px 0;
        }

        .jh-dasa-list.is-dense .jh-dasa-row {
            margin-bottom: 6px;
        }

        .jh-dasa-row.is-selected {
            outline: 1px solid #a92770;
            outline-offset: -1px;
        }

        .jh-dasa-help {
            margin-top: 42px;
            font-size: 16px;
        }

        .jh-transits-body {
            min-height: 0;
            height: 100%;
            overflow: hidden;
        }

        .jh-transit-calendar-page {
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 10px 12px;
        }

        .jh-calendar-layout {
            display: grid;
            grid-template-columns: 54% 33%;
            gap: 26px;
            width: 100%;
        }

        .jh-calendar-left {
            width: 100%;
        }

        .jh-calendar-main-btn {
            display: block;
            width: 225px;
            margin-left: 19px;
        }

        .jh-calendar-hint {
            width: 340px;
            margin: 3px 0 22px;
            color: #a31962;
            text-align: left;
        }

        .jh-calendar-copy {
            margin-bottom: 7px;
            font-size: 13px;
        }

        .jh-calendar-date-row,
        .jh-calendar-time-row {
            display: grid;
            grid-template-columns: 47px 110px 82px 82px;
            align-items: end;
            gap: 8px;
            margin-bottom: 7px;
        }

            .jh-calendar-date-row label,
            .jh-calendar-time-row label,
            .jh-calendar-right label,
            .jh-calendar-zone-row label {
                display: flex;
                flex-direction: column;
                gap: 3px;
                text-align: center;
            }

            .jh-calendar-date-row .jh-classic-field,
            .jh-calendar-time-row .jh-classic-field,
            .jh-calendar-zone-row .jh-classic-field {
                width: 100%;
            }

        .jh-calendar-number-row {
            display: grid;
            grid-template-columns: 238px 84px 1fr;
            align-items: center;
            gap: 8px;
            margin: 27px 0 15px;
        }

            .jh-calendar-number-row.is-days {
                margin: 0 0 20px;
            }

        .jh-calendar-items {
            width: 532px;
            margin: 0;
            padding: 8px 13px 10px;
            border: 1px solid #9f9f9f;
        }

            .jh-calendar-items legend {
                width: auto;
                margin: 0;
                padding: 0 4px;
                color: #a31962;
                font-size: 13px;
            }

        .jh-calendar-items-title {
            margin-bottom: 10px;
            text-align: center;
        }

        .jh-calendar-checks {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 9px 26px;
        }

            .jh-calendar-checks label {
                display: flex;
                align-items: center;
                gap: 6px;
                white-space: nowrap;
            }

        .jh-calendar-right {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

            .jh-calendar-right > label {
                width: 225px;
            }

        .jh-calendar-chart-select {
            width: 225px;
        }

        .jh-calendar-zone-label {
            width: 225px;
            margin-top: 5px;
            text-align: center;
        }

        .jh-calendar-zone-row {
            display: grid;
            grid-template-columns: 45px 45px 106px;
            align-items: end;
            gap: 8px;
        }

        .jh-calendar-zone-select {
            width: 106px;
        }

        .jh-special-search-page {
            display: grid;
            grid-template-columns: 58% 42%;
            grid-template-rows: 56.5% 43.5%;
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .jh-special-controls {
            min-width: 0;
            overflow: hidden;
            padding: 12px 12px 5px;
            border-right: 3px ridge #d2d2d2;
            border-bottom: 3px ridge #d2d2d2;
        }

        .jh-special-main-btn {
            display: block;
            width: 225px;
            margin-bottom: 3px;
        }

        .jh-special-controls > .jh-classic-hint {
            width: 225px;
            margin-bottom: 10px;
        }

        .jh-special-exact-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 17px 0 12px;
        }

        .jh-special-planet {
            width: 101px;
        }

        .jh-special-degree-row {
            display: grid;
            grid-template-columns: 42px 28px 42px 28px 50px 27px 102px;
            align-items: center;
            gap: 5px;
            margin-bottom: 22px;
        }

            .jh-special-degree-row .jh-classic-field {
                width: 100%;
            }

        .jh-special-radio-grid {
            display: grid;
            grid-template-columns: 140px 160px 18px 100px;
            align-items: center;
            gap: 8px 7px;
            margin-left: 26px;
        }

            .jh-special-radio-grid label {
                white-space: nowrap;
            }

        .jh-special-long-select,
        .jh-special-saham {
            width: 100%;
        }

        .jh-special-saham {
            grid-column: 2/5;
            width: 236px;
        }

        .jh-special-before-row {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 17px 0 4px;
        }

            .jh-special-before-row .jh-classic-field {
                width: 110px;
            }

        .jh-special-date-area .jh-date-time-grid {
            margin-top: 0;
        }

        .jh-special-planets,
        .jh-special-info,
        .jh-special-transit-table {
            min-width: 0;
            min-height: 0;
            overflow: auto;
            background: var(--jh-cream);
        }

        .jh-special-planets {
            border-bottom: 3px ridge #d2d2d2;
        }

        .jh-special-info {
            border-right: 3px ridge #d2d2d2;
        }

            .jh-special-info .jh-info-panel {
                height: 100%;
                padding: 12px 14px;
                border-right: 0;
            }

            .jh-special-info .jh-info-list {
                font-size: 16px;
                row-gap: 9px;
            }

            .jh-special-info .jh-section-title {
                margin-bottom: 18px;
                font-size: 24px;
            }

        .jh-compact-planet-table,
        .jh-transit-compact-table {
            font-size: 16px;
        }

            .jh-compact-planet-table td,
            .jh-transit-compact-table td {
                height: 23px;
            }

        .jh-special-transit-table .jh-transit-reference {
            padding: 20px 8px 5px;
        }

        .jh-longitude-page {
            display: grid;
            grid-template-rows: 211px minmax(0,1fr);
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .jh-longitude-controls {
            display: grid;
            grid-template-columns: 40% 60%;
            gap: 15px;
            overflow: hidden;
            padding: 7px 12px 4px;
            border-bottom: 3px ridge #d2d2d2;
        }

        .jh-longitude-button-row {
            display: grid;
            grid-template-columns: 270px 180px;
            align-items: start;
            gap: 20px;
        }

        .jh-longitude-main-btn {
            height: 43px;
            width: 270px;
        }

        .jh-longitude-button-row label {
            text-align: center;
        }

        .jh-longitude-varga {
            width: 178px;
            margin-top: 3px;
        }

        .jh-longitude-hint {
            width: 270px;
            margin: 2px 0 7px;
            text-align: center;
        }

        .jh-longitude-copy {
            margin-bottom: 2px;
        }

        .jh-longitude-date-zone {
            display: grid;
            grid-template-columns: 340px 120px;
            align-items: end;
            gap: 10px;
        }

            .jh-longitude-date-zone .jh-date-time-grid {
                grid-template-columns: 45px 78px 72px 78px;
                margin-top: 0;
            }

        .jh-longitude-zone {
            text-align: center;
        }

        .jh-longitude-zone-fields {
            display: grid;
            grid-template-columns: 44px 44px;
            gap: 8px;
            margin: 3px 0;
        }

            .jh-longitude-zone-fields label {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }

        .jh-longitude-zone .jh-classic-field {
            width: 100%;
        }

        .jh-longitude-options {
            overflow: hidden;
        }

        .jh-research-btn {
            width: 316px;
            margin-bottom: 9px;
        }

        .jh-longitude-option {
            display: grid;
            grid-template-columns: 18px minmax(0,1fr) 45px;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
        }

            .jh-longitude-option .jh-classic-field {
                width: 45px;
            }

        .jh-longitude-results {
            min-height: 0;
            overflow: auto;
            background: var(--jh-cream);
        }

        .jh-longitude-table {
            min-width: 1015px;
            font-size: 16px;
        }

            .jh-longitude-table td {
                height: 23px;
            }

        .jh-angular-page {
            display: grid;
            grid-template-columns: 54% 46%;
            grid-template-rows: 49% 51%;
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .jh-angular-controls {
            display: grid;
            grid-template-columns: 56% 44%;
            gap: 18px;
            min-height: 0;
            overflow: auto;
            padding: 10px 12px;
            border-right: 3px ridge #d2d2d2;
            border-bottom: 3px ridge #d2d2d2;
        }

        .jh-angular-main-btn {
            display: block;
            width: 184px;
            margin: 0 auto 3px;
        }

        .jh-angular-main > .jh-classic-hint {
            margin-bottom: 20px;
        }

        .jh-angular-copy {
            margin: 0 0 7px 58px;
        }

        .jh-angular-between-row {
            display: grid;
            grid-template-columns: 120px 28px 120px;
            align-items: center;
            gap: 8px;
        }

        .jh-angular-before-row {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 13px 0 6px 8px;
        }

            .jh-angular-before-row .jh-classic-field {
                width: 112px;
            }

        .jh-angular-date .jh-date-time-grid {
            margin-top: 0;
        }

        .jh-angular-zone {
            display: grid;
            grid-template-columns: 75px 45px 45px 110px;
            align-items: center;
            gap: 6px;
            margin-top: 7px;
        }

            .jh-angular-zone .jh-classic-field {
                width: 100%;
            }

        .jh-angular-links {
            height: fit-content;
            margin: 0;
            padding: 8px 11px 11px;
            border: 1px solid #aaa;
        }

            .jh-angular-links legend {
                width: auto;
                margin: 0;
                padding: 0 4px;
                color: #a31962;
                font-size: 13px;
            }

        .jh-angular-links-copy {
            margin-bottom: 5px;
            text-align: center;
            line-height: 1.2;
        }

        .jh-angular-links .jh-classic-btn {
            display: block;
            width: 185px;
            margin: 0 auto 2px;
        }

        .jh-angular-bav,
        .jh-angular-info,
        .jh-angular-planets {
            min-width: 0;
            min-height: 0;
            overflow: auto;
            background: var(--jh-cream);
        }

        .jh-angular-bav {
            border-bottom: 3px ridge #d2d2d2;
        }

        .jh-angular-info {
            border-right: 3px ridge #d2d2d2;
        }

            .jh-angular-info .jh-info-panel {
                height: 100%;
                border-right: 0;
            }

        .jh-prasna-page {
            display: grid;
            grid-template-columns: 280px 270px;
            align-content: start;
            gap: 14px;
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 11px 12px;
        }

        .jh-prasna-back {
            display: block;
            width: 183px;
            margin: 0 auto 3px;
        }

        .jh-prasna-left > .jh-classic-hint {
            margin-bottom: 28px;
        }

        .jh-prasna-action {
            margin-bottom: 21px;
        }

        .jh-prasna-copy {
            margin-bottom: 8px;
            line-height: 1.18;
        }

        .jh-prasna-action-row {
            display: grid;
            grid-template-columns: 70px 156px;
            gap: 8px;
            margin-left: 17px;
        }

            .jh-prasna-action-row .jh-classic-field {
                width: 70px;
            }

        .jh-prasna-fieldset {
            margin: 36px 0 0;
            padding: 10px 12px;
            border: 1px solid #aaa;
        }

            .jh-prasna-fieldset legend {
                width: auto;
                margin: 0;
                padding: 0 4px;
                color: #a31962;
                font-size: 13px;
            }

            .jh-prasna-fieldset label {
                display: block;
                margin-bottom: 13px;
                line-height: 1.15;
            }

        .jh-prasna-compression {
            margin-top: 33px;
        }

        .jh-prasna-compress-check {
            margin-left: 17px;
        }

        .jh-prasna-compress-row {
            display: grid;
            grid-template-columns: 100px 104px;
            align-items: center;
            gap: 6px;
            margin-left: 17px;
        }

            .jh-prasna-compress-row .jh-classic-field {
                width: 104px;
            }

        .jh-panchanga-page {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #efffff;
        }

        .jh-panchanga-scroll {
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 10px 4px 8px 0;
            color: #d13c7c;
            font: 17px/1.55 Georgia, 'Times New Roman', serif;
        }

        .jh-panchanga-day {
            display: grid;
            grid-template-columns: 205px 990px;
            width: 1195px;
            margin-bottom: 14px;
        }

            .jh-panchanga-day h2 {
                margin: 0;
                color: #c72f75;
                font-size: 23px;
                font-weight: 700;
                line-height: 1.25;
            }

        .jh-panchanga-intro {
            margin-bottom: 7px;
        }

        .jh-panchanga-hours,
        .jh-panchanga-chogh {
            display: grid;
            grid-template-columns: 95px 1fr;
            gap: 0;
            margin-bottom: 7px;
        }

        .jh-panchanga-label span {
            display: inline-block;
            margin-top: 2px;
        }

        .jh-panchanga-hours-grid {
            display: grid;
            grid-template-columns: repeat(6, 115px);
            grid-auto-rows: 30px;
        }

        .jh-panchanga-chogh-grid {
            display: grid;
            grid-template-columns: repeat(4, 150px);
            grid-auto-rows: 30px;
        }

        .jh-laghu-page {
            width: 100%;
            height: 100%;
            overflow: auto;
            background: var(--jh-cream);
        }

        .jh-laghu-table {
            width: 1214px;
            font-size: 17px;
        }

            .jh-laghu-table th,
            .jh-laghu-table td {
                height: 23px;
                padding: 1px 7px;
            }


        /* scrollbars and theme isolation */
        #JHoraApp ::-webkit-scrollbar {
            width: 17px;
            height: 17px
        }

        #JHoraApp ::-webkit-scrollbar-track {
            background: #eee;
            border-left: 1px solid #aaa
        }

        #JHoraApp ::-webkit-scrollbar-thumb {
            min-height: 40px;
            background: #c6c6c6;
            border: 1px solid #898989;
            box-shadow: inset 1px 1px #efefef,inset -1px -1px #aaa
        }

        html.dark #JHoraApp, body.dark #JHoraApp, [data-bs-theme="dark"] #JHoraApp {
            color: #111 !important;
            background: #dedede !important
        }

            html.dark #JHoraApp .jh-classic-panel, body.dark #JHoraApp .jh-classic-panel, [data-bs-theme="dark"] #JHoraApp .jh-classic-panel {
                color: #a31962 !important;
                background: #e4dac9 !important
            }

        @media(max-width:1200px) {
            .jhora-browser-frame {
                overflow-x: auto
            }

            #JHoraApp {
                width: 1180px
            }
        }

        @media(max-width:767.98px) {
            #JHoraApp {
                height: 720px
            }
        }