/** ************* **/
/**    GLOBALS    **/
/** ************* **/

@font-face {
    font-family				: "Gotham Rounded Medium";
  	src						: url("../font/Gotham Rounded Medium.woff") format("woff");
}

html { 
	font-family				: "Gotham Rounded Medium";
}
	
body { 
	margin					: 0;
	font-family				: "Gotham Rounded Medium";
	font-size				: 12px;
}

input:-webkit-autofill {
   -webkit-box-shadow		: 0 0 0px 1000px #fff inset;
   -webkit-text-fill-color	: #2176AE !important;
}

.button {
	font-family				: "Gotham Rounded Medium" !important;
}

a  {
	text-decoration			: none;
	border					: none;
	color					: inherit;
	cursor					: pointer;
}

input[type=radio] {
    accent-color			: #2176AE;
    width					: 20px;
    height					: 26px;
}

.coreBlockItem-typeRadio {
	float			 		: left;
	margin-right			: 10px;
}

.coreBlockItem-typeRadio-label {
	display 				: inline-block;
	height					: 32px;
	line-height				: 36px;
	color					: #2176AE;
}

.hasDatepicker {
	cursor 					: pointer;
	background-image		: url("../img/icon/calendar_blue.png");
	background-position		: center right;
	background-repeat		: no-repeat;
	background-size			: 32px;
}

.unselectable {
	-webkit-touch-callout	: none;
    -webkit-user-select		: none;
    -khtml-user-select		: none;
    -moz-user-select		: none;
    -ms-user-select			: none;
    user-select				: none;
}

#dialogOverlay {
	z-index					: 100;
	position				: fixed;
	display					: none;
	width					: 100%;
	height					: 100%;
	background				: url("../../public/img/layout/grey_transparent_120.png") 0px 0px repeat;
}

.scrollTable .coreBlockFormDatagrid-result { 
	overflow-y				: auto; 
	height					: 220px;
}

.scrollTableLong .coreBlockFormDatagrid-result { 
	overflow-y				: auto; 
	height					: 400px;
}

.float input, .float {
	text-align				: right !important;	
}

.version {
	position 				: fixed;
	bottom					: 10px;
	right					: 10px;
	color					: #2176AE;
	z-index					: -10;
}

/** *********** **/
/**   BUTTONS   **/
/** *********** **/

.button {
	text-align 				: center;
	display					: inline-block;
	padding					: 18px;
	font-size				: 18px;
	border					: none;
	cursor					: pointer;
	width					: calc(100% - 36px);
}
	
input.button {
	width					: 100%;
}

.minButton {
	height					: 32px;
	line-height				: 32px;
	padding					: 0px;
	width					: 150px;
}

button.minButton {
	height					: 34px;
	padding					: 0px;
	width					: 152px;
}

.minSearch button {
	background				: url("../img/icon/icon_search.png") center center no-repeat;
	background-size			: 18px;
	border					: none;
	border-radius			: 0px !important;
	height					: 32px;
	width					: 32px;
	background-color		: #2176AE;
}

.minSearch button:hover {
	background-color		: #67A5CE;
}

.navigateButton	{
	text-align				: center;
	width					: 100%;
}

	/* RED */

	.redButton {
		color				: #FFFFFF;
		background-color	: #E51D22;
		border				: 1px solid #E51D22;
	}
		
	.redButton:hover {
		background-color	: #F14A4E;
	}

	/* ORANGE */

	.orangeButton {
		color				: #FFFFFF;
		background-color	: #F0811F;
		border				: 1px solid #F0811F;
	}
		
	.orangeButton:hover {
		background-color	: #FD9F4C;
	}
	
	/* BLUE */

	.blueButton, .blueButton button {
		color				: #FFFFFF !important;
		background-color	: #2176AE;
		border				: 1px solid #2176AE;
	}
		
	.blueButton:hover, .blueButton button:hover {
		background-color	: #408BBB !important;
	}
	
	/* BLUE */

	.grayButton {
		color				: #FFFFFF !important;
		background-color	: #C0C0C0;
		border				: 1px solid #9C9C9C;
	}

	/* WHITE */

	.whiteButton, .whiteButton button {
		color				: #E51D22 !important;
		background-color	: #FFFFFF;
		border				: 1px solid #E51D22;
	}	
		
	.whiteButton:hover, .whiteButton button:hover {
		background-color	: #E51D22;
		color				: white !important;
		cursor				: pointer;
	}
	
	/* GREEN */

	.greenButton, .greenButton button  {
		color				: #FFFFFF;
		background-color	: #0CA886;
		border				: 1px solid #0CA886;
	}
		
	.greenButton:hover, .greenButton button:hover {
		background-color	: #53C4AB;
	}
	
	/* YELLOW */

	.yellowButton, .yellowButton button {
		color				: #FFFFFF;
		background-color	: #F0AD1F;
		border				: 1px solid #F0AD1F;
	}
		
	.yellowButton:hover, .yellowButton button:hover {
		background-color	: #FDC44C;
	}
	

