:root {
	--c-orange: #fecf4d;
	--c-dorange: #c19022;
	--c-ddorange: #8f6c1d;
	--c-lorange: #ffe7a6;
	--c-blue:	#455378;
	--c-dblue:	#212d43;
	--c-lblue:	#8ba1d7; /**/
	--c-bblue:	#4295ed; /**/
	--c-green:	#1db59a;
	--c-dgreen:	#188172;
	--c-lgreen:	#1db39a;
	--c-green2:	#1eb499;
	--c-palegreen:	#d2f0eb;
	--c-halfpalegreen:	#8edacc;
	--c-gray: #555;
	--c-gray-light: #BBB;
	--c-red: #dd4d4d;

	--c-ooh: 	#FFCF54; /* ! keep sync with HTML::$typeColors */
	--c-dooh: 	#455378;	
	--c-street: #00B49A;	
	--c-digital:#162943;	
	--c-presse: #4B7EC9;	
	--c-radio: 	#CAA04A;	
	--c-tv:	 	#7f8fb1;
	--c-cinema: #81EAD6;
	--c-levi1: 	#FFCF54;
	--c-levi2: 	#455378;
	--c-levi3: 	#00B49A;
	--c-levi4: 	#7f8fb1;
	--c-levi5: 	#4B7EC9;
	--c-levi6: 	#CAA04A;


	--border-input-wrap: 1px solid var(--c-light);
	--shadow-small: 0 2px 4px 1px rgba(0, 0, 0, 0.12);
	--shadow-small-bt: 0 2px 4px 0 rgba(0, 0, 0, 0.32);
	--shadow-block: 0 7px 7px -4px rgba(0, 0, 0, 0.24);
	--shadow-block-bigger: 0px 7px 11px -2px rgba(0, 0, 0, 0.2);

	--wd-content-default: 1200px;
	--wd-content-sm: 1024px;
	--wd-content-med-sm: 1400px;
	--wd-content-med: 1600px;
	--wd-content-large: 1800px;
	--wd-content-xl: 2200px;
	--wd-content: var(--wd-content-default);

	--marg-inter-buttons: 16px;
	--marg-inter-buttons-sm: 8px;
}

/* Media types AdRing skin */
.bg-ooh, 	.before-bg-ooh::before, 	.bg-type:nth-of-type(8n),   .bg-type-wrap:nth-of-type(8n)   .bg-type-sub { background-color: var(--c-ooh); }
.bg-dooh, 	.before-bg-dooh::before, 	.bg-type:nth-of-type(8n+1), .bg-type-wrap:nth-of-type(8n+1) .bg-type-sub { background-color: var(--c-dooh); }
.bg-street, .before-bg-street::before, 	.bg-type:nth-of-type(8n+2), .bg-type-wrap:nth-of-type(8n+2) .bg-type-sub { background-color: var(--c-street); }
.bg-digital,.before-bg-digital::before, .bg-type:nth-of-type(8n+3), .bg-type-wrap:nth-of-type(8n+3) .bg-type-sub { background-color: var(--c-digital); }
.bg-presse, .before-bg-presse::before, 	.bg-type:nth-of-type(8n+4), .bg-type-wrap:nth-of-type(8n+4) .bg-type-sub { background-color: var(--c-presse); }
.bg-radio, 	.before-bg-radio::before, 	.bg-type:nth-of-type(8n+5), .bg-type-wrap:nth-of-type(8n+5) .bg-type-sub { background-color: var(--c-radio); }
.bg-tv, 	.before-bg-tv::before, 		.bg-type:nth-of-type(8n+6), .bg-type-wrap:nth-of-type(8n+6) .bg-type-sub { background-color: var(--c-tv); }
.bg-cinema, .before-bg-cinema::before, 	.bg-type:nth-of-type(8n+7), .bg-type-wrap:nth-of-type(8n+7) .bg-type-sub { background-color: var(--c-cinema); }
.bg-levi1, .before-bg-levi1::before { background-color: var(--c-levi1); }
.bg-levi2, .before-bg-levi2::before { background-color: var(--c-levi2); }
.bg-levi3, .before-bg-levi3::before { background-color: var(--c-levi3); }
.bg-levi4, .before-bg-levi4::before { background-color: var(--c-levi4); }
.bg-levi5, .before-bg-levi5::before { background-color: var(--c-levi5); }
.bg-levi6, .before-bg-levi6::before { background-color: var(--c-levi6); }
.c-ooh, 	.before-c-ooh::before, .c-ooh .c-before-inherit::before			{ color: var(--c-ooh) !important; }
.c-dooh, 	.before-c-dooh::before, .c-dooh .c-before-inherit::before		{ color: var(--c-dooh) !important; }
.c-street,  .before-c-street::before, .c-street .c-before-inherit::before	{ color: var(--c-street) !important; }
.c-digital, .before-c-digital::before, .c-digital .c-before-inherit::before	{ color: var(--c-digital) !important; }
.c-presse,  .before-c-presse::before, .c-presse .c-before-inherit::before	{ color: var(--c-presse) !important; }
.c-radio, 	.before-c-radio::before, .c-radio .c-before-inherit::before		{ color: var(--c-radio) !important; }
.c-tv, 	 	.before-c-tv::before, .c-tv .c-before-inherit::before			{ color: var(--c-tv) !important; }
.c-cinema,  .before-c-cinema::before, .c-cinema .c-before-inherit::before	{ color: var(--c-cinema) !important; }
.c-levi1,  .before-c-levi1::before, .c-levi1 .c-before-inherit::before	{ color: var(--c-levi1) !important; }
.c-levi2,  .before-c-levi2::before, .c-levi2 .c-before-inherit::before	{ color: var(--c-levi2) !important; }
.c-levi3,  .before-c-levi3::before, .c-levi3 .c-before-inherit::before	{ color: var(--c-levi3) !important; }
.c-levi4,  .before-c-levi4::before, .c-levi4 .c-before-inherit::before	{ color: var(--c-levi4) !important; }
.c-levi5,  .before-c-levi5::before, .c-levi5 .c-before-inherit::before	{ color: var(--c-levi5) !important; }
.c-levi6,  .before-c-levi6::before, .c-levi6 .c-before-inherit::before	{ color: var(--c-levi6) !important; }


