#query-price-form p {
    margin: 18px 0;
}

#query-price-form {
	font-family: "Open Sans", sans-serif;
}

/* Fieldset and legend */
#query-price-form fieldset {
    /*margin: 2em 0;*/
    /*padding: 1em 2em;*/
    border: solid 1px #ccc;
    border-radius: 6px;
    min-width: 200px;
    background-color: rgba(255,255,255,.85);
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 30px;
	padding-right: 30px;
}

#query-price-form legend {
    font-size: 20px;
    padding: 0 10px;
    color: #999;
    position: relative;
    top: 25px;
    left: -6px;
	border-bottom: 0;
	border-top: 0;
}

#query-price-form h3 {
	margin: 0;
	font-family: "Open Sans", sans-serif;
}

/* Labels */
#query-price-form label{
    display: block;
    margin-top: 14px;
}

#query-price-form hr {
	border: none;
	border-top: solid 1px #707070;
}

#query-price-form .radioBtns p {
	margin-bottom: 0;
}

#query-price-form .checks, .radioBtns {
	margin-bottom: 14px;
}

#query-price-form .checks label {
    margin-top: 0;
}

#query-price-form label:first-of-type {
    margin-top: 0;
}

/* Inputs and textarea  */
#query-price-form input {
    padding: 10px;
    border: solid 1px #999;
	width: 55%;
}

#query-price-form input[type="email"],  input[type="text"] {
    width: 55%;
}

#query-price-form textarea {
    min-height: 238px;
    min-width: 100%;
    padding: 10px;
    border: solid 1px #999;
}

/* radio buttons and checkboxes */
#query-price-form .checks {
    margin-bottom: 14px;
}

#query-price-form .checks p {
    margin-bottom: 0;
}

#query-price-form input[type="checkbox"] + label,  input[type="radio"] + label {
    display: inline-block;
    padding-top: 0;
    margin-top: 0;
}

#query-price-form input[type="radio"] {
    margin-left: 10px;
    margin-right: 0;
}

#query-price-form input[type="radio"]:first-of-type {
    margin-left: 0;
}

/* Submit Button */
#query-price-form input[type="submit"] {
	padding: 10px 20px;
	border-radius: 6px;
	background-color: #2F2F2F;
	color: #fff;
	border: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	width: 33%;
}

#query-price-form input[type="submit"]:active {
	background-color: #2F2F2F; /* tło po kliknięciu */
	color: #fff; /* kolor tekstu po kliknięciu */
}

#query-price-form input[type="submit"]:focus {
	background-color: #2F2F2F; /* tło po kliknięciu */
	color: #fff; /* kolor tekstu po kliknięciu */
}


/* Focus style */
#query-price-form input:focus, textarea:focus {
    outline: solid 2px #f1ad9c;
    box-shadow: 0 0 5px #f1ad9c;
    background-color: #fdeeea;
}


/* Custom Checkboxes */
/* at mobile we want checkbox label to appear to the right of checkbox. This is an exception to the other labels on the page */
#query-price-form .checks label {
	display: inline-block;
}
/* need to make custom style for checkbox too */
#query-price-form .checks span:before {
	display: inline-block;
	box-sizing: border-box;
	font-family: "Font Awesome 5 Free";
	content: "\f0c8";
	color: #f1ad9c;
	font-size: 25px;
	vertical-align: middle;
	/*margin-top: -3px;*/
}
/* hide the default checkbox */
#query-price-form input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 20px;
	height: 20px;
	margin-top: 9px;
	margin-left: 1px;
}
/* create the checked state, we will use font awesome checked icon */
#query-price-form input[type="checkbox"]:checked ~ span:before {
	content: "\f14a"; /*unicode for checked box */
}


/* Custom Radio Buttons */

/* make the new radio button */
#query-price-form .radioBtns span:before {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	color: #f1ad9c;
	font-size: 24px;
	vertical-align: middle;
	margin-top: -4px;
	font-weight: 200;
}
/* hide the default radio buttons */
#query-price-form input[type="radio"] {
	position: absolute;
	opacity: 0;
}
/* create the on (selected) state */
#query-price-form input[type="radio"]:checked ~ span:before {
	content: "\f192"; /* unicode for fa dot circle */
}
/* at small screen spread out the stacked radio buttons: */
#query-price-form .radioBtns label {
	margin-top: 8px;
}


/* Toggle Switch */
#query-price-form label.toggleSwitch {
  cursor: pointer;
  margin: 16px 0 60px;
  display: flex;
  align-items: center;
}
/* hide the "real" checkbox visually, already doing this on line 139 */

/* style the "fake" checkbox, (the pill shaped container behind the dot) */
#query-price-form .checkbox-value {
	background-color: #ddd;
	border: 1px solid #f1ad9c;
	border-radius: 24px;
	box-shadow: inset 0 1px 0 1px #f1ad9c52;
	display: inline-block;
	height: 24px;
	margin: 0 14px 0 0;
	position: relative;
	transition: all 120ms;
	vertical-align: -2px;
	width: 55px;
}
/* create the circle (dot) for the slider */
#query-price-form .checkbox-value::before {
	background-color: #fff;
	border: 1px solid;
	border-color: inherit;
	border-radius: 50%;
	box-shadow: 0 1px 0 1px rgba(0,0,0,0.075);
	content: '';
	display: block;
	width: 23px;
	height: 23px;
	left: 25%;
	margin-left: -13px;
	margin-top: -1px;
	position: absolute;
	top: 0;
	transition: all 120ms ease-in;
}
/* overwrite a previous rule, line: 148. (Gets rid of black outline box).  */
#query-price-form .toggleSwitch input[type="checkbox"]:checked ~ span:before {
	content: " ";
}

/*style the pill shaped item when the field is checked*/
#query-price-form input:checked + .checkbox-value {
	background-color: #fae0da;
	border-color: #f1ad9c;
}
/* repositions the circle */
#query-price-form input:checked + .checkbox-value::before {
	left: 80%;
}

.errors {
	margin-top: 40px;
}


/* Large screen rules */
@media screen and (min-width: 430px) {
    #query-price-form legend {
        font-size: 24px;
		margin-bottom: 0;
    }

    #query-price-form fieldset {
        width: 65%;
        min-width: 320px;
        /*margin: auto;*/
		margin: 60px auto;
	}

    #query-price-form .checks label, .radioBtns label {
        display: inline-block;
        padding-top: 10px;
        margin-top: 0;
        margin-right: 10px;
    }
}

@media (max-width: 768px) {
	#query-price-form input[type="submit"] {
		width: 100%; /* 100% szerokości na urządzeniach mobilnych */
	}

	#query-price-form input[type="email"],  input[type="text"] {
		width: 100%;
	}

	#query-price-form input {
		width: 100%;
	}
}