@import url(chota.css);

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK&family=Roboto&display=swap');

@font-face {
    font-family: 'gotham-rounded-medium';
    src: url('/fonts/GothamRoundedMedium_21022.ttf');
}

@font-face {
    font-family: 'gotham-rounded-light';
    src: url('/fonts/GothamRoundedLight_21020.ttf');
}

:root {
    /*--color-primary: #506487;*/
    --color-primary: #5064a2;
    --font-family-mono:  "gotham-rounded-light", sans-serif;
    --font-family-sans:  "gotham-rounded-light", "Noto Sans HK", sans-serif;
    --grid-maxWidth: 100%;
}

html {
    scroll-behavior: smooth;
}

nav.main {
    background-color: #1f2733;
    /* border-bottom: 1px solid #f8f8f8; */
    /* min-height: 104px !important; */
    height: 104px !important;
    top: -2px;
}

nav.main-bb {
    border-bottom: 1px solid #f8f8f8;
}

nav.main-clear {
    /* background-color: none; */
    height: 104px !important;
    top: -2px;
}

div.landing2-card {
    /* cursor: pointer; */
    border-radius: 15px;
    min-width: 250px;
    max-width: 250px;
}

a.sel-lang-button {
    color: #758db8
}

div.diff-card {
    border-radius: 15px;
}

div.block-card {
    border-radius: 0px;
}

div.valuations-list-nav {
    height: 100%;
    width: 250px; /* to change */
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.2s;
    background-color: #f3f3f3;
}

div.intra-val-nav {
    background-color: #1f2733;
    height: 100%;
    width: 250px; /* to change */
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.2s;
}

div.right-bit {
    height: 100%;
    overflow-y: hidden;
    /* position: fixed; */
}

div.menu-row {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    margin: 0px;
    border-top: 1px solid #888888;
    color: #ffffff;
    cursor: pointer;
    /* border-bottom: 1px solid #888888; */
}

div.menu-row-active {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    border-top: 1px solid #888888;
    /* border-bottom: 1px solid #888888; */
    background-color: #ffffff;
    color: #000000;
}

div.val-menu-col {
    margin: 0px;
}

div.valuations-list {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /*scrollbar-width: thin;*/
}

/*
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #ffffff;
}

::-webkit-scrollbar-thumb {
    background: #bbbbbb;
}
*/

/* div.valuations-list:hover {
    overflow-y: scroll;
} */

body {
    background-color: #1f2733;
    /* background-image: linear-gradient(#dddddd, #f3f3f3); */
    background-attachment: fixed;
    height: 100%;
}

div.vertical-menu {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 5px;
    box-shadow: 0px 2px 2px grey;
    padding: 10px;
    width: 250px;
    float: right;
    z-index:100;
}

.menu-item {
    width: 100%;
}

.valtab {
    background-color: #e2e3e5;
    /* background-color: #f3f3f3; */
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tvaltab {
    background-color: #e2e3e5;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    min-height: 220px;
    max-width: 640px;
    font-size: large;
}

.vtabhead-row {
    text-align: center;
}

.vtabhead-col {
    text-align: center;
    /* max-width: 62px; */
}

.vtabdatarow {
}

.vtabdata {
    background-color: #fefefe;
    text-align: center;
    border-radius: 12px;
    /*max-width: 62px;*/
    max-width: 72px;
    height: 25px;
}

.vtabdata0 {
    /*max-width: 62px;*/
    max-width: 72px;
    height: 25px;
}

.vtabpdata {
    /*background-color: #fefefe;*/
    text-align: center;
    /*color: #aaaaaa;*/
    font-size: small;
    /*max-width: 62px;*/
    max-width: 72px;
    height: 25px;
    line-height: 25px;
}

.dim {
    color: #aaaaaa;
}

.very-dim {
    color: #dd0000 !important;
}

.smalldim {
    color: #555555;
    font-size: small;
}

.print {
    font-size: x-small;
    margin-top: 0px;
    margin-bottom: 0px;
}

.dashed {
    border-top: dashed 1px;
}

.ps-state {
    font-weight: bold;
}

.subtotal {
    background-color: #f3f3f3;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
}

.subtotalrow {
    /*min-height: 40px;*/
    padding-top: 0px;
    padding-bottom: 0px;
}

.summary-section {
    /* background-color: #f5f5f5; */
    background-color: #e2e3e5;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0 10px 0;
}

.mono {
    font-family: monospace;
}

.summary-button {
    width: 140px;
    border-radius: 32px;
    font-size: 18px;
}

.rounded-button {
    border-radius: 32px;
    font-size: 18px;
}

.open-val-button, .create-new-val-button {
    border-radius: 32px;
    font-size: 18px;
    width: 180px;
}

.adv-analysis-button {
    border-radius: 32px;
    width: 180px;
    font-size: 18px;
    padding: 10px 10px 10px 10px;
}

.set-val2-button {
    border-radius: 32px;
    font-size: 18px;
    width: 180px;
    height: 60px;
    margin-left: 0px !important;
}

.summary-cts-table {
    padding: 0px;
    margin: 0px;
}

.small-val-code {
    font-family: monospace;
    font-size: x-small;
    color: grey;
}

.lean-table {
    padding: 0px;
    margin: 0px;
}

.val-list-row {
    background-color: #f3f3f3;
    padding: 8px 20px 8px 25px;
    margin: 15px 0px 15px 0px;
    border-radius: 0px;
    overflow: show;
    z-index: 9;
}

.dir-list {
    /* background-color: #fff8f8; */
}

.active-val {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.25);
    z-index:10;
    position: relative;
    overflow: show;
}