/* ICON */

.icon {
	display					: inline-table;
	width					: 26px;
	height					: 26px;
	border					: none;
	border-radius			: 26px;
	cursor					: pointer;
}

.iconEdit {
	background				: url("../img/icon/edit.png") center center no-repeat;
}

.iconFormulaDetail {
	background				: url("../img/icon/formula-detail.png") center center no-repeat;
}

.iconDelete {
	background				: url("../img/icon/delete.png") center center no-repeat;
}

.iconPercent input {
	background-image		: url("../img/icon/percent.png");
	background-position		: center right;
	background-repeat		: no-repeat;
	background-size			: 32px;
}

.iconPhone input {
	background-image		: url("../img/icon/phone.png");
	background-position		: center right;
	background-repeat		: no-repeat;
	background-size			: 32px;
}

.iconGSM input {
	background-image		: url("../img/icon/gsm.png");
	background-position		: center right;
	background-repeat		: no-repeat;
	background-size			: 32px;
}

.iconEmail input {
	background-image		: url("../img/icon/email.png");
	background-position		: center right;
	background-repeat		: no-repeat;
	background-size			: 32px;
}

.iconEuro input {
	background-image		: url("../img/icon/euro.png") !important;
	background-position		: center right !important;
	background-repeat		: no-repeat !important;
	background-size			: 32px !important;
	padding-right			: 42px !important;
	text-align				: right;
}

.iconSave button {
	background				: #0CA886 url("../img/icon/save.png") center left 10px no-repeat;
	padding-left 			: 40px !important;
}

.iconPrint button {
	background				: url("../img/icon/print.png") center left 10px no-repeat;
	padding-left 			: 40px !important;
}

/** **************** **/
/**    ERROR PAGE    **/
/** **************** **/

.errorPage {
	text-align 				: center;
	font-size				: 16px; 
	font-family				: "Gotham Rounded Medium";
	font-weight				: bold;
	color					: #E51D22;
	padding 				: 100px;
}

.errorPage .button {
	display					: block;
	margin					: auto;
	margin-top				: 100px;
	width					: 150px;
}

/** *********** **/
/**   MESSAGE   **/
/** *********** **/

ul.errorMessage {
	margin					: 0px;
	padding					: 0px 20px 20px 20px;
	list-style				: none;
	color					: #E51D22;
	font-size				: 16px; 
	font-family				: "Gotham Rounded Medium";
}

/** ********** **/
/**    BODY    **/
/** ********** **/

.bodyContent {
	position				: relative;
	width					: 800px;
	margin					: 10px auto 0px auto;
}

.bodyContentResponsive {
	position				: relative;
	width					: calc(100% - 340px);
	min-width				: 953px;
	margin					: 50px 0px 0px 300px;
	padding					: 20px;
}

/** ************ **/
/**    HEADER    **/
/** ************ **/

#mainHeader {
	text-align 				: center;
	background				: #F0811F;
	width					: 520px;
	margin					: 40px auto 60px auto;
}
	
	#mainHeaderLogo img {
		margin				: 40px 0px 20px 0px;
		max-width			: 440px;
		background			: white;
	}
	
	#mainHeaderTitle {
		height				: 80px;
		line-height			: 80px;
		font-size			: 30px;
		font-family			: 'Gotham Rounded Medium';
		color 				: white;
	}
	
