/*

Custom CSS

*/


/* 300->400 */
.x-root {
    font: 400 14px/1.25 '-apple-system', 'Helvetica Neue', helvetica, arial, sans-serif;
}

:root {
	/* --base-color: #35baf6; moving to ios theme blue */
	--base-color: #007aff;
    --base-gray: #ADB3B8;

	--panel-navigation-background-color: #32404e;
	--panel-navigation-item-line-height: 54px;
	--panel-navigation-item-text-color: #ADB3B8;

	--main-nav-width: 220px;
	--main-nav-width-negative: -220px;
	--main-nav-collapsed-width: 64px;
    --main-toolbar-height: 65px;
	--main-phone-toolbar-height: 56px;

	--dashboard-item-spacing: 20px;
}

/* For clickable areas */
.hb-clickable:hover {
    color: var(--base-color) !important;
    font-weight: bold;
    cursor: pointer;
}

/* For disabled components we want to show full color (here a checkbox) */
.x-field.x-disabled.hb-disabled-no-opacity > .x-label-el {
    opacity: 1;
}
.x-checkboxfield.x-disabled.hb-disabled-no-opacity .x-icon-el {
    color: revert;
}
.x-checkboxfield.x-checked.hb-disabled-no-opacity .x-icon-el {
    color: #007aff;
}
.x-field.x-disabled.hb-disabled-no-opacity > .x-body-wrap-el {
    opacity: 1;
}

.auth-login {
    background-size: cover;
    /* from pixabay */
    background-image: url(images/login-background.jpg);
    background-position: center
}

.auth-login .auth-header {
    color: white;
    text-align: center;
    padding: 16px
}

.auth-login .auth-header a {
    color: white;
    text-decoration: none
}

.auth-login .auth-header .title,.auth-login .auth-header .caption {
    white-space: nowrap
}

.auth-login .auth-header .title {
    font-size: 31px;
    font-weight: bold
}

.auth-login .auth-header .caption {
    font-size: 15px;
    text-transform: uppercase
}

.x-panel-auth {
    background-color: transparent
}

.x-panel-auth-body-el {
    padding: 24px;
    background-color: rgba(18, 61, 64, 0.25);
    color: white
}

.x-checkboxfield-remember .x-icon-el, .x-checkboxfield-remember .x-box-label-el {
    color: white;
}

.x-checkboxfield-remember.x-checked .x-icon-el, .x-checkboxfield-remember .x-box-label-el {
    color: white;
}

.x-button-auth, .x-button-auth .x-icon-el {
    color: white;
}

.main-nav-container {
    width: var(--main-nav-width);
    transition: width 0.3s;
}

.main-nav-collapsed {
    width: var(--main-nav-collapsed-width);
}

.main-nav-floated {
    transition: left 0.3s;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 10;
}

.main-nav-slid-out {
    left: var(--main-nav-width-negative);
}

.main-logo-container {
    /* background-color: var(--base-color); */
    background-color: var(--panel-navigation-background-color);
    height: var(--main-toolbar-height);
}

.phone .main-logo-container, .phone .main-toolbar {
    height: var(--main-phone-toolbar-height);
}

.main-logo {
    width: var(--main-nav-collapsed-width);
    content: " ";
    background-image: url(images/logo.png);
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
}

.main-appname {
    line-height: var(--main-toolbar-height);

    font-size: 16px;
    color: #fff;

    overflow: hidden;
    white-space: nowrap;
}

.phone .main-appname {
    line-height: var(--main-phone-toolbar-height);
}

.username-version {
    background-color: var(--panel-navigation-background-color);
    padding: 5px 0 5px 5px;
    color: var(--panel-navigation-item-text-color);
    font-size: 70%;
    padding-right: 10px;
}

.version-label {
    text-align: right;
}

.main-toolbar {
    height: var(--main-toolbar-height);
    border: none;
    padding: 0 10px 0 0;
    /* to keep shadow visible when a top toolbar is shown in body, as they would have same z-index so hiding the shadow */
    z-index: 100;
}

.main-toolbar > .x-body-el {
    padding: 0;
}

.main-nav-mask > .x-mask-inner {
    display: none;
}

.x-treelist-nav {
    background-color: var(--panel-navigation-background-color);
    background-position: 44px 0%;
    padding: 0 0 0 0
}

