input, select, textarea, .cs_richTextOuter {max-width: 100%;}

.CS_Form_Label_Baseline, .CS_Form_Required, .CS_Form_Required_Baseline {text-align: inherit;}

.CS_Form {font-size: 13px;}
.CS_Form_Label, .CS_Form_Label_Baseline, .CS_Form_Required_Baseline, .CS_Form_Required {text-align:right; margin-top:2px;}
.CS_Form_Label, .CS_Form_Required {/*position: relative; top: 5px;*/ vertical-align: top;}
.CS_Form_Label_Baseline, .CS_Form_Required_Baseline {vertical-align:middle;}
.CS_Form_Required_Baseline, .CS_Form_Required {font-weight:bold;}
.grayBtn {background-color: #eaeaea;}


/* layout and appearance */

/*
	this element used to be a span but contained divs, illegal, so make it a div and do this in css
	text-align is because Chrome apparently thinks that implies text-align: -webkit-center
*/
.cs_TabContent {text-align: left;}

.CS_FormFieldContainer, .CS_FormFieldDescrContainer {clear: both; display: block;}
.CS_FormFieldContainer {margin: 5px 0 0; white-space: nowrap;}

.CS_FormFieldLabelContainer {display: inline-block; padding: 2px 5px 2px 2px; text-align: inherit; vertical-align: top; white-space: normal;}
.CS_FormFieldControlContainer {display: inline-block; font-weight: normal; padding: 2px 2px 8px; text-align: inherit; vertical-align: top;}

.CS_FormFieldDescrContainer {padding: 0; white-space: normal}
.CS_FormFieldDescrContainer .CS_FormFieldLabelContainer, .CS_FormFieldDescrContainer .CS_FormFieldControlContainer {padding-top: 0;}
.CS_Form_Description {font-size: 83%; vertical-align: top;}

.CS_RequiredIndicator {color: #e00; display: inline-block; font-style: italic;}
.CS_FormFieldControlContainer .CS_RequiredIndicator {margin-left: 5px;}

.CS_FormFieldControlContainer input[type="button"]
	{border: 1px solid #555; border-radius: 2px; cursor: pointer; opacity: .7;}
.CS_FormFieldControlContainer input[type="button"]:hover
	{opacity: 1;}

.CS_FormFieldControlContainer input[disabled], .CS_FormFieldControlContainer input[type="button"][disabled], .CS_FormFieldControlContainer select[disabled], .CS_FormFieldControlContainer textarea[disabled],
.CS_FormFieldControlContainer input[readonly], .CS_FormFieldControlContainer input[type="button"][readonly], .CS_FormFieldControlContainer select[readonly], .CS_FormFieldControlContainer textarea[readonly]
	{cursor: default; opacity: .7;}

.CS_FormSubmitButtonContainer {margin-top: 15px;}
#cs_commondlg .CS_FormSubmitButtonContainer {height: 0; margin-top: 0; width: 0}

/* shims for utilities from Bootstrap 4 */
.mb-3 {margin-bottom: 1rem;}
.w-25 {width: 25% !important;}


/* layout properties control where applicable */
.CS_FormAlign_left,
.CS_FormAlign_left .CS_FormContent,
.CS_FormAlign_left .CS_FormContent .cs_TabContent,
.CS_Form_SubmitButtonAlign_left .CS_CAPTCHA_Container
	{margin-right: auto;text-align:left;}
.CS_FormAlign_center,
.CS_FormAlign_center .CS_FormContent,
.CS_FormAlign_center .CS_FormContent .cs_TabContent,
.CS_Form_SubmitButtonAlign_center .CS_CAPTCHA_Container
	{margin-left: auto; margin-right: auto;text-align:center;}
.CS_FormAlign_right,
.CS_FormAlign_right .CS_FormContent,
.CS_FormAlign_right .CS_FormContent .cs_TabContent,
.CS_Form_SubmitButtonAlign_right .CS_CAPTCHA_Container
	{margin-left: auto;text-align:right;}

.CS_Form_LabelAlign_left .CS_FormFieldLabelContainer {text-align: left;}
.CS_Form_LabelAlign_center .CS_FormFieldLabelContainer {text-align: center;}
.CS_Form_LabelAlign_right .CS_FormFieldLabelContainer {text-align: right;}

.CS_Form_SubmitButtonAlign_left .CS_FormSubmitButtonContainer {text-align: left;}
.CS_Form_SubmitButtonAlign_center .CS_FormSubmitButtonContainer {text-align: center;}
.CS_Form_SubmitButtonAlign_right .CS_FormSubmitButtonContainer {text-align: right;}


/* forms in dialogs */
#cs_commondlg .CS_FormFieldContainer {min-width: 700px;}
#cs_commondlg .CS_FormFieldLabelContainer {width: 20%;} /* could be 25% except for tabs w an RTE, could figure that out per tab, but then label width is inconsistent */
#cs_commondlg .CS_FormFieldControlContainer {max-width: 525px;}
#cs_commondlg .CS_FormFieldContainer.CS_InputType_formatted_text_block .CS_FormFieldControlContainer {max-width:100%;}
#cs_commondlg #MainTable {display: table;} /* or ResizeWindow() doesn't work right in some cases */
#cs_commondlg #MainTable .cstab_row {margin-top: 10px;}


/* disabled/readonly */
input[readonly], textarea[readonly], select[readonly], input[disabled], textarea[disabled], select[disabled]
{
	background: #f6f6f6;
	color: #666;
	border: 1px solid #ccc;
}

.CS_FormGroupInDisplayTemplate {display: inline;}



/* responsive media query */
@media screen and (max-width: 510px)
{
				/*.CS_FormFieldContainer {background: #ff9;}*/
	.CS_FormFieldLabelContainer,
	.CS_Form_LabelAlign_left .CS_FormFieldLabelContainer,
	.CS_Form_LabelAlign_center .CS_FormFieldLabelContainer,
	.CS_Form_LabelAlign_right .CS_FormFieldLabelContainer
		{display: block; padding: 3px 0 0 2px !important; text-align: inherit;}
	.CS_FormFieldControlContainer  {padding: 2px 2px 2px 3px !important}
	/*.CS_FormFieldControlContainer .CS_Form_Checkbox, */.CS_FormFieldControlContainer input[type="checkbox"] {margin: 0; padding: 0;}/* TODO: really? */
	.CS_FormFieldDescrContainer .CS_FormFieldLabelContainer {display: none;}
	.CS_Form_Label, .CS_Form_Required { top: 0;}
}
@media screen and (min-width: 510px)
{
	.CS_FormLayout_LabelsOnLeft .CS_FormFieldLabelContainer {width: 25%;}
}


/*
	form layout css, similar to media query w narrow screen, but in effect when one of the CS_FormLayout_xxx classes has been applied
		Labels On Left: .CS_FormLayout_LabelsOnLeft
		Labels Above Fields: .CS_FormLayout_LabelsAboveFields
		No Labels: .CS_FormLayout_NoLabels
		Custom Styles Only: TODO: not implemented yet; whatever class we put on the form, won't render std field, label, container, and descr classes
*/
/* Labels On Left */

/* Labels Above Fields */
.CS_FormLayout_LabelsAboveFields .CS_FormFieldLabelContainer {display: block; padding: 5px 0 0 2px !important; text-align: inherit;}
.CS_FormLayout_LabelsAboveFields .CS_FormFieldControlContainer  {padding: 2px 2px 2px 3px !important}
/*.CS_FormLayout_LabelsAboveFields .CS_FormFieldControlContainer input[type="checkbox"],
	.CS_FormLayout_LabelsAboveFields .CS_FormFieldControlContainer .CS_Form_Checkbox,
	.CS_FormLayout_LabelsAboveFields .CS_FormFieldControlContainer input[type="radio"],
	.CS_FormLayout_LabelsAboveFields .CS_FormFieldControlContainer .CS_Form_Radio
	{margin: 0; padding: 0;}*//* TODO: really? no don't think so */
.CS_FormLayout_LabelsAboveFields .CS_FormFieldDescrContainer .CS_FormFieldLabelContainer {display: none;}
.CS_FormLayout_LabelsAboveFields .CS_Form_Label, .CS_Form_Required {top: 0;}

/* No Labels */
.CS_FormLayout_NoLabels .CS_FormFieldContainer {margin-top: 8px;}
.CS_FormLayout_NoLabels .CS_FormFieldLabelContainer {display: none;}


/* CONTROL-SPECIFIC */

.CS_FormFieldContainer.CS_MultilineField .CS_FormFieldLabelContainer {vertical-align: top;}
textarea.CS_Form_Text {vertical-align: top;}
.CS_FormFieldContainer.CS_LabelAlignTextarea .CS_FormFieldLabelContainer {margin-top: 4px;}
#cs_commondlg .CS_FormFieldContainer.CS_LabelAlignTextarea .CS_FormFieldLabelContainer {margin-top: 1px;}

.CS_FormFieldControlContainer .CS_Form_Checkbox, .CS_FormFieldControlContainer input[type="checkbox"]
	{margin: 1px 5px 6px 0; position: relative; top: 2px;}
.CS_FormFieldControlContainer .CS_Form_Radio, .CS_FormFieldControlContainer input[type="radio"]
	{margin: 1px 5px 6px 0; position: relative; top: 2px;}

.CS_FormFieldControlContainer label {cursor: default; font-weight: normal;}
.CS_FormFieldControlContainer div.multicheckbox, .CS_FormFieldControlContainer div.radiobutton {display: inline-block; float: left; padding-right: 10px;}

.CS_InputType_multicheckbox .CS_FormFieldControlContainer, .CS_InputType_radiobutton .CS_FormFieldControlContainer
	{display: inline-block; max-width: 575px;}
.CS_InputType_multicheckbox .CS_FormFieldControlContainer label, .CS_InputType_radiobutton .CS_FormFieldControlContainer label
	{display: inline-block; margin: 0 2.25em 0 0; white-space: nowrap;} /*prevent wrap between checkbox and label text to its right */
.CS_FormFieldControlContainer .CS_ControlGrid_Control {float: left;}
.CS_FormFieldControlContainer .CS_ControlGrid_Text {display: inline-block; white-space: normal;} /* allow wrap in label text itself */
.CS_FormFieldContainer.CS_ControlGridHorizontal .CS_FormFieldControlContainer div, .CS_FormFieldContainer.CS_ControlGridVertical .CS_FormFieldControlContainer div {margin-right: 0;}
.CS_FormFieldContainer.CS_ControlGridVertical .CS_FormFieldControlContainer div {clear: both; display: block; float: none; margin-bottom: 2px;}

.CS_InputType_img img {max-width:100%;}

textarea.CS_TextareaResize_both {resize: both;}
textarea.CS_TextareaResize_horizontal {resize: horizontal;}
textarea.CS_TextareaResize_vertical {resize: vertical;}
textarea.CS_TextareaResize_none {resize: none;}
.cs_richTextOuter {display: inline-block; vertical-align: top;}

/***********************************************/
#fieldsContainer {padding-bottom: 10px; text-align: inherit;}
#restoreDataDiv {padding: 5px 10px;}

.CS_InputType_multicheckbox .ControlGrid_Text, .CS_InputType_radiobutton .ControlGrid_Text {display: inline-block; vertical-align: top; white-space: normal;}

.CS_InputType_label .CS_InputType_SectionLabel_Content {white-space: normal;}


/* matches inputs, but is new, not sure we should do this */
select {padding: 2px;}

.CS_Captcha_Container {display: table; margin: 5px auto 10px !important;}
.errorMsgCaptcha {text-align: center; color: red; font-family: Verdana,Arial,sans-serif; font-size: 13px; margin: 1em auto -1em;}