/* 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: white;/*#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: 1250px;
    padding: 0;
    margin: 0 auto;
    min-height: 500px;
}
#header{
	width:100%;
	height:190px;
	background-color: #333;
	margin:0;
	padding:0;
}
#blue_line {
	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;
}

#con {
	float:right; 
	padding: 0 50px 0 0;
	text-decoration: none;
    font-size: 10px;
    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 40px 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: 10px;
	/*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-field {
	/*color: #393939;*/
    color:#0093cd;
	letter-spacing: normal;
	padding: 5px 0 5px 10px;
	margin: 0;
 }
 
.text-group .field-label{
	display:inline-block;
	text-align:right; 
	width:180px;
	text-align: right;
 }
 
.text-group .text-field {
	display:inline-block; 
	font-weight: bold;
	text-align: left;
	margin-left:10px;
	width:200px;
 }

 
 
input[type="radio"]{
    -webkit-appearance: radio;
}
input:invalid {
  box-shadow: 0 0 3px 1px red;
}

input:valid {
  outline: none;
} 
input {
  outline: none;
 width: 220px;
	margin: 2px 10px 5px 10px; 
	padding: 5px 5px 5px 10px;	
	height: 15px;
	border: 1px solid rgb(178, 178, 178);
    font-family: 'Open Sans', sans-serif;
	-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=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
  
}

/* all the input except submit and checkbox */
input[type=text]{
	width: 220px;
	margin: 2px 10px 5px 10px; 
	padding: 5px 5px 5px 10px;	
	height: 15px;
	border: 1px solid rgb(178, 178, 178);
    font-family: 'Open Sans', sans-serif;
	-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=date]:disabled{
	background: rgba(200, 200, 200, 1);
}

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

select{
	width: 220px;
	margin: 2px 10px 5px 10px; 
	padding: 5px 5px 5px 10px;	
	height: 18px;	
	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;
}


textarea {
	width:500px; 
	height:70px; 
	margin: 2px 10px 5px 0px; 
	padding: 5px 5px 5px 12px;	
	border: 1px solid rgb(178, 178, 178);
    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;
			
}
textarea:active,
textarea: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;
} 

textarea:disabled{
	background: rgba(200, 200, 200, 1);
}


/* 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;} 
 
.deleteButton{
 margin-top:5px;
 width: 35px;
 height: 35px;
 border-radius: 5px;
 background: #fff url(delete.png) no-repeat 100% 0;} 
 
 .addButton{
 margin-top:5px;
 width: 35px;
 height: 35px;
 border-radius: 5px;
 background: #fff url(add.png) no-repeat 100% 0;} 
 
.printButton
{
 margin-top:5px;
 width: 35px;
 height: 35px;
 border-radius: 5px;
 background: #fff url(print.png) no-repeat 100% 0;} 
 .infoButton
 {
 margin-top:5px;
 
 background: #fff url(info.png) no-repeat 100% 0;}
 
.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: 5px 5px 5px 5px;
	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;
}



.pagination-container {
  margin: 100px auto;
  margin-left:280px;
  text-align: center;
  
}
.pagination {
  position: relative;
}
.pagination a {
  position: relative;
  display: inline-block;
  color: #2c3e50;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 8px 16px 10px;
}
.pagination a:before {
  z-index: -1;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 0;
  left: 0;
  background-color: #2c3e50;
  border-radius: 24px;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: all 0.2s;
}
.pagination a:hover,
.pagination a .pagination-active {
  color: #fff;
}
.pagination a:hover:before,
.pagination a .pagination-active:before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.pagination .pagination-active {
  color: #fff;
}
.pagination .pagination-active:before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.pagination-newer {
  margin-right: 30px;
 
  color: #2c3e50;
  font-size: 1rem;
}
.pagination-older {
  margin-left: 30px;
  color: #2c3e50;
  font-size: 1rem;
  }