.space-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #eef2f5;
margin-bottom: 20px;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden;
}

.space-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.space-image-container {
height: 180px;
background: #f5f5f5;
}

.space-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.addon-badge {
display: inline-block;
background: #edf2f7;
color: #4a5568;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.75rem;
margin: 5px 5px 0 0;
}

.addon-special {
background: #fffaf0;
color: #dd6b20;
border: 1px solid #fbd38d;
}

.btn-add-cart {
width: 100%;
background-color: #722f37;
/* UP Maroon */
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn-add-cart:hover {
background-color: #5c232a;
}
.select_box_1 .dropdown-content{
height: 250px !important;
min-height: 250px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
height: 300px;
width: 450px;
box-shadow: -1.095px 6.914px 12.96px 3.04px rgba(51, 51, 51, 0.27);
}

.select_box_dates .dropdown-content{
height: 250px !important;
min-height: 250px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
height: 300px;
width: 450px;
box-shadow: -1.095px 6.914px 12.96px 3.04px rgba(51, 51, 51, 0.27);
}

#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 95%;
font-size: 16px;
padding: 10px 20px 12px 40px;
border: 1px solid #ccc;
margin-bottom: 12px;
}

#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}

#myUL li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#myUL li a:hover:not(.header) {
background-color: #eee;
}

#myUL2 li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #fff;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#myUL2 li a:hover:not(.header) {
background-color: #fff;
}

.post-container {
margin: 20px 20px 0 0;
overflow: auto;
width:80vw
}
.post-thumb {
float: left;
margin-right:50px;
margin-left:20px;
height: 200px;
}
.post-thumb img {
display: block;
}
.post-content {
margin-left: 210px;
}

.column {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

.booking-button {
color: white;
border-radius: 10px;
border: solid;
}

.download {
border-color: #FFB61C;
background-color: #FFB61C;
margin: 3px;
}

.cancel {
border-color: #F40000;
background-color: #F40000;
margin: 3px;
}

.view-pending {
border-color: #FFB61C;
background-color: #FFB61C;
margin: 3px;
}

.return {
border-color: blue;
background-color: blue;
margin: 3px;
}

.download {
border-color: #808080;
background-color: #808080;
margin: 3px;
}

.view {
border-color: #006400;
background-color: #006400;
margin: 3px;
}

.view2 {
border-color: #00008B;
background-color: #00008B;
margin: 3px;
}

.approve {
border-color: #006400;
background-color: #006400;
margin: 3px;

}

.table-flex {
width: 100% !important;
overflow-x: scroll;
}

.modal {
text-align: center;
/* overflow-y:scroll; */
}

.modal-approve-button {
background-color: #FFB61C;
padding: 5px 8px;
border-color: #FFB61C;
}

.modal-approve-button:hover {
background-color: #d39528;
border-color: #d39528;
}

.modal-return-button {
background-color: #006400;
padding: 5px 8px;
border-color: #006400;
}

.modal-return-button:hover {
background-color: #008500;
border-color: #008500;
}

.modal-cancel-button {
background-color: #F40000;
padding: 5px 8px;
border-color: #F40000;
}

.modal-cancel-button:hover {
background-color: #B10909;
border-color: #B10909;
}

.modal-buttons {
margin-top: 35px;
}

.modal-close-button {
background-color: #F40000;
padding: 5px 8px;
border-color: #F40000;
}

.modal-close-button:hover {
background-color: #B10909;
border-color: #B10909;
}

.actions {
text-align: center;
}

.actionable-table td:last-child {
text-align: center !important;
}

.tui-full-calendar-today {
background: #E1BEE7 !important;
}

.spaces-button {
color: white;
border-radius: 10px;
border: solid;
padding: 8px;
}

.check-avail-btn{
padding-left: 20px;
padding-right: 20px;
background-color: #00563F
}

.upGreen{
background-color: #00563F
}

.add-to-cart {
padding-left: 20px;
padding-right: 20px;
background-color: #8D1436;
}

.clearance-thead {
background-color: #8D1436;
color: white;
}

#calendar_link {
padding-left: 20px;
padding-right: 20px;
background-color: green;
}

#calendar_link_edit {
padding-left: 20px;
padding-right: 20px;
background-color: green;
}

#cancel-reservation {
padding-left: 80px;
padding-right: 80px;
padding-top: 15px;
padding-bottom: 15px;
background-color:red;
}

#go-to-cart-btn{
float: right;
margin-top:15px;
height: 40px
}

#go-to-cart-btn:hover{
cursor: pointer;
}

#init-event-btn{
background-color: #00563F;
float:right;
margin-top:10px
}

#admin-create-event{
background-color: #00563F;
float:right;
margin-top:10px
}

#admin-add-venue{
background-color: #00563F;
float:right;
margin-top:10px
}

#slip-btn2{
background-color: #F40000;
float:right;
margin-top:10px
}

.upmaroon3 {
color: #8D1436;
}

/* #new-event-modal{
width: 50%;
padding-bottom: 50px;
} */

/* #spaces-cart-modal{
width: 55%;
padding-bottom: 50px;
} */

.tabs .tab a{
color:#000;
overflow: hidden;
} /*Black color to the text*/

.tabs .tab a:hover {
background-color:#eee;
color:#000;
} /*Text color on hover*/

.tabs .tab a.active {
background-color:#8D1436;
color:white;
} /*Background and text color when a tab is active*/

.tabs .indicator {
background-color:black;
} /*Color of underline*/


/* #edit-event-btn{
padding-left: 80px;
} */

.edit-cart{
background-color: #00563F;
padding-left:20px;
padding-right:20px;
margin-right:20px;
}

.remove-from-cart{
background-color: red;
padding-left:20px;
padding-right:20px;
}

#total-amount-cart{
font-size: 1.4em;
margin-right: 20px;
margin-left: 10px;
color: #8D1436;
}

#submit-btn{
background-color: #8D1436;
padding-left:20px;
padding-right:20px;
margin-right:250px;
font-size: 1em;
}

.overlay-container,
.overlay-container * {
box-sizing: border-box;
}
.overlay-container {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.overlay-container img {
max-width: 100%;
}
.overlay-container {
display: block;
}
.overlay-container .overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.overlay-container:hover .overlay,
.overlay-container.active .overlay {
opacity: 1;
}
.overlay-container .hover-text {
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 90%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay-container .hover-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.overlay-container.active .hover-text_mobile {
display: block;
}

.legend-item {
display: flex;
padding-top:20px;
}

.legend-description {
margin-top: 0px;
margin-bottom: 0px;
}

.legend-item {
display: flex;
}
.color-box {
height: 15px;
width: 15px;
background-color: #C2B7B6;
margin: auto 5px;
}

.dataTables_wrapper .dt-buttons {
float:none;
text-align:right;
}

.dt-button.copyButton {
background-color: #4A59E8;padding: 5px 15px;border-color: #4A59E8;color: white;border-radius: 10px;border: solid;
}

.dt-button.excelButton {
background-color: #1B8A0A;padding: 5px 15px;border-color: #1B8A0A;color: white;border-radius: 10px;border: solid;
}

.dt-button.pdfButton {
background-color: #FF1D1D;padding: 5px 15px;border-color: #FF1D1D;color: white;border-radius: 10px;border: solid;
}