body {
font-family: 'Sarpanch', Tahoma, sans-serif;
    color: rgb(255, 255, 255);
}

button {
  background-color: #222222; /* Green */
  border: 2px solid #FFFFFF; /* Green */
  color: white;
font-family: 'Sarpanch', Tahoma, sans-serif;

  padding: 7px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition-duration: 0.4s;
}

label > input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  font-size: 15px;

}

label > input[type="radio"] + *::before {

  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 14px;
  height: 14px;
  margin: 3px;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: white;
}

label > input[type="radio"]:checked + *::before {
  background: radial-gradient(#6FDAAB 0%, #6FDAAB 40%, transparent 50%, transparent);
  border-color: #6FDAAB;
}
label > input[type="radio"]:checked + * {
  color: #6FDAAB;
}

input[type="file"] {
  font-family: 'Sarpanch', Tahoma, sans-serif;

  appearance: none;
  background-color: #222222; /* Green */

  border: 1px solid #FFFFFF; /* Green */
width: 90%;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition-duration: 0.4s;}

button:hover {
  background-color: #6FDAAB; /* Green */
  color: #222222;
}

input[type=number] {
    -moz-appearance: textfield;
  background-color: #222222; /* Green */
  border: 1px solid #FFFFFF; /* Green */  border-radius: 2px;
  padding: 6px 12px;
  color: #6FDAAB;
}

a {
  color: #6FDAAB;
}

#myCanvas {
  width: 880px;
  height: 680px;
      cursor: crosshair;
}

.rowcontainer {
  			display: flex;
			margin-top:10px;
			  margin-left:auto;
  				margin-right:auto;
          
    	height: 680px;
  		width: 1180px;
  border: 2px solid #7a7a7a; /* Green */  border-radius: 2px;

}

.landing {
  background-color: #222222;
margin: auto;
 padding: 20px; 
text-align: center;
      width: 70%;
      max-width: 1200px;

   /*   box-shadow: 0px 0px 10px #FFFFFF; */

}

.biline {
background-color: #222222;
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
box-shadow: 0px 0px 10px #000000;

}

.itemContainer {
width: 100%;
min-height: 440px;
padding-top: 30px;
}

.subContainer {
display: inline-block;
width: 40%;
min-height: 300px;
padding-bottom: 10px;
text-align: center;
background-color: #333333;
align-content: center;
  border: 2px solid #FFFFFF; /* Green */  border-radius: 2px;
      box-shadow: 0px 0px 10px #000000;
      margin: 15px;
}

.title {
  width:100%;
display: inline-flex;
  align-items: center;
  vertical-align: center;
  justify-content: center;
  padding: 6px;
}

.about{
  background-color: #222222;
margin: auto;
 padding-left: 20px; 
  padding-right: 20px; 
   padding-top: 60px; 
      padding-bottom: 20px; 

text-align: center;
      width: 70%;
      max-width: 1200px;
}

.imagearea {
	float: left;
 background-image: url("images/bg.jpg");
    height: 100%;
  width: 880px;

}

.imagearea2 {
  float: left;
 background-image: url("images/bg2.jpg");
    height: 100%;
  width: 880px;

}

.variabletable {
    box-sizing: border-box;
    padding: 15px;
		float: left;
  background-color: #222222;
  height: 100%;
  width: 320px;

}

.options {
		padding: 20px;

}

.form-anticlear {
  padding-left: 15px;
}

h2.logo {
    font-family: "Impact", Times, sans-serif;
    font-size: 26px;
font-weight: normal;

}

h2 {
    font-family: 'Sarpanch', Tahoma, sans-serif;
    font-size: 16px;
font-weight: normal;

}

n1 {
font-family: 'Sarpanch', Tahoma, sans-serif;
    font-size: 50px;
font-weight: normal;
padding-bottom: 0px;
}

n2 {
font-family: 'Tahoma', sans-serif;
    font-size: 16px;
font-weight: normal;
}

p{
  font-size: 15px;
}

.targetselection {
  background-color: yellow;
  height: 600px;
  width: 100%;
}

.tooltip {
  position: relative;
  display: inline-block;
  font-weight: normal;
  font-size: 15px;

  border-bottom: 1px dotted #6FDAAB; /* If you want dots under the hoverable text */
  color: #6FDAAB;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 8px 20px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptextbottom {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 8px 20px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 75%;
  margin-left: -80px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptextbottom {
  visibility: visible;
  opacity: 1;
}

.donate-button-container{
  padding: 15px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}