.btn-toolbar {
	background:#4CAF50;
	color:white;
	border:none;
	width:100%;
	padding:8px 4px;
	margin-bottom:20px;
	border-radius:5px;
	cursor:pointer;
	font-size:10pt;
	box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.btn-toolbar.export { background:#2196F3; }
.btn-toolbar.import { background:#9C27B0; }
.btn-toolbar.fermer { background:#C74026; }

.btn-toolbar:hover { opacity:0.9; }

.edit-mode .icon.background {
	display:block;
}

.edit-mode .icon {
	cursor:move;
}


.icon.background img {
	width:100%;
	border:solid 2px #555;
}

.icon:hover:not(.rech) {
	background-color:rgba(255, 255, 255, 0.2);
}

.background button.delete-btn {
	display:none;
}




.control-btn {
	width:20px; height:20px;
	border:none; /*border-radius:50%;*/
	font-size:12px;
	cursor:pointer;
	color:white;
	font-weight:bold;
}
.delete-btn { background:#f44336; }
.edit-btn { background:#2196F3; }
.icon-controls button:first-child {
	border-top-left-radius:50%;
	border-bottom-left-radius:50%;
}
.icon-controls button:last-child {
	border-top-right-radius:50%;
	border-bottom-right-radius:50%;
}

.modal.background .infoIcon {
	display:none;
}

.modal.background .image-preview {
	max-width:300px;
	max-height:300px;
}

.modal.background #iconSel {
	display:none;
}

.modal-content {
	background-color:white;
	margin:5% auto; padding:20px;
	border-radius:10px;
	width:500px;
	max-width:95%; max-height:90%;
	overflow-y:auto;
	box-shadow:0 4px 20px rgba(0,0,0,0.3);
	position:relative;
}

.form-group {
	margin-bottom:15px;
}

.form-group label {
	display:block;
	margin-bottom:5px;
	font-weight:bold;
}

.form-group input, .form-group textarea {
	width:100%;
	padding:8px;
	border:1px solid #ddd;
	border-radius:4px;
	font-size:14px;
}

.image-upload-section {
	border:2px dashed #ddd;
	border-radius:8px;
	padding:20px;
	text-align:center;
	margin-bottom:15px;
}

.image-upload-section.dragover {
	border-color:#4CAF50;
	background-color:#f0f8f0;
}

.image-preview {
	max-width:100px;
	max-height:100px;
	margin:10px auto;
	display:none;
}

.image-info {
	font-size:12px;
	color:#666;
	margin-top:5px;
}

.form-buttons {
	display:flex;
	gap:10px;
	justify-content:flex-end;
	margin-top:20px;
	position:absolute; bottom:8px;
}

.btn-cancel {
	background:#f44336;
	color:white;
}

.btn-save {
	background:#4CAF50;
	color:white;
}

.btn:hover {
	opacity:0.9;
}

.storage-info {
	position:fixed;
	bottom:1%; right:10%;
	background:rgba(0,0,0,0.7);
	color:white;
	padding:5px 10px;
	border-radius:15px;
	font-size:9pt;
	z-index:1500;
	display:none;
}
.edit-mode .storage-info {
	display:block;
}

b.gridSize {
	padding:2px 8px; margin:3px 5px;
	background:#E0DA51; color:#555;
	border-radius:8px; cursor:pointer;
}

.user-info {
	position:fixed;
	bottom:1%; left:5%;
	background:#FFF;
	color:#555;
	padding:5px 10px; width:20%;
	border:none;
	border-radius:15px;
	text-align:center;
	font-size:9pt;
	z-index:1500;
	display:none;
}
.edit-mode .user-info {
	display:block;
}

input.user-info:placeholder-shown {
	border:2px dotted red;
}


.hidden-input {
	display:none;
}

.image-source-tabs {
	display:flex;
	margin-bottom:15px;
	border-bottom:1px solid #ddd;
}

.tab {
	padding:10px 15px;
	cursor:pointer;
	border-bottom:2px solid transparent;
	transition:all 0.3s;
}

.tab.active {
	border-bottom-color:#4CAF50;
	background-color:#f0f8f0;
}

.tab-content {
	display:none;
	margin:10px 0 40px 0;
	
}

.tab-content.active {
	display:block;
}


#listeIcon img {
	width:9%;
	cursor:pointer;
	margin:1%;
	transition:transform .2s;
}

#listeIcon img:hover {
	transform:scale(1.3);
}

#iconSel {
	position:absolute;
	top:7px; right:7px;
	width:60px;
	border-radius:9px;
	box-shadow:0 0 5px 2px #555;
}