:root {
    --color-link: #4697d8;
    --color-text: #353a3d; /*#3f4449*/
    --color-th: #51555a; /**/
    --color-tr: #353a3d; /*51555a*/
    --color-top-nav-link: rgb(66, 68, 71);
    --color-top-nav-link-hover: rgb(111, 113, 116);
    --color-form-label: #737373;
    --color-form-field-comment: #939393;
    --color-form-control-disabled: rgb(84, 84, 84);
    --color-context-menu-item: rgb(84, 84, 84);
    --color-dialog-header: #3c4043;
    --color-dialog-text: #73787e;
    --color-dialog-error-code: #6699cc;
    --color-tab-header-item: #9d9d9d;    
    --color-subform-title: #353a3d;
    --bgcolor-service: #f0f0f0;
    --bgcolor-admin: #eee9e2;
    --font-text: 'Ubuntu';
    --highlight-bg-context-menu: #fdfd9b;
    --highlight-border-context-menu: #eae42f;
}

/* checkboxes & radios */
label {
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
}

h2, th {
    font-family: var(--font-text);
    font-weight: normal;
    color: #939393;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover, a:visited {
    text-decoration: none
}

.link-green {
    color:#5cac5d;
}

.link-green:hover {
    text-decoration: underline;
}

/* helpers */
.centered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

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

.text {
    color: var(--color-text);
}

.mt0p5 {margin-top: 0.5rem}
.mt1 {margin-top: 1rem}
.mt1p5 {margin-top: 1.5rem}
.mt2 {margin-top: 2rem}
.mb0p5 {margin-bottom: 0.5rem}
.mb1 {margin-bottom: 1rem}
.mb1p5 {margin-bottom: 1.5rem}
.mb2 {margin-bottom: 2rem}
.mr2 {margin-right: 2rem}
.mr3 {margin-right: 3rem}