.x-treelist-nav .x-treelist-toolstrip {
    background-color: var(--panel-navigation-background-color)
}

.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool {
    color: var(--panel-navigation-item-text-color);
    background-color: #475360;
}

.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool:after {
    height: var(--panel-navigation-item-line-height);
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 5px;
    background-color: var(--base-color)
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row {
    background-color: #475360
}

.x-treelist-nav .x-treelist-item-tool {
    padding-left: 10px;
    padding-right: 10px
}

.x-treelist-nav .x-treelist-item-tool-floated:after {
    height: var(--panel-navigation-item-line-height);
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 5px;
    background-color: var(--base-color)
}

.x-treelist-nav .x-treelist-item-icon:before,.x-treelist-nav .x-treelist-item-tool:before,.x-treelist-nav .x-treelist-item-expander {
    line-height: var(--panel-navigation-item-line-height)
}

.x-treelist-nav .x-treelist-item-icon,.x-treelist-nav .x-treelist-item-tool,.x-treelist-nav .x-treelist-item-expander {
    text-align: center;
    background-repeat: no-repeat;
    background-position: 0 center
}

.x-treelist-nav .x-treelist-item-loading .x-treelist-item-icon {
    background-image: url(images/tree/loading.gif);
    color: transparent
}

.x-treelist-nav .x-treelist-item-icon,.x-treelist-nav .x-treelist-item-tool {
    color: var(--panel-navigation-item-text-color);
    font-size: 18px;
    width: 44px
}

.x-treelist-nav .x-treelist-item-tool {
    width: var(--panel-navigation-item-line-height)
}

.x-treelist-nav .x-treelist-item-expander {
    color: #fff;
    font-size: 16px;
    width: 24px
}

.x-treelist-nav .x-treelist-item-text {
    color: var(--panel-navigation-item-text-color);
    margin-left: 50px;
    margin-right: 24px;
    font-size: 14px;
    line-height: var(--panel-navigation-item-line-height)
}

.x-treelist-nav .x-treelist-row {
    padding-left: 10px;
    padding-right: 10px
}

.x-treelist-nav .x-treelist-row-over:before,.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%
}

