form {
    margin: 20px auto; /* Center form with top margin */
    max-width: 1500px; /* Set max width for the form */
    padding: 20px; /* Inner padding for form */
    background: #ffffff; /* White background for the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.deleteColumn {
    background-color: red; /* Red background */
    color: white; /* White text */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
    padding: 10px 15px; /* Inner padding */
    border-radius: 5px; /* Rounded corners */
    transition: background 0.3s ease; /* Smooth transition */
}

.deleteColumn:hover {
    background-color: darkred; /* Dark red on hover */
}

.notification {
    margin-top: 10px; /* Space above the notification */
    padding: 10px; /* Inner padding */
    background: #c6f9c5; /* Very light green for success notifications */
    color: #2d662d; /* Dark green text for better contrast */
    border: 1px solid #b2e0b2; /* Darker green border */
    border-radius: 5px; /* Rounded corners */
}

/* Table Styles */
table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* No gaps between cells */
    margin-top: 20px; /* Space above the table */
}

th, td {
    padding: 10px; /* Inner padding */
    text-align: left; /* Left align text */
    border: 1px solid #ddd; /* Light gray border */
}

th {
    background: #f8f9fa; /* Very light gray for header */
}

input[type="text"] {
    width: 95%; /* Input field width */
    padding: 5px; /* Inner padding */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
}



.deleteRow {
    background-color: red; /* Red background */
    color: white; /* White text */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
    padding: 10px 15px; /* Inner padding */
    border-radius: 5px; /* Rounded corners */
    transition: background 0.3s ease; /* Smooth transition */
}

.deleteRow:hover {
    background-color: darkred; /* Dark red on hover */
}


input[type="submit"] {
    color:rgb(255, 255, 255);
    width:100px;
    border: 1px solid gray;
    padding: 10px;
    background-color: rgb(20, 44, 51);
}

input[type="submit"]:hover {
    color:rgb(0, 0, 0);
    width:100px;
    border: 1px solid rgb(131, 55, 55);
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.356);
}

.designTable {
    width: 80%; /* Adjusts the width to be slightly smaller than full screen */
    margin: 20px auto; /* Centers the table with space above and below */
    border-collapse: collapse; /* Removes spacing between borders */
}

.designTable td, .designTable th {
    border: 1px solid #ccc; /* Lighter border color for a softer look */
    padding: 6px 10px; /* Smaller padding for compact cell content */
    text-align: center; /* Center-aligns text within cells */
}

.designTable th {
    background-color: #f5f5f5; /* Light background color for headers */
    font-weight: bold;
    padding: 8px 10px; /* Slightly more padding for headers */
}

.designTable td[style*="background-color:limegreen;"],
.designTable td[style*="background-color:red;"] {
    padding: 6px; /* Override padding to match main cells */
}

.designTable tr:nth-child(even) {
    background-color: #fafafa; /* Alternating row color for readability */
}

.designTable td:hover {
    background-color: #f1fcff; /* Light blue hover effect */
}
#addRow {
    background-color: #44c544; 
    color: white; 
    border: none; 
    cursor: pointer; 
    padding: 10px 15px; 
    border-radius: 5px; 
    transition: background 0.3s ease;
}
#addRow:hover{
    background-color: #3a9f3a;
}
#addTextColumn{
    background-color: #FFA500; 
    color: white; 
    border: none; 
    cursor: pointer; 
    padding: 10px 15px; 
    border-radius: 5px; 
    transition: background 0.3s ease;
}
#addTextColumn:hover{
    background-color: #FF8C00;
}
#addNumberColumn{
    background-color: #FFA500; 
    color: white; 
    border: none; 
    cursor: pointer; 
    padding: 10px 15px; 
    border-radius: 5px; 
    transition: background 0.3s ease;
}
#addNumberColumn:hover{
    background-color: #FF8C00;
}
#deleteColumn{
    background-color: red; 
    color: white; 
    border: none; 
    cursor: pointer; 
    padding: 10px 15px; 
    border-radius: 5px; 
    transition: background 0.3s ease;
}
#deleteColumn:hover{
    background-color: darkred;
}
.podnaslov{
    font-size: 1.5em; 
    color: #333; 
    margin-top: 20px;
    text-align: center;
}
.table-container{
    overflow-x: auto;
    margin: 10px auto; 
    display: flex; 
    justify-content: center;
}
.izpis-table{
    width: 80%; 
    max-width: 800px;
    border-collapse: collapse;
    margin: 20px auto;
    font-size: 1em;
    font-family: Arial, sans-serif;
}
.th-izpis{
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd; 
    background-color: #f4f4f4; 
    font-weight: bold;
}
.canvas-container {
    display: flex; /* Uporabi Flexbox za centriranje */
    justify-content: center; /* Horizontalno centriranje */
    align-items: center; /* Vertikalno centriranje */
    padding-top:20px;
}

.canvas {
    border: 1px solid #ccc; /* Opcijski rob za boljšo vidnost */
}