/* buttons */
.btn {
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-family: var(--font-text);
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.btn:not(:disabled) {
    cursor: pointer;
}

.btn:disabled {
    opacity: .65;
}

.btn-blue {
    color: #2dc4c4;
    background-color: transparent;
    border: 1px solid #2dc4c4;
}

.btn-blue:hover:not(:disabled) {
    color: white;
    background-color: #2dc4c4;
}

.btn-fill-blue {
    color: white;
    background-color: #2dc4c4;
    border: 1px solid #2dc4c4;
}

.btn-fill-blue:hover:not(:disabled) {    
    background-color: #2dc4c4;
}


.btn-fill-red {
    color: white;
    background-color: #fa6e8f;
    border: 1px solid #fa6e8f;
}

.btn-fill-red:hover:not(:disabled) {    
    background-color: #ff527a;
}

.btn-red {
    color: #ff527a;
    background-color: white;
    border: 1px solid #ff527a;
}

.btn-red:hover:not(:disabled) {
    color: white;
    background-color: #fa6e8f;
    border-color: #fa6e8f;
}

.btn-fill-grey {
    color: #3c4043;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
}

.btn-fill-grey:hover:not(:disabled) {
    background-color: #e0e0e0;
    border: 1px solid #e0e0e0;
}

.btn-fill-lemon {
    color: #3c4043;
    background-color: rgb(139, 237, 79);
    border: 1px solid rgb(139, 237, 79);
}

.btn-fill-grey:hover:not(:disabled) {
    opacity: 0.6;
}

/* form */
.form-group {
    margin-bottom: 1.25rem;
}

.form-control {
    box-sizing: border-box;
    width: 100%;
    outline: 0;
    padding: .375rem .75rem;
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
    border: 1px solid #ced4da;
    border-color: #33b5e5;
    box-shadow: 0 0 0 0.2rem rgba(51,181,229,.25);
}

.form-control:disabled {
    cursor: default;
    background-color: rgba(170, 170, 170, 0.25);
    color: var(--color-form-control-disabled);
    border-color: rgba(118, 118, 118, 0.3);
} 

input:disabled {
    cursor: default;
    background-color: rgba(170, 170, 170, 0.25);
    color: var(--color-form-control-disabled);
    border-color: rgba(118, 118, 118, 0.3);
}

select {
    width: -moz-fit-content !important;
    width: fit-content !important;
}

select:disabled {
    opacity: 1;
}

.form-label {
    color: var(--color-form-label);
    font-size: 1rem;
    font-family: var(--font-text);
    margin-bottom: 0.5rem;
}

.form-label-small {
    display: block;
    color: var(--color-form-label);
    font-size: 0.9rem;
    font-family: var(--font-text);
    margin-bottom: 5px;
}

.star {
    color: red;
}

.form-field-comment {
    margin-top: 0.4rem;
    color: var(--color-form-field-comment);
    font-size: 0.9rem;
    font-family: var(--font-text);
}

.form-error {
    border: 1px solid red;
    border-radius: .25rem;
    background-color:rgb(250, 238, 238);
    padding: 15px;
    font-size: 0.9rem;
    color: red;
    margin-bottom: 1rem;
}

.form-field-error {    
    color: red;    
    padding-top: 0.375rem;
}

.form-info-message {
    padding: 15px;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    color: #31708f;    
}

.form-success-message {
    padding: 15px;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;    
}

/* context menu */
.context-menu-item {
    padding: 15px;
    color: var(--color-context-menu-item);
    border-bottom: 1px solid rgb(221, 221, 221);
    cursor: pointer;
}

.context-menu-item:last-child {
    border-bottom: 0;
}

.context-menu-item:hover {
    background-color: #daedf8;
}

/* dialog */
.dialog-header {
    color: var(--color-dialog-header);
    font: 1.375rem Ubuntu;
    margin-bottom: 1rem;
}

.dialog-icon {
    width: 44px;
    height: 44px;    
    fill: rgb(245, 95, 79);
    margin-right: 10px;
    margin-top: -3px;
}

.dialog-text {
    font-family: var(--font-text);
    color: var(--color-dialog-text);
    line-height: 1.375rem;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    gap: 15px;
}

.dialog-error-code {
    margin-top: 1.5rem;
    font-family: var(--font-text);
    color: var(--color-dialog-error-code);
}

/* connection method tabs */
/* .conn-tabs-header {
    display: flex;
}

.conn-tabs-header-item {
    font-size: 1.1rem;
    padding: 7px 15px;
    color: var(--color-tab-header-item);
}

.conn-tabs-header-item:hover {
    color: #1682c0;
    text-decoration: none;
}

.conn-active-tab {
    color: #1682c0;
    border-bottom: 2px solid #1682c0;
    margin-bottom: -1px;
    padding-bottom: 8px;
}

.conn-tabs-content {
    padding: 1.5rem 0;
} */

/* modern tabs */
.tabs-header {
    display: flex;
    border-bottom: 1px solid #ebebeb;
}

.tabs-header-item {
    font-size: 1.1rem;
    padding: 7px 15px;
    color: var(--color-tab-header-item);
}

.tabs-header-item:hover {
    color:tomato;
    text-decoration: none;
}

.active-tab {
    color: tomato;
    border-bottom: 2px solid tomato;
    margin-bottom: -1px;
    padding-bottom: 8px;
}

.tabs-content {
    padding: 1.5rem 15px;
}


/* modern inline tabs */
.modern-inline-tabs-header {
    display: inline-block;
    padding: 12px 4px;
    border-radius: 8px;
    background-color: #EFF2F5;
    
}

.modern-inline-tabs-header-item {
    font-size: 1rem;
    padding: 7px 12px;    
    border-radius: 8px;
    color: rgb(88, 102, 126);
    cursor: pointer;
}

.modern-inline-tabs-header-item:hover {
    text-decoration: none;
}

.modern-inline-active-tab {
    background-color: #FFF;
}

.modern-inline-tabs-content {
    padding: 1rem 0;
}

/* inline tabs */
.inline-tabs-header {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    /* margin-bottom: 1rem; */
}

.inline-tabs-header-item {
    font-size: 1rem;
    padding: 7px 12px;    
    border-radius: 8px;
    color: rgb(88, 102, 126);
    background-color: #EFF2F5;
    cursor: pointer;
}

.inline-tabs-header-item:hover {
    text-decoration: none;
}

.inline-active-tab {
    background-color: rgba(88, 102, 126, 0.8);
    color: #fff;
}

.inline-tabs-content {
    padding: 1rem 0;
}

/* std table */
.std-table {
    border-collapse: collapse;
}

.std-table tbody tr {
    border-top: 1px solid #dee2e6;
    color: var(--color-tr);
}

.std-table th {    
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    font-size: 1rem;
}

.std-table td {
    text-align: left;
    vertical-align: top;
    padding: 12px 30px 12px 12px;
    font-size: 1rem;
    font-family: var(--font-text);
}

.std-table td:last-child {
    padding: 12px;
}

/* std-table-hoverable */
.std-table-hoverable {
    border-collapse: collapse;
}

.std-table-hoverable tbody tr {
    border-top: 1px solid #dee2e6;
    color: #51555a;
}

.std-table-hoverable tbody tr:hover {
    background-color: #edf1f7;
    cursor: pointer;
}

.std-table-hoverable th {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    font-size: 1rem;
}

.std-table-hoverable td {
    text-align: left;
    vertical-align: middle;
    padding: 12px 30px 12px 12px;
    font-size: 1rem;
    font-family: var(--font-text);
}

.std-table-hoverable td:last-child {
    padding: 12px;
}

/* info table */
.info-table {
    border-collapse: collapse;
}

.info-table tbody tr {
    border-top: 1px solid #dee2e6;
    color: var(--color-tr);
}

.info-table tbody tr:first-child {
    border-top: 0;
}

.info-table td {
    text-align: left;
    vertical-align: top;
    padding: 12px 30px 12px 12px;
    font-size: 1rem;
    font-family: var(--font-text);
}

.info-table td:first-child {
    color: #939393;
    font: var(--font-text);
}

.info-table td:last-child {
    padding: 12px;
}

/* records table */
.records-table {
    border-collapse: collapse;
}

.records-table tbody tr {
    border-top: 1px solid #dee2e6;
    color: var(--color-tr);
}

.records-table th {    
    text-align: left;
    vertical-align: top;
    padding: 8px;
    font-size: 1rem;
}

.records-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px;
    font-size: 1rem;
    font-family: var(--font-text);
}

