/* 
    ---
    MVIEWER STUDIO
    Feuille de style pour les propriétés spécifiques des composants d'interface
    -
    Compatible avec la version Bootstrap 5.2	
    ---
    */

		@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

		body {
			font-family: 'Poppins', sans-serif;
			width: 100%;
			height: 100%;
		}
	
		.layers-list-item.active {
			color: var(--info)!important;
		}
		
		/*
		-- PROPRIETES GENERALES
		*/
		
		a {
			cursor: pointer;
		}
		
		.noborder {
			border: none;
		}
		
		.noborderradius {
			border-radius: 0 !important;
		}
		
		.strong {
			font-weight: 600;
			font-size: 1.1em;
		}
		
		.hideBlock {
			display: none;
		}
		
		.showBlock {
			display: block;
		}
		
		.list-group-item {
			background-color: #ffffff00;
		}
	
		.group_list {
			background-color: #e1e1e1;
		}
	
		.layer_item {
			background-color: #e1e1e1;
		}
	
		.group_list .layer_item {
			background-color: #c5c5c5;
		}
		
		.modal {
			overflow-y: auto !important;
		}
	
		/* Tooltip */
		.tooltip-info i {
			vertical-align: middle;
			margin-left: 3px;
		}
	
		
		/* Alert */
		
		.alert {
			display: flex;
			align-items: center;
			line-height: 1.2;
		}
		
		.alert i {
			margin-right: 0.2em;
			vertical-align: bottom;
		}
		
		#liveAlertPlaceholder {
			position: fixed;
			z-index: 2000;
			bottom: 1rem;
			right: 2rem;
		}
	
		#liveAlertPlaceholder .alert i {
			font-size: 1.2rem;
			vertical-align: middle;
		}
	
		#liveAlertPlaceholder .btn-close i {
			font-size: 1.4rem;
			margin-left: 2.5rem;
			margin-right: 0!important;
		}
		/*lib : Bootstrap5 Tags input*/
		.subcomponents .badge .btn-close {
			box-sizing: content-box;
			width: 1em;
			height: 1em;
			padding: 0.25em 0.25em;
			color: white;
			background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
			border: 0;
			border-radius: 0.375rem;
			opacity: .5;
		}
	
		.subcomponents .badge .btn-close-white {
			filter: invert(1) grayscale(100%) brightness(200%);
		}
	
		/* Tagsinput */
		
		#mod-layerOptions .bootstrap-tagsinput {
			width: 100%;
			box-shadow: none;
			border-radius: 0.6em;
			padding: 0.5rem 0.5rem;
		}
		
		.bootstrap-tagsinput .tag {
			background-color: var(--info) !important;
			color: white;
			padding: 2px 6px !important;
			border-radius: 7px !important;
		}
		
		/* Button */
		
		button i {
			vertical-align: middle;
		}
		
		.btn-outline-danger:hover {
			color: white;
		}
		
		/*
		-- EFFECTS HOVER
		*/
		
		.zoom,
		.zoomCard {
			transition: transform .2s;
		}
		
		.zoom:hover {
			transform: scale(1.2);
		}
		
		.zoomCard:hover {
			transform: scale(1.05);
			opacity: 0.92;
		}
		
		/* 
		-- ACCORDION 
		-- NOTE : Ajout du style pour le composant accordion non disponible dans le thème boostrap.css généré 
		*/
		
		.accordion {
			--bs-accordion-color: #4e4e4e;
			--bs-accordion-bg: #fff;
			--bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
			--bs-accordion-border-color: #D1D1D1;
			--bs-accordion-border-width: 1px;
			--bs-accordion-border-radius: 0.8rem;
			--bs-accordion-inner-border-radius:
			calc(0.8rem - 1px);
			--bs-accordion-btn-padding-x: 1.25rem;
			--bs-accordion-btn-padding-y: 1rem;
			--bs-accordion-btn-color: #212529;
			--bs-accordion-btn-bg:
			var(--bs-accordion-bg);
			--bs-accordion-btn-icon:
			url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
			--bs-accordion-btn-icon-width: 1.25rem;
			--bs-accordion-btn-icon-transform:
			rotate(-180deg);
			--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
			--bs-accordion-btn-active-icon:
			url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2c2c52'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
			--bs-accordion-btn-focus-border-color: #86b7fe;
			--bs-accordion-btn-focus-box-shadow: 0 0 0 0.1rem var(--primary);
			--bs-accordion-body-padding-x: 1.25rem;
			--bs-accordion-body-padding-y: 1rem;
			--bs-accordion-active-color:
			var(--primary);
			--bs-accordion-active-bg: #f5f5f5;
		}
		
		.accordion-button {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
			font-size: 1rem;
			font-weight: 600;
			color: var(--primary);
			text-align: left;
			background-color: var(--bs-accordion-btn-bg);
			border: 0;
			border-radius: 0;
			overflow-anchor: none;
			transition: var(--bs-accordion-transition);
		}
		
		@media (prefers-reduced-motion: reduce) {
			.accordion-button {
			transition: none;
			}
		}
		
		.accordion-button:not(.collapsed) {
			color: #2c2c52;
			box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
			font-weight: 600;
		}
		
		.accordion-button:not(.collapsed)::after {
			background-image: var(--bs-accordion-btn-active-icon);
			transform: var(--bs-accordion-btn-icon-transform);
		}
		
		.accordion-button::after {
			flex-shrink: 0;
			width: var(--bs-accordion-btn-icon-width);
			height: var(--bs-accordion-btn-icon-width);
			margin-left: auto;
			content: "";
			background-image: var(--bs-accordion-btn-icon);
			background-repeat: no-repeat;
			background-size: var(--bs-accordion-btn-icon-width);
			transition: var(--bs-accordion-btn-icon-transition);
		}
		
		@media (prefers-reduced-motion: reduce) {
			.accordion-button::after {
			transition: none;
			}
		}
		
		.accordion-button:hover {
			z-index: 2;
		}
		
		.accordion-button:focus {
			z-index: 3;
			border-color: var(--bs-accordion-btn-focus-border-color);
			outline: 0;
			box-shadow: var(--bs-accordion-btn-focus-box-shadow);
		}
		
		.accordion-header {
			margin-bottom: 0;
		}
		
		.accordion-item {
			color: var(--bs-accordion-color);
			background-color: var(--bs-accordion-bg);
			border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
		}
		
		.accordion-item:first-of-type {
			border-top-left-radius: var(--bs-accordion-border-radius);
			border-top-right-radius: var(--bs-accordion-border-radius);
		}
		
		.accordion-item:first-of-type .accordion-button {
			border-top-left-radius: var(--bs-accordion-inner-border-radius);
			border-top-right-radius: var(--bs-accordion-inner-border-radius);
		}
		
		.accordion-item:not(:first-of-type) {
			border-top: 0;
		}
		
		.accordion-item:last-of-type {
			border-bottom-right-radius: var(--bs-accordion-border-radius);
			border-bottom-left-radius: var(--bs-accordion-border-radius);
		}
		
		.accordion-item:last-of-type .accordion-button.collapsed {
			border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
			border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
		}
		
		.accordion-item:last-of-type .accordion-collapse {
			border-bottom-right-radius: var(--bs-accordion-border-radius);
			border-bottom-left-radius: var(--bs-accordion-border-radius);
		}
		
		.accordion-body {
			padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
		}
		
		.accordion-flush .accordion-collapse {
			border-width: 0;
		}
		
		.accordion-flush .accordion-item {
			border-right: 0;
			border-left: 0;
			border-radius: 0;
		}
		
		.accordion-flush .accordion-item:first-child {
			border-top: 0;
		}
		
		.accordion-flush .accordion-item:last-child {
			border-bottom: 0;
		}
		
		.accordion-flush .accordion-item .accordion-button,
		.accordion-flush .accordion-item .accordion-button.collapsed {
			border-radius: 0;
		}
		
		.title-accordion {
			color: var(--primary);
			font-size: 1.1rem;
			font-weight: 600;
		}
		
		.subtitle-accordion {
			font-size: 0.9rem;
			color: #4e4e4e;
			font-weight: normal;
		}
		
		.accordion-button:hover {
			background-color: var(--light);
		}
		
		
		/*
		-- NAVBAR
		*/
	
		#navbarStudio a,
		#navbarStudio span {
			color: white;
			font-weight: 500;
			cursor: default;
		}
		
		/*
		-- PAGE D'ACCUEIL
		*/
		
		.subtitle-home {
			color: var(--warning);
			font-size: 18px;
			font-weight: 700;
		}
		
		.title-home {
			color: var(--primary);
			font-size: 50px;
			font-weight: 700;
		}
		
		.iconCard-home {
			background-color: #ffffff3d;
			padding: 0rem;
			padding: 15px;
			border-radius: 1em;
			margin-bottom: 0em;
		}
		
		#cardsHome {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: stretch;
		}
		
		#cardsHome a:hover {
			text-decoration: none !important;
		}
		
		#cardsHome .card-text,
		#cardsPublication .card-text {
			font-size: 16px;
			font-weight: 300;
		}
		
		#containerHome .nav-item {
			color: #929292;
		}
		
		/*
		-- STUDIO
		*/
		
		/* Title Tabs */
		
		#stepStudioContent h1 {
			color: var(--primary);
			font-weight: 600;
		}
		
		#stepStudioContent h1 i {
			font-weight: normal;
			vertical-align: bottom;
		}
		
		/* Wizard */
		
		#blockWizard>div {
			border-radius: 1em;
			padding: 2rem;
		}
		
		#wizardCredits a {
			color: #929292 !important;
		}
		
		#wizardCredits a:hover {
			text-decoration: underline;
		}
		
		/* Documentation */
		
		#helpStudioBloc {
			background-color: #934ae424;
			padding: 1.5rem 1rem;
			border-radius: 0.8em;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-evenly;
		}
		
		#helpStudioBloc a:hover {
			color: white;
		}
		
		/*
		-- MODULES STUDIO
		*/
		
		/* TOOLSBAR */
		
		#toolsbarStudio {
			text-align: end;
			position: absolute;
			right: 2em;
		}
		
		#toolsbarStudio .nav-link {
			border-radius: 0.8rem;
			margin-left: 1em;
			font-weight: 500;
			padding: 0.7rem 0.75rem;
			font-size: 0.9rem;
			line-height: 1.5;
		}
		
		#toolsbarStudio .nav-link:hover {
			opacity: 0.8;
		}
		
		#toolsbarStudio .nav-link i {
			vertical-align: middle;
		}
		
		#toolsbarStudio-View {
			color: var(--info);
			background-color: #934ae430;
		}
		
		#toolsbarStudio-Save {
			color: white;
			background-color: var(--info);
		}
	
		#toolsbarStudio-delete {
			color: white;
			background-color: var(--danger);
		}
	
		#toolsbarStudio-unpublish {
			color: white;
			background-color: var(--warning);
		}
		
		#btnSwitchAdvanced {
			color: var(--info);
		}
	
		#mod-layerOptions .custom-switch {
			margin-bottom: 5px;
		}
		.versionActionsCol a {
			font-size: 18px;
		}
	
		#versionPreviewLink {
			color: var(--info)
		}
		#versionDeleteLink {
			color: var(--danger);
		}
	
		#versionAsNewLink {
			color: var(--warning);
		}
	
		#versionVersionIcon {
			color: var(--success);
		}
	
		.publishedVersion {
			color: var(--warning);
			font-weight: 500;
		}
		.published {
			color: black;
			font-weight: 500;
		}
	
		.custom-tooltip-table>span {
			display: none;
			color: white;
			background-color: #585858;
			font-size: small;
			padding: 5px;
			border-radius: 5px;
			font-weight: normal;
			position: absolute;
			margin-left: 10px;
		}
	
		.custom-tooltip-table:hover>span {
			display: block!important;
		}
		
		/* APPLICATION  */
		
		/* Fond de plan */
		
		.img-BackgroundMap {
			width: 4em;
			border-radius: 1em;
			margin-right: 1em;
		}
		
		#backgroundlayers-config .bl {
			border-left: none;
			border-right: none;
		}
		
		#backgroundlayers-config .bl:first-child {
			border-top: none;
		}
		
		#frm-lis-styles {
			display: flex;
			align-items: stretch;
		}
		
		#frm-bl-visible option:disabled {
			display: none;
		}
		
		/* Recherche */
		
		#collapseSearch .list-group-item:first-child {
			border-bottom: none;
		}
		
		#collapseSearch .list-group-item:not(:first-child) {
			border-top: 1px solid rgba(0, 0, 0, 0.125);
		}
		
		/* Thème de l'application */
		
		select#opt-style {
			color: #fff;
		}
		
		#opt-style option {
			color: #FFFFFF;
		}
		
		.alizarin,
		.alizarin:focus {
			background-color: #E64B3B;
		}
		
		.blue,
		.blue:focus {
			background-color: #032e46;
		}
		
		.default,
		.default:focus {
			background-color: #34495D;
		}
	
		.theme-designfr,
		.theme-designfr:focus {
			background-color: #ffffff;
			color: #333333 !important;
		}
	
	
		.nephritis,
		.nephritis:focus {
			background-color: #26AE60;
		}
		
		.ripe_lemon,
		.ripe_lemon:focus {
			background-color: #F6CA17;
		}
		
		.amethyst,
		.amethyst:focus {
			background-color: #9A59B6;
		}
		
		.carrot,
		.carrot:focus {
			background-color: #E67E21;
		}
		
		.green,
		.green:focus {
			background-color: #70BA50;
		}
		
		.peter_river,
		.peter_river:focus {
			background-color: #3497DB;
		}
		
		.black,
		.black:focus {
			background-color: #000000;
		}
		
		.chambray,
		.chambray:focus {
			background-color: #3A529A;
		}
		
		.green_sea,
		.green_sea:focus {
			background-color: #1ABC9C;
		}
		
		.pink,
		.pink:focus {
			background-color: #F62359;
		}
		
		.wet_asphalt,
		.wet_asphalt:focus {
			background-color: #34495D;
		}
		
		.row.fld.selected {
			background-color: #9E9E9E;
		}
		
		/* Options de la carte */
		
		#map {
			height: 25em;
		}
		
		/* THEMATIQUES & DONNEES */
		
		/* Panneaux des thématiques */
		
		.themes-list-item {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
	
		.themes-list-item>* {
			flex: 1 50%;
		}
	
		.themes-list-item .theme-layer-list  .theme-group-list {
			flex: 1!important;
		}
	
		.theme-options-btn {
			text-align: right !important;
		}
		
		.theme-options-btn .btn {
			margin: 0 5px;
		}
	
		.theme-options-btn button span {
			padding-right: 0.2em;
			padding-left: 0.2em;
		}
	
		.theme-options-btn button span i {
			font-size: 13px;
		}
		
		.theme-name {
			font-weight: 500;
			margin-right: 10px;
			padding: 5px;
		}
		
		.theme-infos-layer {
			background-color: #934ae430;
			padding: 4px 9px;
			border-radius: 10px;
			color: var(--info);
		}
		
		.layer-move,
		.theme-move {
			cursor: move;
			cursor: -webkit-grabbing;
			float: right;
			padding-right: 0.2em;
			padding-left: 0.2em;
		}
		
		.layer-remove,
		.theme-remove {
			float: right;
			padding-right: 0.2em;
			padding-left: 0.2em;
			cursor: pointer;
		}
		
		.moveList {
			cursor: move;
		}
		
		.layer-edit,
		.theme-edit {
			float: right;
			padding-right: 0.2em;
			padding-left: 0.2em;
			cursor: pointer;
		}
		
		#themes-list .list-group-item.active,
		#themeLayers .list-group-item.active {
			color: #4e4e4e;
			background-color: var(--light);
			border-color: rgba(0, 0, 0, 0.125);
		}
		
		/* Paramétrage de la thématique sélectionnée */
		
		.layers-list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.layer-options-btn .btn {
			margin: 0 5px;
		}
		
		.selected-icon {
			margin: 0.2em 0.5em;
			padding: 0.1em 0.5em;
			padding: 0.6em 0.9em;
			background-color: #e7e7e7;
			color: #515151;
			border-radius: 9px;
		}
		
		/* FONCTIONNALITES AVANCEES */
		
		.list-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		#searchelasticsearch_options,
		#searchlocalities_options {
			display: none;
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
		/* PUBLICATION */
		
		.iconCard-finish {
			background-color: #ffffff3d;
			padding: 0rem;
			padding: 18px 18px;
			border-radius: 1rem;
			margin-bottom: 0em;
		}
		
		#cardsPublication a:hover {
			text-decoration: none;
		}
		
		#cardsPublication {
			display: flex;
			flex-direction: row-reverse;
			justify-content: flex-end;
			align-items: stretch;
			flex-wrap: wrap;
			align-content: center;
		}
		
		#cardsPublication div {
			margin-right: 7px;
		}
	
		.badge-publish {
			color: white;
			background-color: var(--warning);
		}
		.badge-draft {
			color: white;
			background-color: #934ae4;
		}
	
		.badge-title {
			font-size: 15px;
		}
		
		/*
		-- MODALS 
		*/
		
		.modal-title {
			color: var(--primary);
			font-weight: 600;
		}
		
		/* Nav in modal */
		
		.modal-body .nav-pills .nav-item {
			padding: 0px 1.5em 0 0;
		}
		
		.modal-body .nav-pills .nav-link {
			padding: 8px 0px;
		}
			
		.modal-body .nav-pills .nav-link.active {
			color: var(--info);
			background: none;
			font-weight: 500;
			border-radius: 0;
			-webkit-box-shadow: 0px 2px 0px 0px #934ae4;
			box-shadow: 0px 3px 0px 0px #934ae4;
		}
		
		.modal-body .nav .nav-link:hover {
			color: var(--info);
			background: none;
		}
		
		/* Modal Open project */
		
		#liste_applications {
			height: 420px;
			overflow-y: auto;
		}	
		
		#liste_applications h5 {
			color: var(--info) !important;
		}
		
		/* Modal - Features value */
		
		#distinct_values {
			max-height: 450px;
			overflow-y: auto;
		}
		
		/* Modal - Close Studio */
		
		.cardsClose {
			display: flex;
			align-items: center;
			padding: 1rem;
			margin: 15px 0;
			border-radius: 0.6rem;
		}
		
		.save-close {
			background-color: var(--info) !important;
			color: white !important;
		}
		
		.notsave-close {
			color: var(--info) !important;
			border: 1px solid var(--info);
		}
		
		.cardsClose i {
			font-size: 1.2em;
			padding: 8px 12px;
			border-radius: 0.6rem;
			margin-right: 1rem;
		}
		
		.save-close i {
			background-color: #ffffff45;
		}
		
		.notsave-close i {
			background-color: #934ae43b !important;
		}
		
		.returnConf-close i {
			font-size: 1.2em;
			vertical-align: middle;
		}
		
		a.returnConf-close:hover {
			color: var(--info);
		}
		
		/* Modal - Import des thématiques */
		
		.titleThema {
			color: var(--info);
			font-weight: 600;
			font-size: 1.1em;
			margin-top: 12px;
		}
		
		.publisherThema {
			margin-bottom: 12px;
			font-style: italic;
		}
		
		.descriptionThema:first-letter {
			text-transform: capitalize;
		}
		
		.urlThema,
		.idThema {
			display: none !important;
		}
		
		#tableThemaExt thead {
			display: none !important;
		}
		
		#tableThemaExt td {
			display: block;
			border: none !important;
			padding: 2px !important;
			margin-left: 10px;
		}
		
		#tableThemaExt tr {
			border: 1px solid #D1D1D1;
		}
		
		#tableThemaExt tr:hover {
			background-color: var(--light);
			cursor: pointer;
		}
		
		#tableThemaExt tr.selected td {
			background: none;
		}
		
		.checkCustom {
			margin: 0 !important;
			vertical-align: middle;
			display: table-cell !important;
			padding-left: 35px;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		
		.checkCustom input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;
		}
		
		.checkCustom span {
			position: absolute;
			border-radius: 0.9rem;
			top: 40%;
			left: 1rem;
			width: 1.2rem;
			height: 1.2rem;
			background-color: #fff;
			border: #BDBDBD solid 1px;
		}
		
		.checkCustom input:checked~span {
			background-color: var(--info);
			border-color: var(--info);
		}
		
		.checkCustom span:after {
			content: "";
			position: absolute;
			display: none;
		}
		
		.checkCustom input:checked~span:after {
			display: block;
		}
		
		.checkCustom span:after {
			left: 6px;
			top: 3px;
			width: 5px;
			height: 10px;
			border: solid white;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	
		/* Modal Theme externe - Param */
	
		#nameThemeExt {
			font-size: 16px;
			font-weight: 500;
		}
		
		/* Modal - Ajout d'une couche */
		
		#mod-layerNew h6,
		#mod-layerOptions h6,
		#mod-themeOptions h6 {
			font-size: 16px;
			font-weight: 500;
		}
		
		.ogc-results .list-group-item {
			margin: 5px 0px;
			border-radius: 14px;
		}
		
		.ogc-results .list-group-item:hover {
			background-color: var(--light);
		}
		
		.ogc-results .list-group-item .custom-checkbox {
			display: flex;
			align-items: center;
		}
		
		.ogc-results {
			max-height: 420px;
			overflow-y: auto;
		}
		
		/* Modal iconPicker */
		
		.icon-picker-list a:hover,
		.icon-picker-list a.active {
			background-color: var(--info) !important;
		}
		
		.btn-layer-new {
			float: right;
			margin-right: 20px;
		}
		
		.icon-picker-list li {
			flex: 0 0 10% !important;
		}
		
		/*  Modal LayerOptions */
	
		#layerTypeLabel {
			background-color: var(--info);
			color: white;
			padding: 0.5em 0.7em;
			border-radius: 1em;
			text-transform: uppercase;
			font-size: 0.9em;
			margin-left: 1em;
		}	
		
		#opacity-value {
			margin: 0.7rem;
			background-color: #934de242;
			padding: 0.3rem 0.7rem;
			color: var(--info);
			border-radius: 0.6rem;
		}
		
		/* === range theme and appearance === */
		input[type="range"] {
			font-size: 1rem;
			width: 100%;
		}
		
		input[type="range"] {
			color: var(--info);
			--thumb-height: 1.125em;
			--track-height: 0.125em;
			--track-color: rgba(0, 0, 0, 0.2);
			--clip-edges: 0.125em;
		}
		
		/* === range commons === */
		input[type="range"] {
			position: relative;
			background: #fff0;
			overflow: hidden;
		}
		
		/* === WebKit specific styles === */
		input[type="range"],
		input[type="range"]::-webkit-slider-runnable-track,
		input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			transition: all ease 100ms;
			height: var(--thumb-height);
		}
		
		input[type="range"]::-webkit-slider-runnable-track,
		input[type="range"]::-webkit-slider-thumb {
			position: relative;
		}
		
		input[type="range"]::-webkit-slider-thumb {
			--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
			--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
			--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
			--clip-further: calc(100% + 1px);
			--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
				100vmax currentColor;
			width: var(--thumb-width, var(--thumb-height));
			background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
				50% calc(var(--track-height) + 1px);
			background-color: currentColor;
			box-shadow: var(--box-fill);
			border-radius: var(--thumb-width, var(--thumb-height));
		
			filter: brightness(100%);
			clip-path: polygon(
				100% -1px,
				var(--clip-edges) -1px,
				0 var(--clip-top),
				-100vmax var(--clip-top),
				-100vmax var(--clip-bottom),
				0 var(--clip-bottom),
				var(--clip-edges) 100%,
				var(--clip-further) var(--clip-further)
			);
		}
		
		input[type="range"]:hover::-webkit-slider-thumb {
			cursor: grab;
			opacity:0.9;
		}
		
		input[type="range"]::-webkit-slider-runnable-track {
			background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
				100% calc(var(--track-height) + 1px);
		}
		
		/* === Firefox specific styles === */
		input[type="range"],
		input[type="range"]::-moz-range-track,
		input[type="range"]::-moz-range-thumb {
			appearance: none;
			transition: all ease 100ms;
			height: var(--thumb-height);
		}
		
		input[type="range"]::-moz-range-track,
		input[type="range"]::-moz-range-thumb,
		input[type="range"]::-moz-range-progress {
			background: #fff0;
		}
		
		input[type="range"]::-moz-range-thumb {
			background: currentColor;
			border: 0;
			width: var(--thumb-width, var(--thumb-height));
			border-radius: var(--thumb-width, var(--thumb-height));
			cursor: grab;
		}
		
		input[type="range"]:active::-moz-range-thumb {
			cursor: grabbing;
		}
		
		input[type="range"]::-moz-range-track {
			width: 100%;
			background: var(--track-color);
		}
		
		input[type="range"]::-moz-range-progress {
			appearance: none;
			background: currentColor;
			transition-delay: 30ms;
		}
		
		input[type="range"]::-moz-range-track,
		input[type="range"]::-moz-range-progress {
			height: calc(var(--track-height) + 1px);
			border-radius: var(--track-height);
		}
		
		input[type="range"]::-moz-range-thumb,
		input[type="range"]::-moz-range-progress {
			filter: brightness(100%);
		}
		
		
		
		#layer_sections .title-accordion {
			font-size: 1rem;
		}
		
		.layer-style {
			margin-bottom: 1em;
		}
		
		.layer-style-block {
			border: 1px solid #D1D1D1;
			border-radius: 0.6rem;
			padding: 15px;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		
		div#map_filter {
			height: 300px !important;
		}
		
		#frm-lis-styles input[type="text"]:focus-visible {
			outline: none;
			background-color: #d1d1d12b;
		}
		
		.layer-style-block img {
			width: fit-content;
			max-width: 100%;
		}
		
		.layer-style-block label:hover {
			color: var(--info);
		}
		
		/* Interrogation */
		
		.list-group-item.fld {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			border-left: none;
			border-right: none;
			flex-wrap: wrap;
		}
		
		.list-group-item.fld:first-child {
			border-top: none;
		}
		
		.list-group-item.fld:last-child {
			border-bottom: none;
		}
		
		.list-group-item.fld i {
			cursor: grab;
		}
		
		.list-group-item.fld.selected {
			background-color: var(--light);
		}
		
		.list-group-item.fld.selected .fld-name {
			font-weight: 600;
		}
		
		#query-parameters {
			display: none;
		}
		
		#query-parameters.visible {
			display: block;
		}
		
		/* Recherche */
		
		#fuse_options {
			display: none;
		}
		
		/* Modal Configuration XML */
		
		pre.windows-code-XML {
			background-color: #060024;
			color: white;
			padding: 1rem 0.5rem;
			width: 100%;
		}
		
		/* Scrollbar */
		
		pre::-webkit-scrollbar {
			width: 8px;
			height: 10px
		}
		
		pre::-webkit-scrollbar-thumb {
			background: #767987;
			border-radius: 8px;
		}
		
		/* Modal - Ajouter une couche */
		
		#providers_dropdown {
			width: 20em;
			text-align: right;
		}
		
		
		/*
		-- MOBILE 
		*/
		
		@media (max-width: 800px) {
			#stepStudioContent {
			margin: 6em 0em !important;
			}
		
			#containerHome {
			padding: 10em 2em;
			}
		
			#cardsHome a {
			margin-bottom: 2em !important;
			}
		
			#homeNavbarDoc {
			position: relative !important;
			}	
		}
	
		/*Template generator*/
		#newCustomTemplateManager, #openTemplateGeneratorBtn, #customTemplateManager, #dismissTemplateGeneratorMsg {
			display: flex;
		}
	
		#generatorComponentsDDArea .subcomponents .tags-menu{
			top: auto !important;
		}
	
		/*Financeurs credit*/
	
		.credits img{
			height:50px;
		}
		.credits .col{
			text-align:center;
		}
		.credits {
			padding-bottom: 15px;
		}
		#themes-list {
			-webkit-user-select: none; /* Safari */
			-ms-user-select: none; /* IE 10 and IE 11 */
			user-select: none; /* Standard syntax */
		}