/**
 * Style Name: cf7s-ready
 * Description: Default Ready Styles for CF7 Skins forms
 * Version: 2.0
 * Version Date: 2019-05-30
 */

/** Table of Contents
 * singleline - displays enclosed elements on a single line
 * side-by-side - displays multiple elements side by side [HOLD]
 * box - displays enclosed elements in a surrounding box
 * horizontal - displays checkbox & radio button elements horizontally
 * checkbox-horizontal - displays checkbox elements horizontally [DEPRECATED]
 * radio-horizontal - displays radio button elements horizontally [DEPRECATED]
 * column - displays enclosed elements in a vertical column
 * grid - implements a CSS form grid
 * grid-lined - adds lines to a CSS form grid
 * grid-focus - highlights fields in a CSS form grid
 * Labels - displays labels in different positions
 */

/** Ready Styles
------------------------------------------------------------ */

/**
 * singleline
 * displays enclosed elements on a single line
 */
 
.wpcf7-form .singleline {  /* Consider changing all selectors to .wpcf7-form.cf7skins */
	overflow: hidden;  /* Clears after any floated items - may not be necessary */
}

.wpcf7-form .singleline li {
}

.wpcf7-form .singleline  label {
}

.wpcf7-form .singleline  input {
}

/**
 * side-by-side [HOLD]
 * displays multiple elements side by side.
 */
 
.wpcf7-form .side-by-side {
	float: left;  /* Allows multiple items on single line  */
}

/**
 * horizontal
 * displays checkbox & radio button elements horizontally
 * 
 * .horizontal replaces .checkbox-horizontal & .radio-horizontal
 * .checkbox-horizontal & .radio-horizontal deprecated
 */

.wpcf7-form.cf7skins .horizontal .wpcf7-list-item,
.wpcf7-form.cf7skins .checkbox-horizontal .wpcf7-list-item,
.wpcf7-form.cf7skins .radio-horizontal .wpcf7-list-item {
	display: inline;
	margin: 0 5px 0 3px;
}

.wpcf7-form .horizontal .wpcf7-checkbox,
.wpcf7-form .checkbox-horizontal .wpcf7-checkbox {
	display: block;
}

.wpcf7-form .horizontal .wpcf7-checkbox label,
.wpcf7-form .checkbox-horizontal .wpcf7-checkbox label {
	display: inline;
}

.wpcf7-form .horizontal .wpcf7-radio,
.wpcf7-form .radio-horizontal .wpcf7-radio {
	display: block;
}

.wpcf7-form .horizontal .wpcf7-radio label,
.wpcf7-form .radio-horizontal .wpcf7-radio label {
	display: inline;
	font-weight: normal;
}

/**
 * box
 * displays enclosed elements in a surrounding box
 */

 .wpcf7 .box {
	border: 1px solid #c0c0c0;
	margin: 5px 0;
	padding: 5px;
}

/**
 * column
 * displays enclosed elements in a vertical column
 */

.wpcf7-form .column {
}
 
/**
 * grid
 * implements a CSS form grid
 */
 
.wpcf7 .wpcf7-form.cf7skins .grid [data-row-span] [data-field-span] { 
	padding-right: .625em;
}

	/* Problem occurs due to responsive resizing when only single item displayed within singleline class */
	@media only screen and (min-width: 0) and (max-width: 700px) { 
		.wpcf7 .wpcf7-form.cf7skins .grid [data-row-span] [data-field-span]  { 
		padding-right: 0;
		}
	}

.wpcf7 .wpcf7-form.cf7skins .grid [data-row-span] [data-field-span]:last-child { 
	padding-right: 0;
}

.wpcf7 .wpcf7-form.cf7skins .grid li {
	margin-bottom: 0;
}

/**
 * grid-lined
 * adds lines to a CSS form grid
 */

.wpcf7 .wpcf7-form.cf7skins .grid-lined { 
	border-top: 1px solid #333333; 
}

.wpcf7 .wpcf7-form.cf7skins .grid-lined [data-row-span] {
	border-bottom: 1px solid #333333;
}

.wpcf7 .wpcf7-form.cf7skins .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #333333;
}

.wpcf7 .wpcf7-form.cf7skins .grid-lined [data-row-span] [data-field-span]:first-child { 
	border-left: 1px solid #333333; 
}

.wpcf7 .wpcf7-form.cf7skins .grid.grid-lined [data-row-span] [data-field-span] { 
	padding: 8px;
}

@media only screen and (min-width: 0) and (max-width: 700px) { 
	.wpcf7 .wpcf7-form.cf7skins .grid-lined [data-row-span] [data-field-span] { 
		border-bottom: 1px solid #333333;
		border-left: 1px solid #333333; 
		}
	
	.wpcf7 .wpcf7-form.cf7skins .grid-lined [data-row-span] {
		border-bottom: none;
		}
}

/**
 * grid-focus
 * highlights fields in a CSS form grid
 */
 
.wpcf7 .wpcf7-form.cf7skins .grid-hover [data-row-span] [data-field-span].focus { 
	background: #fffad4; 
}

.wpcf7 .wpcf7-form.cf7skins .grid-hover [data-row-span] [data-field-span].focus label { 
	color: #262626; 
}

.wpcf7 .wpcf7-form.cf7skins .grid-hover [data-row-span] [data-field-span]:hover { 
	background: #fffded; 
	cursor: text;  /* May not be necessary */
}

/**
 * Labels
 * displays labels in different positions
 */

.wpcf7-form.cf7skins li.cf7slabel-default,
.wpcf7-form.cf7skins li.cf7slabel-left,
.wpcf7-form.cf7skins li.cf7slabel-right,
.wpcf7-form.cf7skins li.cf7slabel-top,
.wpcf7-form.cf7skins li.cf7slabel-bottom {
	display: flex;
	padding: 5px 0;
}

.wpcf7-form.cf7skins li.cf7slabel-default {
	flex-direction: column;
}

.wpcf7-form.cf7skins li.cf7slabel-left {
}

.wpcf7-form.cf7skins li.cf7slabel-right {
}

.wpcf7-form.cf7skins li.cf7slabel-top {
	flex-direction: column;
}

.wpcf7-form.cf7skins li.cf7slabel-bottom {
	flex-direction: column-reverse;
}

.wpcf7-form.cf7skins li.cf7slabel-left span,
.wpcf7-form.cf7skins li.cf7slabel-right span {
	flex: 1;
}

.wpcf7-form.cf7skins li.cf7slabel-default label {
}

.wpcf7-form.cf7skins li.cf7slabel-left label {
	padding: 0 5px 0 0;
}

.wpcf7-form.cf7skins li.cf7slabel-right label {
	padding: 0 0 0 5px;
	order: 1
}

.wpcf7-form.cf7skins li.cf7slabel-top label {
}

.wpcf7-form.cf7skins li.cf7slabel-bottom label {
}