////////////////////////////////////////////////////////////////////////////////
// Font declaration
////////////////////////////////////////////////////////////////////////////////
label,
input,
textarea,
button {
	font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	font-weight: 300;
	color: inherit;
}

////////////////////////////////////////////////////////////////////////////////
// Form elements outline
////////////////////////////////////////////////////////////////////////////////
button,
input[type="button"],
input[type="submit"] {
	transition: box-shadow 0.2s ease;
}


button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
	outline: 0;
	box-shadow: 0 0 0 2px var(--white),
				0 0 0 4px var(--brand-default); 
}

////////////////////////////////////////////////////////////////////////////////
// .field
////////////////////////////////////////////////////////////////////////////////
.field {position: relative;}
.field:not(:last-child) {margin-bottom: 25px;}

////////////////////////////////////////////////////////////////////////////////
// .form-section
////////////////////////////////////////////////////////////////////////////////
.form-section:not(:last-child) {
	margin-bottom: 50px;
}

.form-section header {
	border-bottom: 1px solid var(--border-default);
	margin-bottom: 25px;
}
////////////////////////////////////////////////////////////////////////////////
// .form-group
////////////////////////////////////////////////////////////////////////////////
.form-group .note {
	word-break: normal;
	font-size: 0.9em;
	font-style: italic;
	margin: 2px 0 0 4px;
}

////////////////////////////////////////////////////////////////////////////////
// .columnsList
////////////////////////////////////////////////////////////////////////////////
.columnsList {
	position: relative;
	margin-bottom: 25px;
}

.columnsList .addColumn {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.4em;
	color: rgba(green, 0.8);
	cursor: pointer;
}

.columnsList .addColumn:hover {color: var(--brand-default);}

.columnItem {
	position: relative;
	padding: 8px 8px 4px 8px;
	border: 1px solid var(--border-default);
	border-radius: 4px;
	background: rgba(#fff, 0.4);
	margin-bottom: 16px;
}

.columnItem > label {
	display: block;
	padding-right: 25px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.columnItem .titleLabel {
	 margin-bottom: 5px;
}

.columnItem .dropdown-tmp-item {
	line-height: 10px;
	padding: 8px 4px;
}

.columnItem .fa {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 1.2em;
	color: rgba(#000, 0.5);
	cursor: pointer;
}

.columnItem .dropdownElement {
	margin-bottom: 40px;
}

.columnItem .fa:hover {color: var(--black);}

.columnItem .actions {
	border-top: 1px solid var(--border-default);
	padding-top: 10px;
}

.columnItem .actions .fa {
	cursor: pointer;
	float: right;
	position: relative;
	top: -4px;
	right: 0;
	font-size: 1.4em;
	margin-left: 8px;
}

.columnItem .actions .add {color: var(--brand-default);}
.columnItem .actions .cancel {color: var(--danger-base);}

///////////////////////////////////////////////////////////////////////////////
// Radioboxes customization
///////////////////////////////////////////////////////////////////////////////
.radio > label {
	line-height: 0.8em;
	font-size: 15px;
	font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	font-weight: 300;
	margin-bottom: 5px;
}

.radio > label > input[type="radio"] {
	font-size: 14px;
	margin-top: 0;
}

.radio > label > input[type="radio"].withinput {
	margin-top: 3px;
}

.radio > label > input[type="number"] {
	width: 40px;
	height: 22px;
	display: inline;
	padding: 3px;
	font-size: 15px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.2);
}

////////////////////////////////////////////////////////////////////////////////
// Bootstrap fixes
////////////////////////////////////////////////////////////////////////////////
.form-control {
	border-color: var(--border-default);
	box-shadow: 0 0 0 var(--brand-default), 
				0 0 0 var(--brand-default); 
	transition: box-shadow 0.2s
}

.form-control:focus {
	outline: none;
	border-color: var(--brand-default);
	box-shadow: 1px 1px 0 var(--brand-default),
 				-1px 3px 0 var(--brand-default); 
}

.form-control.error {
	color: var(--danger-base);
	border-color: var(--danger-base);
	background-color: rgba(red, 0.07);
}

.form-control.error:focus {
	box-shadow:  1px 1px var(--danger-base),
				-1px 3px 0 var(--danger-base);
}

.form-control.error::placeholder {
	color: var(--danger-base);
	opacity: 0.5;
}

textarea {
	resize: vertical;
}

textarea.sql-script {
	min-height: 500px;
}

textarea.user-note-input {
	min-height: 250px;
}

input[type="checkbox"] {
	cursor: pointer;
}

.checkbox > label {
	word-break: break-all;
}

.query-expression-textarea {
	min-height: 125px;
}