.x-treelist-nav .x-treelist-row-over:before {
    background-color: transparent
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row-over:before {
    background-color: #57c6f8
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before {
    background-color: var(--base-color)
}

.x-treelist-nav .x-treelist-item-floated .x-treelist-container {
    width: auto
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row {
    background-color: var(--panel-navigation-background-color)
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-container {
    margin-left: -10px
}

.x-big .x-treelist-nav .x-treelist-item-floated > .x-treelist-container {
    margin-left: -10px
}

.x-treelist-nav .x-treelist-item-floated > * > * > .x-treelist-item-text {
    margin-left: 0
}

.x-treelist-nav .x-treelist-item-floated > * .x-treelist-row {
    cursor: pointer;
    padding-left: 0
}

.x-treelist-nav .x-treelist-item-floated .x-treelist-row:before {
    width: 0
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over {
    background-color: var(--panel-navigation-background-color)
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
    color: var(--panel-navigation-item-text-color)
}

.x-treelist-nav .x-treelist-item-expanded {
    background-color: #2c3845
}

.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon {
    color: #fff
}

.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text {
    color: #d6d9dc
}

.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander {
    color: #fff
}

.x-treelist-nav .x-treelist-row-over {
    background-color: #3c4a57
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-icon {
    color: #fff
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-text {
    color: #d6d9dc
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-expander {
    color: #fff
}

.x-treelist-nav .x-treelist-expander-first .x-treelist-item-icon {
    left: 24px
}

.x-treelist-nav .x-treelist-expander-first .x-treelist-item-text {
    margin-left: 74px;
    margin-right: 0
}

.x-treelist-nav .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 27px
}

.x-treelist-nav .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 3px
}

.dashboard > .x-body-el {
    padding: var(--dashboard-item-spacing) 0 0 var(--dashboard-item-spacing);
}

.dashboard-item {
    margin: 0 var(--dashboard-item-spacing) var(--dashboard-item-spacing) 0;
    float: left;
    width: calc(100% - var(--dashboard-item-spacing));
}

.dashboard-item.last-in-row {
    margin-right: 0
}

@media (max-width: 399px) {
    .very-small-100-width {
        width: calc(100% - var(--dashboard-item-spacing))
    }
    .very-small-66-width {
        width: calc(66.6% - var(--dashboard-item-spacing))
    }
    .very-small-60-width {
        width: calc(60% - var(--dashboard-item-spacing))
    }
    .very-small-50-width {
        width: calc(50% - var(--dashboard-item-spacing))
    }
    .very-small-40-width {
        width: calc(40% - var(--dashboard-item-spacing))
    }
    .very-small-33-width {
        width: calc(33.3% - var(--dashboard-item-spacing))
    }
    .very-small-30-width {
        width: calc(30% - var(--dashboard-item-spacing))
    }
    .very-small-25-width {
        width: calc(25% - var(--dashboard-item-spacing))
    }
    .very-small-20-width {
        width: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (max-height: 399px) {
    .very-small-100-height {
        height: calc(100% - var(--dashboard-item-spacing))
    }
    .very-small-66-height {
        height: calc(66.6% - var(--dashboard-item-spacing))
    }
    .very-small-60-height {
        height: calc(60% - var(--dashboard-item-spacing))
    }
    .very-small-50-height {
        height: calc(50% - var(--dashboard-item-spacing))
    }
    .very-small-40-height {
        height: calc(40% - var(--dashboard-item-spacing))
    }
    .very-small-33-height {
        height: calc(33.3% - var(--dashboard-item-spacing))
    }
    .very-small-30-height {
        height: calc(30% - var(--dashboard-item-spacing))
    }
    .very-small-25-height {
        height: calc(25% - var(--dashboard-item-spacing))
    }
    .very-small-20-height {
        height: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (min-width: 400px) and (max-width: 759px) {
    .small-100-width {
        width: calc(100% - var(--dashboard-item-spacing))
    }
    .small-66-width {
        width: calc(66.6% - var(--dashboard-item-spacing))
    }
    .small-60-width {
        width: calc(60% - var(--dashboard-item-spacing))
    }
    .small-50-width {
        width: calc(50% - var(--dashboard-item-spacing))
    }
    .small-40-width {
        width: calc(40% - var(--dashboard-item-spacing))
    }
    .small-33-width {
        width: calc(33.3% - var(--dashboard-item-spacing))
    }
    .small-30-width {
        width: calc(30% - var(--dashboard-item-spacing))
    }
    .small-25-width {
        width: calc(25% - var(--dashboard-item-spacing))
    }
    .small-20-width {
        width: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (min-height: 400px) and (max-height: 768px) {
    .small-100-height {
        height: calc(100% - var(--dashboard-item-spacing))
    }
    .small-66-height {
        height: calc(66.6% - var(--dashboard-item-spacing))
    }
    .small-60-height {
        height: calc(60% - var(--dashboard-item-spacing))
    }
    .small-50-height {
        height: calc(50% - var(--dashboard-item-spacing))
    }
    .small-40-height {
        height: calc(40% - var(--dashboard-item-spacing))
    }
    .small-33-height {
        height: calc(33.3% - var(--dashboard-item-spacing))
    }
    .small-30-height {
        height: calc(30% - var(--dashboard-item-spacing))
    }
    .small-25-height {
        height: calc(25% - var(--dashboard-item-spacing))
    }
    .small-20-height {
        height: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (min-width: 760px) and (max-width: 1024px) {
    .medium-100-width {
        width:calc(100% - var(--dashboard-item-spacing))
    }
    .medium-66-width {
        width: calc(66.6% - var(--dashboard-item-spacing))
    }
    .medium-60-width {
        width: calc(60% - var(--dashboard-item-spacing))
    }
    .medium-50-width {
        width: calc(50% - var(--dashboard-item-spacing))
    }
    .medium-40-width {
        width: calc(40% - var(--dashboard-item-spacing))
    }
    .medium-33-width {
        width: calc(33.3% - var(--dashboard-item-spacing))
    }
    .medium-30-width {
        width: calc(30% - var(--dashboard-item-spacing))
    }
    .medium-25-width {
        width: calc(25% - var(--dashboard-item-spacing))
    }
    .medium-20-width {
        width: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (min-height: 769px) and (max-height: 1024px) {
    .medium-100-height {
        height: calc(100% - var(--dashboard-item-spacing))
    }
    .medium-66-height {
        height: calc(66.6% - var(--dashboard-item-spacing))
    }
    .medium-60-height {
        height: calc(60% - var(--dashboard-item-spacing))
    }
    .medium-50-height {
        height: calc(50% - var(--dashboard-item-spacing))
    }
    .medium-40-height {
        height: calc(40% - var(--dashboard-item-spacing))
    }
    .medium-33-height {
        height: calc(33.3% - var(--dashboard-item-spacing))
    }
    .medium-30-height {
        height: calc(30% - var(--dashboard-item-spacing))
    }
    .medium-25-height {
        height: calc(25% - var(--dashboard-item-spacing))
    }
    .medium-20-height {
        height: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (min-width: 1025px) {
    .big-100-width {
        width:calc(100% - var(--dashboard-item-spacing))
    }
    .big-66-width {
        width: calc(66.6% - var(--dashboard-item-spacing))
    }
    .big-60-width {
        width: calc(60% - var(--dashboard-item-spacing))
    }
    .big-50-width {
        width: calc(50% - var(--dashboard-item-spacing))
    }
    .big-40-width {
        width: calc(40% - var(--dashboard-item-spacing))
    }
    .big-33-width {
        width: calc(33.3% - var(--dashboard-item-spacing))
    }
    .big-30-width {
        width: calc(30% - var(--dashboard-item-spacing))
    }
    .big-25-width {
        width: calc(25% - var(--dashboard-item-spacing))
    }
    .big-20-width {
        width: calc(20% - var(--dashboard-item-spacing))
    }
}

@media (min-height: 1025px) {
    .big-100-height {
        height: calc(100% - var(--dashboard-item-spacing))
    }
    .big-66-height {
        height: calc(66.6% - var(--dashboard-item-spacing))
    }
    .big-60-height {
        height: calc(60% - var(--dashboard-item-spacing))
    }
    .big-50-height {
        height: calc(50% - var(--dashboard-item-spacing))
    }
    .big-40-height {
        height: calc(40% - var(--dashboard-item-spacing))
    }
    .big-33-height {
        height: calc(33.3% - var(--dashboard-item-spacing))
    }
    .big-30-height {
        height: calc(30% - var(--dashboard-item-spacing))
    }
    .big-25-height {
        height: calc(25% - var(--dashboard-item-spacing))
    }
    .big-20-height {
        height: calc(20% - var(--dashboard-item-spacing))
    }
}

/*
  Set height for panel innerhtml to 100% of panel,
  otherwise .net-something will not grow vertically to fit
*/
.dashboard-item .x-innerhtml {
    height: 100%;
}

.dashboard-item .net-something {
    display: flex;
    height: 100%;
}

.dashboard-item .net-something .main-side {
    flex-grow: 0.6;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dashboard-item .net-something .main-value {
    font-size: 28px;
    color: var(--base-color);
}

.dashboard-item .net-something .main-label {
    font-size: 12px;
    color: var(--base-gray);
    margin: 0px 0px 5px 0px;
}

.dashboard-item .net-something .second-main-value {
    font-size: 18px;
    color: var(--base-color);
}

.dashboard-item .net-something .second-main-label {
    font-size: 12px;
    color: var(--base-gray);
    margin: 0px;
}

.dashboard-item .net-something .secondary-side {
    flex-grow: 0.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dashboard-item .net-something .secondary-value {
    font-size: 14px;
    color: var(--base-color);
}

.dashboard-item .net-something .secondary-label {
    font-size: 10px;
    color: var(--base-gray);
    margin: 0px 0px 5px 0px;
}

.dashboard-item .net-something .secondary-label:last-child {
    margin: 0px;
}


.budgetallocated {
    font-weight: bold;
    color: var(--base-color);
}


.transactions-list .x-listitem .x-innerhtml {
    flex-grow: 1;
}

.transaction-item {
    display: flex;
    flex-direction: column;
}

.transaction-item .main {
    display: flex;
}

.transaction-item .date {
    flex: none;
    width: 70px;
    margin: 0px 5px 0px 0px;
}

.transaction-item .amount {
    flex: none;
    width: 70px;
    text-align: right;
    margin: 0px 10px 0px 0px;
}

.transaction-item .description {
    flex-grow: 1;
    margin: 0px 10px 0px 0px;
}

.transaction-item .attachments {
    flex: none;
    width: 20px;
    text-align: center;
}

.transaction-item .details {
    display: none;
}

.transactions-list.hb-expanded .transaction-item .details {
    display: block;
}

.transaction-item .inner-details {
    display: flex;
    margin: 10px 0px 0px 0px;
}

.transactions-list.hb-phone-tall .inner-details {
    flex-direction: column;
}

.postings-table {
    display: flex;
    flex-shrink: 0;
}

.postings-amounts {
    display: flex;
    flex-direction: column;
    text-align: right;
    width: 70px;
    margin: 0px 10px 0px 0px;
}

.postings-accounts {
    display: flex;
    flex: none;
    flex-direction: column;
}

.postings-comments {
    flex: auto;
    margin: 0px 0px 0px 20px;
    font-size: 14px;
    color: #9d9d9d;
}

.transactions-list.hb-phone-tall .postings-comments {
    margin: 10px 0px 0px 0px;
}

.posting-row {
    height: 1.3em;
}

.posting-row.hb-highlight {
    font-weight: bold;
}

.transaction-details .description {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0px 0px 0px;
}

.transaction-details .posting-amount .x-innerhtml {
    text-align: right;
}


/* For visualizing comments edited in textarea - eg preserving newlines */
.details-comments.x-displayfield .x-body-el {
    border: none;
}

.details-comments.x-displayfield .x-input-el {
    white-space: pre;  /* preserves newlines */
    text-wrap-mode: wrap;  /* wrap long lines */
    padding-top: 10px;
    padding-left: 0;
    font-size: 14px;
    color: #9d9d9d;
}


.budgets-list .x-listitem .x-innerhtml {
    flex-grow: 1;
}

.budget-item {
    display: flex;
    flex-direction: column;
}

.budget-item .date-amount-account {
    display: flex;
}

.budget-item .date {
    width: 50px;
    flex-shrink: 0;
    margin: 0px 5px 0px 0px;
}

.budget-item .amount {
    width: 70px;
    flex-shrink: 0;
    text-align: right;
    margin: 0px 10px 0px 0px;
}

.budget-item .account {
    flex-grow: 1;
}

.budget-item .description-row {
    display: flex;
    margin: 3px 0px 0px 0px;
}

.budget-item .description-filler {
    flex: 0 0 135px;
}

.budget-item .description {
    flex-grow: 1;
    color: #9d9d9d;
}


.attachments .x-listitem {
    width: 100%;
    padding: 5px;
    border-bottom: 1px solid #efeff4;
    height: 130px
}

.attachments .x-listitem:last-child {
    border-bottom: 0px
}

.attachments .x-listitem.x-selected {
    background-color: #efeff4
}

.attachments .x-listitem .img {
    display: inline-block;
    width: 84px;
    height: 119px;
    background-repeat: no-repeat;
    background-size: 104%;
    background-position: 50%;
    float: left;
    border-radius: 0
}

.attachments .x-listitem .content {
    vertical-align: top;
    margin-left: 100px;
    padding: 30px 0px 0px 20px
}

.attachments .x-listitem .content .description {
    font-size: 15px;
    /*font-weight: bold;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: text;
}

.attachments .x-listitem .content .originalfilename {
    color: #9d9d9d;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: text;
}

.attachment-preview {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.entities-list .x-listitem .x-innerhtml {
    flex-grow: 1;
}

.entity-item {
    display: flex;
}

.entity-item .name {
    flex: auto;
}

.entity-item .attachments {
    flex: none;
    width: 50px;
    text-align: center;
}

.entity-details .dates {
    margin: 10px 0px 0px 0px;
}


.account-details .dates {
    margin: 10px 0px 0px 0px;
}

.account-details .entity {
    margin: 10px 0px 0px 0px;
}

.account-details .created {
    font-size: 10px;
    margin: 10px 0px 0px 0px;
}


.budget-details .account-name {
    font-weight: bold;
}

.budget-details .date-amount {
    margin: 10px 0px 0px 0px;
}

.budget-details .description {
    font-size: 14px;
    color: #9d9d9d;
    margin: 10px 0px 0px 0px;
}

.calc-button {
    margin: 4px;
    font-size: larger;
}

.calc-expression {
    margin: 2px 8px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #007aff;
}

.calc-history-container {
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.12), 2px 2px 5px 0 rgba(0, 0, 0, 0.08);
    border-radius: 7px;
    padding: 4px;
}

.calc-history-container .x-listitem {
    color: #007aff;
}