body {
	position: relative; /* to correctly calculate absolute coordinates inside */
}

#d-content {
	position: relative;
	/*padding-top: 16px;*/

	max-width: var(--wd-content);
	margin-left: auto;
	margin-right: auto;
}

ul {
	padding-left: 0;
}

body.loading {
	-webkit-transition:	opacity 1s ease;
	transition:			opacity 1s ease;
	opacity:			0.75;
}

body.loading .avatar.avatar-sm,
body.loading .popup-iframe-close {
	background: center center no-repeat url(../res/bg/loading.png);
	background-size: cover;
	background-size: 24px;
}
body.loading .avatar.avatar-sm img,
body.loading .popup-iframe-close i {
	visibility: hidden !important;
}

body.loading:after {
	content:			"";
	position:			fixed;
	left:0;top:0;right:0;bottom:0;width:100%;height:100%;
	z-index:			100000;
	background-color:	rgba(0, 196, 244, 0.04);
}

.bg-top-agron,
.bg-top-agron-before::before {
	background: 		center center no-repeat url(../res/bg/argon1.jpg);
	background-size:	cover;
		
}

.bg-client-default-logo 
{
	background-image: 	url(../res/bg/business_center.svg);
}

.empty-notice {
	padding: 64px 32px 16px;
	text-align: center;
	font-size: 16px;
	color: #AAA;
}


/* on some client portal pages - top-right back button */

	.btn-back-to-campaigns {
		position: absolute;
		right: 48px;
		top: 16px;
		padding: 0px 16px 2px 8px;
		white-space: nowrap;
		border-radius: 4em;
		background-color: white;
		box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.16);
		z-index: 1;
	}
	@media(max-width: 767px) {
		.btn-back-to-campaigns { top: 4px; right: 20px; }
	}
	.btn-back-to-campaigns:hover {
		box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.16) inset;
	}
	.btn-back-to-campaigns:hover span {
		color: var(--c-green);
	}
	.btn-back-to-campaigns > * {
		display: inline-block;
		vertical-align: middle;
		font-size: 13px;
	}
	.btn-back-to-campaigns > i {
		margin-right: 4px;
	}

	
/* Add button */

#btn-add-wrap, .btn-add-wrap {
	overflow: hidden;
}
#btn-add-wrap > button, .btn-add-wrap > button {
	float: right;
}
#btn-add-wrap > button.btn, .btn-add-wrap > button.btn {
	margin-left: var(--marg-inter-buttons);
	margin-right: 0;
}