.summary-totals-row {
    background-color: #efefef;
    padding: 15px 2px 8px 2px;
    margin: 10px 0px 10px 0px;
    border-radius: 10px;
}

.summary-subtotals-row {
    padding: 7px 2px 1px 2px;
}

.section-totals-row {
    background-color: #636363;
    color: #ffffff;
    padding: 15px 2px 8px 2px;
    margin: 10px 0px 10px 0px;
    border-radius: 10px;
}

.valuation-meta {
    background-color: #fafaf3;
}

.specials-row-group {
    background-color: #eeeeee;
    padding: 15px 5px 8px 5px;
    margin: 10px 0px 10px 0px;
    border-radius: 10px;
}

button.hm, a.hm {
    min-height: 70px;
    border-radius: 32px;
    width: 180px;
    font-size: 18px;
    padding: 10px 10px 10px 10px;
}

a.nav {
    color: #ffffff !important;
    font-size: xx-large;
}

a.dashboard {
    width: 300px;
}

button.dashboard, a.dashboard {
    width: 300px;
    border-radius: 32px;
    font-size: 20px;
    padding: 16px 20px 16px 20px;
}

button.narrow {
    padding-left: 10px;
    padding-right: 10px;
}

span.nav-val-title {
    color: #ffffff !important;
    font-size: xx-large;
}

span.nav-sec-name {
    color: #ffffff !important;
    font-size: x-large;
}

table.hm {
    table-layout: fixed;
    word-wrap: break-word;
    background-color: #eeeeee;
    border-radius: 8px;
    line-height: 8px;
    font-size: 9px;
    text-align: center;
    padding: 4px;
    box-shadow: 2px 2px #dddddd;
}

th.hm { padding: 1px; }

