/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html, body {
	overflow-x: hidden;
}
body .gform_ajax_spinner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
#gform_submit_button_1 {
	visibility: hidden !important;
}
.gform-theme--framework .gf_progressbar_title {
	display: none !important;
}
.gform_title, .gform_heading h2 {
	display: none;
}
.gform-theme--foundation .gform_footer, .gform-theme--foundation .gform_page_footer {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.gform_next_button {
    visibility: hidden !important;
}

.gform_wrapper .gform_previous_button,
.gform_wrapper .gform-theme-button--secondary {
	color: hsla(260, 65%, 20%, 1) !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: "Ruddy" !important;
	font-weight: 900 !important;
	font-size: 20px !important;
}

#field_1_21 {
	visibility: hidden;
}


/* --- progress bar --- */

.gform-theme--framework .gf_progressbar {
	width: 50%;
	justify-self: center;
	border-radius: 0px !important;
}

.gform-theme--framework .gf_progressbar .percentbar_blue {
	background-color: hsla(256, 74%, 41%, 1) !important;
	border-radius: 0px !important;
}


/* --- question --- */

.gform-theme--framework .gfield:where(:not(.gfield--type-html):not(.gfield--type-section)) {
	display: flex;
	justify-content: center;
	text-align: center;
}

.gform-theme--framework .gfield--type-choice.field_description_above.gfield--no-description:where(:not(.field_validation_above.gfield_error):not(:has(.gfield_choice_limit_message))) .gform-field-label:where(:not([class*=gform-field-label--type-])), .gform-theme--framework .gfield--type-choice.field_description_below:where(:not(.field_validation_above.gfield_error):not(:has(.gfield_choice_limit_message))) .gform-field-label:where(:not([class*=gform-field-label--type-])) {
	color: hsla(260, 65%, 20%, 1);
	font-family: "Ruddy";
	font-weight: 900;
	font-size: 45px;
	max-width: 800px;
	margin-bottom: 40px;
}

/* --- buttons --- */

.gf-radio-as-button .gfield_radio {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
}
  
/* Hide the radio button */
.gf-radio-as-button .gfield-choice-input {
    visibility: hidden;
}
  
/* --- All buttons --- */
.gf-radio-as-button .gchoice label {
    display: block;
    padding: 12px 100px;
    border: 2px solid transparent; 
    cursor: pointer;
    font-family: "Ruddy";
    font-weight: 900;
    font-size: 35px;
    text-align: center;
    transition: all 0.2s ease-in-out;
}


/* --- 'Ja' Button --- */
  
/* Default */
.gf-radio-as-button .gfield_radio .gchoice:nth-child(1) label {
    color: hsla(45, 66%, 86%, 1);
    background-color: hsla(256, 74%, 41%, 1);
}
  
/* Hover */
.gf-radio-as-button .gfield_radio .gchoice:nth-child(1) label:hover {
    background-color: hsla(256, 74%, 36%, 1);
}
  
/* Selected */
.gf-radio-as-button .gfield_radio .gchoice:nth-child(1) input[type="radio"]:checked + label {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid hsla(256, 74%, 41%, 1);
}
  
  
/* --- 'Nee' Button --- */
  
/* Default */
.gf-radio-as-button .gfield_radio .gchoice:nth-child(2) label {
    color: hsla(260, 65%, 20%, 1);
    background-color: hsla(37, 100%, 49%, 1);
}
  
/* Hover */
.gf-radio-as-button .gfield_radio .gchoice:nth-child(2) label:hover {
    background-color: hsla(37, 100%, 44%, 1);
}
  
/* Selected */
.gf-radio-as-button .gfield_radio .gchoice:nth-child(2) input[type="radio"]:checked + label {
    background-color: #fff;
    color: #000000;
    border: 2px solid hsla(37, 100%, 49%, 1);
}


  
/* --- Responsive Styles --- */

@media only screen and (max-width: 768px) {
    .gform-theme--framework .gfield--type-choice.field_description_above.gfield--no-description:where(:not(.field_validation_above.gfield_error):not(:has(.gfield_choice_limit_message))) .gform-field-label:where(:not([class*=gform-field-label--type-])), .gform-theme--framework .gfield--type-choice.field_description_below:where(:not(.field_validation_above.gfield_error):not(:has(.gfield_choice_limit_message))) .gform-field-label:where(:not([class*=gform-field-label--type-])) {
        font-size: 25px;
    }
      
    .gf-radio-as-button .gchoice label {
        padding: 12px 35px;
        font-size: 25px;
    }
}