/* former reestr.css */
/* Поле ввода желтого цвета */
.pii {
    text-align: center;
    background-color: green;
}
.MyKnBlue {
    background: -webkit-gradient(linear, left top, left bottom, from(#6ba8d1), to(#3e779d));
    background: -webkit-linear-gradient(top, #6ba8d1, #3e779d);
    background: -moz-linear-gradient(top, #6ba8d1, #3e779d);
    background: -ms-linear-gradient(top, #6ba8d1, #3e779d);
    background: -o-linear-gradient(top, #6ba8d1, #3e779d);
}
.filterInput {
    margin: 0;
    padding: 0;
    width: 98%;
    border: 1px;
    border-style: solid;
    background: #c9b7a2;
}
.button {
    content: attr(data-title);
    background: #3e779d;
    background: -webkit-gradient(linear, left top, left bottom, from(#6ba8d1), to(#3e779d));
    background: -webkit-linear-gradient(top, #6ba8d1, #3e779d);
    background: -moz-linear-gradient(top, #6ba8d1, #3e779d);
    background: -ms-linear-gradient(top, #6ba8d1, #3e779d);
    background: -o-linear-gradient(top, #6ba8d1, #3e779d);
    font-size: 14px;
    vertical-align: middle;
    border: 1px solid #0a3c59;
    padding: 1px;
    border-radius: 2px;
    -webkit-box-shadow:
        rgba(255, 255, 255, 0.4) 0 1px 0,
        inset rgba(255, 255, 255, 0.4) 0 1px 0;
    -moz-box-shadow:
        rgba(255, 255, 255, 0.4) 0 1px 0,
        inset rgba(255, 255, 255, 0.4) 0 1px 0;
    box-shadow:
        rgba(255, 255, 255, 0.4) 0 1px 0,
        inset rgba(255, 255, 255, 0.4) 0 1px 0;
    text-shadow: #7ea4bd 0 1px 0;
    user-select: none;
}
.button:hover:before {
    content: attr(data-title);
    white-space: pre-line;
    position: fixed;
    top: 0px;
    left: -1000px;
    right: -1000px;
    z-index: 9999;
    background-color: #3e779d; /*  #ddd; */
}
.button:hover {
    border: 1px solid #0a3c59;
    text-shadow: #1e4158 0 1px 0;
    background: #3e779d;
    background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
    background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
    background: -moz-linear-gradient(top, #65a9d7, #3e779d);
    background: -ms-linear-gradient(top, #65a9d7, #3e779d);
    background: -o-linear-gradient(top, #65a9d7, #3e779d);
    background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
    color: #fff;
}
.button:active {
    text-shadow: #1e4158 0 1px 0;
    margin: auto;
    border: 1px solid #a80f66;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
    color: #fff;
    user-select: none;
}
/*
.pages {
	background: #c9b7a2;
	}
*/
/* Над картинкой меняю курсор на датчик */
div#kr:hover {
    cursor: crosshair;
    cursor:
        url(dt.png) 53 53,
        crosshair;
}

input[type="range"] {
    width: 80%;
}

/* Кнопки под деталь. практики */
button.stypeKn {
    background: #719b84;
    width: 150px;
}
button.moveKn {
    background: Mocassin;
    width: 50px;
}

/* ===== БАЗА / ФОН / ТИПОГРАФИКА ===== */
.pages {
    min-height: 100vh;
    background-color: #f5f7fa;
    font-size: 14px;
}

/* ===== Bootstrap card header (унификация) ===== */
.card-header {
    padding: 0.35rem 0.75rem;
    background-color: #e9edf2;
}

/* ===== Сужаем «пульт», но без жёсткой ломки ===== */
@media (min-width: 992px) {
    .container-xxl {
        max-width: 1180px;
    }
}

/* ===== Узкая колонка под вертикальный SVG ===== */
.praktika-rail {
    width: 16px;
}

/* ===== CANVAS ===== */
#CanvasImg {
    display: block;
    margin: 0 auto;
    width: 100%; /* занимает ширину контейнера */
    max-width: 620px; /* <-- подгони под свою карточку (например 520/600/700) */
    aspect-ratio: 1 / 1; /* всегда квадрат */
    height: auto; /* высота считается от aspect-ratio */
    background: #fff;
}

/* Горизонтальный ползунок — на всю ширину */
#svg_x {
    width: 100%;
    display: block;
}

/* SVG датчиков чуть «собраннее» */
.praktika-svg {
    display: inline-block;
    max-width: 100%;
}

/* ===== КНОПКИ: компактные размеры (не трогаем JS) ===== */
.stypeKn {
    min-width: 150px;
    padding: 0.35rem 0.65rem;
    border-radius: 0.8rem;
}

.moveKn {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 0.9rem;
    line-height: 1;
    font-weight: 600;
}

/* 3x3 сетка «крестовины» */
.praktika-numpad {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-auto-rows: 48px;
    gap: 8px;
}

/* ===== ПЛАШКИ КООРДИНАТ (как ты задал по цветам) ===== */
.info-badge,
.coord-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    background-color: #e9edf2;
    color: #495057;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Отступ от левой границы */
.info-badge {
    margin-left: 0.5rem;
}

/* Отступ от правой границы */
.coord-badge {
    margin-right: 0.5rem;
}

@media (max-width: 576px) {
    .info-badge,
    .coord-badge {
        margin: 0.25rem 0;
    }
}

/* ===== ЦВЕТНАЯ СХЕМА КНОПОК (как в твоём примере) ===== */

/* Основной стиль кнопок */
.btn-steel {
    background-color: #7fae5e !important;
    border-color: #7fae5e !important;
    color: #ffffff !important;
}
.btn-steel:hover {
    background-color: #6f9d52 !important; /* чуть темнее */
    border-color: #6f9d52 !important;
    color: #ffffff !important;
}
.btn-steel:active {
    background-color: #5f8846 !important; /* ещё темнее */
    border-color: #5f8846 !important;
    color: #ffffff !important;
}

/* Убираем белый hover Bootstrap */
.btn:hover {
    text-decoration: none;
}

/* Чтобы кнопки в группе не "прыгали" */
.btn-group .btn:hover {
    z-index: 1;
}

/* Active-состояние как выделение */
.btn.btn-steel.active {
    background-color: #6fa24f;
    border-color: #6fa24f;
    color: #fff;
}

.btn.btn-steel.active:hover {
    background-color: #5e8f42;
    border-color: #5e8f42;
}

/* Ряд под canvas: нужен контекст для абсолютного центра */
.canvas-hud {
    position: relative;
}

/* Амплитуда строго по центру ряда */
.amplitude-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* На узких экранах лучше не накладывать элементы друг на друга */
@media (max-width: 576px) {
    .canvas-hud {
        justify-content: center;
    }
    .amplitude-badge {
        position: static;
        transform: none;
        order: 2;
    }
    #info {
        order: 1;
    }
    #coord_xy {
        order: 3;
    }
}