body:has(table#ndf):has(.checkbox-ndfs):not(:has(.checkbox-ndfs:checked)) .ndfs-actions {
	pointer-events: none;
	opacity: 0.2;
	filter: grayscale(100%);
}


table#ndf:not(:has(td[data-key="nom_cb"]:not(:empty))) [data-key="nom_cb"] {
	display: none !important;
}

.liste-depenses {
	margin: 30px 0;
}

col.ht,
col.tva,
col.ttc {
	width: 133px;
}

.ligne-depense[data-clicked="true"] td {
	border-block: 1px solid darkred;
}

.ligne-depense td.ttc input {
	width: calc(100% - 30px);
	display: inline-block;
}

/* .ligne-depense td.ttc .devise {
	width: 30px;
	display: inline-block;
	font-size: 10px;
	text-align: right;
} */

input[name="date_depense"] {
	width: 100%;
	line-height: initial;
}

col.date_depense {
	width: 100px;
}

col.actions {
	text-align: right;
}

.table>tbody>tr.depense-incomplete>td {
	background: rgba(255, 0, 0, 0.1);
}

.ligne-depense input[type="text"] {
	text-transform: uppercase;
}

tr.ligne-depense td {
	cursor: default;
	transition: background 0.5s ease;
}

tr.ligne-depense:not(.changer-devise) .select-devise {
	display: none !important;
}

.select-devise {

	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999999999999999999999999999999999999999;

	>div {
		position: absolute;
		top:50%;
		left: 50%;
			transform: translate(-50%, -50%);
		.fermer {
			transform: translate(50%, -50%);
			top: 0;
			right: 0;
			width: 24px;
			height: 24px;
			display: grid;
			place-items: center;
			font-size: 1rem;
			border-radius: 50%;
			border: 0;
			position: absolute;
			background: black;
			color: white;
		}

		max-width: 640px;
		max-height: 480px;
		width: 100%;
		height: 100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;

		h3 {
			margin: 0;
		}
	}

	.liste-devises {
		overscroll-behavior: none;
		overflow-y: auto;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;

		button {
			background-color: transparent;
			border: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: .5rem;

			big {
				font-size: 200%;
			}

			&:hover {
				background-color: #ccc;
			}

			&.hidden {
				display: none;
			}
		}
	}
}

/* tr.ligne-depense.changer-devise .case-justificatif * {
	visibility: hidden;
} */


.liste-depenses td:empty,
.liste-depenses th:empty {
	padding: 0;
	width: 0
}


.type_depense {
	width: 80px;
}


tbody>tr.ligne-depense-bilan {
	background: #46b8da;
	color: white;
	cursor: default;
}

tbody>tr.ligne-depense-bilan>td {
	background: transparent;
}

tbody:not(.closed) .ligne-depense-bilan .glyphicon-chevron-right {
	transform: rotate(90deg);
}

tbody.closed .ligne-depense {
	display: none;
}

.ligne-depense-sous-total {
	color: #888;
	font-size: smaller;
}

tr.ligne-depense td.drag-depense span {
	cursor: row-resize;
	transition: all 0.5s ease;
}

tr.ligne-depense td.drag-depense:hover span {
	color: #ccc;
}

.liste-depenses thead th {
	text-align: center;
}

.ligne-depense .btn.dropdown-toggle {
	background-color: transparent;
}

