body {
    margin: 0px;
    padding: 0px;
    font: arial;
    font-size: 14px;
    font-weight: normal;
    overflow-y: scroll;
		z-index: 1;
}

.clear {
	clear: both;
}

/* Header */
.head_container {
    /*display: flex;*/
    justify-content: space-between;
		align-items: center;
		height: 50px;
}

.logo {
		width: 20%;
		height:100%;
		padding: 0px 5px;
		float:left;
}

.logo_img {
    padding: 5px;
}

.logo_txt {
    text-align: center;
    padding-left: 5px;
    font-size: 11px;
    font-style: italic;
    color: #2E74B5;
}

.div_title {
		width: 60%;
		height:100%;
		margin: 10px auto;
		margin-left:0;
    text-align: center;
    color: var(--main-color);
    font-size: 40px;
		padding: 0px 5px;
		float:left;
}

.div_logout{
	width: 20%;
	height:100%;
	padding: 0px 5px;
	text-align: center;
	float:left;
	position: relative;
}

.text_logout{
	position:absolute;
	bottom: 0;
	font-weight: bold;
}

.page_title {
    text-align: center;
    color: green;
    margin-bottom: 0px;
}


.frame {
    padding: 10px;
    background-color: #fff;
		border: 2px solid #c0c2c1;
		padding: 20px;
		margin: 15px;
		border-radius:5px;
}

.no_level{
	text-align: center;
	color: red;
	font-size: 18px;
	font-weight: bold;
}

/*** SECTIONS ***/

.section{
	border: 1px solid #9dd7b1;
	border-radius: 5px;
	position: relative;
	margin: 20px auto;
	margin-top: 0px;
}

.section_title{
	background-color:black;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color:rgb(132, 226, 250);
	font-weight:bold;
	padding: 8px 10px;
}

/****************/

.highlighted {
    font-weight: bold;
}

.array_table {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
    min-width: 30%;
}

.array_table td,
.array_table th {
    border: 1px solid black;
    padding: 5px 10px;
}

.array_table thead tr {
    background-color: #cccccc;
}

.array_table tbody tr:nth-child(even) {
    background-color: #c0d6e4;
}

.array_table tbody td:nth-child(n+2) {
    text-align: right;
}

.array_table tfoot tr {
    background-color: #e6fddf;
    font-weight: bold;
    text-transform: uppercase;
}

.array_table tfoot td:nth-child(n+2) {
    text-align: right;
}

@-moz-document url-prefix () {
    .array_table {
        border-collapse: separate;
        border: 0px solid black;
    }
    .array_table td,
    th {
        border: 1px solid black;
        border-bottom: 0px;
        border-right: 0px;
    }
    .array_table tfoot td {
        border-bottom: 1px solid black;
    }
    .array_table td:last-child,
    th:last-child {
        border-right: 1px solid black;
    }
}

.bottom_text {
    font-style: italic;
    font-size: 12px;
}

img {
    vertical-align: middle;
}


/****** NAVBAR ******/

.navbar{
	padding:0px;
}

.nav-link{
	padding: 1rem;
}

/* TO ADD BORDER LEFT AND RIGHT
.nav-item:nth-child(1){
	border-left: 1px solid grey;
}

.nav-item{
	border-right: 1px solid grey;
}
*/


/****** END NAVBAR ******/

.my_container {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex-direction: row;
    -moz-box-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*justify-content: space-between;*/
    justify-content: center;
}

/***** Form validation *****/

.inputError{
	border:1px solid red !important;
}

.home_welcome{
	text-align: center;
	color: red;
}

/*** FORM ***/

.relative{
	position:relative;
}

.top-submit{
	border-bottom: 4px solid var(--main-color);
	margin-bottom: 10px;
	padding: 5px;
}

.bottom-submit{
	border-top: 4px solid var(--main-color);
	padding: 5px;
}

.submit-title{
	font-size: 24px;
	font-weight: bold;
	padding-left: 10px;
	line-height: 40px;
}

.submit-button{
	padding-right: 10px;
	line-height: 40px;
}

.submit-button span{
	display: inline-block;
	font-size:12px;
	font-style: italic;
	font-weight: bold;
	color:#aaaaaa;
	padding-right: 5px;
}

