@font-face {
  font-family: 'PTRootUIWebRegular';
  src: url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Regular/PT%20Root%20UI_Regular.eot');
  src:
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Regular/PT%20Root%20UI_Regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Regular/PT%20Root%20UI_Regular.woff2') format('woff2'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Regular/PT%20Root%20UI_Regular.woff') format('woff'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Regular/PT%20Root%20UI_Regular.ttf') format('truetype'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Regular/PT%20Root%20UI_Regular.svg#PTRootUIWeb-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PTRootUIWebBold';
  src: url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Bold/PT%20Root%20UI_Bold.eot');
  src:
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Bold/PT%20Root%20UI_Bold.eot?#iefix') format('embedded-opentype'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Bold/PT%20Root%20UI_Bold.woff2') format('woff2'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Bold/PT%20Root%20UI_Bold.woff') format('woff'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Bold/PT%20Root%20UI_Bold.ttf') format('truetype'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Bold/PT%20Root%20UI_Bold.svg#PTRootUIWeb-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PTRootUIWebLight';
  src: url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Light/PT%20Root%20UI_Light.eot');
  src:
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Light/PT%20Root%20UI_Light.eot?#iefix') format('embedded-opentype'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Light/PT%20Root%20UI_Light.woff2') format('woff2'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Light/PT%20Root%20UI_Light.woff') format('woff'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Light/PT%20Root%20UI_Light.ttf') format('truetype'),
       url('/fonts/PT Root UI_Web/Fonts/PT Root UI_Light/PT%20Root%20UI_Light.svg#PTRootUIWeb-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

/** General Layout **/
html {background: #F6F7F9; min-height: 100%; height: 100%;}
body {color: #242529; position: relative; font: 16px PTRootUIWebRegular; margin: 0; min-height: 100%; height: 100%;}
body.public-pages {background: #fff; height: auto; min-height: 100%;}

/*.wrraper {position: relative; width: 400px; margin: 0 auto; display: block; padding: 50px 0 0; }*/
.wrraper { margin: 0 0 0 240px; display: block;  min-height: 100%;  position: relative; padding-bottom: 80px; box-sizing: border-box;}

.clear {clear: both; height: 0; width: 0; line-height: 0; font-size: 0px;}
.h10 {height: 10px;}
.h15 {height: 15px;}
.h20 {height: 20px;}
.h25 {height: 25px;}
.hidden {display:none !important;}

h1 {font-size: 28px; line-height: 36px; padding: 22px 0; margin: 0 20px; border-bottom: 1px solid #DFE1E5;}
h1.center {text-align: center;}
h2 {font-size: 20px; line-height: 28px; padding: 0px 0 0px; margin: 0 20px;}

a {color: #257DB8;}
a:hover {text-decoration: none; color: #4998CC;}

.hidden-element {display: none !important;}
.hidden-element.show-must {display: inline-block !important;}

.action {/*text-decoration: none;*/}
.action:hover {cursor: pointer;}
.button {text-decoration: none; display: inline-block; background: #FD6A6D; color: #fff; padding: 7px 10px 7px 10px; border-radius: 20px; margin: 0px 0 0 0; vertical-align: middle;  border: 1px solid #FD6A6D;}
.button:hover {border: 1px solid #FD6A6D; background: #fff; color: #FD6A6D;}

h1 .selected-filter {width: auto; font-size: 16px; color: #868C98; font-weight: normal; line-height: 16px; display: none;}

.header-public {height: 64px; border-bottom: 1px solid rgba(200,203,208, 0.5);}
  .header-public .logotype {display: inline-block; padding: 12px 0 0 0;}
  .header-public ul {margin: 0; padding: 0; display: inline-block; float: right; }
    .header-public ul li {display: inline-block; list-style: none; line-height: 24px; padding: 0 0 0 24px; position: relative;}
    .header-public ul span {display: inline-block; padding: 20px 0; color: #242529; font-weight: bold;}
    .header-public ul li.selected span:before {content: " "; position: absolute; display: inline-block; width: calc(100% - 20px); height: 2px; background: #FA5D0F; bottom: -1px;}
    .header-public ul a {color: #5A5E66; text-decoration: none; display: inline-block; padding: 20px 0;}
    .header-public ul a:hover {color: #242529;}
.header-public .icon-public-menu {position: absolute; top: 7px; right: 20px; display: none;}
.content-public {max-width: 1200px; margin: 0 auto; display: block; padding: 0 20px;}
.content-public.footer-padding {padding-bottom: 152px;}
  .content-public .money-message {font-size: 40px; line-height: 52px; width: 600px;}
  .content-public strong {font-family: PTRootUIWebBold; font-weight: 500;}
  .content-public .moneybalance-strong {color: #943617;}
  .content-public .button-holder {padding: 24px 0 0;}
  .content-public .button-holder.centered {text-align: center;}
  .content-public .text-short {padding: 48px 100px 0; line-height: 24px;}

.footer-public {height: 152px; position: absolute; bottom: 0; background: #F6F7F9; display: block; width: 100%;}
  .footer-public .logotype {display: inline-block; padding: 24px 0 0 0;}
  .footer-public ul {margin: 0; padding: 12px 0 0; display: inline-block; position: absolute; left: calc(50% - 164px);}
    .footer-public ul li {display: inline-block; list-style: none; line-height: 24px; padding: 0 0 0 24px; position: relative;}
    .footer-public ul span {display: inline-block; padding: 20px 0; color: #242529; }
    .footer-public ul a {color: #242529; text-decoration: none; display: inline-block; padding: 20px 0;}
    .footer-public ul a:hover {color: #242529;}
  .footer-public .social-btn-holder {float: right; display: block; padding: 28px 0 0;}
    .footer-public .social-btn-holder .social-link {display: inline-block; width: 32px; height: 32px; margin-left: 24px; background: url(/images/icon/social-btn.svg) no-repeat 0px 0px;}
      .footer-public .social-btn-holder .social-link.social-fb {background-position: 0px 0px;}
      .footer-public .social-btn-holder .social-link.social-tw {background-position: -56px 0px;}
      .footer-public .social-btn-holder .social-link.social-youtube {background-position: -112px 0px;}
      .footer-public .social-btn-holder .social-link.social-inst {background-position: -168px 0px;}
      .footer-public .social-btn-holder .social-link.social-teleg {background-position: -224px 0px;}
      .footer-public .social-btn-holder .social-link.social-fb:hover {background-position: 0px -52px;}
      .footer-public .social-btn-holder .social-link.social-tw:hover {background-position: -56px -52px;}
      .footer-public .social-btn-holder .social-link.social-youtube:hover {background-position: -112px -52px;}
      .footer-public .social-btn-holder .social-link.social-inst:hover {background-position: -168px -52px;}
      .footer-public .social-btn-holder .social-link.social-teleg:hover {background-position: -224px -52px;}
  .footer-public .copyright-holder {position: absolute; bottom: 0; height: 56px; border-top: 1px solid #E9EAED; width: 100%; text-align: center; box-sizing: border-box; padding-top: 20px; font-size: 12px; line-height: 16px; color: #242529;}


.wrapper-public {padding: 80px 100px 80px; position: relative;}

.public-pages {}
  .public-pages h1 {font-size: 40px; line-height: 52px; padding: 80px 0 48px; margin: 0 0px; border-bottom: none;}
  .public-pages h2 {margin: 0; padding: 16px 0;}
  .public-pages .image-1 {max-width: 370px; position: absolute; top: 80px; right: 0;}
  .public-pages .image-2 {max-width: 970px; margin: 48px auto 0;}
  .public-pages .text-holder {margin: 0 auto; max-width: 770px;}
  .public-pages .form-holder {padding: 0px; width: 100%;}
    .public-pages .form-holder .half-w {width: 50%;}

.blog-page {}

  .blog-page .blog-description-title {border-bottom:  1px solid #E9EAED; padding: 0 0 24px; margin-top: -20px;}
  .blog-page .blog-list {padding: 32px 0 0;  display: flex;  flex-wrap: wrap; align-content: space-between; justify-content: space-between;}
    .blog-page .blog-list .blog-preview {width: 370px; margin-bottom: 32px;}
    .blog-page .blog-list .blog-preview:hover {box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06), 0px 16px 28px rgba(0, 0, 0, 0.1); border-radius: 6px;}
    .blog-page .blog-list .blog-preview .preview-content {padding: 16px 24px 12px;}
    .blog-page .blog-list .blog-preview .title {color: #242529; text-decoration: none; font-size: 20px; line-height: 28px; font-weight: bold;}
    .blog-page .blog-list .blog-preview .title:hover {text-decoration: underline;}
    .blog-page .blog-list .blog-preview p {font-size: 16px; line-height: 24px; padding: 12px 0; margin: 0;}
  
  .blog-page h1 {padding: 80px 0 24px;}
  .blog-page .tags-list {padding:  0 0 12px 0;}
    .blog-page .tags-list .keyword {color: #242529; cursor: pointer; background-color: #F6F7F9; border-radius: 20px; font-size: 14px; line-height: 28px; margin: 0 8px 0 0; display: inline-block; padding: 0 8px; text-decoration: none;}
    .blog-page .tags-list .keyword:hover {background-color: #E9EAED;}
  .blog-page .blog-detail {padding: 0; font-size: 14px; line-height: 20px; color: #5A5E66;}
  .blog-page .blog-detail .separate {display: inline-block; padding: 0 5px;}

  .blog-page .blog-post-view .tags-list {padding:  12px 0 36px 0;}
    .blog-page .blog-post-view .tags-list .keyword {font-size: 16px; line-height: 32px;}
  .blog-page .blog-post-view .blog-detail {font-size: 16px; line-height: 24px;}
  .blog-page .blog-post-view p {font-size: 18px; line-height: 28px;}
  .blog-page .blog-post-view h2 {font-size: 28px; line-height: 36px;}
  .blog-page .blog-post-view h3 {font-size: 24px; line-height: 30px;}
  .blog-page .blog-post-view.end {margin-bottom: 50px;}


.header-holder-top {display: none;}
.header-holder {width: 240px; height: 100%; background: #383C42; position: fixed; top: 0; z-index: 6000;}

  .header-holder .logotype {color: #fff;  position: absolute; left: 66px; top: 25px; font-size: 16px; line-height: 32px;}
    .header-holder .logotype img {height: 32px; position: absolute; left: -40px;}

  .header-holder ul {margin: 0; padding: 100px 0 0 0px;}
  .header-holder li {display: block; padding: 0px 20px 4px 20px; }
  .header-holder a {color: #fff; border-radius: 8px; padding: 8px 8px 8px 40px; line-height: 24px; display: flex; align-items: center; text-decoration: none;}
  .header-holder a:hover {background-color: #4E5259; }
  .header-holder span.active {color: #fff; display: block; background-color: #4E5259; border-radius: 8px; padding: 8px 8px 8px 40px; line-height: 24px; display: flex; align-items: center;}
  .header-holder .menu-add-payment {background: url(/images/icon/plus.svg) 13px 13px no-repeat;}
  .header-holder .menu-list {background: url(/images/icon/clock.svg) 11px 9px no-repeat;}
  .header-holder .menu-graph {background: url(/images/icon/graph.svg) 13px 13px no-repeat;}
  .header-holder .menu-statistics {background: url(/images/icon/report.svg) 12px 10px no-repeat;}
  .header-holder .menu-report {background: url(/images/icon/report.svg) 12px 10px no-repeat;}
  .header-holder .menu-budget {background: url(/images/icon/wallet.svg) 11px 11px no-repeat;}
  .header-holder .menu-invoices {background: url(/images/icon/report.svg) 12px 10px no-repeat;}
  .header-holder .menu-help {background: url(/images/icon/help.svg) no-repeat 10px 10px;}
  
  .header-holder .logout {position: absolute; left: 20px; bottom: 30px; width: 200px;}
    .header-holder .logout .user-photo {position: absolute; left: 8px; top: 8px; width: 24px; border-radius: 12px;}
    .header-holder .logout a {background: url('/images/icon/arrow-to-right.svg') no-repeat 180px 15px;}
    .header-holder .logout a:hover {background-color: #4E5259;}

.content-holder {padding: 16px 0px; margin: 20px; border-radius: 6px; background: #fff;}
.has-sidebar .content-holder {margin-left: 350px; }

.content-empty-holder {padding: 80px 0px 0; text-align: center; display: none;}
  .content-empty-holder .empty-img {background: url(/images/img-empty-page.svg) no-repeat center center #E9EAED; width: 320px; height: 320px; display: inline-block; border-radius: 160px;}
  .content-empty-holder .report-empty-img {background: url(/images/img-report-empty.svg) no-repeat center center #E9EAED; width: 320px; height: 320px; display: inline-block; border-radius: 160px;}
  .content-empty-holder .calc-img {background: url(/images/img-calc.svg) no-repeat center center #E9EAED; width: 320px; height: 320px; display: inline-block; border-radius: 160px;}
  .content-empty-holder .notice {padding: 40px 0 16px;}
  .content-empty-holder .btn-holder {}
    .content-empty-holder .btn-holder a {display: inline-block; border: 2px solid #E9EAED; box-sizing: border-box; border-radius: 6px; background: #fff; padding: 8px 40px; text-decoration: none; color: #242529; font-weight: bold;}
    .content-empty-holder .btn-holder a:hover {background: #F6F7F9;}

.last-history .content-empty-holder {padding: 20px 0px 0;}
  .last-history .content-empty-holder .empty-img {width: 120px; height: 120px; background-size: 60% 60%;}
  .last-history .content-empty-holder .notice {padding: 20px 0 16px;}
.popup .content-empty-holder {padding: 20px 0px 0;}
  .popup .content-empty-holder .empty-img {width: 150px; height: 150px; background-size: 60% 60%;}
  .popup .content-empty-holder .notice {padding: 20px 0 16px;}

.content-error-page {padding: 80px 0px 0; text-align: center;}
  .content-error-page h2 {font-size: 28px; line-height: 36px; padding-bottom: 40px; font-weight: bold;}
  .content-error-page .empty-img {background: url(/images/img-404-page.svg) no-repeat center center #E9EAED; width: 290px; height: 290px; display: inline-block; border-radius: 160px;}
  .content-error-page .notice {padding: 40px 20px 16px; text-align: left; max-width: 500px; display: inline-block; line-height: 24px; font-family: PTRootUIWebLight;}
  .content-error-page .btn-holder {}
    .content-error-page .btn-holder a {display: inline-block; border: 2px solid #E9EAED; box-sizing: border-box; border-radius: 6px; background: #fff; padding: 8px 40px; text-decoration: none; color: #242529; font-weight: bold;}
    .content-error-page .btn-holder a:hover {background: #F6F7F9;}

.sidebar-holder {float: left; width: 300px;  padding: 0px 0 0 20px;}


[contenteditable="true"]:active,
[contenteditable="true"]:focus {
  background-color: #F6F7F9;
  outline: none;
  border-bottom: #E96926 solid 2px !important;
}

[contenteditable="true"]:hover {cursor: pointer;}

.filter-holder-old {padding: 0 0 20px; width: 250px}
  .filter-holder-old ul {margin: 0; padding: 0;}
  .filter-holder-old li {margin: 0; padding: 4px; list-style: none;}
  .filter-holder-old li.selected { padding: 4px;}
  .filter-holder-old.by-ajax ul a {text-decoration: none; border-bottom: 1px dotted #79AAAD;}
  .filter-holder-old.by-ajax ul a:hover {border-bottom: 1px dotted #fff;}
  .filter-holder-old.by-ajax ul a.selected {border-bottom: 1px dotted #fff; color: #323232;}
  /*.filter-holder-old .button {text-decoration: none; border: 1px solid #79AAAD; background-color: #79AAAD; color: #fff; border-radius: 5px; font-size: 16px; display: inline-block; margin: 25px 0 0 4px; padding: 5px 15px;}*/
  .filter-holder-old .filter-keyword {text-transform: capitalize;}

.sub-filter-holder {display: inline-block; float: right; font-weight: normal;}
  .sub-filter-holder a {text-decoration: none; border-bottom: 1px dotted #79AAAD; display: inline-block; margin: 0 20px;}
  .sub-filter-holder a:hover {border-bottom: 1px dotted #fff;}
  .sub-filter-holder a.selected {border-bottom: 1px dotted #fff; color: #323232;}


.filter-holder-old.horizontal {padding: 0 0 20px; width: 100%; text-align: right;}
  .filter-holder-old.horizontal ul {display: inline-block; width: auto;}
  .filter-holder-old.horizontal li {display: inline-block; width: auto;}
  .filter-holder-old.horizontal h3 {display: block; float: left; margin: 0; font-weight: normal;}


.statistics-holder {}
  .statistics-holder .statistics-info {float: left; width: 100%;}
  .statistics-holder .statistics-info.show-detail {width: 50%;}
    .statistics-holder .statistics-info ul {padding: 0 0; margin: 0;}
    .statistics-holder .statistics-info li {list-style: none; padding: 5px 0 0 10px; margin: 0 10px 0 0;}
    .statistics-holder .statistics-info li:hover {background: #FAFBFC; cursor: pointer;}
    .statistics-holder .statistics-info li.selected {background: #FAFBFC; cursor: pointer; font-weight: bold;}
      .statistics-holder .statistics-info li.selected .current-status {font-weight: normal;}
    .statistics-holder .statistics-info .keyword {display: inline-block; width: 20%;}
    .statistics-holder .statistics-info.show-detail .keyword {width: 150px;}
    .statistics-holder .statistics-info .progress {display: inline-block; width: 70%; border: 1px dotted #79AAAD; border-radius: 5px;}
    .statistics-holder .statistics-info.show-detail .progress {width: 300px;}
      .statistics-holder .statistics-info .progress .current-status {display: inline-block; background: #79AAAD; text-align: center; color: #fff; padding: 5px 0; border-radius: 5px;}
    .statistics-holder .statistics-info .amount {display: inline-block; padding: 0 0 0 20px;}
  .statistics-holder .statistics-detail {float: right; width: 50%;}


.btn-action {margin-left: 0px; position: relative;  display: inline-block; width: 24px; height: 24px; vertical-align: top; background: url(/images/icon/set-mini.svg) no-repeat; padding: 8px; border-radius: 6px;}
  .btn-action:hover {background-color: rgba(200, 203, 208, 0.24);}
  .btn-action.btn-icon-chart {background-position: 7px 7px;}
  .btn-action.btn-icon-chart:hover {background-position: 7px -47px;}
  .btn-action.btn-icon-tag {background-position: 6px -296px ;}
  .btn-action.btn-icon-tag:hover {background-position: 6px -360px;}
  .btn-action.btn-icon-comment {background-position: 6px -426px;}
  .btn-action.btn-icon-comment:hover {background-position: 6px -488px;}
  .btn-action.btn-icon-detele {background-position: 6px -552px;}
  .btn-action.btn-icon-detele:hover {background-position: 6px -616px;}
  .btn-action.btn-icon-points {background-position: 6px -808px;}
  .btn-action.btn-icon-close {background-position: 6px -744px;}
  .btn-action.btn-icon-calendar {background-position: 6px -872px;}
  .btn-action.btn-icon-calendar:hover {background-position: 6px -936px;}
  .btn-action.btn-icon-calendar-dark {background-position: 6px -936px;}
  .btn-action.btn-icon-copy {background-position: 6px -1000px;}
  .btn-action.btn-icon-copy:hover {background-position: 6px -1064px;}
  .btn-action.btn-icon-close-white {background-position: -62px 8px;}
  .btn-action.btn-icon-close-white:hover {background-position: 6px -744px;}
  .btn-action.btn-icon-sandwich {background-position: -62px -47px;}
  .btn-action.btn-icon-search {background-position: 6px -1128px;}
  .btn-action.btn-icon-next {background-position: -62px -168px;}
  .btn-action.btn-icon-back {background-position: -62px -104px;}
  .btn-action.btn-icon-close-dark {background-position: 6px -1192px;}
  .btn-action.btn-icon-close-row {background-position: -62px -744px;}
  .btn-action.btn-icon-close-row:hover {background-position: 6px -1192px;}
  .btn-action.btn-icon-question {background-position: -62px -360px;}
  .btn-action.btn-icon-public-sandwich {background-position: -62px -936px;}

.btn-action.btn-action-txt {width: auto; padding: 10px 20px 6px 40px; background-image: none;}
  .btn-action.btn-action-txt.icon-left:before {content: " "; width: 24px; height: 24px; position: absolute; background: url(/images/icon/set-mini.svg) no-repeat; display: inline-block; left: 8px; top: 8px;}
  .btn-action.btn-action-txt.icon-right:before {content: " "; width: 24px; height: 24px; position: absolute; background: url(/images/icon/set-mini.svg) no-repeat; display: inline-block; right: 8px; top: 8px;}
  .btn-action.btn-action-txt.btn-icon-back.icon-left:before {background-position: -70px -112px;}
  .btn-action.btn-action-txt.btn-icon-next {padding: 10px 40px 6px 20px;}
  .btn-action.btn-action-txt.btn-icon-next.icon-right:before {background-position: -70px -176px;}


.budget-holder {}
  .budget-holder .progress-holder {padding: 10px 10px;}
    .budget-holder .progress-holder .progress {display: inline-block; width: 300px; border: 1px dotted #79AAAD; border-radius: 5px;}
    .budget-holder .progress-holder .progress .current-status {display: inline-block; background: #79AAAD; text-align: center; color: #fff; padding: 5px 0; border-radius: 5px;}
  .budget-holder .buttons-holder {padding: 20px 0;}
  .budget-holder .budget-statistics {height: 50px;}
  
  .budget-statistics {margin: 20px 20px 0; height: 68px;}
    .budget-statistics .item {float: left; width: calc((100% - 120px) / 4); background: rgba(255, 255, 255, 1); border-radius: 6px; padding: 14px 20px 14px 80px; margin-right: 40px; box-sizing: border-box; min-height: 68px; position: relative; vertical-align: middle;}
    .budget-statistics .item:last-child {margin-right: 0px;}
    .budget-statistics .item.action-holder:hover {box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 6px 12px rgba(0, 0, 0, 0.08); cursor: pointer;}
      .budget-statistics .item.action-holder:hover .btn-icon-chart {background: url(/images/icon/set-mini.svg) 0px -54px no-repeat;}
    .budget-statistics .item.total {background: url(/images/icon/set-budget.svg) no-repeat 20px 14px #fff;}
    .budget-statistics .item.spent-all {background: url(/images/icon/set-budget.svg) no-repeat 20px -86px #fff;}
    .budget-statistics .item.spent-budget {background: url(/images/icon/set-budget.svg) no-repeat 20px -186px #fff;}
    .budget-statistics .item.spent-out {background: url(/images/icon/set-budget.svg) no-repeat 20px -286px #fff;}
    .budget-statistics .title {font-size: 12px; text-transform: uppercase; color: #5A5E66; line-height: 16px; display: block;}
    .budget-statistics .sum {font-weight: bold; display: inline-block; line-height: 24px;}
    .budget-statistics .fraction {font-size: 14px; line-height: 20px; color: #868C98; font-weight: normal;}
    .budget-statistics .amount-empty {color: #868C98; font-weight: normal;}
    .budget-statistics .btn-action {padding: 0px; background-position: 0px 0px;}

  .btn-budget-add {position: fixed; left: 260px; bottom: 20px; display: inline-block;  background-color: #FA5D0F; border-radius: 28px; color: #fff; font-size: 16px; line-height: 24px; padding: 14px 16px 18px 42px;}
  .btn-budget-add:hover {box-shadow: 0px 2px 6px rgba(235, 105, 19, 0.08), 0px 8px 16px rgba(235, 105, 19, 0.2); color: #fff;}
  .btn-budget-add:before {content: " "; position: absolute; left: 10px; top: 14px; display: inline-block; background: url(/images/icon/set-mini.svg) 0px -239px no-repeat; width: 24px; height: 24px;}

  .btn-budget-copy {position: fixed; left: 400px; bottom: 20px; display: inline-block; background: url(/images/icon/set-mini.svg) no-repeat #383C42; background-position: 12px -995px; border-radius: 28px; color: #fff; font-size: 16px; line-height: 24px; padding: 14px 16px 18px 42px;}
  .btn-budget-copy:hover {box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.2); color: #fff;}

.filter-holder {position: absolute; top: 0px; right: 20px; padding: 20px 40px 20px 0; }

.filter-month-selection {}
  .filter-month-selection .ms-action-skip-month.next {display: inline-block; width: 40px; height: 40px; background: url(/images/icon/next.svg) no-repeat 16px 13px;}
  .filter-month-selection .ms-action-skip-month.prev {display: inline-block; width: 40px; height: 40px; background: url(/images/icon/prev.svg) no-repeat 16px 13px;}
  .filter-month-selection .ms-selected-month {display: inline-block; width: 130px; padding: 10px 0px; vertical-align: top; text-align: center; font-size: 16px; color: #242529;}
  .filter-month-selection .ms-icon-selected-month {display: none;}
  .filter-month-selection .ms-action-skip-month:hover {background-color: rgba(200, 203, 208, 0.24); border-radius: 6px; cursor: pointer;}
  .filter-month-selection .ms-selected-month:hover {background-color: rgba(200, 203, 208, 0.24); border-radius: 6px; cursor: pointer;}
  .filter-month-selection .ms-month-list-holder {display: none; width: 324px; height: 230px; background: #fff; border-radius: 6px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.08); position: absolute; right: 84px; top: 61px; z-index: 10000;}
  .filter-month-selection .ms-month-list-holder .ms-year-select {padding: 18px 12px; font-size: 20px; font-weight: bold;}
  .filter-month-selection .ms-month-list-holder .ms-year-prev {display: inline-block; width: 40px; height: 40px; background: url(/images/icon/prev.svg) no-repeat 16px 13px; top: 12px; position: absolute; right: 52px;}
  .filter-month-selection .ms-month-list-holder .ms-year-next {display: inline-block; width: 40px; height: 40px; background: url(/images/icon/next.svg) no-repeat 16px 13px; top: 12px; position: absolute; right: 12px;}
  .filter-month-selection .ms-month-list-holder .ms-year-select a:hover {background-color: #F6F7F9; border-radius: 20px; cursor: pointer;}
  .filter-month-selection .ms-month-list-holder ul {padding: 0 12px; margin: 0;}
  .filter-month-selection .ms-month-list-holder li {padding: 0; list-style: none; width: 96px; float: left; margin: 0 4px 4px 0;}
  .filter-month-selection .ms-month-list-holder li a {width: 72px; display: block; padding: 8px 12px; color: #242529;}
  .filter-month-selection .ms-month-list-holder li a:hover {color: #000; background-color: #F6F7F9; border-radius: 6px; cursor: pointer;}
  .filter-month-selection .ms-month-list-holder li a.selected {color: #FA5D0F; background-color: #FEE4D7; border-radius: 6px;}
  .filter-month-selection .ms-year-selected {color: #868C98; font-size: 14px;}

.datepicker .prev i {display: inline-block; width: 40px; height: 40px; background: url(/images/icon/prev.svg) no-repeat 16px 15px;}
.datepicker .next i {display: inline-block; width: 40px; height: 40px; background: url(/images/icon/next.svg) no-repeat 16px 15px;}

.keyword-filter-holder {width: 480px; position: absolute; top: 16px; right: calc(100% / 2 - 220px); background-color: #F6F7F9;}
  .keyword-filter-holder .keyword-filter-hide {display: inline-block; position: absolute; z-index: 1000; right: 4px; top: 4px;}
    .keyword-filter-holder .keyword-filter-hide .action-clear-keyword-filter {display: inline-block;}
    .keyword-filter-holder .keyword-filter-hide .action-hide-keyword-filter {display: inline-block;}
  .keyword-filter-holder .input-holder {}
  .keyword-filter-holder .input-box {margin: 0; }
  .keyword-filter-holder input[type=text] {background-color: #E9EAED; padding: 12px 48px 12px 40px; text-indent: 0px;}
  .keyword-filter-holder input[type="text"]:focus {padding-bottom: 12px; border-bottom: 1px solid #C8CBD0; background-color: #fff; box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.24);}
.keyword-filter-btn {position: absolute; top: 20px; right: 260px; display: none;}


table.mb--table {border-spacing: 0; line-height: 24px;}
  tr.title {}
    tr.title td {font-size: 16px; padding: 9px 20px; border-bottom: 1px solid rgba(200, 203, 208, 0.75); font-family: PTRootUIWebBold; line-height: 25px;}
    tr.title .weekday {color: #868C98; font-size: 14px; font-weight: normal; font-family: PTRootUIWebRegular; display: inline-block; padding-left: 10px;}
  tr.data-row {padding: 0; margin: 0; border: 0;}
    tr.data-row:hover td {background-color: #F6F7F9;}
    tr.data-row td {padding: 13px 20px; line-height: 25px; border: 0; border-bottom: 1px solid #D6D8DC; font-family: PTRootUIWebLight;}
    tr.data-row:last-child td {border-bottom: none;}
    tr.data-row .action-buttons {text-align: right; padding: 0px 20px 0 0; position: relative;}
    tr.deleted-row {font-style: italic; color: #999;}
      tr.data-row td.list-price {width: 150px;}
  tr.data-row td.list-buttons {width: 100px;}
  tr.data-row .fraction {font-size: 14px; line-height: 20px; color: #868C98; font-weight: normal;}
  tr.data-row .small-padding {padding: 6px 10px 5px;}
  tr.data-row .icon-non-budget {display: inline-block; width: 14px; height: 14px; background: url(/images/icon/set-mini.svg) no-repeat -75px -1013px; vertical-align: middle; margin-left: 8px; position: relative;}
  tr.data-row .icon-non-budget:hover span {display: inline-block;}
    tr.data-row .icon-non-budget span {display: none; position: absolute; width: 80px; font-size: 12px; background: #242529; border-radius: 6px; color: #E9EAED; text-align: center; top: -30px; left: -30px;}
  tr.sceleton-row {padding: 0; margin: 0; border: 0;}
    tr.sceleton-row td {padding: 20px 20px; border: 0; border-bottom: 1px solid #E9EAED;}
    tr.sceleton-row .sceleton-data {display: inline-block; height: 12px; width: 80%; max-width: 300px; background: #E9EAED; border-radius: 8px;}
  tr.sceleton-row:last-child td {border-bottom: none;}

  table.mb--table thead {}
    table.mb--table thead th {border-bottom: 1px solid rgba(200, 203, 208, 0.75); color: #868C98; font-size: 12px; line-height: 16px; text-transform: uppercase; text-align: left; font-weight: normal; padding: 15px 20px 14px 20px;}
    table.mb--table thead th.col-progress {text-align: center;}
  
  table.mb--table .action-buttons-holder {display: none;}
  table.mb--table tr:hover .action-buttons-holder {display: inline-block;}
  table.mb--table tr:hover .is-setup {display: none;}
  table.mb--table .btn-action-holder {display: inline-block; width: 40px; height: 40px; vertical-align: top;}
  table.mb--table .close-row-menu {display: none;}

  table.mb--table .btn-action.btn-icon-points {display: none;}

  
  .budget-holder #budget-list .progress {vertical-align: middle;}
  .budget-holder #budget-list .progress-amount {display: inline-block; padding: 7px 0;}
  .budget-holder #budget-list .no-subsribe {color: #868C98; text-align: right;}
  .payments-list .col-actions {width: 100px;}
  .payments-list.for-add-payment .col-actions {width: 130px;}
  .budget-holder th.col-actions {width: 130px;}
  .budget-holder th.col-amount {width: 120px;}
  .budget-holder th.col-progress {width: 240px;}
  .budget-holder #budget-list .progressbar {width: 100px; position: relative;}
  .budget-holder #budget-list .progressbar .percent {position: absolute; top: -10px; left: 45px; display: none; width: 50px; text-align: center; background-color: rgba(56, 60, 66, 0.9); color: #E9EAED; border-radius: 4px; line-height: 24px; font-size: 14px;}
  .budget-holder #budget-list .progressbar:hover .percent {display: inline-block;}
  .budget-holder #budget-list .progressbar-holder {display: inline-block; width: 100px; height: 8px; background: #E9EAED; border-radius: 4px; overflow: hidden;}
  .budget-holder #budget-list .progress-status {background: #57BC6F /*#383C42*/ /*#FA5D0F*/ ; display: inline-block; height: 8px;}
  .budget-holder #budget-list .progress-status.warning {background: #C21010; width: 100% !important;}
  .budget-holder #budget-list .is-setup {position: absolute;  top: 6px; left: 76px;}

  .budget-holder tbody td.col-actions {}
  .budget-holder tbody td.col-progress {width: 120px;}
  .budget-holder tbody td.col-amount {}


.help-page {}
  .help-page .content-holder {padding-bottom: 32px; min-height: calc(100vh - 201px); box-sizing: border-box;}
  .help-page h2 {margin: 0; padding: 16px 0;}
  .help-page .help-holder {max-width: 1000px; margin: 0 auto; padding: 0 20px;}
  .help-page .help-item {background: #F6F7F9; border-radius: 6px; margin-bottom: 6px; border: 1px solid #F6F7F9; position: relative;}
  .help-page .help-item:before {content: " "; width: 24px; height: 24px; background: url(/images/icon/set-mini.svg) no-repeat -70px -880px; display: inline-block; position: absolute; top: 12px; left: 12px;}
  .help-page .help-item:hover {box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.16); cursor: pointer;}
  .help-page .help-title {font-weight: bold; padding: 12px 12px 12px 44px; line-height: 24px;}
  .help-page .help-text {display: none; padding: 0 12px 12px 44px; line-height: 24px; font-family: PTRootUIWebLight;}
  .help-page .help-item.opened {background: #fff; border: 1px solid #E9EAED;}
  .help-page .help-item.opened:before {background-position: -70px -817px; }
    .help-page .help-item.opened .help-text {display: block;}
  .help-page .help-item img {max-width: 100%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.32); border-radius: 10px; border: 1px solid #ccc; max-height: 300px;}

.settings-page {}
  .settings-page .content-holder {padding-bottom: 32px; min-height: calc(100vh - 201px); box-sizing: border-box;}
  .settings-page h2 {margin: 0; padding: 16px 0;}
  .settings-page .settings-holder {max-width: 460px; margin: 0 auto; padding: 0 20px;}


.table-row {padding: 0px 0px; border-bottom: 1px solid #D6D8DC; min-height: 52px; box-sizing: border-box; position: relative;}
.table-row:last-child {border-bottom: none;}
.table-row:hover {background-color: #F6F7F9;}
  .table-row .table-cell {padding: 10px 20px; display: inline-block;}
  .table-row .sceleton-row {padding: 10px 20px; display: inline-block;}

  /*.table-row .sceleton-row {padding: 0; margin: 0; border: 0;}*/
    /*.table-row .sceleton-row td {padding: 20px 20px; border: 0; border-bottom: 1px solid #E9EAED;}*/
    .table-row .sceleton-data {display: inline-block; height: 12px; width: 80%; max-width: 300px; background: #E9EAED; border-radius: 8px;}
  /*.table-row .sceleton-row:last-child td {border-bottom: none;}*/


.report-page {}
.report-chart-holder {height: 340px; text-align: center; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative;}
  .report-chart-holder .grid-holder {height: calc(100% - 50px); position: relative; margin: 0px 60px 0 0;}
    /*.report-chart-holder .grid-holder .val-holder {position: absolute; display: inline-block; left: 0; bottom: 0; height: 100px; width: 10%; background: red}*/
    .report-chart-holder .grid-holder .val-holder {float: left; height: 100%; display: block; position: relative; z-index: 1000; box-sizing: border-box;}
      .report-chart-holder .grid-holder .val-holder .label {position: absolute; bottom: -25px; font-size: 12px;  text-align: center; left: 0; right: 0; }
      .report-chart-holder .grid-holder .val-holder .val-note {display: none; position: absolute; background: /*rgba(56, 60, 66, 0.9)*/ #242529; width: 80px; text-align: center; padding: 5px 10px; left: calc(50% - 50px); top: -34px; font-size: 14px; color: #C8CBD0; border-radius: 4px; z-index: 6100;}
        .report-chart-holder .grid-holder .val-holder .val-note .fraction {font-size: 10px; color: #868C98; font-weight: normal;}
      .report-chart-holder .grid-holder .val-holder:hover {background: rgba(200, 203, 208, 0.12);}
      .report-chart-holder .grid-holder .val-holder:hover .val-note {display: inline-block;}
      /*.report-chart-holder .grid-holder .val-background {height: 100%; display: block; position: absolute; width: 100%; box-sizing: inherit; background: red;}*/
      /*.report-chart-holder .grid-holder .val-holder .val-note.note75 {display: inline-block;}*/
    .report-chart-holder .grid-holder .val-holder:last-child {margin-right: 0;}
    .report-chart-holder .grid-holder .val-chart {width: calc(100% - 26%); background: #57BC6F; display: block; bottom: 0; position: absolute; z-index: 2000; left: 0; margin-left: 13%; margin-right: 13%; box-sizing: border-box;}
    .report-chart-holder .grid-holder .val-chart.no-data {border-top: 2px solid #C8CBD0;}
  .report-chart-holder .grid-scale {position: absolute; right: 0;  height: calc(100% - 100px); width: 60px; top: 50px; right: 10px;}
    .report-chart-holder .grid-scale .grid-scale-val {position: absolute; left: 10px; font-size: 12px; }
      .report-chart-holder .grid-scale .grid-scale-val.val-100 {top: calc(0% - 11px);}
      .report-chart-holder .grid-scale .grid-scale-val.val-75 {top: calc(25% - 11px);}
      .report-chart-holder .grid-scale .grid-scale-val.val-50 {top: calc(50% - 11px);}
      .report-chart-holder .grid-scale .grid-scale-val.val-25 {top: calc(75% - 11px);}
      .report-chart-holder .grid-scale .grid-scale-val.val-0 {top: calc(100% - 11px);}
  .report-chart-holder .grid-lines {position: absolute; width: calc(100% - 80px); height: calc(100% - 100px); z-index: 10; top: 50px; left: 10px;}
    .report-chart-holder .grid-lines .grid-line {position: absolute; width: 100%; height: 1px; background: #F3F3F3;}
    .report-chart-holder .grid-lines .grid-line.val-100 {top: calc(0%);}
    .report-chart-holder .grid-lines .grid-line.val-75 {top: calc(25%);}
    .report-chart-holder .grid-lines .grid-line.val-50 {top: calc(50%);}
    .report-chart-holder .grid-lines .grid-line.val-25 {top: calc(75%);}
    .report-chart-holder .grid-lines .grid-line.val-0 {top: calc(100%);}
  .report-chart-holder .loading {width: 30px; margin-top: 100px;}
.report-holder {}
  .report-holder .report-keywords-list {padding: 0 0px;}
    .report-holder .report-keywords-list .table-row .table-cell.title {padding-top: 18px; padding-right: 380px; width: 100%; box-sizing: border-box;}
      .report-holder .report-keywords-list .table-row .table-cell.title .text {padding-right: 20px;}
    .report-holder .report-keywords-list .table-row .table-cell.progress {position: absolute; top: 4px; right: 0; width: 200px; padding-top: 22px;}
      .report-holder .report-keywords-list .table-row .table-cell .progressbar {background: #E9EAED; border-radius: 20px; overflow: hidden; height: 8px;}
      .report-holder .report-keywords-list .table-row .table-cell .current-status {background: #57BC6F; display: inline-block; height: 24px;}
    .report-holder .report-keywords-list .table-row .table-cell.amount {position: absolute; top: 4px; right: 240px; width: 100px; padding-top: 18px;}
    .report-holder .report-keywords-list .table-row .table-cell .fraction {font-size: 14px; line-height: 20px; color: #868C98; font-weight: normal;}

    .report-keywords-list.select-keyword-holder {margin: 0 0 0 0;}
      .report-keywords-list.select-keyword-holder .keyword {margin: 0 8px 4px 0;}

  .report-holder .report-summary {padding: 10px 0 0; border-top: 1px solid #C8CBD0; font-weight: bold;}
    .report-holder .report-summary .table-row:hover {background-color: transparent;}
    .report-holder .report-summary .table-cell.amount {float: right; width: 340px;}
    .report-holder .report-summary .fraction {font-size: 14px; color: #868C98; font-weight: normal;}

  .filter-by-range-holder {cursor: pointer; position: absolute; top: 0px; right: 20px; padding: 20px 0px 0px 0;}
    .filter-by-range-holder .btn-range {display: inline-block; width: auto; padding: 10px 20px; vertical-align: top; text-align: center; font-size: 16px; color: #242529;}
    .filter-by-range-holder .btn-range:hover {background-color: rgba(200, 203, 208, 0.24); border-radius: 6px; cursor: pointer;}


  /*.report-chart-holder .grid-holder .val-holder {width: calc(100% / 120 * 3); margin-right: calc(100% / 120);}*/


.filter-by-keywords {margin: 0; padding: 0;}
  .filter-by-keywords li {margin: 0; padding: 0 10px 10px 0; display: inline-block;}
  .filter-by-keywords li a {text-decoration: none; border-bottom: 1px dotted #79AAAD;}
  .filter-by-keywords li a:hover {border-bottom: 1px dotted #fff;}
  .filter-by-keywords li a.selected {border-bottom: 1px dotted #fff; color: #323232;}


.chart-additional-info {padding: 10px 0 0 0;}
  .chart-additional-info .detail {padding: 5px 0 10px 0; font-size: 18px;}
  .chart-additional-info .detail strong {display: inline-block; padding: 0 20px 0 0; width: 200px;}
  .chart-additional-info h3 small {font-size: 12px; font-weight: normal; color: #ccc;}

.chart-additional-info .tags-list {}
  .chart-additional-info .tags-list a {text-decoration: none; display: inline-block; padding: 5px 10px; margin: 0 2px 2px 0;}
  .chart-additional-info .tags-list a .label {border-bottom: 1px dotted #79AAAD; text-transform: capitalize;}
  .chart-additional-info .tags-list a .count {background-color: #79AAAD; display: inline-block; padding: 2px 10px; border-radius: 10px; color: #fff;}
  .chart-additional-info .tags-list a:hover .label {border-bottom: 1px dotted #fff;}

  .chart-additional-info .tags-list a.selected {border: 1px dotted #79AAAD; border-radius: 10px;}
  .chart-additional-info .tags-list a.selected .label {border: none;}
  .chart-additional-info .tags-list a.selected .count {background-color: #fff; color: #79AAAD;}
  .chart-additional-info .tags-list a.selected:hover .count {color: #FD6A6D;}

.columns {}
  .columns.column-left {float: left; width: 50%; display: inline-block;}
  .columns.column-right {float: right; width: 50%; display: inline-block;}

  .action-buttons a {display: inline-block; width: 40px; height: 40px; border-radius: 6px; position: relative;}


.index-page {margin: 0 auto; padding: 0px 0 0; background-color: #383C42;}
  .index-page .title {font-size: 34px; line-height: 52px; border: none; margin: 0; padding: /*120px*/ 0px 0 24px 0; font-family: PTRootUIWebRegular; text-align: center;}
  .index-page .left-holder {float: left; width: 50%; position: relative;}
    .index-page .left-holder h1 {padding-top: 50%; color: #fff; font-size: 30px; line-height: 52px; border: none; font-family: PTRootUIWebRegular; text-align: center;}
  .index-page .right-holder { margin-left: 50%; min-height: 100%; height: 100%; box-sizing: border-box; padding: 12px; position: relative;}
  .index-page .side-holder {background-color: #ffffff; height: 100%; display: block; min-height: 100%; border-radius: 6px; position: relative;}
  .index-page .form-holder {width: 400px; margin: 0 auto; box-sizing: border-box; display: block; position: absolute; left: 0; right: 0; top: calc(50% - 200px);}
  .index-page .note {padding: 0px 0 20px;}
  .index-page .note.center {text-align: center; line-height: 24px;}
  .index-page .signout-holder {display: none;}
  .index-page .restore-holder {display: none;}
  .index-page label.checkbox-holder {display: inline-block; width: auto;}
  .index-page .restore-button {position: absolute; display: inline-block; top: 135px; right: 0px;}

  .index-page .tip {position: absolute; top: -30px; right: 0px; display: none; width: 150px; text-align: center; background-color: rgba(56, 60, 66, 0.9); color: #E9EAED; border-radius: 5px; line-height: 24px; font-size: 14px;}
  .index-page .restore-button:hover .tip {display: inline-block;}

  .index-page .back-page-holder {position: absolute; left: 12px; top: 12px; width: auto; padding: 0px 0px 0px; font-size: 16px; z-index: 100; display: inline-block; color: #5B5E65;}
  .index-page .next-page-holder {position: absolute; right: 12px; top: 12px; width: auto; padding: 0px 0px 0px; font-size: 16px; z-index: 100; color: #5B5E65;}
  .index-page .select-page-holder {position: absolute; right: 32px; top: 32px; width: 240px; padding: 0px 0px 0px; font-size: 16px; height: 40px; margin-bottom: 23px; background: #F6F7F9; border-radius: 6px; overflow: hidden; z-index: 100; display: none;}
    .index-page .select-page-holder .item {display: inline-block; padding: 10px 0px 0; float: left; width: calc(100% / 2); box-sizing: border-box; height: 40px; text-align: center; font-size: 16px;}
    .index-page .select-page-holder .item div {border-right: 1px solid #C8CBD0;}
    .index-page .select-page-holder .item:last-child div {border-right: none !important;}
    .index-page .select-page-holder .item:hover {background-color: rgba(200, 203, 208, 0.24);}
    .index-page .select-page-holder .item.selected {background-color: #383C42; color: #fff;  padding: 10px 0 0;}
    .index-page .select-page-holder .item.selected div {border-color: #383C42;  }
  
  .index-page .index-menu {position: absolute; bottom: 32px; left: 0; right: 0; display: inline-block; text-align: center; margin: 0; padding: 0; line-height: 24px;}
    .index-page .index-menu li {display: inline-block; position: relative;}
      .index-page .index-menu li a {display: inline-block; padding: 0 8px; position: relative;}
    .index-page .index-menu li:before {content: " "; position: absolute; background: #C8CBD0; height: 4px; width: 4px; left: -4px; top: 12px; border-radius: 2px;}
    .index-page .index-menu li:first-child:before {content: none;}
  
  .index-page .logotype-holder {position: absolute; top: 40px; width: 100%; text-align: center;}
    .index-page .logotype-holder img {width: 220px;}
  .index-page .slide-buttons-nav {position: absolute; bottom: 32px; width: 100%; text-align: center;}
    .index-page .slide-buttons-nav a {display: inline-block; width: 13px; height: 13px; border-radius: 13px; border: 1px solid #fff; margin: 0 10px;}
    .index-page .slide-buttons-nav a.selected {background: #fff;}
    .index-page .slide-buttons-nav a:hover {background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);}

.slide-holder {text-align: center; width: 100%; height: 100vh; display: flex; align-items: center;}
  .slide-holder .slide-item {display: inline-block; margin: 0 auto; position: relative;}
    .slide-holder .slide-item img {width: 90%;}

.index-page .slide-labels .slide-label {position: absolute; bottom: 140px; width: 100%; text-align: center; color: #fff; font-size: 18px;}

.add-payment-holder .select-date-holder {padding: 0px 0px 0px; font-size: 16px; height: 49px; margin-bottom: 23px; background: #F6F7F9; border-radius: 6px; overflow: hidden;}
  .add-payment-holder .select-date-holder .selected-date {display: none;}
  .add-payment-holder .select-date-holder .item {display: inline-block; padding: 15px 0px 0; float: left; width: calc(100% / 3); box-sizing: border-box; height: 49px; text-align: center;}
  .add-payment-holder .select-date-holder .item div {border-right: 1px solid #C8CBD0;}
  .add-payment-holder .select-date-holder .item:last-child div {border-right: none !important;}
  .add-payment-holder .select-date-holder .item:hover {background-color: rgba(200, 203, 208, 0.24);}
  .add-payment-holder .select-date-holder .item.selected {background-color: #383C42; color: #fff; font-weight: bold; padding: 7px 0 0;}
  .add-payment-holder .select-date-holder .item.selected .selected-date {display: block; font-size: 12px; color: #C8CBD0; font-weight: normal;}
  .add-payment-holder .select-date-holder .item.selected div {border-color: #383C42;  }
  .select-keyword-holder {margin-bottom: 15px;}
    .select-keyword-holder .keyword {color: #868C98; cursor: pointer; background-color: #F6F7F9; border-radius: 20px; font-size: 16px; line-height: 24px; margin: 0 8px 8px 0; display: inline-block; padding: 4px 8px;}
    .select-keyword-holder .keyword:hover {background-color: #E9EAED;}


.gr-message-popup {position: fixed; top: 15px; right: 20px; width: auto; background: rgba(36, 37, 41, 0.9); color: rgba(255, 255, 255, 1); font-size: 16px; line-height: 24px; padding: 12px; z-index: 10000; border-radius: 6px;}
.index-page .gr-message-popup {top: 20px;}
.gr-message-popup.error {background: rgba(255, 0, 0, 0.7); color: #fff;}
  .gr-message-popup .gr-message-close-btn {color: #FA5D0F; display: inline-block; padding: 0 4px 0 20px; margin-left: 20px; font-weight: bold; font-size: 12px; border-left: 1px rgba(255, 255, 255, 0.5) solid;}
  .gr-message-popup.error .gr-message-close-btn {color: #fff; }
  .gr-message-popup .gr-message-close-btn:hover {cursor: pointer;}


form {margin: 0px;}
fieldset {border: 0; margin: 0; padding: 0; position: relative;}
input[type="date"],
input[type="number"],
input[type="email"],
input[type="text"],
input[type="password"] {width: 100%; text-indent: 44px; padding: 12px 0px 12px 0; font-size: 16px; line-height: 24px; margin: 0 0 0px; border-radius: 6px 6px 0 0; border: 0; border-bottom: 1px solid #C8CBD0; background-color: #F6F7F9; font-weight: 100; -webkit-appearance: none; box-sizing: border-box;}
input.skip-padding {text-indent: 12px;}
input[type="date"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {border-bottom: 2px solid #FA5D0F; outline: none; padding-bottom: 11px;}
input[type="submit"] {width: 100%; padding: 10px 0px; font-size: 16px; text-align: center; border: none; border-bottom: 2px solid #cc6666; background: red; color: #fff; border-radius: 5px; -webkit-appearance: none;}
input[type="submit"]:hover {background: #f97d80; cursor: pointer;}
input[type="button"] {width: 100%; padding: 8px 0px; font-size: 16px; line-height: 24px; text-align: center; border: none; background: #FA5D0F; color: #fff; border-radius: 6px; -webkit-appearance: none;}
input[type="button"]:hover {background: #FB6B23; cursor: pointer;}
label {display: inline-block; width: 23px; margin-left: 3px; color: #666; position: absolute; top: 11px;}
label.horizontal {display: block; width: auto; margin-left: 0px; position: static; font-size: 16px; line-height: 24px; padding: 0 0 8px;}
input.horizontal {text-indent: 0px;}
.input-holder label {width: auto;}
.div-edit {padding: 20px 20px; font-size: 16px; margin: 0px 0 0px; border-radius: 6px 6px 0 0; border: 0; border-bottom: 1px solid #DEDEDE; height: auto; background: #F6F7F9; min-height: 100px;}


label.checkbox-holder {display: block; position: relative; top: 0px; padding-left: 55px; margin-bottom: 23px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-top: 1px;}
  label.checkbox-holder input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  label.checkbox-holder .checkmark {position: absolute; top: 0; left: 0; height: 24px; width: 40px; background: #C8CBD0; border-radius: 12px;}
  label.checkbox-holder .checkmark:before {content: ""; position: absolute; top: 4px; left: 4px; height: 16px; width: 16px; background: #fff; border-radius: 16px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.32);}
  label.checkbox-holder input:checked ~ .checkmark {background: #383C42 /*#FA5D0F*/;}
  label.checkbox-holder input:checked ~ .checkmark:before {left: auto; right: 4px;}


/* --- Error message for input fields --- */

.input-box {border-radius: 6px; overflow: hidden; margin-bottom: 23px;}
.input-box:before {background: url('/images/icon/set-mini.svg') no-repeat; content: " "; display: inline-block; width: 24px; height: 24px; position: absolute; top: 10px; left: 9px;}
.input-holder {position: relative; margin-bottom: 0px; overflow: hidden;}
  .input-holder.has-error input {border-bottom: #C21010 2px solid; padding-bottom: 11px;}
  .input-holder.has-error .input-box {}
  .input-holder.has-error label {width: 100%; position: absolute; left: 0;}
  .input-holder.has-error label:after {content: attr(txt-error); position: absolute; width: 100%; top: 40px; left: 0px; font-size: 12px; color: #C21010;}
  .input-holder.has-error .error-icon {display: inline-block; background: url(/images/icon/error.svg) no-repeat; position: absolute; width: 20px; height: 20px; right: 14px; top: 14px; z-index: 10000;}

input[type="button"].action-save {float: right; width: 110px;}
input[type="button"].action-cancel {float: right; width: 110px; margin-right: 8px; background: #fff; color: #242529; border: 2px solid #E9EAED; box-sizing: padding-box; padding: 6px 0;}
input[type="button"].action-cancel-fullw {width: 100%; margin-right: 0; background: #fff; color: #242529; border: 2px solid #E9EAED; box-sizing: padding-box; padding: 6px 0;}
input[type="button"].btn-normal {width: auto; padding: 6px 20px; float: right;}
input[type="button"].btn-standart {width: auto; padding: 8px 40px; }

.message {padding: 0px 0 25px 0; color: red;}


.input-box.input-icon-date:before {background: url('/images/icon/calendar.svg') no-repeat 5px 3px;}
.input-box.input-icon-money:before {background: url('/images/icon/banknote.svg') no-repeat 0px 1px;}
.input-box.input-icon-search:before {background: url('/images/icon/set-mini.svg') no-repeat -2px -1134px;}
.input-box.input-icon-mail:before {background: url('/images/icon/set-mini.svg') no-repeat -70px -239px;}
.input-box.input-icon-password:before {background-position: -70px -303px;}
.input-box.input-icon-name:before {background: url('/images/icon/set-mini.svg') no-repeat -70px -687px;}
.input-box.no-icon:before {content: none;}




.add-payment-holder {position: relative; width: 460px; margin: 0 auto; display: block; padding: 22px 0px; }
  .add-payment-holder .tagify {padding: 4px 0 4px 30px; background: url(/images/icon/tags.svg) no-repeat 16px 16px #F6F7F9; border-radius: 6px 6px 0 0; border-bottom: 1px solid #C8CBD0;}
  .add-payment-holder .tagify.tagify--focus {border-bottom: 2px solid #FA5D0F; padding-bottom: 3px;}
  .add-payment-holder .has-error .tagify {border-bottom: 2px solid #C21010;}
  .add-payment-holder .tagify tag {margin:5px 0 5px 10px;}
  /*.add-payment-holder .tagify__input {color: #B2C5E0;}*/
  .tagify__dropdown {box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.08); background: #fff; border-radius: 6px; border: none; padding: 8px 0px;}
  .tagify__dropdown__item {padding: 8px 12px; margin: 0px 4px; border-radius: 6px;}

.budget-page {}
  .budget-page .tagify {padding: 4px 0 4px 30px; background: url(/images/icon/tags.svg) no-repeat 16px 16px #F6F7F9; border-radius: 6px 6px 0 0; border-bottom: 1px solid #C8CBD0;}
  .budget-page .tagify.tagify--focus {border-bottom: 2px solid #FA5D0F; padding-bottom: 3px;}
  .budget-page .tagify tag {margin:5px 0 5px 10px;}

.popup-holder {display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 6000; background-color: rgba(0, 0, 0, .3); overflow: auto; overflow-x: hidden; overflow-y: auto;}


.popup {margin: 0 0 0 -300px; width: 600px; background: #fff; position: fixed; max-height: 70vh; box-sizing: border-box; height: auto; padding: 63px 0 84px; border-radius: 6px; z-index: 7000; top: 10%; left: 50%; display: none; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06), 0px 16px 28px rgba(0, 0, 0, 0.1);}
  .popup .title {margin: 0; font-size: 20px; background: #fff; padding: 24px 24px 14px; border-radius: 10px 10px 0 0; position: absolute; z-index: 8000; width: 100%; box-sizing: border-box; top: 0; color: #242529; font-weight: bold;}
  .popup .footer {margin: 0; padding: 0 24px; border-radius: 0 0 10px 10px; position: absolute; z-index: 8000; width: 100%; box-sizing: border-box; bottom: 24px; }
  .popup .close {position: absolute; top: 13px; right: 15px; z-index: 10000; }
  .popup .body {/*margin: 5% 40px; height: 90%; overflow: scroll;*/ padding: 0px 24px 0; margin: 0px 0 0px; overflow: scroll; max-height: calc(70vh - 147px); box-sizing: border-box;}

.mobile-show {display: none!important;}

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

  /*h1 {padding: 0 10px;}

  .mobile-hidden {display: none!important;}
  .mobile-show {display: inline-block!important;}

  .index-page {width: 100%;}
  fieldset {padding: 0 10px;}

  .wrraper { margin: 0 0 0 0px; display: block;  min-height: 100%;  position: relative;}

  input[type="date"],
  input[type="number"],
  input[type="email"],
  input[type="text"] {width: 100%; text-indent: 30px; padding: 10px 0px; -webkit-appearance: none;}
  input[type="password"] {width: 100%; text-indent: 30px; padding: 10px 0px; -webkit-appearance: none;}
  input[type="submit"] {width: 100%; -webkit-appearance: none;}
  input[type="button"] {width: 100%; -webkit-appearance: none;}

  .add-payment-holder div#ui-datepicker-div {display: none!important; }

  .content-holder {margin-left: 0; padding: 50px 0 0px;}
  .sidebar-holder {display: none;} 
  .has-sidebar .content-holder {margin-left: 0; padding: 0;}

  .add-payment-holder {width: 100%; }

  .filter-holder-old {padding: 0 0 20px 10px;}
  .filter-holder-old.horizontal {padding: 0 10px 20px 10px; width: auto;}

  .index-page .separator {margin: 50px 10px 0;}

  .header-holder {width: 100%; height: 50px; position: absolute; top: 0; z-index: 1000;}
    .header-holder ul {padding: 55px 0 0 10px; position: absolute; z-index: 1000; display: inline-block; background: #000; width: 200px; right: 10px; top: 5px; border-radius: 10px;}
    .header-holder .logout {display: none; padding: 11px 0px 0 0; display: none;}
    .header-holder .logotype {color: #fff; font-weight: bold; padding: 15px 0 0 22px; display: inline-block;}
    .header-holder .sandwich {color: #fff; font-weight: bold; padding: 15px 20px 0 22px; display: inline-block; float: right; z-index: 2000; position: relative;}
      .header-holder .sandwich:hover {cursor: pointer;}

  .budget-holder #budget-list .name {width: auto;}
  .budget-holder #budget-list .amount {width: 60px;}
  .budget-holder #budget-list .progress {width: 80px;}

  .buttons-holder {padding: 20px 10px !important;}*/



  /*.popup {margin: 0 0 0 0px; width: 96%; background: #fff; position: fixed; height: 90%; padding: 0 0 0; border-radius: 20px; z-index: 7000; top: 5%; left: 2%; display: none;}
  .popup .body {margin: 5% 40px; height: 90%; overflow: scroll;}*/
/*

  .popup {margin: 0 0 0 0px; width: 96%; background: #fff; position: fixed; height: auto; max-height: 90%; padding: 0 0; top: 5%; left: 2%; overflow: scroll;}
  .popup .body {padding: 0 20px;}

  .popup .title {width: auto;}
  .popup .action-close-popup {position: fixed !important; top: 5%; right: 20px; z-index: 10000; padding: 7px 10px; border-radius: 40px; margin-top: 10px;}*/
  

  /*.popup {margin-left: 0px; margin-top: -160px; width: 96%; background: #fff; position: fixed; height: auto; padding: 0 0 0; border-radius: 20px; z-index: 7000; top: 40%; left: 2%; display: none;}
    .popup .body {padding: 10px;}*/
    /*.popup .title {margin: 0; font-size: 20px; background: #81AFB1; color: #fff; padding: 10px 20px; border-radius: 10px 10px 0 0; position: relative;}
      .popup .title .close {position: absolute; right: 20px; color: #fff; text-decoration: none; font-size: 14px; top: 13px;}
      .popup .action-close-popup {position: absolute; right: 20px; color: #ccc; text-decoration: none; font-size: 20px; top: 20px;}
    .popup .body {padding: 70px;}*/

  /*.popup {margin-left: 0px; margin-top: 0px; width: 96%; background: #fff; position: fixed; height: 90%; padding: 0 0 0; border-radius: 20px; z-index: 7000; top: 5%; left: 2%; display: none;}
    .popup .body {padding: 0; overflow: scroll; height: 100%;}
    .popup .popup-content {padding: 10px;}*/


}

.buttons-holder {height: 40px;  padding: 24px 0 0;}

.user-menu {display: none; position: absolute; bottom: 40px; left: 225px; background: #fff; border-radius: 6px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.08); width: 200px;}
  .user-menu ul {padding: 8px 4px;}
  .user-menu li {padding: 0px;}
  .user-menu a {color: #5A5E66 !important; font-size: 16px;}
  .user-menu a:hover {background-color: #C8CBD0 !important;}
  .user-menu a.menu-help {background: url(/images/icon/help.svg) no-repeat 10px 10px;}
  .user-menu a.menu-settings {background: url(/images/icon/gear.svg) no-repeat 10px 10px;}
  .user-menu a.menu-logout {background: url(/images/icon/exit.svg) no-repeat 10px 10px;}

.menu-close {position: absolute; z-index: 100; right: 10px; top: 12px; color: #fff; display: none;}
.menu-close:hover {cursor: pointer;}


.btn-get-help {position: fixed; right: 20px; bottom: 20px; display: inline-block; width: 56px; height: 56px; background: url(/images/icon/feedback.svg) 18px 18px no-repeat #383C42; border-radius: 56px; color: #fff;}
.btn-get-help:hover {box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.2);}
.btn-get-help .note {position: absolute; top: -65px; display: none; right: 0px; width: 184px; background: #242529; border-radius: 6px; font-size: 12px; color: #E9EAED; padding: 8px;}
.btn-get-help:hover .note {display: block;}



/** Date Picker **/

/*#ui-datepicker-div.ui-widget.ui-widget-content {background: #FFFFFF; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.08); border-radius: 6px; border: none;}*/

@media screen and (max-width: 1300px) {
  .keyword-filter-holder {width: 380px; right: calc(100% / 2 - 190px);}
}

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

  .budget-statistics  {}

  .budget-statistics .item {width: calc((100% - 30px) / 4); margin-right: 10px; padding: 14px 10px 14px 60px ;}

  .budget-statistics .item.total {background-position: 10px 14px;}
  .budget-statistics .item.spent-all {background-position: 10px -86px;}
  .budget-statistics .item.spent-budget {background-position: 10px -186px;}
  .budget-statistics .item.spent-out {background-position: 10px -286px;}

  .keyword-filter-holder {display: none; width: calc(100% - 280px); right: auto; left: 20px;}
  .keyword-filter-btn {display: block;}

  .keyword-filter-holder .keyword-filter-hide {display: inline-block; vertical-align: top; }
  .keyword-filter-holder .input-holder {width: calc(100%); display: inline-block;}

}

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

  .wrapper-public {padding: 80px 0;}

  .public-pages .image-2 {width: calc(100vw - 40px);}
    .public-pages .image-2 img {width: 100%;}

  .content-public .text-short {padding: 48px 0 0;}

}

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

  /* Index Page */
  .index-page .left-holder {float: inherit; width: 100%; height: 30%; }
  .index-page .right-holder {margin-left: 0; min-height: 50%; height: 70%;}

  /* Other pages */
  .header-holder {display: none; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12), 0px 0px 24px rgba(0, 0, 0, 0.24); right: 0;}
    .header-holder .logotype {display: none;}
  .wrraper {margin: 0; padding-top: 64px; box-sizing: border-box;}
  .header-holder-top {display: block; width: 100%; height: 64px; background: #383C42; position: absolute; top: 0; z-index: 5000;}
    .header-holder-top .menu-sandwich {position: absolute; right: 10px; top: 14px; }
    .header-holder-top .logotype {color: #fff; text-decoration: none; display: inline-block; font-size: 16px; line-height: 32px; padding: 0px 0 0 40px; position: absolute; top: 15px; left: 26px;}
    .header-holder-top .logotype:hover {color: #fff;}
    .header-holder-top .logotype img {height: 32px; position: absolute; left: 0px;}

  .header-holder .logotype {top: 15px;}
  .header-holder ul.menu-holder {margin: 0; padding: 64px 0 0 0px;}

  .user-menu {bottom: 73px; left: 37px;}

  .menu-close {display: inline-block;}

  .keyword-filter-holder {width: calc(100% - 85px); position: absolute; top: 80px; right: 68px; display: none;}
  .keyword-filter-btn {position: absolute; top: 84px; right: 65px; display: block;}

  .filter-holder {top: 64px; padding: 29px 12px;}
    .filter-month-selection .ms-action-skip-month.prev {display: none;}
    .filter-month-selection .ms-action-skip-month.next {display: none;}
    .filter-month-selection .ms-selected-month {display: none;}
    .filter-month-selection .ms-icon-selected-month {display: inline-block; background: url(/images/icon/calendar3.svg) no-repeat; width: 18px; height: 20px;}
    .filter-month-selection .ms-icon-selected-month:hover {cursor: pointer;}
    .filter-month-selection .ms-month-list-holder {right: 12px;}

  tr.data-row td.list-price {width: 75px; overflow: hidden;}
  tr.data-row td.list-buttons {width: 40px;}


  .popup {margin: 0 auto; width: 94%; top: 15%; left: 3%;}

  .btn-budget-add {left: 20px;}

  table.mb--table .action-buttons-holder {display: none; position: absolute; width: 175px; right: 10px; background: #fff;  top: 1px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.16); border-radius: 6px; z-index: 10000;}  
  table.mb--table tr:hover .action-buttons-holder {display: none;}
  table.mb--table tr:hover .action-buttons-holder {display: none;}
  table.mb--table.payments-list .action-buttons-holder {width: 130px;}
  table.mb--table.payments-list.for-add-payment .action-buttons-holder {width: 175px;}
  table.mb--table .close-row-menu {display: inline-block;}
  table.mb--table .btn-action.btn-icon-points {display: inline-block;}
  table.mb--table .action-buttons-holder .btn-action {display: inline-block;}
  table.mb--table .is-setup {display: none;}

  .budget-holder th.col-actions {width: 40px;}


  tr.data-row td {padding: 9px 20px;}
  tr.data-row .small-padding {padding: 2px 10px 1px;}

  h1 .selected-filter {display: inline-block;}

  .public-pages .image-1 {display: none; position: relative; top: 0; left: 0; margin-top: 24px; }
  .content-public .money-message {width: 100%;}
  .content-public.footer-padding {padding-bottom: 200px;}
  .footer-public {height: 200px;}
    .footer-public ul {right: 20px; left: auto;}

  .wrapper-public {padding: 48px 0;}

  /*.footer-public .social-btn-holder {position: absolute; left: calc(50% - 152px); top: 60px;}*/
  .footer-public .social-btn-holder {position: relative; float: none; left: 0; top: 0; text-align: center; padding: 14px 0 0;}

  .index-page .slide-buttons-nav {display: none;}
  .index-page .slide-labels {display: none;}
  .index-page .slide-holder {display: none;}

  .index-page .logotype-holder {top: 20px;}

  .filter-by-range-holder {top: 65px; }
    .filter-by-range-holder .btn-range {display: none}

}

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

  .public-pages h1 {font-size: 40px; line-height: 52px; padding: 40px 0 24px;}

  .budget-statistics {height: auto; background: #fff; border-radius: 6px; margin: 0 0 20px;}

  .budget-statistics .summary-detail {display: none;}
  .budget-statistics .item {float: none; width: 100%; border-radius: 0px; padding: 14px 20px 14px 80px; margin-right: 0px; box-sizing: border-box; border-top: 1px solid #E9EAED;}

  .budget-statistics .item.total {background-position: 20px 14px; border-top: none;}
    .budget-statistics .item.total .btn {position: absolute; right: 15px; top: 20px; height: 30px; width: 30px; background: url(/images/icon/set-mini.svg) 0 -110px no-repeat;}
    .budget-statistics .item.total .btn.open {background-position: 0 -174px;}
  .budget-statistics .item.spent-all {background-position: 20px -86px;}
  .budget-statistics .item.spent-budget {background-position: 20px -186px;}
  .budget-statistics .item.spent-out {background-position: 20px -286px;}

  .budget-holder #budget-list .progressbar-holder {display: none;}
  .budget-holder #budget-list .progressbar {padding: 0; width: 0px; display: none;}
  .budget-holder thead {display: none;}

  .keyword-filter-holder {width: calc(100% - 88px); box-sizing: border-box; position: absolute; top: 80px; right: 68px; display: none;}

  .header-public {height: 55px; }
    .header-public ul {display: none; padding: 0px 24px 24px; float: none; position: absolute; top: 77px; width: calc(100% - 88px); background: #fff; left: 20px; z-index: 1000; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06), 0px 16px 28px rgba(0, 0, 0, 0.1); border-radius: 6px;}
      .header-public ul li {display: block; padding: 0;}
      .header-public ul li.selected span:before {width: 100%;}
    .header-public .logotype {padding: 6px 0 0;}
    .header-public .icon-public-menu {display: block;}

  .report-holder .report-keywords-list .table-row {min-height: 82px;}
  .report-holder .report-keywords-list .table-row .table-cell.title {padding-right: 200px;}
  .report-holder .report-keywords-list .table-row .table-cell.progress {top: 30px; right: 0; width: 200px;}
  .report-holder .report-keywords-list .table-row .table-cell.amount {top: 4px; right: 0px; width: 200px;}

  .report-holder .report-summary .table-cell.amount {width: 200px;}

  .filter-by-range-holder {top: 76px; right: 10px; padding: 0;}

}

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

  .public-pages h1 {font-size: 32px; line-height: 42px; padding: 30px 0 14px;}

  .index-page .logotype-holder img {width: 180px;}

  h1 {border: none;}
  .content-holder {margin: 0px 0px 20px 0;}

  .header-holder-top .logotype {left: 20px;}

  .index-page .left-holder {float: inherit; width: 100%; height: 10%;}
  .index-page .right-holder {margin-left: 0; min-height: 50%; height: 90%; padding: 0px;}
  .index-page .side-holder {border-radius: 6px 6px 0 0;}
  .index-page .left-holder h1 {font-size: 22px;}
  .gr-message-popup {top: 75px;}
  .index-page .gr-message-popup {top: 75px;}
  .gr-message-popup.error {background: rgba(255, 0, 0, 0.9);}

  .index-page .form-holder {width: calc(100% - 20px);}

  /*input[type="date"],
  input[type="number"],
  input[type="email"],
  input[type="text"],
  input[type="password"] {background-color: #fff;}*/
  /*.add-payment-holder .tagify {background-color: #fff;}*/

  h1 {padding: 12px 0; font-size: 22px;}
  .filter-holder {top: 56px; padding: 29px 12px; right: 10px;}

  /*tr.title td {padding: 9px 10px;}*/
  tr.data-row td {padding: 9px 0 9px 20px; max-width: 100px;}
    tr.data-row td[contenteditable="true"] div {max-height: 25px; overflow: hidden;}

  tr.data-row [contenteditable="true"]:active div,
  tr.data-row [contenteditable="true"]:focus div {
    max-height: 100%;
  }

  .budget-holder tbody td.col-name {overflow: hidden; max-height: 44px;}
  .budget-holder tbody td.col-amount {width: 60px;}
  .budget-holder tbody td.col-progress {width: 60px;}
    .budget-holder tbody td.col-progress .btn-action-holder {display: none;}
  .budget-holder tbody td.col-actions {width: 40px; padding: 2px 10px 2px 0;}
  .budget-holder tbody .fraction {display: none;}

  .payments-list .col-actions {width: 40px;}
  .payments-list.for-add-payment .col-actions {width: 40px;}

  .keyword-filter-holder {top: 70px; right: 68px;}
  .keyword-filter-btn {position: absolute; top: 76px; right: 50px;}

  .content-empty-holder {padding: 20px 0px 0;}
    .content-empty-holder .empty-img {background-size: 60% 60%; width: 120px; height: 120px;}
    .content-empty-holder .calc-img {background-size: 60% 60%; width: 120px; height: 120px;}

  .content-error-page {padding: 10px 5px 5px;}
    .content-error-page h2 {font-size: 24px; padding-top: 20px;}
    .content-error-page .empty-img {background-size: 60% 60%; width: 120px; height: 120px;}
    .content-error-page .calc-img {background-size: 60% 60%; width: 120px; height: 120px;}
    .content-error-page .notice {padding: 20px 10px 5px;}

  .content-public.footer-padding {padding-bottom: 320px;}
  .footer-public {height: 320px;}

  .footer-public .logotype {margin: 0 auto; width: 189px; display: block;}

  .footer-public ul {position: relative; left: 0; display: block;}
    .footer-public ul li {display: block; text-align: center;}
    .footer-public ul span {padding: 4px 0;}
    .footer-public ul a {padding: 4px 0;}


  .footer-public .social-btn-holder {padding: 28px 0 0;}

  .report-holder .report-keywords-list .table-row {min-height: 82px;}
  .report-holder .report-keywords-list .table-row .table-cell.title {padding-right: 120px;}
  .report-holder .report-keywords-list .table-row .table-cell.progress {top: 30px; right: 0; width: 100px;}
  .report-holder .report-keywords-list .table-row .table-cell.amount {top: 4px; right: 0px; width: 100px;}
  .report-holder .report-summary .table-cell.amount {width: 100px;}


}

@media screen and (max-width: 600px) {
  .add-payment-holder {width: 100%; padding: 0px 20px; box-sizing: border-box;}
  .btn-budget-add { height: 22px; padding: 0; height: 56px; width: 56px;}
    .btn-budget-add span {display: none;}
  .btn-budget-add:before {left: 14px; top: 15px;}
}