:root {
    --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;    
    --font-text: 'Roboto';
    --highlight-bg-context-menu: #fdfd9b;
    --highlight-border-context-menu: #eae42f;
}

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

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

a {
    color: #4697d8;
    text-decoration: none;
}

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

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

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

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

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

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

.mt0p5 {margin-top: 0.5rem}
.mt1 {margin-top: 1rem}
.mt1p5 {margin-top: 1.5rem}
.mt2 {margin-top: 2rem}
.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;
}

/* 2dc4c4 */
.btn-blue {
    color: #00c2c4;
    background-color: white;
    border: 1px solid #00c2c4;
}

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

.btn-fill-yellow {
    color: #3c4043;
    background-color: rgb(255, 223, 70);
    border: 1px solid rgb(255, 223, 70);
}

.btn-fill-yellow:hover:not(:disabled) {
    color: #3c4043;
    background-color: rgb(240, 200, 0);
    border: 1px solid rgb(240, 200, 0);
}


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

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

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

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

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

/* 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);
}

input::-ms-reveal {
    display: none !important;
}

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 Roboto;
    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: #2694FA;
    text-decoration: none;
}

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

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

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

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

.tabs-header-item:hover {
    color:#2694FA;
    text-decoration: none;
}

.active-tab {
    color: #2694FA;
    border-bottom: 3px solid #2694FA;
    margin-bottom: -1px;
    padding-bottom: 8px;
}

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

/* .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;
} */

/* std table */
.std-table {
    border-collapse: collapse;
    background-color: #FFF;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    border-radius: 0.25rem;
}

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

.std-table th {
    font-family: 'Arimo';
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    font-size: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    /* background-color: #f6f6f6; */
    color: var(--color-dialog-header);
    background-color: #e8f5fa;
}


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

.std-table th:first-child, .std-table td:first-child {
    padding-left: 15px;    
}

.std-table th:last-child, .std-table td:last-child {
    padding-right: 15px;
}

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


/* hardware table */
.hw-table {
    border-collapse: separate;
    border-spacing: 0 10px;    
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    border-radius: 0.25rem;
}

.hw-table tbody tr {
    /* border-top: 1px solid #dee2e6; */
    color: var(--color-tr);
    background-color: #FFF;
}

.hw-table th {
    font-family: 'Arimo';
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    font-size: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    /* background-color: #f6f6f6; */
    color: var(--color-dialog-header);
    background-color: #e8f5fa;
    border-top: 1px solid #e9ecf2;
    border-bottom: 1px solid #e9ecf2;
}


.hw-table td {
    text-align: left;
    vertical-align: top;
    padding: 12px 30px 12px 12px;
    font-size: 1rem;
    font-family: var(--font-text);
    border-top: 1px solid #e9ecf2;
    border-bottom: 1px solid #e9ecf2;
}

.hw-table th:first-child, .hw-table td:first-child {
    padding-left: 25px;
    border-left: 1px solid #e9ecf2;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.hw-table th:last-child, .hw-table td:last-child {
    padding-right: 25px;
    border-right: 1px solid #e9ecf2;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}


/* 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);
}

.brown-text {
    color: #473d15;
}

.brown-link {
    color: #473d15;
}

.brown-link:hover {
    opacity: 0.7;
}



/* icons */
.icon {
    width: 24px;
    height: 24px;
    fill: #80858a;
}

.stroke-icon {
    width: 24px;
    height: 24px;
    stroke: #80858a;
    fill: none;
}

.download-icon {
    width: 24px;
    height: 24px;
    stroke: #6495ed;
    cursor: pointer;
}

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

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

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

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

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

.warning-icon {
    fill: #ff6969;
}

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

.paired {
    width: 24px;
    height: 24px;
    fill: #2dc45f;
}

.not-paired {
    width: 24px;
    height: 24px;
    fill: #ff2449;
}

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

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

.kit-not-connected-icon {
    fill: #2e3436;
    fill-opacity: 0.34902;
}

.kit-connected-icon {
    fill: #2dc45f;
}

.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}

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

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

/* DIO */
.dio-row {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 0.75rem;
}

.dio-row:last-child{
    margin-bottom: 0;
}

.dio-num {
    color: var(--color-text);
    font-size: 1.25rem;
    width: 25px;
    display: flex;
    align-items: center;
}

