.exp-analysis {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px
}

.exp-analysis .section-loader {
    background-color: #fff;
    z-index: 9 !important;
}

.exp-analysis .slimScrollBar {
    z-index: 8 !important;
}

.time-frame label {
    position: static !important;
    margin: 0;
    color: #222;
}

.v-hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
}

/*#analysisTabsContainer.section-loading{height:80vh}*/
.ui-dialog.generic-dialog .btns .btn:not(:last-child) {
    margin-right: 15px;
}

.ui-dialog.generic-dialog .form .label, .ui-dialog.generic-dialog .form label {
    text-transform: capitalize !important;
    color: rgba(117, 117, 117, 1);
}

.ui-dialog.generic-dialog .img-holder {
    margin: 0 0 30px;
}

.ui-dialog.generic-dialog .btn {
    min-width: 144px;
}

.ui-dialog.generic-dialog .title {
    font-size: 1.375em;
    line-height: 1.4545454545;
    margin: 0 0 5px;
    font-weight: 500;
}

.ui-dialog.generic-dialog p.info {
    font-size: 13px;
    line-height: 1.7857142857;
    margin-bottom: 40px;
}

.ui-dialog.generic-dialog p.info.info-danger {
    color: #E02020;
    margin: 0 0 48px;
}

.ui-dialog .alert.alert-danger .icon-cross {
    top: 50%;
    right: 0;
    font-size: 10px;
    font-weight: 400;
    margin: 20px 0;
    position: relative
}

.ui-dialog .alert.alert-danger {
    margin: 20px 0;
}

.no-records.no-feature:not(.d-none) + .summary-wrapper {
    display: none;
}

.no-feature.no-records {
    padding: 80px 0;
}

#categoryViewTab .container-empty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.container-empty {
    height: 100%;
    width: 100%
}

.filter-header {
    padding: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid #EBEFF4
}

.filter-header .heading {
    font-size: 1em;
    line-height: 1.5;
    color: #666;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0
}

.filter-link-toggle {
    margin-bottom: 0
}

.filter-link-toggle li {
    margin-left: 25px;
    display: block;
    float: left
}

.filter-link-toggle .link {
    font-size: .92857em;
    line-height: 1.46154;
    color: #444;
    letter-spacing: .2px;
}

.filter-link-toggle .link:focus, .filter-link-toggle .link:hover {
    -webkit-transition: color .1s;
    -o-transition: color .1s;
    transition: color .1s;
}

.filter-link-toggle .ico {
    color: #757575;
    margin-left: 10px;
    vertical-align: middle
}

.filters-wrapper.row {
    margin: 0;
    border-bottom: 1px solid #EBEFF4
}

.filters-wrapper .transaction-period-drop .v-bar {
    height: 15px;
    padding: 0 0 15px;
}

.filters-wrapper .transaction-period-drop .date-range .form-control {
    text-transform: uppercase;
}

.filters-wrapper .transaction-period-drop .card-body {
    padding: 15px 20px 0 20px;
}

.filters-wrapper #dateRangeHolder.date-range {
    margin-top: 10px;
}

.filters-wrapper #stmtFiltersHolder.statements {
    margin-top: 10px;
}

.filter-holder {
    padding-left: 0;
    padding-right: 0;
    border-right: 1px solid #ebeff4;
    max-height: 70px
}

.filter-holder:last-child {
    border-right: none
}

.filter-holder .timerange {
    margin: 0;
    font-size: 12px
}

.filter-holder .timerange strong {
    color: #000;
    font-weight: 500
}

.filter-holder .timerange .to {
    font-size: 11px;
    margin: 0 5px;
    color: #666;
}

.filter-holder .filter {
    padding: 15px 20px 15px;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer
}

.filter-holder .filter .title {
    text-transform: uppercase;
    font-size: 0.786em !important;
    line-height: 1.54545;
    color: rgba(117, 117, 117, 1);
    display: inline-block;
    width: 100%;
}

.filter-holder .filter:focus .title, .filter-holder .filter:hover .title {
    color: #757575
}

.filter-holder .filter .selected, .filter-holder .filter .value {
    display: block;
    font-size: 0.857em;
    letter-spacing: .2px;
    color: #222;
    font-weight: 400;
    line-height: 1.5;
}

.filter-holder .status-selection-list .btn {
    padding: 2px 12px;
    font-size: 11px;
    border: none;
    line-height: 18px;
    border-radius: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #757575;
}

.filter-holder .status-selection-list .btn:hover, .filter-holder .status-selection-list .btn:focus {
    outline-offset: 0
}

:lang(es) .status-selection-list.border-style {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

:lang(es) .filter-holder .status-selection-list .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2px 11px;
}

.filter-holder .filter-select.collapsed + .slimScrollDiv {
    display: none
}

.filter-holder .filter.filter-select {
    position: relative
}

.filter-holder .filter.filter-select:before {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: rgba(117, 117, 117, 1)
}

.filter-holder .filter.filter-select.datetime {
    position: relative
}

.filter-holder .filter.filter-select.datetime:before {
    content: "\e97a";
    font-family: cholder4
}

.filter-holder .filter.filter-select.dropdown:before {
    font-size: 20px;
    content: "\e941";
    font-family: cholder4
}

.filter-holder .categories-drop {
    border: 1px solid rgba(191, 191, 191, 0.3);
    position: relative;
    z-index: 4;
    padding: 10px 15px;
    background: #fff
}

@media (min-width: 768px) {
    .filter-holder .categories-drop {
        -webkit-box-shadow: 0 0.714rem 1.429rem 0 rgb(0 0 0 / 10%);
        box-shadow: 0 0.714rem 1.429rem 0 rgb(0 0 0 / 10%);
    }
}

.filter-holder .categories-drop .slimScrollDiv {
    max-height: 186px !important;
    height: auto !important;
}

.filter-holder .categories-drop .list {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 186px;
    height: auto !important;
}

.filter-holder .categories-drop .list li {
    padding: 10px 0
}

.filter-holder .categories-drop .card {
    padding-left: 3px;
    border: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.filter-holder .categories-drop label {
    margin: 0 0 0 10px;
    color: #666;
    font-size: 14px;
    width: calc(100% + -34px);
}

.filter-holder .datetime-drop {
    min-width: 380px;
    position: relative;
    z-index: 5
}

.filter-holder .prev-statement .duration {
    background-color: #fff !important
}

.filter-holder .prev-statement .stmt-period {
    margin-bottom: 10px
}

.filter-holder .prev-statement ul {
    margin-bottom: 0
}

.filter-holder .prev-statement ul li {
    margin-bottom: 3px;
    width: 100%
}

.filter-holder .prev-statement ul li:last-child {
    margin-bottom: 0
}

.filter-holder .prev-statement ul a.link {
    display: block;
    padding: 3px 5px;
    border-radius: 4px;
    color: #000
}

.filter-holder .prev-statement ul a.link.active *, .filter-holder .prev-statement ul a.link:focus *, .filter-holder .prev-statement ul a.link:hover * {
    color: #fff
}

.filter-holder .trans-period-drop {
    border: solid #e3e4e5;
    border-width: 0 1px 1px;
    background-color: #fff;
    list-style: none;
    padding: 15px 15px;
    margin: 0
}

.filter-holder .trans-period-drop li {
    padding: 0;
    margin: 0 0 10px
}

.filter-holder .trans-period-drop .duration {
    width: 100%;
    display: block;
    border: 1px solid #e5eaf1;
    color: #666;
    border-radius: 4px;
    padding: 10px 15px;
    background-color: rgba(235, 239, 244, .5)
}

.filter-holder .trans-period-drop .duration:focus, .filter-holder .trans-period-drop .duration:hover {
    background-color: #fff
}

.filter-holder .stmt-period {
    width: 65%;
    float: left
}

.filter-holder .stmt-period .title {
    font-size: 12px;
    color: #444
}

.filter-holder .stmt-time {
    width: 35%;
    text-align: right;
    float: right;
    color: #666;
    font-size: .78571em;
    line-height: 1.63636
}

.filter-holder .stmt-time .date {
    display: block;
    letter-spacing: .18px
}

.filter-holder .date-range .duration {
    border: 0
}

.filter-holder .date-range .duration:hover {
    background-color: rgba(235, 239, 244, .5)
}

.manage-tags .header {
    padding: 25px;
    position: relative
}

.manage-tags .header h3 {
    font-size: 1.14286em;
    line-height: 1.5;
    margin: 0 15px 0 0
}

.manage-tags .header .holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px
}

.manage-tags .header .types .btn {
    padding: 0 20px;
    font-size: .78571em;
    line-height: 1.54545
}

.manage-tags .header .types ul {
    margin-top: 0
}

.manage-tags .header .info {
    font-size: .92857em;
    line-height: 1.46154;
    color: #666;
    max-width: 78%;
    margin-bottom: 0
}