.records-table td:last-child {
    padding:8px;
}

/* no top table border*/
.no-top-border tbody tr:first-child {
    border-top: 0;
}

/* list view */
.list-box {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.list-item {    
    display: inline-block;
    padding: 11px 13px; 
    margin: 0; 
    cursor: pointer;
    color: var(--color-text);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
}

.list-item-hover {
    background-color: #edf1f7;
}

.list-item-select {
    background-color: #cceaea !important;
}

.list-item-context-menu {
    background-color: var(--highlight-bg-context-menu);
    border: 1px dashed var(--highlight-border-context-menu);
}

/* Links item */
.item-link {
    display: inline-block;
    padding: 8px 10px; 
    margin: 0; 
    cursor: pointer;
    color: var(--color-text);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
}

.item-link:hover {
    background-color: #edf1f7;
}

.item-link.active {
    background-color: #cceaea !important;
}

/* icons */
.icon {
    width: 24px;
    height: 24px;
    fill: #80858a;
    vertical-align: middle;
    margin-top: -3px;
}

.exit-icon, .bin-icon {
    fill: rgb(240, 110, 110);
}

.person-icon {
    fill: rgb(132, 132, 185);
}

.report-icon {
    fill: rgb(248, 83, 83);
}

.warning-icon {
    fill: #ff6969;
    vertical-align: middle;
}

.cross-icon {
    width: 26px; 
    height: 26px; 
    float: right; 
    cursor: pointer; 
    color: rgb(183, 189, 198); 
    margin: -5px -5px 0px 5px;
}

.download-icon {
    width: 24px;
    height: 24px;
    stroke: #6495ed;
    /* vertical-align: middle; */
    /* margin-top: -3px; */
    cursor: pointer;
}

.download-icon:hover {
    opacity: 0.7;
}

.small-warning-icon {    
    width: 24px;
    height: 24px;
    fill: #ff6969;
}

.small-sync-icon {    
    width: 24px;
    height: 24px;
    fill: #00b9fc;
}

.arrow-icon {
    width: 16px;
    height: 16px;
    fill: #959FA5;
}

/* sort icons */
.sort-icon {
    display: block;
    width: 14px;
    height: 9px;
    padding: 2px;
    cursor: pointer;
    fill: #dbd7d2;
}
.sort-icon.asc {fill: #77dd77}
.sort-icon.desc {fill: salmon}

.icon-edit-amount {
    fill: #6495ed;
    cursor: pointer;
}

.icon-edit-amount:hover {
    opacity: 0.7;
}

/* status text */
.text-danger {
    color: red;
    margin-bottom: 1rem;
}

.text-success {
    color: green;
    margin-bottom: 1rem;
}

/* fix - используется в showError (admin.js, table.js)*/
.errmsg {color: red}
.success {color: green}

.ib {
    display: inline-block;
}

.warning-status {   
    border: 1px solid #ffb195;    
    background-color: #ffe9e1;   
    padding: 10px;
    color: rgb(60,64,67);
}

/* settings status */
/* .settings-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: rgb(60,64,67);
    margin-bottom: 1rem;
}

.settings-status.not-synced {    
    border: 1px solid #ffb195;    
    background-color: #ffe9e1;    
}

.settings-status.synced {
    border: 1px solid #95e3ff;
    background-color: #e1f7ff;
} */

/* sub form */
.subform-title-watch {
    font-size: 1.375rem;
    font-family: var(--font-text);
    color: var(--color-subform-title);
    margin-bottom: 1.375rem;
}

.subform-layout {
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    border-radius: .25rem;
}

/* Top nav */
.top-nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    background-color: linen;
}

.top-nav-links {display: flex}

.top-nav-link {
    margin-right: 20px;
    padding: 5px 6px;
    color:rgb(66, 68, 71);    
}
.tpl-top-nav-link-active {
    background-color:wheat;    
    /* border-radius: .25rem; */
}

.top-nav-link:hover {
    text-decoration: none;
    color:rgb(111, 113, 116);
}

.top-nav-corner {padding-top: 5px}
.top-nav-img {vertical-align: middle}

/* breadcrumbs */
.breadcrumbs {
    display: flex;
    gap: 15px;
    margin: 0 0 1rem 0px;
}

.breadcrumbs-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb2b8;
}

