/* This css file is to over write bootstarp css
--------------------------------------------------------- /
* Theme Name: Ela Admin Template
* Theme URI: http://demos.jeweltheme.com/
* Author: jewel_theme
* Author URI: http://themeforest.net/user/jewel_theme/portfolio
* Description:
* Version: 1.0.0
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Tags: html, themplate, Ela Admin
--------------------------------------------------------- */

.leaflet-tooltip.my_style{
  display: inline;
 background-color: transparent;
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(236, 94%, 50%);
 font-size: 13px;
 }
  .leaflet-tooltip.my_styl1{
  display: inline;
 background-color: transparent;
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(325, 98%, 50%);
 font-size: 12px;
 } 
 .leaflet-tooltip.my_style1{
  display: inline;
 background-color: transparent;
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(268, 96%, 21%);
 font-size: 12px;
 }
 .leaflet-tooltip.my_stl{
  display: inline;
 background-color: transparent;
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(41, 98%, 50%);
 font-size: 12px;
 }
 .leaflet-tooltip.my_stylep{
  display: inline;
 background-color: transparent;
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(0, 98%, 51%);
 font-size: 14px;
 }
 .leaflet-tooltip.my_stylee{
  display: inline;
 background-color: rgb(249, 250, 167);
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(239, 88%, 51%);
 font-size: 14px;
 }
 .leaflet-tooltip.my_stylee1{
  display: inline;
 background-color: rgb(175, 175, 154);
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(40, 75%, 2%);
 font-size: 12px;
 }
 .leaflet-tooltip.my_styleed{
  display: inline;
 background-color: transparent;
 border: transparent;
 border-radius: 3px;
 box-shadow: none;
 font-weight: bold;
 color: hsl(288, 50%, 34%);
 font-size: 12px;
 }
 @keyframes fade { 
  from { opacity: 0.3; } 
}
.blinking {
  animation: fade 1s infinite reverse;
}
 .small_container
 {
  /* border:1px solid #064f46; */
  border-radius: 0 0 5px 0;
  color: #153a50;
  /* margin-top:2px; */
 }
 .small_container_h4
 {
  background: #153a50;
  border: 1px solid #aad3df;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(10, 51, 46);
  padding: 4px;
  margin: 0;
  width: 100%;
  text-align: center;
  border-left: 3px solid #153a50;
  color: #aad3df;
 }
 .small_container_fieldset
 {
  /* border:1px solid #064f46; */
  /* border: 1px solid #0a332e;  */
  /* padding: 10px;  */
  position: relative;
 }

 .legend-line {
  position: relative;
  /* padding: 0 10px; */
  background: #064c43;
  z-index: 1;
  font-size: 14px;
  text-align: center;
  color:#878787;
}
.urban_bg
{
  color: #aad3df;
  background-color: #153a50;
  border-color: #7198af;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.rural_bg
{
  color: #eff2f1;
  background-color: #7198af;
  border-color: #7198af;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.urban_bg_span
{
  display: inline-block;
  padding: .25em .4em;
  /* font-size: 119%; */
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
}
.urban_bg_span_light
{
  color: #212529;
  background-color: #81aac1;
}
.pravahak_tbl
{
border:1px solid #82abc1;
color:#031d19;
}
.pravahak_tbl_thead
{
  color: #f1f1f1;
  background-color: #2b5065;
  border-color: #b1dce9;
  font-size:14px;
}
.scheme_no
{
  background: #198064;
  text-align: center;
  /* padding-left: 20px; */
  border: 4px solid #81aac1;
  color: #fff;
}
.label_small_head
{
  color: #878787;
  font-size: 13px;
  line-height: 0px;
}
.div_display_potential
{    
  border: 1px solid #79a0b6;
  margin-top: 3px;
  /* box-shadow: 1px 2px 3px 2px #82abc1; */
  padding: 1px;
  height: 100px;
}
.cursor-pointer {
  cursor: pointer;
}
.gauge-container {
          width: 100%;
          height: 70px; /* Adjust this value to make it smaller */
          display: flex;
          justify-content: center;
          align-items: flex-start;
      }

      .animated-button2 {
        /* background: linear-gradient(-30deg, #3d240b 50%, #2b1a08 50%); */
        background: linear-gradient(-30deg, #f69981 50%, #e99079 50%);
        padding: 20px 40px;
        /* margin: 12px; */
        display: inline-block;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        overflow: hidden;
        color: #f7e6d4;
        font-size: 17px;
        letter-spacing: 1.5px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        padding: 10px;
        color: #fff !important;
        }
        
        .animated-button2::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #ad9985;
        opacity: 0;
        -webkit-transition: .2s opacity ease-in-out;
        transition: .2s opacity ease-in-out;
        }
        
        .animated-button2:hover::before {
        opacity: 0.2;
        }
        
        .animated-button2 span {
        position: absolute;
        }
        
        .animated-button2 span:nth-child(1) {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 2px;
        background: -webkit-gradient(linear, right top, left top, from(rgba(43, 26, 8, 0)), to(#d98026));
        background: linear-gradient(to left, rgba(43, 26, 8, 0), #d98026);
        -webkit-animation: 2s animateTop linear infinite;
              animation: 2s animateTop linear infinite;
        }
        
        @keyframes animateTop {
        0% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        }
        100% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
        }
        }
        
        .animated-button2 span:nth-child(2) {
        top: 0px;
        right: 0px;
        height: 100%;
        width: 2px;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 26, 8, 0)), to(#d98026));
        background: linear-gradient(to top, rgba(43, 26, 8, 0), #d98026);
        -webkit-animation: 2s animateRight linear -1s infinite;
              animation: 2s animateRight linear -1s infinite;
        }
        
        @keyframes animateRight {
        0% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
        }
        100% {
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        }
        }
        
        .animated-button2 span:nth-child(3) {
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 2px;
        background: -webkit-gradient(linear, left top, right top, from(rgba(43, 26, 8, 0)), to(#d98026));
        background: linear-gradient(to right, rgba(43, 26, 8, 0), #d98026);
        -webkit-animation: 2s animateBottom linear infinite;
              animation: 2s animateBottom linear infinite;
        }
        
        @keyframes animateBottom {
        0% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
        }
        100% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        }
        }
        
        .animated-button2 span:nth-child(4) {
        top: 0px;
        left: 0px;
        height: 100%;
        width: 2px;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 26, 8, 0)), to(#d98026));
        background: linear-gradient(to bottom, rgba(43, 26, 8, 0), #d98026);
        -webkit-animation: 2s animateLeft linear -1s infinite;
              animation: 2s animateLeft linear -1s infinite;
        }
        
        @keyframes animateLeft {
        0% {
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        }
        100% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
        }
        }
        details {
          width: 100%;
          min-height: 5px;
          max-width: 700px;
          padding: 4px 15px 4px 15px;
          margin: 0 auto;
          position: relative;
          font-size: 18px;
          border: 1px solid rgba(0,0,0,.1);
          border-radius: 5px;
          box-sizing: border-box;
          transition: all .3s;
          color:#f8f9fa;
          background-color: #7198af;
        }
        
        details + details {
          margin-top: 20px;
        }
        
        details[open] {
          min-height: 50px;
          background-color: #2591a0;
          box-shadow: 2px 2px 20px rgba(0,0,0,.2);
        }
        
        details p 
        {
          color: #eaf5f8;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          margin-top:10px;
        }
        
        summary {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 400;
          cursor: pointer;
        }
        
        summary:focus {
          outline: none;
          
        }
        
        summary:focus::after {
          content: "";
          height: 100%;
          width: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          box-shadow: 0 0 0 5px #a6cdd8;
        }
        
        summary::-webkit-details-marker {
          display: none
        }
        
        .control-icon {
          fill: #a6cdd8;;
          transition: .3s ease;
          pointer-events: none;
        }
        
        .control-icon-close {
          display: none;
        }
        
        details[open] .control-icon-close {
          display: initial;
          transition: .3s ease;
        }
        
        details[open] .control-icon-expand {
          display: none;
        }

/* Container for each component */
.component-circle {
  position: relative;
  display: inline-block;
  margin: 5px;
  text-align: center;
}

/* Styling the circular progress container */
.progress-bar-container {
  position: relative;
  width: 100px; /* Circle size */
  height: 100px; /* Circle size */
  margin: auto;
  border-radius: 50%; /* Make it circular */
  background-color: #ededed;
}

/* Styling the text inside the circle (component name and progress) */
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Styling the component name */
.progress-text .component-name {
  font-size: 14px;
  color: #333;
}

/* Styling the progress percentage */
.progress-text .progress-percentage {
  font-size: 18px;
  color: #ca7d69;
}
.crimson-text {
  color: crimson;
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
  
}
.positioned-span {
  position: relative;
  top: 5px;    /* Move down 50px */
  left: 100px;  /* Move right 100px */
  color:#900C3F;
  font-size:10;
  text-align:center;
  font-family: 'Roboto Slab', sans-serif;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 37px;
  
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 40%;
}
.district-label {
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E7ECE2;
  border: none;
  opacity:0;
  color:#226C57;
  opacity: 0.5; 
  }
.container_boxes
{
  padding: 5px;
  background: #ebf6f9;
  box-shadow: 10 10 20px rgba(0, 0, 0, 0.08);
  border: 4px solid #b9e6ec;
  margin-left:10px;

}
.container_boxes_head
{
color: #153a50;
background: #eaf5f8;
padding: 6px;
margin-left: 10px;
border: 3px solid #76d0ba;
margin-bottom: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
.pravahak_main_head
{
  border: 4px solid #81aac1;
  background:#8e5648;
  padding:10px;
  margin-top: 10px;
  margin-left:10px;
  color:#d7e2e2;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.cap_gague_metr
{
  background: #a8e1e9;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  height: 145px;
  margin-bottom: 4px;
}
.transparent-heading 
{
 /*font-family: 'Arial', sans-serif;
  font-size: 1.5rem !important;
  color: rgb(21, 58, 80);
  padding: 6px;
  border-radius: 5px;
  background-color: #7198AF;
  border: 1px solid #5a7f92;
  opacity: 0.85;
  margin-left: 4%;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;*/
  border: 4px solid #81aac1;
  background:#8e5648;
  padding:10px;
  color:#d7e2e2;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  margin-bottom: 10px;
}