:root {
    --primary-color: #32b16c;
    --border-color: #ddd;
    --text-light: #777;
    --bg-color: #f9f9f9;
    --required-color: red;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-color);
    color: #333;
    margin: 0;
    padding: 0;
}

header, footer {
    text-align: center;
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
}

.container {
    width: 90%;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-left: 5px solid var(--primary-color);
    padding-left: 10px;
}

.breadcrumb {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
}

.note-required {
    color: var(--required-color);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

.required {
    color: var(--required-color);
    font-weight: normal;
    margin-left: 4px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem;
}

.radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.radio-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
}

.radio-group input[type="radio"] {
    margin-right: 5px;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 30px;
}

.buttons button {
    flex: 1;
    min-width: 120px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.buttons button:hover {
    background-color: #444;
}

.back-top {
    text-align: right;
    margin-top: 30px;
    font-size: 0.85rem;
}

footer {
    font-size: 0.85rem;
    color: var(--text-light);
    border-top: 1px solid var(--border-color);
    padding-bottom: 30px;
}

.label-center {
    display: block;
    text-align: center;
}

li .errorMsg {
    vertical-align: middle;
}

.errorMsg {
    color: #c30;
}

#errorPop {
    background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwP/2wBDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAtAC0DAREAAhEBAxEB/8QAHQAAAgICAwEAAAAAAAAAAAAACAkGBwACAwUKBP/EADUQAAEEAAUCAwQIBwAAAAAAAAECAwQFAAYHERIIIQkUMRMiMkEVFiQ0QlFigUNSU2GRodL/xAAaAQACAwEBAAAAAAAAAAAAAAAABAIDBQEG/8QANBEAAQMBBAgEBQQDAAAAAAAAAQACAxEEITFBBRITUWFxodEyM1KRFBUigeEjJNLwNGKx/9oADAMBAAIRAxEAPwD38YELMCEH3UD1Nq0yuY+UcoRaq0zG203KvJNkH34NO2+kLiwfLxX4q3rGSyfaqBcCWmlJJBKxxzpbW8zGKGgYzxHH6vSOQvcb8hStaOQ2ZrmbSSt5uHDf291YWguuddrHSzA/Hj1Wa6QtC5qmHVLYeYf3TGta72pLxhPrSUKSoqUy4OKiQpClWWW1OkcYZqbUCtRg4YVF5pQ3EVNKg1oVCeDZ0c3wHod3b8K/8OpZZgQswIVHdQOtFVohp/NzLJUxIvp6lVWU6l1Y3sbt5pSkOOIBDhr61sF+SofgSEAhS07pW20GFmrH57rm503uI3N6mgzTNmg2z7/Lbee337nJKL0/081F16XmjNNTb00iZGuU/TszMFjMiyplnbNuz1SGxHr5qVoWAd9ynj2SBsBhOzxAs1WYDficyTxOJ3lPyHVN/Rb1Gbc2dMWskNVi/EmWNAYScwQqqU9Ig29BcxmJMyvQ6/HiqU6qItK2ypsBEltB7gYrm1o3hzPOYajcd4PBwuO645BdaxsjC13gd/a/b8J4+W8xU+baCnzNl+a1YUt7XxbOtmMkFD8SW0l1skAkocSDxWg+8hYKSAQRjYhmZPEJY66rhnjxB4g3EZFZMjHRvMbvECu7xaoL4LS0r6SssLm3mx66qqoUqysrCY4lmJBgQmFyZcuS8shLTEdhtS1qPYJBxCSRkTDJIaMaCSdwCkxjnuDGCryaALzX9TXU7K131MsMwxnnmMnU5ep8j1jxLRYpW3vftJLG5CLK+dQH3d91IR7NrchsY886V00jp33OdgPS0YDnm7jwAW9FAImCNuWJ3nM8shw5lF94dGZ27Su1ZpuSVORZ+VLcDfdXs5Ma3gEj80pVFG/9yMPWJ2sHN5Km0toQhP6vc5Nu9RWo7DbiQmrl09QQFdw5X0FY0+FfqD5Vhe0u/XdTBWwsrGEV/h2dTzEG9XoNm2xSiuzDIkT9PJcl4BES+WFSLLLAWtWyGrlCVSIidwPNJcQAVPJGCx2jYT6jvJkPs/s/A/7UzcVRbbOZIto3xsHu38f85J0WN5Y6R34oXV2YbqumrJc4tOOtwbTVOfHcIUIryW51LkxK0kfemy3MnD+mWWj2W4MYWkbRtJfhm+Wwgu4uxDeTbnHjTcVs6Ps+oz4hw+two3gMCfvgOFd6Sl9ZP1n/ADhLW/ty0KFMR8O+VqRd5w1Ob05zzkzJkmPlWjdtXM65cfzLDsIyrp5EdqDHYvqJUWVHd5FSytzk2op4j1w5Y9oXHZkA0GN6WtIaANYEoWepCzvajX3VytzNeVuYcwRc62Sbe8poSqyps5rjcd5yRXV65c9cOIA4EobLzpSE/EcLzEiVwde6quiAMbS0ECip2FnGbWzYVlWzpECxrpcafXz4jqmZcGdDeRJhzIryCFtSI0htK0KHopIOKXUeNU+E8VYAQa5p8zfiVxnejaXqg23HXrLBsq7SuXWJbSYcfP1rTWk6uzY5H+FNJMpaaVZIb24mQwuN8t8aHzCQ2ItH+UHBleBrR/sDd67sFmfAN+LF37cgupncQC33Iv8ATeh86vPDh1BzjrFn7VTJ2eax6vzzeP5jlUt3WWJnVU2Y00mRDizoK32ZkBK2d2SpDS20EIPLjyJPo20Pmc+J0eo5xN9QRU1yaQb87uIXYNIwshbHI1+s1oF1CDTPEU5IF7PoU1gqlqS9ZVLnHfu1Attu3rtybBOIDRVpzdH7u/ip/M4Mmv6d10Q6MtUye8+vG2x+42X/ADiQ0VaPXH17I+Zwel/Tutk9GWqqlBAn15JOw+w2Xb5d9kk+uOHRVoyczr2R8zg9L+ndS+k8P/WS7caQ1b0sdLikjm9AtlBIJ7q2Sgb7flv3xE6KtWTo/d38V0aTs+bX9O6MmJ4XmZouhF/Sp1G5ZzvM75QzS66rLroomYOVaDO9XHqWoIsfOmRJczi665KK+3sUJDWxJxaNFShp+tu0JGRpQA541JPKgwqqzpOMvB1DqAHO+pIvphSgwx4p/s/6O4nzvs+O3vc+O23f15dsbax1W1oNOeR84YW/veqWT3377e+P2wIUVI0k5dlQt+/qhjf5b+jm2BC5GRpLy91UHlv/ACR9vi+YC/TAhTip+o3JHkDE5fh4paA27beijgQp39g8v/B8vxG/w8NuJ2/f/eBC/9k=) no-repeat;
    background-position: 20px;
    background-color: #fff;
    border: solid #cdcdcd 1px;
    padding-left: 80px;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-bottom: 20px;
    text-align: left;
    overflow: visible
}

.under_comment {
    font-size: 12px;
}

@media screen and (max-width: 500px) {
    h1 {
        font-size: 1.2rem;
    }
    .buttons {
        flex-direction: column;
    }
    .buttons button {
        width: 100%;
    }
}