body { width:100%; margin:0; padding:0; font-family: 'Lato', Calibri, Arial, sans-serif;}

h1 { font-size:20px;}
h1:after { content:":"; margin-left:10px;}

p { margin:0; padding:0;}

.top-head { width:1170px; margin:0 auto; border-bottom:1px solid #eee; height:67px;}
.logo { float:left; margin:20px 0;}
.loginfo { float:right; margin:10px 0; border:2px solid #eee; padding:10px 20px 5px 40px; font-size:16px; font-weight:bold; position:relative; background:#eee;}
.icon-info { font-size:18px; position: absolute; top: 10px; left: 16px;}
.logout { margin:0 0 0 20px;}
.loginform { max-width:1170px; margin:0 auto;}
.warning { color:#F00; text-align: center; width:50%; margin:0 auto; font-size:16px; font-weight:bold; padding:5px 0; margin-top:10px; }
.warning p { border:1px solid #F00; padding:5px 0;}

.content { max-width:1170px; margin:0 auto; margin-bottom:20px; }
.footer { width:100%; text-align:center; padding:10px 0; background:#333; color:#fff; font-size:11px; }

.modify-btn { background:url(../images/modify.png) no-repeat; background-size:20px 20px; width:20px; height:20px;  text-indent:-9999px; display:inline-table; margin-right:20px; margin-top:7px; margin-bottom:1px;}
.delete-btn { background:url(../images/delete.png) no-repeat; background-size:20px 20px; width:20px; height:20px;  text-indent:-9999px; display:inline-table;  margin-top:7px; margin-bottom:1px;}
.view-btn { background:url(../images/view-btn.png) no-repeat; background-size:25px 17px; width:25px; height:17px;  text-indent:-9999px; display:inline-table;  margin-top:7px; margin-bottom:1px;}

.modify-btn:hover {opacity:0.7;
   transition: all 0.3s ease-in; }
.delete-btn:hover {opacity:0.7;
   transition: all 0.3s ease-in; }
.view-btn:hover {opacity:0.7;
   transition: all 0.3s ease-in; }

 /* ---------------- Login Form ---------------- */
.form-1 {
    /* Size & position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */
}

.form-1 .field {
    position: relative; /* For the icon positioning */
}

.form-1 .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}



.form-1 input[type=text],
.form-1 input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);

    /* Size and position */
    width: 78%;
    padding: 10px 18px 10px 45px;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
}

.form-1 input[type=text] {
    margin-bottom: 10px;
}

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
    color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
    color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

.form-1 .submit {
    /* Size and position */
    width: 150px;
    padding: 5px;
	color:#fff;
    z-index: 2;

    /* Styles */
    background: #333;
	cursor:pointer;
	float:right;
}

.form-1 .submit:hover,
.form-1 .submit:focus {
    background: #028c8e;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.form-1 .submit:active {
    background: #42A2BC;
}

.top-content { background:#ccc;}
.content table { clear:both; width:100%; text-align:center; margin-bottom:50px;}
.content table tr th { background:#333; color:#fff;}
td.address { text-align:left; padding:5px 10px 5px 20px;}
.content table tr:nth-child(2n) { background:#ccc;}
.findcol { margin:0 0 10px; float:left; width:50%;}

.modify-page { background:#f1f1f1; padding:20px; border:2px solid #2C3E50; margin-bottom:30px;}
.modify-page table#contable tr th:nth-child(3n) { padding-right:20px; text-align:right;}
.modify-page table#contable { width:70%; text-align:left;}
.modify-page table#user-det { width:50%; text-align:left;}
.modify-page table tr { background:none;}
.modify-page table#contable th { width:15%;}
.modify-page table#contable tr td:nth-child(2n) {  border:1px solid #000; width:20%; padding:2px 10px;}
.modify-page table#contable tr td input {  border:none; width:90%; margin-bottom:0px;}
.modify-page table#contable tr th { background:none; color:#000;}

.modify-page table#contact-detail tr th:nth-child(3n) { padding-right:20px; text-align:right;}
.modify-page table { width:70%; text-align:left;}
.modify-page table#contact-detail th { width:15%;}

.bill-content input {  border:1px solid #000; padding:2px 10px; margin-bottom:5px;}
.bill-content table { width:50%; text-align:left;}
.bill-content table tr td { background:none; color:#000;}
.bill-content table tr th { background:none; color:#000;}
.bill-content table tr:nth-child(2n) td{ padding:5px 0 0; }

.remove-contact { background:#900; color:#fff; padding:5px 15px; text-transform:uppercase; color:#fff; font-weight:bold; text-decoration:none; cursor:pointer;}
.add-more { background:#34495e; padding:5px 15px; text-transform:uppercase; color:#fff; font-weight:bold; text-decoration:none; cursor:pointer; border:none;}
.add-more:hover { background:#333;     -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;} 

.modify-page ul { list-style:none; margin:0; padding:0;}
.modify-page ul li { border: 0px none;
display: inline-block;
width:30%;
position: relative;
padding: 0;}
.modify-page ul li input[type="checkbox"] { margin-right:5px;}

.modify-page textarea { border:1px solid #000;}
.modify-page table tr td { background:none; color:#000;}
.modify-page input {  border:1px solid #000; padding:2px 10px; margin-bottom:10px;}
.modify-page select {  border:1px solid #000; padding:2px 10px; margin-bottom:5px;}

.content .modify-page table tr th { background:none; color:#000;}
.content .modify-page table tr:nth-child(2n) { background:none;}

.modify-page table.sub-info { width:100%;}
.modify-page table.loc-info tr th { width:25%;}

.modify-page input[type="submit"] { background:#16a085; padding:5px 15px; text-transform:uppercase; color:#fff; font-weight:bold; text-decoration:none; margin-bottom:20px; cursor:pointer;}
.modify-page input[type="submit"]:hover { background:#34495e;     -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;}
	
.bill-content input[type="submit"] { background:#16a085; padding:5px 15px; text-transform:uppercase; color:#fff; font-weight:bold; text-decoration:none; margin-bottom:20px; cursor:pointer;}
.bill-content input[type="submit"]:hover { background:#34495e;     -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;}


.findcol select { 
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);

    /* Size and position */
    width: 15%;
    padding:3px 5px ;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
	margin-right:25px;
}

.findcol select:nth-child(2n) { width:25%;}

.searchcol { margin:0 0 10px; float:right; width:50%;}
.searchcol input[type='text']{ 
    font-size: 14px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);

    /* Size and position */
    width: 70%;
    padding: 5px ;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #cdcdcd;
    color: #333;
    transition: color 0.3s ease-out;
}
.searchcol .search-content { margin-left:80px;}

.searchcol .search-btn { text-indent:-9999px; background:url(../images/search-icon.png) no-repeat; background-size:40px 40px; width:40px; height:40px; float:right; margin-right:40px; cursor:pointer;}

.rate table tr td:first-child { text-align:left;}

.clear-line { clear:both; height:15px;}

.addnewbtn { background:#16a085; padding:5px 15px; float:left; text-transform:uppercase; color:#fff; font-weight:bold; text-decoration:none; margin-bottom:20px;}
.addnewbtn:hover { background:#34495e;     -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;}

  .main-navigation .menu-toggle {
    background:#2c3e50;
    border: none;
    color: #d3d3d3;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    outline: none; font-style:normal; }
	
.main-navigation .menu-item {
    display: inline-block; border-right:1px solid #34495e; -moz-box-shadow: 1px 0px 0px #000000;
-webkit-box-shadow: 1px 0px 0px #000000;
box-shadow: 1px 0px 0 #000000; }
	
	.main-navigation .menu-item:last-child {
   border-right:none; box-shadow:none; }
        .main-navigation .menu-item a {
	  text-align:center;
      position: relative;
      display: block;
      color: #d3d3d3;
      text-transform: uppercase; font-size:14px; padding:12px 12px; text-decoration:none; outline:none;}
	  
	  .main-navigation .menu-item a:hover { background:#34495e; color:#fff; outline:none;}
	  
	  .main-navigation .menu-item a.active { background:#617992; color:#fff; outline:none;}

.main-navigation .menu-item:last-child a:after {
      display: none; }
	  
@media screen and (min-width: 681px) {
      .main-navigation .menu-toggle {
        display: none !important; } 
        }
    @media screen and (max-width: 680px) {
      .main-navigation .menu-toggle {
        display: block;  width:100%; cursor:pointer;}
	.main-navigation {  margin:0 20%;  height: 35px;
padding: 5px 0 0; } 
.main-navigation .menu {
    display: inline-block; }

}
  
    @media screen and (min-width: 681px) {
      .main-navigation .menu {
        display: block !important; text-align:center; margin: 0 auto;
padding: 0px;
max-width: 1170px; background:#2c3e50;}
			.main-navigation {  width:100%; 
padding: 10px 0 0; }
		
 }
    @media screen and (max-width: 680px) {
      .main-navigation .menu {
        display: none; } 
			  .mobile-navigation {
  clear: both;
  padding: 0;
  display: none; margin:0 20%; }
  

  }
  
  
   @media screen and (min-width: 991px) {
    .mobile-navigation {
      display: none !important; } }
	  
	   @media screen and (max-width: 400px) {
		   .main-navigation {  margin:0 10%;  height: 35px;
padding: 5px 0 0; }
    .mobile-navigation .menu {
    list-style: none;
    padding: 0;
    text-transform: uppercase; margin:0 10%; text-align:center;}
    .mobile-navigation .menu a {
     padding: 3px 51px 3px 45px;
      position: relative;
      display: block;
      color: #d3d3d3;
      text-transform: uppercase; font-size:24px; margin-right:15px; margin-bottom:10px;}
    .mobile-navigation .menu .current-menu-item a {
      color: #f4c545; }
	.mobile-navigation .menu .current-menu-item a, .mobile-navigation .menu:hover a:hover {
      color: #fff;} 
	  .mobile-navigation {
  clear: both;
  padding: 0;
  display: none;
  margin:0 10%; }
  

  }
	  
	   @media screen and (min-width: 401px) {
   .mobile-navigation .menu {
    list-style: none;
    padding: 0;
    text-transform: uppercase; margin:0 10%; text-align:center;}
    .mobile-navigation .menu a {
     padding: 3px 51px 3px 45px;
      position: relative;
      display: block;
      color: #d3d3d3;
      text-transform: uppercase; font-size:24px; margin-right:15px; margin-bottom:10px;}
    .mobile-navigation .menu .current-menu-item a {
      color: #f4c545; }
	.mobile-navigation .menu .current-menu-item a, .mobile-navigation .menu:hover a:hover {
      color: #fff;}
	  .mobile-navigation {
  clear: both;
  padding: 0;
  display: none; } 
  }