.cruddy-form > .cruddy-form-element:first-child
{
	padding-top: 0;
}

.cruddy-form > .cruddy-form-element:last-child
{
	padding-bottom: 0;
}

.cruddy-form-element input,
.cruddy-form-element select
{
	height: auto;
}

.cruddy-form-element input,
.cruddy-form-element textarea,
.cruddy-form-element select
{
	width: 100%;
	border-radius: 5px;
	background-color: #eee;
	padding: 5px 10px;
}

.cruddy-form-element input[type="button"],
.cruddy-form-element input[type="submit"],
.cruddy-form-element input[type="checkbox"]
{
	width: auto;
}

.cruddy-form-element input:focus,
.cruddy-form-element textarea:focus,
.cruddy-form-element select:focus
{
	background-color: #ddd;
}

.cruddy-form-element input:disabled,
.cruddy-form-element textarea:disabled,
.cruddy-form-element select:disabled
{
	background-color: #bbb;
	color: #000;
}

.cruddy-form-element,
.cruddy-form-element-float > .cruddy-form-element:not(.invisible) + .cruddy-form-element
{
	padding: 25px 0;
}

.cruddy-form-element.invisible
{
	display: none;
}

.cruddy-form-element:not(.invisible) + .cruddy-form-element
{
	padding-top: 0;
}

.cruddy-form-element label.heading
{
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.cruddy-form-element .description
{
	margin-top: 5px;
	font-style: italic;
}

.cruddy-form-element.cruddy-form-element-checkbox label.heading
{
	display: inline;
	margin: 0 0 0 10px;
}
.cruddy-form-element.cruddy-form-element-checkbox.nice label.heading
{
	position: relative;
	top: -8px;
}

.cruddy-form-element-checkbox .checkbox-element
{
	display: inline-block;
	height: 30px;
	width: 45px;
	border-radius: 16px;
	background-color: #ccc;
	border: 1px solid #bebebe;
	position: relative;
}

.cruddy-form-element-checkbox.nice input
{
	display: none;
}

.cruddy-form-element-checkbox .checkbox-element::before
{
	content: "";
	display: block;
	position: absolute;
	border-radius: 100%;
	width: 28px;
	height: 100%;
	background-color: #bebebe;
	top: 0;
	left: 0;
	transition: all 0.3s;
}

.cruddy-form-element-checkbox input:checked + .checkbox-element::before
{
	left: 100%;
	transform: translateX(-100%);
	background-color: #009900;
}

.cruddy-form-element-double-select
{
	border: 1px solid #bebebe;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 25px;
}

.cruddy-form-element-double-select > label
{
	padding: 10px;
	background-color: #ddd;
	border-bottom: 1px solid #bebebe;
}

.cruddy-form-element-double-select > .content
{
	padding: 15px 15px 0;
}

.cruddy-form-element-double-select .cruddy-form-element
{
	padding: 0;
}

.cruddy-form-element-double-select > .content > .buttons
{
	height: 40px;
	position: relative;
	margin: 15px 0;
}

.cruddy-form-element-double-select > .content > .buttons > .button
{
	position: absolute;
	top: 0;
	width: 40px;
	height: 100%;
	background-color: #ddd;
	border: 1px solid #bebebe;
	cursor: pointer;
}

.cruddy-form-element-double-select > .content > .buttons > .button:hover
{
	background-color: #eee;
}

.cruddy-form-element-double-select > .content > .buttons > .button::before
{
	display: block;
	text-align: center;
	line-height: 40px;
}

.cruddy-form-element-double-select > .content > .buttons > .add-button
{
	left: calc(50% - 60px);
}

.cruddy-form-element-double-select > .content > .buttons > .add-button::before
{
	content: "\21D3";
}

.cruddy-form-element-double-select > .content > .buttons > .remove-button
{
	right: calc(50% - 60px);
}

.cruddy-form-element-double-select > .content > .buttons > .remove-button::before
{
	content: "\21D1";
}

.cruddy-form-element-float
{
	padding: 0 !important;
}

.cruddy-form-element-float::after
{
	content: "";
	display: block;
	clear: both;
}

.cruddy-form-element-float > .cruddy-form-element
{
	float: left;
	margin-right: 10px;
}

.cruddy-form-element-input-or-select .cruddy-form-element
{
	padding: 0;
}

.cruddy-form-element-input-or-select > .header > label
{
	float: left;
	margin-right: 15px;
}

.cruddy-form-element-input-or-select .cruddy-form-element-text
{
	display: none;
}

.cruddy-form-element-range > .content
{
	position: relative;
	height: 60px;
}

.cruddy-form-element-range > .content > .range-element
{
	position: absolute;
	left: 70px;
	right: 70px;
	top: 50%;
	transform: translateY(-50%);
}

.cruddy-form-element-range > .content > .range-element > .current-value
{
	position: absolute;
	top: 100%;
}

.cruddy-form-element-range > .content > .range-value
{
	position: absolute;
	top: 0;
	height: 100%;
	width: 60px;
	line-height: 60px;
	border: 1px solid #bebebe;
	background: #ddd;
	border-radius: 5px;
	text-align: center;
}

.cruddy-form-element-range > .content > .range-value.min-value
{
	left: 0;
}

.cruddy-form-element-range > .content > .range-value.max-value
{
	right: 0;
}

.cruddy-form-element-repeater > .heading,
.cruddy-form-element-repeater > .add-button,
.cruddy-form-element-repeater > .items,
.cruddy-form-element-repeater > .items > .item,
.cruddy-form-element-repeater > .items > .item.open > .header
{
	border: 1px solid #bebebe;
}

.cruddy-form-element-repeater > .heading,
.cruddy-form-element-repeater > .add-button
{
	background-color: #ddd;
	font-weight: bold;
	padding: 10px;
}

.cruddy-form-element-repeater > label.heading
{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: 0;
}

.cruddy-form-element-repeater > .items
{
	border-top: none;
	border-bottom: none;
}

.cruddy-form-element-repeater > .items > .item,
.cruddy-form-element-repeater > .items > .item.open > .header
{
	border-top: none;
	border-right: none;
	border-left: none;
}

.cruddy-form-element-repeater > .items > .item > .header
{
	background-color: #eee;
	font-weight: bold;
	padding: 10px;
	position: relative;
}

.cruddy-form-element-repeater > .items > .item > .header:hover
{
	cursor: pointer;
	background-color: #f7f7f7;
}

.cruddy-form-element-repeater > .items > .item > .header + .content
{
	display: none;
}

.cruddy-form-element-repeater > .items > .item > .content
{
	padding: 0 15px;
	position: relative;
}

.cruddy-form-element-repeater > .add-button
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top: none;
	cursor: pointer;
	text-align: center;
}