a.breadcrumb-link {
    color: #4697d8;
    text-decoration: none;
    padding: 7px 0;
}

a.breadcrumb-link:hover {
    text-decoration: underline;
}
/*
.breadcrumb-last {
    color: var(--color-text);
    padding: 7px;
    background-color: #f7f2f2;
} */

/* like nav link */
.like-nav-link {
    color: var(--color-top-nav-link);
}

.like-nav-link:hover {
    text-decoration: none;
    color: var(--color-top-nav-link-hover);
}

/* canvas */
.area {
    /* width: 1024px;
    margin: 0 auto; */
    /* padding: 25px 15px;     */
    padding: 0 25px;
}

.background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* login form */
.login-form {
    width: 400px; 
    margin: 20vh auto 0;
    padding: 25px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.login-form-label {
    font-size: 1.2rem;
}

/* suggest */
.suggest-popover {    
    text-align: left; 
    cursor: default; 
    border: 1px solid #ccc; 
    border-top: 0; 
    background: #fff; 
    box-shadow: -1px 1px 3px rgba(0,0,0,.1);
    position: absolute; 
    z-index: 9999; 
    max-height: 254px; 
    overflow: hidden; 
    overflow-y: auto; 
    box-sizing: border-box;    
}

.suggest-item {
    padding: 0.375rem 0.75rem;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: #333; 
}

.suggest-active {
    background: #f0f0f0;
}

.suggest-highlight {
    font-weight: normal; 
    color: #1f8dd6;
}

/* pagination */
.page-link {
    display: block;
    padding: 0.5rem 0.65rem;
    color: #6495ed;
}

.page-link.active {
    color: white;
    background-color: #6495ed;
    pointer-events: none;
}

.page-link.disabled {
    color: #6c757d;
    pointer-events: none;
}

/* streets */
.street-search-input {width: 50%}

.street-group {
    width: 300px;
    margin-bottom: 25px;
    margin-right: 30px;
}

.street-letter {font-size: 1.5rem}

.street-link {
    color: var(--color-link);
    display: block; 
    padding: 0.3rem 0;
    cursor: pointer;
}

.street-link-hover {text-decoration: underline}

.street-link-context-menu {
    color: salmon;
}

/* custom field width */

.w300 {
    width: 300px;
}

.w425 {
    width: 425px;
}

.w475 {
    width: 475px;
}

.width-flatNumber {width: 100px}
.width-deviceID {width: 300px}
.width-streetType {width: 150px}
.width-numID {width: 150px}
.width-streetSelect {min-width: 350px}
.width-houseNumber {min-width: 100px}
.width-doorID {width: 70px}

.house-item {    
}

.house-item a {
    color: black;
    display: inline-block;
    margin: 0px;
    padding: 12px 14px;
}

.house-item a:hover {
    color: white;
    background-color: #FE9E76;
}

/* fix effects?  */
.upd {
    background-color: #00CF91;
}

.add {
    background-color: #4697d8;
}

.header-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.content-header {
}


.breadcrumb::after {
    content: "/";
    color: #adb2b8;
    margin: 0 10px;
}

/* .breadcrumb:last-child::after {
    content: "";
    margin: 0;
} */

/* form */
.row-field-box {
    display: flex;
    gap: 50px;
}

.form-row {
    display: flex;
    gap: 50px;
    align-items: end;
}

.form-row-btn-box {
    margin-bottom: 1.25rem;
}

/* CUSTOM ? */
.content {
    margin-top: 1rem;
}


.upload-title {
    font-family: var(--font-text);
    font-size: 1.25rem;
    color: var(--color-dialog-header);
    margin-bottom: 1rem;
}

.upload-desc {
    font-family: var(--font-text);
    color: var(--color-dialog-text);
    margin-bottom: 1rem;
}

.payer-address {
    font-family: var(--font-text);
    color: var(--color-dialog-text);
    margin-top: 0.5rem;
}

/* month index */
.index-row {
    max-width: 560px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
}

.index-item {
    min-width: 35px;
    text-align: center;
    padding: 5px 8px;
    cursor: pointer;
}

.index-item.active {
    min-width: 35px;
    text-align: center;
    padding: 5px 8px;
    color: white;
    background-color: #50c54c;
}

/**/
.deposit-added-by {
    padding: 7px 15px;
    color: var(--color-text);
    background-color: #dff0d8;
    margin-right: 30px;
    margin-bottom: 0.5rem;
}

.table-title {
    color: var(--color-dialog-header);
    font-size: 1.25rem;
}

.th-style {
    color: #939393;
    font: var(--font-text);
}

.btn-bin {
    display: flex;
    align-items: center;
    color: #da2b54;
    cursor: pointer;
}

.btn-bin:hover {
    opacity: 0.7;
}

.deposit-info-row {
    display: flex;
    gap: 25px;
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    /* background-color: #ffc107;
    color: #212529; */
    /* background-color: #e6e8e9;
    color: #212529; */
    background-color: #b1c3ff;
    color: var(--color-tr);
    border-radius: 50%;
    cursor: pointer;
}

.circle:hover {
    opacity: 0.7;
}

.icons-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.row30 {
    display: flex;
    gap: 30px;
}

.row30-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;    
}

.row30-wrap > div {
    border-left: 1px solid #ddd;
    padding-left: 30px;
}


.row45-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 45px;    
}

/*
.row30-wrap > div:first-child {
    border-left: 0;
    padding-left: 0;
} */

.suggest-customer {
    padding: 0.375rem 0.75rem;
}

.suggest-customer-name {
    color: var(--color-tr);
}

.suggest-customer-address {
    color: #939393;
}

.disable-req-card {
    padding: 25px;
    background-color: #f8f8f8;
    border-radius: 0.375rem;
}

.download-btn {
    display: flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
    color:#1f8dd6;
}