.right, .text-right, .text-align-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-italic {
    font-style: italic;
}


.front-image-tile {
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    height: 200px;
    border: solid 1px rgb(223, 223, 223);
    box-shadow: 0 2px 4px 0 rgba(136, 136, 136, 0.2), 0 6px 20px 0 rgba(136, 136, 136, 0.19);
}

.post-content-image {
    margin-right: 15px 15px 10px 15px !important;
    border: solid 1px rgb(214, 214, 214);
    border-radius: 5px;

}

.stats-tile {
    background-color: #f2f2f2;
    /* Light grey background */
    border-radius: 12px;
    /* Rounded corners */
    padding: 20px;
    /* Inner padding */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional: Add a subtle shadow */
    text-align: center;
    /* Center the text */
}


/* Main pagination container */
.pagination {
    list-style-type: none;
    /* Removes default list styling */
    padding: 0;
    /* Removes default padding */
    margin: 0;
    /* Adjusts margin as needed */
    display: flex;
    /* Aligns the pagination items in a row */
    flex-wrap: wrap;
    /* Allows wrapping for smaller screens */
    justify-content: center;
    /* Centers the pagination */
}

/* Targets all list items in the pagination, including nested lists */
.pagination li,
.pagination ul li {
    list-style-type: none;
    /* Removes list item bullets/dots */
    margin: 0 5px;
    /* Adds space between pagination items */
}

/* Style for links to make them look like buttons */
.pagination a {
    text-decoration: none;
    /* Removes underline from links */
    color: #007bff;
    /* Sets the link color */
    background-color: #f8f9fa;
    /* Light background for the button */
    border: 1px solid #ddd;
    /* Border for the button */
    padding: 5px 10px;
    /* Padding inside the button */
    border-radius: 5px;
    /* Rounded corners for the button */
    font-size: 0.9em;
    /* Adjust font size as needed */
    transition: background-color 0.3s, color 0.3s;
    /* Smooth transition for hover effect */
}

/* Hover state for links/buttons */
.pagination a:hover {
    background-color: #e2e6ea;
    /* Slightly darker background on hover */
    color: #0056b3;
    /* Darker color on hover */
    border-color: #ccc;
    /* Darker border on hover */
}

/* Current page indicator */
.pagination .active a {
    font-weight: bold;
    /* Makes the current page number bold */
    background-color: #007bff;
    /* Background color for active button */
    color: #fff;
    /* Text color for active button */
    border-color: #007bff;
    /* Border color for active button */
}

.scrollable-table {
    width: 100%;
    /* Full width of the container */
    overflow-x: auto;
    /* Enables horizontal scrolling */
    overflow-y: hidden;
    /* Hides vertical scrollbar */
    border: 1px solid #ddd;
    /* Optional: adds a border around the div */
    margin-bottom: 20px;
    /* Adds some space below the div */
}

.scrollable-table table {
    width: auto;
    /* Allows the table to expand horizontally as needed */
    border-collapse: collapse;
    /* For styling: collapses border */
}

.scrollable-table td, .scrollable-table th {
    border: 1px solid #ddd;
    /* For styling: adds border to cells */
    padding: 8px;
    /* For styling: adds padding inside cells */
    white-space: nowrap;
    /* Prevents text wrapping in cells */
}


/* Small table */
.table-sm td,
.table-sm th {
    padding: 4px 8px;
    /* Smaller padding */
    font-size: 0.85em;
    /* Slightly smaller font size */
}

/* Extra small table */
.table-xs td,
.table-xs th {
    padding: 2px 4px;
    /* Even smaller padding */
    font-size: 0.75em;
    /* Even smaller font size */
}

.responsive-table {
    table-layout: fixed;
    width: 100%;
    overflow: auto;
}

.font-size-xs {
    font-size: 0.75rem;
    /* Extra small font size */
}

.font-size-sm {
    font-size: 0.875rem;
    /* Small font size */
}

.font-size-md {
    font-size: 1rem;
    /* Medium (default) font size */
}

.font-size-lg {
    font-size: 1.25rem;
    /* Large font size */
}

.font-size-xl {
    font-size: 1.5rem;
    /* Extra large font size */
}

.strong {
    font-weight: bold;
}

div.main {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.dashboard-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-menu li {
    display: inline-block;
    margin-right: 10px;
}

.dashboard-menu li a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

/* Inside custom.css */
.btn-upload {
    background-color: #a97142;
    /* Gold color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-upload:hover {
    background-color: #8d5c2f;
    /* Darker gold on hover */
    cursor: pointer;
}

.highlight-error {
    border: 2px solid red;
    /* Adjust the styling as needed */
}




/* modal close round */
.modal-close-round {
    font-size: 2rem;
    /* Makes the 'x' bigger */
    line-height: 1;
    color: #000;
    /* Makes the 'x' color black */
    opacity: .5;
    background: transparent;
    border: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    /* Ensures it's above other elements */
}

.modal-close-round:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}


.modal-header {
    position: relative;
    border-bottom: none;
}

.modal-content {
    border-radius: 8px;
}

/* end modal close round */

.heritage-red {
    color: #93001c !important;
}

.heritage-red-light {
    color: #cb6d6d !important;
}