.justif-upload-button {
	display: inline-block;
	width: 100%;
	min-width: 100px;
	height: 28px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.justif-upload-button input {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	overflow: hidden;
	opacity: 0;
	z-index: 2;
}

.justif-upload-button .justif-upload-texte {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	line-height: 28px;
	overflow: hidden;
	z-index: 1;
	text-align: center;
	color: #46b8da;
	transition: all 0.5s ease;
	padding: 0 5px;
}

.justif-upload-button:hover .justif-upload-texte {
	background: #46b8da;
	color: white;
}

.justif-loading .justif-upload-button {
	background: url(../images/loading.png) no-repeat center;
	background-size: auto 80%;
}

.justif-loading .justif-name,
.justif-loading .justif-upload-button span,
.justif-loading .justif-file {
	opacity: 0;
}

.justif-file {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

col.justif {
	width: 150px;
}


.liste-depenses[data-saisie_ok="1"] .drag-depense span,
.liste-depenses[data-saisie_ok="1"] [href="#ajout-depense"],
.liste-depenses[data-saisie_ok="1"] [href="#justif-effacer"] {
	display: none;
}

.justif-name {
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	font-size: smaller;
	vertical-align: baseline;
}

.modal-mobile-upload {
	background: rgba(0, 0, 0, 0.5);


}

@media (min-width: 468px) {
	.modal-mobile-upload .modal-dialog {
		bottom: 15px;
		left: 15px;
		margin: 0;
		position: absolute;
	}
}

.ligne-depense input,
.ligne-depense .btn.dropdown-toggle {
	font-size: 10px;
	padding: 10px 12px;
}


.ligne-depense .case-justificatif .btn-effacer-justif {
	visibility: hidden;
}

.ligne-depense:hover .case-justificatif .btn-effacer-justif {
	visibility: visible;
}

.case-justificatif {
	text-align: center;
	white-space: nowrap;
}

.case-justificatif label {
	width: 100%;
}

.deposer-fichiers {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5);
}

.deposer-fichiers-frame {
	position: absolute;
	top: 15%;
	left: 15%;
	right: 15%;
	bottom: 15%;
	background: white;
	border: 5px dashed #555;
	padding: 5%;
	text-align: center;
}

.deposer-fichiers-frame .select_type_depense {

	position: absolute;
	top: 15px;
	left: 15px;
	max-width: 75%;
	text-align: left;

}

.deposer-fichiers.chargement .deposer-fichiers-frame:before {
	display: block;
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	background: white url(../images/loading.gif) no-repeat center center;
	opacity: 1;

	content: 'Chargement des fichiers\nVeuillez patienter';
	font-size: 20px;
	padding: 20vw;
}

.deposer-fichiers-frame input[type="file"] {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.deposer-fichiers .glyphicon-cloud-upload {
	font-size: 20vh;
	display: block;
	margin: 30px;
}

.deposer-fichiers .glyphicon-remove {
	z-index: 9999999;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(50%) translateY(-50%);
	background: white;
	padding: 5px;
	border-radius: 50%;
	border: 5px solid #555;
}

/** MODALL **/
/* Modal Container */
.btn-modal {
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

/* Effet hover */
.btn-modal:hover {
	background-color: #45a049;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.btn-modal:active {
	background-color: #3e8e41;
	transform: translateY(0);
}


#howToModal {
	font-family: 'Arial', sans-serif;
	visibility: hidden;
	opacity: 0;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: visibility 0.3s, opacity 0.3s ease-in-out;
}

/* Modal Content */
.modal-content {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 40px;
	width: 700px;
	max-width: 90%;
	max-height: 80%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	position: relative;
	text-align: left;
}

/* Close Button */
.modal-content .close {
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	color: #888;
	position: absolute;
	top: 20px;
	right: 20px;
	transition: color 0.3s;
}

.modal-content .close:hover {
	color: #000;
}

/* Modal Header */
.modal-content h2 {
	font-size: 20px;
	font-weight: bold;
	color: #222;
	margin-bottom: 20px;
	text-align: left;
}

/* Intro Text */
.modal-content .intro-text {
	font-size: 16px;
	color: #333;
	margin-bottom: 20px;
	line-height: 1.6;
}

/* List Instructions */
.modal-content ul {
	padding: 0;
	list-style-type: none;
	margin: 5px 0;
}

.modal-content ul li {
	font-size: 16px;
	color: #333;
	margin-bottom: 10px;
	line-height: 1.6;
}



/* Checkbox Label */
.checkbox-label {
	font-size: 16px;
	margin-top: 20px;
	color: #333;
	display: block;
	text-align: left;
}

/* Link */
.detailed-notice-link {
	font-size: 16px;
	color: #007bff;
	text-decoration: none;
	margin-top: 20px;
	display: inline-block;
}

.detailed-notice-link:hover {
	color: #0056b3;
	text-decoration: underline;
}

/* Continue Button */
#continueBtn {
	background-color: #007bff;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding: 15px 25px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin-top: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-align: center;
	display: inline-block;
}

#continueBtn:hover {
	background-color: #0056b3;
	transform: translateY(-2px);
}



.dropdown-menu .open {
	position: absolute;
	background-color: red;

}

.fancybox-image[src*="png"] {
	background-color: white !important;
}

.groupe-depenses td,
.groupe-depenses th {
	padding-inline: 2px !important;
}


/* @media (min-width: 768px) {

	body:has(.liste-depenses) {
		#page-wrapper {
			margin: 0 0 0 150px;
			padding: 0 15px;
		}

		.sidebar {
			font-size: 70%;
			width: 150px;
		}
	}
} */

td:has([name="ht"]),
td:has([name="tva"]),
td:has([name="ttc"]) {

	input {
		width: 90px !important;
	}
}

td:has([name="ttc"]) {
	position: relative;

	.devise {
		pointer-events: none;
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		/* background-color: #ccc; */
		/* color: white; */
		/* padding: 1.5px; */
		/* border-radius: 1.5px; */
		font-size: 15px;
		line-height: 1;
	}
}


td:has([name="libelle"]) {
	width: 100% !important;
}

td:has([name="type_vehicule"])>* {
	max-width: 150px !important;
}


body:not(:has(.groupe-depenses [name="type_vehicule"])) {

	[data-field="type_vehicule"],
	[data-field="immatriculation"] {
		opacity: 0;
	}
}

[data-type="undefined"],
[data-type=""] {
	.type_depense div {
		/* width: 100px; */
	}


	.ligne-depense td {
		background: rgba(255, 0, 0, 0.1);


	}
}

td.devise {
	text-align: center;

	a {
		display: block;
	}

	a:hover {
		text-decoration: none;

		span {
			text-decoration: underline;
		}
	}

	span {
		display: block;
		margin-top: .5rem;
		font-size: 8px;
		text-transform: uppercase;
	}
}

.nb #ht_final{
	width: 1.5rem !important;
	color: pink !important;
}