.route-control-v16 {
    margin-top: 18px;
    padding: 16px;

    border:
        1px solid
        rgba(92, 76, 62, .14);

    border-radius: 18px;

    background: #fffdfb;

    box-shadow:
        0 8px 28px
        rgba(70, 55, 43, .06);
}

.route-control-v16 h3 {
    margin:
        0 0 5px;

    font-size: 16px;
}

.route-control-v16 .route-control-sub {
    margin:
        0 0 14px;

    font-size: 13px;
    opacity: .68;
}

.route-control-buttons-v16 {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}

.route-control-v16 button {
    min-height: 46px;

    border: 0;
    border-radius: 14px;

    padding:
        10px 12px;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.route-edit-button-v16 {
    background: #eee6da;
    color: #493b30;
}

.route-toggle-button-v16.active {
    background: #f0dddd;
    color: #6b3030;
}

.route-toggle-button-v16.inactive {
    background: #dfe9df;
    color: #29412e;
}

.route-edit-form-v16 {
    display: grid;
    gap: 11px;

    margin-top: 15px;
}

.route-edit-form-v16[hidden] {
    display: none;
}

.route-edit-form-v16 label {
    display: grid;
    gap: 5px;

    font-size: 12px;
    font-weight: 700;
}

.route-edit-form-v16 input {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(92, 76, 62, .18);

    border-radius: 12px;

    padding:
        8px 11px;

    background: white;

    font: inherit;
}

.route-save-button-v16 {
    background: #302b27;
    color: white;
}

.route-control-status-v16 {
    min-height: 18px;

    margin-top: 10px;

    font-size: 13px;
    line-height: 1.4;
}

.route-control-v16 button:disabled {
    opacity: .5;
    cursor: default;
}

@media (
    max-width: 480px
) {
    .route-control-buttons-v16 {
        grid-template-columns:
            1fr;
    }
}