#header-admin {
	left					: 300px;
	top						: 0px;
	height					: 60px;
	background				: #2176AE;
	z-index					: 100;
	position				: fixed;
    width					: calc(100% - 300px);
    min-width				: 1253px;
}

	#headerTitle {
		height				: 60px;
		padding-left		: 10px;
		font-size			: 24px;
		font-family			: 'Gotham Rounded Medium';
		color 				: white;
		width				: 750px;
		float				: left;
		display 			: flex;
		align-items			: center;
		justify-content		: left;
	}
	
	#headerButton {
		height				: 60px;
		text-align			: right;
		width				: 480px;
		float				: right;
		display 			: flex;
		align-items			: center;
		justify-content		: right;
	}
	
	.marginButton {
		margin				: 5px;
	}

/** *********** **/
/**    TOTEM    **/
/** *********** **/

#totem {
	top						: 0px;
	position				: fixed;
	background				: #F0811F;
	width					: 300px;
	height					: 100vh;
	z-index					: 100;
	display					: flex;
  	flex-direction			: column;
}
	
	#totemLogo {
		text-align 			: center;
	}

	#totemLogo img {
		margin				: 10px;
		max-width			: 280px;
		background			: white;
	}

	#totemTitle {
		display				: inline-block;
		text-align			: center;
		width				: 300px;
		height				: 60px;
	    line-height			: 30px;
		color				: white;
		font-size			: 24px;
		border-bottom		: 2px solid white;
		padding				: 0px 0px 10px 0px;
	}
	
	#totemBox {
		flex				: 1 auto;
	}
	
	#totemBox .item {
	    display				: inline-block;
	    text-align			: center;
		width				: 300px;
	    height				: 50px;
	    line-height			: 50px;
	    color				: white;
	    font-size			: 18px;
	    border-bottom		: 2px solid white;
	}
	
	#totemBox .item:hover {
		background-color	: #2176AE !important;
	}
	
		#totemBox #item1 			{ background : url("../../public/img/icon/project.png") left 22px center no-repeat; }
		#totemBox #item2 			{ background : url("../../public/img/icon/deposit.png") left 22px center no-repeat; }
		#totemBox #item3 			{ background : url("../../public/img/icon/calculation.png") left 22px center no-repeat; }
		#totemBox #item4 			{ background : url("../../public/img/icon/download.png") left 22px center no-repeat; }
		#totemBox #item5 			{ background : url("../../public/img/icon/calendar_white.png") left 22px center no-repeat; }
		#totemBox .item.selected 	{ background-color	: #2176AE !important;}

	#mentionsLegales {
		width				: calc(100% - 50px);
		display 			: flex;
		justify-content		: center;
		align-items			: center;
		color				: white;
	    font-size			: 18px;
	    text-decoration		: underline;
	    margin				: 25px;
	}
	
	#mentionsLegales {
		
	}

/** ************ **/
/**    MODULES   **/
/** ************ **/

.modules {
	margin					: 25px auto;
	display					: flex;
	flex-wrap				: wrap;
    justify-content			: center;
    width					: 900px;
}

	.moduleItem {
		background			: #EEEEEE;
	    width				: 300px;
	    height				: 220px;
	    margin				: 25px 50px;
	    border				: 2px solid #2176AE;
	}
	
	.moduleItem .button {
		margin-left			: -2px;
		width				: 264px;
		border				: 2px solid #2176AE;
	}
	
	.moduleImage {
		height			 	: 165px;
		background-repeat 	: no-repeat;
		background-position : center;
	}
	
	.newProject 	{ background-image : url("../img/icon/newProject.png"); }
	.import			{ background-image : url("../img/icon/import.png"); }
	
/** ************** **/
/**    CALENDAR    **/
/** ************** **/