.manage-tags #addNewGroupBtn, .manage-tags #addNewTagBtn {
    position: absolute;
    top: 50%;
    right: 25px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.list-grid-wrapper .list-inline {
    margin-bottom: 0
}

.list-grid-wrapper .grp-actions {
    display: none;
    position: absolute;
    top: 50%;
    right: 25px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.list-grid-wrapper .grp-actions .link {
    color: #cbcbcb;
    margin-left: 20px
}

.list-grid-wrapper .grp-actions .link .ico {
    margin-right: 5px
}

.list-grid-wrapper .grp-actions .link .text {
    font-size: .85714em;
    line-height: 1.5
}

.list-grid-wrapper .grp-item {
    position: relative;
    padding: 30px 25px 20px;
    margin: 0;
    display: block;
    border-top: 1px solid rgba(191, 191, 191, .25)
}

.list-grid-wrapper .grp-item:only-child {
    border-bottom: 1px solid rgba(191, 191, 191, .25);
    border-top: 0
}

.list-grid-wrapper .grp-item .heading {
    display: block;
    font-size: 1.14286em;
    line-height: 1.1875;
    margin-bottom: 5px
}

.list-grid-wrapper .grp-item .desc {
    display: block;
    font-size: .85714em;
    line-height: 1.5;
    color: #666;
}

.list-grid-wrapper .grp-item:hover {
    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .12)
}

.list-grid-wrapper .grp-item:hover .grp-actions {
    display: inline
}

.list-grid-wrapper .grp-tags {
    max-width: 70%
}

.list-grid-wrapper .grp-tags .add-more {
    height: 30px;
    width: 30px;
    padding: 5px;
    border-radius: 100%;
    background-color: #f2f5f8;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.list-grid-wrapper .grp-tags .add-more .ico {
    color: #ccc
}

.tag-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 10px;
    color: #444;
    border-radius: 4px;
    border: 1px solid #e3e7ed;
    font-size: .85714em;
    line-height: 1.5;
    padding: 5px 10px 5px 10px
}

.tag-link .icon-tag {
    margin-right: 10px;
    font-size: 8px
}

.tag-link .icon-minus {
    display: inline-block;
    border: 1px solid #cbcbcb;
    border-radius: 100%;
    font-size: 8px;
    color: #cbcbcb;
    padding: 1px;
    margin: 0 0 0 10px
}

.tags-grid .item-wrapper {
    display: table;
    width: 100%
}

.tags-grid .icon-tag {
    display: table-cell;
    width: 5%
}

.tags-grid .tag-info {
    display: table-cell;
    width: 95%
}

.tags-grid .tag-link .text {
    margin: 0;
    display: inline;
    font-weight: 500
}

.tags-grid .tag-link .grp {
    color: #666;
    margin: 0 5px 0 0
}

.tags-grid .tag-link .dir {
    color: #666;
    text-transform: lowercase;
    margin: 0 5px 0 0;
    font-weight: 300
}

.selected-tags-list {
    padding: 10px 15px 5px;
    margin-bottom: 0
}

.new-tag-text {
    text-align: right;
    margin: 15px 5px 0 0
}

.new-tag-text a {
    color: #34a67c;
    font-weight: 500;
    font-size: .85714em;
    line-height: 1.5
}

.added-tags-list {
    display: none;
    margin-bottom: 0
}

.added-tags-list li {
    width: 100%;
    border-top: 1px solid #ebeff4
}

.added-tags-list li.added {
    background-color: #f9fbfc
}

.added-tags-list li.added .add-btn {
    display: none
}

.added-tags-list li .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px;
    color: #666
}

.added-tags-list li .link:focus, .added-tags-list li .link:hover {
    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .12)
}

.added-tags-list li .link:focus .add-btn, .added-tags-list li .link:hover .add-btn {
    opacity: 1
}

.added-tags-list li .link .icon-tag {
    font-size: 8px;
    margin-right: 10px
}

.added-tags-list .add-btn {
    font-size: 16px;
    opacity: 0;
}

.added-tags-list li.total-tags-count {
    background-color: #ebeff4;
    color: #666;
    padding: 10px 15px
}

.added-tags-list li.total-tags-count .text {
    font-size: .85714em;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .5px
}

.added-tags-list .text {
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.tag-search-input .field.field-focused ~ .added-tags-list {
    display: block
}

.tag-search-input .field.field-focused ~ .selected-tags-list {
    display: none
}

.add-group-form {
    padding: 25px
}

.add-group-form .form-header h3 {
    font-size: 1.14286em;
    line-height: 1.5
}

.add-group-form .form-header p {
    font-size: .92857em;
    line-height: 1.84615;
    color: #444;
    letter-spacing: .22px;
    font-weight: 300
}

.add-group-form .tag-search-input {
    border-radius: 4px;
    border: 1px solid #dfe6ee;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
    background-image: none
}

.add-group-form .tag-search-input .form-control {
    border-radius: 4px;
    border: none;
    position: relative;
    padding: 15px;
    height: 40px
}

.add-group-form .tag-search-input .form-control::-webkit-input-placeholder {
    color: #666;
}

.add-group-form .tag-search-input .form-control:-ms-input-placeholder {
    color: #666;
}

.add-group-form .tag-search-input .form-control::-ms-input-placeholder {
    color: #666;
}

.add-group-form .tag-search-input .form-control::-moz-placeholder {
    color: #666;
}

.add-group-form .tag-search-input .form-control::placeholder {
    color: #666;
}

.add-group-form .tag-search-input .ico {
    color: #aeaeae;
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.add-tag-form {
    padding: 25px 30px
}

.add-tag-form .form-header h3 {
    font-size: 1.14286em;
    line-height: 1.5
}

.add-tag-form .form-header p {
    font-size: .92857em;
    line-height: 1.84615;
    color: #444;
    letter-spacing: .22px;
    font-weight: 300
}

.predefined-color {
    margin: 10px 0 0
}

.predefined-color li {
    vertical-align: top
}

.predefined-color li a {
    width: 37px;
    height: 37px;
    border: 2px solid transparent;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.predefined-color li a.custom-color {
    border: none
}

.predefined-color li a.custom-color:focus, .predefined-color li a.custom-color:hover {
    border: none
}

.predefined-color li a.checked, .predefined-color li a:focus, .predefined-color li a:hover {
    border: 2px solid rgba(217, 217, 217, .5)
}

.predefined-color li a.checked::before {
    color: #fff;
    content: "\e9c2";
    display: inline-block;
    font-family: cholder4;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 10px
}

.predefined-color .swatch {
    display: block;
    width: 23px;
    height: 23px;
    border-radius: 100px
}

.field-visibility a {
    color: #666;
}

.field-visibility a:focus, .field-visibility a:hover {
    color: #666;
}

.field-visibility .label {
    display: block;
    margin-bottom: 15px;
    font-size: .85714em;
    line-height: 1.5
}

.field-visibility .slider-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.field-visibility .slider-checkbox .check-text {
    margin: 0;
    font-size: .92857em;
    line-height: 1.46154;
    color: #000
}

.tag-rules-holder h3 {
    font-size: 1.14286em;
    line-height: 1.5;
    margin-bottom: 30px
}

.tag-rules-holder .options-field {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 48% !important;
    flex: 0 0 48% !important;
    max-width: 48% !important
}

.add-rule {
    color: #666;
}

.add-rule .ico-plus {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 29px;
    height: 29px;
    background-color: #f2f5f8;
    border-radius: 100px;
    margin: 0 10px 20px 0;
    color: #ccc
}

.add-rule:focus .ico-plus, .add-rule:hover .ico-plus {
    color: #ccc
}

a.custom-picker {
    position: relative
}

a.custom-picker .minicolors {
    position: static !important
}

a.custom-picker .bg {
    cursor: pointer;
    width: 23px;
    height: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 100px;
    -webkit-filter: blur(.1px);
    filter: blur(.1px);
    background: url(../images/exp-analysis/colour-wheel.jpg) no-repeat 50% !important
}

a.custom-picker.checked::before {
    color: #fff;
    content: "\e9c2";
    display: inline-block;
    font-family: cholder4;
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 10px
}

.pickr .pcr-button {
    background: url(../images/exp-analysis/colour-wheel.jpg) no-repeat 50% !important;
    border-radius: 100%;
    width: 23px;
    height: 23px;
    position: absolute;
    top: 49%;
    left: 49%;
    -webkit-transform: translate(-49%, -49%);
    -ms-transform: translate(-49%, -49%);
    transform: translate(-49%, -49%);
    z-index: 4;
    -webkit-filter: blur(.1px);
    filter: blur(.1px)
}

.pickr .pcr-button:after, .pickr .pcr-button:before {
    position: static;
    background: 0 0 !important
}

.pickr .pcr-button:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.pickr {
    width: 37px;
    height: 37px;
    border: 2px solid transparent;
    border-radius: 100%;
    position: relative
}

.pickr.checked, .pickr:focus, .pickr:hover {
    border: 2px solid rgba(217, 217, 217, .5)
}

.pickr.checked::before {
    color: #fff;
    content: "\e9c2";
    display: inline-block;
    font-family: cholder4;
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 10px
}

.color-view-box {
    top: 22px;
    left: 5px;
    width: 24px;
    height: 24px;
    position: absolute;
    border-radius: 100%;
    background-image: url(../images/minicolors.png);
    background-position: -80px 0
}

.color-view-box > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.minicolors-inline .minicolors-panel {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.minicolors-theme-default.minicolors, .minicolors-with-opacity .minicolors-panel {
    width: 100% !important;
    border: none !important
}

.minicolors .minicolors-grid {
    width: 78% !important;
    background-image: url(../images/gradient.png) !important;
    background-position: 0 0 !important;
    border-radius: 10px
}

.minicolors .minicolors-grid-inner {
    width: 100% !important
}

.minicolors-panel.minicolors-slider-hue {
    position: static !important
}

.minicolors-slider.minicolors-sprite {
    position: absolute !important;
    right: 0 !important;
    left: auto;
    border: 5px solid #fafafa;
    border-radius: 10px
}

.minicolors-slider.minicolors-sprite .minicolors-picker {
    height: 24px !important;
    width: 22px !important;
    border-radius: 75px;
    left: -7px !important;
    border: 2px solid #fff !important;
    background: -o-linear-gradient(67.82deg, #ebebeb 0, #fff 100%);
    background: linear-gradient(22.18deg, #ebebeb 0, #fff 100%)
}

.minicolors-opacity-slider.minicolors-sprite {
    position: absolute !important;
    right: 50px !important;
    left: auto !important;
    border: 5px solid #fafafa;
    border-radius: 10px
}

.minicolors-opacity-slider.minicolors-sprite .minicolors-picker {
    height: 24px !important;
    width: 22px !important;
    border-radius: 75px;
    left: -7px !important;
    border: 2px solid #fff !important;
    background: -o-linear-gradient(67.82deg, #ebebeb 0, #fff 100%);
    background: linear-gradient(22.18deg, #ebebeb 0, #fff 100%)
}

#customColorValue {
    padding-left: 40px
}

.member-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 15px 0 0;
    border: 1px solid #e3e7ed;
    background-color: rgba(235, 239, 244, .5);
    border-radius: 25px;
    padding: 1px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%
}

.member-card .ico {
    color: #10432e;
    margin: 0 10px 0 0
}

.member-card .num {
    margin: 0;
    display: inline;
    font-size: .78571em;
    line-height: 1.54545;
    font-weight: 300;
    color: #666
}

.member-card strong {
    margin: 0 0 0 3px;
    font-weight: 500
}

.delete-row-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 2% !important;
    flex: 0 0 2% !important;
    max-width: 2% !important
}

.delete-row-icon .ico {
    font-size: 16px;
    color: #cbcbcb
}

.delete-row-icon:focus .ico, .delete-row-icon:hover .ico {
    color: #666;
}

#colorPalleteHolder .custom-color-pickr {
    position: static;
    width: calc(100%);
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    border-radius: 10px
}

#colorPalleteHolder .pcr-swatches {
    display: none
}

#colorPalleteHolder .pcr-color-palette {
    min-height: 149px;
    overflow: hidden;
    border-radius: 10px
}

#colorPalleteHolder .pcr-color-chooser {
    -webkit-box-ordinal-group: 4 !important;
    -ms-flex-order: 3 !important;
    order: 3 !important
}

#colorPalleteHolder .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser, #colorPalleteHolder .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity {
    margin-left: 2em
}

#colorPalleteHolder .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider, #colorPalleteHolder .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider {
    width: 13px;
    border: 2px solid #fafafa;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

#colorPalleteHolder .pcr-color-opacity .pcr-picker {
    -webkit-box-shadow: 4px 5px 10px 0 rgba(123, 122, 121, .2);
    box-shadow: 4px 5px 10px 0 rgba(123, 122, 121, .2);
    background-color: #fff !important;
    height: 24px;
    width: 23px
}

#colorPalleteHolder .pcr-color-chooser .pcr-picker {
    -webkit-box-shadow: 4px 5px 10px 0 rgba(123, 122, 121, .2);
    box-shadow: 4px 5px 10px 0 rgba(123, 122, 121, .2);
    background-color: #fff !important;
    height: 24px;
    width: 23px
}

.trans-period-chart {
    padding: 0;
    margin: 0;
    height: auto;
    border-bottom: 0
}

.chart-container {
    padding: 20px;
    position: relative
}

.chart-container .toggle-aside {
    position: absolute;
    right: 25px;
    top: 35px;
    color: #d2d2d2;
    cursor: pointer;
    display: none
}

.chart-container .toggle-aside.visible {
    display: block
}

.chart-container .heading {
    margin: 0 0 20px
}

.chart-container .heading h3 {
    font-size: .92857em;
    line-height: 1.46154;
    letter-spacing: .54px;
    color: #757575;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0
}

.chart-container.wide.col-md-8.col-lg-8 {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important
}

.chart-container.col-md-8.col-lg-8 {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 70% !important;
    flex: 0 0 70% !important;
    max-width: 70% !important
}

.chart-aside.col-md-4.col-lg-4 {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 30% !important;
    flex: 0 0 30% !important;
    max-width: 30% !important
}

.chart-aside {
    border-left: 1px solid rgba(191, 191, 191, .25);
    -webkit-box-shadow: inset 3px 0 11px 0 rgba(0, 0, 0, .05);
    box-shadow: inset 3px 0 11px 0 rgba(0, 0, 0, .05);
    background-color: rgba(255, 255, 255, .9);
    padding: 35px 31px 30px 27px !important
}

.chart-aside .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: center;
    align-content: center;
    margin: 0 0 42px
}

.chart-aside .header .title {
    font-size: .78571em;
    line-height: 1.54545;
    color: #848484;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.chart-aside .header .ico {
    color: #c8c9cc;
    font-size: 12px;
    cursor: pointer
}

.chart-aside .header .ico:hover, .chart-aside .header .ico:focus {
    color: #666;
}

.chart-aside .breadcrumb {
    padding: 0;
    background: 0 0;
    margin: 0;
}

.chart-aside .breadcrumb-item + .breadcrumb-item::before {
    content: "\e93f";
    font-family: cholder4
}

.chart-aside .meta-category {
    display: inline-block;
    vertical-align: top;
    max-width: 185px;
}

.chart-aside .stats-holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeef
}

.chart-aside .stats-holder strong {
    display: block;
    font-weight: 500;
    color: #000000
}

.chart-aside .stats-holder .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.chart-aside .stats-holder .name .ico {
    margin: 3px 15px 0 0
}

.chart-aside .stats-holder .info .title {
    font-size: 1em;
    line-height: 1.5
}

.chart-aside .stats-holder .info .transactions {
    font-size: .92857em;
    line-height: 1.38462;
    color: #757575
}

.chart-aside.hidden {
    display: none
}

.categories-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.categories-list strong {
    display: block;
    font-weight: 500;
    font-size: .92857em;
    line-height: 1.61538;
    color: #666666
}

.categories-list .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.categories-list .name .ico {
    margin: 3px 15px 0 0;
    font-size: 22px;
}

.categories-list .name .info {
    max-width: 180px;
    word-break: break-word;
}

.categories-list .category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #717171;
    padding: 10px 10px;
    border: 1px solid transparent;
    border-radius: 4px
}

.categories-list .category .transactions {
    font-size: .85714em;
    line-height: 1.5;
    color: #757575
}

.summary-wrapper {
    position: relative;
    padding: 9px 19px;
    border-bottom: 1px solid rgba(191, 191, 191, .25)
}

.summary-wrapper .balance-summary {
    border-top: none;
    padding: 0;
    margin: 0
}

.summary-wrapper .balance-summary .title {
    font-size: 1em;
    line-height: 1.14286
}

.summary-wrapper .balance-summary li {
    width: 33.333333%;
    margin: 0
}

/* Attach Receipt */
.generic-dialog.attachment-dialog {
    min-height: 340.553px !important;
}

.attachment-dialog .dropzone {
    border: none !important;
    padding: 0 !important;
    min-height: inherit;
}

.attachment-dialog .dropzone .info-holder {
    border-radius: 4px;
    padding: 31px 15px;
    margin-bottom: 20px;
    border: 1px dashed #d8dde4 !important;
    background-color: rgba(233, 237, 242, .3) !important;
    font-size: .78571em !important;
    line-height: 1.63636 !important;
    text-align: center !important;
}

