.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 auto;
}

.holder{
  width:500px;
  width: 100vw;
  margin: 0;
  padding: 0;
  border: 1px solid #cccccc;
}
@media (max-width: 600px) {
.holder {
width: 100%;
}
}
.held{
  position:relative;
  overflow:hidden;
}
.button{
  width:150px;
  padding:10px;
  margin-left: 0px;
  font-size: 14px;
}
#przyciski{
	font-family: helvetica;
	background: linear-gradient(to right, #CC0066, #FFCCCC);
	color: white;
	padding-top: 5px;
	padding-bottom: 5px;
}
#przyciski a:link {color: white; background: black;}
#przyciski a:visited {color: white;}
#przyciski a:hover {color: white; text-decoration-line: underline; cursor: pointer;}
#przyciski a:active {color: white;}
#svg-select option:dropdown {color: white; background: black;}

#svg-select{
	font-family: helvetica;
	margin-left: 15px;
	width: 170px;
	background: #CC0066;
	color: white;
}

#svg-select select {
  display: none; /*hide original SELECT element: */
}


#svg-select::after {
	background: linear-gradient(to right, #CC0066, #FFCCCC);
}
.colorHolder{
	font-family: helvetica;
}
#ActivityDIV {
	background: linear-gradient(to right, #CC0066, #FFCCCC);
}

#ActivityDIV .swatchHolder{
  position:absolute;
  bottom:0px;
  margin:auto;
  left:0px;
  right:0px;
  list-style-type:none;
  text-align:center;
  display:inline-block;
  padding: 15px;
  width:260px;
  border-radius: 20px 20px 0px 0px;
  color: black;
}

#ActivityDIV .swatchHolder .prevPallete{
  width:15%;
  line-height: 100%;
  padding: 10px 0px;
  margin: 0px auto 15px auto;
  display:inline-block;
  cursor:pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
          box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
#ActivityDIV .swatchHolder .nextPallete{
  width:15%;
  line-height: 100%;
  padding: 10px 0px;
  margin: 0px auto 15px auto;
  display:inline-block;
  cursor:pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
          box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
#ActivityDIV .swatchHolder .colorHolder{
  width:60%;
  line-height: 100%;
  content:'Aktualny kolor';
  padding: 10px 0px;
  margin: 0px auto 15px auto;
  display:inline-block;
  cursor:pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
          box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/*.colorHolder{
  background: linear-gradient(to right, rgba(255, 0, 0, 0.3), rgba(255, 165, 0, 0.3), rgba(255, 255, 0, 0.3), rgba(0, 128, 0, 0.3), rgba(0, 0, 255, 0.3), rgba(75, 0, 130, 0.3), rgba(238, 130, 238, 0.3))
}*/

#ActivityDIV .swatchHolder .afterPallete{
  width:100%;
  line-height: 100%;
  padding: 0px 0px;
  margin: 0px auto 0px auto;
  cursor:pointer;
}
#ActivityDIV .swatchHolder li:not(.colorHolder):not(.prevPallete):not(.nextPallete):not(.afterPallete){
  height:25px;
  width:25px;
  margin:2px;
  display:inline-block;
  cursor:pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
  box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

#ActivityDIV svg{
  width: 100%;
  display:inline-block;
  background: white;
}
#ActivityDIV svg path{
  cursor:pointer;
}