@media (max-width: 640px) {
	#btn-add-wrap {
		text-align: center;
	}
	#btn-add-wrap > button.btn, .btn-add-wrap > button.btn {
		float: none;
		display: inline-block;
		margin-left: calc(var(--marg-inter-buttons) * 0.5);
		margin-right: calc(var(--marg-inter-buttons) * 0.5);
	}

}


/* 2-columns adaptive "content+action */
div.col2-autowidth {
	display: flex;
	flex-wrap: nowrap;
}
div.col2-autowidth > * {
	max-width: none;
	flex: auto;
}
div.col2-autowidth > :nth-child(1) {
	width: auto !important;
	padding-right: 15px;
}
div.col2-autowidth > :nth-child(2) {
	flex: 0 !important;
	padding-left: 15px;
}


.name-with-logo {
	position: relative;
	padding-left: 40px;
}
.name-with-logo > .nlogo {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	margin-top: -0.5em;
	font-size: 24px;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: center center no-repeat;
	background-size: contain;
}

/* Client/campaign status colors */
.campaign-state,
.central-status {
	position:		relative;
	font-size: 		10px;
	padding-left:	16px;
}

/*.advertisers .brick-wrap */
.campaign-state::before,
.central-status::before {
	content: 		"";
	position:		absolute;
	font-size:		7px;
	left:			0;
	top:			50%;
	margin-left:	-0.5em;
	margin-left:	0;
	margin-top:		-0.5em;
	width:			1em;
	height:			1em;
	border-radius:	50%;
	/*border:			1px solid rgba(0, 0, 0, 0.25);*/
	
}
.state-bg.state-draft, 		.state-bg-before.state-draft::before 		{ background-color: #0AD; } /* rgba(255, 181, 32, 0.44) #DA4;  */
.state-bg.oriented, 		.state-bg-before.state-oriented::before 	{ background-color: #c6f5c6; }
.state-bg.state-programmed, .state-bg-before.state-programmed::before 	{ background-color: #DA4; }
.state-bg.state-lost, 		.state-bg-before.state-lost::before 		{ background-color: var(--c-gray-light); }
.state-bg-before.state-lost 											{ color: var(--c-gray-light); }
.state-bg.state-active, 	.state-bg-before.state-active::before 		{ background-color: #0DA; }
.state-bg.state-inactive, 	.state-bg-before.state-inactive::before 	{ background-color: #000; }

.state-color.state-draft, 		.color-bg-before.state-draft::before 		{ color: #0AD; } /* rgba(255, 181, 32, 0.44) #DA4;  */
.state-color.oriented, 		.color-bg-before.state-oriented::before 	{ color: #c6f5c6; }
.state-color.state-programmed, .color-bg-before.state-programmed::before 	{ color: #DA4; }
.state-color.state-lost, 		.color-bg-before.state-lost::before 		{ color: var(--c-gray-light); }
.state-color.state-active, 	.color-bg-before.state-active::before 		{ color: var(--c-green); }
.state-color.state-inactive, 	.color-bg-before.state-inactive::before 	{ color: var(--c-pale); }

.state-regies-missing .campaign-state::after {
	content: "!";
	--size: 1.5em;
	position:		absolute;
	font-size:		11px;
	right:			0;
	top:			50%;
	margin-top:	calc(-1em + var(--size)*-0.5);
	margin-right: -4px;
	width:			var(--size);
	height:			var(--size);
	line-height: var(--size);
	text-align: center;
	vertical-align: middle;
	border-radius:	1em;
	background-color: var(--c-orange-red);
	color: white; /*var(--c-red);*/
	font-weight: bold;
	z-index: 1;
}
.state-regies-missing[data-state-regies-ht-mismatch="1"] .campaign-state::after {
	background-color: var(--bg-orange);
}
.state-regies-missing .campaign-state:hover::after {
	content: "Régie docs";
	width: auto;
	padding: 0 4px;
}
.state-regies-missing[data-state-regies-ht-mismatch="1"] .campaign-state:hover::after {
	content: "Régie docs - montant différent";
}

.d-progress-bar {	
	line-height:	14px;
	white-space:	nowrap;
}
.d-progress-bar .d-val {	
	position:		relative;
	display:		inline-block;
	font-size:		12px;
	vertical-align: middle;
	margin-right:	4px;
	min-width:		3.2em;
}
.d-progress-bar .d-bar {
	position:		relative;
	display:		inline-block;
	vertical-align: middle;
	width:			100px;
	height:			5px;
	background-color: rgba(0, 0, 0, 0.11);
    border-radius: 4px;
    overflow: hidden;
}
.d-progress-bar .d-bar-progress {
	position:		absolute;
	left:0;top:0;right:auto;bottom:0;height:100%;
	background-color: black;
    border-radius: 4px;
}


/* Icon buttons */
.d-btn-icon {
    border-radius: 50%;
    padding: 4px;
    margin-top: -4px;
    margin-left: -4px;
    margin-right: -4px;
	-webkit-transition: box-shadow 0.5s ease, color 0.5s ease;
			transition: box-shadow 0.5s ease, color 0.5s ease;
}
.d-btn-icon:hover,
.click:hover > .d-btn-icon {
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2) inset;
}

.d-btn-list-action {
	margin-left: 	7px;
	cursor:			pointer;
	color: 			#646464;
}
.d-btn-list-action:hover {
	color:			#5e72e4;
	color:			#000;
}


/* Popup iframe */
@media all {
	#popup-iframe {
		z-index:	200000;
	}
	#popup-iframe:not(.popup-centered-container) {
		position:	fixed;
		left: 0; top: 0; right : 0; bottom: 0;
		background-color:	rgba(0, 0, 0, 0.25);
	}

	#popup-iframe:not(.popup-centered-container) > .sub {
		position:	absolute;
		left: 2%; top: 2%; right: 2%; bottom: 2%;
	}
	#popup-iframe.smaller:not(.popup-centered-container) > .sub {
		left: 8%; top: 4%; right: 8%; bottom: 4%;
	}

	/*#popup-iframe #ajax-lb-turn {
		z-index:	-1;
	}*/

	#popup-iframe > .sub > .popup-iframe-close {
		position:			absolute;
		right: 				12px;
		top: 				4px;
		padding:			8px 8px;
		/*background-color:	rgba(255, 255, 255, 0.8);*/
		border-radius:		50%;
		font-size:			40px;
		width:				1.25em;
		height:				1.25em;
		cursor:				pointer;
		z-index:			10000000;
	}
	#popup-iframe > .sub > .popup-iframe-close i {
		text-shadow:		0 0 2px white;
		font-size:			38px;
	}

	#popup-iframe > .sub > iframe {
		display:	block;
		width:		100%;
		height:		100%;
		background-color:	white;
	}
	#popup-iframe.popup-html > .sub {
		height:		480px; /* may be controlled by JS */
		/* max-height:	90vh; No need - see further CSS */
		border-radius:	16px;
	}
	#popup-iframe.popup-html > .sub > iframe {
		border:		none;
	}

}


