/* ----------------------------------------*/
/* ---------->>> Application <<<-----------*/
/* ----------------------------------------*/

/*specific styles for website content */
/* ------------------------------------------------------------------------------------------------------ */


/* ------------------------------------------- */
/* ---------->>> Qualitics Page <<<----------- */
/* ------------------------------------------- */

/* Kpi content
--------------*/
.main-kpi > .time-filter {

    padding: 20px 0 0;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-top: 1px solid #e1e6e9;
	background-color: #f8f9fa;
}

.main-kpi > .time-filter td {
    vertical-align: middle;
}

.main-kpi > .time-filter td:last-child {
    padding-left: 30px;
}

.sort {
	border-top: 1px solid #dfe6ec;
	border-right: 1px solid #dfe6ec;
	padding: 9px 5px 9px 50px;
	background-color: #EFF3F6;
    border-bottom: 1px solid #e1e6e9;
	color: #626a71;
	width: 55%;
}


.sort span.icon-calendar {
	font-size: 20px;
}

.sort-label {
    width: 50px;
    text-align: right;
    padding-right: 15px;
}

.rank-filter {
    background-color: #EFF3F6;
    color: #626a71;
    border-bottom: 1px solid #dfe6ec;
}

.rank-filter > div:nth-child(2) >  div:first-child {
	  border-right: 1px solid #dfe6ec;
	  padding-right: 15px;
      padding-bottom: 5px;
}

.rank-filter > div:nth-child(2) >  div:nth-child(2) {
      padding-left: 15px;
      margin-left: 0px;
      padding-bottom: 5px;
}

.rank-filter > div:nth-child(2) > div[class^="span"] > div:first-child {
	text-align: center;
}

.selectMonths > input { 
	cursor: pointer;
}

.main-kpi a {
    color: #313131;
 }

.kpi {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    padding-top: 20px;
	border-bottom: 1px solid #e0e0e0;
}

.kpi-content {
    margin-left: 140px;
    overflow: hidden;
    border-left: 1px solid #e0e0e0;
	padding: 4px 20px 20px;
	min-height: 200px;
}

.kpi-content h2{
	float: left;
}

.tab-title{
	margin-bottom: 80px;
	color: #626a71;
}

.tab-title div{
	float: right;
	padding-right: 10px;
}

/* the tooltip shown in the bar when mouse over x-axis */
.chart-point-label {
   -moz-transform: rotate(-45deg);  /* FF3.5/3.6 */
	-o-transform: rotate(-45deg);  /* Opera 10.5 */
	-webkit-transform: rotate(-45deg);  /* Saf3.1+ */
	  -ms-transform: rotate(-45deg); /* IE9) */
	transform: rotate(-45deg);  /* Newer browsers */
    font-size: 9px;
    color: #ccc;
}

.chart-point-label-hover {
    color: #555;
}


/* kpi-box are containers of kpi page
------------------------------*/

[class^="kpi-box"], [class*="kpi-box"] {
    background: white;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    padding: 12px;
    margin-top: 11px;
    margin-bottom: 20px;
}

[class^="kpi-box-small"], [class*="kpi-box-small"]{
    margin-right: 9px;
    display: inline-block;
    width: 45.3%;
}

.kpi-count {
	width: 340px;
}

.kpi-count span {
	display:inline-block;
	vertical-align: middle;
}

.kpi-count .first-child,
.kpi-count span:first-child {
	display:inline-block;
	width: 60%;
	line-height:25px;
}

.kpi-count .last-child,
.kpi-count span:last-child {
	width: 38%;
	font-size: 23px;
	border-left: 1px solid #ccc;
}

.kpi-count span i{
	font-size: 10px;
}

.special-box {
    overflow: visible;
    padding-bottom: 100px;
}

/* kpi are the differents kpi themselves
------------------------------*/
.kpi-large {
	min-width: 724px;
    width: 100%;
    margin: auto;
}

.kpi-small {
	margin: auto;
    width: 50%;
    min-width: 340px;
    height: 300px;
}

