body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

h1 {
    text-align: center;
}

.form-group {
    margin-bottom: 10px;
    margin: 10 auto;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
select {
    width: auto;
    padding: 8px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none;
}

button {
    padding: 10px 10px;
    font-size: 16px;
    background-color: #007bff;
    color: #ffffff;
    border: 5px;
    border-radius: 5px;
    cursor: pointer;
}
.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.remote-video video {
    width: 490px;
    height: auto;
    border-radius: 2px;
}
.control-buttons button:disabled {
    background-color: grey;
    color: white;
    cursor: not-allowed;
}
.control-button button:enabled {
	background-color: blue;
	color: white;
	cursor: allowed;
}
.logo {
    height: 50px; /* Adjust the height as needed */
    margin-right: 20px;
}
.form-group-ptz {
            display: grid;
            grid-template-columns: repeat(5, 60px);
            grid-template-rows: repeat(3, 60px);
            gap: 10px;
            justify-items: center;
            align-items: center;
        }
        .form-group-ptz button {
            width: 60px;
            height: 60px;
            border: none;
            background-color: #007BFF;
            color: white;
            font-size: 14px;
            border-radius: 1px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: block; /* Make buttons visible */
        }
        .form-group-ptz button:hover {
            background-color: #0056b3;
        }
        .form-group-ptz #upButton {
            grid-column: 2;
            grid-row: 1;
        }
        .form-group-ptz #leftButton {
            grid-column: 1;
            grid-row: 2;
        }
        .form-group-ptz #rightButton {
            grid-column: 3;
            grid-row: 2;
        }
        .form-group-ptz #downButton {
            grid-column: 2;
            grid-row: 3;
        }
        .form-group-ptz #zoominButton {
            grid-column: 1;
            grid-row: 4;
        }
        .form-group-ptz #zoomoutButton {
            grid-column: 3;
            grid-row: 4;
        }
        .form-group-ptz #ptzPos {
            grid-column: 4;
            grid-row: 1;
        }
        .form-group-ptz #presetList {
            grid-column: 4;
            grid-row: 2;
        }
        .form-group-ptz #tourList {
            grid-column: 4;
            grid-row: 3;
        }
        .form-group-ptz #ptzPosdata {
            grid-column: 5;
            grid-row: 1;
            width: 1000px;
            font-size: 10px;
            text-align: right;
        }
        .form-group-ptz #presetListdata {
            grid-column: 5;
            grid-row: 2;
            width: 1000px;
            font-size: 10px;
            text-align: right;
        }
        .form-group-ptz #tourListdata {
            grid-column: 5;
            grid-row: 3;
            width: 1000px;
            font-size: 10px;
            text-align: right;
        }
.form-group-ptz-ctrl {
            display: grid;
            grid-template-columns: repeat(3, 90px);
            grid-template-rows: repeat(1, 90px);
            gap: 10px;
            justify-items: center;
            align-items: center;
        }
.form-group-export {
            display: grid;
            grid-template-columns: repeat(3, 190px);
            grid-template-rows: repeat(1, 190px);
            gap: 10px;
            justify-items: center;
            align-items: center;
        }
.form-group-replay {
            display: grid;
            grid-template-columns: repeat(2, 160px);
            grid-template-rows: repeat(1, 140px);
            gap: 5px;
            justify-items: center;
            align-items: center;
        }