.dio-polarity {
    cursor: pointer;
    fill: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.dio-polarity-active {
    /* background-color: #2dc4c4; */
    background-color: #00c2c4;
    fill: white;
}

.dio-polarity-disabled {
    opacity: 0.65;
    /* background-color: #57d5d7; */
    cursor: default;
    pointer-events: none;
}

.polarity-icon {
    width: 24px;
    height: 24px;
}

.uio-name {
    font-size: 1.175rem;
    color: var(--color-dialog-header);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* blocks */
.port-select-box {
    display: flex;
    align-items: center;
    gap: 50px;
    border: 1px solid #dedede;
    border-radius: 6px;
    padding: 15px;
    margin: 0 0 1rem 0;
}

.kit-search-box {
    border: 1px solid #dedede;
    border-radius: 6px;
    padding: 15px;
    margin: 0 0 1rem 0;
}

.kit-header {
    display: flex;
    align-items: center;
    padding: 0 15px;    
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    font-size: 1.5rem;
}

.kit-id {    
    margin-right: 15px;
}

/* settings status */
.settings-status {
    display: inline-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;
}

/**/

.td-no-device {
    background-color: #ffe9e1;
}

.no-device {
    display: flex;
    align-items: center;
    gap: 10px;
    /* padding: 10px; */
    color: rgb(60,64,67);
}

/* hardware */
.update-details {
    margin-top: 0.75rem;
    line-height: 1.5;
    padding: 10px;
    border-radius: 4px;
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.update-title {
    /* margin-top: 1rem; */
    color: #9e9da6;
}

.device-name {
    margin-bottom: 1rem;
    color:#1682c0;
    white-space: nowrap;    
}

/* fix для вертикального выравнивания div с select в одном ряду таблицы */
.hardware-v-fix {
    line-height: 1.5;
    padding-top: .375rem;
}

/* 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 */
.nav-line {
    
}




.top-nav-links {
    display: flex;
}

.top-nav-link {
    padding: 12px 15px;
    /* color: var(--color-top-nav-link);  */
    color: black;
    border-radius: .25rem .25rem 0 0;
}

.top-nav-link.active {
    /* background-color: #fff; */
}



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

.top-nav-corner {
    display: flex;
    gap: 25px;
    align-items: center;
}

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

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

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 {
    min-width: 360px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 15px 15px;
    border: 0px solid red;
}

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

/* login form */
.login-box {
    width: 360px; 
    margin: 20vh auto 0;
}

.login-form {
    padding: 25px;
    background-color: white;
    box-shadow: 0px 3px 5px 0px #0000001F;
}

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




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

.up-btn-danger {
    color: red;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.description {
    color: var(--color-dialog-text);
    margin-bottom: 1rem;
}

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

.icon-text-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.back-and-title {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-bottom: 15px;
}

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

.back-icon {
    width: 32px;
    height: 32px;    
    fill: #6495ed;
    padding: 3px 5px;    
    cursor: pointer;
    /* opacity: 0.8; */
}

.back-icon:hover {
    /* opacity: 1; */
    fill: #ff527a;
    background-color:#ffe9e1;
}

.revert-icon {
    width: 28px;
    height: 28px;    
    stroke: #ff527a;
    stroke-width: 2;
    padding: 3px 5px;    
    cursor: pointer;
    fill: none;
    /* opacity: 0.8; */
}

.revert-icon:hover {
    opacity: 0.85;
    /* stroke: #ff527a; */
    background-color:#ffe9e1;
}

.dropdown-icon {
    width: 15px;
    height: 9px;
    fill: #80858a;
}


/* 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;
}

/* car debug tab */

.car-debug-box {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.collapsed-bottom-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 7px 15px;
    background-color: #f9f9f9;
    /* border: 1px solid red; */
}

.car-debug-log-title {
    font-size: 1.375rem;
    margin-bottom: 1rem;
    margin-left: 15px;
}

.w400 {
    max-width: 450px;
}

.w600 {
    max-width: 600px;
}

.log-table tbody {
    display: block;
    min-width: 330px;
    max-height: 600px;
    overflow-y: scroll;
}

.value-wrap {
    display: inline-block;
    padding: 3px 5px;
}

.value-wrap.active {
    background-color: #c4f8d6;
} 

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

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

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

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

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

.hardware-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.table-title {
    font-size: 1.375rem;
    margin-bottom: 1rem;
}

.table-subtitle {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.lh1p5 {
    line-height: 1.5;
}


.fit-form {
    width: fit-content;
    min-width: 350px;
}

/* images chain */
.plus-image {
    width: 100px;
    height: 100px;
    border-radius: 0.25rem;
    border: 0;
    background-color: white;
    cursor: pointer;
}

.plus-icon {
    width: 72px;
    height: 72px;
    fill: #c2c2c2;
}

/* conn point */
.conn-point-name {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.conn-point-description {
    margin-bottom: 1rem;
}

.image-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-bottom: 1.5rem;
}

.image-chain img {
    border-radius: 0.25rem;
    border: 1px solid #c2c2c2;
    cursor: pointer;
}

/* image carousel */

.image-carousel-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
}

.image-carousel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: calc(100vh - 80px);
    padding: calc(30px + 1.8rem) 56px 15px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-carousel-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background-color: #666;
}

.image-carousel-title {
    color: white;
    font-size: 1.125rem;
}

.image-carousel-arrow {
    position: fixed;
    top: 0;
    bottom: 0;
    margin-top: 50vh;
    width: 56px;
    height: 56px;
    cursor: pointer;
}

.image-carousel-arrow.left {
    left: 0;            
}

.image-carousel-arrow.right {
    right: 0;
}

.image-carousel-arrow-icon {
    width: 48px;
    height: 48px;
    fill: #fff;
}

.image-carousel-arrow-icon:hover {
    fill: #ddd;
}

.image-carousel-content {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    object-fit: fill;
    user-select: none;
}

/* install place */
.install-place-box {
    margin-bottom: 2rem;
}

/* car buttons */

.car-buttons-box {
    width: 220px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.car-buttons-row {
    position: relative;
}

.car-buttons-circle {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    background-color: #e0e0e0;
}

.car-buttons-out-circle {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}

.car-buttons-out-circle.pressed {
    /* border-color: #16afed; */
    border-color: #2694FA;
}

.car-buttons-name {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.85rem;
    background-color: white;
    padding-left: 3px;
}

.car-buttons-name.pressed {
    color: #2694FA;
}

/* car outputs */

.car-output-out-circle {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-output-out-circle.pressed {
    border-color: #16afed;
}

.car-output-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    background-color: #e0e0e0;
}

/**/

.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #00b9fc;
    margin: 0 10px;
}

/*  */
.settings-box {
    margin-bottom: 30px;
}

/* .bottom-panel-tab {
    position: relative;
} */

/* .settings-buttons-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #f9f9f9;
    padding-left: 10px;
    padding-bottom: 10px;
} */

.sticky {
    position: sticky;
    top: 0;
}

/* table modification */
.td-center {
    
}


/**/

.red-text {
    color: #F1194D;
}

/* main text, header (18px) */ 
.basic-1 {
    color: #191D21;
}

/* inc tabs (13px) */
.basic-2 {
    font-family: Roboto;
    font-size: 12px;
    color: #515B64;
}

/*
top menu: 14px, weight: 500, basic-1

tabs bottom line #E9ECF2


button background - command sent #FFCB2E
button background - command applied #F1194D and can turn off
*/

.tab-border {
    border: 1px solid #B2C9ED;
}

/* active tab background */
.active-tab-text {
    color: #2694FA;
}

/* pin shadow: box-shadow: 0px 4px 4px 0px #00000040; */

.logo-on-login-page {
    width: 348px;
    margin-bottom: 30px;
}

.logo-on-top-menu {
    width: 186.25px;
    /* width: 204px; */
    /* margin-right: 30px; */
}

.logo-top-nav-row {
    display: flex;
    gap: 20px;
    align-items: center;
}

.collapsed-box {
    display: flex;
    gap: 15px;
    min-width: 330px;
    max-width: 1280px;
    margin: 0 auto;
    /* border: 1px solid red; */
}

.collapsed-dropdown {
    border: 1px solid #dedede;
    background-color: #fff;
    box-shadow: 0px 3px 5px 0px #0000001F;
}

.btn-more {
    background-color: #f0f0f0;
    border: 1px solid #d0dce0;
}

.btn-collapsed {
    color: #2694FA;
    background-color: #fff;
    border: 1px solid #2694FA;
}
/*
#95e3ff
#3c4043
*/

.btn-collapsed:hover:not(:disabled) {
    color: #fff;
    background-color: #2694FA;
    border: 1px solid #2694FA;
    /* opacity: 0.8; */
}

.btn-collapsed.on {
    color: #fff;
    background-color: #2694FA;
    border: 1px solid #2694FA;
    /* opacity: 0.8; */
}

.collapsed-dropdown-item {
    display: block;
    white-space: nowrap;
    text-align: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-family: var(--font-text);
    line-height: 1.5;
    color: #2694FA;
    background-color: #fff;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.collapsed-dropdown-item.on{
    color: #fff;
    background-color: #2694FA;
    /* opacity: 0.8; */
}

.collapsed-dropdown-item:not(:disabled) {
    cursor: pointer;
}

.collapsed-dropdown-item:disabled {
    opacity: 0.6;
}

.collapsed-dropdown-item:hover:not(:disabled) {
    color: #fff;
    background-color: #2694FA;
    /* opacity: 0.8; */
}



.row25 {
    display: flex;
    gap: 25px;
}

.btn-fill-light-blue {
    color: #3c4043;
    background-color: #95e3ff;
    border: 1px solid #95e3ff;
}

.btn-fill-light-blue:hover:not(:disabled) {
    background-color: #95e3ff;
    border: 1px solid #95e3ff;
    opacity: 0.8;
}


/* #ffb195;    
    background-color: #ffe9e1;
}

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



.custom-select {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: fit-content;
    padding: .375rem 0.125rem .375rem .75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    outline: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: default;
    /* font-size: 1rem;
    line-height: 1.5; */
}

.custom-select.active {
    border-color: #33b5e5;
    box-shadow: 0 0 0 0.2rem rgba(51,181,229,.25);
}

.custom-select.disabled {
    /* opacity: 0.65; */
    /* background-color: #353a3d; */
    cursor: default;
    background-color: rgba(170, 170, 170, 0.25);
    color: var(--color-form-control-disabled);
    border-color: rgba(118, 118, 118, 0.3);
}

.custom-select-name {            
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    flex-grow: 1;
}

.custom-select-options {
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ced4da;
    overflow: auto;
    min-width: 348px;
    max-width: 500px;
    max-height: 350px;
    margin-top: 2px;
    box-shadow: 0px 3px 5px 0px #0000001F;
}

.custom-select-options-table {
    border-collapse: collapse;
    /* min-width: 200px; */
    /* width: 100%; */
}

.custom-select-options-table td {
    padding: .375rem 0 .375rem .75rem;
    vertical-align: top;
    color: var(--color-text);
}

.custom-select-options-table td:last-child {
    padding-right: .75rem;
}

.custom-select-options-table tbody tr {
    cursor: pointer;
    border-bottom: 1px solid #efeff0;
}

.custom-select-options-table tbody tr:last-child {
    cursor: pointer;
    border-bottom: 0;
}

.custom-select-options-table tbody tr.active {
    background-color: rgb(179, 231, 245);
}

.custom-select-icon {
    width: 10px;
    height: 10px;
    fill: #80858a;
    margin: 0 .125rem 0 .75rem;
}

.custom-select-version {
    white-space: nowrap;
}

._omg_std {
    background-color: #fff;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
}

._omg_std th {
    font-family: 'Arimo';
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    font-size: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-dialog-header);
    background-color: #e8f5fa;
}

._omg_std td {
    padding: 12px;
    vertical-align: top;
}

._omg_std th:first-child, ._omg_std td:first-child {
    padding-left: 15px;
}

._omg_std th:last-child, ._omg_std td:last-child {
    padding-right: 15px;
}

.w100p {
    width: 100%;
}

.soft-version {
    line-height: 1.5;
    padding-top: calc(13px + .375rem) !important;
}

.hardware-table-wrap {
    min-width: 330px;
    overflow-x: auto;
    padding: 3px 3px 0.5rem 3px;
}

.w350 {
    width: 350px;
}

.w400 {
    width: 400px;
}

/* 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;
}

/* toggle */
.toggle {
    cursor: pointer;
}

.toggle.disabled {
    cursor: auto;
}

.toggle-icon {
    width: 38px;
    height: 25px;
}