[class^="kpi-group"] .last-child, 
[class*="kpi-group"] .last-child,
[class^="kpi-group"] div:last-child, 
[class*="kpi-group"] div:last-child {
    clear: left;
	float: none;
}

.btn-dashline {
    width: 120px;
    height: 2px;
    margin: 20px auto;
    background: url(../images/AQM-Website-dashline.png) no-repeat center top;
}

.left-dashline {
    width: 120px;
    min-height: 2px;
    margin: 20px auto;
    background: url(../images/AQM-Website-dashline.png) no-repeat center top;
}


/* Some elements need to be sorting (i don't know who added these lines
--------------*/
.return_nub {
    color: #ff9999;
}

.global_return_nub {
    color: #e56065;
}

.active-ondrag {
    height: 42px;
}

#label_advancedSearch:hover {
    cursor: pointer;
}


/* -----------------------------------------------------------------*/
/* ---------->>> Reports and Platform reports content <<<-----------*/
/* -----------------------------------------------------------------*/


/* Platform reports 
------------------------------------------*/

/* Reports title bar */
.top-bar {
    border-top: 1px solid #e9e9e9;
	background: rgb(249,249,249); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(249,249,249,1) 4%, rgba(249,249,249,1) 93%, rgba(240,240,240,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(4%,rgba(249,249,249,1)), color-stop(93%,rgba(249,249,249,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* W3C */
    width: 100%;
}

.top-bar table{
    float: left;
    width: 100%;
/*    width: 938px;*/
}

.top-bar td:first-child {
    width: 75px;
    text-align: center;
}

.top-bar td:last-child {
/*    border-left: 1px solid #eee;*/
}

/* this td is the container of the action buttons for each reports */
td.btnAqm{
    width: 460px;
    text-align: right;
}

td.supplierOp{
/*    width: 450px;*/
}

td.status_label{
    text-align: right;
    width: 23.404255319148934%;
/*    width: 111px;*/
    padding-right: 27px;
	padding-left: 33px;
/*	float: right;  Maybe for IE (need Check) but in Webkit it makes probs */
	
padding-top: 8px;
}
td.status_label label{
    color: #4892CD;
	font-weight: bold;
	float: right;
}
td.status_label label:hover{
	color: #3574a5;
}

select.status_dropdown_tip{
/*	position: absolute;*/
	opacity:0;
	cursor: pointer;
	margin-right: -85px;
	width: 88px!important;
	overflow: hidden;
	float: left;
}

/* Reports content */

.preview-report{
	margin-top: 35px;
	margin-right: 9px;  
	margin-left: 40px;
}

.preview{
    width: 118px;
    height: 110px;
    border: 5px solid white;
    background: url(../images/AQM-Website-preview.png) no-repeat center center #f9f9fa;
    -moz-box-shadow: 0 0 3px rgba(100, 100, 100, 0.4);
    -webkit-box-shadow: 0 0 3px rgba(100, 100, 100, 0.4);
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.4);
}

.product-image {
    width: 120px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    }
.product-inage img { 
   	vertical-align:middle;
}

.report-info{
    margin-top: 45px;
    width: 100%;
  	table-layout: fixed\9;
}

.report-info td:last-child,
.report-info td:first-child + td > label,
.report-info td:first-child + td {
    max-width: 156px;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
	visibility: visible;
    overflow: hidden;
}

.report-result{
    border-left: 1px solid #eee;
/*    border-right: 1px solid #eee;*/
/*    background: #f9f9f9;*/
	background: rgb(252,252,252); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(249,249,249,1) 4%, rgba(249,249,249,1) 93%, rgba(240,240,240,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(4%,rgba(249,249,249,1)), color-stop(93%,rgba(249,249,249,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(249,249,249,1) 4%,rgba(249,249,249,1) 93%,rgba(240,240,240,1) 100%); /* W3C */
	min-height: 210px;
}

.report-result li{
/*	width: 135px;*/
	height: 28px;
	padding: 5px 34px;
	border-top: 1px solid white;
	border-bottom: 1px solid #e6ecf5;
}

.report-result li:last-child {
	padding-bottom: 15px;
}


/*Sample
***********************************************
************************************************/

.preview-sample{
	margin-left: 6px;
	margin-right: 6px;
}

.preview-sample,
[class^="sample-group"],
[class*="sample-group"] {
	margin-top: 30px;	
}

.sample-group-1 {
	margin-left: 45px ;
}

.sample-group-5 {
	margin-left: 5px ;
}

.sample-group-1 > div:first-of-type,
.sample-group-4 > div:last-of-type,
.sample-group-5 > div:first-of-type,
.sample-group-5 > div:last-of-type
 {
	width: 8px;
	height: 33px;
}

.sample-group-5 > div:first-of-type,
.sample-group-1 > div:first-of-type {
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.sample-group-5 > div:last-of-type,
.sample-group-4 > div:last-of-type {
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

[class^="sample-group"] i,
[class*="sample-group"] i{
	width: 7px;
	height: 7px;
	border: 1px solid #ffffff;
	margin-top: 4px;
	margin-right: 4px;
	margin-left: 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display: inline-block;
}

.sample-group-1 i {
	background-color: #74c0cf;
}

.sample-group-2 i {
	background-color: #c28fba;
}

.sample-group-3 i,
.sample-group-4 i,
.sample-group-5 i {
	background-color: #e5d451;
}

.sample-block{	
	cursor: pointer;	
	width: 134px;
	position: relative;
	z-index:1;
/*	padding: 0 2px;*/
	text-align: center;
	height: 33px;
	line-height: 33px;
}

@-moz-document url-prefix() {
    .sample-block .icon-caret-down{
/*	    line-height: 0.9;*/
    }
}

.sample-block:not(.sample-group-1) {
	border-left: 1px solid rgba(98, 105, 114, 0.2);
	border-right: 1px solid rgba(98, 105, 114, 0.2);
}

.sample-block h4 small,
.sample-block h4 {
	color: white;
	display: inline-block;
	font-size: 12px;
}

.sample-step > h5 {
	margin-left: 15px;
	text-align: center;
	height: 25px;
	clear: left;
	color: #666d75;
}

.sample-group-1 > .sample-step:nth-of-type(2) > h5 {
    border-left: 1px dashed #E4E4E4;
}

.sample-group-5 > .sample-step:nth-of-type(2) > h5 {
    border-right: 1px dashed #E4E4E4;
}


/* ---------->>> Sample Popover */
/* -----------------------------------*/

.popover-sample {
  max-width: 276px;
  padding: 1px;
  text-align: left;
  background-color: #DDE6EB;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 1px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px rgba(0, 0, 0, 0.1);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
          position: absolute;
          z-index: 1010;  
}


[class^="sample-step"] .popover-sample.bottom, 
[class*="sample-step"] .popover-sample.bottom {
	margin-left: -50px;
	margin-top: 40px;
}

.sample-group-5 .popover-sample.bottom {
	margin-left: -108px;
}

[class^="sample-step"] .popover-sample h4, 
[class*="sample-step"] .popover-sample h4,
[class^="sample-step"] .popover-sample h5, 
[class*="sample-step"] .popover-sample h5,
[class*="sample-step"] .popover-content div {
	color: #313131;
	width: 250px;
	margin-left: 5px;
	overflow:hidden;
	text-overflow:ellipsis;
}

[class*="sample-step"] .popover-content div,
[class*="sample-step"] .popover-content button{
	float: left;
}

[class*="sample-step"] .popover-content > div > div {
	width: 190px;
	padding-top: 7px;
}


.popover-sample.top {
  margin-top: -5px;
}

.popover-sample.right {
  margin-left: 5px;
}

.popover-sample.bottom {
  margin-top: 5px;
}

.popover-sample.left {
  margin-left: -5px;
}

.popover-sample.top .arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top: 5px solid #000000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.popover-sample.right .arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 5px solid #000000;
  border-bottom: 5px solid transparent;
}

.popover-sample.bottom .arrow {
top: -11px;
left: 50%;
margin-left: -11px;
border-bottom-color: #F2F4F7;
border-top-width: 0;
}

.sample-group-5 .popover-sample.bottom .arrow {
	left: 77%;
}

.popover-sample.bottom .arrow::after {
top: 1px;
margin-left: -10px;
border-bottom-color: #f9f9f9;
border-top-width: 0;
}

.popover-sample.left .arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000000;
}

.popover-sample .arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.popover-sample .arrow {
border-width: 11px;
}

.popover-sample .arrow::after {
border-width: 10px;
content: "";
}

.popover-sample .arrow, .popover .arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

.popover-sample .arrow, .popover .arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}


.popover-sample .popover-inner {
  width: 280px;
  padding: 3px;
  overflow: hidden;
  background: #000000;
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.popover-sample .popover-title {
  padding: 8px 10px;
  line-height: 1;
  background-color: #F2F4F7;
  -webkit-border-radius: 3px 3px 0 0;
     -moz-border-radius: 3px 3px 0 0;
          border-radius: 3px 3px 0 0;
}

.popover-sample .popover-content {
	background-color: #F2F4F7;
  -webkit-border-radius: 0 0 3px 3px;
     -moz-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
		  padding: 12px 10px;
	  }
.popover-sample .popover-content.message {
	background-color: #DFE9F1 ;
	border-top: 1px solid #D0E1F0;
}

.popover-content p,
.popover-content ul,
.popover-content ol {
  margin-bottom: 0;
}

.popover-sample .btn-action {
  float: right;
  margin: 0;
}

.popover-sample textarea{
	min-width: 200px;
}
/**/

.sample-info,
.sample-files {
	width: 500px;
}

.sample-info {
	margin: 0 70px 40px 40px;
}

.sample-files{
	margin: 0 10px 40px 70px;
}

.sample-files > table{
	table-layout: fixed;
}

.sample-files td,
.sample-info td{
	line-height: 16px;
	width:250px;
}

.sample-files table td + td {
	width: 275px;
	max-width: 275px;	
	vertical-align: top;
	overflow:hidden;
	text-overflow:ellipsis;
}

.sample-files td span {
	opacity: 0.5;
}

.sample-files td span:hover {
	opacity: 0.8;
}

.sample-info td.categorie{
	width: 32px;
}

.sample-message{
	width: 310px;
	margin: 15px 8px;
}


 .popover-sample .btn-group{
 	padding-left: 2px;
	 margin: 0 0 5px;
 }
 
 .popover-sample .btn-group button{
 	max-width: 215px;
	height: 26px;
	padding-top: 1px;
 }
 .popover-sample .btn-group button:hover{
	border: 1px solid #F5AC7A;
 }


/*Sample - Modal
***********************************************
************************************************/

.modal .table-shipment thead{
	text-align: center;
}
.modal .table-shipment th{
    border-bottom: 1px solid #d3dee5;
}
.modal .table-shipment td{
	background-color: #f4f7fa;
}
.modal .table-shipment td:not(:first-child) {
	border-left: none;
}

.modal .status-container {
	min-width: 150px;
}

.modal .status-container > label {
	padding: 9px 23px 10px;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	color: #fff;
	text-align: center;
}


.modal .table-history{
	margin-bottom: 20px;
	text-align: center;
}

.modal .table-history thead{
	color: #626972;
	letter-spacing: 0;
	font-size: 11px;
	line-height: 18px;
}

.modal .table-history td{
	width: 100px;
	color: #fff;
	height: 11px;
}

.modal .table-history td:not(:first-child) {
	border-left: 1px solid rgba(98, 105, 114, 0.2);
}

.modal .table-history tr:not(:first-child) td {
	border-top: 8px solid #fff;
}

.modal .table-history tr td:first-child {
-webkit-border-bottom-left-radius: 8px;
        border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
        border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
}

.modal .table-history tr td:last-child {
-webkit-border-bottom-right-radius: 8px;
        border-bottom-right-radius: 8px;
	-moz-border-radius-bottomright: 8px;
-webkit-border-top-right-radius: 8px;
        border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
}

.modal .table-history td:not(:empty)  {
	cursor: pointer;
}

/* admin manage tables
***********************************************
************************************************/
.table-manage{
	overflow: scroll;
}

.table-manage thead,
.table-manage tfoot{
	padding-top: 9px;
	padding-bottom: 9px;
    text-align: left;
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    background-color: #EFF3F6;
    border-bottom: 1px solid #E1E6E9;
    color: #626A71;
}

.table-manage tbody tr{
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
	padding-top: 10px;
	padding-bottom: 10px;
}

.table-manage tbody tr td{
    border-top: none;
    border-bottom: 1px dashed #e1e1e1;
}

.table-manage th:first-child,
.table-manage td:first-child {
/*    width: 290px;*/
}

.table-manage th:last-child,
.table-manage td:last-child {
	text-align: right;
	width: 130px;
}

.table-manage th {
	font: 300 11px Arial, sans-serif;
}





/* ------------------------------------------------------*/
/* ---------->>> Booking Inpection content <<<-----------*/
/* ------------------------------------------------------*/

/* Step's titles
 ---------------------------------------------------*/

[class^="number-"] div, [class*="number-"] {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    margin-top: -3px;
    float: left;  
}

.number-1 {
    background: url(../images/AQM-Website-step1.png) no-repeat left top;
}
.number-2 {
    background: url(../images/AQM-Website-step2.png) no-repeat left top;
}
.number-3 {
    background: url(../images/AQM-Website-step3.png) no-repeat left top;
}
.number-4 {
    background: url(../images/AQM-Website-step4.png) no-repeat left top;
}
.number-5 {
    background: url(../images/AQM-Website-step5.png) no-repeat left top;
}
.number-6 {
    background: url(../images/AQM-Website-step6.png) no-repeat left top;
}
.number-7 {
    background: url(../images/AQM-Website-step7.png) no-repeat left top;
}
.number-8 {
    background: url(../images/AQM-Website-step8.png) no-repeat left top;
}
.number-9 {
    background: url(../images/AQM-Website-step9.png) no-repeat left top;
}
.number-10 {
    background: url(../images/AQM-Website-step10.png) no-repeat left top;
}
.number-11 {
    background: url(../images/AQM-Website-step11.png) no-repeat left top;
}
.number-12 {
    background: url(../images/AQM-Website-step12.png) no-repeat left top;
}
.number-13 {
    background: url(../images/AQM-Website-step13.png) no-repeat left top;
}
.number-14 {
    background: url(../images/AQM-Website-step14.png) no-repeat left top;
}
.number-15 {
    background: url(../images/AQM-Website-step15.png) no-repeat left top;
}
.number-16 {
    background: url(../images/AQM-Website-step16.png) no-repeat left top;
}

.req {
    text-align: right;
    padding-right: 8px;
    padding-bottom: 15px;
}

.main-bookandinspections table {
	margin: 15px 0 20px;
}


.ref {
    margin: 15px auto 25px;
    background-color: #EFF3F6;
    border: 1px solid #E4E4E4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.ref td {
    vertical-align: middle;
}



.ref-delete {
    float: right;
    background: url('../images/AQM-Website-picto-cross.png') no-repeat right;
    width: 135px;
    cursor: pointer;
}

.ref-delete:hover, 
.add-ref a:hover {
    opacity: 1;
}

.ref li, 
.ref li a, 
.add-ref a {
    display: inline-block;
    opacity: 0.6;
    filter: alpha(opacity = 50); /* IE8 */
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
}

.ref ul {
    margin-bottom: 20px;
    padding: 15px 20px;
}

.add-ref {
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: 15px;
}

/* ----------------------------------- */
/* ---------->>> Password forgotten and Change Password page <<<----------- */
/* ----------------------------------- */

#change-pass table{
	border-collapse: separate;
	border-spacing: 5px;
	margin: 40px auto 20px;
}

#forget-pass div{
	width : 72%;
	margin-top: 40px;
	margin-bottom: 10px;
}

/* ----------------------------------- */
/* ---------->>> Support page <<<----------- */
/* ----------------------------------- */


#container-support{
	margin: auto;
	text-align: center;
	padding-top: 50px;
    padding-bottom: 60px;
	margin-bottom: 30px;
	margin-top: 30px;
}

/* ----------------------------------------------------*/
/* ---------->>> Account manager content <<<-----------*/
/* ----------------------------------------------------*/

/* Search blue bar used in Account manager page  
 -------------------*/
.search-accounts {
	width: 840px;
	height: 50px;
	margin: auto;
	padding: 20px 50px 0px;
	border-top: 1px solid #DFE6EC;
	border-right: 1px solid #DFE6EC;
		border-left: 1px solid #DFE6EC;
		background-color: #EFF3F6;
	border-bottom: 1px solid #E1E6E9;
	color: #626A71;
}

.search-accounts form{
	width: 350px;
	float: left;
}

.search-accounts select{
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 5px;
}


/* ----------------------------------- */
/* ---------->>> Admin content <<<----------- */
/* ----------------------------------- */


.container-white {
	background-color: white;
	border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
}
.container-white.bottom {
	border-bottom: 1px solid #e0e0e0;
}
.container-white.top {
	border-top: 1px solid #e0e0e0;
}

.container-admin {
	background-color: white;
	padding-bottom: 6px;
	margin-bottom: 20px;
	border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
		-moz-border-radius-bottomright: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	overflow-x: auto;
}

.container-admin .table{
	margin-bottom: 0px;
}

.container-admin .table-manage tbody tr,
.container-admin .table-manage thead, 
.container-admin .table-manage tfoot {
	border-left: none;
	border-right: none;
}

.container-admin .table td {
  border-top: 1px dashed #ddd;
}

.main-myadmin table {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
}

.main-myadmin td:first-child {
    border-right: 1px solid #E6E6E6;
    padding-right: 20px;
    width: 100px;
}


#inspection_detail .table td {
    border-top: 0px;
}

