:root {
	--specVH : 1vh;
}

/* ---------------------
*  -----TableAxonaut ---
*  ------------------ */

.tableAxonaut .glyphicon span {
	display: none;
}

	.containerTableScroll{
		width: 100%;
		position : relative;
		clear: both;
	}
	.containerTableResponsive {
		width: 100%;
		overflow-x : auto;
		position : relative;
		padding-bottom : 50px;
	}

	.scrollTableLeft, .scrollTableRight {
		display : block;
		width : 30px;
		position: absolute;
		top: 40px;
		bottom: 0;
		z-index: 100;
		display : none;
	}
	.scrollTableLeft {
		left : -30px;
		box-shadow : 10px 0 10px -12px rgba(0,0,0,.5);
		text-align : right;
	}
	.scrollTableRight {
		right : -30px;
		box-shadow : -10px 0 10px -12px rgba(0,0,0,.5);
		text-align : left;
	}
		.scrollTableLeft div, .scrollTableRight div {
			display: inline-block;
			width : 25px;
			height : 30px;
			line-height : 24px;
			position: sticky;
			top: 20px;
			opacity : 0.5;
			font-size: 1.7em;
			background: #58bbee;
			border-radius: 50px;
			color: white;
			text-align: center;
			margin : 20px auto;
			border : 3px solid white;
			box-shadow: 0 3px 5px rgba(0,0,0,.1);
		}
			.scrollTableLeft div {
				border-radius: 50px 0 0 50px;
				border-right : 0;
			}
			.scrollTableRight div {
				border-radius: 0 50px 50px 0;
				border-left : 0;
			}
			.scrollTableLeft div:hover,
			.scrollTableRight div:hover {
				opacity : 1;
				cursor : pointer;
			}
			.scrollTableLeft i,
			.scrollTableRight i {
				vertical-align : bottom;
			}

	.tableAxonaut:not(.filterAdvance ) thead input{
		position : sticky;
		left : 0;
	}
    .tableAxonaut {
        /*width : auto;
        margin : 0 -30px;*/
        margin : 0;
        width : 100%;
		position : relative;
		/*display : none;*/
		font-size : 1.05em;
		clear : both;
    }
	    .tableAxonaut td {
	        max-width : none;
	    }
		.tableAxonaut tfoot th  {
			padding : 5px !important;
		}
	    .tableAxonaut :not(thead):not(tfoot) tr.even{
	        background-color: #f7f7f7;
	    }
	    .tableAxonaut :not(thead):not(tfoot) tr.odd{
	        background-color: white;
	    }
		.tableAxonautZebre :not(thead):not(tfoot) tr:nth-child(2n){
			background-color: #f7f7f7;
		}
    .tableAxonaut thead{
        border-bottom: 1px solid white;
    }
		.tableAxonaut thead tr{
            background: #2d95f81f;
		}


        .tableAxonaut > thead > tr > th, .tableAxonaut > thead > tr > td {
            border : 0 ;
            border-right : 1px dashed white ;
            font-weight : 300;
        }
	    .tableAxonaut > thead > tr > th {
		    height: 35px;
		    padding: .7em .7em;
			vertical-align : middle;
	    }
        .tableAxonaut .fltrow,
        .tableAxonaut .fltrow tr,
        .tableAxonaut .fltrow td {
        	background : transparent;
        	height : 0 !important;
        	padding : 0 !important;
        	margin : 0 !important;
        }

			.tableAxonaut.filterAdvance .fltrow{
                background: #2d95f81f;
			}

        .tableAxonaut thead input, .tableAxonaut thead select {
		    font-size: 14px;
		    line-height: 1.5;
		    border-radius : 10px;
    		padding: 4px 10px;
    		box-sizing : border-box;
            height : 30px;
        }
			.tableAxonaut.filterSimple thead input{
				width : 350px;
				margin: -30px 0 20px 0;
				padding: 7px 15px;
				border-radius : 15px;
				height : 34px;
			}
			.tableAxonaut thead input, .tableAxonaut thead select {
				border: 1px solid #a4bed4;
			}
			.tableAxonaut thead .fltrow:hover{
				box-shadow : none;
			}
			.tableAxonaut.filterAdvance thead input, .tableAxonaut.filterAdvance thead select {
				max-width : 80%;
				margin : 5px auto;
			}
			.btnfilterSimple, .btnfilterAdvance, .btnExportTable {
				cursor : pointer;
				text-decoration: underline;
				opacity : .5;
				font-size : .8em;
				display: inline-block;
				color : black;
				margin-right : 10px;
				height : 40px;
			}
				.btnfilterSimple:hover, .btnfilterAdvance:hover, .btnExportTable:hover {
					opacity : 1;
				}
			.containerTableScroll .zoneBtnFilter {
                position: sticky;
                left: 0;
				display: inline-block;
				/*padding : 10px 0;*/
            }
			.containerTableScroll .zoneBtnFilter:not(.zoneBtnAdvance) {
				margin-left : 380px;
				position: sticky;
				left: 380px;
				line-height: 40px;
				height: 30px;
				vertical-align: middle;
				display: block;
			}
			.containerTableScroll .paginationAxonaut {
				position: sticky;
				left: 0;
			}
        .btn-tableAxonaut {
        	margin-top : 1em;
        	margin-bottom : 2em;
        	max-width : 70%;
        	float : right;
        }

    .tableAxonaut tfoot{
       	background: rgba(0,0,0,.07);
    }
		.tableAxonaut tfoot th{
			text-align : right;
			white-space: nowrap;
		}
		.tableAxonaut tfoot th.text-center{
			text-align : center;
		}
		.tableAxonaut tfoot th.text-left{
			text-align : left;
		}
	.paginationAxonaut {
		/*margin : 0 -30px -30px -30px;*/
		/*margin : 0 0 -30px 0;*/
		width : auto;
	    border-top: 2px solid rgba(0,0,0,.07);
	    padding: 5px;
		margin-top: -1px;
	}
    /*.tableAxonaut .fltrow td{
        padding : 5px !important;
    }
        .tableAxonaut .fltrow input, .tableAxonaut .fltrow select{
            height : 2em;
            border-radius : 5px;
        }*/

    .tableAxonaut tbody tr {
        /*z-index: 50;*/ /*Correct Bug sous firefox*/
        position : relative;
        height : 44px;
    }
		.tableAxonaut table tr { height : unset; } /*for datepicker*/
		.tableAxonaut tbody tr.isVisible {
			display : table-row;
		}
		.tableAxonaut tbody td.tableColMedium { min-width: 200px; }
    .tableAxonaut tbody th {
        position: relative;
    }
        .tableAxonaut tr:hover, .tableAxonaut thead th:hover{
            box-shadow : 1px 5px 25px rgba(0,0,0,0.1);
            /*z-index: 1000;*/ /*Correct Bug sous firefox*/
            opacity : 1 !important;
        }

		.tableAxonaut tbody tr.selected {
			background : rgba(6, 162, 214, 0.12) !important;
		}
        .tableAxonaut tbody tr:hover {
            background : rgba(0,143,196,0.25) !important;
        }
	/*
    .tableAxonaut tbody tr:nth-child(2n){  background: rgba(0,0,0,.03); }
    .tableAxonaut tbody tr:nth-child(2n+1){ background: rgba(255,255,255,.03); }
    */
        .tableAxonaut td{
            position : relative;
            line-height : 2rem !important;
            overflow : visible;
            border-right: 1px dashed rgba(255,255,255,0.5) !important;    
            white-space: inherit;
            padding : 5px;
		}
	.noLineError {
		font-size : 1.2em;
		color : rgba(0,0,0,0.7);
		text-align : center;
		background : rgba(0,0,0,0.05);
    	padding: 20px;
	}
        .sorting.backCenter, .sorting_asc.backCenter, .sorting_desc.backCenter {
            background-position : center center !important;
        }

	/*SPEC table filter pagination*/
		.paginationAxonaut .helpCont {
			display : none;
		}
		.paginationAxonaut .helpBtn {
			display : none;
		}
		.paginationAxonaut select.pgSlc {
			background : transparent;
			height : 2em;
			vertical-align: baseline;
			border : 1px solid rgba(0,0,0,0.2);
			border-radius: 6px;
		}
		.sort-arrow.descending, .sort-arrow.ascending {
			height : 18px;
			width : 18px;
			display: inline-block;
			position: relative;
			margin-top : -3px;
		}
		.sort-arrow.descending {
			background-image: url('../../images/icon/arrow-down.png');
		}
		.sort-arrow.ascending {
			background-image: url('../../images/icon/arrow-up.png');
		}
		th.activeHeader {
			background : transparent !important;
			color: black !important;
		}

	/*SPEC table Ajax*/
	.containerTableScroll.firstLoad {
		display: none;
	}
	.tableAxonautAjax {
		/* position: relative; */
		position: unset !important;
	}
	.tableAxonautAjax.inload tbody {
		opacity : .3;
	}
	.tableAxonautAjax tfoot tr {
		height: 30px;
	}
	.tableAxonautAjax tfoot.inload {
		position: relative;
	}
		.tableAxonautAjax tfoot.inload td {
			filter: blur(1px);
			opacity: .5;
		}
		.tableAxonautAjax tfoot.inload:before {
			content : url("../../images/icon/loaderMini.gif");
			width : 100%;
			left : 0;
			position: absolute;
			z-index: 100;
			text-align: center;
			line-height: 2em;
		}


	.simpleFilter input {
		border: 1px solid #a4bed4;
		border-radius: 8px;
		padding : 5px !important;
	}
	.tableAxonautAjax thead input, .simpleFilter input {
		margin-right : 20px;
	}
	.simpleFilter input {
		width : 350px;
	}

	.tableAxonautAjax thead input:focus, .simpleFilter input:focus { /*heritage de tablfilter a updater*/
		border-color: #66afe9;
		outline: 0 none;
		box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px rgba(102,175,233,0.6);
	}

	.tableAxonautAjax .headerCol th span {
		position: relative;
		display: inline-block;
		padding-right: 20px;
	}
	/* .tableAxonautAjax .headerCol th:hover span{ padding-right: 20px; } */
		.tableAxonautAjax .headerCol th:hover {
			cursor: pointer;
		}
		.tableAxonautAjax .headerCol th span:after {
			content: "";
			display: inline-block;
			position: absolute;
			right: 0; top : calc(50% - 5px);
			height: 10px; width: 10px;
			line-height: 1em;
		}
		.tableAxonautAjax .headerCol th:hover span:after {
			background-image: url('../../images/icon/arrow-up.png');
			filter: grayscale(1);
			opacity: .5;
		}
		.orderCol span { padding-right: 20px; }
		.orderCol span:after { background-image: url('../../images/icon/arrow-down.png') !important; }
		.orderCol[data-order="DESC"] span:after { background-image: url('../../images/icon/arrow-down.png') !important; }
		.orderCol[data-order="ASC"] span:after { background-image: url('../../images/icon/arrow-up.png') !important; }

		.orderCol:hover span:after { filter: unset !important; opacity: unset !important; }

		.tableAxonautAjax .headerCol .col-empty:hover,
		.tableAxonautAjax .headerCol .col-empty:hover span:after {
			background-image: unset !important;
			cursor: unset !important;
			box-shadow: unset !important;
		}
	.zoneSimpleFilterAjax {
		display: block;
		margin-bottom : 10px;
	}
	.zoneSimpleFilterAjax span {
		cursor: pointer;
		text-decoration: underline;
		opacity: .5;
		font-size: .8em;
		display: inline-block;
		color: black;
		margin-right: 10px;
	}

	.tableAxonautAjax thead .trFilter:hover, .tableAxonautAjax thead .trFilter th:hover{
		box-shadow: none;
	}
	.tableAxonautAjax thead .trFilter th{
		position: relative;
	}
	.tableAxonautAjax thead .trFilter{
		height: 40px;
	}
	.tableAxonautAjax thead .trFilter th input,
	.tableAxonautAjax thead .trFilter th select {
		position: absolute;
		top : 5px;
		left : 5px;
		width: calc(100% - 10px);
	}
	.tableAxonautAjaxMultiEdit {
		display : none;
	}
	.tableAxonautAjax .checkAxo label {
		padding-left: 20px;
	}
	.tableAxonautAjax tfoot {
		text-align: right;
	}

	.paginationAxonautAjax {
		line-height: 2em;
		padding: 20px 0;
	}
	.paginationAxonautAjax .btnPagination {
		display: inline-block;
		height: 2em;
		width: 2em;
		cursor: pointer;
		border-radius: 5px;
		text-align: center;
		line-height: 2em;
		margin : 0 5px;
	}
	.paginationAxonautAjax .btnPagination:hover {
		background: rgba(0,0,0,.1);
	}
	.paginationAxonautAjax .inf {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.paginationAxonautAjax.firstPage .firstPage, .paginationAxonautAjax.firstPage .prevPage,
	.paginationAxonautAjax.firstPage .firstPage:hover, .paginationAxonautAjax.firstPage .prevPage:hover,
	.paginationAxonautAjax.lastPage .lastPage, .paginationAxonautAjax.lastPage .nextPage,
	.paginationAxonautAjax.lastPage .lastPage:hover, .paginationAxonautAjax.lastPage .nextPage:hover {
		cursor: unset;
		opacity: .3;
		background: unset;
	}

	.paginationAxonautAjax input.pgInp,
	.paginationAxonautAjax.nextPage, .paginationAxonautAjax.lastPage:hover,
	.paginationAxonautAjax.previousPage, .paginationAxonautAjax.previousPage:hover,
	.paginationAxonautAjax.firstPage, .paginationAxonautAjax.firstPage:hover,
	.paginationAxonautAjax.lastPage,.paginationAxonautAjax.lastPage:hover {
		width: unset !important;
		height: unset !important;
		background: unset !important;
		border: unset !important;
	}

	/*SPEC TABLEAU REPERTOIRE*/
	.tableAxonautAjax.filterByCommercialFalse .col-company_accountManagerUser,
	.tableAxonautAjax.filterByCommercialFalse .cell-company_accountManagerUser,
	.tableAxonautAjax.filterByCommercialFalse .footer-company_accountManagerUser {
		display : none !important;
	}

	.tableAxonautSimple tr:nth-child(2n+1) {
		background: #f7f7f7;
	}
		.tableAxonautSimple td {
			padding : 15px;
			line-height: 1.6em !important
		}
		.tableAxonautSimple .widthMin {
			padding : 15px;
			min-width: 150px;
		}
		.tableAxonautSimple .tag {
			float : left;
			padding : 2px 10px;
			border-radius: 20px;
			margin-right : 10px;
		}
/*
Video
*/
.video-responsive {
	display: block;
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	height:0;
}
.video-responsive iframe {
	left:0;
	top:0;
	height:100% !important;
	min-height:100% !important;
	width:100% !important;
	position:absolute;
	z-index: 1;
	/*ackground: black;*/
}
.video-responsive:after {
	content: "";
	display: block;
	background: black;
	position: absolute;
	z-index: 0;
	top: 2px;
	right : 2px;
	bottom : 2px;
	left : 2px;
}

/*Checkbox Axonaut*/
.checkAxo {
	display : inline-block;
}
	.checkAxo input[type="checkbox"], .checkAxo input[type="radio"] {
		opacity : 0;
		width : 0 !important;
		height : 0 !important;
		margin : 0 !important;
	}
	.checkAxo label{
		display: inline-block;
		margin : 0 auto;
		cursor : pointer;
		position: relative;
		min-height: 1em;
		padding-left: 25px;

	}
	.checkAxo label:before {
		display: inline-block;
		content: " ";
		white-space: pre;
		border: 2px solid rgba(0,0,0,.2);
		border-radius: 5px;
		width: 20px;
		height: 20px;
		line-height: 10px;
		vertical-align: middle;
		text-align: left;
		color: #58bbee;
		font-size: 1.7em;
		background: white;
		position: absolute;
		top: 0;
		left: 0;
	}
		.checkAxo input:checked + label:before {
			box-shadow: 0 3px 10px rgba(0,0,0,.1);
		}
		.checkAxo input:checked + label:after {
			content : url(../../images/icon/check.png);
			position: absolute;
			top : -2px;
			left : 1px;
		}
		.checkAxo input:checked:disabled + label:before {
			color : grey;
			background : rgba(0,0,0,.2);
			cursor : normal;
			opacity : .5;
		}
		.checkAxo input:checked:disabled + label:after {
			filter: grayscale(100%);
		}
		.checkAxo input:focus + label:before  {
			border :2px solid #008FC4;
		}
	/*Radio*/
	.checkAxo input[type="radio"] + label:before {
		border-radius: 20px;
	}
		.checkAxo input[type="radio"]:checked + label:after {
			content : "";
			width : 12px;
			height: 12px;
			background: #008FC4;
			border-radius: 20px;
			position: absolute;
			top : 4px;
			left : 4px;
		}

.toggleAxo {
	display : inline-block;
	vertical-align: top;
	margin-right: 10px;
    /*margin-top: 1px;*/
}
	.toggleAxo input{
		opacity : 0;
		width : 0 !important;
		height : 0 !important;
		margin : 0 !important;
	}
	.toggleAxo label{
		height : 30px;
		background: rgba(0,0,0,.1);
		border-radius: 15px;
		width: 70px !important;
		position: relative;
		transition: all .15s ease-in-out;
		box-shadow: inset 2px 2px 3px rgba(0,0,0,.1);
		cursor : pointer;
		overflow : hidden;
        margin: 0;
        vertical-align: middle;
	}
	.toggleAxo input:checked + label {
		/* background : limegreen; */
		background-color: #65AD11;
		background: linear-gradient(70deg, #65AD11, #7ED916)
	}
	.toggleAxo label:after{
		content : "";
		position: absolute;
		left : 3px;
		top : 4px;
		height : 22px;
		width : 22px;
		background : white;
		border-radius: 100%;
		box-shadow: 0 3px 10px rgba(0,0,0,.1);
		text-indent : 30px;
		transition: all .20s ease-in-out;
		text-align: right;
	}
	.toggleAxo input:checked + label:after{
		left : 43px;
	}
	.toggleAxo label:before{
		content : "non";
		position: absolute;
		left : 20px; right : 3px;
		top : 0px;
		transition: all .20s ease-in-out;
		text-align: center;
		padding : 0 5px;
		line-height: 30px;
		opacity: .8;
	}
	.toggleAxo input:checked + label:before{
		content : "oui";
		left : -15px;
		color : white;
		opacity: 1;
	}

/* --------
Form Layout
 ---------- */
.form-control {
    transition: unset;
}

.layoutVertical .form-control, .layoutColumn .form-control {
	border-radius: 7px;
}
.layoutVertical, .layoutColumn {
	text-align: center;
}
.layoutLeft {
	text-align: left;
}

.formLine, form.layoutVertical .formLine, form.layoutColumn .formLine {
	text-align: left;
	margin-bottom : 15px;
	clear: both;
}
/* Layout Vertical */
.layoutVertical {}
	.layoutVertical label {	}
	.layoutVertical input, .layoutVertical textarea, .layoutVertical .tinyMCELightFactor {	margin-bottom : 20px; }
	.layoutVertical .tinyMCELightFactor { border-radius: 10px;}

/* Layout Column */
.layoutColumn {}

	.layoutColumn .input_10 { width : 10%; max-width: 10%}
	.layoutColumn .input_20 { width : 20%; max-width: 20% }
	.layoutColumn .input_30 { width : 30%; max-width: 30% }
	.layoutColumn .input_40 { width : 40%; max-width: 40% }
	.layoutColumn .input_50 { width : 50%; max-width: 50% }
	.layoutColumn .input_60 { width : 60%; max-width: 60% }
	.layoutColumn .input_70 { width : 70%; max-width: 70% }
	.layoutColumn .input_80 { width : 80%; max-width: 80% }
	.layoutColumn .input_90 { width : 90%; max-width: 90% }
	.layoutColumn .input_100 { width : 100%; max-width: 100% }

	.layoutColumn .formLine > span {
		display: inline-block;
		width : 60%;
	}
	.layoutColumn :not(.checkAxo) label {
		text-align : right;
		width : calc(40% - 20px);
		display : inline-block;
		padding-right : 20px;
		float : left;
		padding-top : 7px;
	}
		.layoutColumn label.labelInline {
			text-align : right;
			width : unset;
			display : inline;
			padding-right : unset;
			float : unset;
			padding-top : 7px;
		}
	.layoutColumn label small{
		font-weight : 400;
	}
	.layoutColumn input, .layoutColumn select{
		width : unset;
		max-width: 70%;
		display : inline-block;
		border-radius: 8px;
		border : 1px solid rgba(0,0,0,.2);
		padding : 7px 10px;
		vertical-align: middle;
		line-height: 1.5em;
		height: unset;
	}
		.layoutColumn .select2-selection__rendered {
			display : inline-block;
			border-radius: 8px;
			border: 1px solid rgba(0,0,0,.2) !important;
			padding : 7px 10px;
			vertical-align: middle;
			height: unset;
			line-height: unset !important;
			background: white;
		}
		.layoutColumn .select2-selection--single {
			height: unset;
			line-height: 1.5em;
			border: unset;
			background: unset;
		}
		.layoutColumn .select2-selection__clear {
			padding : 0 5px;
			float : left !important;
			color: #58bbee;
			font-size: 1.3em;
		}
		.layoutColumn .select2-selection__arrow {
			bottom : 1px;
			height: unset !important;
		}
		.layoutColumn .select2-search__field {
			max-width: 100%;
		}
	.layoutColumn textarea {
		width : 50%;
		min-height: 150px;
		display : inline-block;
		border-radius: 8px;
		border : 1px solid rgba(0,0,0,.2);
		padding : 7px 10px;
		vertical-align: top;
	}
	.zoneBtnToggle {
		display : flex;
		padding-bottom : 20px;
		overflow: auto;
	}
	.btnToggle {
		border : 1px solid transparent;
		color : #0098FF;
		padding: 10px;
		font-size: 1.4rem;
		margin : 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
		position: relative;
		text-align: center;
		flex : 100%;
		border-radius: 10px;
	}

		.btnToggle:hover {
			text-decoration : none;
			background : #0098FF;
			color: white;
		}
		.btnToggle.active {
			background : #0098FF;
			color : white;
		}
		.btnToggle.active:after {
			content: "";
			width: 10px;
			height: 10px;
			transform: rotate(45deg);
			position: absolute;
			background: #0098FF;
			bottom : -5px;
			left : calc( 50% - 5px);
		}
		.btnToggle:not(.active) {
			border : 1px solid #0098FF;
		}
/*------------
- Spec login
------------*/
.passwordView {
	display: block;
	position: relative;
}
	.passwordView input{
		padding-right : 20px;
	}
	.passwordView i {
		position: absolute;
		right : 0;
		top : calc(50% - 17px);
		cursor: pointer;
		opacity: .5;
		padding : 10px;
		color : #007ed4;
	}
	.passwordView i:hover, .passwordView i.active {
		opacity: 1;
	}
/*for edge*/
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear{
	display: none !important;
}
/*
------------------
Light swal
------------------
*/
.lightSwal {
    background: none !important;
    color: white;
}
	.lightSwal > *  {
		color: white !important;
	}
	.lightSwal h2  {
		font-size: 18px !important;
		line-height: 40px !important;
		font-weight: normal;
	}
	.lightSwal h2 i  {
		font-size: 2.5em !important;
	}


/* -----------
Modale panel
-------------- */

@-moz-document url-prefix() { /* verrue - fix pour sous firefox, eviter que le modales bootstraps n'empêchent le focus. */
    body.modalPanelVisible #modalContainerOpportunity {
        display : none
    }
}

    body.modalPanelVisible .sweet-alert:not(.lightSwal) {
		box-shadow: 0 20px 40px rgba(0,0,0,.2);
	}
	body.modalPanelVisible {
		overflow: hidden;
	}
		body.modalPanelVisible #modalContainer,
        body.modalPanelVisible .modalPanelContainer {
			position: fixed;
			z-index: 1040;
			background: rgba(0, 0, 0, 0.5);
			width: 100vw;
			height: 100vh;
		}

		body.modalPanelVisible #modalContainer .modal,
        body.modalPanelVisible .modalPanelContainer .modal {
			opacity: 1;
			position: unset;
			top: unset;
			right: unset;
			bottom: unset;
			left: unset;
			overflow: hidden;
		}
		.backgroundHide {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			cursor : pointer;
		}
	.modalPanel {
		padding: 0 !important;
		width: 100%;
	}
		.modalPanel .modal-dialog  {
			width : 700px;
		}
		.modalPanel .modal-dialog.modal-lg  {
			width : 900px;
		}
        .modalPanel .modal-dialog.modal-sm  {
            width : 500px;
        }
        .modalPanel.modalSpecShowDocument .modal-dialog {
            width : 1200px;
            max-width: 85%;
        }
		.modalPanel button.close{
			width : 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 30px;
			/*margin : 0 20px;*/
			justify-content: center;
			display: flex;
			align-items: center;
			z-index: 10000;
		}
			.modalPanel button.close:hover{
				/*background: rgba(0,0,0,.1);*/
                color: black;
			}
		.modalPanel .modal-dialog {
			margin: auto 0 auto auto;
			transform: unset !important;
		}
            .modalPanel .modal-dialog.modal-position-right {
                margin: auto auto auto 0  ;
            }
			.modalPanel .modal-content {
				border : 0;
				border-radius: 0;
				height: 100vh;
				height : calc( var(--specVH) * 100 ); /*fix ios viewport bug*/
                overflow: auto;
			}
			.modalPanel .modal-body {
				border : 0;
				border-radius: 0;
				height: calc(100vh - 70px);
				height : calc( var(--specVH) * 100 - 70px ); /*fix ios viewport bug*/

				overflow-y: auto;
				padding-bottom: 120px;
			}
			.modalPanel .modal-footer {
				min-height: 70px;
				box-shadow : 0 40px 50px rgba(0,0,0,.8);
				text-align : center;
				/*display: flex;
				align-items: center;
				justify-content: center;*/
				position: absolute;
				width: 100%;
				/*top : calc( var(--specVH) * 100 - 70px );*/ /*fix ios viewport bug*/
				bottom : 0; /* a checker sur mac*/
				background: white;
                z-index : 100;
			}
            .modalPanel .modal-footer > div{
                margin-top : 10px ;
                margin-bottom : 10px ;
            }
			.modalPanel .modal-footer:before {
				content : "";
				position: absolute;
				display: inline-block;
				width: calc(100% - 40px);
				height : 1px;
				top : 0;
				left : 20px;
				background: rgba(0,0,0,.2);
			}

	.modalPanel h2.title-modal{
		font-weight: 700;
	}
		.modalPanel .title-modal-content{
			font-family: Montserrat, 'Open Sans', sans-serif;
			font-size: 2.5rem;
			margin: 40px 0 20px 0;
			font-weight: 700;
            min-height: 80px ;
		}

	.modalPanel .title-modal{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap : 20px;
		padding-bottom: 20px;
	}
		.modalPanel .zoneTitle {
			display: flex;
			gap: 20px;
			align-items: center;
            position: relative;
		}
		.modalPanel .zoneTitle h3{
			font-weight: 700;
		}
		.modalPanel .actionTitle {
			display: block;
			font-size : .7em;
			line-height: 1.5em;
			opacity: .8;
			font-weight: 400;
		}
		.modalPanel .title-modal h3{
			margin-top : 0;
			margin-bottom : 0;
			font-size: 2.5rem;
		}
		.modalPanel .title-modal button.close{
			position: relative;
			margin: 0;
			font-size: 40px;
			font-weight: 200;
			line-height: 40px;
			top : unset;
			left : unset;
			right: unset;
			bottom : unset;
			display: flex;
			align-items: center;
		}
		.modalPanel .title-modal button.close:hover{
			background: unset;
			color : black;
		}

        .introBlue {
            background : #C2E6F8;
            padding : 40px 50px;
            display : flex;
            justify-content: center;
            gap : 60px;
            margin : -30px -60px 50px -60px
        }

            .introBlue hr {
                color : transparent;
                border-bottom: 1px dashed lightgrey;
            }
            .introBlue .blockIntro {
                background : white;
                border-radius: 10px;
                box-shadow: 0 5px 20px rgba(0,0,0,.1);
                padding : 10px;
                min-height: 50px;
                flex: auto;
                flex-grow: 1;
                max-width: 30%;
                display: flex;
                align-items: center;
            }
            .introBlue .blockIntro > div {
                width: 100%;
            }


/* responsive modale panel*/
	@media only screen and (max-width: 767px) {

		.modalPanel  {
			width: 90%;
			margin-left : 10%;
		}
        .modalPanel .modal-footer {
            justify-content : left;
            height: unset;
            top: unset;
            bottom: 0;
        }
        .modal-footer > * {
            margin-bottom: 15px !important;
        }
		.modalPanel .modal-dialog,
		.modalPanel .modal-dialog.modal-lg,
        .modalPanel .modal-dialog.modal-sm  {
            width : unset !important;
        }

		.modalPanel .title-modal{
			flex-direction: column;
			gap: unset;
		}
        .modalPanel .title-modal button.close{
            display: none;
            /*position: fixed;
            top: 25px;
            left: 5px;
            opacity: 1;
            font-size: 30px;
            color: white;*/
        }
        .backgroundHide:before{
            content: "X";
            content: url('../../../svg/icon-close.svg');
            font-size : 15px;
            color : white;
            position: fixed;
            top: 25px;
            left: 5px;
            display: block;
            width: 25px;
            height: 25px;
        }

        .introBlue {
            flex-direction: column;
            margin : -30px -30px 50px -30px
        }
            .introBlue .blockIntro {
                max-width: unset;
            }

	}
/* -----------
Fin Modale panel
-------------- */



/*-----------
Overmodale
-----------*/

.overModale {
    display : none;
    position: fixed;
    z-index: 10000;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    background: rgba(0,0,0,.2);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}
    .overModale.active {
        display: flex !important;
    }
    .overModaleBack {
        position: absolute;
        z-index: -1;
        top : 0;
        left : 0;
        right : 0;
        bottom : 0;
        cursor: pointer;
    }
    .overModalePage {
        background : white;
        border-radius : 10px;
        box-shadow : 0 5px 10px rgba(0,0,0,.1);
        max-height : 90vh;
        width : 600px;
        max-width : 90%;
        padding : 20px;
        display: flex;
        flex-direction: column;
    }
    .overModaleHeader{
        /*min-height: 50px;*/
        position: relative;
        width: 100%;
    }
    .overModaleHeader .closeBtn{
        position: absolute;
        right : 0;
        top : 0;
        font-size: 2em;
        cursor: pointer;
    }
    .overModaleContent {
        overflow: auto;
        padding-bottom : 20px;
    }
        .overModaleContent.columnSimple {
            display: flex;
            justify-content: center;
            gap: 30px;
        }

    .overModaleFooter {
        padding-top: 10px;
        border-top: 1px solid lightgrey;
        text-align: center;
    }

    /*---------------- GED - File attachement -------------*/
    .overModaleGED .overModalePage {
        width: 1200px;
        max-width: 90vw;
    }
        .overModaleGED .overModaleHeader h3 {
            border-bottom : 1px dashed lightgrey;
            display: flex;
            align-items: center;
            justify-content: center;
            gap : 20px;
            font-size: 2em;
            padding-bottom: 20px;
        }
        .overModaleGED .overModaleContent {
            columns : 2;
            column-gap: 60px;
            margin : 20px;
            position: relative;
        }
        .overModaleGED .overModaleContent:after {
            content : "";
            display: block;
            position: absolute;
            width: 1px;
            height: 100%;
            left : 50%;
            top : 0;
            bottom: 0;
            border : 1px dashed lightgrey;
        }
        .blocAttached {
            break-inside: avoid-column;
            display: block;
        }
        .blocAttached h3{
            margin : 0;
            padding : 20px 0 10px 0;
        }
        .blocAttached > label {
            display: block;
            padding : 5px;
        }
        .blocAttached > label:hover {
            background: rgba(0,0,0,.1);
            border-radius: 5px;
            cursor: pointer;
        }
        .showPreview {
            display: none;
        }
        .blocAttached > label:hover .showPreview {
            display: inline-block;
        }

        .previewFile {
            display: flex;
            align-items: flex-start;
            gap : 10px 20px;
            flex-wrap : wrap;
        }
        .previewFile .tag {
            line-height: 1.4rem;
            font-size: 1.4rem;
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            border-radius: 20px;
            padding: 10px 10px;
            width: 30%;
            vertical-align: middle;
            position: relative;
            z-index: 2;
            background: #edfbff;
            border: 1px dashed #2196f3;
            justify-content: space-between;
        }
        .previewFile .tag a {
            padding : 0 10px;
            position: relative;
            display: inline-block;
        }
        .previewFile .tag:hover {
            cursor : pointer
        }


    /* Hour picker */
    .hourPicker {
        position: relative;
    }
        .hourPickerValue {
            position: absolute;
            top : 100%;
            display: none;
            height: 150px;
            overflow-y: auto;
            background: white;
            padding : 5px 10px;
            border : 1px solid lightGrey;
        }
        .hourPickerValue > span {
            display : block;
            padding : 5px 10px;
        }
        .hourPickerValue > span:hover {
            background-color: lightblue;
            cursor: pointer;
        }


@media only screen and (max-width: 767px) {

    .overModaleGED .overModaleContent {
        columns : 1;
        column-gap: 0px;
        margin: 0;
    }
        .overModaleGED .overModaleContent:after{
            content: unset;
        }
        .overModaleGED .blocAttached > label{
            display: flex;
            justify-content: space-between;
        }
            .overModaleGED .blocAttached > label > span{
                display: flex;
            }

    .overModaleHeader {
        padding-right : 40px;
        flex: none;
    }
    .previewFile {
        display: block;
    }
    .previewFile .btn {
        width : 100%;
    }
    .previewFile .tag {
        width: 100%;
        margin-top : 10px;
    }
    .showPreview {
        display: block;
        margin-left : 10px;
    }

}

/* -----------
Fin Overmodale
-------------- */



@media only screen and (max-width: 767px) {

/*
------------------
responsive TableAxonaut
------------------
------------------*/
	/*---------tableAxonaut---------*/
	.containerTableResponsive {
		overflow-x : unset;
	}
		.scrollTableLeft, .scrollTableRight, .zoneBtnFilter {
			display : none !important;
		}

	.tableAxonaut { 
		display : block;
		margin : 0;
		width : 100%;
		font-size : 14px;
		clear : both;

		overflow-x : unset;
	} 
	
	.tableAxonaut thead{ 
		display : none; 
	    background: white; 
	    box-shadow : 0 0 20px rgba(0,0,0,0.1); 
	    position: fixed; 
	    z-index : 10000;
	    /*bottom: 55px; */
		bottom : 0;
	    left: 0; 
	    width : 100%;
	}


		.tableAxonaut thead tr{
			display : inline-block;
			text-align : center;
			overflow-x: auto;
			white-space: nowrap;
		}
			.tableAxonaut thead tr:nth-child(2):before {
				content : "Trier par :";
				display: inline-block;
				width: 25%;
			}
			.tableAxonaut thead th{
				display : inline-block;
			    text-align : center;
				vertical-align: middle;
				background : rgba(0,0,0,.1) !important;
				border-radius : 10px;
				padding: .1em .7em !important;
				line-height : 30px !important;
				margin : 0 5px 10px 5px !important;
				width : auto;
				min-width : 30%;
			}
			.filterEmpty {display : none !important;}
			.btnfilterSimple, .btnfilterAdvance {display : none !important;}

			.tableAxonaut .menuButtons {
				overflow : unset;
			}
			.tableAxonaut .menuButtons button, .tableAxonaut .menuButtons a.btn {
				font-size : 1em;
				padding : 5px 10px; margin : 0 10px;
			}


	.tableAxonaut tr{
			width : 100%; 
		}
		.tab-pane > .btn-action {
			display: block;
			margin: 30px 20px;
			float: none;
			padding: 10px;
			border-radius: 10px;
			font-size: 1em;
		}
	 
	.tableAxonaut tbody, .tableAxonaut.footerVisible tfoot   {
		display : block;
	}	 
		.tableAxonaut tbody tr, .tableAxonaut.footerVisible tfoot tr{
			/*display : block;*/
			display : grid;
			width : 100%;
			background : white !important; 
			border: 1px solid rgba(0,0,0,0.05);
			height : auto; 
		    border-radius: .5em; 
		    padding: 10px 0; 
		    margin: 30px 0;
			/*box-shadow: 0px 5px 15px rgba(0,0,0,0.05);*/
			box-shadow:0px 15px 35px -20px rgba(0,0,0,0.25);
		}
			.tableAxonaut tbody tr.formHidenOptions  {
				display : none;
			}
			.tableAxonaut tbody tr.isVisible  {
				display : block;
			}
			.tableAxonaut tbody tr:hover { background : white !important; }
			.tableAxonaut tbody tr.selected:hover { background : rgba(0,143,196,0.25) !important}
			
			.tableAxonaut tbody td, .tableAxonaut.footerVisible tfoot td {
				padding : 2px ;
				display : block;
				/*width : 70%; 
				max-width : 100%; 
				margin-left : 30% !important; */
				width : 100%; 
				max-width : 100%; 
				padding-left : 120px !important;
				text-align : left; 
				min-height : 30px;
				/* overflow: hidden; */
	    		overflow-wrap: break-word;
				word-break: break-all;

			}
				.tableAxonaut tbody td:before, .tableAxonaut.footerVisible tfoot td:before {
					content: attr(data-title);
					display: block;
					/*width: 50%; 
					margin-left : -55%; */
					width : 120px;
					margin-left : -130px;
					float : left;
					text-align : right; 
					color : rgba(0,0,0,0.5); 
					font-size : 12px;
					
					border-right: 1px dashed rgba(0,0,0,0.2);
				    padding-right: 10px;
				    position: absolute;
				}

				.tableAxonaut tbody td.mainMobile {
					/*grid-column: 1 / 2;*/
					grid-row: 1;
					font-size: 1.2em;
					line-height: 1.4em !important;
					width: calc(100% - 20px);
					margin: 0px 10px 20px 10px;
					left: 0;
					padding: 10px !important;
					background: whitesmoke;
					border-radius: 10px;
					text-align: center;
				}

					.tableAxonaut tbody td.mainMobile:before {
						display: none;
					}
					.tableAxonaut tbody td.mainMobile a {
						border-radius: 10px;
						text-decoration: none;

					}
						.tableAxonaut tbody td.mainMobile .iconsAction {
							display: inline-block;
							margin-top : 10px;
							padding-top : 10px;
							border-top : 1px dashed rgba(0,0,0,.1);
						}
						.tableAxonaut tbody td.mainMobile .iconsAction > *{
							font-size: 1.2em;
							margin: 5px 15px;
						}
					.tableAxonaut tbody td.checkForMultiSelect {
						position: absolute !important;
						top : 20px;
						left : 20px;
						z-index: 10;
						padding-left: 0 !important;
						width: unset;
					}
			
	.tableAxonaut:not(".footerVisible") tfoot  {
		display : none !important;
	}
	.tdActionButton {
		float : none;
	}



	/*---------tableAxonaut filtre---------*/	
	.btn-tableAxonaut > *{
		margin : 10px 0;
	}
	.tableAxonaut .fltrow, .tableAxonaut .fltrow tr, .tableAxonaut .fltrow td{
		display : block;
		width : 100%;
		height : auto !important;
	} 
		.tableAxonaut .fltrow input{ 
			display : block;
			position : relative;
			margin : 10px auto;
			width : 80%;
			max-width : 80%;
			top : 0;
			left : 0;
			height : 2em
		}
		.btn-tableAxonaut {
			width : 100%;
			max-width : 100%;
			text-align : center;
    		margin-bottom: 1em;
		}
			.btn-tableAxonaut > *{
				display : inline-block;
				float : none !important
			}
	/*---------tableAxonaut Pagination---------*/
	.paginationAxonaut .inf {height : auto;} 
	.paginationAxonaut .mdiv { 
		width : 100% !important; 
		padding : 5px 0; 
		text-align : right;
	} 
	 
	.paginationAxonaut, .containerTableScroll .paginationAxonaut {
	    background: white !important;
	    box-shadow : 0 0 10px rgba(0,0,0,0.2);
	    position: fixed; 
	    bottom: 0; 
	    left: 0; 
	    z-index: 900;
	    width: 100% !important;
		border-bottom : 0;
	    font-size : 1.2em;
		margin : 0 !important;
		padding : 0 !important;
		text-align : right;
		border : unset;
	}
		/*a améliorer*/
		.paginationAxonautAjax input.pgInp,
		.paginationAxonautAjax.nextPage, .paginationAxonautAjax.lastPage:hover,
		.paginationAxonautAjax.previousPage, .paginationAxonautAjax.previousPage:hover,
		.paginationAxonautAjax.firstPage, .paginationAxonautAjax.firstPage:hover,
		.paginationAxonautAjax.lastPage,.paginationAxonautAjax.lastPage:hover {
			width: 100% !important;
			height: unset !important;
			background: white !important;
			border: unset !important;
		}

	.paginationAxonaut .responsiveFilter.glyphicon-chevron-down {
		bottom: 110px;
		top: auto;
		position: absolute;
		left: 10px;
		background : white;
		border-radius : 10px 10px 0 0;
		box-shadow : 0 0 20px rgba(0,0,0,0.1);
		padding : 5px;
		height: 40px;
		width: 50px;
		line-height: 40px;
	}
	.paginationAxonaut .rdiv, 
	.paginationAxonaut .ldiv,
	.paginationAxonaut .firstPage, 
	.paginationAxonaut .lastPage	{ 
	    display : none; 
	}
	.tableAxonaut tr:hover, .tableAxonaut thead th:hover {
		box-shadow: none;
	}
	.responsiveFilter {
	    height: 35px;
	    width : 35px;
	    line-height : 35px;
	    display : inline-block;
	    position : absolute;
	    top : 10px;
	    left : 10px;
	    text-align : center; 
	    z-index : 10000;
	}
	.responsiveMore {
		position : absolute;
		top : 0px;
		right : 0px;
		width : 35px;
		height : 35px;
		border-radius : 0 5px 0 20px;
		background : rgba(0,0,0,0.1);
		text-align : center;
		line-height : 35px;
		z-index : 1000;
	}
	.tableAxonaut:not(.filterAdvance) thead input {

		width: 80%;
		margin: 20px auto 10px auto;
		padding: 4px 10px;

	}

	.tableAxonaut thead tr {
		background : white;
	}

	.tableAxonaut tbody td.lineAction {
		width : 100%;
		margin : 0 !important;
		padding-right: 5px !important;
		border-top : 1px solid rgba(0,0,0,0.2);
		background : rgba(0,0,0,0.01);
		box-shadow : inset 0 3px 4px rgba(0,0,0,0.1);
		margin-bottom : -10px;
		margin-top : 5px;
		border-radius : 0 0 5px 5px;
		padding : 0;
		
	}
		.tableAxonaut tbody td.lineAction  {
			display : none;
		}
		.tableAxonaut tbody td.lineAction > span  {
			display : block;
			padding : 10px;
		}
		.tableAxonaut tbody td.lineAction.active {
			display : block;
			z-index: 1;
			padding: 10px !important;
			margin-bottom: -10px !important;
		}
		.tableAxonaut tbody td.lineAction:before {
			display : none;
			/*
			display : block;
			width : 100%;
			margin-left : 0 !important;
			text-align : center;
			padding : 10px;
			content :"...";
			font-size : 20px;
			line-height : 1em;
			float : none;
			padding : 0;
		    top: -5px;
		    position: relative;
			*/
		}
		.tableAxonaut tbody td.lineAction button{
			margin : 5px;
		}
		.tableAxonaut .dropdown-menu {
			right: unset;
			left: -70px;
			width: 270px;
		}
		.tableAxonaut .dropdown-menu > li > a {
			white-space: normal;
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.tableAxonaut tfoot{
			display : none !important;
		}
		.optionsLight {
			position : relative;
		}
			.optionsLight > .glyphicon{
				display : none;
			}
		.hideOptionsLight {
			display : block;
			position : relative;
			right : 0; top : 0;
			box-shadow : none;
			background : transparent;
			margin : 0;
			padding : 0;
		}
			.hideOptionsLight li{
				display : block;
			}


	.tableAxonaut .tableAction {
		padding : 10px 20px !important;
		text-align: center;
	}

	.tableAction .btn {
		font-size: 1.2em !important;
		height: 2.2em !important;
		width: 2.2em !important;
		line-height: 2.2em !important;
		border-radius: 10px;
		margin : 10px;
	}

	.tableAxonautAjax thead {
		padding-top: 65px;
	}
	.paginationAxonautAjax  .responsiveFilter {
		position: relative ;
		top: unset ;
		left: unset ;
		margin-left : 20px;
	}
	.zoneSimpleFilter  {
		display: none;
		position: fixed;
		z-index: 10001;
		bottom : 40px;
		left : 0;
		width: 100%;
		height: 50px;
		margin : 0;

	}
	.zoneSimpleFilter .simpleFilter{
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
	.zoneSimpleFilter .simpleFilter input {
		width: 90%;
		margin: 0;
	}
	.zoneSimpleFilter .advanceFilter{
		display: none !important;
	}
	.zoneSimpleFilter .simpleFilter span{
		display: none !important;
	}
	.tableAxonautAjax .headerCol:before {
		content : "Trier par :";
		display: inline-block;
		width: 25%;
	}

	.zoneValid > div, .zoneValidFixe{
		/*z-index: 20000;*/
		z-index: 998;
	}
	.containerTableResponsive.multiSelectOn .paginationAxonautAjax,
	.containerTableResponsive.multiSelectOn .zoneSimpleFilter {
		display: none;
	}



	/*
    ------------------
    responsive .layoutColumn
    ------------------
    ------------------*/
	.layoutColumn label {
		width: 100%;
		float: none;
		text-align: left;
	}
	.layoutColumn .formLine > span {
		width: 100% !important;
		max-width: 100% !important;
	}
	.layoutColumn input, .layoutColumn textarea {
		width: 100% !important;
		max-width: 100% !important;
	}

}


/* --- fix calendly --- */
.calendly-popup-content {
	position:relative !important;
	min-width:320px !important;
	height:750px !important;
}

@media only screen and (orientation: landscape) and (max-width: 767px) {
	
	.tableAxonaut tbody tr { 
		display : inline-block; 
		width : 46%;
	    margin: 20px 2%;
	}
}

/*-----------------------------------------------------------------------
 Floating Label
-----------------------------------------------------------------------*/

.ultraCompactWidth {
    padding: 7% 22% 0;
}
.compactWidth {
    width: 400px;
    margin: auto;
}

.layoutFloatLabel .form-control:not(.formHidenOptions),
.layoutFloatLabel input:not([type='checkbox']):not(.formHidenOptions),
.layoutFloatLabel select:not(.formHidenOptions),
.layoutFloatLabel textarea:not(.formHidenOptions) {
	display: inline-block;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,.2);
	vertical-align: middle;
	line-height: 2rem;
	font-size: 1.4rem;
	padding : 10px 15px;
	height: unset;
	width: 100%;
	margin : 0;
}
	.layoutFloatLabel.layoutFloatLabelOnBackColored .form-control:not(.formHidenOptions),
	.layoutFloatLabel.layoutFloatLabelOnBackColored input:not([type='checkbox']):not(.formHidenOptions),
	.layoutFloatLabel.layoutFloatLabelOnBackColored select:not(.formHidenOptions),
	.layoutFloatLabel.layoutFloatLabelOnBackColored textarea:not(.formHidenOptions) {
		padding-top : 22px;
		padding-bottom: 7px;
	}
    .layoutFloatLabel .form-control[disabled],
    .layoutFloatLabel input[disabled],
    .layoutFloatLabel select[disabled],
    .layoutFloatLabel textarea[disabled] {
        background: #efefef;
        color : grey;
    }
.layoutFloatLabel textarea {
	min-height: 70px !important;
}
.layoutFloatLabel .btn-group {
	width : 100%;
}
.layoutFloatLabel .dropdown-toggle.btn-default {
	background: transparent !important;

}
.layoutFloatLabel .multiselect-container {
	width: calc(100% - 40px);
	margin: 0 20px;
	padding: 10px 5px;
    border-radius: 8px;
}
.layoutFloatLabel .multiselect-container>li>a {
    padding: 0 0 0 5px;
}
.layoutFloatLabel .multiselect-container>li>a>label.radio, .layoutFloatLabel .multiselect-container>li>a>label.checkbox {
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}
.layoutFloatLabel .form-control.inline {
	width: unset;
}.layoutFloatLabel input[type='color'] {
     padding: 0 !important;
     width: 42px !important;
     height: 42px !important;
     border: 1px solid rgba(0,0,0,.2) !important;
     background: transparent !important;
     border-radius: 8px !important;

     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     overflow: hidden;
 }
    ::-webkit-color-swatch-wrapper {
        padding: 0;
    }
    ::-webkit-color-swatch{
        border: 0;
        border-radius: 0;
    }
    ::-moz-color-swatch,
    ::-moz-focus-inner{
        border: 0;
    }
    ::-moz-focus-inner{
        padding: 0;
    }


.layoutFloatLabel .tinyMCELightFactor {
	/*margin-right : 20px;*/
	border: 1px solid rgba(0,0,0,.2) !important;
	border-radius: 10px;
}

.layoutFloatLabel .checkAxo {
}
.layoutFloatLabel .checkAxo input:checked + label:after {
	display: none;
}
.layoutFloatLabel .checkAxo label {
	margin-right : 10px;
	vertical-align: super;
}
.layoutFloatLabel .checkAxo label:before {
	content : "";
	width: 25px;
	height: 25px;
	line-height: 15px;
	font-size: 30px;
	font-weight: bold;
	border-radius: 7px;
}
.layoutFloatLabel .checkAxo input:checked + label:before {
	content : url(../../images/icon/check.png);
	font-family: Montserrat, 'Open Sans', sans-serif;
}
.checkboxLine {
	align-items: center;
}
.checkboxLine > span{
	display: flex;
	align-items: center;
}
.labelInline { margin : 0 20px 0 0; }


.layoutFloatLabel .formLine {
	display: flex;
	padding-top: 15px;
	align-items: center;
	gap : 20px;
}
.layoutFloatLabel .formLine.formLineBetween {
    justify-content: space-between;
}
.layoutFloatLabel .formLine.formLineColumn {
	align-items: normal;
}
.layoutFloatLabel .formLine > * {
	flex: 100%;
	/*margin-right: 20px;*/
}
.layoutFloatLabel .formLine.formLineNoSize > * {
    flex: unset;
}
.layoutFloatLabel .formLine .formLineNoFlex {
    flex: unset;
}

.layoutFloatLabel .formLine [data-toggle="popover"] {
	flex: unset;
	line-height: 46px;
}
.layoutFloatLabel .formLineShort {
    margin-top: 15px;
    padding-top: 0;
}
.formLineColumn {
	flex-direction: column;
}
.flexLine {
    display: flex;
    align-items: center;
    gap: 20px;
}

.layoutFloatLabel .input_nowidth { flex : unset; }
.layoutFloatLabel .input_10  { flex : 10%;  width: 10%;  }
.layoutFloatLabel .input_20  { flex : 20%;  width: 20%;  }
.layoutFloatLabel .input_30  { flex : 30%;  width: 30%;  }
.layoutFloatLabel .input_40  { flex : 40%;  width: 40%;  }
.layoutFloatLabel .input_50  { flex : 50%;  width: 50%;  }
.layoutFloatLabel .input_60  { flex : 60%;  width: 60%;  }
.layoutFloatLabel .input_70  { flex : 70%;  width: 70%;  }
.layoutFloatLabel .input_80  { flex : 80%;  width: 80%;  }
.layoutFloatLabel .input_90  { flex : 90%;  width: 90%;  }
.layoutFloatLabel .input_100 { flex : 100%; width: 100; }

.layoutFloatLabel .inputAmountFlex {
	display: flex;
	align-items: center;
}
	.inputAmountFlex input {
		border-radius: 8px 0 0 8px !important;
		border-right : 1px dashed rgba(0,0,0,.1) !important;
		text-align: right;
	}
	.inputAmountCurrency {
		border: 1px	solid rgba(0,0,0,.2);
		border-left: 0px;
		border-radius: 0 8px 8px 0;
		white-space: nowrap;
		padding: 10px 10px;
	}

.form-floating label .tag {
	border-style: dashed;
}
.form-floating .select2 {
	width: 100% !important;
}
.form-floating .select2-container--default .select2-selection--single, .form-floating .multiselect {
	width: 100% !important;
	padding : 10px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,.2);
    /*line-height: 2rem;
    height: 5rem !important;*/
    line-height: unset;
    height: unset !important;
}

.form-floating .select2-container--default .select2-selection--single .select2-selection__arrow {
	top : 10px;
    line-height: 1em;
    font-size : 20px;
}
.form-floating .select2-container--default .select2-selection--single .select2-selection__clear {
	float: left;
	margin-right: 10px;
    line-height: 1em;
    font-size : 20px;
}
.form-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: unset;
}



