@font-face {
    font-family: 'ralewayextralight';
    src: url('../font/raleway-extralight-webfont.woff2') format('woff2'),
         url('../font/raleway-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
	
}

body {
	font-family: 'ralewayextralight', sans-serif;
}

/* --- General --- */


/* --- CUSTOMIZE UI --- */
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
	background-color: transparent;
	border-color: transparent;
	color: black;
	text-shadow: none;
}

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
	background-color: #999999;
	border-color: #999999;
	color: black;
	text-shadow: none;
	font-weight: 200;
}
.mobile-btn {
	background-color: #999999 !important;
	border: 0;
}

/* --- Footer / Header --- */
#footer-login, #footer-permanent {
	background-color: white; /* #e617a9 */
	color: darkgrey;
    border-color: white;
}
#header-bar, #info-panel-button {
	background-color: #5ed7f3 !important;
    color: white;
    border-color: transparent;
}
.footer-buttons {
    border-top: 1px solid #eee;
    padding-top: 0.3em;
}

.ui-page {
	/*background: #EDEDED;*/ /* Old browsers */
	/*background: -moz-radial-gradient(center, ellipse cover,  #EDEDED 1%, #999999 100%);*/ /* FF3.6+ */
	/*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#EDEDED), color-stop(100%,#999999));*/ /* Chrome,Safari4+ */
	/*background: -webkit-radial-gradient(center, ellipse cover,  #EDEDED 1%,#999999 100%);*/ /* Chrome10+,Safari5.1+ */
	/*background: -o-radial-gradient(center, ellipse cover,  #EDEDED 1%,#999999 100%);*/ /* Opera 12+ */
	/*background: -ms-radial-gradient(center, ellipse cover,  #EDEDED 1%,#999999 100%);*/ /* IE10+ */
	/*background: radial-gradient(ellipse at center,  #EDEDED 1%,#999999 100%);*/ /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#999999',GradientType=1 );*/ /* IE6-9 fallback on horizontal gradient */
	background-color: white;
    height: calc(100vh);
	width: 100%;
	color: black;
	font-size: 16px;
}

