body, #firewall-configurator-form,
#generated-rules{font-family:Arial, sans-serif;color:#333;}
#firewall-configurator-form-container{max-width:700px;margin:0 auto;padding:20px;}
#firewall-configurator-form{background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px;padding:20px;}
#firewall-configurator-form label{display:block;margin-bottom:5px;font-weight:bold;text-align:center;}
#firewall-configurator-form select,
#firewall-configurator-form input[type="text"],
#firewall-configurator-form input[type="number"]{width:100%;padding:8px;margin-bottom:10px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;}
#firewall-configurator-form small{display:block;margin-top:5px;}
.section{margin-bottom:15px;}
.section p{margin-bottom:5px;font-weight:bold;text-align:center;}
#firewall-configurator-form .section label{text-align:left;}
input[type="checkbox"]{margin-right:5px;}
#generate_rules{background-color:#0073aa;color:#fff;border:none;border-radius:4px;padding:12px 20px;font-size:16px;cursor:pointer;width:100%;transition:background-color 0.3s ease;}
#generate_rules:hover{background-color:#005177;}
#generated-rules{margin-top:20px;overflow-x:auto;text-align:center;}
#generated-rules table{width:100%;border-collapse:collapse;margin-top:20px;}
#generated-rules th,
#generated-rules td{border:1px solid #ddd;padding:10px;}
#generated-rules th{background-color:#f2f2f2;}
#generated-rules tr:nth-child(even){background-color:#f9f9f9;}
#generated-rules tr:hover{background-color:#e9e9e9;}
pre{margin:0;font-family:Consolas, Monaco, monospace;}
@media screen and (max-width:600px){
#firewall-configurator-form {
padding: 15px;
}
#generate_rules {
width: 100%;
}
#generated-rules table,
#generated-rules thead,
#generated-rules tbody,
#generated-rules th,
#generated-rules td,
#generated-rules tr {
display: block;
}
#generated-rules tr {
margin-bottom: 15px;
}
#generated-rules th {
display: none;
}
#generated-rules td {
text-align: left;
padding-left: 50%;
position: relative;
border: none;
border-bottom: 1px solid #ddd;
}
#generated-rules td::before {
content: attr(data-label);
position: absolute;
left: 0;
width: 45%;
padding-left: 15px;
font-weight: bold;
white-space: nowrap;
}
#generated-rules td:last-child {
border-bottom: 2px solid #ddd;
}
}