@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);

.radio-inline {
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
}
.radio-inline input {
  margin-right: 5px;
}
.jjm_header
{
  padding: .5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
  color: #904b11;
}

.header_log {
overflow: hidden;
/* background-color: #ffffff; */
/* padding: 20px 10px;
height:125px;*/
/* border-bottom: 2px solid #904b11; */
border-top:10px solid #00A0B0;
}

/* Style the header links */
.header_log a {
float: left;
color: black;
text-align: center;
padding: 5px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header_log a.logo {
font-size: 25px;
font-weight: bold;
}

/* Change the background color on mouse-over */
.header_log a:hover {
background-color: #ddd;
color: black;
}

/* Style the active/current link*/
.header_log a.active {
background-color: dodgerblue;
color: white;
}

/* Float the link section to the right */
.header_left {
float: left;
width:120%;
}
.header_right {
float: right;
/*width:40%;*/
text-align: right;
}
.square
{
width: 205px;
height: 205px;
background-color: #fff;
margin:10px;
margin-top:-1%;
border: 2px solid #34b2c9;
    box-shadow: inset 3px 3px 8px 3px #40caec;
}
.log_body_left
{
float: left;
width:30%;

}
.log_body_right
{
float: right;
width:70%;
}
.circle {
height: 500px;
width: 500px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #904b11;
box-shadow: 3px 3px 8px 3px #a47f53;
/*align:center;*/
/* margin-left:15%;
margin-top:3%; */
}
.drop-wrapper {
  width: 900px;
  height: 600px;
  margin-left: 16%;
  margin-top: -6.5%;
  position: relative;
}

.drop-content {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, #cceeff, #66ccff);
  clip-path: url(#dropClip);
  -webkit-clip-path: url(#dropClip);
  position: relative;

  /* Add some depth */
  box-shadow:
    inset 0 0 25px rgba(255, 255, 255, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.3),
    0 8px 30px rgba(0, 0, 0, 0.3);

  border: 5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;

  /* Optional water drop wobble */
  /* animation: float 4s ease-in-out infinite; */
}

/* Float animation (optional) */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* @keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
} */

.form-content {
  /* position: relative;
  z-index: 2;
  padding: 50px;
  text-align: center; */
  /* style your form as needed */
  position: absolute;
    top: 10%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    color: #003344;
    left:12%;
}

.footer {
  position: relative;
  background-color: #00377e;
  color: #6c4a3b;
  padding: 40px 20px;
  overflow: hidden;
  font-weight: bold;
}

.footer-content {
  z-index: 2;
  position: relative;
  text-align: center;
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  z-index: 1;
  overflow: hidden;
}

.wave-path {
  animation: waveMove 10s linear infinite;
}

.wave-path--2 {
  animation-delay: -5s;
  opacity: 0.5;
}

/* Keyframes for wave movement */
@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.log_buttons
{
height: 100px;
width: 268px;

float: right;
margin-right: -30%;
margin-top:-10%;
}
.btn_square
{
width: 250px;
height: 40px;
background-color: #7B5747;
margin:10px;
border: 2px solid #6F4D3E;

font-size:20px;
font-weight:bold;
color:#fff;

}
.btn_square_blue
{
width: 250px;
height: 40px;
background-color: #0F65A1;
margin:10px;
border: 2px solid #0554aa;
margin-left:-10%;
padding:10px;
text-align:center;
/*color:#fffff;
text-align:center;
font-size:14px;
padding:10px;*/
}
.btn_square_grn
{
width: 400px;
height: 40px;
background-color: #00A0B0;
border: 2px solid #009eb3;
padding:5px;
text-align:center;
color:#fff;
/*box-shadow: 5px 5px #88888;

padding:5px;
font-size:14px;
/*transform: rotate(45deg);
margin-left:30%;
width: 100px;
height: 100px;

display:block;*/

}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
.header_log a {
float: none;
display: block;
text-align: left;
}

}
.home_desc
{
    line-height: 20pt;
    /* font-weight: 400; */
    color: #45494e;
    font-size: 17px;
    border-top: 5px solid #eee;
    border-bottom: 5px solid #eee;
    padding: 10px;
    float:left;
    width:100%
}
.home_desc h3 
{
color:#904b11;
/* text-align: center; */
}
.home_desc P 
{
float:left;
}
/*.home_dashboard
{
  border:1px solid #000; 
} */
.map
{
  float:right;
  width:30%;
}
.dash_board
{
  float:left;
  width:70%;
}
.dash_board P
{
  color:#fff;
  padding:5px;
}
.dash_square
{
width: 250px;
height: 130px;
background-color: #7B5747;
border: 2px solid #6F4D3E;
font-size:20px;
font-weight:bold;
color:#fff;
float:left;
margin:10px;
text-align:center;
padding:10px;
}
.dash_square_blue
{
width: 250px;
height: 130px;
background-color: #0F65A1;

border: 2px solid #0554aa;
padding:10px;
text-align:center;
float:left;
margin:10px;
font-size:20px;
font-weight:bold;
color:#fff;
}
.dash_square_grn
{
width: 250px;
height: 130px;
background-color: #00A0B0;
border: 2px solid #009eb3;
padding:5px;
text-align:center;
font-size:20px;
font-weight:bold;
color:#fff;
float:left;
margin:10px;
padding:10px;
}
.spn_brown_head
{
  color: #904b11;
  /*font-weight: bold;*/
  text-align: center;
  margin:10px;
}
.btn-remove
{
  color: #fff;
  background-color: #c9150f;
  border-color: #d43f3a;
  border-radius: 50%;
}
.scheme_home_desc
{
  width: 50%;
  float: right;
}
.scheme_home_desc p
{
font-size:20px;
color:#904b11;
border: 1px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 10px;
text-align: center;
}
.scheme_home
{
  background: url(../../images/kl_blue.png) no-repeat;
 height:700px;
 margin-top:-2%;
}
/*.scheme_home ul li
{

}*/
.scheme_home ul li span
{
  
  color: #fff;
  background-color: #9c6b56;
  border-color: #d43f3a;
  border-radius: 50%;
  width:50px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}
.scheme_home ul li a
{
    font-weight: bold;
    margin-top: 4px;
    background: #f1f1f1;
    padding: 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.district_14{  margin-left:10%;}
.district_13{ margin-left: 13%;margin-top:2%;}
.district_12{ margin-left:19%;}
.district_11{margin-left:14%; }
.district_10{ margin-left:18%;margin-top:2%; }
.district_9{margin-left:23%;}
.district_8{ margin-left:18%;}
.district_7{ margin-left:22%;margin-top:1%; }
.district_6{ margin-left:32%;margin-top:-3%; }
.district_5{ margin-left:27%;margin-top:1%; }
.district_4{ margin-left:22%; }
.district_3{ margin-left:30%;margin-top:-2%; }
.district_2{ margin-left:27%;}
.district_1{ margin-left:32%;;margin-top:-1%;}

.wrap {
  margin: 0 auto;
}
ul.tabs {
	
	height: 80px;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
  padding: 0;
}
ul.tabs li {	
	float: left;
	width: 190px;

}
ul.tabs li a {
	position: relative;
	display: block;
	height: 50px;
	margin-top: 40px;
	padding: 10px 0 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	text-align: center;	
	text-decoration: none;
	color: #ffffff;
	background: #00A0B0;
	-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
	z-index: 3;
  -webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
	z-index: 2;
}
.tabs li:last-child a {
	z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs li a:hover {
	margin: 35px 0 0 0;
	padding: 10px 0 5px 0;
}
ul.tabs li a.active {
	margin: 30px 0 0 0;
	padding: 10px 0 10px 0;
	background: #904b11;
	color: #fff;
	/*color: #ff6831;*/
	z-index: 4;
	outline: none;
}
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.group:after {
    clear: both;
}
#content {
  margin: 0 auto;
  background: #f1f1f1;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
p{
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}
.data_entry_head_small
{
  background:#f1f1f1;
  width:100%;
  float:left;
}

#map{
  width: 100%;
  height: 500px;
  border-radius: 10px;
}
.legend_data_entry
{

    background-color: #bad5dc;
    color: #535151;
    padding: 3px 6px;
    border: 2px solid #fff;
}
.legend_data_entry_sub
{
  background: #Fff3e5;
  font-size: 19px;
  padding: 5px;
  color: #d90505;
}
.tab_simple
{
float:left;
width:100%;
height:35px;
border: 2px solid rgb(252, 181, 99);
    box-shadow: rgb(249, 224, 191) 3px 3px 10px 5px;
}
.tab_simple li
{
  float: left;
  width: 250px;
  margin-left: 10px;
  padding: 5px;
  font-weight: bold;
}
.spn_number
{
  color: #fff;
  background-color: #9c6b56;
  border-color: #d43f3a;
  border-radius: 50%;
  width: 50px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}
.custom-radio {
  position: relative;
  cursor: pointer;
  padding-left: 30px; /* Adjust spacing between radio button and text */
}

.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-custom {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

.radio-text {
  padding-left: 35px; /* Adjust spacing between radio button and text */
}

.custom-radio input:checked ~ .radio-custom:after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin: 4px;
  border-radius: 50%;
  background-color: #007bff; /* Customize the color of the checked radio button */
}
.table-schedule {
  height: 70vh;
  overflow-y: auto;
  width:100%;
}

 .table-schedule table {
  width: 100%;
  max-width: 100%;
} 

.table-schedule table thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* Adjust background color as needed */
  z-index: 100; /* Ensure the sticky header is above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for a raised effect */
}

/*.table-responsive td
{
  white-space: nowrap;
}*/
.sticky-column {
  position: sticky;
  left: 0;
  z-index: 1; /* Ensure it's above other elements */
  background-color: #fff; /* Optional: Background color for visibility */
}
.sticky-button {
  position: sticky;
  right: 0;
  z-index: 1; /* Ensure it's above other elements */
  background-color: #fff; /* Optional: Background color for visibility */
}
#loading-spinner {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Ensure it appears above everything else */
  background: rgba(255, 255, 255, 0.7);  /* Optional: semi-transparent white background */
}

