.tooltip {
    position: absolute;
    background: #646464;
    border-radius:4px;
    padding: 6px 12px;
    font-family: arial;
    font-size: 12px;
    text-shadow: 0px 1px 1px #000;
    color: #ffc64a;
  }
  .tooltip:before {
    content : " ";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #646464;
    position:absolute;
    bottom:-5px;
    left:5px;
  }

  .tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

input, select, textarea {
    font-family: "Varela Round";
}

input[type="button"] {
    font-family: "Indie Flower";
}

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

.btn, .btn-primary{
    font-family: "Indie Flower";
}

/* select */
.choose_item, .choose_category {
    margin-top: 0px;
    margin-bottom: 0px;
}


/* buttons */
#drawButtonItem {
    margin-top: 0px;
}

#buttons_flex{
    display: flex;
}

.paddingright{
    padding-left: 0;
    padding-right: 5px;
}


#formulierAchtergrond #save{
	position: relative;
	margin-top: 2%;
	outline: none;
	width: 80%;
	height: 3%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: darkblue; /*rgb(0,185,185);/*#0066FF;*/
	border-style: dotted;
}

input[name="colorBackgroundButton"]{
	position: relative;
	margin-top: 0%;
	outline: none;
	margin-bottom: 2%;
	width: 80%;
	height: 5%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: rgb(195,144,40); /*darkyellow; /*green;/*#0066FF;*/
	border-style: groove;
}

.buttons_form .btn{
    font-size: 82%;
}

input[name="downloadButton"]{
	position: relative;
	margin-top: 0%;
	outline: none;
	margin-bottom: 2%;
	width: 80%;
	height: 5%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: purple; /*darkyellow; /*green;/*#0066FF;*/
	border-style: groove;
}

input[name="downloadPatternButton"]{
	position: relative;
	margin-top: 0%;
	outline: none;
	margin-bottom: 2%;
	width: 80%;
	height: 5%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: olive;
	/*background-color: rgb(195,144,40);*/ /*darkyellow; /*green;/*#0066FF;*/
	border-style: groove;
}

input[name="createPDFButton"]{
	position: relative;
	margin-top: 0%;
	outline: none;
	margin-bottom: 2%;
	width: 80%;
	height: 5%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: rgb(5,154,90); /*darkyellow; /*green;/*#0066FF;*/
	border-style: groove;
}

input[id="zoomInButton"], input[id="zoomOutButton"]{
    background-color: olive; /*#17a2b8;*/
    color: white;
    height: 100%;
}

/*input[value="Edit paragraph"], input[value="Edit blog"],
input[id="updateparagraphButton"], input[id="updateblogButton"],
input[id="deleteparagraphButton"], input[id="updateTheoryButton"],
input[id="loginButton"], input[id="signupButton"]{
    height: 100%;
}*/

input[name="hideCanvasButton"] , input[name="hideCanvasButton"]:hover{
	position: relative;
	margin-top: 0%;
	outline: none;
	margin-bottom: 2%;
	width: 100%;
	height: 5%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: olive; /*rgb(40,144,195); /*darkyellow; /*green;/*#0066FF;*/
	border-style: groove;
	border-color: olive;
}

.formulierSpecifiek input[name="startButton"]{
	position: relative;
	margin-top: 2%;
	margin-bottom: 2%;
	left: 0%;
	float: center;
	background-color: rgb(0,0,185);/*#0066FF;*/
	width: 100%;
	height: 5%;
	border-style: groove;

}

input[name="startButton"]{
	outline: none;
}

input[name="drawButton"]{
	position: relative;
	outline: none;
	margin-top: 0%;
	margin-bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: purple;/*#0066FF;*/
	width: 70%;
	height: 100%;
	border-style: groove;
}

.formulierSpecifiek input[name="saveButton"]{
	position: relative;
	outline: none;
	margin-top: 0%;
	margin-bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	background-color: purple;/*#0066FF;*/
	width: 70%;
	height: 5%;
	border-style: groove;
}

input[name="drawButtonCenter"]{
	position: relative;
	outline: none;
	margin-top: 0%;
	margin-bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	float: center;

	width: 70%;
	height: 100%;
	border-style: groove;
}

.formulierSpecifiek input[name="undoButton"]{
	position: relative;
	outline: none;
	margin-top: 0%;
	margin-bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	float: center;
	width: 70%;
	height: 5%;
	border-style: groove;
}

/* input fields*/
#labelSize, #colorSize{
    display: block;
    float: left;
    padding: 0px;
}

#labelSizeResponsive, #labelColorResponsive{
    display: none;
}

fieldset{
	background-color: none;
	border-color: rgb(180, 211, 178);
	border-style: none;
}

input{
	width: 20%;
	height: 4vh;
	margin-top: -1vh;

}
input::-webkit-color-swatch {
    border: none;
}

.form-control{
    border: 0px;
}

.level{
    font-size: inherit;
    padding: inherit;
}

.form-group{
    text-align:  left;
}

select{
	width: 20%;
	height: 4vh;
	margin-top: -1vh;
}

.inputfield{
    float: right;
    background-color: rgb(239, 252, 231);
}

input[type="text"]{
	position: relative;
	background-color: rgb(239, 252, 231);
}

input[type="number"]{
	position: relative;
	margin-left: 2px;
	padding: 3px;
	background-color: rgb(239, 252, 231);
}

input[type="color"]{
	position: relative;
	float: right;
	outline-color: none !important;
	outline-width: 0px !important;
}

input[type="checkbox"]{
	position: relative;
	background: transparent;
	border: none;
}

select{
	position: relative;
	float: right;
}

/* only show arrows of input field at hover %TODO test other browsers*/
/* for chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    appearance: inner-spin-button;
}

/* for mozilla */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}