td.hm0 { background-color: #f8f8f8; border: 1px solid #ffffff; padding: 2px; }
td.hm1 { background-color: #dfa3a3; border: 1px solid #ffffff; padding: 2px; }
td.hm2 { background-color: #ba6262; border: 1px solid #ffffff; padding: 2px; }
td.hm3 { background-color: #a54949; border: 1px solid #ffffff; padding: 2px; }
td.hm4 { background-color: #943434; border: 1px solid #ffffff; padding: 2px; }
td.hm5 { background-color: #812323; border: 1px solid #ffffff; padding: 2px; }
td.hm6 { background-color: #751010; border: 1px solid #ffffff; padding: 2px; }
td.hm7 { background-color: #640707; border: 1px solid #ffffff; padding: 2px; }
td.hm8 { background-color: #4a0b0b; border: 1px solid #ffffff; padding: 2px; }
td.hm9 { background-color: #380c0c; border: 1px solid #ffffff; padding: 2px; }
td.hm10 { background-color: #2f0606; border: 1px solid #ffffff; padding: 2px; }

/* td.hm0 { background-color: #ffffff; border: 1px solid #ffffff; padding: 2px; }
td.hm0 { background-color: #edd9d9; border: 1px solid #ffffff; padding: 2px; }
td.hm1 { background-color: #eeffee; border: 1px solid #ffffff; padding: 2px; }
td.hm2 { background-color: #eeddee; border: 1px solid #ffffff; padding: 2px; }
td.hm3 { background-color: #eeccee; border: 1px solid #ffffff; padding: 2px; }
td.hm4 { background-color: #eeaaee; border: 1px solid #ffffff; padding: 2px; }
td.hm5 { background-color: #ee88ee; border: 1px solid #ffffff; padding: 2px; }
td.hm6 { background-color: #ee55ee; border: 1px solid #ffffff; padding: 2px; }
td.hm7 { background-color: #ee44ee; border: 1px solid #ffffff; padding: 2px; }
td.hm8 { background-color: #ee33ee; border: 1px solid #ffffff; padding: 2px; }
td.hm9 { background-color: #ee22ee; border: 1px solid #ffffff; padding: 2px; }
td.hm10 { background-color: #aa0033; border: 1px solid #ffffff; padding: 2px; } */

details.create-new > summary::-webkit-details-marker {
    display: none;
}

details.no-arrow > summary::-webkit-details-marker {
    display: none;
}

input.bb, textarea.bb {
    border-top-style: hidden !important;
    border-left-style: hidden !important;
    border-right-style: hidden !important;
}

button.val-item {
    padding: 5px;
}

.breadcrumb {
    font-size: x-large;
}

img.help-img {
    display: block;
    height: auto;
    width: auto;
    /* max-width: 100%;
    max-height: 100%; */
}

div.loading {
    transition: 1.5s linear;
}
div.loading2 {
    transition: 6s linear;
}
div.loading-invis {
    opacity: 0;
}

.overview-edit {
    font-size: 20px !important;
}

table.guide-cell-1 {
    height: 300px;
    display: flex;
    align-content: top;
}
tr.guide-cell-1 {
    height: 120px;
    display: flex;
    align-content: top;
    padding: 0;
}
td.guide-cell-1 {
    height: 120px;
    display: flex;
    align-content: top;
    padding: 0;
}

tr.guide-cell-2 {
    height: 180px;
    display: flex;
    align-content: top;
    padding: 0;
}
td.guide-cell-2 {
    height: 180px;
    display: flex;
    align-content: top;
    padding: 0;
}

table.guide-cell-3 {
    height: 240px;
    display: flex;
    align-content: top;
}
tr.guide-cell-3 {
    height: 240px;
    display: flex;
    align-content: top;
    padding: 0;
}
td.guide-cell-3 {
    height: 240px;
    display: flex;
    align-content: top;
    padding: 0;
}

table.guide-cell-4 {
    height: 420px;
    display: flex;
    align-content: top;
}
tr.guide-cell-4 {
    height: 300px;
    display: flex;
    align-content: top;
    padding: 0;
}
td.guide-cell-4 {
    height: 300px;
    display: flex;
    align-content: top;
    padding: 0;
}

button.guide {
    background-color: #8ba4ce;
    color: #ffffff;
    font-size: 20px;
}
button.guide-active {
    background-color: #ffffff;
    color: #000000;
    font-size: 20px;
}

div.acol1 {
    min-width: 620px !important;
    max-width: 620px !important;
    min-height: 199px !important;
}
div.acol2 {
    min-width: 230px !important;
    max-width: 230px !important;
    min-height: 199px !important;
}
div.acol3 {
    min-height: 199px !important;
}
div.acol4 {
    min-width: 290px !important;
    max-width: 290px !important;
    max-height: 199px !important;
}

@media screen {
    div.footer: display: none;
}

@media print {
    .pagebreak {
        page-break-before: always !important;
    }
    div.footer {
        position: fixed;
        width: 100%;
        text-align: center;
        bottom: 0;
    }
    .tvaltab {
        break-before: always !important;
    }
    .no-print { display: none !important; }
}

div.ppreset {
    counter-reset: ppage;
}

div.pnum {
    /* position: fixed; */
    width: 90%;
    text-align: right;
    bottom: 0;
}
div.pnum::before {
    counter-increment: ppage;
    content: "Page " counter(ppage) ". " ;
}

div.red {
    color: #cc0000;
}
div.blue {
    color: #0000aa;
}
div.black {
    color: #000000;
}