.table-border-right{
	border-right:1px solid #000000 !important;
}

.form-hrow{
	display: flex;
	flex-wrap: wrap;
}

.form-label{
	padding-right: 20px;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
}

.form-padding{
	padding:10px 20px;
}

.form-bg-grey{
	background-color: #eeeeee;
}

.radio-table{
	height: 100%;
}

.radio-table label{
	margin-bottom:0 !important;
}

.input150{
	max-width:150px;
}

.input400{
	max-width:400px;
}

.input700{
	max-width:700px;
}

/*** RADIO ***/
.radio_container {
  display: block;
  position: relative;
	padding-left: 26px;
	margin-right:10px;
  cursor: pointer;
	font-size: 16px;
	line-height: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio_container_table {
	display: inline !important;
	margin-right: 0px !important;
	margin-left:45%;
}

/* Hide the browser's default radio button */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  background-color: #ccc;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .checkmark {
  background-color: #aaa;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/*** CHECKBOX ***/

/* Customize the label (the container) */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  cursor: pointer;
	font-size: 16px;
	line-height:18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ccc;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark-box {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark-box {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-box:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark-box:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark-box:after {
  left: 8px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*****************/

/*** Form validation ***/

.inputError {
	border-color: red;
}

/***** Drop files *****/
.dropfiles{
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	padding:10px;
}

/***** Retour Campagnes *****/

.campagnes_table_left{
	width:20%;
}

.h50{
	height:50px;
	line-height:50px;
}

.campagnes_table_right{
	width:80%;
	display: flex;	
	align-items: center;
}

.int_row{
	display:flex;
	width:100%;
	flex-wrap: wrap;
}

.int_elem{
	flex:0 0 25%;
}

.campagnes_border_section{
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	padding:10px;
}

.campagnes_row_bck{
	background-color: #ffffff;
	padding:10px;
}

.campagnes_row_bck.pair{
	background-color: #eeeeee;
}

/*** Commandes ***/

.instructions{
	font-size:10px;
	font-style: italic;
}

.submit-title-annotation{
	font-size:12px;
	font-style:italic;
	padding-left:10px;
}

.calendars, .timers{
	background-color: #ffffff !important;
	cursor: pointer;
}

.pair{
	background-color: #eeeeee;
}

.icon-anchor{
	text-decoration:none !important;
	color:#007BFF !important;
}


.commandes_table th {
	text-align: center;
	vertical-align: middle !important;
}

.commandes_table td {
	vertical-align: middle !important;
}

/** Tables with first 3 columns fixed **/

.scroll-table{
	overflow-y: hidden;
	overflow-x: scroll;
}

.commandes_table_fixed th {
	text-align: center;
	vertical-align: middle !important;
}

.commandes_table_fixed th div{
	white-space: nowrap;
}

.commandes_table_fixed td {
	vertical-align: middle !important;
}

.commandes_table_fixed {
	border-collapse: separate;
	border-spacing: 0;
}

.commandes_table_fixed td:first-child {
	position:sticky;
	left:0px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:70px;
}

.commandes_table_fixed td:nth-child(2) {
	position:sticky;
	left:70px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:150px;
}

.commandes_table_fixed td:nth-child(3) {
	position:sticky;
	left:220px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:250px;
}

.fl-scrolls {
	z-index:1000;
}

.table_results tr td:nth-child(2){
	font-weight: bold;
}

.sources_table td {	
	padding-right: 5px;
}

.pair_row {
	background-color: #eeeeee;
}

.closed_commande td {
	background-color: #7DFFCD !important;
}

.btn-all-commandes{
	color:#ffffff;
	background-color: #0096B4;
	border-color: #0096B4;
}

.btn-closed {
	color: #000000;
	background-color: #7DFFCD;
	border-color: #7DFFCD;
}

.btn-no-sv {
	color: #000000;
	background-color: #c8ca2a;
	border-color: #c8ca2a;
}

.btn-no-stats {
	color: #000000;
	background-color: #a6b1e1;
	border-color: #a6b1e1;
}

.btn-no-invoice {
	color: #ffffff;
	background-color: #F07210;
	border-color: #F07210;
}

.btn-no-invoice-d {
	color: #ffffff;
	background-color: #e34351;
	border-color: #e34351;
}

.grey-text{
	color:grey !important;
}

.icon-blue{
	color:#007BFF;
}

.fs-14e{
	font-size: 1.4em !important;
}

.fs-15e{
	font-size: 1.5em !important;
}

.min-250{
	min-width:250px;
}

.floating-title-centered {
	position:absolute;
	top:-23px;
	left:50%;
	transform: translate(-50%);
	display:flex;
	justify-content: center;
	line-height:35px;
	width:130px;
	padding:1px;
	background-color:#ffffff;
	color:var(--main-color);
	font-size:25px;
	font-weight:bold;
}

.icon-input {
	position:absolute;
	right:12px;
	top:10px;
}

.search-total {
	position:absolute;
	bottom:0px;
	right:20px;
	font-style:italic;
	font-weight: 500;
}

.no-vertical-padding {
	padding-top:0px; 
	padding-bottom:0px;
}

.br-light-grey {
	border-right:1px solid #dee2e6;
}

.margin-v-form {
	margin-top: 10px;
	margin-bottom: 10px;
}

.force-border {
	border-radius:0.25rem !important;
}

.btn-red-active:not(:disabled):not(.disabled).active {
	background-color:#bd2130 !important;
	border-color: #b21f2d !important;
}

.btn-red-active.focus {
	box-shadow:0 0 0 0.2rem #b21f2d !important;
}

.ui-tooltip { 
	white-space: pre-line; 
}

.btn-s {
	font-size: 14px !important;
}

.fixed-table{
	table-layout:fixed;
	width:100%;
}

.fixed-table td.col_emails, .fixed-table td.col_mobiles_tmkg, 
.fixed-table td.col_mobiles_sms, .fixed-table td.col_fixes, 
.fixed-table td.col_postal {
	width: 20%;
}

.tot-divs {
	border: 1px solid #ced4da;
	border-radius: 3px;
	width: 100%;
	text-align: right;
	padding:5px 10px;
}

.tot-divs:after{
	content: "\2800\20AC";
}

.tot-divs-no-border{
	width: 100%;
	text-align: right;
	padding:5px 10px;
}

.invoice-single-input{
	width:20%;
	float:left;
	height:100%;
	display:flex; 
	align-items: center;
}

.invoice-single-input-euro{
	float:left;
	height:100%;
	display:flex;
	align-items:center;
	font-weight:bold;
	font-size:16px;
}

.invoice-alert {
	float:left;
	height: 100%;
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
	padding: 0px 20px;
	margin-left: 20px;
}

.border-alert {
	border: 2px solid red;
}

.invoice-remise-label {
	width:40%;
	height:100%;
	float:left;
	display:flex;
	align-items:center;
}

.valign-abs-middle{
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.valign-middle{
	vertical-align: middle;
}

.p-amounts{
	display: inline-block;
	font-size: 12px;
	color: #000000;
	padding:5px;
	margin:0;
	line-height:12px;
}

.alert-amounts-waiting {
	color:red !important;
}

.alert-amounts-paid{
	color:green !important;
}

.red-bck {
	background-color: #ff6969;
}

.green-bck {
	background-color:#5ec69e
}

.tot-bck {
	background-color: #36b5cf !important;
}

.tot-comp {
	background-color: #9a7ac1 !important;
}

.tot-komp-alt {
	background-color: #d2cf72 !important;
}

.tot-country {
	background-color: #d2ad72 !important;
}

.bck-light-blue{
	background-color: rgb(173, 216, 230, 0.3);
}

.bck-green{
	background-color: rgb(0, 128, 0, 0.5);
}

.strikethrough td {
	text-decoration: line-through;
}

.header-nowrap th {
	white-space: nowrap;
}

.commande-name-emb{
	font-weight:bold;
	color:#00b4c1;
}

.commande-name-mybrief{
	font-weight:bold;
	color:#35a936;
}

.bg-light-blue{
	background-color: #54cde0 !important;
}

.compta-month-button{
	color: darkblue;
	font-weight:bold;
}

.btn-excel {
	background-color: #B1BC00;
	color: #000000;
}

.compta_table td {
	text-align: right;
	white-space: nowrap;
}