/*accordion*/
.list-group.panel > .list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px
}
.list-group-submenu {
  margin-left:20px;
}
#gobutton{
	width:100%;
	height:auto;
}
button{
	border-radius: 4px;
	float:right;
	background-color: #41bbac;
	border-color:#41bbac;
	color: white;

}
.panel{
	margin-bottom:0px;
}
input[type=text], select {
    width: 100%;
    padding: 5px 10px;
    margin: 4px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	margin-top:0px;
}
#topNav {
	height:auto;
	margin-top:0px;
	list-style: none;
	background-color:	#2C5C82 ;
	border-radius: 0px;
	margin-bottom:0px;
  padding-left: 0px;
  padding-right: 0px;
}
.list > li {
	display: inline-block;
}
.list > .active {
	color: white;
}
.foot
{
	text-align:center;
	background-color:rgb(1, 87, 155) ;
	color: white;
	padding-bottom:0rem;
}
@-moz-keyframes spin {
	0% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.progress-bar{
	width:70%;
}
.ol-unselectable{
	width:auto;
	height:auto;
}
.buttonload {
    background-color: #01579B;
    border: none;
    color: white;
    padding: 12px 24px;
    font-size: 14px;
	width: unset;
    height: unset;
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}
#chartDiv{
	margin-left: 15px;
    margin-right: 15px;
}
#chartheading
{
	text-align:center;
}
#title{
	color:white;
}
#sarpanchPic
{
	width:50%;
}
th,thead{
	background-color:#01579B;
	color:white;
	font-size: 13px;
}
td{
	font-size: 13px;
}
#styleTab{
	border-bottom: 0;
    float: right;
}
#topNav a{
	background-color:#2C5C82;
	border-style:hidden;
	color:white;
	cursor:pointer;
	padding-top:15px;
	/* height:10%; */
}
#topNav a:hover,a:focus{

	color:black;
}
#topNav .dropdown-menu{
	background-color:#2C5C82;
	left: auto;
    /* right: 0;
	top: 175%; */
}

/*MeasureLengthAndArea*/
 .tooltip {
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;
        white-space: nowrap;
      }
      .tooltip-measure {
        opacity: 1;
        font-weight: bold;
      }
      .tooltip-static {
        background-color: #ffcc33;
        color: black;
        border: 1px solid white;
      }
      .tooltip-measure:before,
      .tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
      }
      .tooltip-static:before {
        border-top-color: #ffcc33;
      }


#backToTop{float:right;
margin-right:10px;}

a #tabs-with-dropdown-tab-5:hover{
	background-color:#2C5C82;
}

a #tabs-with-dropdown-tab-4:hover{
	background-color:#2C5C82;
}
#backToTop{float:right;
margin-right:10px;}

#tabs-with-dropdown-tab-4{
	padding-bottom: 12px;
    padding-top: 12px;
}
#tabs-with-dropdown-tab-1{
	padding-bottom: 12px;
    padding-top: 12px;
}
#tabs-with-dropdown-tab-2{
	padding-bottom: 12px;
    padding-top: 12px;
}
#tabs-with-dropdown-tab-3{
	padding-bottom: 12px;
    padding-top: 12px;
}
#tabs-with-dropdown-tab-5{
	padding-top: 5px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
}
#searchinput:focus{
	border-color:chocolate;
}
.strong {
    font-weight: bold;
}

#gobutton{
	width:100%;
	height:auto;
}
#clearButton{
	background-color:rgb(255, 153, 153);
	border-color: rgb(255, 153, 153);
	float: left;
}
#map3 .ol-zoomslider {
	top:1%;
	left: auto;
	right: 8px;
	background-color: lightblue;
	width: 200px;
	height: 15px;
	padding: 0;
	box-shadow: 0 0 5px rgb(255,69,0);
	border-radius: 20px;
}

#map3 .ol-zoomslider:hover {
	background-color: rgba(255,69,0,0.3);
}

#map3 .ol-zoomslider-thumb {
	height: 15px;
	width: 15px;
	margin: 0;
	filter: none;
	background-color: rgba(255,69,0,0.6);
	border-radius: 20px;
}
#map3 a.ol-zoomslider-handle:hover {
	background-color: rgba(255,69,0,0.7);
}
/* input[type=range]{
    -moz-appearance: none;
} */

