body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; } .sidebar { width: 250px; background-color: #333; position: fixed; height: 100%; padding-top: 20px; color: white; box-shadow: 2px 0 5px rgba(0,0,0,0.1); } .sidebar h2 { text-align: center; color: white; margin-bottom: 20px; } .sidebar ul { list-style-type: none; padding: 0; } .sidebar ul li { padding: 10px; text-align: left; margin-bottom: 10px; background-color: #444; border-radius: 5px; } .sidebar ul li a { color: white; text-decoration: none; display: block; padding: 10px; transition: background-color 0.3s; } .sidebar ul li a:hover { background-color: #575757; } .submenu { display: none; list-style-type: none; padding-left: 20px; } .submenu li { background-color: #555; margin-bottom: 5px; } .submenu li a { padding: 10px; background-color: #555; border-radius: 5px; } .submenu li a:hover { background-color: #666; } .content { margin-left: 250px; padding: 20px; } .container { max-width: 1200px; margin: auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } table, th, td { border: 1px solid #ddd; padding: 8px; } th { background-color: #f4f4f4; text-align: left; } tr:nth-child(even) { background-color: #f9f9f9; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input, .form-group select, .form-group textarea { width: calc(100% - 22px); padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } .tabs { margin-top: 20px; } .tab-button { background-color: #ddd; border: none; padding: 10px 20px; cursor: pointer; display: inline-block; margin-right: 5px; border-radius: 5px; transition: background-color 0.3s; } .tab-button:hover { background-color: #ccc; } .tab-content { display: none; margin-top: 20px; } textarea { width: calc(100% - 22px); padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; margin-bottom: 10px; } .client-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .client-info { background-color: #f9f9f9; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .search-bar { margin-bottom: 20px; } #search { width: 300px; padding: 8px; font-size: 1em; } #search-button { padding: 8px 12px; font-size: 1em; cursor: pointer; background-color: #007BFF; color: #fff; border: none; border-radius: 4px; transition: background-color 0.3s; } #search-button:hover { background-color: #0056b3; }