@charset "utf-8";
/* CSS Document */

body {
  font: 1em Calibri, Helvetica, sans-serif;
  background-color:#fff;
  
  font-size:14px;
}
.main {
 
  background-color:#fff;
  overflow:hidden;
  height:100%;
  width:99%;
  margin:auto;
  
}
* {
  box-sizing: border-box;
}
/* Add a blue text color to links */
a {
  color: dodgerblue;
}
@-ms-viewport{
  width: device-width;
  height:device-height;
}
#nav {
  width:100%; /* 1000 */
  position: absolute;
 
 
}
#nav > a {
  display: none;
}
#nav li {
  position: relative;
}
#nav li a {
  color: #fff;
  display: block;
}
#nav li a:active {
  background-color: #c00 !important;
}
#nav span:after {
  width: 0;
  height: 0;
  border: 0.313em solid transparent; /* 5 */
    border-bottom: none;
    border-top-color: #fff;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em; /* 5 */
}
/* first level */
#nav > ul {
    /*height: 2.75em;  60 */
    background-color: #000;
}
#nav > ul > li {
    width: 180px;
    height: 100%;
    float: left;
     list-style-type:none;
}
#nav > ul > li > a {
    height: 100%;
    font-size: 1.2em; /* 24 */
    line-height: 2.5em; /* 60 (24) */
    text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
    border-right: 1px solid #333;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
    background-color: #4caf50;
}
/* second level */
#nav li ul {
    background-color: #000;
    display: none;
    position: absolute;
    top: 100%;
     list-style-type:none;
     width:300px;
     z-index:999;
}
#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;
}
#nav li:not( :first-child ):hover ul {
    left: -1px;
}
#nav li ul a {
    font-size: 1.0em; /* 20 */
  
    padding: 5px; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
    background-color: #fff;
    color:#000;
}
@media only screen and ( max-width: 62.5em ) and (min-width: 40em ) { /* 1000 */
    #nav {
        width: 100%;
        position: static;
        margin: 0;
    }
}
@media only screen and ( max-width: 40em ) /* 640 */
{
    html {
        font-size: 75%; /* 12 */
    }
    #nav
    {
        position: relative;
    }
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
        list-style-type:none;
        left: 0;
        right: 0;
    }
    #nav:target > ul {
        display: block;
    }
    #nav > ul > li {
        width: 100%;
        float: none;
    }
    #nav > ul > li > a {
        height: auto;
        text-align: left;
        padding: 0 0.833em; /* 20 (24) */
    }
    #nav > ul > li:not( :last-child ) > a {
        border-right: none;
        border-bottom: 1px solid #4caf50;
    }
    /* second level */
    #nav li ul {
        position: static;
        padding: 1.25em; /* 20 */
        padding-top: 0;
         list-style-type:none;
          z-index:999;
    }
}

<!-- menu END -->

<!-- form -->

/* Add padding to containers */
.container {
  padding: 16px;
  background-color:#000;
  
}
.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.float_left {
	float:left;
}
.float_right {
	float:right;
}
.float_right1 {
	float:right !important;
}
 .float_rightR {
	float:right;
}
.text_left {
	text-align:left;
}
.txt_right {
	text-align:right;
}
.txt_right1 {
	text-align:right;
}
.txt_center {
	text-align:center;
}
.position_rel
{
	position:relative;
}
.pad_10
{
	padding:10px;
}
.pad_10T
{
	padding-top:10px;
}
.pad_5
{
	padding:5px;
}
.pad_5rl
{
	padding:0px 5px;
}
.marg_10t
{
	margin-top:10px;
}
.chkbox_grid
{
	background:#e4e4e4;
	border:1px solid #ccc;
	padding:5px;
}
.input_img {
width:100px; height:100px; border:2px solid #ccc;
}
.employee_img
{
	width:100px;
}
.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-inline button {
  padding: 10px 20px;
  background-color: 4CAF50;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}

.form-inline button:hover {
  background-color: royalblue;
}
 .form-inline .submit {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
}
.form-inline .upload {
	
  background-color:royalblue;
  color:#fff;
  padding: 5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  
 }

/* Div width */