.cruddy-form-element-repeater > .add-button:hover
{
	background-color: #eee;
}

.cruddy-form-element-repeater > .items > .item > .header > .remove-button,
.cruddy-form-element-repeater > .items > .item > .content > .remove-button
{
	position: absolute;
	cursor: pointer;
}

.cruddy-form-element-repeater > .items > .item > .header > .remove-button
{
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.cruddy-form-element-repeater > .items > .item > .content > .remove-button
{
	top: 10px;
	right: 10px;
}

.cruddy-form-element-repeater > .items > .item > .header > .remove-button::before,
.cruddy-form-element-repeater > .items > .item > .content > .remove-button::before
{
	content: "X";
	display: block;
	color: #bebebe;
}

.cruddy-form-element-repeater > .items > .item > .header > .remove-button:hover::before,
.cruddy-form-element-repeater > .items > .item > .content > .remove-button:hover::before
{
	color: #999;
}

.cruddy-form-element-repeater > .template
{
	display: none;
}

.cruddy-form-element-row
{
	padding: 0;
}

.cruddy-form-element.invisible + .cruddy-form-element-row > .cruddy-row > .cruddy-col > .cruddy-form-element
{
	padding-top: 0;
}

.cruddy-form-element-row > .cruddy-row > .cruddy-col
{
	padding: 0 10px;
}

.cruddy-form-element-row > .cruddy-row > .cruddy-col:first-child
{
	padding-left: 0;
}

.cruddy-form-element-row > .cruddy-row > .cruddy-col:last-child
{
	padding-right: 0;
}

.cruddy-form-element-section > .header
{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #bebebe;
	background-color: #ddd;
	font-weight: bold;
	padding: 10px;
	cursor: pointer;
}

.cruddy-form-element-section.closed > .header
{
	border-radius: 5px;
}

.cruddy-form-element-section > .header > .icon
{
	float: left;
	width: 20px;
}

.cruddy-form-element-section > .header > .icon::before
{
	display: block;
	content: "-";
}

.cruddy-form-element-section.closed > .header > .icon::before
{
	content: "+";
}

.cruddy-form-element-section.closed > .content
{
	display: none;
}

.cruddy-form-element-section > .content
{
	padding: 0 15px;
	border: 1px solid #bebebe;
	border-top: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.cruddy-form-element-tabs.horizontal > .tab-header
{
	background-color: white;
}

.cruddy-form-element-tabs.horizontal > .tab-header::after
{
	content: "";
	display: block;
	clear: both;
}

.cruddy-form-element-tabs.horizontal > .tab-header > .header
{
	position: relative;
	float: left;
	padding: 8px 15px;
	background-color: #ddd;
	border: 1px solid #bebebe;
	border-bottom: none;
	border-right-width: 0;
	cursor: pointer;
}

.cruddy-form-element-tabs.horizontal > .tab-header > .header:hover
{
	background-color: #eee;
}

.cruddy-form-element-tabs.horizontal > .tab-header > .header:last-child
{
	border-right-width: 1px;
}

.cruddy-form-element-tabs.horizontal > .tab-header > .header.active
{
	background-color: transparent;
	border-bottom: none;
	cursor: default;
}

.cruddy-form-element-tabs.horizontal > .tab-header > .header.active::after
{
	content: "";
	display: block;
	position: absolute;
	z-index: 10;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 100%;
	background-color: white;
}

.cruddy-form-element-tabs > .tab-content > .content
{
	display: none;
	border: 1px solid #bebebe;
	padding: 0 15px;
}

.cruddy-form-element-tabs > .tab-content > .content.active
{
	display: block;
}

.cruddy-form-element-file .drag-drop-upload-container
{
    background-color: #dedede;
    padding: 10px;
    font-family: helvetica;
}

.cruddy-form-element-file .drag-drop-upload-container input[type="file"]
{
    margin-top: 10px;
    display: none;
}

.cruddy-form-element-file .drag-drop-upload-container .upload-field,
.cruddy-form-element-file .drag-drop-upload-container .user-info
{
    
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.cruddy-form-element-file .drag-drop-upload-container .upload-field
{
    display: flex;
    border: 1px dashed #333;
    padding: 20px;
}

.cruddy-form-element-file .drag-drop-upload-container .user-info
{
    display: flex;
    user-select: none;
}

.cruddy-form-element-file .drag-drop-upload-container .user-info .arrow
{
    border-radius: 5px;
    border: 1px dashed #333;
    padding: 10px 20px;
    font-size: 22pt;
    margin-bottom: 10px;
}

.cruddy-form-element-file .drag-drop-upload-container .files-container .file
{
    margin-top: 10px;
    display: flex;
    flex-flow: row;
}

.cruddy-form-element-file .drag-drop-upload-container .files-container .file .name
{
    width: 100%;
}

.cruddy-form-element-file .drag-drop-upload-container .files-container .file .btn-delete
{
    width: auto;
    margin-right: 10px;
    color: #900;
}

.cruddy-form-element-file .drag-drop-upload-container .files-container .file .btn-delete:hover
{
    color: #C00;
}

.cruddy-form-element-file .current-uploaded-file
{
	margin-top: 10px;
}

.cruddy-form-element-file .current-uploaded-file-preview
{
	margin-top: 20px;
}

.cruddy-form-element-file .current-uploaded-file-preview img
{
	max-width: 100%;
}

.cruddy-form-element-filter .cruddy-form-element
{
	margin: 0;
	padding: 0;
}

.cruddy-form-element-filter .filter > .cruddy-col:nth-child(n + 2)
{
	margin-left: 20px;
}