.attachment-dialog .dropzone.dz-clickable.dz-started {
    padding: 0;
    border: none !important;
    background: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.attachment-dialog .dropzone.dz-clickable.dz-started .info-holder {
    display: none
}

.attachment-dialog .dropzone.dz-clickable.dz-started .btns {
    margin-top: 20px;
}

.attachment-dialog .dropzone .dz-message {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 !important;
}

.attachment-dialog .dropzone .dz-message .dz-button {
    color: transparent;
    padding: 0;
    border-width: 0;
    width: 100%;
    height: 100%;
    background: none;
    border-radius: 4px;
}

.attachment-dialog .dropzone .dz-message .dz-button:hover, .attachment-dialog .dropzone .dz-message .dz-button:focus {
    background: transparent;
}

.dz-drag-hover.dropzone .dz-message .dz-button:hover, .dz-drag-hover.dropzone .dz-message .dz-button:focus,
.dz-drag-hover.dropzone .dz-message .dz-button {
    background: #fff;
    color: #000;
    line-height: 120px;
    text-align: center;
    outline: 1px dashed #a2a2a2;
}

.attachment-dialog .dropzone.dz-drag-hover .info-holder {
    opacity: 0;
}

.attachment-dialog .dropzone .dz-message > span {
    display: block;
    margin: 10px 0;
}

.attachment-dialog .dropzone .info-holder strong {
    font-weight: 500;
    color: #444444;
    font-size: 11px;
}

.attachment-dialog .dropzone .info-holder .ico {
    font-size: 16px
}

.attachment-dialog .dropzone .info-holder .desc {
    font-size: 11px;
    margin-bottom: 0;
    color: #666
}

.attachment-dialog .dropzone .info-holder .desc strong {
    color: #666
}

.attachment-dialog .dropzone .info-holder .icon-holder {
    margin-bottom: 5px;
    color: #757575
}

.attachment-dialog .dropzone .info-holder:last-child {
    margin: 0
}

.attachment-dialog .dropzone .dz-preview.dz-image-preview {
    margin: 0 !important;
    border: 1px solid #d8dde4 !important;
    background-color: rgba(233, 237, 242, .3) !important;
    border-radius: 5px;
    padding-bottom: 20px;
    overflow: hidden;
    height: 290px;
}

.attachment-dialog .dropzone .dz-preview .dz-image {
    height: 290px !important;
    width: 100% !important;
    border-radius: 5px !important;
    display: flex;
}
.attachment-dialog .dropzone .dz-preview .dz-image img {
    margin: auto;
}

.attachment-dialog .dropzone .dz-preview:hover .dz-image img {
    -webkit-filter: none !important;
    filter: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

.attachment-dialog .dropzone .dz-preview .dz-details .dz-size,
.attachment-dialog .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    display: none !important
}

.attachment-dialog .dropzone .dz-preview .dz-remove {
    position: absolute;
    top: 15px;
    z-index: 999;
    color: #fff;
}

.attachment-dialog .dropzone .dz-preview.dz-image-preview .dz-details {
    padding: 22px 18px 18px;
    text-align: left;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 80%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 80%) 0, rgba(0, 0, 0, 80%) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0%)), to(rgba(0, 0, 0, 80%)));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0%) 0, rgba(0, 0, 0, 80%) 100%);
    background: linear-gradient(-180deg, rgba(0, 0, 0, 0%) 0, rgba(0, 0, 0, 80%) 100%);
}

.attachment-dialog .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    background: none !important
}

.attachment-dialog .dropzone .dz-preview .dz-details .dz-filename:hover span {
    background: none !important;
    border: none !important;
}

.attachment-dialog .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: none !important
}

.attachment-dialog .dropzone .dz-preview .dz-progress {
    display: none !important;
}

#attachReceiptDialog .title {
    font-weight: 500
}

#attachReceiptDialog.generic-dialog {
    padding: 30px !important
}

.attachment-dialog {
    position: relative
}

.attachment-dialog .btns .btn {
    min-width: 120px !important
}

/* Export Transactions */
.ui-dialog.export-trans-dialog .icon-cross {
    position: absolute;
    right: 25px;
    font-size: 12px;
    color: #c8c9cc
}

.ui-dialog.export-trans-dialog .icon-cross:focus, .attachment-dialog .icon-cross:hover {
    color: #666;
}

.ui-dialog.export-trans-dialog .generic-dialog {
    min-height: 533px !important;
    padding: 30px !important;
}

.ui-dialog.export-trans-dialog .slimScrollDiv {
    overflow: visible !important
}

.ui-dialog.export-trans-dialog .scroll-holder {
    height: 380px !important;
    margin: 0 -15px;
}

.ui-dialog.export-trans-dialog .list-inline-item {
    margin: 0;
}

.ui-dialog.export-trans-dialog .icon-cross {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
}

.ui-dialog.export-trans-dialog .title {
    font-size: 1.571em !important;
    line-height: 1.455em !important;
    font-weight: 500 !important;
    color: #000;
}

.ui-dialog.export-trans-dialog .sub-title {
    display: block;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 500;
    margin: 0 0 20px;
    color: #000;
}

.ui-dialog.export-trans-dialog .info {
    margin: 0 0 30px
}

.ui-dialog.export-trans-dialog .btn-light {
    min-width: 203px !important;
}

.ui-dialog.export-trans-dialog .export-types {
    margin: 0 0 40px;
    padding: 0 15px
}

.ui-dialog.export-trans-dialog .item {
    padding-right: 10px;
    padding-left: 5px;
}

.ui-dialog.export-trans-dialog .item .ico-holder {
    cursor: pointer;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    height: 100%;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ui-dialog.export-trans-dialog .item .ico {
    margin: 0 0 28px;
    font-size: 24px;
}

.ui-dialog.export-trans-dialog .item .text {
    font-size: 1.091em;
    line-height: 14px;
    color: #222;
    text-align: center;
    margin: 0;
    text-transform: none
}

.ui-dialog.export-trans-dialog .btns .btn {
    min-width: 203px !important;
}

.ui-dialog.export-trans-dialog .btn-export [class*="iradio"]:after {
    display: none
}

.ui-dialog.export-trans-dialog .btn-export [class*="iradio"] {
    background-color: #fff;
    border: 1px solid #D8DDE4;
    border-radius: 4px;
    min-height: 120px;
    min-width: 100%;
}

.ui-dialog.export-trans-dialog .btn-export [class*="iradio"].hover, .ui-dialog.export-trans-dialog .btn-export [class*="iradio"].checked, .ui-dialog.export-trans-dialog .btn-export [class*="iradio"].focus {
    outline: none;
}

.ui-dialog.export-trans-dialog .btn-export.sm [class*="iradio"] {
    min-height: 50px;
    min-width: 100%;
}

.ui-dialog.export-trans-dialog .btn-export [class*=iradio].disabled:before {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.7;
    z-index: 6;
    width: 100%;
    border-radius: 4px;
    cursor: not-allowed;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ui-dialog.export-trans-dialog .item.sm .ico-holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% - 50px)
}

.ui-dialog.export-trans-dialog .item.sm .ico-holder .ico {
    margin: 0
}

.ui-dialog.export-trans-dialog .ico-holder .icon-pdf2 {
    color: #E66256;
    font-size: 17px
}

.ui-dialog.export-trans-dialog .ico-holder .icon-excel {
    color: #348839;
    font-size: 17px
}

.ui-dialog.export-trans-dialog .ico-holder .icon-cvs {
    color: #2CA51A;
    font-size: 17px
}

.ui-dialog.export-trans-dialog .ico.icon-trans-only {
    color: #E66256;
    font-size: 20px
}

.ui-dialog.export-trans-dialog .ico.icon-graph-only {
    color: #4AAF63;
    font-size: 27px
}

.ui-dialog.export-trans-dialog .ico.icon-tng {
    color: #44A85D;
    font-size: 21px
}

/* Delete Transactions */
.ui-dialog.del-dialog-holder .title {
    font-weight: 700;
}

.ui-dialog.del-dialog-holder .btns .btn {
    min-width: 144px;
}

.ui-dialog.del-dialog-holder .btns .btn:not(:last-child) {
    margin-right: 15px;
}

.ui-dialog.download-success-dialog .title {
    color: #2D815F;
}

.ui-dialog.split-dialog-wrapper {
    position: relative;
}

.ui-dialog.split-dialog-wrapper .icon-cross {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 15px;
    color: #C8C9CC;
}

.ui-dialog.split-dialog-wrapper .split-trans-dialog.generic-dialog {
    padding: 30px !important
}

.ui-dialog.split-dialog-wrapper .title {
    display: block;
}

.ui-dialog.split-dialog-wrapper .sub-title {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #666;
    margin-bottom: 40px;
    font-weight: 400;
}

/* Manage Receipt */
.ui-dialog.manage-receipt-dialog {
    min-height: auto !important;
    width: 490px !important;
}

.ui-dialog.manage-receipt-dialog .generic-dialog {
    padding: 30px !important
}

.ui-dialog.manage-receipt-dialog .receipt-holder {
    max-width: 100%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #d8dde4;
    background-color: rgba(233, 237, 242, .3) !important;
    height: auto;
    min-height: auto;
    max-height: 290px;
}