#custCommentBox {
	height: 100px;
	overflow: auto;
}

#custCommentBox li {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 2px;
	margin-right: 1px;
}

.admin-table td {
	padding: 5px 15px;
}

.main-myadmin > .step-3 > a.container-dashed {
	margin-left: 370px;
	font-size: 7px;
	border-top: none;
	margin-top: -12px;
	margin-bottom: 5px;
	display: block;
	width: 15px;
	text-align: center;
}

.admin-heading {
	display: inline-block;
	font: 400 12px/16px Arial, sans-serif;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.requirement-bar {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	position: relative;
	padding: 9px;
	margin-bottom: 5px;
	font-weight: bold;
	background-color: #DFE9F1;
}

.requirement-bar .icon-move{
	cursor: move;
}


/*-START------must be destruct after new admin update -------*/

/*.message {
    border-top: 1px solid #f1f1f1;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    background-color: #f8f9fa;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 70px;
	width: 870px;
}

.message h3 {
    padding-left: 15px;
}

.message pre {
	margin-top: 20px;
}*/

/*-END------must be destruct after new admin update -------*/

.dashed-block{
    border: 1px dashed #E6E6E6;
    min-width: 200px;
    height: auto;
    min-height: 100px;
    background-color: #f8f9fa;
}

#customerId, .customerNa {
    text-transform: capitalize;
}

