/* CSS Document */

html {
	margin:0;
	padding:0;
	height: 100%;
}

body {
	
	font-size: 14px; 
	/*font-family: 'century gothic', Arial, sans-serif; */
	font-family:'Open Sans', sans-serif;
	margin: 0px auto;
	padding: 0;	
    background: #d9d9d9;
	min-width: 600px; 
    
    
}
/*
body {
	background: white;
	font-size:14px;
	//line-height: 32px;
	color: #ffffff;
	word-wrap:break-word !important;
	font-family: 'Open Sans', Arial, sans-serif;
}*/
#page {
    width: 1000px;
    padding: 0;
    margin: 0 auto;
    min-height: 500px;
}
#header{
	width:100%;
	height:190px;
	background-color: #333;
	margin:0;
	padding:0;
}
#footer{
	height:100px;
	background-color: #333;
	margin:0;
	padding:20px;
	text-align:center;
	font-size: 12px;
    color: #bbb;
	
}
#blue_line {
	text-align: right; 
	width:100%;
	height:20px;
	background-color:#4da6ff;
}

#logo {
	width:95%;
	display:inline-block; 
    padding: 10px 0 0 40px; 
    text-align:left; 
}
#logo_image {
	float:left; 
    /*content: url("logo2.png");*/
    height: 120px;
    width: 120px;
	margin: 0 20px 0 0 ;
}

#logo h1 {
	padding: 20px 0 0 20px;
    font-size: 20px;
    color: white;
}
#logo h2 {
	padding: 0 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

#info {
	/*float:right; */
	display: inline-block;
	padding: 0 50px 0 0;
	text-decoration: none;
    font-size: 14px;
    color:white; 
}

#con {
	/*float:right;*/
	display: inline-block;
	padding: 0 50px 0 0;
	text-decoration: none;
    font-size: 14px;
    color:white; 
}

#menu {
	padding-right:50px;
	margin: 0 auto;
	float:right;
}


p {
	text-align: center;
}

nav {
	margin: 0 0;
	background-color: #333;
}

nav ul {
	padding: 0;
    margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #333;
	border: 5px; 
	border-color: green;
	}

nav a {
	display:block;
	padding:0 10px;
	color:#bbb;
	font-size:14px;
	line-height: 40px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #333; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	
	display: none;
	position: absolute; 
	top: 40px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	padding:0 10px;
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	
	color: #bbb;
	width:130px;
	border: 1px solid #444; 
	border-top: none;
	background-color: #333;
	line-height: 15px;
	float:none;
	display:list-item;
	position: relative;
}

nav ul ul li a:hover{
	background-color: #0f0f0f;
}

nav ul ul > li:first-child {
     border-top: 3px solid #4da6ff; 
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-40px; 
	left:150px;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:before { content:  '+ '; }
li > a:only-child:before { content: ''; }

#main {
	padding: 10px 10px 10px 40px;
    background: white;
    min-height: 500px;
}

.heading{
	clear: both;
	margin: 25px 0 15px 0;
	padding: 0.5em 0 15px 0;
	color: #4da6ff;
	font-size: 16px;
    background:
    linear-gradient(
      to left, 
      white 0%,
      #ffac4d 22%,
      #4da6ff 47%,
      #4d7aff 100%
    )
    left 
    bottom
    white    
    no-repeat; 
    background-size:100% 4px ;
	width: 80%; 
}

span a{
	clear: both;
	margin: 25px 0 15px 0;
	padding: 0.5em 0 15px 0;
	color: #4d7aff;
	font-size: 16px;
}

.elements-group {
	display: inline-block; 
}

.single-element-group {
	display: block; 
}

.text-group{ 	
	margin: 5px 0 0 0; 
	min-height: 40px;
	width: 350px; 
}

.single-element-group .text-group{ 
	width:100%;
}

.single-element-group .text-group .text-field .file-field{ 
	width:400px;
}

.field-label{
	color: #393939;
	letter-spacing: normal;
	padding: 5px 0 5px 2px;
	margin: 0;
 }

.file-field {
	/*color: #393939;*/
    color:#0093cd;
	letter-spacing: normal;
	padding: 10px 0 10px 0;
	margin: 0;
 }
 
.text-group .field-label{
	display:block;
	text-align:left; 
	width:320px;
 }
 
.text-group .file-field {
	display:block; 
	font-weight: bold;
	text-align: left;
	width:550px;
 }

input {
  outline: none;
 
}

/* all the input except submit and checkbox */
input[type=text]{
	width: 220px;
	margin: 2px 10px 5px 0px; 
	padding: 5px 5px 5px 10px;	
	height: 25px;
	border: 1px solid rgb(178, 178, 178);
    font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	color:#0093cd;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

input[type=text]:active,
input[type=text]:focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);	
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 