.calendar-content {
	width					: 875px;
	margin					: 25px auto;
}

	/* HEADER */
	
	#calendar-year {
		color				: #2176AE;
		font-size			: 16px;
	}
	
	#calendar-year select {
		margin-left			: 10px;
		font-size			: 16px;
		padding				: 5px;
		height				: 32px;
		width				: 72px;
		color				: #2176AE;
		border				: 2px solid #2176AE;
	}
	
	.calendar-current {
		text-align			: center;
		color				: #2176AE;
		font-size			: 26px;
		margin				: 10px 0px;
	}
	
	.calendar-prev {
		width				: 150px !important;
		float				: left;
	    background-image	: url("../img/icon/prev.png");
	    background-position : left 6px center;
	    background-repeat	: no-repeat 
	}
	
	.calendar-next {
		width				: 150px !important;
		float				: right;
		background-image	: url("../img/icon/next.png");
	    background-position : right 6px center;
	    background-repeat	: no-repeat
	}

	/* CALENDAR */

	.calendar-box {
		clear				: both;
		display				: grid;
		grid-template-columns: repeat(7, 1fr);
	}
	
		.calendar-column {
			width			: 125px;
		}
	
		.calendar-header {
			margin-top		: 25px;
			height			: 25px;
			text-align		: center;
			font-size		: 14px;
		}
	
		.calendar-day {
			width			: 110px;
			height			: 85px;
			border-top		: 1px solid #E1E1E1;
		  	border-left		: 1px solid #E1E1E1;
		  	margin-top		: -1px;
		  	margin-left 	: -1px;
		  	
		  	text-align		: right;
		  	padding-top		: 15px;
		  	padding-right	: 15px;
		  	color			: #999999;
		  	font-size		: 16px;
		}
	
		.calendar-day.last_column {
			border-right	: 1px solid #E1E1E1;
			margin-right	: -1px;
		}
		
		.calendar-day.last_row {
			border-bottom	: 1px solid #E1E1E1;
			margin-bottom	: -1px;
		}
	
		.calendar-day:not(.calendar-day-disabled, .week-end):hover {
			cursor			: pointer;
			background		: #E1E1E1 !important;
			color			: white !important;
		}
		
		.calendar-day.conge {
			background		: #FBEBD4;
			color			: #EC9929;
		}
		
		.calendar-day.ferie {
			background		: #FFDCCF;
			color			: #FF4500;
		}
		
		.calendar-day.week-end {
			background		: #408BBB;
			color			: #2176AE;
		}
		
		.calendar-day.travaille {
			color			: #999999;
			background		: white;
		}
		
		.calendar-day-disabled {
			color			: #999999 !important;
			background		: #FAFAFA !important;
		}
	
	#calendar-popup {
		display				: none;
		position 			: absolute;
		background-color	: #2176AE;
		width				: 150px;
		height				: 60px;
		border-radius		: 7px;
		color				: white;
		padding				: 10px;
	}
	
	#calendar-popup select {
		font-size			: 16px;
		padding				: 5px;
		height				: 32px;
		width				: 100%;
		color				: #2176AE;
		border				: 2px solid #2176AE;
	}
	
	#calendar-popup-label {
		padding-bottom		: 10px;
		text-align			: center;
		font-size			: 14px;
	}
	
	#calendar-popup-triangle {
		position			: absolute;
		top					: 70px;
		left				: 65px;
 		display 			: inline-block;
 		height 				: 0;
 		width 				: 0;
 		border-top 			: 20px solid #2176AE;
 		border-right 		: 20px solid transparent;
 		border-left 		: 20px solid transparent;
	}
	
	/* LEGEND */
	
	#calendar-legend {
	    display				: flex;
	    justify-content		: center;
	    gap					: 50px;
	    margin-top			: 50px;
	}
	
		.legend-label {
			float 			: left;
		    height			: 30px;
		    line-height		: 30px;
		    padding-left	: 10px;
		    font-size		: 14px;
		}
		
		.legend-color {
			float 			: left;
			width			: 70px;
			height			: 30px;
		}
		
		.week-end .legend-color {
			background		: #408BBB;
			border			: 1px solid #2176AE;
		}
		
		.week-end {
			color			: #2176AE;
		}
		
		.ferie .legend-color {
			background		: #FFDCCF;
			border			: 1px solid #FF4500;
		}
		
		.ferie {
			color			: #FF4500;
		}
		
		.conge .legend-color {
			background		: #FBEBD4;
			border			: 1px solid #EC9929;
		}
		
		.conge {
			color			: #EC9929;
		}
		
		.mois .legend-color {
			background		: #FAFAFA;
			border			: 1px solid #999999;
		}
		
		.mois {
			color			: #999999;
		}	
	
/** *********** **/
/**    UPLOAD   **/
/** *********** **/

#dropFile {
	width			: 0px;
	height			: 0px;
	opacity			: 0;
}

