body {
  padding: 0;
  margin: 0;
  background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
  background:#6ab446;
}
.navbar-nav{
	float:right !important;
	font-size:16px;
	margin-top:5px !important;
	list-style-type:none;
}
.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}
.nav-link {
  margin-right: 1em !important;
}
.nav-link:hover {
  color: #000;
}
.navbar-collapse {
  justify-content: flex-end;

}
.foot_color {
	background:#6ab446;
}
header.header_ht, .header_ht {
	min-height: 450px!important;
	height:auto !important;
}
.search_form {
	margin-left:10%;
}
.input_width {
	width:30% !important;
	margin:10px;
    padding:10px;
	float:left;
}

.search_form label, .search_form button{
	margin-left:15px;
}

#alertMsg {
	text-align:center ;
	font-size: 16px;
	font-weight:bold;
	width:60%;
}
.title_bar {
	font-weight: bold !important;
	font-size: 15px !important;
}
.cust_alert {
	text-align:center ;
	font-size: 16px;
	font-weight:bold;
	width:60%;
}
.header_title {
   font-family:Copperplate;
   font-weight:bold;
   margin-left:400px;   
}
#example thead tr th,#example tbody tr td {
	text-align:center !important;
}
.card-columns {
	margin-left:25%;
}

.tile-design {
  margin: 5px 5px 5px 80px;	
  border: 1px dashed green;
  width: 90%;
}	
.tile-design div a img{
	width:80%;
	height:100%;
	align:center;
	text-decoration:none;
	outline : none;
	border: 0px;
}
a {
	color:#0275d8 !important;
	font-weight:bold;
	font-family:Helictica;
	font-size: 1em;
	outline : none;
	border: 0px;
}
.card {
	border-width: 11px !important;
	margin-top: 10px;
	}
/*
.header {
  background-image: url("../../img/backg.png");
  background-size: cover;
  background-position: center;
  position: relative;
  height: auto;
}

.overlay {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
}*/

h2.title{color:#FFF0AB; font-weight:bold;font-family:Helictica;margin-top:80px; font-size:2em}



.form-control{width: 55% !important;}

.form-inline .form-control{width: auto !important}


.view {
    background: url("../img/bg2.png")no-repeat center center;
    background-size: cover;
}

.navbar {
    background-color: transparent;
}

.top-nav-collapse {
    background-color: #4285F4;
}

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #4285F4;
    }
}

html,
body,
header,
.view {
  height: 155px;
}


//Login design /* Bordered form */
form {
  border: 3px solid #f1f1f1;
}

/* Full-width inputs */
.login_text {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.login_btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 18px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 90px;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
  //width: 120px;
  padding: 10px 18px;
  background-color: #f44336;
  margin-left:22px;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 60px;
  height:70px;
  border-radius: 50%;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
} 

//modal login box css
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 21%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
 
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 21%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 2.5em;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 


//admin tile-design

@import "bourbon";

$color_purple: #5133AB;
$color_red: #AC193D;
$color_orange: #DC572E;
$color_green: #00A600;
$color_blue: #2672EC;

$base_font_size: 1em;
$base_line_height: 1.5em;
$text_font_family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$display_font_family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

body {
	font-family: $text_font_family;
	font-size: $base_font_size;
	line-height: $base_line_height;
	font-weight: 400;
}

p, span, a, ul, li, button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

strong {
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $display_font_family;
	line-height: $base_line_height;
	font-weight: 300;	
}

strong {
  font-weight: 400;
}

.tile {  
  width: 100%;
	display: inline-block;
	box-sizing: border-box;
	background: #fff;		
	padding: 20px;
	margin-bottom: 10px;
  
  .title {
		margin-top: 0px;
	}
  
  &.purple, &.blue, &.red, &.orange, &.green {
    color: #fff;
  }
  
  &.purple {
    background: $color_purple;

		&:hover {
			background: darken($color_purple, 10%);
		}		
  }
  
  &.red {
    background: $color_red;

		&:hover {
			background: darken($color_red, 10%);
		}		
  }
  
  &.green {
    background: $color_green;

		&:hover {
			background: darken($color_green, 10%);
		}		
  }
  
  &.blue {
    background: $color_blue;

		&:hover {
			background: darken($color_blue, 10%);
		}	
  }
  
  &.orange {
    background: $color_orange;

		&:hover {
			background: darken($color_orange, 10%);
		}	
  }
}

.tile {
    background: #006666;
	color: #ffffff !important;
}

h1,h2,h3,h4,h5,h6{ text-shadow: 1px 1px;}

.footer_tile {
    background: #006666;
	padding:0px;
	color: #ffffff !important;
	font-size:15px; 
	font-family:Helvetica;
	font-weight:bold;
}

.header-link {
	color: #006666 !important;
	font-size:15px; 
	font-family:Helvetica;
	font-weight:bold;
	text-shadow: 1px 1px;
}

.list-group li {
	font-size: 11px;
}

.form-group label, .form-group input {font-size: 13px; margin:0px;}


.table-dark {
  background-color: #CAE9C3;
}

.table-dark thead tr{
  background-color: #556B70;
  color:#FFFFFF;
  font-size:12px;
}

.table-dark tbody tr{
    font-size:13px;
}

.val-error {
  text-align: right;
  color: #D81B34;
  font-weight: bold;
  font-size:11px;
  margin-left: 80px;  
}


.modal-content
{
width: fixed;
border : 1px solid red;
}