body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

/* Default table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    min-width: 100px;
}

/* Edit mode styles */
body.edit-mode {
    background-color: #ffffcc; /* Light yellow background */
}

body.edit-mode table, 
body.edit-mode th, 
body.edit-mode td {
    background-color: #fff7e6; /* Softer yellow for table elements */
    border-color: #e6d6a3;
}

body.edit-mode button {
    background-color: #ffcc00; /* Yellow buttons */
    color: #333;
    border: 1px solid #e6b800;
}

body.edit-mode input, 
body.edit-mode textarea {
    background-color: #fff7e6;
    border: 1px solid #e6d6a3;
}

/* Read-only mode styles */
body.read-only-mode {
    background-color: #cce0ff; /* Light blue background */
}

body.read-only-mode table, 
body.read-only-mode th, 
body.read-only-mode td {
    background-color: #e6f0ff; /* Softer blue for table elements */
    border-color: #a3c2e6;
}

body.read-only-mode button {
    background-color: #3399ff; /* Blue buttons */
    color: #fff;
    border: 1px solid #0073e6;
}

body.read-only-mode input, 
body.read-only-mode textarea {
    background-color: #e6f0ff;
    border: 1px solid #a3c2e6;
}

/* General button styles */
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 10px;
}

button:hover {
    opacity: 0.9;
}

/* Links section */
#link-container {
    margin-bottom: 20px;
}

#link-container span {
    font-weight: bold;
}

#change-history {
    margin-top: 20px;
}

/* Copied label */
span[id$="LinkLabel"] {
    font-size: 12px;
    color: green;
    margin-left: 10px;
}