.container-remote {
    padding: 0px 5px 0 5px;
}

.tabs {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #aaa9;
    box-shadow: 1px 1px 4px 1px rgba(2,2,2,.1);
    margin: 0 5px;
}

.tab {
    padding: 10px 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: none;
    outline: none;
    flex: 1;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    color: #606060;
}

.tab:focus {
    outline: none;
}

.tab:hover {
    background-color: #e0e0e0;
}

.tab.active {
    background-color: #fff;
    border-bottom: 3px solid #961911cc;
    color: #961911cc;
}

.tab::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    flex-shrink: 0;
}

.tab.active:first-child {
    border-radius: 10px 0 0 10px;
}

.tab.active:last-child {
    border-radius: 0 10px 10px 0;
}

.tab[data-tab="boost"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik03IDEzYTQgNCAwIDEgMCA4IDBhNCA0IDAgMSAwLTggMCIvPjxwYXRoIGQ9Ik0xOC44NiAxMWMuMDg4LjY2LjE0IDEuNTEyLjE0IDJhOCA4IDAgMSAxLTgtOGg2Ii8+PHBhdGggZD0iTTExIDljMi40ODkuMTA4IDQuNDg5LjEwOCA2IDBtMC01YTEgMSAwIDAgMSAxLTFoMmExIDEgMCAwIDEgMSAxdjZhMSAxIDAgMCAxLTEgMWgtMmExIDEgMCAwIDEtMS0xem0tNiA5bC0zLjUtMS41TTExIDEzbDIuNSAzbS01IDBsMi41LTNtMCAwbDMuNS0xLjVNMTEgOXY0Ii8+PC9nPjwvc3ZnPg==");
}

.tab[data-tab="protection"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Im0xNiAzMGwtNi4xNzYtMy4yOTNBMTAuOTgyIDEwLjk4MiAwIDAgMSA0IDE3VjRhMi4wMDIgMi4wMDIgMCAwIDEgMi0yaDIwYTIuMDAyIDIuMDAyIDAgMCAxIDIgMnYxM2ExMC45ODIgMTAuOTgyIDAgMCAxLTUuODI0IDkuNzA3Wk02IDR2MTNhOC45ODUgOC45ODUgMCAwIDAgNC43NjYgNy45NDJMMTYgMjcuNzMzbDUuMjM0LTIuNzlBOC45ODUgOC45ODUgMCAwIDAgMjYgMTdWNFoiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNiAyNS4yNzdWNmg4djEwLjgwNWE3IDcgMCAwIDEtMy43IDYuMTczWiIvPjwvc3ZnPg==");
}