input[type=date]{
	width: 130px;
	margin: 2px 10px 5px 0; 
	padding: 5px 5px 5px 12px;	
	border: 1px solid rgb(178, 178, 178);
	/*font-family: 'century gothic', Arial, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	border-radius: 3px; 
}

input[type=date]:active,
input[type=date]:focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);	
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 

input[type=text]:disabled{
	background: rgba(200, 200, 200, 1);
}

input[type=date]:disabled{
	background: rgba(200, 200, 200, 1);
}


input[type=checkbox]{
	width: 20px;
	height: 20px; 
	margin: 0;
	padding: 0;	
	border: 1px solid rgb(178, 178, 178);
    font-family: 'Open Sans', sans-serif;
}

input[type=checkbox]:active,
input[type=checkbox]:focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);	
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 

input[type=checkbox]:disabled,
input[type=checkbox]:read-only{
	background: #dddddd;
}



select{
	width: 220px;
	margin: 2px 10px 5px 0px; 
	padding: 5px 5px 5px 10px;	
	height: 25px;	
	border: 1px solid rgb(178, 178, 178);
    overflow:hidden; 
    /*font-family: 'century gothic', Arial, sans-serif; */
	font-family: 'Open Sans', sans-serif;
    font-weight:bold;
    color:#0093cd;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
select:active,
select:focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	/*background: rgba(238, 236, 240, 0.2);	*/
	overflow:hidden; 
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
select:disabled{
	background: #dddddd;
}
option{
    overflow:hidden; 
    color:black;
    /*font-family: 'century gothic', Arial, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
}



/* BUTTONS */

.button{
	text-align: right;
	margin: 5px 0;
}
.button input{
	width: 200px;
	cursor: pointer;	
	background: #f78d1d;
	padding: 8px 5px;
	font: bold 110% 'century gothic', arial;
	/*font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;*/
	color: #fff;
	/*font-size: 24px;*/	
	border: 1px solid #da7c0c;	
	margin-bottom: 10px;	
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
.button input:hover{
	background: #f47c20;
}

.button input:active{
	background: #fcd3a5;
	position: relative;
	top: 1px;
	border: 1px solid #da7c0c;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	   -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}


 .button input:disabled{
	background: #dddddd;
}

/*
.editButton{
 margin-top:5px;
 background: #fff url(edit.png) no-repeat 100% 0;
 width: 35px;
 height: 35px;
 border-radius: 5px;} 
 
.saveButton{
 margin-top:5px;
 width: 35px;
 height: 35px;
 border-radius: 5px;
 background: #fff url(save.png) no-repeat 100% 0;} 
 
*/
 
 .displayBlueButton{
 margin-top:5px;
 width: 38px;
 height: 38px;
 border-radius: 10px;
 border: 0px; 
 padding-top: 0px; 
 padding-bottom: 0px; 
 background: #fff url(display_blue.jpg) no-repeat 100% 0;
 } 
 
.displayBlueButton:active{
  opacity:0.5; 
}

.displayBlueButton:disabled{
  opacity:0.5; 
}

.deleteBlueButton{
 margin-top:5px;
 width: 38px;
 height: 38px;
 border-radius: 10px;
 border: 0px; 
 padding-top: 0px; 
 padding-bottom: 0px; 
 background: #fff url(delete_blue.jpg) no-repeat 100% 0;
 } 
 
.deleteBlueButton:active{
  opacity:0.5; 
}

.deleteBlueButton:disabled{
  opacity:0.5; 
}

.saveBlueButton{
 margin-top:5px;
 width: 38px;
 height: 38px;
 border-radius: 10px;
 border: 0px; 
 padding-top: 0px; 
 padding-bottom: 0px; 
 background: #fff url(save_blue.jpg) no-repeat 100% 0;
} 
 
.saveBlueButton:active{
  opacity:0.5; 
}

.saveBlueButton:disabled{
  opacity:0.5; 
}



 
.divfileContainer{
	background: #f78d1d;
}
.fileContainer {
    overflow: hidden;
    position: relative;
    min-width: 250px; 
    background-color:#f78d1d;
    border-style:double;
    padding: 8px 25px;
	font: bold 110% 'century gothic', arial;
	color: #fff;
	border: 1px solid #da7c0c;	
	margin-bottom: 10px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 1px;
    filter: alpha(opacity=0);
    /*min-height: 100%;
    min-width: 100%;*/
    height: 100%;
    max-width: 50px;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}


/* element table */ 
 table { 
	width: 950px; 
}

table tr th { 
	background: #0093cd;
	color: #FFF;
	padding: 3px 3px 3px 7px;
	text-align: center; 
	border:1px solid rgba(178, 178, 178,0.6);
}
 
table tr td
{ 
	padding: 3px 3px 3px 3px;
	text-align: left;
	border:1px solid rgba(178, 178, 178,0.6);
}
  

 /* class table */
.table{
  display: table;
  border-collapse:collapse;
}
.table-row{
	display: table-row;
	width:auto;
}
.table-cell, .table-head{
  display: table-cell;
  padding:2px 0 0 5px;
  /* border:#f0f0f0 1px solid; */
}
.table-head{
	padding:10px;
	font-weight:bold;
}

 
.link_button {
	display:block; 
	background: #fff url(edit_blue.jpg) no-repeat 100% 0;
	/* background: url('image');*/
	margin-top:5px;
	width: 38px;
	height: 38px;
	border-radius: 5px;
} 

.link_button:active{
	opacity: 0.5;
}

#err_mess{
	background-color: #FF4C4C;
	color:#FFF;
	font: bold 110%; 
	padding: 10px 10px 10px 10px; 
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
}


.excelReportButton
{
 margin-top:5px;
 width: 38px;
 height: 38px;
 border-radius: 10px;
 border: 0px; 
 padding-top: 0px; 
 padding-bottom: 0px; 
 background: #fff url(excel.png) no-repeat 100% 0;
}

.pdf-upload 
{
	vertical-align:bottom; 
	padding: 5px 0px 5px 0px; 
	width:42px; 
}
.pdf-upload > input {
  visibility:hidden;
  width:0;
  height:0
}


.chooseImageFile
{
 width: 38px;
 height: 38px;
}

.chooseImageFile:active
{
 opacity:0.5;
}
 
.chooseImageFile:disabled
{
 opacity:0.5;
}

#saved{
	background-color: #4CAF50;
	color:#FFF;
	font: bold 110%; 
	padding: 10px 10px 10px 10px; 
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
}