﻿<style>
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header, footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }
        .main-content {
            display: flex;
            flex: 1;
        }
        .main-links, .main-right {
            width: 25%;
            background: #f4f4f4;
            padding: 1rem;
        }
        .main-middle {
            width: 50%;
            padding: 1rem;
            background: #ddd;
        }
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            .main-links, .main-middle, .main-right {
                width: 100%;
            }
        }
    .auto-style1 {
	color: #FFFFFF;
	.card{
    background:#2b2d31;
    padding:20px;
    border-radius:10px;
    margin-bottom:20px;
}

input,
textarea{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border:none;
    border-radius:5px;
    background:#404249;
    color:#fff;
    box-sizing:border-box;
}

button{
    background:#5865f2;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    opacity:0.9;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:12px;
    border:1px solid #444;
}

th{
    background:#404249;
}

a{
    color:#58a6ff;
    text-decoration:none;
}

.delete{
    color:#ff6b6b;
}

.success{
    color:#57f287;
}
  </style>