.tab[data-tab="fan"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMC42IDIycS0xLjI3NSAwLTEuOTM3LS43NjNUOCAxOS41cTAtLjY1LjI4OC0xLjI2M3QuODg3LTEuMDEycS41NS0uMzUuODg4LS45dC40NjItMS4xNzVsLS4zLS4xNXEtLjE1LS4wNzUtLjI3NS0uMTc1bC0yLjMuODI1cS0uNDI1LjE1LS44MjUuMjVUNiAxNnEtMS41NzUgMC0yLjc4OC0xLjM3NVQyIDEwLjZxMC0xLjI3NS43NjMtMS45MzdUNC40NzQgOHEuNjUgMCAxLjI3NS4yODh0MS4wMjUuODg3cS4zNS41NS45Ljg4N3QxLjE3NS40NjNsLjE1LS4zcS4wNzUtLjE1LjE3NS0uMjc1bC0uODI1LTIuM3EtLjE1LS40MjUtLjI1LS44MjV0LS4xLS44cTAtMS42IDEuMzc1LTIuODEzVDEzLjQgMnExLjI3NSAwIDEuOTM4Ljc2M1QxNiA0LjQ3NHEwIC42NS0uMjg4IDEuMjc1dC0uODg3IDEuMDI1cS0uNTUuMzUtLjg4Ny45dC0uNDYzIDEuMTc1bC4zLjE1cS4xNS4wNzUuMjc1LjE3NWwyLjMtLjg1cS40MjUtLjE1LjgxMy0uMjM3VDE3Ljk3NSA4UTIwIDggMjEgOS42NzV0MSAzLjcyNXEwIDEuMjc1LS44IDEuOTM4VDE5LjQyNSAxNnEtLjYyNSAwLTEuMjEzLS4yODh0LS45ODctLjg4N3EtLjM1LS41NS0uOS0uODg3dC0xLjE3NS0uNDYzbC0uMTUuM3EtLjA3NS4xNS0uMTc1LjI3NWwuODI1IDIuM3EuMTUuNC4yNS43NjN0LjEuNzYycS4wMjUgMS42MjUtMS4zNSAyLjg3NVQxMC42IDIyWm0xLjQtOC41cS42MjUgMCAxLjA2My0uNDM4VDEzLjUgMTJxMC0uNjI1LS40MzgtMS4wNjNUMTIgMTAuNXEtLjYyNSAwLTEuMDYzLjQzOFQxMC41IDEycTAgLjYyNS40MzggMS4wNjNUMTIgMTMuNVptLTEuMTUtNC44cS4xNS0uMDUuMzEzLS4wODh0LjMxMi0uMDYycS4yLTEuMDUuNzYzLTEuOTV0MS40ODctMS41cS4xMjUtLjEuMi0uMjVUMTQgNC40NzVxMC0uMi0uMTUtLjMzN1QxMy40IDRxLS45NSAwLTIuMTUuNDEzVDEwIDYuMDI0cTAgLjIyNS4wNjMuNDI1dC4xMTIuMzc1TDEwLjg1IDguN1pNNiAxNHEuMzUgMCAuODI1LS4xNzVMOC43IDEzLjE1cS0uMDUtLjE1LS4wODgtLjMxM3QtLjA2Mi0uMzEycS0xLjA1LS4yLTEuOTUtLjc2M3QtMS41LTEuNDg3cS0uMS0uMTI1LS4yNjItLjJUNC40NzUgMTBxLS4yMjUgMC0uMzUuMTVUNCAxMC42cTAgMS4zNS41MTMgMi4zNzVUNiAxNFptNC42IDZxMS4xNzUgMCAyLjMxMy0uNDc1VDE0IDE3Ljg3NXEwLS4yLS4wNjItLjM3NXQtLjExMy0uMzI1TDEzLjE1IDE1LjNxLS4xNS4wNS0uMzEzLjA4OHQtLjMxMi4wNjJxLS4yIDEuMDUtLjc2MyAxLjk1dC0xLjQ4NyAxLjVxLS4xMjUuMS0uMjEzLjI2M1QxMCAxOS41cS4wMjUuMi4xNS4zNXQuNDUuMTVabTguODI1LTZxLjIyNSAwIC40LS4xMjVUMjAgMTMuNHEwLS45NS0uNC0yLjE2M1QxNy45NzUgMTBxLS4yMjUgMC0uNDI1LjA1dC0uMzc1LjFsLTEuODc1LjdxLjA1LjE1LjA4OC4zMTN0LjA2Mi4zMTJxMS4wNS4yIDEuOTUuNzYzdDEuNSAxLjQ4N3EuMDc1LjEyNS4yMjUuMnQuMy4wNzVabS0zLjk3NS0yLjUyNVpNMTEuNDc1IDguNTVaTTguNTUgMTIuNTI1Wm0zLjk3NSAyLjkyNVoiLz48L3N2Zz4=");
}

.tab[data-tab="logic"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0yMiAxMmgtM00yIDloM20tMyA2aDNNNSA1bDEwIDdsLTEwIDd6bTEwIDdhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwIi8+PC9zdmc+");
}

