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: #608E19;
	/*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: teal; /*#19608e; /*rgb(5,154,90); /*darkyellow; /*green;/*#0066FF;*/
	border-style: groove;
}

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

input[id="redrawButton"],
input[value="Edit paragraph"], input[value="Edit blog"],
input[id="updateparagraphButton"], input[id="updateblogButton"],
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;
}

.form_figure 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:darkgreen;
	border-style: none;
}

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

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

.form-control{
    border: 0px;
}

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

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

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

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

input[type="number"]{
	position: relative;
	/*margin-left: 2px;
	padding: 3px;*/
	background-color: rgb(239, 232, 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: auto;
    appearance: auto;
}

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

input[type=color]::-moz-color-swatch {
  border: none;
}