/* Dropdown choice */
.d-choice-dropdown {
	position: 	absolute;
	padding: 	14px 0 8px;
	margin: 	1px 0;
	background-color:white;
	z-index: 	10;
	box-shadow:	0 2px 8px 0 rgba(0, 0, 0, 0.25);
}
.d-choice-dropdown:not(:hover) {
	/*opacity: 0.8;*/
}
.d-choice-dropdown.d-hide {
	display: none;
}

.d-choice-dropdown > .d-close {
	position: absolute;
	right: 0;
	top: 0;
	margin: -1px 0 0;
	padding: 1px;
	border-radius: 50%;
	font-size: 10px;
	cursor: pointer;
	color: gray;
    z-index: 1;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5em;
}
.d-choice-dropdown > .d-close:hover {
	background-color: rgba(0, 0, 0, 0.25);
	color: black;
}

.d-choice-dropdown > .sub {
	position: relative;
	padding: 0 8px;
	overflow: auto;
	max-height: 22vh;
	max-width: 320px;	
}
.d-choice-dropdown .choice-item {
	font-size: 11px;
	padding: 1px 2px 0;
	max-width: 40vw;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.d-choice-dropdown .choice-item.weight1 {
	font-weight: bold;
}
.d-choice-dropdown .choice-item.weight2 {
	font-weight: bold;
	color:		 #1e9680;
}
.d-choice-dropdown .choice-item.nomatch:not(:hover) {
	opacity:	0.56;
}
.d-choice-dropdown .choice-item:hover {
	background-color: rgba(94, 114, 228, 0.29); /*rgba(45, 206, 137, 0.31);*/
}


/*Value formatting*/

d_s { /*space in number*/
	display: inline-block;
	width: 0.16em;
}
.d-display-value[data-display="number"],
.d-display-value[data-type="int"],
.d-display-value[data-type="float"],
.d-display-value[data-type="money"] {
	white-space: nowrap;
}
body.tables-align-right .d-display-value[data-display="number"],
body.tables-align-right .d-display-value[data-type="int"],
body.tables-align-right .d-display-value[data-type="float"],
body.tables-align-right .d-display-value[data-type="money"] {
	display:	block;
	text-align: right;
	padding-right: 4px;
}

body.tables-align-right th[data-display="number"],
body.tables-align-right th[data-type="int"],
body.tables-align-right th[data-type="float"],
body.tables-align-right th[data-type="money"] {
	text-align: right;
	padding-right: 8px;
}



/* Documents */

/* modal mode (obsolete?) */
#d-modal-docs .modal-dialog {
	width: 90%;
	max-width: 			1600px;
}