.div_33 {
	width:33%;
}
.div_50 {
	width:49%;
}
.div_40 {
	width:39%;
}
.div_60 {
	width:59%;
}
.div_30 {
	width:29%;
}
.div_70 {
	width:69%;
}
.div_20 {
	width:19%;
}
.div_10 {
	width:9%;
}
.div_5 {
	width:4%;
}
.div_80 {
	width:79%;
	
}
.div_90 {
	width:89%;
}
.div_15 {
	width:15%;
}
.div_33, .div_50, .div_40, .div_60, .div_30, .div_70, .div_20, .div_80, .div_10, .div_90, .div_15  {
	float:left;
	position:relative;
	padding:6px;

}
  .div_50R, .div_50L {
	width:49%;
}
.row
{
	width:100%;
	clear:both;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.list_select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
    max-width: 500px;
}
 .list1
    {
        clear: both; 
        float: left; 
        width: 290px;
      
    }

/* Full-width input fields */
.input, select, textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  height:40px;
  max-width:500px;
}
.input_sml50 { 
 width: 50%;
  padding: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  height:40px;
  max-width:200px;
 
}
.input_sml80 { 
 width: 80%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  height:40px !important;
  max-width:200px;
}
.input:focus {
  background-color: #ddd;
  outline: none;
}
.input_large {
  width: 100%;
  padding:5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  height:40px !important;

  
}


/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
.clear
{
	clear:both;
}
.overflow {
	overflow:auto;
}
.border {
	border:1px solid #ccc;
}
.bdr_btm {
	border-bottom:1px solid #ccc;
}
.bg_e4e4
{
	background:#e4e4e4;
}
.box_shadow {
	  border: 1px solid;
  padding: 10px;
  box-shadow: 0px 7px 0px 3px #eeeeee;
	
}
.vertical_alignT
{
	vertical-align:top:
}
/* Set a style for the  buttons */
.submit {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size:14px;
 
}
 .btn
 {background-color: #4CAF50;
  color: white;
  padding: 7px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  min-width:100px;
  margin:5px;
  font-weight:bold;
  font:14px "Calibri", Gadget, sans-serif;
 }

          .login_bg {
            
            border-radius:10px;
            max-width:500px;
            background-color:#fff;
            overflow:hidden;
         
          
        }
      .Label_txt900{

          color:#900;
          font-weight:bold;


      }
          .clear
{clear:both;}

.registerbtn:hover {
  opacity: 1;
}

/* for table */

.table_Hscroll {
  font: 13px Calibri, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table_Hscroll td, .table_Hscroll th {
  border: 1px solid #ddd;
  padding: 4px;
}

.table_Hscroll tr:nth-child(even){background-color: #f2f2f2;}

.table_Hscroll tr:hover { }

.table_Hscroll th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
  background-color: #4CAF50;
  
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}
/* Footer */
.footer {
	width:100%;
	background:#333;
	padding:10px;
	color:#fff;
	text-align:center;

}
.footer a {
		color:#ffc;
		text-decoration:underline;
		
	}
h2{
    font-size:13px;
}
 .Popup

        {
                 background-color: #FFFFFF;

            border: 3px solid #000;           

            padding-top: 10px;

            padding-left: 10px;
            width:70%;
            overflow:auto;

            max-width: 500px;
            height:auto;

            max-height: 400px;

        }

/* Responsive layout - when the screen is less than 768px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width:769px) {
  .input, .input_small, .input_large, select, textarea {
    width: 100%;
    margin-top: 0;
  }
  .div_33, .div_50, .div_40, .div_60, .div_30, .div_70, .div_20, .div_80,.div_10, .div_90, .div_15, .div_5 {
	width:100%;
}
  .div_50R, .div_50L {
	width:49%;
}
  .img_div50L {
       top:5px;
       padding-left:10px;

}

.form-inline {
    flex-direction: column;
    align-items: stretch;
  }

.txt_right {
	text-align:left;
}
.txt_right1 {
	text-align:right;
}
    .login_bg {
        padding:10px;
        margin:2px;
    }
     .Popup

        {
         padding-left:30px;       
            width:90%;
            overflow:scroll;
           
            height:auto;

          

        }
     .float_right1 {
	float:left;
}
      .float_rightR {
	float:right;
}
}