.reservation-status-mark{padding: 4px 10px; border-radius: 2.4rem; }
.reservation-waiting {background: yellow; color: black; }
.reservation-accepted {background: green; color: white;}
.reservation-cancelled {background: red; color: white;}
.reservation-refused {background: red; color: white;}
.reservation-not-active {background: lightgray; color: black;}

.reservation-no-mail{background: black; color: white; text-wrap: nowrap;}

.zt-parking-password-wrapper i{
    cursor: pointer;
}

ul.modalUl{
    margin-left: 20px;    
}
ul.modalUl, ul.modalUl li{
    list-style: circle;
}

input:-internal-autofill-previewed {
    background-color: none!important;
}

article h1:first-of-type {
    margin-top: 0px;    
}

.circleText{
    display: inline;
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    padding: 1px 5px;
    cursor: pointer;
}

.zt-parking-url{
	text-decoration: none!important; 
	color: var(--primary-color);
}

#primary-menu .rezervacije .sub-arrow{
	margin-left: 5px;
    display: inline-flex;
    line-height: 1;
    font-weight: bold;
	display: none;
	width: fit-content;
    float: right;
}

#primary-menu .rezervacije .sub-arrow i{
    display: inline;
    font-size: 1.2em;
    background: var(--primary-color);
    border-radius: 2.4em;
    color: white;
    padding: 7px 10px;
}

#primary-menu  .menu-item .menu-link{
	display: flex;
}


#content{
	background: var(--blue-color);
}

#main {
	background: white;
    padding: 15px 0px;
    border-radius: .4rem;
}

.eael-simple-menu li span.eael-simple-menu-indicator i{
	height: fit-content;
}

.eael-simple-menu li, .eael-simple-menu li a, .eael-simple-menu li a span{
	font-weight: normal!important; 
	font-size: 16px!important;
}

.width100 {
	width: 100%;
}
.fromToSeparator{
	clear:both;
	height:5px;	
	line-height:5px;	
}

.zt-parking-login-button-wrapper{
	width: 100%;
	margin-top: 15px;
}

.zt-parking-login-button{
	width: 100%;
	text-decoration: none!important;
}
.zt-parking-login-button:hover, .zt-parking-login-button:active{
	color:white!important;	
}

.specialMessage{
	background: var(--primary-color);
	padding: 15px;
	color: white;
	width: 100%;
	border: 1px solid white;
	text-align: center;
	margin: 15px 0px;
}

.left-cell{
	float: left;	
}

.center-text{
	text-align: center;
    width: max-content;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.icon-ok:before {
    content: "\2714"; /* Unicode character for a checkmark */
	color: green;
    margin-right: 15px; 
	font-size: 30px;
}

.icon-bad:before {
    content: "\2718"; /* Unicode character for a cross mark */
    margin-right: 15px; 
	color: var(--primary-color);
	font-size: 30px;
}

.flex-columns{
	display: flex;
	align-items: center;
}
/*.datepicker-date-display{width: 40%}
.datepicker-calendar-container {width: 60%;}
*/

.modal .modal-footer a {
	text-decoration: none;
}

.modalWithCalendarModal.open{
	display: flex !important;
    align-content: stretch;
    flex-direction: column;
    justify-content: space-between;
		
}

#passenger-container {margin-top: 15px;}
#passenger-container .row {
	border-bottom: 1px solid #ccc;
}
#passenger-container button {
	margin-bottom:15px; 
	width: 100%;
}

.hovPassengersWrapper input {display: none!important;}


div.dt-container .dt-search input{
    margin-left: 0em!important;
	width: auto!important;
	border:0px!important;
	border-bottom: 1px solid var(--text-color)!important;
    border-radius: 0!important;
}
div.dt-container .dt-paging .dt-paging-button,
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active{    
    color:  var(--text-color)!important;
	background: none!important;
}