.tab[data-tab="inputs"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik04IDExLjVjMC0uODMtLjY3LTEuNS0xLjUtMS41UzUgMTAuNjcgNSAxMS41UzUuNjcgMTMgNi41IDEzUzggMTIuMzMgOCAxMS41em03LTVjMC0uODMtLjY3LTEuNS0xLjUtMS41aC0zQzkuNjcgNSA5IDUuNjcgOSA2LjVTOS42NyA4IDEwLjUgOGgzYy44MyAwIDEuNS0uNjcgMS41LTEuNXpNOC41IDE1Yy0uODMgMC0xLjUuNjctMS41IDEuNVM3LjY3IDE4IDguNSAxOHMxLjUtLjY3IDEuNS0xLjVTOS4zMyAxNSA4LjUgMTV6TTEyIDFDNS45MyAxIDEgNS45MyAxIDEyczQuOTMgMTEgMTEgMTFzMTEtNC45MyAxMS0xMVMxOC4wNyAxIDEyIDF6bTAgMjBjLTQuOTYgMC05LTQuMDQtOS05czQuMDQtOSA5LTlzOSA0LjA0IDkgOXMtNC4wNCA5LTkgOXptNS41LTExYy0uODMgMC0xLjUuNjctMS41IDEuNXMuNjcgMS41IDEuNSAxLjVzMS41LS42NyAxLjUtMS41cy0uNjctMS41LTEuNS0xLjV6bS0yIDVjLS44MyAwLTEuNS42Ny0xLjUgMS41cy42NyAxLjUgMS41IDEuNXMxLjUtLjY3IDEuNS0xLjVzLS42Ny0xLjUtMS41LTEuNXoiLz48L3N2Zz4=");
}

.tab[data-tab="calibration"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMiAyMnEtMi4wNzUgMC0zLjUzOC0xLjQ2M1Q3IDE3cTAtMi4wNzUgMS40NjMtMy41MzhUMTIgMTJxMi4wNzUgMCAzLjUzOCAxLjQ2M1QxNyAxN3EwIDIuMDc1LTEuNDYzIDMuNTM4VDEyIDIyWm0wLTJxMS4yNSAwIDIuMTI1LS44NzVUMTUgMTdxMC0xLjI1LS44NzUtMi4xMjVUMTIgMTRxLTEuMjUgMC0yLjEyNS44NzVUOSAxN3EwIDEuMjUuODc1IDIuMTI1VDEyIDIwWm0tNS43MjUtOC41NzVsLTMuNTUtMy41NXEtLjMtLjMtLjI4OC0uNzEzdC4zMTMtLjY4N1E0LjY3NSA0LjggNy4wNSAzLjlUMTIgM3EyLjU3NSAwIDQuOTUuOXQ0LjMgMi41NzVxLjMuMjc1LjMxMy42ODh0LS4yODguNzEybC0zLjU1IDMuNTVxLS4yNzUuMjc1LS43LjN0LS43NzUtLjI1cS0uOTI1LS43MjUtMi0xLjFUMTIgMTBxLTEuMTc1IDAtMi4yNS4zNzV0LTIgMS4xcS0uMzUuMjc1LS43NzUuMjV0LS43LS4zWk03LjE1IDkuNXExLjA1LS43NSAyLjI4OC0xLjEyNVQxMiA4cTEuMzI1IDAgMi41MzguMzYzVDE2Ljg1IDkuNDVsMi4yLTIuMnEtMS41NS0xLjEtMy4zMzgtMS42NzVUMTIgNXEtMS45MjUgMC0zLjcxMy41NzVUNC45NSA3LjI1bDIuMiAyLjI1Wk0xMiA4Wm0wIDlaIi8+PC9zdmc+");
}

.tab[data-tab="other"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNS4yNSAxOC43NXEuMyAwIC41MjUtLjIyNVExNiAxOC4zIDE2IDE4cTAtLjMtLjIyNS0uNTI1cS0uMjI1LS4yMjUtLjUyNS0uMjI1cS0uMyAwLS41MjUuMjI1cS0uMjI1LjIyNS0uMjI1LjUyNXEwIC4zLjIyNS41MjVxLjIyNS4yMjUuNTI1LjIyNVptMi43NSAwcS4zIDAgLjUyNS0uMjI1cS4yMjUtLjIyNS4yMjUtLjUyNXEwLS4zLS4yMjUtLjUyNXEtLjIyNS0uMjI1LS41MjUtLjIyNXEtLjMgMC0uNTI1LjIyNXEtLjIyNS4yMjUtLjIyNS41MjVxMCAuMy4yMjUuNTI1cS4yMjUuMjI1LjUyNS4yMjVabTIuNzUgMHEuMyAwIC41MjUtLjIyNXEuMjI1LS4yMjUuMjI1LS41MjVxMC0uMy0uMjI1LS41MjVxLS4yMjUtLjIyNS0uNTI1LS4yMjVxLS4zIDAtLjUyNS4yMjVRMjAgMTcuNyAyMCAxOHEwIC4zLjIyNS41MjVxLjIyNS4yMjUuNTI1LjIyNVpNNSAyMXEtLjgyNSAwLTEuNDEzLS41ODdRMyAxOS44MjUgMyAxOVY1cTAtLjgyNS41ODctMS40MTNRNC4xNzUgMyA1IDNoMTRxLjgyNSAwIDEuNDEzLjU4N1EyMSA0LjE3NSAyMSA1djYuN3EtLjQ3NS0uMjI1LS45NzUtLjM4OHEtLjUtLjE2Mi0xLjAyNS0uMjM3VjVINXYxNGg2LjA1cS4wNzUuNTUuMjM4IDEuMDVxLjE2Mi41LjM4Ny45NVptMC0zdjFWNXY2LjA3NVYxMXY3Wm0yLTJxMCAuNDI1LjI4Ny43MTJRNy41NzUgMTcgOCAxN2gzLjA3NXEuMDc1LS41MjUuMjM3LTEuMDI1cS4xNjMtLjUuMzYzLS45NzVIOHEtLjQyNSAwLS43MTMuMjg3UTcgMTUuNTc1IDcgMTZabTAtNHEwIC40MjUuMjg3LjcxMlE3LjU3NSAxMyA4IDEzaDUuMXEuOC0uNzUgMS43ODctMS4yNXEuOTg4LS41IDIuMTEzLS42NzVxLS4yMjUtLjA1LS41LS4wNjNRMTYuMjI1IDExIDE2IDExSDhxLS40MjUgMC0uNzEzLjI4N1E3IDExLjU3NSA3IDEyWm0wLTRxMCAuNDI1LjI4Ny43MTJRNy41NzUgOSA4IDloOHEuNDI1IDAgLjcxMi0uMjg4UTE3IDguNDI1IDE3IDh0LS4yODgtLjcxM1ExNi40MjUgNyAxNiA3SDhxLS40MjUgMC0uNzEzLjI4N1E3IDcuNTc1IDcgOFptMTEgMTVxLTIuMDc1IDAtMy41MzctMS40NjJRMTMgMjAuMDc1IDEzIDE4cTAtMi4wNzUgMS40NjMtMy41MzhRMTUuOTI1IDEzIDE4IDEzdDMuNTM4IDEuNDYyUTIzIDE1LjkyNSAyMyAxOHEwIDIuMDc1LTEuNDYyIDMuNTM4UTIwLjA3NSAyMyAxOCAyM1oiLz48L3N2Zz4=");
}