#dropFile + label {
	display			: block;
	width			: 50%;
	margin			: 40px auto 30px;
	padding			: 20px;
	text-align		: center;
	font-size		: 20px;
	color			: #2176AE;
	border			: dashed 3px #2176AE;
	cursor			: pointer;
}

#dropFile:hover + label {
	background: rgba(33, 118, 174, 0.1);
}

#dropFile-Name {
	width			: 100%;
	font-size		: 16px;
    color			: #2176AE;
    height			: 50px;
    display 		: inline-block;
    text-align		: center;
}

.dropFileHover {
	background: rgba(33, 118, 174, 0.1);
}


/** *********** **/
/**    PRINT    **/
/** *********** **/

.coreBlock:has(.coreBlockItem.printShow) {
  display: none;
}

@media print {
  	
  	@page {
  		size 	: auto;
  		margin  : 0px;
    }
    
    * {
        -webkit-print-color-adjust: exact;
    }
    
    #header-admin, #totem {
		display : none;
	}
	
	.bodyContentResponsive {
		width			: 100%;
		min-width		: 953px;
		margin			: 0px;
		padding			: 0px;
	}
	
	.coreBlockDatagrid {
		page-break-inside	: avoid;
	}
	
	.printHide {
		display				: none;
	}
	
	.coreBlock:has(.coreBlockItem.printShow) {
  		display		: inline-block;
  		height		: 380px;
	}
}

/** DIALOG **/
.dialog-box {
	width					: 650px !important;
}

.dialog-title {
	padding 				: 5px 10px; 
	font-size				: 28px; 
	font-family				: 'Gotham Rounded Medium'; 
	background				: #2176AE; 
	color					: #FFFFFF; 
}

.dialog-warning {
	background				: white;
	background-image		: url("../img/icon/warning.png");
	background-position		: center 15px;
	background-repeat		: no-repeat;
	height					: 110px;
	width					: 100%;
	padding-top				: 10px;
}

.dialog-content {
	padding					: 10px 20px;
	background				: white;
	font-size				: 18px; 
	font-family				: 'Gotham Rounded Medium'; 
	color					: #3D80CC;
	display					: flex;
	justify-content			: center;
	align-items				: center;
}

.dialog-button {
	padding					: 10px 25px 25px 25px;
	display					: flex;
	justify-content			: center;
	background				: white;
}

.dialog-button button, .dialog-button a {
	border-width			: 2px;
	font-family				: 'Gotham Rounded Medium'; 
	width					: 150px; 
	font-size 				: 18px;
	height 					: 34px;
	display					: flex;
    justify-content			: center;
    align-items				: center;
}

.dialog-button a {
	height 					: 30px;
}

.dialog-close {
	position				: absolute;
	top						: 10px;
	right					: 10px;
	background				: url("../img/icon/close_white.png") no-repeat center center;
	height					: 25px;
	width					: 25px;
	background-color		: transparent;
	border 					: none;
}

/* Calcul de la révision */
tr:last-child .bottomBorder {
	border-bottom : 3px solid #2176AE !important;
}

/* deposit - datagrid */
.deposits input {
	height : 22px !important;
	width : 116px !important;
}

/* JQUERY */

.ui-datepicker-header {
	height : 28px;
}

.ui-datepicker-month, .ui-datepicker-year {
	height : 22px;
	color : #2176AE !important;
	font-family: 'Gotham Rounded Medium' !important;
	font-size: 12px !important;
	padding : 0px !important;
	border : none !important;
}

.ui-datepicker-year {
	margin-left : 5px !important;
}

.ui-datepicker-prev, .ui-datepicker-next {
	height	: 28px !important;
}

.ui-widget-content {
	background : #E9F1F5 !important;
	border : 1px solid #2176AE;
}

.ui-state-default {
	background : white !important;
	color : #2176AE;
	border : 1px solid #A0A0A0 !important;
}

.ui-state-hover {
	background : #F0811F !important;
	border : 1px solid #F0811F !important;
	color : white !important;
}

.ui-state-active {
	background : #2176AE !important;
	border : 1px solid #2176AE !important;
	color : white !important;
}

.ui-datepicker-prev-hover, .ui-datepicker-next-hover {
	background : white !important;
}

#chart_variation {
	width: 1213px;
    height: 600px;
}