body {
    background-color: #e1e1e1;
}
li{
    list-style: none;
}

.form-wrapper {
    border-radius: 10px;
}

.form-wrapper label {
    font-weight: bold;
}

.errors li {
    list-style: none;
    width: 100%;
    text-align: center;
}

.errors ul {
    padding-left: 0;
    margin-bottom: 0;
}


@media (max-width: 768px) {
    .form-wrapper .text-right {

        text-align: center !important;
    }
}

/* Base table styling */
.dataTable {
    width: 100%;
    border-collapse: collapse;
}

.dataTable thead {
    background-color: #f8f9fa; /* Light gray to match Bootstrap's colors */
    border-bottom: 2px solid #dee2e6; /* Slightly darker gray for a subtle border */
}

.dataTable th {
    font-weight: 500; /* Semi-bold */
    padding: 12px 15px; /* Spacious padding for headers */
}

.dataTable td {
    padding: 8px 15px; /* Regular padding for table cells */
    border-top: 1px solid #dee2e6; /* Top border for every row */
}

.dataTable tr:hover {
    background-color: #e9ecef; /* A very light gray background for hover effect */
}

/* If you want zebra striping for rows */
.dataTable tbody tr:nth-child(odd) {
    background-color: #f2f3f5; /* A very subtle gray */
}

.dataTable img{
    border-radius: 5px;
    border: 1px solid #007bff;
}

.aligncenter{
    text-align: center;
}

.nounderline:hover{
    text-decoration: none;
}

/* Add a slight shadow and padding to the container */
.controller-actions {
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow for depth */
    display: flex; /* Use flexbox to align items */
    justify-content: space-between; /* Spread child items evenly */
    align-items: center; /* Vertically align items in the center */
    margin-bottom: 20px; /* Provide some space below the container for separation */
}


/* Customize the non-active tabs */
.nav-tabs .nav-link {
    background-color: #f5f5f5; /* Light gray background */
    border: 1px solid #e0e0e0; /* Gray border */
    border-radius: 5px 5px 0 0; /* Rounded top corners */
    color: #333; /* Dark gray text */
    padding: 10px 15px; /* More padding */
    margin-right: 5px; /* Spacing between tabs */
}

/* Customize the hover effect for the tabs */
.nav-tabs .nav-link:hover {
    background-color: #e0e0e0; /* Slightly darker gray on hover */
    border-bottom: 1px solid #e0e0e0; /* Maintain the bottom border on hover */
    text-decoration: none; /* No underline */
}

/* Customize the active tab */
.nav-tabs .nav-link.active {
    background-color: #007bff; /* Bootstrap primary color */
    color: #fff; /* White text */
    border-color: #0069d9; /* Slightly darker border color */
}

/* If you don't want any border transition changes on hover for active tab */
.nav-tabs .nav-link.active:hover {
    border-bottom-color: #0069d9; /* Maintain the bottom border on hover */
}

#existing_photos {
    cursor: move;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
}

.modal-content {
    background-color: #f4f4f4;
    margin: 20% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    text-align: center;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
}

.form-check-input{
    position: relative !important;
    margin-left: 10px;
}