:root{
  --hover-content:'';
}

.ikr_map_container{
  font-family: "Roboto",sans-serif;
}
#map {
	width: 100%;
	height: 600px;
	margin-left: 0;
	border-radius: 6px;
}
/* 

  

  
  .container {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
  }
  .container {
    display: flex;
    padding: 5px;
    gap: 50px;
  } */


  /*==============================
    Style the edit containe
 ===============================*/


.editClose_btn {
	display: none;
	font-size: 30px;
	z-index: 11;
	position: absolute;
	right: 0;
}
 
  /*==============================
    style submit form
 ===============================*/
.submit_form{
  display: block;
}




  /*==============================
    Style the edit container
 ===============================*/


 #ikr_edit_popup{
  display: none;
 }

 
.ikr_map_content {
  display: block;
  position: relative;
  width: 99%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  min-height: 400px;
}
.ikr_first_side {
	width: 68%;
	height: auto;
	box-shadow: 0 0px 1px rgba(0,0,0,0.19), 0 2px 5px rgba(0,0,0,0.23);
	border: 1px solid;
	border-radius: 6px 0 0 6px;
}
.ikr_second_side {
  width: 30%;
  background-color: #F4F4F4;
  /*border: 1px solid;
  */padding: 10px;
  box-shadow: 0 0px 1px rgba(0,0,0,0.19), 0 2px 5px rgba(0,0,0,0.23);
  border-radius: 1px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  -ms-border-radius: 1px;
  -o-border-radius: 1px;
}



.align_inp {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  margin: 0 auto;
}
.align_inp label {
  font-size: 15px;
  margin-bottom: 8px;
  text-transform: capitalize;
}
.align_inp input {
	margin-bottom: 8px;
	padding-left: 10px;
	border: none;
}

.align_inp [type="submit"] {
	padding: 9px;
	font-size: 16px;
	background: #49ADFF;
	color: white;
	font-weight: bold;
	border: none;
	margin: 0;
}
  /*==============================
    Style the edit search
 ===============================*/
 .ikr_container {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0;
  width: 99%;
  gap: 16px;
  align-items: center;
  align-content: center;
  
}
.ikr_c_save {
	width: 67.5%;
	text-align: left;
	border-radius: 6px;
}
.ikr_c_right {
	width: 31.5%;
	text-align: left;
	border-radius: 6px;
}

.ikr_c_right h1{
  padding-left: 3px;
}
.ikr_c_right p {
	font-size: 17px;
	line-height: 1.5;
	margin: 1em 0;
	background-color: #d3cfcf;
	color: #322f2f;
	/* font-weight: bold; */
	padding: 7px;
}
.ikr_c_right p strong {
	font-weight: 600;

	background: #fff;
	padding: 3px;
	font-size: 18px;
}
 
.ikr_c_left {
  width: 70%;
  display: flex;
  gap: 45px;
  justify-content: space-between;
  padding: 0 45px 0 0;
  align-items: center;
  align-content: center;
 
}
button#add_marker, #save,.add_by_search {
  color: #fff;
  border: none;
  background: #2271b1;
  border-color: #2271b1;
  text-decoration: none;
  text-shadow: none;
  padding: 11px;
  font-weight: bold;
  cursor: pointer;
  text-transform: capitalize;

}
.add_by_search{
  margin-top: 10px;
  display: none;
}
.action_btn{
  width: 30%;

}
.auto-search-wrapper {
	width: 99%;
	margin-top: 14px;
	margin-bottom: 8px;
}
#save {
	width: 100%;
	margin-top: 30px;
	border-radius: 6px;
  background-color: #49ADFF;
  color: white;
}
.loupe input {
  padding: 5px 44px 5px 35px;
}

.action_btn {
  width:max-content;
}
  /*==============================
    Style the edit containe
 ===============================*/


 #add_marker {
  position: relative; /* Required for positioning the hover text */
}

#add_marker::after {
  content: "Click On The Map To Add Marker"; /* Text to display on hover */
  position: absolute;
  top: 100%; /* Position it just below the button */
  left: 100%; /* Align it horizontally centered */
  transform: translateX(-50%); /* Center it horizontally */
  background-color: rgba(0, 0, 0, 0.8); /* Background color of hover text */
  color: white; /* Text color of hover text */
  padding: 4px 8px; /* Padding for hover text */
  border-radius: 4px; /* Border radius for hover text */
  font-size: 14px; /* Font size for hover text */
  white-space: nowrap; /* Ensure hover text stays on a single line */
  opacity: 0; /* Initially hide the hover text */
  transition: opacity 0.3s; /* Add transition for smooth animation */
  z-index: 99999;
}

#add_marker:hover::after {
  opacity: 1; /* Show the hover text on button hover */
}


/* ================================ 
shortcode css 
===================================
*/
.shortcode{
 
    background-color: #fff;
    width: 200px;
    padding: 14px;
    text-align: center;
  
}
.shortcode h3{
  margin: 0;
  padding: 0;

}



/* =============================
  stylet the edit container accordion
============================= */

.ikr_accordion{
  /* width: ; */
}





.ikr_accordion__item {
  margin-bottom: 10px
}

.ikr_accordion__item__header {
	background-color: #003349;
	padding: 15px;
	cursor: pointer;
	position: relative;
	color: #fff;
	font-family: Arial;
	font-weight: 400;
	font-size: 15px;
	border-radius: 6px;
  text-transform: capitalize;
}

.ikr_accordion__item__header::before {
  height: 9px;
  width: 9px;
  content: "";
  position: absolute;
  right: 15px;
  top: 17px;
  transition: .5s all;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff
}

.ikr_accordion__item__header.active {
  background-color: #33a0ff;
  color: #fff;
  transition: .4s
}

.ikr_accordion__item__header.active::before {
  transform: rotate(-135deg);
  top: 23px
}

.iaccordion__item__content {
  /* overflow-y: hidden; */
  padding: 0;
  display: none
}



/* ===================
popupWindow popup 
========================
*/


.popupWindow{
  
}
.popupWindow p{
  margin: 0;
  padding: 2px 0;
}
.popupWindow button {
	background-color: #49ADFF;
	border: 0;
	padding: 5px 6px;
	color: white;
	border-radius: 6px;
	display: inline-block;
}