#d-modal-docs .modal-dialog > .modal-content{
	overflow: auto;
    max-height: 90vh;
}

/* old + new (in-page) mode */

#d-modal-docs .table-wrap td {
	padding-top: 8px;
	padding-bottom: 8px;
}

#d-modal-docs .filter-types:not(:first-child) {
	float: right;
	padding-left: 16px;
}
#d-modal-docs .filter-types .document-category {
	font-size: 12px;
	margin-left: 8px;
	margin-bottom: 4px;
	cursor: pointer;
	/*box-shadow: 0 7px 7px -7px rgba(0, 0, 0, 0.2);
	box-shadow: var(--shadow-small-bt);*/
}
#d-modal-docs .filter-types .document-category:hover {
	opacity: 0.85;
}
#d-modal-docs .filter-types .document-category.active {
	box-shadow: 0 7px 7px -7px rgba(0, 0, 0, 0.64) inset;
}

.document-category {
	padding: 			4px 14px 5px;
    background-color: 	#b4b4b4;
    border-radius: 		4em;
    color: 				white;
	white-space: nowrap;
}

.document-category[data-value="Facture"] { background-color: #2ece88; }
.document-category[data-value="Bon de commande"] { background-color: #f86641; }
.document-category[data-value="Doc technique"] { background-color: #0acaee; }

#d-modal-docs, .d-upload-form, .file-wrap {
	--fu-c-gray: rgba(0, 0, 0, 0.2);
	--fu-c-gray1: rgba(0, 0, 0, 0.32);
	--fu-c-gray2: rgba(0, 0, 0, 0.64);
}

.file-wrap {
	position: relative;
	padding: 8px 16px;
	text-align: center;
}

.file-wrap .file-drop {
	position: relative;
	margin-bottom: 12px;
}
@media (max-width: 800px) {
	.file-wrap .file-drop { /* no drop zone on smartphones */
		display: none !important;
	}
}

.file-wrap .file-drop > .sub {
	position: relative;
	padding: 56px 8px 44px;
	border: 1px dashed var(--fu-c-gray1);
	background-color: rgba(0, 0, 0, 0.08);
	background-color: rgba(0, 0, 0, 0);
	-webkit-transition: background 0.5s ease;
			transition: background 0.5s ease;
}

.file-wrap .file-drop.dropping > .sub {
	background-color: rgba(0, 0, 0, 0.16);
}
.file-wrap .file-drop.dropped:not(.dropping) > .sub {
	background-color: rgba(0, 179, 154, 0.16);
}

.file-wrap .file-drop i.material-icons {
	display: block;
	margin-bottom: -4px;
	font-size: 56px;
	color: var(--fu-c-gray);
	transition: color 0.5s ease;
}

.file-wrap .fu-hint {
	display: block;
	text-align: center;
	font-size: 11px;
	color: var(--fu-c-gray2);
	transition: color 0.5s ease;
	margin: 8px 0;
}

.file-wrap .file-drop.dropping i.material-icons,
.file-wrap .file-drop.dropping .fu-hint {
	/*transform: scale(1.16);*/
	color: var(--fu-c-gray2);
	color: white;
}

.file-wrap input[type="file"] {
	display: inline-block;
	font-size: 13px;
	background-color: rgba(0, 0, 0, 0.04);
}

.file-wrap input[type="file"]::before {
	content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	z-index: 10;
}


#gds-iframe {
	margin-left: auto;
	margin-right: auto;
	/*max-width: 1200px;*/
	max-width: 1320px;
	background-color: rgba(0, 0, 0, 0.32);
}

#gds-iframe iframe {
	background-color: white;
}


#modifications-save.unsaved {
	animation-name: save-blink;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes save-blink {
	0% {
		transform:scale(1);
	}
	50% {
		transform:scale(1.6);
	}
	100% {
		transform:scale(1);
	}
}