.tab[data-tab="config"]::before {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Im0xMC44MjIgMTMuMzRsLTEuMDctLjgzYTMuODgyIDMuODgyIDAgMCAwIC4wNC0uNDlhMi42MjYgMi42MjYgMCAwIDAtLjA0LS40OWwxLjA2LS44M2EuMjYuMjYgMCAwIDAgLjA2LS4zMmwtMS0xLjczYS4yNTQuMjU0IDAgMCAwLS4zMS0uMTFsLTEuMjQuNWEzLjQyIDMuNDIgMCAwIDAtLjg1LS40OWwtLjE5LTEuMzJhLjIzOS4yMzkgMCAwIDAtLjI0LS4yMWgtMmEuMjU3LjI1NyAwIDAgMC0uMjUuMjFsLS4xOSAxLjMyYTMuOTk1IDMuOTk1IDAgMCAwLS44NS40OWwtMS4yNC0uNWEuMjYyLjI2MiAwIDAgMC0uMzEuMTFsLTEgMS43M2EuMjQ4LjI0OCAwIDAgMCAuMDYuMzJsMS4wNi44M2E0LjAxMyA0LjAxMyAwIDAgMCAwIC45OGwtMS4wNi44M2EuMjYuMjYgMCAwIDAtLjA2LjMybDEgMS43M2EuMjU0LjI1NCAwIDAgMCAuMzEuMTFsMS4yNC0uNWEzLjQyIDMuNDIgMCAwIDAgLjg1LjQ5bC4xOSAxLjMyYS4yNDkuMjQ5IDAgMCAwIC4yNS4yMWgyYS4yNTcuMjU3IDAgMCAwIC4yNS0uMjFsLjE5LTEuMzJhMy42OTUgMy42OTUgMCAwIDAgLjg0LS40OWwxLjI1LjVhLjI2Mi4yNjIgMCAwIDAgLjMxLS4xMWwxLTEuNzNhLjI2LjI2IDAgMCAwLS4wNi0uMzJabS00Ljc4LjE4YTEuNSAxLjUgMCAxIDEgMS41LTEuNWExLjQ5OCAxLjQ5OCAwIDAgMS0xLjUgMS41Wk0xOS45OTcuMDE1aC00YS45OTkuOTk5IDAgMCAwLS45OTUgMUwxNSAzSDQuOTk3djMuMDFsMi4wMTIuMDEydi0xLjAxTDE0Ljk5OSA1bC0uMDAyIDQuMDE1YS45OTkuOTk5IDAgMCAwIC45OTUgMWg2LjAwNWExLjAwMyAxLjAwMyAwIDAgMCAxLTF2LTZabS0uNSAzLjVWLjc2NWwyLjc1IDIuNzVabS41MDEgMTAuNDk0aC00YS45OTkuOTk5IDAgMCAwLS45OTUgMWwtLjAwMiA0LjAxbC03Ljk5LjAwNHYtMS4wMUg1djMuMDFsMTAtLjAwNGwtLjAwMiAxLjk5YS45OTkuOTk5IDAgMCAwIC45OTUgMWg2LjAwNWExLjAwMyAxLjAwMyAwIDAgMCAxLTF2LTZabS0uNSAzLjV2LTIuNzVsMi43NSAyLjc1WiIvPjwvc3ZnPg==");
}

.tab-text {
    flex-shrink: 0;
}

.tab-content {
    background-color: #f3f3f3;
    margin-top: 20px;
    transition-behavior: allow-discrete;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, display .25s;
    opacity: 0;
    transform: translateY(-10px);
    display: none;
}

.tab-content.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.card-remote {
    background-color: #f3f3f3;
    border-radius: 10px;
    padding: 5px 15px 0;
    margin-bottom: 20px;
    border: 1px dashed #a9a9a9;
    border-left: 3px solid #961911cc;
}

.card-remote h1 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding: 10px;
}

.remote-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
}

.remote-table td,
.remote-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 0.5em 1em;
    text-align: left;
    vertical-align: middle;
}

.remote-table td:first-child,
.remote-table th:first-child {
    border-left-width: 0;
}

.remote-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.remote-table th {
    font-weight: 600;
    border-bottom: 1px solid #cbcbcb;
}

.remote-table td {
    border-bottom: 1px solid #cbcbcb;
    background-color: transparent;
}

.remote-table tbody > tr:nth-child(odd) > td {
    background-color: #f8f8f8;
}

.remote-table tbody > tr:hover > td {
    background-color: #f0f7ff;
}

.remote-table-horizontal td,
.remote-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}

.remote-table-horizontal tbody > tr:last-child > td {
    border-bottom-width: 0;
}

.remote-table-compact td,
.remote-table-compact th {
    padding: 0.3em 0.6em;
}

.remote-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
}

.remote-table-bordered {
    border: 1px solid #cbcbcb;
}

.remote-table-bordered td,
.remote-table-bordered th {
    border: 1px solid #cbcbcb;
}

