body {
    font-family: Consolas;
    background-image: url('../imgs/background02.jpg');
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

h1 {
    font-family: Consolas;
    color: #8994a2;
    text-shadow: 2px 2px #4d3e3b;
    text-align: center;
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
}

h2 {
    font-family: Consolas;
    color: #8994a2;
    text-shadow: 2px 2px #4d3e3b;
    text-align: center;
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
}

h3 {
    font-family: Consolas;
    font-size: 28px;
    color: #8994a2;
    text-shadow: 2px 2px #4d3e3b;
    text-align: center;
    font-size: 1rem;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

h4 {
    font-family: Consolas;
    font-size: 28px;
    color: #8994a2;
    text-shadow: 2px 2px #4d3e3b;
    text-align: center;
    font-size: 0.75rem;
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

h5 {
    font-family: Consolas;
    font-size: 28px;
    color: #8994a2;
    text-shadow: 2px 2px #4d3e3b;
    text-align: center;
    font-size: 0.5rem;
    font-size: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
}

.center {
    text-align: center;
    line-height: 35px;
    padding: 10px;
}

.right {
    text-align: right;
    line-height: 35px;
    padding: 10px;
}

.left {
    text-align: left;
    line-height: 35px;
    padding: 10px;
}

.smaller {
    font-size: smaller;
}

input {
    border-radius: 10px;
    line-height: 30px;
    background-color: #e9dbbf;
    color: #203234;
}

a {
    color:  #a4b168;
}

a:visited{
    color:  #778155;
}

.Ccaa976    {   color:  #caa976;    }
.C9a785a    {   color:  #9a785a;    }
.C4d3e3b    {   color:  #4d3e3b;    }
.C736948    {   color:  #736948;    }
.C6c5f71    {   color:  #6c5f71;    }
.C778155    {   color:  #778155;    }
.Ca4b168    {   color:  #a4b168;    }
.C785146    {   color:  #785146;    }
.C5b4c58    {   color:  #5b4c58;    }
.C674d40    {   color:  #674d40;    }
.C8994a2    {   color:  #8994a2;    }
.Cc9802d    {   color:  #c9802d;    }
.C323031    {   color:  #323031;    }
.Ce9dbbf    {   color:  #e9dbbf;    }
/* background color */
.C3b232c    {   color:  #3b232c;    }
.C56563a    {   color:  #56563a;    }
.Cb9514d    {   color:  #b9514d;    }
.C913742    {   color:  #913742;    }
.C203234    {   color:  #203234;    }
.C4c3e0f    {   color:  #4c3e0f;    }

.error {
    background-color: #203234 !important;
    color: #8994a2;
}

.row {
    background-color: #3b232c;
    border-radius: 10px;
    padding: 10px;
    line-height: 35px;
}

.btn {
    background: #c47882;
    background-image: -webkit-linear-gradient(top, #c47882, #913742);
    background-image: -moz-linear-gradient(top, #c47882, #913742);
    background-image: -ms-linear-gradient(top, #c47882, #913742);
    background-image: -o-linear-gradient(top, #c47882, #913742);
    background-image: linear-gradient(to bottom, #c47882, #913742);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Courier New;
    color: #e9dbbf;
    font-size: 20px;
    padding: 0px 5px;
    text-decoration: none;
    width: fit-content;
    text-align: center;
    justify-content: center;
    height: 2em;
}

.btn:hover {
    background: #d93c36;
    background-image: -webkit-linear-gradient(top, #d93c36, #b9514d);
    background-image: -moz-linear-gradient(top, #d93c36, #b9514d);
    background-image: -ms-linear-gradient(top, #d93c36, #b9514d);
    background-image: -o-linear-gradient(top, #d93c36, #b9514d);
    background-image: linear-gradient(to bottom, #d93c36, #b9514d);
    text-decoration: none;
}

/* Unique Smaller Button for PDF */
.btn-small {
    background: #c47882;
    background-image: -webkit-linear-gradient(top, #c47882, #913742);
    background-image: -moz-linear-gradient(top, #c47882, #913742);
    background-image: -ms-linear-gradient(top, #c47882, #913742);
    background-image: -o-linear-gradient(top, #c47882, #913742);
    background-image: linear-gradient(to bottom, #c47882, #913742);
    -webkit-border-radius: 10px; /* Smaller border radius */
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: Consolas; /* Keep the same font family */
    color: #e9dbbf;
    font-size: 12px; /* Smaller font size */
    padding: 5px 10px; /* Less padding to make it smaller */
    width: fit-content; /* Adapt width to content */
    height: auto; /* Remove fixed height */
    border: 1px solid #4d3e3b; /* Add a border for uniqueness */
}

.btn-small:hover {
    background: #d93c36;
    background-image: -webkit-linear-gradient(top, #d93c36, #b9514d);
    background-image: -moz-linear-gradient(top, #d93c36, #b9514d);
    background-image: -ms-linear-gradient(top, #d93c36, #b9514d);
    background-image: -o-linear-gradient(top, #d93c36, #b9514d);
    background-image: linear-gradient(to bottom, #d93c36, #b9514d);
    border-color: #d93c36; /* Darken border on hover */
}

.radio-toolbar {
    margin: 10px;
}

.radio-toolbar input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #e9dbbf;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 15px;
    color: #674d40;
}

.radio-toolbar label:hover {
    background-color: #674d40;
    color: #e9dbbf;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #323031;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #203234;
    border-color: #a4b168;
}

/* Table Structure */
.table {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack header and rows vertically */
    align-items: stretch; /* Stretch elements to match width */
    width: fit-content; /* Full width for the main table */
    margin: 5% auto 0; /* Center the table and adjust margin */
    box-sizing: border-box;
}

/* Header Row for Table */
.theader {
    display: flex; /* Flexbox for header */
    width: 100%; /* Full width */
    justify-content: space-between; /* Even spacing between headers */
    text-align: center;
}

/* Table Header Styling */
.table_header {
    flex: 1; /* Each header takes equal space */
    padding: 10px 20px;
    background: #3b232c;
    color: #e9dbbf;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: #3b232c 1px solid;
    font-size: 1.25rem;
}

/* Table Header with Border Radius */
.table_header:first-child {
    border-left: #3b232c 1px solid;
    border-top-left-radius: 5px;
}

.table_header:last-child {
    border-right: #3b232c 1px solid;
    border-top-right-radius: 5px;
}

/* .parent-container for Main Containers */
.parent-container {
    display: flex; /* Make the two containers side-by-side */
    justify-content: space-between; /* Space between the two main containers */
    width: 100%; /* Full width of the table */
    box-sizing: border-box;
    margin-top: 10px; /* Space between the headers and content */
}

/* Individual Container Setup */
.container {
    display: flex; /* Align charDivs horizontally */
    justify-content: space-between; /* Distribute charDivs evenly */
    align-items: stretch; /* Make all charDivs equal height */
    width: 100%; /* Each container takes 48% of the parent */
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #3b232c; /* Optional: Border for visual separation */
    border-radius: 5px;
    background: #4d3e3b; /* Background color to differentiate sections */
}

/* Styling for Child Divs */
.charDiv1, .charDiv2, .charDiv3 {
    flex-grow: 1; /* Let each div take equal space */
    flex-shrink: 1;
/*    flex-basis: 0; /* Start with zero basis, distribute proportionally */
    margin: 5px; /* Margin between divs for spacing */
    padding: 15px; /* Internal padding */
    box-sizing: border-box; /* Include padding in size calculation */
    font-size: 1rem; /* Standard font size for better readability */
    color: #e9dbbf; /* Font color for better contrast */
}

/* Specific Styles for Each Div */
.charDiv1 {
    background-color: #913742;
}

.charDiv2 {
    background-color: #8994a2;
}

.charDiv3 {
    background-color: #4d3e3b;
}

/* Table Row: Ensure Full Width */
.table_row {
    display: flex; /* Use flexbox for table rows */
    width: 100%; /* Ensure full width */
    justify-content: space-between; /* Evenly space out contents */
}

/* Each Small Table Cell Container */
.table_small {
    display: flex; /* Use flex for internal elements */
    flex: 1; /* Allow it to expand to full space */
    justify-content: flex-start; /* Align content to the start */
    width: 100%; /* Make the small containers take full width */
    padding: 10px; /* Padding for spacing */
}

/* Table Cell Styling */
.table_cell {
    width: 100%; /* Ensure each cell takes full width */
    padding: 10px; /* Internal padding for spacing */
    box-sizing: border-box; /* Include padding in width calculations */
    text-align: left; /* Align text to the left */
    border-bottom: #3b232c 1px solid; /* Bottom border */
}

.table_row > .table_small > .table_cell {
    padding: 10px;
    color: #e9dbbf;
    border-bottom: #3b232c 1px solid;
    width: 100%; /* Force cells to take full width */
    text-align-last: center;
}

.table_row > .table_small:first-child > .table_cell {
    border-left: #3b232c 1px solid;
    text-align-last: center;
}

.table_row > .table_small:last-child > .table_cell {
    border-right: #3b232c 1px solid;
    text-align-last: center;
}

/* Alternative Row Backgrounds for Table */
.table_row:nth-child(2n+2) {
    background: #3b232c;
    text-align-last: center;
}

.table_row:nth-child(2n+1) {
    background: #913742;
    text-align-last: center;
}

/* Span class for merging multiple cells */
.span-2 {
    flex-grow: 2; /* Span across 2 cells */
}

.span-3 {
    flex-grow: 3; /* Span across 3 cells */
}

.merged-cell {
    display: flex; /* Ensure it uses flex properties */
    width: 100%; /* Take full width */
    justify-content: center; /* Center the content */
    align-items: center; /* Center vertically */
    padding: 10px; /* Optional padding */
    border: 1px solid #3b232c; /* Optional border to define merged cell */
    background-color: #56563a; /* Different background to differentiate */
}

/* Adjust flex properties for merged cells in different rows */
.table_row .table_cell.merged {
    flex: 2; /* Expand to the size of two cells */
    width: calc(100% + 10px); /* Full width and cover gaps */
}

/* Mobile Adjustments */
@media screen and (max-width: 900px) {
    .table {
        width: 90%; /* Adjust table width for small screens */
    }
}

@media screen and (max-width: 650px) {
    .parent-container {
        flex-direction: column; /* Stack containers vertically */
        align-items: center;
    }
    .container {
        width: 90%; /* Each container takes full width on mobile */
        margin-bottom: 15px; /* Add space between stacked containers */
    }
}