/************************************************************************************/
/* MAIN STYLE SHEET FOR farm-access.com                                             */
/* Propriety of JPS Electronique                                                    */
/************************************************************************************/

@import url('https://fonts.googleapis.com/css?family=Lato');

html { height: 100%; }
body { min-height: 100%; }

/**********************************************************/
/* DARK MODE                                              */
/**********************************************************/
.t--light { background-color: #272727; color: #000; }
.t--dark { background-color: #272727; color: #fff; }
.t--dark .card, .t--dark .card-body, .t--dark .list-group, .t--dark .list-group-item { background-color: #272727; }
.t--dark .input-group, .t--dark .custom-select { background-color: #363636; color: #fff; border: #363636; }
.t--dark .input-group:disabled, .t--dark .custom-select:disabled { background-color: #424242; color: #fff; border: #424242; }
.t--dark .input-group-prepend, .t--dark .input-group-text { border-top-right-radius:25rem!important; border-bottom-right-radius:25rem!important;
	background-color: #363636; color: #fff; border: #363636; }
.t--dark .input-group-prepend:disabled, .t--dark .input-group-text:disabled { color: #fff; border:#404040; }
.t--dark .form-control, .t--dark .form-control:-moz-read-only { background-color: #363636; color: #fff; border: #363636; }
.t--dark .form-control:focus { background-color: #424242; color: #fff; border: #424242; }
.t--dark .input-group { border: none; }

.t--dark .nav-item { color: #ACACAC; }
.t--dark .nav-tabs > .active { color: #fff!important; background-color: #363636!important; border-bottom: none; }

/**********************************************************/
/* HEADER Section Classes                                 */
/**********************************************************/
#header {
	height: 72px;
	width: 100%;
	z-index: 1049;
	background-color: #272727;
	position: fixed;
	top: 0;
	left: 0;
}
.alt { background-color: #272727; }
#header .logo {
	position: fixed;
	float: left;
}
#header .logo a {
	display: block;
	padding: 0;
	margin: 0;
	height: 72px;
	width: 250px;
	line-height: 72px;
	position: absolute;
	left: 12px;
	top: 7px;
}
#header .links {
	line-height: 72px;
}

/**********************************************************/
/* TOP-BAR section Classes                                */
/**********************************************************/
#top-bar {
	height: 45px;
	width: 100%;
	color: #fff;
	background-color: #000;
	z-index: 1048;
	line-height: 45px;
	position: fixed;
	font-size: 14px;
	top: 0;
}
#top-bar button, #top-bar button:focus {
	height: 45px;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-family: "Lucida Console", Monaco, monospace;
	font-weight: bold;
	background-color: #000;
	padding-left: 15px;
	padding-right: 15px;
	display: block;
	border: none;
}
#top-bar button:hover, #top-bar button:active {
	background-color: #515151;
	text-decoration: none;
}

/**********************************************************/
/* EVENT NOTIFICATION TAB                                 */
/**********************************************************/
#eventNotif {
	width: 100%;
	z-index: 99999;
	position: fixed;
	top: 72px;
	left: 0;
}

/**********************************************************/
/* BOTTOM MESSAGE                                         */
/**********************************************************/
#bottom-msg {
	width: 100%;
	z-index: 99999;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgb(110,110,110);
	background-color: rgba(110,110,110,0.95);
	border-top: 3px solid #C7C7C7;
}

@media (max-width: 575px) { .btncookie { font-size: 11px; padding-top: 15px; } }
@media (min-width: 576px) and (max-width: 767px) { .btncookie { font-size: 11px; padding-top: 20px; } }
@media (min-width: 768px) and (max-width: 991px) { .btncookie { font-size: 13px; padding-top: 20px; } }
@media (min-width: 992px) and (max-width: 1199px) { .btncookie { font-size: 16px; padding-top: 15px; } }
@media (min-width: 1200px) { .btncookie { font-size: 18px; padding-top: 15px; } }

@media (max-width: 575px) { .txtcookie { padding-top: 5px; font-size: 9px; color: #fff; } }
@media (min-width: 576px) and (max-width: 767px) { .txtcookie { padding-top: 15px; font-size: 11px; color: #fff; } }
@media (min-width: 768px) and (max-width: 991px) { .txtcookie { padding-top: 15px; font-size: 13px; color: #fff; } }
@media (min-width: 992px) and (max-width: 1199px) { .txtcookie { padding-top: 15px; font-size: 15px; color: #fff; } }
@media (min-width: 1200px) { .txtcookie { padding-top: 15px; font-size: 15px; color: #fff; } }

@media (max-width: 575px) { #bottom-msg { height: 92px; } }
@media (min-width: 576px) and (max-width: 767px) { #bottom-msg { height: 92px; } }
@media (min-width: 768px) and (max-width: 991px) { #bottom-msg { height: 72px; } }
@media (min-width: 992px) and (max-width: 1199px) { #bottom-msg { height: 72px; } }
@media (min-width: 1200px) { #bottom-msg { height: 72px; } }

#bottom-msg a { color: #fff; }
#bottom-msg a:hover { color: #ddd; }

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

@media (max-width: 575px) { .forceTab { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } }
@media (min-width: 576px) and (max-width: 767px) { .forceTab { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } }
@media (min-width: 768px) and (max-width: 991px) { .forceTab { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } }
@media (min-width: 992px) and (max-width: 1199px) { .forceTab { padding-top: 30px; padding-left: 30px; padding-right: 30px; padding-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } }
@media (min-width: 1200px) { .forceTab { padding-top: 30px; padding-left: 30px; padding-right: 30px; padding-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } }

@media (max-width: 575px) { .paddingforce { padding-top: 20px; text-align: center; } }
@media (min-width: 576px) and (max-width: 767px) { .paddingforce { padding-top: 20px; text-align: center; } }
@media (min-width: 768px) and (max-width: 991px) { .paddingforce { padding-top: 10px; text-align: left; } }
@media (min-width: 992px) and (max-width: 1199px) { .paddingforce { padding-top: 10px; text-align: left; } }
@media (min-width: 1200px) { .paddingforce { padding-top: 10px; align: left; } }

@media (max-width: 575px) { .btnT { font-size: 13px; } }
@media (min-width: 576px) and (max-width: 767px) { .btnT { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .btnT { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .btnT { font-size: 18px; } }
@media (min-width: 1200px) { .btnT { font-size: 18px; } }

@media (max-width: 575px) { #txtGlobalSettings, #txtNotif, #txtLogout { display: none; } }
@media (min-width: 576px) and (max-width: 767px) { #txtGlobalSettings, #txtNotif, #txtLogout { display: none; } }
@media (min-width: 768px) and (max-width: 991px) { #txtGlobalSettings, #txtNotif, #txtLogout { display: none; } }
@media (min-width: 992px) and (max-width: 1199px) { #txtGlobalSettings, #txtNotif, #txtLogout { display: inline; } }
@media (min-width: 1200px) { #txtGlobalSettings, #txtNotif, #txtLogout { display: inline; } }

@media (max-width: 575px) { #top-bar button, #top-bar button:focus { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { #top-bar button, #top-bar button:focus { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { #top-bar button, #top-bar button:focus { font-size: 12px; } }
@media (min-width: 992px) and (max-width: 1199px) { #top-bar button, #top-bar button:focus { font-size: 12px; } }
@media (min-width: 1200px) { #top-bar button, #top-bar button:focus { font-size: 14px; } }

/**********************************************************/
/* CENTER section Classes                                 */
/**********************************************************/
.t--light #centre {
	padding-top: 100px;
	padding-bottom: 70px;
	background: #fff;
	min-height: 500px;
}
.t--dark #centre {
	padding-top: 100px;
	padding-bottom: 70px;
	background: #363636;
	min-height: 500px;
}

/**********************************************************/
/* FOOTER section Classes                                 */
/**********************************************************/
#fa-footer {
	padding-top: 30px;
	padding-bottom: 30px;
	color: #fff;
	font-size: 14px;
	overflow: auto;
}
#fa-footer a, #fa-footer a:visited {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
}
#fa-footer a:hover { color: #959595; text-decoration: none; }

#fa-footer hr {
	width: 100%;
	align: center;
	border-color: #959595;
}

.footleft { color: #959595; text-align: left; }
@media (max-width: 575px) { .footleft { font-size: 11px; } }
@media (min-width: 576px) and (max-width: 767px) { .footleft { font-size: 11px; } }
@media (min-width: 768px) and (max-width: 991px) { .footleft { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .footleft { font-size: 15px; } }
@media (min-width: 1200px) { .footleft { font-size: 15px; } }

.footright { color: #959595; text-align: right; }
@media (max-width: 575px) { .footright { font-size: 11px; } }
@media (min-width: 576px) and (max-width: 767px) { .footright { font-size: 11px; } }
@media (min-width: 768px) and (max-width: 991px) { .footright { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .footright { font-size: 15px; } }
@media (min-width: 1200px) { .footright { font-size: 15px; } }

/**********************************************************/
/* Custom BOOTSTRAP                                       */
/**********************************************************/
.input-custom {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-custom:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.input-custom::-moz-placeholder {
	color: #999;
	opacity: 1;
}
.input-custom:-ms-input-placeholder { color: #999; }
.input-custom::-webkit-input-placeholder { color: #999; }
.input-custom::-ms-expand {
	background-color: transparent;
	border: 0;
}
textarea.input-custom { height: auto; }

.force-email:invalid {
	border-color: red;
}

.input-right { text-align: left; direction: LTR; }

.list-group.list-group-horizontal{
	display: flex;
	flex-direction: row;
}

.list-group.list-group-horizontal .list-group-item {
	margin-bottom: 0;
	margin-right: 0;
 	border-right-width: 0;
}
.list-group.list-group-horizontal .list-group-item:first-child {
	border-top-right-radius:0;
	border-bottom-left-radius:4px;
}
.list-group.list-group-horizontal .list-group-item:last-child {
	border-top-right-radius:4px;
	border-bottom-left-radius:0;
	border-right-width: 1px;
}

.border-between > [class*='col-']:before {
	background: #D7D7D7;
	bottom: 0;
	content: " ";
	left: 0;
	position: absolute;
	width: 2px;
	top: 0;
}
.border-between > [class*='col-']:first-child:before {
	display: none;
}
@media (max-width: 575px) { .border-between > [class*='col-']:before { display: none; } }
@media (min-width: 576px) and (max-width: 767px) { .border-between > [class*='col-']:before { display: none; } }
@media (min-width: 768px) and (max-width: 991px) { .border-between > [class*='col-']:before { display: block; } }
@media (min-width: 992px) and (max-width: 1199px) { .border-between > [class*='col-']:before { display: block; } }
@media (min-width: 1200px) { .border-between > [class*='col-']:before { display: block; } }

@media (max-width: 575px) { .toplogo { display: none; } }
@media (min-width: 576px) and (max-width: 767px) { .toplogo { display: none; } }
@media (min-width: 768px) and (max-width: 991px) { .toplogo { width: 318px; height: 64px; display: block; } }
@media (min-width: 992px) and (max-width: 1199px) { .toplogo { width: 318px; height: 64px; display: block; } }
@media (min-width: 1200px) { .toplogo { width: 318px; height: 64px; display: block; } }

@media (max-width: 575px) { .toplogoFA { width: 270px; height: 54px; display: block; } }
@media (min-width: 576px) and (max-width: 767px) { .toplogoFA { width: 270px; height: 54px; display: block; } }
@media (min-width: 768px) and (max-width: 991px) { .toplogoFA { width: 318px; height: 64px; display: block; } }
@media (min-width: 992px) and (max-width: 1199px) { .toplogoFA { width: 318px; height: 64px; display: block; } }
@media (min-width: 1200px) { .toplogoFA { width: 318px; height: 64px; display: block; } }

@media (max-width: 575px) { .toplogomobile { width: 65px; height: 65px; display: block; } }
@media (min-width: 576px) and (max-width: 767px) { .toplogomobile { width: 65px; height: 65px; display: block; } }
@media (min-width: 768px) and (max-width: 991px) { .toplogomobile { display: none; } }
@media (min-width: 992px) and (max-width: 1199px) { .toplogomobile { display: none; } }
@media (min-width: 1200px) { .toplogomobile { display: none; } }

/**********************************************************/
/* OTHER Classes                                          */
/**********************************************************/
.margin-top { margin-top: 20px; }
.margin-bot { margin-bottom: 15px; }
.margin { margin: 20px; }
.marginxs { margin: 5px; }
.marginmd { margin: 10px; }
.padding { padding: 20px; }
.paddingmd { padding: 10px; }
.paddingxs { padding: 5px; }
.paddingtop { padding-top: 10px; }
.paddingtop2 { padding-top: 20px; }
.paddingtop-md { padding-top: 50px; }
.paddingtop-md2 { padding-top: 60px; }
.paddingbottom { padding-bottom: 10px; }
.paddingbottom-md { padding-bottom: 50px; }
.paddingtop-xl { padding-top: 100px; }
.paddingbottom-xl { padding-bottom: 100px; }

.vert-align {
	height: inherit;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.alarme {
	text-align: center;
	padding: 8px;
	margin-top: 6px;
	margin-bottom: 6px;
	background-color: #CC0000;
	color: #fff;
}
@media (max-width: 575px) { .alarme { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .alarme { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .alarme { font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1199px) { .alarme { font-size: 16px; } }
@media (min-width: 1200px) { .alarme { font-size: 18px; } }

.alertInput { border-color: red; }
.modal .modal-dialog { margin-top: 150px; }
.alert, .alert-danger { margin-top: 15px; }

.xs-collapse {
	display: none;
	visibility: visible;
}

.t--light .seemorelink, .t--light .seemorelink:focus { color: #000; text-decoration: none; font-family: 'Alef'; }
.t--light .seemorelink:hover, .t--light .seemorelink:active { color: #575757; text-decoration: none; }
.t--dark .seemorelink, .t--dark .seemorelink:focus { color: #fff; text-decoration: none; font-family: 'Alef'; }
.t--dark .seemorelink:hover, .t--dark .seemorelink:active { color: #d7d7d7; text-decoration: none; }

/*****************************************************************************************/
/* RETURN BUTTON SECTION                                                                 */
/*****************************************************************************************/
.btn-return {
	background-color: #fff;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	z-index: 1;
	top: 73px;
	right: 0;
	padding: 5px;
}
@media (max-width: 575px) {
	.btn-return {
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
		padding: 5px;
		margin-bottom: 10px;
		border: 1px solid #D7D7D7;
	}
}
.t--dark .btn-return { background-color: #363636; }

/*****************************************************************************************/
/* SEND BUTTON SECTION                                                                   */
/*****************************************************************************************/
.btn-send {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	padding-left: 5px;
	padding-right: 5px;
	bottom: 0;
	right: 0;
}
.t--light .btn-send { background-color: #fff; }
.t--dark .btn-send { background-color: #363636; }

/*****************************************************************************************/
/* NOTIFICATION MENU CLASSES                                                             */
/*****************************************************************************************/
.t--light .dropdown-menu, .t--light .dropdown-header { color: #575757 !important; background-color: #fff !important; }
.t--dark .dropdown-menu, .t--dark .dropdown-header { color: #D7D7D7 !important; background-color: #363636 !important; }
.notif-message { font-family: 'Arimo'; font-size: 14px; }
.notif-info { font-size: 12px; }

.t--light .old-notif { color:#000 !important; background-color: #fff !important; }
.t--dark .old-notif { color:#D7D7D7 !important; background-color: #272727 !important; }
.t--light .old-notif .notif-info { color: #575757 !important; }
.t--dark .old-notif .notif-info { color: #D7D7D7 !important; }

.t--light .new-notif { color:#000 !important; background-color: rgba(130, 219, 236, 0.5) !important; }
.t--dark .new-notif { color:#fff !important; background-color: rgba(66, 66, 66, 1) !important; }
.t--light .new-notif .notif-info { color: #0392CF !important; }
.t--dark .new-notif .notif-info { color: #0392CF !important; font-weight: bold; }

/*****************************************************************************************/
/* TITLE CLASSES                                                                         */
/*****************************************************************************************/
@media (max-width: 575px) { .title1 { font-size: 14px; } }
@media (min-width: 576px) and (max-width: 767px) { .title1 { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .title1 { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .title1 { font-size: 16px; } }
@media (min-width: 1200px) { .title1 { font-size: 18px; } }

@media (max-width: 575px) { .title2 { font-size: 15px; } }
@media (min-width: 576px) and (max-width: 767px) { .title2 { font-size: 15px; } }
@media (min-width: 768px) and (max-width: 991px) { .title2 { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .title2 { font-size: 18px; } }
@media (min-width: 1200px) { .title2 { font-size: 20px; } }

@media (max-width: 575px) { .title3 { font-size: 16px; } }
@media (min-width: 576px) and (max-width: 767px) { .title3 { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px) { .title3 { font-size: 20px; } }
@media (min-width: 992px) and (max-width: 1199px) { .title3 { font-size: 22px; } }
@media (min-width: 1200px) { .title3 { font-size: 24px; } }

@media (max-width: 575px) { .title4 { font-size: 14px; } }
@media (min-width: 576px) and (max-width: 767px) { .title4 { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .title4 { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .title4 { font-size: 16px; } }
@media (min-width: 1200px) { .title4 { font-size: 18px; } }

@media (max-width: 575px) { .title5 { font-size: 16px; } }
@media (min-width: 576px) and (max-width: 767px) { .title5 { font-size: 16px; } }
@media (min-width: 768px) and (max-width: 991px) { .title5 { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .title5 { font-size: 18px; } }
@media (min-width: 1200px) { .title5 { font-size: 18px; } }

@media (max-width: 575px) { .title6 { font-size: 32px; font-weight: bold; } }
@media (min-width: 576px) and (max-width: 767px) { .title6 { font-size: 32px; font-weight: bold; } }
@media (min-width: 768px) and (max-width: 991px) { .title6 { font-size: 32px; font-weight: bold; } }
@media (min-width: 992px) and (max-width: 1199px) { .title6 { font-size: 32px; font-weight: bold; } }
@media (min-width: 1200px) { .title6 { font-size: 32px; font-weight: bold; } }

@media (max-width: 575px) { .title7 { font-size: 24px; font-weight: bold; } }
@media (min-width: 576px) and (max-width: 767px) { .title7 { font-size: 25px; font-weight: bold; } }
@media (min-width: 768px) and (max-width: 991px) { .title7 { font-size: 26px; font-weight: bold; } }
@media (min-width: 992px) and (max-width: 1199px) { .title7 { font-size: 28px; font-weight: bold; } }
@media (min-width: 1200px) { .title7 { font-size: 28px; font-weight: bold; } }

/*****************************************************************************************/
/* TEXT CLASSES                                                                          */
/*****************************************************************************************/
@media (max-width: 575px) { .text1 { font-size: 9px; } }
@media (min-width: 576px) and (max-width: 767px) { .text1 { font-size: 9px; } }
@media (min-width: 768px) and (max-width: 991px) { .text1 { font-size: 10px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text1 { font-size: 10px; } }
@media (min-width: 1200px) { .text1 { font-size: 12px; } }

@media (max-width: 575px) { .text2 { font-size: 10px; } }
@media (min-width: 576px) and (max-width: 767px) { .text2 { font-size: 10px; } }
@media (min-width: 768px) and (max-width: 991px) { .text2 { font-size: 11px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text2 { font-size: 12px; } }
@media (min-width: 1200px) { .text2 { font-size: 14px; } }

@media (max-width: 575px) { .text3 { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .text3 { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .text3 { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text3 { font-size: 14px; } }
@media (min-width: 1200px) { .text3 { font-size: 14px; } }

@media (max-width: 575px) { .text4 { font-size: 14px; } }
@media (min-width: 576px) and (max-width: 767px) { .text4 { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .text4 { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text4 { font-size: 16px; } }
@media (min-width: 1200px) { .text4 { font-size: 18px; } }

@media (max-width: 575px) { .text5 { font-size: 10px; } }
@media (min-width: 576px) and (max-width: 767px) { .text5 { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .text5 { font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text5 { font-size: 16px; } }
@media (min-width: 1200px) { .text5 { font-size: 18px; } }

@media (max-width: 575px) { .text6 { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .text6 { font-size: 13px; } }
@media (min-width: 768px) and (max-width: 991px) { .text6 { font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text6 { font-size: 15px; } }
@media (min-width: 1200px) { .text6 { font-size: 16px; } }

@media (max-width: 575px) { .text7 { font-size: 14px; } }
@media (min-width: 576px) and (max-width: 767px) { .text7 { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .text7 { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .text7 { font-size: 16px; } }
@media (min-width: 1200px) { .text7 { font-size: 16px; } }

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

@media (max-width: 575px) { .txtmenu { display: none; } }
@media (min-width: 576px) and (max-width: 767px) { .txtmenu { display: none; } }
@media (min-width: 768px) and (max-width: 991px) { .txtmenu { display: inline; font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1199px) { .txtmenu { display: inline; font-size: 14px; } }
@media (min-width: 1200px) { .txtmenu { display: inline; font-size: 14px; } }

@media (max-width: 575px) { .typeconces { text-align: center; } .aff-ctrl { min-height: 0px; } }
@media (min-width: 576px) and (max-width: 767px) { .typeconces { text-align: center; } .aff-ctrl { min-height: 0px; } }
@media (min-width: 768px) and (max-width: 991px) {
	.typeconces { text-align: center; }
	.aff-ctrl {
		min-height: 0px;
		border: none;
		margin: 0px;
		padding: 0px;
	}
	.xs-collapse {
		display: block;
		visibility: visible;
	}
	.xs-toggle {
		display: none;
		visibility: hidden;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.typeconces { text-align: left; }
	.aff-ctrl {
		min-height: 0px;
		border: none;
		margin: 0px;
		padding: 0px;
	}
	.xs-collapse {
		display: block;
		visibility: visible;
	}
	.xs-toggle {
		display: none;
		visibility: hidden;
	}
}
@media (min-width: 1200px) {
	.typeconces { text-align: left; }
	.aff-ctrl {
		min-height: 0px;
		border: none;
		margin: 0px;
		padding: 0px;
	}
	.xs-collapse {
		display: block;
		visibility: visible;
	}
	.xs-toggle {
		display: none;
		visibility: hidden;
	}
}
.t--light .aff-ctrl {
	background-color: #fff;
	color: #000;
}
.t--dark .aff-ctrl {
	background-color: #272727;
	color: #fff;
}

/*******************************************************************************************************/
/* CLASS TO SHOW                                                                                       */
/*******************************************************************************************************/
@media (max-width: 575px) { .iconconces { text-align: center; } }
@media (min-width: 576px) and (max-width: 767px) { .iconconces { text-align: center; } }
@media (min-width: 768px) and (max-width: 991px) { .iconconces { text-align: right; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconconces { text-align: right; } }
@media (min-width: 1200px) { .iconconces { text-align: right; } }

@media (max-width: 575px) { .iconfeedings { text-align: center; } .iconfeedings img { width: 60px; height: 60px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconfeedings { text-align: center; } .iconfeedings img { width: 60px; height: 60px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconfeedings { text-align: center; } .iconfeedings img { width: 40px; height: 40px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconfeedings { text-align: right; } .iconfeedings img { width: 35px; height: 35px; } }
@media (min-width: 1200px) { .iconfeedings { text-align: right; } .iconfeedings img { width: 40px; height: 40px; } }

.iconingr { text-align: center; }
@media (max-width: 575px) { .iconingr img { width: 30px; height: 30px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconingr img { width: 30px; height: 30px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconingr img { width: 30px; height: 30px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconingr img { width: 35px; height: 30px; } }
@media (min-width: 1200px) { .iconingr img { width: 40px; height: 40px; } }

.ctrlconces { font-weigth: bold; }
@media (max-width: 575px) { .ctrlconces { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .ctrlconces { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .ctrlconces { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .ctrlconces { font-size: 13px; } }
@media (min-width: 1200px) { .ctrlconces { font-size: 13px; } }

.onoffline img { vertical-align: middle; text-align: center; }
@media (max-width: 575px) { .onoffline img { width: 25px; height: 25px; } }
@media (min-width: 576px) and (max-width: 767px) { .onoffline img { width: 35px; height: 35px; } }
@media (min-width: 768px) and (max-width: 991px) { .onoffline img { width: 20px; height: 20px; } }
@media (min-width: 992px) and (max-width: 1199px) { .onoffline img { width: 25px; height: 25px; } }
@media (min-width: 1200px) { .onoffline img { width: 30px; height: 30px; } }

.imghorsligne { vertical-align: middle; }
@media (max-width: 575px) { .imghorsligne { width: 40px; height: 40px; } }
@media (min-width: 576px) and (max-width: 767px) { .imghorsligne { width: 40px; height: 40px; } }
@media (min-width: 768px) and (max-width: 991px) { .imghorsligne { width: 30px; height: 30px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imghorsligne { width: 25px; height: 25px; } }
@media (min-width: 1200px) { .imghorsligne { width: 30px; height: 30px; } }

.imgview1x1 { vertical-align: middle; }
@media (max-width: 575px) { .imgview1x1 { width: 30px; height: 30px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview1x1 { width: 30px; height: 30px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview1x1 { width: 30px; height: 30px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview1x1 { width: 30px; height: 30px; } }
@media (min-width: 1200px) { .imgview1x1 { width: 30px; height: 30px; } }

.imgview2x2 { vertical-align: middle; }
@media (max-width: 575px) { .imgview2x2 { width: 30px; height: 30px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview2x2 { width: 45px; height: 45px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview2x2 { width: 40px; height: 40px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview2x2 { width: 50px; height: 50px; } }
@media (min-width: 1200px) { .imgview2x2 { width: 65px; height: 65px; } }

.imgview3x3 { vertical-align: middle; }
@media (max-width: 575px) { .imgview3x3 { width: 30px; height: 30px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview3x3 { width: 45px; height: 45px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview3x3 { width: 40px; height: 40px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview3x3 { width: 50px; height: 50px; } }
@media (min-width: 1200px) { .imgview3x3 { width: 65px; height: 65px; } }

.imgview { vertical-align: middle; }
@media (max-width: 575px) { .imgview { width: 30px; height: 30px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview { width: 45px; height: 45px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview { width: 40px; height: 40px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview { width: 50px; height: 50px; } }
@media (min-width: 1200px) { .imgview { width: 65px; height: 65px; } }

.imgview2 { vertical-align: middle; }
@media (max-width: 575px) { .imgview2 { width: 40px; height: 40px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview2 { width: 40px; height: 40px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview2 { width: 25px; height: 25px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview2 { width: 30px; height: 30px; } }
@media (min-width: 1200px) { .imgview2 { width: 40px; height: 40px; } }

.imgview3 { vertical-align: middle; }
@media (max-width: 575px) { .imgview3 { width: 25px; height: 25px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview3 { width: 25px; height: 25px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview3 { width: 30px; height: 30px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview3 { width: 35px; height: 35px; } }
@media (min-width: 1200px) { .imgview3 { width: 35px; height: 35px; } }

.imgview4 { vertical-align: middle; }
@media (max-width: 575px) { .imgview4 { width: 23px; height: 23px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgview4 { width: 23px; height: 23px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgview4 { width: 25px; height: 25px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgview4 { width: 28px; height: 28px; } }
@media (min-width: 1200px) { .imgview4 { width: 30px; height: 30px; } }

@media (max-width: 575px) { .imgmobile { width: 192px; height: 340px; } }
@media (min-width: 576px) and (max-width: 767px) { .imgmobile { width: 192px; height: 340px; } }
@media (min-width: 768px) and (max-width: 991px) { .imgmobile { width: 192px; height: 340px; } }
@media (min-width: 992px) and (max-width: 1199px) { .imgmobile { width: 192px; height: 340px; } }
@media (min-width: 1200px) { .imgmobile { width: 192px; height: 340px; } }

.tbltitle { padding-top: 5px; padding-bottom: 5px; font-weight: bold; }
@media (max-width: 575px) { .tbltitle { font-size: 9px; } }
@media (min-width: 576px) and (max-width: 767px) { .tbltitle { font-size: 9px; } }
@media (min-width: 768px) and (max-width: 991px) { .tbltitle { font-size: 11px; } }
@media (min-width: 992px) and (max-width: 1199px) { .tbltitle { font-size: 12px; } }
@media (min-width: 1200px) { .tbltitle { font-size: 13px; } }

.aff-ligne { padding: 10px; font-size: 18px; }

.affsond { padding-top: 5px; padding-bottom: 5px; }
@media (max-width: 575px) { .affsond { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .affsond { font-size: 13px; } }
@media (min-width: 768px) and (max-width: 991px) { .affsond { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affsond { font-size: 18px; } }
@media (min-width: 1200px) { .affsond { font-size: 18px; } }

@media (max-width: 575px) { .affmain { text-align: right; padding: 5px; margin-top: 5px; margin-bottom: 5px; } }
@media (min-width: 576px) and (max-width: 767px) { .affmain { text-align: right; padding: 5px; margin-top: 5px; margin-bottom: 5px; } }
@media (min-width: 768px) and (max-width: 991px) { .affmain { text-align: center; padding: 5px; margin-top: 5px; margin-bottom: 5px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affmain { text-align: center; padding: 5px; margin-top: 5px; margin-bottom: 5px; } }
@media (min-width: 1200px) { .affmain { text-align: center; padding: 5px; margin-top: 5px; margin-bottom: 5px; } }

.affingr { margin-top: 5px; margin-bottom: 5px; }
@media (max-width: 575px) { .affingr { font-size: 10px; padding-top: 5px; padding-bottom: 5px; } }
@media (min-width: 576px) and (max-width: 767px) { .affingr { font-size: 10px; padding-top: 5px; padding-bottom: 5px; } }
@media (min-width: 768px) and (max-width: 991px) { .affingr { font-size: 11px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affingr { font-size: 12px; } }
@media (min-width: 1200px) { .affingr { font-size: 13px; } }

.affingrpara {
	font-weight: bold;
	color: #272727;
	padding-top: 10px;
	padding-bottom: 10px;
}
@media (max-width: 575px) { .affingrpara { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .affingrpara { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .affingrpara { font-size: 12px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affingrpara { font-size: 13px; } }
@media (min-width: 1200px) { .affingrpara { font-size: 14px; } }

.affingrligne {
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
@media (max-width: 575px) { .affingrligne { font-size: 8px; } }
@media (min-width: 576px) and (max-width: 767px) { .affingrligne { font-size: 9px; } }
@media (min-width: 768px) and (max-width: 991px) { .affingrligne { font-size: 10px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affingrligne { font-size: 12px; } }
@media (min-width: 1200px) { .affingrligne { font-size: 13px; } }

.affview {
	text-align: center;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media (max-width: 575px) { .affview { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .affview { font-size: 13px; } }
@media (min-width: 768px) and (max-width: 991px) { .affview { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affview { font-size: 18px; } }
@media (min-width: 1200px) { .affview { font-size: 20px; } }

.settingsPanel {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	margin-top: 15px;
	padding: 10px;
}
@media (max-width: 575px) { .settingsPanel { font-size: 13px; } }
@media (min-width: 576px) and (max-width: 767px) { .settingsPanel { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .settingsPanel { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .settingsPanel { font-size: 15px; } }
@media (min-width: 1200px) { .settingsPanel { font-size: 18px; } }

@media (max-width: 575px) { .info-nom { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-nom { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-nom { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-nom { font-size: 16px; } }
@media (min-width: 1200px) { .info-nom { font-size: 18px; } }

@media (max-width: 575px) { .info-nom1x1 { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-nom1x1 { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-nom1x1 { font-size: 12px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-nom1x1 { font-size: 12px; } }
@media (min-width: 1200px) { .info-nom1x1 { font-size: 12px; } }

@media (max-width: 575px) { .info-nom2x2 { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-nom2x2 { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-nom2x2 { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-nom2x2 { font-size: 16px; } }
@media (min-width: 1200px) { .info-nom2x2 { font-size: 18px; } }

@media (max-width: 575px) { .info-nom3x3 { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-nom3x3 { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-nom3x3 { font-size: 13px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-nom3x3 { font-size: 16px; } }
@media (min-width: 1200px) { .info-nom3x3 { font-size: 18px; } }

@media (max-width: 575px) { .info-unit { font-size: 18px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-unit { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-unit { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-unit { font-size: 18px; } }
@media (min-width: 1200px) { .info-unit { font-size: 20px; } }

@media (max-width: 575px) { .info-unit1x1 { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-unit1x1 { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-unit1x1 { font-size: 12px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-unit1x1 { font-size: 12px; } }
@media (min-width: 1200px) { .info-unit1x1 { font-size: 12px; } }

@media (max-width: 575px) { .info-unit2x2 { font-size: 18px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-unit2x2 { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-unit2x2 { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-unit2x2 { font-size: 18px; } }
@media (min-width: 1200px) { .info-unit2x2 { font-size: 20px; } }

@media (max-width: 575px) { .info-unit3x3 { font-size: 18px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-unit3x3 { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-unit3x3 { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-unit3x3 { font-size: 18px; } }
@media (min-width: 1200px) { .info-unit3x3 { font-size: 20px; } }

@media (max-width: 575px) { .filling-legend { font-size: 11px; } }
@media (min-width: 576px) and (max-width: 767px) { .filling-legend { font-size: 11px; } }
@media (min-width: 768px) and (max-width: 991px) { .filling-legend { font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1199px) { .filling-legend { font-size: 16px; } }
@media (min-width: 1200px) { .filling-legend { font-size: 18px; } }

@media (max-width: 575px) { .ing-filling { font-size: 13px; } }
@media (min-width: 576px) and (max-width: 767px) { .ing-filling { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .ing-filling { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .ing-filling { font-size: 16px; } }
@media (min-width: 1200px) { .ing-filling { font-size: 18px; } }

.connect-info {
	text-align: center;
	padding: 15px;
	margin: 5px;
	font-size: 18px;
}

.t--light .list-desact { background-color: #d7d7d7 !important; border: none; }
.t--dark .list-desact { background-color: #464646 !important; border: none; }

.t--light .list-background { background-color: #FFF; }
.t--dark .list-background { background-color: #272727; }

.aff {
	text-align: center;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media(max-width: 575px) { .aff { font-size: 13px; } }
@media(min-width: 576px) and (max-width: 767px) { .aff { font-size: 15px; } }
@media(min-width: 768px) and (max-width: 991px) { .aff { font-size: 16px; } }
@media(min-width: 992px) and (max-width: 1199px) { .aff { font-size: 18px; } }
@media(min-width: 1200px) { .aff { font-size: 20px; } }

.aff a {
	color: inherit;
	text-decoration: none;
	display: block;
}

.aff2 {
	padding: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 20px;
}

.aff3 {
	padding: 20px;
	margin-top: 10px;
	margin-bottom: 30px;
	font-size: 18px;
	text-align: center;
}

.aff4 {
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}
@media(max-width: 575px) { .aff4 { font-size: 12px; } }
@media(min-width: 576px) and (max-width: 767px) { .aff4 { font-size: 13px; } }
@media(min-width: 768px) and (max-width: 991px) { .aff4 { font-size: 14px; } }
@media(min-width: 992px) and (max-width: 1199px) { .aff4 { font-size: 16px; } }
@media(min-width: 1200px) { .aff4 { font-size: 18px; } }

.afftitle {
	padding: 5px;
	font-size: 18px;
	text-align: center;
}

.aff-welcome {
	text-align: center;
	padding: 10px;
	margin: 10px;
	font-size: 20px;
}
.t--dark .aff-welcome { background-color: #272727; }

.aff-balpoid {
	padding: 5px;
}
@media(max-width: 575px) { .aff-balpoid { font-size: 12px; } }
@media(min-width: 576px) and (max-width: 767px) { .aff-balpoid { font-size: 13px; } }
@media(min-width: 768px) and (max-width: 991px) { .aff-balpoid { font-size: 14px; } }
@media(min-width: 992px) and (max-width: 1199px) { .aff-balpoid { font-size: 16px; } }
@media(min-width: 1200px) { .aff-balpoid { font-size: 18px; } }

.aff-filling {
	padding: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.aff-unloading {
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 18px;
}

.ivrStatePanel {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.ctrltitle {
	padding-top: 8px;
	padding-bottom: 5px;
	font-size: 18px;
	text-align: center;
}

.aff-ctrl, .aff-ctrl:focus {
	color: #000;
	display: block;
	text-decoration: none;
	margin-top: 15px;
	margin-bottom: 15px;
}
.aff-ctrl:hover, .aff-ctrl:active {
	background-color: #D7D7D7;
	color:#000;
	display: block;
	text-decoration: none;
}
.t--dark .aff-ctrl:hover, .t--dark .aff-ctrl:active {
	background-color: #424242;
	color: #fff;
}

.darklink, .darklink:focus {
	color:#979797;
	display: block;
	text-decoration: none;
	padding: 5px 15px 5px 15px;
	cursor: pointer;
	font-size: 17px;
}
.darklink:hover, .darklink:active {
	color: #fff;
}

.affminuteri {
	padding: 5px;
	margin: 5px;
}

.affinventory {
	padding: 15px;
	border: 1px solid #D7D7D7;
	font-size: 15px;
}

.ing-active {
	color: #fff;
	background-color: #323232;
}

/**********************************************************/
/* DATE-PICKER Classes                                    */
/**********************************************************/
.date-picker {
	padding: 10px;
	font-size: 15px;
	margin-bottom: 15px;
}
.affdatepick { border: 1px solid #D7D7D7; }

.affligne {
	text-align: left;
	padding: 5px;
	border: 1px solid #D7D7D7;
	font-size: 15px;
}

.afftable {
	text-align: left;
	padding: 5px;
}
@media(max-width: 575px) { .afftable { font-size: 12px; } }
@media(min-width: 576px) and (max-width: 767px) { .afftable { font-size: 12px; } }
@media(min-width: 768px) and (max-width: 991px) { .afftable { font-size: 14px; } }
@media(min-width: 992px) and (max-width: 1199px) { .afftable { font-size: 16px; } }
@media(min-width: 1200px) { .afftable { font-size: 18px; } }

.aff-version {
	padding-top:15px;
	padding-bottom: 15px;
	padding-left: 25px;
	padding-right: 25px;
	margin-top: 5px;
	margin-bottom: 5px;
}
@media(max-width: 575px) { .aff-version { font-size: 12px; } }
@media(min-width: 576px) and (max-width: 767px) { .aff-version { font-size: 12px; } }
@media(min-width: 768px) and (max-width: 991px) { .aff-version { font-size: 14px; } }
@media(min-width: 992px) and (max-width: 1199px) { .aff-version { font-size: 15px; } }
@media(min-width: 1200px) { .aff-version { font-size: 15px; } }

.versionPanel {
	padding: 20px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.aff-edit {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 25px;
	padding-right: 25px;
	font-size: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.aff-date {
	color: #fff;
	text-align: center;
	margin-top: 3px;
	margin-bottom: 3px;
	font-size: 15px;
	background-color: #f99138;
	width: 100%;
}

.aff-entete {
	color: #fff;
	padding: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #383838;
	width: 100%;
	display: block;
}

.aff-iencour {
	color: #fff;
	padding: 2px;
	background-color: #878787;
}
.aff-feedingStep {
	padding: 5px;
	margin: 10px;
	border: 1px solid #D7D7D7;
	font-size: 15px;
}
.aff-feedingsParam { padding-top: 12px; }
.ctrlconces {
	padding-top: 12px;
	color: #272727;
}
.afftun {
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 18px;
}
.panel-custom { margin: 10px; }

/*******************************************************************************************************/
/* CLASS TO SHOW CONTROLLER IN LINE                                                                    */
/*******************************************************************************************************/
.affctrlligne {
	padding: 5px;
	font-size: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
}
@media (max-width: 575px) { .affctrlligne { font-size: 10px; } }
@media (min-width: 576px) and (max-width: 767px) { .affctrlligne { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 991px) { .affctrlligne { font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1199px) { .affctrlligne { font-size: 15px; } }
@media (min-width: 1200px) { .affctrlligne { font-size: 15px; } }

/*******************************************************************************************************/
/* CLASS TO SHOW THE TUNNEL STATE IN THE DEALER SCREEN                                                 */
/*******************************************************************************************************/
.info-client {
	padding: 5px;
	background-color: #fff;
	color: #272727;
}
.tunnel {
	padding: 10px;
	margin: 5px;
}
@media (max-width: 575px) { .info-client { font-size: 12px; } }
@media (min-width: 576px) and (max-width: 767px) { .info-client { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .info-client { font-size: 15px; } }
@media (min-width: 992px) and (max-width: 1199px) { .info-client { font-size: 18px; } }
@media (min-width: 1200px) { .icon-client { font-size: 18px; } }
.settconces {
	padding: 2px;
	margin: 5px;
}

/*******************************************************************************************************/
/* CLASS FOR DEALER SCREEN ACCORDION                                                                   */
/*******************************************************************************************************/
.accordiontitle {
	display: block;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	padding: 15px;
	cursor: pointer;
}
@media (max-width: 575px) { .accordiontitle { font-size: 13px; } }
@media (min-width: 576px) and (max-width: 767px) { .accordiontitle { font-size: 15px; } }
@media (min-width: 768px) and (max-width: 991px) { .accordiontitle { font-size: 16px; } }
@media (min-width: 992px) and (max-width: 1199px) { .accordiontitle { font-size: 18px; } }
@media (min-width: 1200px) { .accordiontitle { font-size: 20px; } }

.linkconces { background-color: #4CA64C; }
.linkconces:hover, .linkconces:active, .linkconces:focus { background-color: #007CBD; }
.linkinact { background-color: #FF1919; }
.linkinact:hover, .linkinact:active, .linkinact:focus { background-color: #007CBD; }
.linkalarm { background-color: #E59400; }
.linkalarm:hover, .linkalarm:active, .linkalarm:focus { background-color: #007CBD; }
.openconces { background-color: #007CBD; }

.linknoctrl { background-color: #E5C82F; }
.linknoctrl:hover, .linknoctrl:active, .linknoctrl:focus { background-color: #007CBD; }
.linktablette { background-color: #B2B2B2; }
.linktablette:hover, .linktablette:active, .linktablette:focus { background-color: #007CBD; }
.linkMaintenance, .linkMaintenance:hover, .linkMaintenance:active, .linkMaintenance:focus { background-color: #CB37FC; }
.linkMaintenanceFailed, .linkMaintenanceFailed:hover, .linkMaintenanceFailed:active, .linkMaintenanceFailed:focus {
	background-color: black;
	color: white;
}
.haveUnsupportedCtrl {background-color: #FD6C9E;}
.haveUnsupportedCtrl.linkconces {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#4CA64C 10px,#4CA64C 20px )!important;}
.haveUnsupportedCtrl.openconces, .haveUnsupportedCtrl:hover {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#007CBD 10px,#007CBD 20px )!important;}
.haveUnsupportedCtrl.linkinact {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#FF1919 10px,#FF1919 20px )!important;}
.haveUnsupportedCtrl.linkalarm {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#E59400 10px,#E59400 20px )!important;}
.haveUnsupportedCtrl.linknoctrl {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#E5C82F 10px,#E5C82F 20px )!important;}
.haveUnsupportedCtrl.linktablette {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#B2B2B2 10px,#B2B2B2 20px )!important;}
.haveUnsupportedCtrl.linkMaintenance {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,#CB37FC 10px,#CB37FC 20px )!important;}
.haveUnsupportedCtrl.linkMaintenanceFailed {background: repeating-linear-gradient(45deg,#FD6C9E,#FD6C9E 10px,black 10px,black 20px )!important;}

.linkicon:hover, .linkicon:active { background-color: #D7D7D7; cursor: pointer; }

.iconsize { padding: 5px; }
@media (max-width: 575px) { .iconsize { font-size: 45px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconsize { font-size: 45px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconsize { font-size: 28px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconsize { font-size: 28px; } }
@media (min-width: 1200px) { .iconsize { font-size: 32px; } }

.iconsize2 { padding: 5px; }
@media (max-width: 575px) { .iconsize2 { font-size: 38px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconsize2 { font-size: 34px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconsize2 { font-size: 26px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconsize2 { font-size: 26px; } }
@media (min-width: 1200px) { .iconsize2 { font-size: 30px; } }

.iconsize3 { padding: 5px; }
@media (max-width: 575px) { .iconsize3 { font-size: 26px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconsize3 { font-size: 28px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconsize3 { font-size: 28px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconsize3 { font-size: 30px; } }
@media (min-width: 1200px) { .iconsize3 { font-size: 32px; } }

.iconsize4 { padding: 1px; }
@media (max-width: 575px) { .iconsize4 { font-size: 38px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconsize4 { font-size: 34px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconsize4 { font-size: 26px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconsize4 { font-size: 26px; } }
@media (min-width: 1200px) { .iconsize4 { font-size: 30px; } }

@media (max-width: 575px) { .iconsize5 { font-size: 30px; } }
@media (min-width: 576px) and (max-width: 767px) { .iconsize5 { font-size: 30px; } }
@media (min-width: 768px) and (max-width: 991px) { .iconsize5 { font-size: 26px; } }
@media (min-width: 992px) and (max-width: 1199px) { .iconsize5 { font-size: 26px; } }
@media (min-width: 1200px) { .iconsize5 { font-size: 10px; } }

.legendconces { background-color: #4CA64C; }
.legendconces:hover, .legendconces:active, .legendconces:focus { background-color: #4CA64C; }
.legendinact { background-color: #FF1919; }
.legendinact:hover, .legendinact:active, .legendconces:focus { background-color: #FF1919; }
.legendalarm { background-color: #E59400; }
.legendalarm:hover, .legendalarm:active, .legendalarm:focus { background-color: #E59400; }
.legendnoctrl { background-color: #E5C82F; }
.legendnoctrl:hover, .legendnoctrl:active, legendnoctrl: focus { background-color: #E5C82F; }
.legendtablette { background-color: #B2B2B2; }
.legendtablette:hover, .linktablette:active, .linktablette:focus { background-color: #B2B2B2; }

.alignright { float: right; }
.aligncenter { text-align: center; }

.affactive { padding: 5px; }
.titre {
	font-size: 18px;
	text-align: center;
	padding-top: 10px;
}

.hligne {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 20px;
	text-decoration: none;
}

.hligneMain {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 18px;
	text-decoration: none;
}
.t--light .shadow-box { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
.t--dark .shadow-box { box-shadow: 0 -2px 10px 0 rgba(0,0,0,1); }

.panel-centre {
	padding: 30px;
	width: 90%;
	min-height: 500px;
	min-width: 300px;
	max-width: 1250px;
	margin: 0 auto;
	background-color:#fff;
}

.panelCtrl {
	margin-top: 10px;
	margin-bottom: 10px;
}
.t--light .panelCtrl { background-color: #fff; }
.t--dark .panelCtrl { background-color: #272727; }

.panelSThour {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.inventinact { background-color: #DDD !important; color: #CCC !important; }
.inventalarm { background-color: #E52D2D !important; }

/**********************************************************/
/* GEA Special Classes                                    */
/**********************************************************/
.logo-gea {
	height: 72px;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #fff;
	float: right;
	text-align: center;
}

/**********************************************************/
/* DROPDOWN MENU                                          */
/**********************************************************/
.dropdown-menu.notify-drop {
  min-width: 330px;
  background-color: #fff;
  min-height: 360px;
  max-height: 360px;
}
.dropdown-menu.notify-drop .notify-drop-title {
  border-bottom: 1px solid #e2e2e2;
  padding: 5px 15px 10px 15px;
}
.dropdown-menu.notify-drop .drop-content {
  min-height: 280px;
  max-height: 280px;
  overflow-y: scroll;
}
.dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

.dropdown-menu.notify-drop .drop-content::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

.dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.dropdown-menu.notify-drop .drop-content > li {
  border-bottom: 1px solid #e2e2e2;
  padding: 10px 0px 5px 0px;
}
.dropdown-menu.notify-drop .drop-content > li:nth-child(2n+0) {
  background-color: #fafafa;
}
.dropdown-menu.notify-drop .drop-content > li:after {
  content: "";
  clear: both;
  display: block;
}
.dropdown-menu.notify-drop .drop-content > li:hover {
  background-color: #fcfcfc;
}
.dropdown-menu.notify-drop .drop-content > li:last-child {
  border-bottom: none;
}
.dropdown-menu.notify-drop .drop-content > li .notify-img {
  float: left;
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 0px 0px 8px 0px;
}
.dropdown-menu.notify-drop .allRead {
  margin-right: 7px;
}
.dropdown-menu.notify-drop .rIcon {
  float: right;
  color: #999;
}
.dropdown-menu.notify-drop .rIcon:hover {
  color: #333;
}
.dropdown-menu.notify-drop .drop-content > li a {
  font-size: 12px;
  font-weight: normal;
}
.dropdown-menu.notify-drop .drop-content > li {
  font-weight: bold;
  font-size: 11px;
}
.dropdown-menu.notify-drop .drop-content > li hr {
  margin: 5px 0;
  width: 70%;
  border-color: #e2e2e2;
}
.dropdown-menu.notify-drop .drop-content .pd-l0 {
  padding-left: 0;
}
.dropdown-menu.notify-drop .drop-content > li p {
  font-size: 11px;
  color: #666;
  font-weight: normal;
  margin: 3px 0;
}
.dropdown-menu.notify-drop .drop-content > li p.time {
  font-size: 10px;
  font-weight: 600;
  top: -6px;
  margin: 8px 0px 0px 0px;
  padding: 0px 3px;
  border: 1px solid #e2e2e2;
  position: relative;
  background-image: linear-gradient(#fff,#f2f2f2);
  display: inline-block;
  border-radius: 2px;
  color: #B97745;
}
.dropdown-menu.notify-drop .drop-content > li p.time:hover {
  background-image: linear-gradient(#fff,#fff);
}
.dropdown-menu.notify-drop .notify-drop-footer {
  border-top: 1px solid #e2e2e2;
  bottom: 0;
  position: relative;
  padding: 8px 15px;
}
.dropdown-menu.notify-drop .notify-drop-footer a {
  color: #777;
  text-decoration: none;
}
.dropdown-menu.notify-drop .notify-drop-footer a:hover {
  color: #333;
}

.circle-progressbar,
.circle-progressbar-sm,
.circle-progressbar-md{
	margin: 20px;
	position: relative;
  }

.circle-progressbar-container,
.circle-progressbar-container-sm,
.circle-progressbar-container-md{
	margin-left: 20px;
	margin-right: 20px;
	position: relative;
}

.circle-progressbar-container{width: 100px;}
.circle-progressbar{
	width: 65px;
	height: 65px;
}

.circle-progressbar-container-sm{width: 100px;}
.circle-progressbar-sm{
	width: 100px;
	height: 100px;
}

.circle-progressbar-container-md{width: 200px;}
.circle-progressbar-md{
	width: 200px;
	height: 200px;
}