/* --- ICONS --- */
.ui-alt-icon.ui-icon-bars::after, .ui-alt-icon .ui-icon-bars::after,
.ui-btn-icon-left:after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after {
	background-color: transparent;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.mobile-btn-center {
	margin: 0.4em 0 0 1.5em !important;
}
.ui-icon-wa-burger::after {
    background-image: url("../icons/menu_filled-w-25.png");
}
.ui-icon-wa-contact::after {
    background-image: url("../icons/email-w-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-close::after {
    background-image: url("../icons/delete_sign-w-25.png");
    background-size: 20px 20px;
}
.ui-icon-wa-home::after {
    background-image: url("../icons/home-w-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-back::after {
    background-image: url("../icons/long-arrow-left-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-refresh::after {
    background-image: url("../icons/synchronize-w-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-skype::after {
    background-image: url("../icons/skype_copyrighted-w-25.png");
    background-size: 22px 22px;
}
.ui-icon-wa-phone::after {
    background-image: url("../icons/ringer_volume-w-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-list::after {
    background-image: url("../icons/list-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-sign-out::after {
	background-image: url("../icons/sign-out-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-qrcode::after {
	background-image: url("../icons/qrcode-filled-pink.png");
    background-size: 111px 96px;
    height: 96px;
}
.ui-icon-wa-camera::after {
	background-image: url("../icons/camera-w-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-info::after {
	background-image: url("../icons/profile-w-25.png");
    background-size: 24px 24px;
}
.ui-icon-wa-export::after {
	background-image: url("../icons/export-25.png");
    background-size: 24px 24px;    
}

.ui-block-button-footer a {
	background-color: transparent !important;
}

.ui-icon-wa-qrcode-2 {
	background-image: url("../icons/qrcode-filled-pink.png");
	background-size: 70px 61px;
	height: 61px;
	width: 70px;
	display: block;
	position: absolute;
	margin: -15px 0 0 3px;
}

/* --- Login --- */
body.login {
    overflow-y: hidden;
}
#header-login-logo {
    text-align: center;
}
#header-login-logo img {
    width: 100px;
}
.login-input {
    border: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 2em;
}
.submit-button {
    background-color: #e92b8f !important;
    color: white !important;
    text-shadow: none !important;
    padding: 0.5em 3.8em;
    border: 0;
    border-color: inherit !important;
    border-radius: 30px !important;
    font-weight: 400;
}
.login-submit-area {
    margin-top: 3em;
}

/* --- Current ICONS (Replacement) --- */
.ui-icon-delete::after {
	background-image: url("../icons/delete_sign-25.png");
}
.ui-icon-carat-r::after {
	background-image: url("../icons/forward-25.png");	
}
.news-items.ui-icon-carat-r::after {
	background-image: url("../icons/forward-w-25.png");	
}

/* --- INTRO --- */
#intro {
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
/*	background-color: rgba(0, 0, 0, 1);*/
	z-index: 10000;
	cursor: pointer;
	background: #E92B8F; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #E92B8F 1%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#E92B8F), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #E92B8F 1%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #E92B8F 1%,#000000 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #E92B8F 1%,#000000 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #E92B8F 1%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E92B8F', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	height:calc(100vh);
	width:100%;
}
#intro-text {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 2em;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	text-align: center;
}
#intro-text img.logo {
	width: 85%;
}

.center {
	text-align: center !important;
}

/* Menu LEFT */
#nav-panel {
	background-color: #f6f6f6 !important;
}
.role-divider {
	background-color: #f6f6f6 !important;
	border-color: lightgray !important;
	color: darkgray !important;
	text-shadow: none !important;
	font-weight: 700 !important;
	border-top-width: 1px !important;
	font-size: 1.2em;
}
.role-font-family,
.role-font-family li > a {
	font-family: 'ralewayextralight', sans-serif;
}

.ui-listview > .ui-li-static, .ui-listview > .ui-li-divider, .ui-listview > li > a.ui-btn {
	border-width: 0px 0 0;
}
.menu-icon-home {
	/*padding: 0 0 0 1em;*/
}
.menu-icon-home:before,
.menu-icon-news:before,
.menu-icon-tools:before,
.menu-icon-customer:before,
.menu-icon-cv:before,
.menu-icon-profile:before,
.menu-icon-portfolio:before,
.menu-icon-github:before,
.menu-icon-phone:before,
.menu-icon-skype:before,
.menu-icon-contact:before
.menu-icon-qrcode:before
{
	background-size: 18px 18px;
	background-repeat: no-repeat;
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	padding: 0 0 0 0.7em;
	background-position-y: 2px;
}
.menu-icon-home:before {
	background-image: url("../icons/home-25.png");
}
.menu-icon-news:before {
	background-image: url("../icons/wow_button-25.png");
}
.menu-icon-tools:before {
	background-image: url("../icons/project_management-25.png");
}
.menu-icon-customer:before {
	background-image: url("../icons/manager-25.png");
}
.menu-icon-cv:before {
	background-image: url("../icons/address_book-25.png");
}
.menu-icon-profile:before {
	background-image: url("../icons/linux-25.png");
}
.menu-icon-portfolio:before {
	background-image: url("../icons/image_gallery-25.png");
}
.menu-icon-github:before {
	background-image: url("../icons/github_2-25.png");
}
.menu-icon-phone:before {
	background-image: url("../icons/ringer_volume-25.png");
}
.menu-icon-skype:before {
	background-image: url("../icons/skype_copyrighted-25.png");
}
.menu-icon-contact:before {
	background-image: url("../icons/email-25.png");
}
.menu-icon-qrcode:before {
	background-image: url("../icons/qrcode-w-25.png");
}

/* --- General --- */
.fs12 {
	font-size: 1.2em !important;
}
.fs09 {
    font-size: 0.9em !important;
}
.fs08 {
    font-size: 0.8em !important;
}
h1 {
	margin: -0.3em 0 0 0;
	text-align: center;
	font-size: 1.7em;
}
.h_center {
	text-align: center;
	margin-top: 0;
}
.colorgray {
    color: gray;
}
.colorlgray {
    color: lightgray;
}
.colordgray {
    color: darkgray;
}
.mt-2 {
    margin-top: 1.5em !important;
}
.mt-3 {
    margin-top: 3em !important;
}
.fs-i {
    font-style: italic;
}

/* ----- Login ----- */
#userform {
	text-align: center;
	width: 80%;
	margin: 0 auto;
}
.webapp-align-center {
	float: inherit;
	margin: 0.5em auto;
}
#userform #prenom, #userform #nombre, #userform #captcha {
	display: none;
}
#login_form_error {
	text-align: center;
	padding: 1em;
	border: 1px solid white;
	border-radius: 10px;
	font-weight: bold;
}
#submit-form {
	margin: .5em auto !important;
}

