/****************************************************************************************** 
	General comments:
	
	- Prefix .sapCpContentPage:not(.sapCpContentPageEditable)
		This disables the styles for the edit mode in the Form editor to avoid any 
		interference with the editor functionality (e.g. drag&drop)
		
	- Prefix .W2L-Fields-Wrapper
		This enables the styles if used/displayed as embedded form inside a Landing Page
		
	- If you use a form embedded in a Landing Page it is recommended to set the parameter 
		"Label Placement" to "On Top" for best results
		
	- The section "Fields width = 100%" is only needed to see a nice preview in the Forms 
		app. In the embedded form in a Landing Page the same is achieved with the 
		parameter "Label Placement" = "On Top"

    - To enable form fields you need to add a CSS class in the "Advanced Properties" 
      section:
      - inline20, inline30, inline50, inline70, inline80:
         The number indicates the percentage of the width to use
      - inline:
         For checkboxes with a fixed width 
	
******************************************************************************************/


/****************************************************************************************** 
	Fields width = 100%	 
******************************************************************************************/
/*
	This makes all fields fill 100% of the width.  
*/

/*--- Text Input Fields ---*/
.sapCpInputWidget .sapCpInput {
	width: 100%;
}

/*--- Dropdown Fields ---*/
.sapCpInputWidget .sapCpDropDown {
	width: 100%;
	height: 38px;
}

/*--- Note Field ---*/
.sapCpNoteWidget .sapCpTextArea {
	width: 100%;	
}

/****************************************************************************************** 
	Switch to Flex Display Model 
 ******************************************************************************************/

/*---------------------------------------------------------------------------------------- 
	Set default to flex and width 100%	
  ----------------------------------------------------------------------------------------*/
.sapCpLayout {
	display: flex;
	flex-flow: wrap;
	min-height: unset;
}
.sapCpWidget {
	flex-basis: 100%;
	width: 100%;
	margin-top: 8px;
}

/*----------------------------------------------------------------------------------------- 
	Custom classes 'inline##' for different widths
  -----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline80, 
.W2L-Fields-Wrapper .inline80 {
    flex: 1 3 80%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline70, 
.W2L-Fields-Wrapper .inline70 {
    flex: 1 1 70%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline50, 
.W2L-Fields-Wrapper .inline50 {
     flex: 1 3 50%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline30, 
.W2L-Fields-Wrapper .inline30 {
    flex: 1 1 30%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline20, 
.W2L-Fields-Wrapper .inline20 {
    flex: 1 1 20%;
    min-width: 150px;
}


/*----------------------------------------------------------------------------------------- 
	Custom class 'inline' for checkbox elements
  -----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline, 
.W2L-Fields-Wrapper .inline {
    flex-basis: 160px;
    	flex-shrink: 1;
}