.ui-dialog.manage-receipt-dialog .ico-holder {
    position: relative;
    z-index: 5;
    height: auto;
    min-height: auto;
    max-height: 290px;
}

.ui-dialog.manage-receipt-dialog .ico-holder img {
    max-height: 290px !important
}

.ui-dialog .icon-cross {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
    color: #c8c9cc
}

.ui-dialog .icon-cross:hover, .ui-dialog .icon-cross:focus, .attachment-dialog .icon-cross:hover {
    color: #666;
    outline: 1px dotted;
    outline-offset: 3px;
}

.manage-receipt-dialog .receipt-holder {
    position: relative;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder a {
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.432528);
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder a:hover, .manage-receipt-dialog .receipt-holder .receipt-hanlder a:focus {
    background: #fff;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder a.download-receipt-hanlder {
    padding: 7px 1.21em;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 10px;
    top: -1px;
    position: relative;
}

.manage-receipt-dialog .receipt-holder li:only-child a.download-receipt-hanlder {
    margin-right: 0;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder a.download-receipt-hanlder .ico {
    margin-right: 5px;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder a.remove-receipt-hanlder {
    height: 28px;
    width: 28px;
    padding: 5px;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder a.remove-receipt-hanlder > .ico {
    font-size: 10px;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder > li {
    margin-right: 18px;
}

.manage-receipt-dialog .receipt-holder .receipt-hanlder > li:last-child {
    margin-right: 0;
}

@media (max-width: 579px) {
    .ui-dialog.manage-receipt-dialog {
        width: calc(100% - 30px) !important
    }
}

/* Status Selection */
.status-selection-list li.active {
    border-radius: 11px;
}

.status-selection-list li.active > a {
    background-color: transparent;
}

/* Section Filters */
.filters-wrapper.row {
    position: relative;
    padding: 0 46px 0 0
}

.filters-wrapper.row #transButton {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.filters-wrapper.row #transButton .btn-filter {
    height: 100%;
    font-size: 16px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: #f2f5f8;
    color: #d2d2d2;
    padding: 0 15px;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.filters-wrapper.row #transButton .btn-filter:not([disabled]), .filters-wrapper.row #transButton .btn-filter:not([disabled]) {
    color: #fff
}

.filters-wrapper.row #transButton .btn-filter .icon-filter {
    margin-right: 4px;
}

.filters-wrapper.row #transButton .btn-filter .text-filter {
    font-weight: 500;
    font-size: 11px;
    line-height: 1.454;
    letter-spacing: 0.183333px;
}

@media (min-width: 768px) {
    .filters-wrapper.row {
        padding: 0 166px 0 0;
    }

    .filters-wrapper.row #transButton {
        width: 166px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .filters-wrapper.row #transButton .btn-filter {
        height: auto;
        border-radius: 100px;
        padding: 0.8181818181818182em 2.181818181818182em;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    button#btnfilter:hover:not([disabled]), button#btnfilter:focus:not([disabled]) {
        outline: dotted 1px #222;
    }

    /** TODO: Temporary Change **/
    .transaction-period-drop > a[data-toggle] {
        padding: 14px 40px 16px 22px;
    }
}

.chart-container .heading {
    overflow: hidden
}

.chart-container .heading h3 {
    float: left
}

.chart-container .heading .btn-back {
    float: right;
    background: 0 0;
    border: 1px solid #d8dde4;
    border-radius: 4px;
    min-width: 72px;
    font-size: 11px;
    line-height: 17px;
    color: #666;
    padding: 2px 5px;
    cursor: pointer
}

.chart-container.wide.col-md-8.col-lg-8 .heading {
    padding: 0 55px 0 0
}

.tooltip .tooltip-inner .tooltip-filters strong {
    font-size: 11px;
    line-height: 17px;
    display: block
}

.tooltip .tooltip-inner .tooltip-filters span {
    font-size: 9px;
    line-height: 13px;
    color: #fff
}

.tooltip-holder {
    border-radius: 5px;
    background: rgba(0, 0, 0, .85);
    font-size: 11px;
    margin: 0 auto;
    min-width: 220px;
    padding: 25px 20px;
    font-family: Heebo, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.tooltip-holder .title {
    color: #fff;
    display: block;
    margin: 0 0 10px
}

.tooltip-holder .title .icon-month {
    margin: 0 10px 0 0
}

.spending-list-tooltip {
    margin: 0;
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    padding: 0;
}

.spending-list-tooltip dt {
    float: left;
    margin: 0 0 5px;
    font-weight: 400;
}

.spending-list-tooltip strong.total-spend {
    display: inline-block;
    vertical-align: top;
    font-weight: 500
}

.spending-list-tooltip dd {
    overflow: hidden;
    text-align: right;
    margin: 0 0 5px
}

.category-useage-list {
    margin: 0;
    list-style: none;
    color: #fff;
}

.category-useage-list li {
    display: block
}

.category-useage-list li + li {
    margin: 10px 0 0
}

.category-useage-list li span.category-useage-name {
    display: block;
    font-size: 8px;
    line-height: 11px
}

.category-useage-list li strong.category-useage-value {
    display: block;
    font-size: 11px;
    line-height: 17px;
    font-weight: 500;
}

.category-useage-list li:first-child {
    padding: 10px 0 0;
    border-top: 2px solid #373737;
    margin: 10px 0 0;
}

.table-recent-transactions ul.indicators {
    margin: 0;
    display: table;
    width: 100%
}

.table-recent-transactions ul.indicators li {
    display: table-cell;
    vertical-align: top
}

.table-recent-transactions ul.indicators li .ico {
    font-size: 15px;
    color: #666666;
}

.table-recent-transactions ul.indicators li .ico:before {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 27px;
    height: 27px;
}

.category-bullet {
    height: 8px;
    width: 8px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    margin: 0
}

.category-text {
    display: flex;
    align-items: center;
    color: #464646
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th {
    padding: 5px 25px !important
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th .ui-jqgrid-resize {
    display: none !important;
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th:nth-child(1) {
    width: 15% !important;
    text-align: left !important;
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th:nth-child(2) {
    width: auto !important;
    text-align: left !important;
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th:nth-child(3) {
    width: 24% !important;
    text-align: left !important;
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th:nth-child(4) {
    width: 10% !important;
    text-align: center !important;
}

.trans-period-chart .ui-jqgrid-htable.table-custom thead tr th:nth-child(5) {
    width: 15% !important;
    text-align: right !important;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions {
    opacity: 0;
    z-index: -1
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr.pointer:hover {
    cursor: pointer
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr.has-next-split-trans-row:focus {
    outline: 1px dotted #686868
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr:hover .actions, .trans-period-chart .ui-jqgrid-btable.add > tbody > tr:focus .actions, .trans-period-chart .ui-jqgrid-btable.add > tbody > tr:focus-within .actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    z-index: 2;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td {
    padding: 16px 25px !important
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(1) {
    width: 15% !important;
    text-align: left !important;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(1) .date {
    width: auto !important;
    display: inline-block;
    vertical-align: top;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(2) {
    width: auto !important;
    text-align: left !important;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(2) .acquirer-name {
    color: #666;
    display: block;
    font-size: 0.786em;
    line-height: 16px;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(2) .acquirer-from {
    color: #666666;
    display: block;
    font-size: 0.786em;
    line-height: 19px;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(2) .meta-text {
    color: #262626;
    font-weight: 500;
    font-size: 1.182em;
    display: inline-block;
    vertical-align: bottom;
    line-height: 19px;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(3) {
    width: 24% !important;
    text-align: left !important;
    font-weight: 500;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(4) {
    width: 10% !important;
    text-align: center !important;
}

@media (min-width: 768px) {
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(4) {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(5) {
    width: 15% !important;
    text-align: right !important;
    position: relative;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions {
    position: absolute !important;
    margin: 0;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 28px 25px;
    background-color: #fff;
    min-width: 20.1rem;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li {
    display: block;
    float: left
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a {
    display: inline-block;
    vertical-align: top;
}
@media (min-width:768px) {
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a {color:#666666}
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li .ico {
    margin-right: 9px;
    color: #666666;
    font-size: 15px;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li:not(:first-child) {
    margin-left: 24px;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li span {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    line-height: 18px
}

.trans-period-chart .ui-jqgrid-resize-mark {
    display: none;
}

.trans-period-chart .split-table-holder {
    border: 1px solid rgba(191, 191, 191, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.trans-period-chart .split-table-holder th {
    border: none;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    font-weight: 500;
    padding: 15px 25px;
    background-color: #F9FAFB;
}

.trans-period-chart .split-table-holder th:nth-child(1) {
    width: 25%
}

.trans-period-chart .split-table-holder th:nth-child(2) {
    width: auto
}

.trans-period-chart .split-table-holder th:nth-child(3) {
    width: 25%;
    text-align: right
}

.trans-period-chart .split-table-holder td {
    padding: 15px 25px;
    border-top: 1px solid rgba(191, 191, 191, .20);
    background-color: #fff;
}

.trans-period-chart .split-table-holder td:nth-child(1) {
    width: 25%;
    font-weight: 500;
}

.trans-period-chart .split-table-holder td:nth-child(2) {
    width: auto
}

.trans-period-chart .split-table-holder td:nth-child(3) {
    width: 25%;
    text-align: right;
    font-weight: 500;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td[colspan="5"] {
    background: #fff !important
}

/* Split Transactions Dialog */
.remaining-count-holder {
    padding: 30px 0
}

.split-more-btn {
    float: left;
    margin: 5px 0;
}

.remaining-count-holder span {
    display: inline-block;
    vertical-align: middle
}

.remaining-count-holder .ico {
    color: #CCC;
    background: #F2F5F8;
    border-radius: 100%;
    margin: 0 10px 0 0;
    height: 30px;
    width: 30px;
    position: relative;
}

.remaining-count-holder .ico:before {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.remaining-count-holder .text-more {
    font-size: .929em;
    line-height: 19px;
    color: #757575
}

.split-remaining {
    min-width: 200px;
    border: 1px dashed #D8DDE4;
    font-size: .786em;
    line-height: 17px;
    display: inline-block;
    vertical-align: top;
    padding: 10px 20px;
    border-radius: 20px;
    color: #222;
    background: #F9F9F9;
    max-width: 100%;
    float: right;
}

.split-remaining span {
    display: inline-block;
    vertical-align: middle
}

.split-remaining span.text {
    margin: 0 5px 0 0
}

.split-remaining .remaining-amount {
    font-weight: 500;
    margin: 0 5px 0 0
}

.split-remaining span#remainAmount {
    margin: 0 5px 0 0;
}

.split-remaining span img {
    display: block;
    height: 12px;
    width: 12px;
}

.split-trans-dialog .split-delete-handle {
    font-size: 15px;
    color: #757575;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.split-trans-dialog #row_1 .rmv-row,
.split-trans-dialog :not(#row_1) .clr-row {
    display: none
}

.split-trans-dialog .split-delete-handle:hover, .split-trans-dialog .split-delete-handle:focus {
    color: #dc3545
}

.split-trans-dialog .slimScrollDiv {
    max-height: 218px !important;
}

.split-trans-dialog .slimScrollDiv .scroll-holder {
    max-height: 218px !important;
    height: auto !important;
}

.split-trans-dialog .slimScrollDiv .scroll-holder .row + .row {
    margin: 25px -15px 0 !important;
}

.split-trans-dialog .slimScrollDiv .scroll-holder .row .field-holder {
    min-height: inherit;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .filter-holder {
        border: solid #ebeff4;
        border-width: 0 1px 1px 0
    }

    .filter-holder:nth-child(2n+2), .filter-holder:nth-of-type(3n+4) {
        border-width: 0 1px 0 0
    }

    .chart-container.col-md-8.col-lg-8 {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important
    }

    .chart-aside.col-md-4.col-lg-4 {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important
    }
}

@media (max-width: 767px) {
    .filter-holder:nth-child(2n+2) {
        border-width: 0 0 1px 0 !important
    }
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td[header="transactionsGrid_merchantCategory"] + td[data-label=""] {
        padding:0!important
    }
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td[header="transactionsGrid_merchantCategory"] + td[data-label=""] ul.indicators{padding:0 25px!important}
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td[header="transactionsGrid_merchantCategory"] + td[data-label=""] ul.indicators>li:not(:empty){padding-top:16px!important;padding-bottom:16px!important}
    ul.indicators>li:empty{display:none}
    .table-recent-transactions ul.indicators li{text-align:center}
    .table-recent-transactions ul.indicators li .ico {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .transaction-details .table-recent-transactions tbody > tr td .actions li {
        width:100%!important
    }
    .transaction-details .table-recent-transactions tbody > tr td .actions li a {
        width:100%!important;
        padding:.5rem 1rem;
        border-style: solid;
        border-width: 1px;
        text-align: center;
        font-weight: 400;
        border-radius: 4px;
    }
}

@media (max-width: 991px) {
    .list-gen-tab-nav {
        margin: 30px 15px;
    }

    .chart-aside {
        display: block !important;
        border: 0;
    }

    .chart-container .toggle-aside.visible,
    .chart-aside .header #collapseChartAside {
        display: none
    }

    .ui-dialog.ui-widget-content.split-trans-dialog {
        min-width: auto;
        width: calc(100% - 30px) !important;
    }
}

@media (max-width: 768px) {
    .ui-dialog.generic-dialog .btns .btn {
        width: 100%;
        margin: 0;
    }

    .ui-dialog.generic-dialog .btns .btn:not(:last-child) {
        margin-bottom: 15px;
    }
}


@media (max-width: 442px) {
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li {
        padding-right: 0 !important;
        padding-bottom: 16px;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li:last-child {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .ui-dialog.export-trans-dialog .btn-export [class*="iradio"] {
        min-height: 50px;
    }

    .ui-dialog.export-trans-dialog .item .ico-holder {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: calc(100% - 50px)
    }

    .ui-dialog.export-trans-dialog .item .ico {
        margin-bottom: 0;
    }

    .filter-holder {
        border-width: 0 0 1px;
        max-height: 100%;
    }

    .summary-wrapper .balance-summary li {
        width: 50%;
        margin-bottom: 15px
    }

    .summary-wrapper .balance-summary li:last-child {
        margin-bottom: 0
    }

    .ui-dialog.export-trans-dialog .scroll-holder {
        margin: 0;
    }

    .ui-dialog.export-trans-dialog .item:not(:last-child) {
        margin-bottom: 15px
    }

    .filters-wrapper.row {
        padding: 0 0 15px
    }

    .filter-holder .filter.exp-datatype-filter .title {
        margin-bottom: 10px
    }

    .filter-header {
        padding: 25px 20px
    }

    .filters-wrapper .transaction-period-drop > a[data-toggle] {
        padding-left: 20px;
    }

    .filters-wrapper .filter-holder .filter {
        padding: 15px 20px 15px;
    }

    .filter-holder .filter.filter-select.dropdown {
        height: auto;
    }

    .filter-holder .filter.filter-select.datetime:before {
        right: 20px;
    }

    .filters-wrapper.row #transButton {
        /*top: auto;
        left: 0;
        bottom: 0*/
        padding: 15px 20px 0;
        margin: 0 auto;
        position: static;
        width: 100%;
        max-width: 100%;
        border-top: 1px solid #ebeff4;
    }

    .filters-wrapper.row #transButton .btn-filter {
        width: 100%;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
    }

    .transaction-details .table-recent-transactions tbody > tr td .actions {
        position: static;
        visibility: visible;
        opacity: 1;
        background: none;
        font-size: .9em;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        text-align: left;
    }

    .transaction-details .table-recent-transactions tbody > tr td .actions li:first-child {
        padding-left: 0 !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions {
        opacity: 1 !important;
        z-index: 99 !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li {
        padding-right: 16px;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li:last-child {
        padding-right: 0;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li:not(:first-child) {
        margin-left: 0;
    }


    .transaction-details .table-recent-transactions tr[class*="splitTransactionsList_"] {
        display: block !important
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody {
        padding: 15px !important;
        display: block !important
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr {
        background: #f8f9fb;
        display: block;
        border: none !important;
        border-radius: 4px;
        margin: 0 0 15px;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr:hover {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td {
        width: 100% !important;
        display: block;
        border: none
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:not(:last-of-type) {
        border-bottom: 1px solid rgba(191, 191, 191, .2)
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(1) {
        width: 100% !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(2) {
        width: 100% !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(3) {
        width: 100% !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(4) {
        width: 100% !important;
        text-align: left !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(5) {
        width: 100% !important;
        text-align: left !important;
    }

    .table-recent-transactions .amount {
        text-align: left;
        margin: 0 0 10px;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        background: none;
        min-width: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        padding: 16px 25px 0 !important;
        border-top: 1px solid #ecedef;
        margin: 0 -25px !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td:nth-child(1) .date {
        width: 50px !important
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td[colspan="5"] {
        padding: 0 !important
    }

    .trans-period-chart .split-count-table > tbody {
        padding: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .trans-period-chart .split-count-table > tbody tr {
        margin: 0 !important;
    }

    .trans-period-chart .split-count-table > tbody th, .trans-period-chart .split-count-table > tbody td {
        padding: 10px 20px !important;
        display: table-cell !important;
    }

    .ui-widget-header.ui-jqgrid-resize-mark {
        display: none !important
    }

    .split-trans-dialog .scroll-holder .row .col-12 {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 85% !important;
        flex: 0 0 85% !important;
        max-width: 85%;
    }
}

@media (max-width: 580px) {
    .filter-header {
        padding: 20px 15px
    }

    .filter-header .heading {
        margin: 0 0 5px;
    }

    .filters-area .filter-header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .filter-links .text {
        display: none
    }

    .filter-holder .datetime-drop {
        min-width: auto
    }

    .filter-link-toggle li {
        margin-left: 0;
        margin-right: 25px !important;
    }

    .summary-wrapper .balance-summary li {
        width: 100%;
        margin-bottom: 15px
    }

    .summary-wrapper .balance-summary li:last-child {
        margin-bottom: 0
    }
}

@media (max-width: 440px) {
    .trans-period-chart .split-table-holder {
        overflow-x: auto
    }

    .trans-period-chart .split-table-holder table.split-count-table {
        width: 540px !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li:nth-child(3) {
        margin: 0;
        display: block;
    }

    .remaining-count-holder > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .remaining-count-holder .split-remaining {
        margin: 0 0 10px;
    }

    .chart-container {
        padding: 15px;
    }
}

#browseImageDialog .dropzone {
    position: relative;
}

#browseImageDialog .file-uploader-holder {
    position: relative;
}

#browseImageDialog .dropzone [type="file"] {
    opacity: 0;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 5;
}

#expenseanalyzer-form .status-selection-list li.active > a:hover, #expenseanalyzer-form .status-selection-list li.active a:focus {
    color: #ffffff !important;
}

#categoryAside .slimScrollDiv {
    height: auto !important;
}

#categoryAside .categories-list {
    height: auto !important;
    max-height: 300px;
}

#unsplitdialog.ui-dialog-content {
    padding: 67px 50px 47px
}

.attachment-dialog .dropzone .info-holder .desc strong:last-child {
    text-transform: capitalize
}

.exp-amount {
    display: block;
    height: 100%;
}

.exp-amount > .amount, .exp-amount > .title {
    padding: 0 !important;
    margin: 0 !important
}

#blncSummaryHolder .balance-summary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#blncSummaryHolder .balance-summary li {
    width: 32.777777%;
    padding: 13px 20px;
    border-radius: 5px
}

#blncSummaryHolder .balance-summary li .exp-amount > .title {
    float: none;
    color: #717171;
}

#blncSummaryHolder .balance-summary li .exp-amount {
    padding: 0 0 0 13px;
}

#blncSummaryHolder .balance-summary li:before {
    top: 27px;
    left: auto;
    bottom: auto;
}

#blncSummaryHolder .balance-summary .amount {
    margin: 0;
    color: #2F2F2F
}

#blncSummaryHolder .balance-summary .amount, #blncSummaryHolder .balance-summary .title {
    margin: 0 0 0 12px;
}

@media (max-width: 992px) {
    #blncSummaryHolder .balance-summary {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    #blncSummaryHolder .balance-summary li {
        width: 100%;
        margin-bottom: 0.5rem
    }

    #blncSummaryHolder .balance-summary li:last-child {
        width: 100%;
        margin-bottom: 0
    }
}

#blncSummaryHolder .bdr-cfBlue {
    background-color: rgb(106 161 255 / 6%)
}

#blncSummaryHolder .bdr-green {
    background-color: rgb(15 182 61 / 6%)
}

#blncSummaryHolder .bdr-orange {
    background-color: rgb(255 163 88 / 6%)
}

#highChartHolder .chart-container .heading {
    position: relative
}

#highChartHolder .chart-container .toggle-aside {
    top: 22px;
}

#highChartHolder #categoryAside .stats-holder .info > strong {
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr:hover .actions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        min-width: 18rem;
        white-space: nowrap;
        padding: 28px 25px;
    }
}

.del-dialog-holder p.info {
    margin-bottom: 39px;
}

.del-dialog-holder .ui-dialog-content {
    padding: 67px 30px 47px
}

.receiptDownloadDialog p.info {
    margin-bottom: 35px;
}

.receiptDownloadDialog .ui-dialog-content {
    padding: 62px 30px 57px
}

.filter-holder .filter.filter-select:hover, .filter-holder .filter.filter-select:focus {
    outline: dotted 1px #222;
}

#chartContainer .alert.alert-primary {
    margin-bottom: 0;
    padding-right: 30px;
}

.export-trans-dialog .ui-dialog-content {
    padding: 35px 30px 30px !important
}

#downloadExpensesForm .btn-export {
    position: relative
}

@media (min-width: 768px) {
    #downloadExpensesForm .export-types > .row {
        margin: 0;
    }

    #downloadExpensesForm .export-types > .row > .item {
        padding-right: 10px;
        padding-left: 0;
    }

    #downloadExpensesForm .export-types > .row > .item:last-child {
        padding-right: 0;
    }
}

.table-recent-transactions .date .year, .table-recent-transactions .date .month {
    font-size: 9px;
    line-height: 17px;
}

.split-trans-dialog p.info {
    margin-bottom: 30px
}

.summary-wrapper:empty {
    display: none;
}

.category-content {
    width: calc(100% - 22px);
    display: inline-block;
    vertical-align: middle;
}

.chart-container .heading .btn-back:hover, .chart-container .heading .btn-back:focus {
    border-style: dotted;
    border-color: #222;
}

@media (min-width: 992px) and (max-width: 1079px) {
    .filter > .types {
        margin: 0 -11px;
    }
}

.category-bullet ~ .category-content {
    padding-left: 10px;
}

@media (max-width: 768px) {
    .filter-holder .categories-drop label {
        width: 100%;
    }

    .exp-datatype-filter {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .status-selection-list.border-style {
        margin-top: 0;
    }

    .summary-wrapper {
        padding: 15px 15px
    }

    .manage-receipt-dialog .receipt-holder .receipt-hanlder {
        top: auto;
        bottom: 14px;
        right: 14px;
    }
}

#manageReceiptDialogId {
    padding: 44px 24px 24px !important;
}

#transSplitFormHolder .alert.alert-danger .close {

}

.exp-download-dialog-receipt {
    width: 100px;
    text-align: right;
}

.atch-file-bg {
    position: absolute;
    z-index: 9;
    bottom: 0;
    width: 100%;
    padding: 24px 17px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.0001) -139.79%, rgba(116, 116, 116, 0.0135763) 9.58%, #000000 133.26%);
    color: #fff;
}

.status-selection-list.border-style {
    border: none;
    outline: 1px solid #dce4ef;
}

@media (min-width: 768px) {
    .ui-dialog.generic-dialog .btns {
        overflow: hidden;
        padding: 4px;
        margin: -4px;
        display: inline-block;
        
    }

    .ui-dialog.generic-dialog .btns .btn {
        display: block;
        float: left;
    }
}

.info-cluster {
    display: flex;
    gap: 12px;
    padding: 10px 19px;
    border-bottom: 1px solid rgba(191, 191, 191, 0.25);
}

.info-cluster .info {
    background: rgba(255, 163, 88, 0.06);
    border-radius: 5px;
    padding: 13px 33px;
    flex-grow: 1;
    position: relative;
}

.info-cluster .info.yellow {
    background: rgba(255, 163, 88, 0.06);
}

.info-cluster .info.green {
    background: rgba(15, 182, 61, 0.06);
}

.info-cluster .info.blue {
    background: rgba(106, 161, 255, 0.06);
}

.info-cluster .info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 15px;
}

.info-cluster .info.yellow::before {
    background-color: rgba(255, 163, 88, 1);
}

.info-cluster .info.green::before {
    background-color: rgba(15, 182, 61, 1);
}

.info-cluster .info.blue::before {
    background-color: rgba(106, 161, 255, 1);
}

.info-cluster .info p {
    margin: 0;
}

.info-cluster .info p.amount {
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #2F2F2F;
    margin: 0 0 4px;
}

.info-cluster .info p.detail {
    font-weight: 400;
    font-size: 14px;
    line-height: 114%;
    letter-spacing: 0.233333px;
    color: #666666;
}

#transactionTagDialog .modal-dialog {
    transform: translate(0%, -50%);
    top: 50%;
}

@media only screen and (max-width: 767px) {
    .info-cluster {
        flex-direction: column;
    }

    .ui-dialog.export-trans-dialog .title {
        line-height: 1.355em !important;
    }

    .ui-dialog.export-trans-dialog .info {
        margin: 10px 0 30px;
        line-height: normal;
    }

    .ui-dialog.export-trans-dialog .slimScrollDiv {
        overflow: auto !important;
        margin-bottom: 40px;
    }

    .ui-dialog.export-trans-dialog .export-types:last-child {
        margin-bottom: 0;
    }

    .ui-dialog.export-trans-dialog .sub-title {
        margin-left: -15px;
    }

    .transactions-file .item .ico {
        font-size: 13px !important;
    }

    .trans-period-chart .ui-jqgrid-btable.add > tbody > tr > td[data-label]:not([data-label=""]):not([data-label=" "]):not([data-label=" "]):before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        margin: 0 0 5px;
    }

    .trans-period-chart tr.hasSplitTrans td[data-label]:not([data-label=""]):not([data-label=" "]):not([data-label=" "]):before {
        display: none !important
    }

    .trans-period-chart tr.hasSplitTrans {
        margin-bottom: 25px !important
    }

    .table-recent-transactions ul.indicators {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}

.ui-dialog.export-trans-dialog .slimScrollDiv {
    max-height: 339px !important;
}

.ui-dialog.export-trans-dialog .slimScrollDiv .scroll-holder {
    height: auto !important;
    padding-bottom: 10px;
}


.list-days-selection.multi-range-list a {
    border-radius: 100px !important;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a:focus {
    text-decoration: underline;
}

.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a:hover,
.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a:hover .ico,
.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a:focus,
.trans-period-chart .ui-jqgrid-btable.add > tbody > tr .actions li a:focus .ico {
    color: var(--ch32-brand) !important;
}

 /*Transaction Data Management */
 
 .uploaded-image-item {

    align-items: center;

    justify-content: space-between;

    border: 1px dashed #D8DDE4;

    background-color: rgba(233,237,242, 0.3);

    border-radius: 4px;

    padding: 10px;

    display: grid;

    grid-template-columns: 1fr 1fr 46px;

    gap: 10px;

}
 
 
div#uploaded-image-items {

    margin-bottom: 30px;

}
 
.uploaded-image-holder:not(:last-of-type) {

    margin-bottom: 10px;

}
 
.receipt-hanlder li i {

    vertical-align: middle;

    display: inline-block;

}
 
.receipt-hanlder li span {

    vertical-align: middle;

}
 
.receipt-hanlder li a {

    color: #757575;

    font-size: 12px;

}
.receipt-hanlder li a:hover, .receipt-hanlder li a:focus{color: var(--ch32-brand);}
.attachment-dialog .dropzone .dz-message .dz-button:focus{outline: 1px dashed var(--ch32-brand);}
 
.upload-image-preview-container {

    font-size: 11px;

    line-height: 12.65px;

    letter-spacing: 0.18px;

    display: flex;

    gap: 10px;

    align-items: center;
    flex-grow: 1;
    max-width: calc(50% - 18px);
    min-width: calc(50% - 18px);
}
.receipt-type {
    flex-grow: 1;
}
 
.receipt-type span {

    display: inline-block;

    border: 1px solid #1434CB;

    font-weight: 400;

    font-size: 12px;

    line-height: 12.1px;

    text-align: center;

    padding: 2px 8px;

    background-color: #E5F3FF;

    border-radius: 20px;
    color: #1434CB;

}
.dropdown-select-holder .default-text {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 1.142857142857143em;

    line-height: 1.5;

    min-height: 24px;

}
 
.dropdown-select-holder .default-text:empty:before {

    content: '-';

    display: block;

}
 
.dropdown-select-holder .default-text .number {

    color: #222;

}
 
.dropdown-select-holder .default-text .type {

    color: rgba(34, 34, 34, 0.5);

}
 
 
.dropdown-select-holder {

    position: relative;

    text-align: left;

    margin: 40px 0 0;

}
 
.dropdown-select-holder .static-label {

    font-size: 0.8571428571428571em;

    line-height: 1.5;

    margin: 0 0 6px;

    display: inline-flex;

    color: #757575;

}
 
.dropdown-select-holder [data-toggle="collapse"] {

    display: block;

    padding: 0 40px 5px 0;

    min-width: 100%;

    text-align: left;

    border: solid #DFE6EE;

    border-width: 0 0 1px;

    border-radius: 0;

    color: #222;

}
 
.dropdown-select-holder [data-toggle="collapse"]:active {

    top: 0;

}
 
.dropdown-select-holder [data-toggle="collapse"]:where(:hover, :focus, [aria-expanded="true"]) {

    border-color: var(--ch32-brand);

    outline-offset: 0;

    text-decoration: none;

}
 
.dropdown-select-holder [data-toggle="collapse"]:where(:hover, :focus, [aria-expanded="true"]) * {

    text-decoration: none;

}
 
.dropdown-select-holder [data-toggle="collapse"]:before {

    content: "\e902";

    font: 6px/1 cholder4;

    color: #D8D8D8;

    position: absolute;

    right: 5px;

    top: 50%;

    margin-top: -3px;

    transition: all 0.25s ease;

}
 
.dropdown-select-holder .glCode-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    z-index: 10;

    max-height: 228px;

}
 
 
.dropdown-select-holder .card-body {

    padding: 10px;

}
 
.dropdown-select-holder .keyword-search-holder {

    max-height: 150px;

    overflow-y: auto;

    overflow-x: hidden;

}
 
.dropdown-select-holder .list {

    margin: 0;

}
 
.dropdown-select-holder .list li {

    position: relative;

}
 
.dropdown-select-holder .list li + li {

    border-top: solid 1px #eee;

}
 
.dropdown-select-holder .list li:first-child a {

    padding-top: 0;

}
 
.dropdown-select-holder .list li:last-child a {

    padding-bottom: 0;

}
 
.dropdown-select-holder .list a {

    display: block;

    color: inherit;

    padding: 10px 8px;

}
 
.dropdown-select-holder .list a:where(:hover, :focus, .active) .list-heading {

    text-decoration: underline;

    color: var(--ch32-brand)

}
 
.dropdown-select-holder .number, .dropdown-select-holder .list-heading {

    display: block;

}
 
.dropdown-select-holder .number {

    font-size: 0.8571428571428571em;

    line-height: 1.5;

    letter-spacing: 0.0075em;

    color: #666;

}
 
.dropdown-select-holder .list-heading {

    font-size: 1.142857142857143em;

    line-height: 1.5;

    letter-spacing: 0.005625em;

    color: #222;

    font-weight: 400;

}
 
.dropdown-select-holder .list p {

    margin: 0;

    font-size: 0.8571428571428571em;

    line-height: 1.5;

    color: #757575;

}
 
.dropdown-select-holder .field-search {

    margin: 0 0 16px;

    position: relative;

}
 
.dropdown-select-holder .field-search .form-control {

    color: #444;

    height: 3.076923076923077em;

    font-size: 0.9285714285714286em;

    line-height: 1.538461538461538;

    border-radius: 4px;

    border-color: #EBEFF4;

    padding: 10px 10px 10px 33px !important;

}
 
.dropdown-select-holder .field-search .form-control::placeholder {

    color: #666;

}
.receipt-filename {
    overflow: hidden;
    text-overflow: ellipsis;
}
 
.dropdown-select-holder .symbol-on-field.left {

    left: 8px;

    top: 50%;

    transform: translate(0, -50%);

    color: #666;

}
 
.dropdown-select-holder .field-search .form-control:focus ~ .symbol-on-field {

    color: #666;

}
 
/* Dropzone CSS start */
 
.uploaded-image-item {

    align-items: center;

    justify-content: space-between;

    border: 1px dashed #D8DDE4;

    background-color: rgba(233,237,242, 0.3);

    border-radius: 4px;

    padding: 10px;

    display: flex;

    grid-template-columns: 1fr 1fr 46px;

    gap: 10px;

}

.receipt-hanlder {

    width: auto;

    display: flex;

    margin: 0;

    gap: 10px;

    align-items: center;

}

div#uploaded-image-items {

    margin-bottom: 30px;

}

.uploaded-image-holder:not(:last-of-type) {

    margin-bottom: 10px;

}

.receipt-hanlder li i {

    vertical-align: middle;

    display: inline-block;

}

.receipt-hanlder li span {

    vertical-align: middle;

}

.receipt-hanlder li a {

    color: #757575;

    font-size: 12px;

}
.receipt-hanlder li a.view-receipt-btn {
    font-size: 11px;
}

.receipt-type span {

    display: inline-block;

    border: 1px solid #1434CB;

    font-weight: 400;

    font-size: 10px;

    line-height: 12.1px;

    text-align: center;

    padding: 2px 8px;

    background-color: #E5F3FF;

    border-radius: 20px;

}

/* Dropzone CSS ends */
 
.ui-dialog.generic-dialog .top-auto{
    font-size:15px;
    letter-spacing: 0.2px;
}

.attachment-dialog .dropzone .info-holder .blue-underline {
    color: #106EB8;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.217px;
}

#browseImageDialog .alert .cross-alert {
    top: 0 !important;
}
.ui-dialog .alert .icon-cross {
    top: 50%;
    right: 0;
    font-size: 10px;
    font-weight: 400;
    margin: 20px 0;
    position: relative
}

.ui-dialog .alert {
    margin: 20px 0;
}

#browseImageDialog #attachments-heading  {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 16px;
 
}
@media (max-width:480px) {
    .upload-image-preview-container {
        width: 100%;
        max-width: inherit;
    }
    .uploaded-image-item {
        flex-wrap: wrap;
    }
}