input[type=range]::-moz-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-slider-thumb {
    -moz-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ff8000;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-moz-slider-runnable-track {
    background: #ccc;
}
button[disabled]{
	cursor:no-drop;
}
#aTag .disabled {
   pointer-events: none;
   cursor: no-drop;
}
li.userId{
	padding-top: 2.3%;
}
#tddata
{
	text-align:right;
}
#selectarea,#charttable,#norecords,#norecordsAvailable,#identifyID,#activityplanning,#profileReport,#metadataId
{
	color:chocolate;
	text-align:center;
	font-weight:bold;
}
hr{
	margin-top:10px;
	margin-bottom:10px;
}
.table {
 counter-reset: serial-number; /* Set the serial number counter to 0 */
}
.table #serial:first-child:before {
 counter-increment: serial-number; /* Increment the serial number counter */
 content: counter(serial-number); /* Display the counter */
}
button.close{
    color:white;
	height:15px;
	width:15px;
}
.modal-header
{
	color:white;
	background-color: rgb(1, 87, 155);
	height: 5%;
}

.modal-footer
{
    background-color: rgb(1, 87, 155);
    height: 5%;
}

.modal-body
{
	background-color: aliceblue;
    overflow: scroll;
    height: 70%;
}

.btn-default
 {
	border-radius: 4px;
	float:right;
	background-color: #41bbac;
	border-color:#41bbac;
	color: white;
	width: 100;
    height: 30;

}

#progress {
        position: absolute;
        bottom: 0;
        left: 5px;
        height: 2.3%;
        background: chocolate;
        width: 0;
        transition: width 250ms;
		text-align: center;
		font-size: 12px;
		color: aliceblue;
		font-style: oblique;
		font-weight : bold;
      }

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu{

	top:100%;
	bottom:auto;
}
/* .parent {
  position: relative;
  display:inline-block;
}
.image1 {
	top: 45%;
    position: absolute;
    left: 55%;;

} */
/* .image2 {
  position:absolute;
  right:10%;
  top:10%;
  width:25%;
  max-width:25%;

} */

/* #accordion, #mapPortion {
    position: absolute;
}
#accordion {
    top: 0px;
    width: 200px;
    bottom: 0px;

}
#mapPortion {
    top: 0px;
    left: 200px;
    right: 0;
    bottom: 0px;

} */

text{
	font-weight:bold;
	font-size:x-small;
	color:chocolate;

}

#identifyDiv {
    white-space: pre;
}
#legendDiv, #railId {
    white-space: pre;  
	
	}
b{
	color:chocolate;
}

#apapp {
  font-family: 'Open Sans', sans-serif;

  .table {
    margin: 1em;
    display: flex;
    flex-direction: column;

    .header, .row {
      display: flex;

      div {
        flex: 1;
        padding: 0.2rem 0.4em;
        border: 1px solid rgb(238, 238, 238);
      }
    }

    .header {
      background-color: rgb(238, 238, 238);
      div {
        cursor: pointer;
      }
    }
  }
}


#wrapper
{
	display: flex;
  align-items: center;
  justify-content: center;
}

 button:hover, button:focus {
    text-decoration: none; !important
    background-color: #41bbac; !important
}


/* Overview */
  .ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
		    top: 75%;
   max-width:fit-content;
    width: fit-content;
    height: 20%;
    position: absolute;
    left: 85%;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      .ol-rotate {
        top: 170px;
        right: 0;
      }
	  div .ol-overviewmap .ol-custom-overviewmap .ol-unselectable .ol-control
	  {
		      top: 75%;
				width: 15%;
				height: 20%;
				position: absolute;
				left: 85%;
	  }
	    #areaprofilediv
	  {
	      padding-right: 2px;
    padding-left: 2px;
    margin-right: auto;
    margin-left: auto;
	  }

	  div.ol-zoomslider.ol-unselectable.ol-control
	  {
		  background-color: rgba(0,60,136,0.5);
	  }

	  #areaprofilediv
	  {
	      padding-right: 2px;
    padding-left: 2px;
    margin-right: auto;
    margin-left: auto;
	  }
	  #assetsbutton
	  {
		      width: 52px;
			padding-left: 0px;
			    padding-right: 0px;
				border-color: #fff;
	  }

    .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* .imageContainer > img:active { */
  /* width: 500px; */
  /* height: 200px; */

/* } */

.img {
  height: 120px;
  width: 120px;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* 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.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

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

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

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
	line-height: 2;
	opacity: 1.2;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* Style buttons */
.button #btnPrev {
  background-color: DodgerBlue !important; /* Blue background */
  border: none !important; /* Remove borders */
  color: white !important; /* White text */
  padding: 12px 16px !important; /* Some padding */
  font-size: 16px !important; /* Set a font size */
  cursor: pointer !important; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.button #btnPrev:hover {
  background-color: RoyalBlue !important;
}

/* marquee effect styling */
.scrollcontainer {
  
  overflow: hidden;
}
.scrolling {
 animation: marquee 20s linear infinite; 
}
.scrolling:hover{
  animation-play-state: paused;
 }
@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to { 
    transform: translateX(-50%);
  }
}


.lulccompmain{
 display: inline-block; 
  width: 100%;
  border: 1px solid red;
	
}
.lulcold{
	 float: right;
}
.lulcnew{
 float: left;
}