/* 
 * DATATABLES 
 * 
 * */

	table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td {		
		text-wrap: wrap;
	}
	div.dt-container .dt-paging .dt-paging-button:hover{
		color: initial!important;
	}
	table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
		border-left: 10px solid var(--primary-color);
	}
	table.dataTable td button{
		clear: both;
    	display: block;
    	align-self: center;
    	margin: 0px auto;
		width: 100%;
		padding: 10px 0px;
	}

	.dataTables_wrapper no-footer td {
		min-width: 100px; /* Adjust as needed */
	}
	table.dataTable, table.dataTable td, table.dataTable th{
		text-wrap: nowrap;
	}

	.mdc-data-table {
		margin: 0px!important; 
		width: 100%!important;
	}
	.dataTables_info{
		color: white!important;
	}

	.dataTables_wrapper td{	
		padding: 10px 15px!important;		
	}

	.dataTables_wrapper td, .dataTables_wrapper th {			
		text-align: center!important;
	}

	table.dataTable td button.miniBtn{
		padding: 5px!important; 
		width:auto!important;
		float: right;
		margin-left: 5px;
		font-size: 20px;
	}
	table.dataTable td button.miniBtn img{
		max-width: 20px;
	}

	table.dataTable td  .reservation-status-div{
		display: flex;
		text-wrap: nowrap;
	}	

	table.dataTable td  .sopotnik{
    	margin-bottom: 10px;
	}
	table.dataTable td  .sopotnik:last-child {
    	margin-bottom: 0px;
	}

	table.dataTable > tbody > tr.child ul.dtr-details > li {
		display: flex;
	}

	table.dataTable > tbody > tr.child span.dtr-title{	    
    	min-width: 180px;    
    	margin-right: 15px;
    	width: 180px;
	}

/* END DATATABLES */

.elipsis{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

#parkingReservationForm{
    /*overflow: auto; */
}

.parkingNavigator{
	display:flex;
	background: #ffffff0f;
	width: 100%;
	position: relative;
	border-radius: 1.3rem;
	border: 1px solid var(--text-color);
	z-index: 1;
	overflow: auto;
}
.parkingNavigatorContent{
	z-index: 2;
	width: 100%;
}
.parkingNavigatorBody{
	position: relative;
    display: block;
    width: 100%;
	padding-bottom: 10px;
}

.parkingNavigatorBody h5{
	/* color: white; */
}

.parkingNavigatorBg{
    background: url(/wp-content/plugins/zt-parking-reservations/assets/images/booking-header-1.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	z-index: -1;
	border-radius: 1.3rem;
}
.parkingNavigatorHeader > div{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--text-color);
	padding-top: 10px!important;
	padding-bottom: 10px!important;
}
.parkingNavigatorHeader button, .parkingNavigatorHeader h4{
	margin: 0px;
	padding-left: 10px;
    padding-right: 10px;
    align-self: center;
}

#zt-parking-spots{
	max-height: 500px;
    overflow: auto;	
}

#zt-parking-spots-ul {	
    column-gap: 20px; /* Set the gap between columns */
	margin: 0px;
}

#zt-parking-spots-ul li i:before {
    margin-right: 7px;
}
.zt-parking-spots-ul-one-column {	
    column-count: 1; /* Set the number of columns */
}

.zt-parking-spots-ul-two-columns {	
    column-count: 2; 
}

.zt-parking-spots-ul-three-columns {
    column-count: 3;
}

.zt-parking-spots-ul-four-columns {
    column-count: 4;
}

@media (max-width: 420px) { 
    .zt-parking-spots-ul-three-columns,
    .zt-parking-spots-ul-four-columns {
        column-count: 2;
    }
}
.zt-parking-spot{
	padding: 5px 15px;	
	background: var(--warm-gray-color);
	color: black;
	margin-bottom: 20px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
	cursor: pointer;
}

.zt-parking-spot i {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.zt-parking-spot-taken{
	background: red;	
	color: white;    
}

.zt-parking-spot-permanent {
    background: black;
}

.zt-parking-spot-selected{
	box-shadow: 0px 0px 2px 5px inset green;
}

.zt-parking-spot-isHov{
    
}

.zt-parking-details{
    display: table;
    /* border: 1px solid white; */
    /* box-shadow: 0px 0px 5px white; */  
}

.zt-parking-details > div{
	display: table-row;
}
.zt-parking-details > div div{
	display:table-cell;
	padding: 0px 10px 0px 0px;
}

.parking-login-form .container{
	/* max-width: 500px; */
	margin: 0px auto;
}
.zt-parking-2fa-wrapper{
	display: none;
}
#parking-login-authenticate-message-div{
}
.m-r-30 {
	margin-right: 30px;
}
.m-b-5 {
	margin-bottom: 5px;
}
.m-b-15 {
	margin-bottom: 15px;
}
.m-t-15{
	margin-top: 15px;
}
.zt-parking-password-wrapper i {
	position: absolute;
	right: 10px;
	top: 10px;
	color: var(--primary-color);
}

/* SPINNER - LOADING */
        /* Basic styling for the loading screen */
        #zt_parking_loading {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        /* Center the spinner */
        #zt_parking_loading .spinner {
            position: absolute;
            top: calc(50% - 60px);
            left: calc(50% - 60px);
            transform: translate(-50%, -50%);
        }

        /* Spinner animation */
        .spinner {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }
         @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }