/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 3 Sep, 2020, 5:11:22 PM
    Author     : Shiva
*/

body{
overflow: scroll;
height:100%;
background-color:#f5f5f5;
}
.logoicon{
 padding-top:15px;
}

.logo{
position:relative;
/*width: 50%; Partial-width */
float:left;
overflow:visible; /* Overflow due to float */  
padding-bottom:5px; 
}
.logotxt{
position:relative;
width: auto; /* Partial-width */
float:left;
overflow:visible; /* Overflow due to float */   
}

.icon-bar{
  position:relative;
  width:180px; /* Partial-width */
  background-color: #3274d6; /* blue background */
  float:right;
  overflow: auto; /* Overflow due to float */
  vertical-align:center;
}

.icon-bar a{
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
  padding: 12px 0; /* Some top and bottom padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 24px; /* Increased font size */
}

.icon-bar a:hover{
  background-color: #000; /* Add a hover color */
}

.active{
  background-color: #4CAF50; /* Add an active/current color */
}
* {box-sizing:border-box}


.icon-bar-profile{
  position:relative;
  width:180px; /* Partial-width */
  background-color: #3274d6; /* Dark-grey background */
  float:right;
  overflow: auto; /* Overflow due to float */
}

.icon-bar-profile a{
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  width: 20%; /* Equal width (3 icons with 50% width each = 100%) */
  padding: 12px 0; /* Some top and bottom padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 24px; /* Increased font size */
}

.icon-bar-profile a:hover{
  background-color: #000; /* Add a hover color */
}

.active{
  background-color: #4CAF50; /* Add an active/current color */
}
* {box-sizing:border-box}

/* Slideshow container */
.imgshow-bucket{
  max-width: 100%;
  margin:  auto;
  z-index:0;
  
}

/* Hide the images by default */
.mySlides{
  display: none;
  z-index:0;
}

/* Next & previous buttons */
.before, .after{
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */
.after{
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.before:hover, .after:hover{
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text{
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext{
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  z-index:1;
}

/* The dots/bullets/indicators */
.dot{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover{
  background-color: #717171;
}

/* Fading animation */
.fade{
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade{
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade{
  from {opacity: .4}
  to {opacity: 1}
}

/*Top Navigation Bar*/
.topnav{
 /* position:absolute; */   
  overflow: hidden;
  background-color: #333;
  width:100%;
  
}

.topnav a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}



.topnav a.active{
 /* background-color: #4CAF50;*/
  background-color: #3274d6;
  color: white;
}

.topnav .icon{
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.mydropdown{
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.mydropdown .dropbtn{
  cursor:pointer;
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.mydropdown-content{
  display: none;
  position: absolute; 
  background-color: #3274d6;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index=1;
}

/* Style the links inside the dropdown */
.mydropdown-content a{
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .mydropdown:hover .dropbtn, .drobtn:focus{
  background-color: #ddd;
  color: black;
}

/* Add a grey background to dropdown links on hover */
.mydropdown-content a:hover{
  background-color: #ddd;
  color: black;
}

 
.mydropdown:hover .mydropdown-content{
  display: block;
  overflow:visible;
}

.show{
	display: block;
	overflow:visible;
	z-index=2000;
}

@media screen and (max-width: 600px){
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px){
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

 .topnav.responsive .mydropdown {float: none;}
  .topnav.responsive .mydropdown-content {position: relative;}
  .topnav.responsive .mydropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }


/* End of Navigation Bar*/


.topheader{
	padding:15px;
	z-index=-1;
}

/*Tab content*/
.nav-link:active{
	background-color:grey;
	color:black;
}

.tab-pane{
	background-color:#f5f5f5;
}
/*Web Home Page content*/
.container{
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
	
	}
	
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}

.container-fluid{
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto}

.row{
	margin-right:-15px;
	margin-left:-15px;
	position:relative;
	
	}
	
.col-sm-4{
	display:inline-block;
	position:relative;
	min-height:1px;
	padding-right:15px;
	padding-left:15px
	float:left;
	width:33%;
	border-radius: 15px;
	overflow:auto;
	
	
}
.col-sm-5{
	
	display:inline-block;
	position:relative;
	min-height:1px;
	padding-right:15px;
	padding-left:15px
	float:left;
	width:100%;
	border-radius: 15px;
	overflow:auto;
	
	
}

.well{
	min-height:20px;
	padding:19px;
	margin-bottom:20px;
	background-color:#f5f5f5;
	border:1px solid #e3e3e3;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
	}
	
	
/* User home page */

/*control agency tabs*/
.collapse{
	
	position:relative;
}

 .tratsa {
        height: 700px;
        width: 100%;
		margin:75px;
      }



 /* Add a gray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    }