/* @import url('http://example.com/example_style.css'); */
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
   input[type='button'] {
  }
}
}


/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/* Specific mapael css class are below
 * 'mapael' class is added by plugin
*/
.mapael .map {
  position: relative;
  display:inline-block;
  padding-top:10px;
}

.mapael .mapTooltip {
  position: absolute;
  background-color: #fff;
  -moz-opacity: 0.70;
  opacity: .7;
  filter: alpha(opacity=70);
  border-radius: 2;
  padding: 10px;
  z-index: 1000;
  max-width: 250px;
  display: none;
  color: #2d2d2d;
}
/* The toggle container */
.risk-button {
  width: 175px ;
  padding: 15px;
  border-radius:4px;/*  */ /* controls rounded button corners */
  border: none;
  cursor: pointer; /* Pointer/hand icon */
  margin: 5px;
  font: 8px;
  text-wrap: pretty;
  background-color: #FFF;
  opacity: .6;
  display:inline-block;
}

/* The toggle knob */
.risk-button:after {
  left: 2px;
  top: 2px;
  border-radius: 50%;
  border: none;
  width: 15px;
  height: 15px;
  background: var(--ab, var(--border));
  transform: translateX(var(--x, 0));
  display:inline-block;
}

/* Change color and position when checked */
.risk-button:checked {
  --ab: var(--active-inner);
  --x: 17px;

}

/* Drop the opacity of the toggle knob when the input is disabled */
.risk-button:disabled:not(:checked)::after {
  opacity: .6;
  color: #FFF;
}


/*********************************************/
/********* Remove all below to get the original look *************/

.mapael .map {
 
  overflow: hidden;
  position: relative;
  display: block;
  margin:10px;
  width:75%;
  /* background-color: #232323; */
  /* border-radius: 5px; */
  /*  margin-left: 228px; */
}

/* Flex box CSS => "display: flex" enables mapcontainer and its children to use the properties of Flex Box*/
.mapcontainer {
  display: flex;
  flex-flow: row wrap;
  flex-wrap: no-wrap;
}

.options-container {
  /* background-color: #04AA6D; /* Green background */
  /* border: 1px solid green; /* Green border */
  /* color: white; /* White text */
  float: right;
  /* Pointer/hand icon */
  width: 15%; /* Set a width if needed */
  /*   display: inline-block; Make the buttons appear below each other */
  /* 08/2024 */
  border: 0px solid black;
  /* padding-right: 5%; */
  
}

.areaLegend {
  color: white;
}

/* Flex box CSS */
/* Large screen - default */
@media all and (min-width: 1200px) {
  .mapcontainer: { flex-flow: column wrap; }
  .map { order: 1; }
  .options-container { order: 2; }
  .areaLegend { order: 3; align-self: flex-start; }
}

/* Flex box CSS */
/* Medium screen - move options container element under map element, change order of elements*/
@media all and (max-width: 1200px) {
  .map { order: 1; }
  .areaLegend { order: 2; flex: 0 1 800px; }
  .options-container { order: 3; }
}