﻿#tblPageLayout {
}

    #tblPageLayout td:not(:first-child) {
        padding-left: 50px;
    }

    #tblPageLayout td {
        vertical-align: top;
        width: 50%;
    }

.tblGreyRoundedWrapper {
    background-color: #f0f0f0;
    border-radius: 4% 4% 4% 4%;
}

.tblGreyRounded {
    border-collapse: collapse;
    width: 100%;
}

    .tblGreyRounded tr td {
        padding-bottom: 15px;
    }

    .tblGreyRounded tr:first-child td {
        padding-top: 25px;
    }

    .tblGreyRounded tr:last-child td {
        padding-bottom: 25px;
    }

.rounded-grey-box {
    background-color: #f0f0f0;
    border-radius: 15px; /* Rounds all corners by 15px */
    padding: 5px; /* Adds some space inside the box */
    text-align: center;
}

.parent-container {
    display: flex;
    justify-content: center; /* Centers the child box horizontally */
    width: 100%; /* Or a defined width */
    padding-top: 20px;
    padding-bottom: 10px;
}

.centered-left-aligned-box {
    /* Optional: Set a width for the box, otherwise it will shrink to content */
    text-align: left; /* Aligns the content within the box to the left */
}
.centered-left-aligned-box-element {
    padding-bottom: 10px;
}
input [type=text] {
    border-radius: 10px; /* Adjust the value for more or less curve */
    padding: 5px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Optional: Add a border */
}

.txtInput {
    width: 90%;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

.errorMessage {
    color: red;
    font-weight: bold;
    padding-bottom: 15px;
}

.grid-container {
    display: grid;
    grid-template-columns: 1.25fr 0.5fr 1.25fr; /* Creates three equal-width columns */
    gap: 5px; /* Adds a gap between columns */
    border: 1px solid black;
    width: 75%;
}

.column {
    /* Add styling for individual columns */
    /*border: 1px solid black;*/
}


.image-row {
    text-align: center;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 10px; /* Optional spacing between images */
}

    .image-row img {
        flex: 1 1 50%; /* Grow/shrink, base width 50% */
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