/* Apply blur effect only to the background */
.blur-background {
  filter: blur(5px);  /* Apply blur to the background */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Keep the background below the spinner */
}

/* Spinner and text container (on top of blurred background) */
.spinner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Ensure it stays on top of the blur */
  text-align: center;
}

/* Styling for the spinner */
.spinner-border {
  width: 2rem;   /* Spinner size */
  height: 2rem;  /* Spinner size */
  border-width: 0.5rem; /* Border width for the spinner */
  color: #6c757d; /* Customize the color of the spinner 2196f3,009688,ff9800*/
}

/* Styling for the loading text */
.loading-text {
  color: #333; /* Darker color for better contrast */
  font-size: 1.2rem; /* Make the text a little larger */
  margin-top: 10px;  /* Space between spinner and text */
}
.label_small
{
  font-size: 13px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 24px;
}
.tabs_data_entry {
  display: flex;
  flex-wrap: wrap;
 }
.tabs_data_entry h1 {
  margin: 0;
  font-family: 'Bree Serif', serif;
  font-size: 36px;
}
.tabs_data_entry p {
  margin-top: 20px;
  margin-bottom: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.5;
}
.input_data_entry {
  position: absolute;
  opacity: 0;
}
.label_data_entry {
  width: 100%;
  padding: 10px;
  background: #bad5dc;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  color: #535151;
  transition: background 0.1s, color 0.1s;
  border-right:2px solid #f9f9f9;
}
.label_data_entry:hover {
  background: #d8d8d8;
}
.label_data_entry:active {
  background: #ccc;
}
.input_data_entry:focus + .label_data_entry {
  z-index: 1;
}
.input_data_entry:checked + .label_data_entry {
  background: #00A0B0;
  color: #000;
}
@media (min-width: 600px) {
  .label_data_entry {
    width: auto;
  }
}
.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}
@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}