/* ----- focus bar button (down) ----- */
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus {
	-webkit-box-shadow: 0 0 12px #e8b43b; 
	-moz-box-shadow: 0 0 12px #e8b43b;
	box-shadow: 0 0 12px #e8b43b;
}

/* ----- Table list scan ----- */
#listscans {
	/*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
	border-collapse: collapse;
	width: 100%;
}

#listscans td, #listscans th {
	border: 1px solid white;
	padding: 8px;
}

#listscans tr:nth-child(even) {
	/*background-color: #f2f2f2;*/
}

#listscans tr:hover {
	/*background-color: #ddd;*/
}

#listscans th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #E92B8F;
	color: white;
}

.scan-box {
	border: 1px solid lightgray;
	padding: 0.8em 0.5em;
	font-size: 0.8em;
	margin: 0 0 0.5em 0;
    color: black;
}
.scan-info-1 {
    width: 49%;
    float: left;
}
.scan-info-2 {
	width: 20%;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
    padding-top: 1em;
}
.scan-info-3 {
    width: 30%;
    float: left;
    text-align: right;
    color: #E92B8F;
    font-weight: bold;
}
.info-3-void {
	padding-top: 0.5em;
	display: block;
}
.scan-order {
    font-weight: bold;
}
.scan-date {
    font-style: italic;
}
.scan-clear {
    clear: both;
    height: 0;
}


/* --- Menu lateral droit --- */
#info-panel .ui-panel-inner {
    padding: 0;
}
.infosform h2 {
    text-align: right;
	background-color: #5ed7f3;
	width: 100%;
	color: white;
	margin: 0 0 2em 0;
    font-size: 16px;
    font-weight: 200;
    padding: 0.77em 0;
}
.menu-infosform {
    
}
.menu-icon-account::after {
    background-image: url("../icons/menu-account.png");
    background-size: 18px 18px;
}
.menu-icon-export::after {
    background-image: url("../icons/menu-export.png");
    background-size: 18px 18px;
}
a.menu-icon-account, a.menu-icon-export {
	font-weight: 200 !important;
	border: 0;
	background-color: transparent !important;
}

body.computer, body.computer div#footer-permanent, body.computer div#header-bar {
    margin: 1em auto 0 auto;
    width: 414px;
}
body.computer {
    border: 1px solid lightgray;
}
body.computer div.page-index, body.computer div.page-login {
	width: 414px;
	margin: 0 auto;
	position: inherit;
}
body.computer div#info-panel {
    
}
body.computer #qrcode-skin {
	width: 414px;
}
body.computer .ui-field-contain > label, .ui-field-contain .ui-controlgroup-label, .ui-field-contain > .ui-rangeslider > label {
	width: 100%;
}