.remote-table-bordered tbody > tr:last-child > td {
    border-bottom-width: 1px;
}

.remote-table.logic-table th {
    background-color: #f5f5f5;
}

.card-remote .remote-table {
    border: none;
    margin: 10px 0;
}

.card-remote .remote-table th {
    background-color: #f9f9f9;
    border-bottom: 2px solid #e0e0e0;
}

.card-remote .remote-table td {
    border-bottom: 1px solid #eee;
}

.card-remote .remote-table tr:last-child td {
    border-bottom: none;
}

.inc-dec {
    display: flex;
    align-items: center;
    gap: 5px;
}

.value-button {
    width: 30px;
    height: 30px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.value-button:hover {
    background-color: #e0e0e0;
}

.value-button.decrease {
    border-radius: 20px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xOCAxMi45OThINmExIDEgMCAwIDEgMC0yaDEyYTEgMSAwIDAgMSAwIDJ6Ii8+PC9zdmc+") no-repeat 4px;
    background-color: rgba(230,230,230);
    background-position-x: center;
    width: 30px;
}

.value-button.increase {
    border-radius: 20px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xOCAxMi45OThoLTV2NWExIDEgMCAwIDEtMiAwdi01SDZhMSAxIDAgMCAxIDAtMmg1di01YTEgMSAwIDAgMSAyIDB2NWg1YTEgMSAwIDAgMSAwIDJ6Ii8+PC9zdmc+") no-repeat 4px;
    background-color: rgba(230,230,230);
    background-position-x: center;
    width: 30px;
}

.inc-dec input {
    width: 80px;
    text-align: center;
    outline: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-top: 6px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #961911;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.remote-button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    height: auto;
    color: #333;
}

.remote-button:hover {
    background-color: #e0e0e0;
}

.button-primary {
    background-color: #4a6ee0;
    color: white;
    border: 1px solid #3a5ec0;
}

.button-primary:hover {
    background-color: #3a5ec0;
}
 
.cntr {
    text-align: center;
    padding: 20px;
}

.popup-target {
    position: relative;
}

.popup {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
    bottom: 100%;
    left: 60%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-weight: normal;
}

.popup-target:hover .popup {
    opacity: 1;
}

.popup:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.logic-table th, .logic-table td {
    padding: 8px 10px;
}

.geo-copy-paste {
    display: flex;
    align-items: center;
    justify-content: center;
}

.geo-copy-paste svg {
    cursor: pointer;
}

#ds0-color, #ds1-color, #ds2-color, #ds3-color, #ds4-color {
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #f0f0f0;
    text-align: center;
}

.timestamp {
    width: fit-content;
    opacity: .5;
    position: absolute;
    right: 70px;
    margin: 14px auto;
    font-family: monospace;
}

.collision {
    border: 1px solid red !important;
}

@media screen and (max-width: 993px) {
    .tabs {
        flex-direction: column;
    }

    .tab {
        padding: 5px;
        justify-content: space-between;
        border-bottom: 1px solid #ababab;
    }

    .tab:last-child {
        border-bottom: 1px solid transparent;
    }

    .tab.active {
        border-bottom: 1px solid #961911cc;
        border-radius: 0;
    }

    .tab.active:last-child {
        border-bottom: 1px solid transparent;
    }

    .tab::before {
        margin-left: 5px;
    }

    .tab.active:first-child {
        border-radius: 0;
    }

    .remote-table td,
    .remote-table th {
        padding: 0.3em 0.5em;
    }
}

@media screen and (max-width: 560px) {
/*
    .popup-target {
        position: static;
    }

    .popup {
        position: fixed !important;
        bottom: auto;
        top: 60px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto;
        max-width: 90vw;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
    }

    .popup-target:hover .popup {
        opacity: 1;
        pointer-events: auto;
    }

    .popup:after {
        display: none;
    }
*/
    .hide {
        display: none;
    }
}

@starting-style {
    .tab-content.active {
        opacity: 0;
        transform: translateY(-10px);
    }
}

#cfgFile {
    background: transparent;
    height: auto;
}