/**
 * WPS Ninja Forms Styles
 *
 * Custom styles for Ninja Forms - loaded at the end of head for maximum specificity
 *
 * @package WPS_Global_Settings
 */



/*
// -------------------------------------------------------------------
// WPS
// -------------------------------------------------------------------
// Divi doesn't provide CSS color vars
// -------------------------------------------------------------------
// Let's roll out own
// -------------------------------------------------------------------
*/

:root
{
	--wps-text-color: #3d4149;

	/* normal: rgb(245, 130, 32) */
	--wps-orange1: #f58220;
	--wps-link-color: #f58220;

	/* hover: rgb(244, 114, 0) */
	/* BG Color fuer Hover transition on Buttons */
	--wps-orange2: #f47200;

  --wps-white: #fff;


	--wps-graylight1: #666;
	/* --wps-divi-colorpicker-graydark2: #b6b6b6; */


  /* Form fields */  
  --wps-form-field-border-radius: 18px;
  --wps-form-field-padding: 9px 18px;

}



/*
// -------------------------------------------------------------------
// Ninja Forms
// -------------------------------------------------------------------
// Anpassungen Look & Feel
// -------------------------------------------------------------------
// CAFFISTA
// -------------------------------------------------------------------
// https://wordpress.org/plugins/ninja-forms/
// -------------------------------------------------------------------
// Colors are defined in the child theme wps-child-css-vars.css
// -------------------------------------------------------------------
*/


span.nf-form-title
{
    color: var(--wps-orange1);
}

/* SUBMIT BUTTON */
input[type=submit].ninja-forms-field.nf-element
{
    width: 100%;

    border-width: 0;
    border-color: var(--wps-orange1);
    border-style: solid;

    border-radius: var(--wps-form-field-border-radius);
    padding: var(--wps-form-field-padding);

    color: var(--wps-white);
    background-color: var(--wps-orange1);



    /*
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    */

	/* outline: 5px dashed hotpink; */

  }

  /* SUBMIT BUTTON :hover */
  input[type=submit].ninja-forms-field.nf-element:hover
  {
    background-color: var(--wps-orange2);
    color: var(--wps-white);

    border-radius: var(--wps-form-field-border-radius);
    padding: var(--wps-form-field-padding);

  }



  

  /* Form field font-size */
  .nf-form-content .list-select-wrap .nf-field-element>div, 
  .nf-form-content input:not([type=button]), 
  .nf-form-content textarea
  {
    font-size:1rem;
    border-radius: var(--wps-form-field-border-radius);
    padding: var(--wps-form-field-padding);



    font-weight: bold;
    color: var(--wps-text-color);

  }

/* Placeholder Text Color */    
.nf-field-container input::placeholder,
.nf-field-container textarea::placeholder 
{
  /* color: #00aaff; */
  /* opacity: 0.5; */
  opacity: 1;
  color: var(--wps-graylight1);
  font-weight: normal;
}


/* Reduce height */
.nf-field-element textarea 
{
      height: auto!important;
      min-height:150px;
}
  
  

/* Abstand zum naechsten Feld */
/*
.nf-field-container,
#ninja_forms_required_items 
{
    margin-bottom: 10px!important;
}
*/

/*
// -------------------------------------------------------------------
// Text
// -------------------------------------------------------------------
*/

/* Text: Felder mit Sternchen sind Pflichtfelder */
.nf-form-fields-required
{
  font-size: small;
  margin-right:5px;
  text-align: right;
  color: var(--wps-text-color);

}


/*
// -------------------------------------------------------------------
// Errors
// -------------------------------------------------------------------
*/

/* Input required */
.nf-error-msg
{
  color: var(--wps-orange1)!important; /* Replace with your desired color */
  font-size: small!important;
}

.nf-error.listimage-wrap .nf-field-element ul, 
.nf-error .ninja-forms-field {
    border: 1px solid var(--wps-orange1)!important;
}



/*
// -------------------------------------------------------------------
// Separator
// -------------------------------------------------------------------
*/

.nf-field-element > hr.ninja-forms-field
{
  margin-top: 50px;
  margin-bottom: 50px;
}