canvas {
    position: inherit;
    left: 50%;
    top: 50%;
}

.container-inspectionlist,
.container-invoicelist,
.container-service
{
	 width: 100%;
	 overflow-x: auto;
	 text-align: left;
}


.insp-billing-warning{
    vertical-align: middle;
    width:10px;
    height:10px;
}


/* ----------------------------------
 * color-swatches
 * ---------------------------------- */
.color-swatches .swatches {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #FFF;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.color-swatches .light,
.color-swatches .dark {
    width: 50%;
    height: 50px;
}
.color-swatches.small .light,
.color-swatches.small .dark {
    width: 50%;
    height: 18px;
}
.color-swatches .light {
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;
}
.color-swatches .dark {
    -webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
    border-radius: 0 4px 0 0;
}
.color-swatches .infos {
    padding: 5px 10px;
}
.color-swatches.small .infos {
    padding: 2px 4px;
}
.color-swatches .infos h4,
.color-swatches .infos p {
    margin: 0;
}
.color-swatches .infos h4 {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}
.color-swatches .infos p {
    font-size: 12px;
}

/*********** ***********/
.insp-extract-btn-container{
	margin-top: 13px;
    margin-left: 20px;
    float: left;
}

.datatable-length-layout-r{
    float:right;
    margin-top: 8px;
}

.datatable-length-layout-r div {
	display:inline;
	float:left;
}

.datatable-length-layout-r .dataTables_length{
    margin-right: 22px;
}

.datatable-length-layout-r .dataTables_length label{
    padding-top: 6px;
}

.datatable-pagination-num{
    float: left;
    padding-top: 10px;
}
.datatable-clovis-layout-r{
	float: right;
}

.datatable-button-layout-r{
    float: left;
    padding-top: 10px;
    padding-right: 20px;
}

.booking-insp-highlight{
	background-color:#F2E1E1;
}
.qualibase-updated-sg-highlight{
	background-color:#CFD9F4;
}

.qualibase-cancelled-sg-highlight{
	background-color:#DBDBDB;
}

.selectedRow {
	background-color:#faebd7;
}

.booking-insp-font-highlight{
	color:#DA2525;
}

tbody tr.booking-insp-highlight:hover td{
	background-color:#F1ECEE;
}
tbody tr.qualibase-updated-sg-highlight:hover td{
	background-color:#EBEFFB;
}
tbody tr.qualibase-cancelled-sg-highlight:hover td{
	background-color:#EEEEEE;
}
/*********** ***********/


div.rightCornerMsgBox {
    position: fixed;
    width: 500px;
    right: 10px;
    bottom: 0;
    z-index: 22;
    background: #fff;
    box-shadow: 0px -1px 6px #000;
    display: none;
}

.rightCornerMsgBox .header {
	padding-bottom: 20px;
	padding-right: 10px;
	background-color: #ED7A72;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 5px;
    font-weight: bold
}

.rightCornerMsgBox .body {
    background-color: white;
    padding: 10px 20px 10px;
    max-height: 280px;
}

.rightCornerMsgBox .body ul {
	margin-left: 10px;
} 

.rightCornerMsgBox .body li {
	padding-bottom: 2px;
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	width: 80px;
}

.icon_question {
	content: url("../images/question.png");
	height:15px;
	width:15px;
	vertical-align:sub;
	margin-left:5px;
}


.cust-order-scroll {
	overflow: auto;
	max-height: 200px;
}

.cust-order-scroll tr:hover { 
    cursor: pointer;
}


/* ----------------------------------
 * inspection/inspection group list page
 * ---------------------------------- */


.container-inspectionlist .main-list-container {
	 width: 930px;
}

.container-inspectionlist .main-list-container td {
     border:none !important;
     background-color: inherit !important;
}

.container-inspectionlist .child {
      background: none !important;
      padding:0;
}

.password-progress {
        margin-top: 5px;
        margin-bottom: 5px;
        width:232px;
        height: 15px;
}

.no_default_fee{
	vertical-align: middle;
    width:19px;
    height:16px;
}

.display-none {
    display: none !important;
}

.no-border-input {
    background-color: transparent !important;
    border: none !important;
}