.layoutFloatLabel .alert {
	background: rgba(255, 255, 255, 0.2);
	border: 1px dashed grey;
	border-radius: 5px;
	margin : 10px 0;
	display: flex;
    /*justify-content: flex-start;*/
    justify-content: space-between;
	padding : 0;
}
.layoutFloatLabel .alert-warning {
	background: #FFF6DB;
	border-color : #ffd04b;
}
.layoutFloatLabel .alert-danger {
	background: #FBE4EC;
	border-color : #F30061;
}
.layoutFloatLabel .alert-info {
	background: #D4E8FC;
	border-color : #0080FF;
}
.layoutFloatLabel .alert > * {
	padding : 0 10px;
}
.layoutFloatLabel .icon-alert {
	font-size: 1.7em;
	padding: 5px 10px;
	flex : 30px;
	width: 50px;
	max-width: 50px;
	color : white;
	background: grey;
	text-align: center;
}
.layoutFloatLabel .alert-warning .icon-alert{ background: #ffd04b; }
.layoutFloatLabel .alert-danger .icon-alert{ background: #F30061; }
.layoutFloatLabel .alert-info .icon-alert{ background: #0080FF; }
.layoutFloatLabel .message-alert {
	padding: 10px;
    flex : 2;
}
.layoutFloatLabel .action-alert {
	padding: 10px;
	text-align: center;
	font-size : 1.5em;
	white-space: nowrap;
}
.layoutFloatLabel .action-alert a {
	display: inline-block;
	height: 30px;
	width: 30px;
	text-align: center;
	border-radius: 15px;
}
.layoutFloatLabel .action-alert a.actionValid {
	color : #75C35E;
}
.layoutFloatLabel .action-alert a.actionValid:hover  {
	background: rgba(117, 195, 94, 0.21);
}
.layoutFloatLabel .action-alert a.actionCancel {
	color : #c32a3a;
}
.layoutFloatLabel .action-alert a.actionCancel:hover {
	background: rgba(195, 42, 58, 0.2);
}
.layoutFloatLabel .alert-warning a.actionCancel {
	color : #af890a;
}
.layoutFloatLabel .alert-warning a.actionCancel:hover {
	background: rgba(255, 245, 102, 0.2);
}

.message-alert .previewAddress {
	display: block;
	font-weight: bold;
	font-style: italic;
}

.autocompleteOption {
	position: absolute;
	top : calc(100% - 1px);
	background: rgb(248, 248, 248);
	width: calc(100% - 20px);
	padding : 10px;
	border : 1px solid rgba(0,0,0,.2);
	border-top : unset;
	border-radius: 0 0 10px 10px;
	z-index: 1000;
	margin : 0 10px ;
	box-shadow: 0 12px 10px -5px rgba(0, 0, 0, .1);
}
.autocompleteOption span{
	display : block;
	cursor : pointer;
	padding : 5px;
	text-transform: capitalize;
}
.autocompleteOption span:hover{
	background: #0098ff;
	color : white;
}


/* from boostrap */
.form-floating {
	position: relative;
	display: inline-block;
}
.form-floating > label {
	position: absolute;
	z-index: 100 !important;
	color : grey;
	transition: all .3s ease 0s;
	left: 0;
	top : 0;
	line-height: 2.2rem;
	font-size: 1.4rem;
	padding : 10px 5px;
	margin-left : 10px;
	opacity: .6;
	cursor: text;
	display: flex;
	align-items: center;
	font-weight: 400;
}
.layoutFloatLabelOnBackColored .form-floating > label {
	margin-bottom: 0;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.form-floating > label {
		transition: none;
	}
}

	.form-floating > .form-control::-moz-placeholder {
		color: transparent;
	}
	.form-floating > .form-control::placeholder {
		color: transparent;
	}

	.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
		background: white;
		top : -15px;
		font-size: 1.4rem;
		opacity: 1;
		height: 2px;
		color: rgba(0, 0, 0, 0.3);
	}
	.form-floating > .form-control:focus ~ label,
	.form-floating > .form-control:not(:placeholder-shown) ~ label,
	.form-floating > .form-select ~ label,
	.form-floating label.activeLabel  {
		background: white;
		top : -10px;
		font-size: 1.4rem;
		opacity: 1;
		height: 2px;
		color: rgba(0, 0, 0, 0.3);
	}
		.layoutFloatLabelOnBackColored .form-floating > .form-control:focus ~ label,
		.layoutFloatLabelOnBackColored .form-floating > .form-control:not(:placeholder-shown) ~ label,
		.layoutFloatLabelOnBackColored .form-floating > .form-select ~ label,
		.layoutFloatLabelOnBackColored .form-floating label.activeLabel  {
			top : 4px;
		}
	.form-floating > .form-control:-webkit-autofill ~ label {
		background: white;
		top : -15px;
		font-size: 1.4rem;
		opacity: 1;
		height: 2px;
		color: rgba(0, 0, 0, 0.3);
	}
	.form-floating > .form-control:focus ~ label {
		color: #0b96de;
	}
	.form-floating > .form-control:focus {
		border : 1px solid #0b96de;
	}


	textarea.autoResize {
		overflow: hidden;
	}
	.form-floating .inputInfoMore {
		font-size: .8em;
		opacity: .7;
		padding-left: 10px;
		display: block;
		text-align: right;
	}

.layoutFloatLabel .tagit {
    display: inline-block;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.2);
    vertical-align: middle;
    line-height: 2rem;
    font-size: 1.4rem;
    padding: 5px 5px;
    height: unset;
    width: 100%;
    margin: 0;
}
    .layoutFloatLabel .tagit input {
        border: none !important;
        padding: 0 !important;
    }
    .layoutFloatLabel .tagit-choice {
        border-radius: 20px !important;
        padding: 5px 20px 5px 15px !important;
    }

@media only screen and (max-width: 767px) {
    .ultraCompactWidth {
        padding: 7% 0 0;
    }
    .compactWidth {
        width: unset;
        margin: auto;
    }
	.layoutFloatLabel .formLine {
		gap : 30px;
	}
}

/*-----------------------------------------------------------------------
 End Floating Label
-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 Skeleton
-----------------------------------------------------------------------*/

.fakeData span {
	background : rgba(0,0,0,.03);
	animation: gradientBG 1s ease infinite;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius : 3px;
	margin : 0 0 10px 0;
}

.fakeData span:after {
	content: '';
	position: absolute;
	top: -125%;
	left: -100%;
	width: 80px;
	height: 350%;
	opacity: 0;
	/*transform: rotate(5deg);*/
	background: rgba(0,0,0,.05);
	background: linear-gradient(to right, rgba(0,0,0,.0) 0%, rgba(0,0,0,.04) 100%);
	animation: shine;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}



@keyframes shine {
	from {
		opacity: 0.5;
		left: -100px;
	}
	to {
		opacity: 1;
		left: 1000px;
	}
}
.fakeData .image {
	width : 100px;
	height: 100px;
	display : block;
}
.fakeData span {
	width : 100%;
	height: 1.4em;
}
.fakeData .colorWhite:after{
	background: white;
	background: linear-gradient(to right, rgba(0,0,0,.0) 0%, rgba(0,0,0,.02) 100%);
}
.fakeData .colorlight:after{
	background: rgba(0,0,0,.02);
	background: linear-gradient(to right, rgba(0,0,0,.0) 0%, rgba(0,0,0,.02) 100%);
}
.fakeData table span{
	margin : 10px;
	vertical-align: middle;
}
.fakeData table > thead > tr > th {
	padding : 5px;
}
.fakeData .size10 { width : 10% }
.fakeData .size20 { width : 20% }
.fakeData .size30 { width : 30% }
.fakeData .size40 { width : 40% }
.fakeData .size50 { width : 50% }
.fakeData .size60 { width : 60% }
.fakeData .size70 { width : 70% }
.fakeData .size80 { width : 80% }
.fakeData .size90 { width : 90% }
.fakeData .line2 { height : 2.8em; }

.noWrap {
	white-space : nowrap !important;
}
.tableLight