/* 
Admina Template
Author: Chris Mooney (http://themeforest.net/user/ChrisMooney)

forms.css - CSS for form components
*/

.form p {
	margin-bottom:15px;
}
.form fieldset, .fieldset {
	background:#f5f5f5;
	border:1px solid #d9d9d9;
	margin:0 0 20px;
	padding:10px 20px 15px;
	min-height:20px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
body.ie7 fieldset, body.ie8 fieldset, body.ie7 .fieldset, body.ie8 .fieldset {
	padding:25px 20px 05px;
	margin-top:10px;
}
.form fieldset.collapsed > *, .fieldset.collapsed > * {
	display:none;
}
.form fieldset.collapsed legend, .fieldset.collapsed .legend {
	display:block;
	margin-left:0;
}
.form fieldset.collapsed, .fieldset.collapsed {
	background:none !important;
	border:none;
	padding:0;
}
.form fieldset.grey {
	background:#f7f7f7;
	box-shadow:0px 1px 0px #fff inset;
	-moz-box-shadow:0px 1px 0px #fff inset;
	-webkit-box-shadow:0px 1px 0px #fff inset;
}
.form legend, .legend {
	background:url("/assets/images/beheer/boxheader.gif") repeat-x scroll center top #E2E2E2;
	border:1px solid #ccc;
	font-size:93%;
	padding:5px 8px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
body.ie7 legend, body.ie8 legend, body.ie7 .legend, body.ie8 .legend {
	position:absolute;
	left:0;
	top:-10px;
}
.form legend a {
	background:url("/assets/images/beheer/icons/16/bullet_toggle_plus.png") no-repeat right center;
	text-decoration:none;
	display:block;
	color:#181818;
	padding-right:20px;
}
.form legend a.collapse {
	background:url("/assets/images/beheer/icons/16/bullet_toggle_minus.png") no-repeat right center;
}
.form label {
	display:block;
	text-align:left;
	cursor:hand;
	margin-bottom:10px;
}

div.inline {
	overflow: hidden;
}
div.inline > p {
	float: left;
	clear: none;
}
.inline > label {
	display: inline-block;
	margin-bottom: 0;
}
fieldset.inline select,
fieldset.inline label {
	margin-right:15px;
}
span.inline {
	white-space: nowrap;
	margin-left: 15px;
}
.form input:not([type="submit"]), .form textarea {
	background:#fefefe url(/assets/images/beheer/bg-input.gif) repeat-x top;
	border:1px solid #ccc;
	padding:5px;
	color:#4d4d4d;
	border-radius: 3px;
}
.form input:disabled {
	background: #DDD;
	color: #888;
}
input.datepicker {
	width: 10ch;
}
.form input.smaller {
	width: 3em;
}
.form input.small {
	width:50px;
}
.form input.medium {
	width: 150px;
}
.form input.large {
	width:200px;
}
.form input.larger {
	width:260px;
}
.form input.largest {
	width:500px;
}
.form select {
	background:#fefefe url(/assets/images/beheer/bg-input.gif) repeat-x top;
	border:1px solid #ccc;
	padding:5px;
	color:#4d4d4d;
	-moz-border-radius:3px;
	-webkit-border:3px;
	border-radius:3px;
	width:150px;
}
.form input[type=checkbox], .form input[type=radio] {
	width:auto;
	border:0;
	background:none;
	margin:0 5px 0 0;
}
/* Input Validation */
.form span.required {
	color:#F45D43;
	font-weight:700;
	font-size:131%;
}
.form input.success {
	background:#F1FFBF url("/assets/images/beheer/icons/16/success.png") no-repeat 140px center;
	border-color:#A6D50F;
}
.form input.error {
	background:#FECDC6 url("/assets/images/beheer/icons/16/error.png") no-repeat right center;
	border-color:#F45D43;
}
.form input.warning {
	background:#FFECB0 url("/assets/images/beheer/icons/16/warning.png") no-repeat 140px center;
	border-color:#FFBC2A;
}
.form input.info {
	background:#D4E7F5 url("/assets/images/beheer/icons/16/information.png") no-repeat 140px center;
	border-color:#589AD7;
}
.form input.tip {
	background:#FFECCD url("/assets/images/beheer/icons/16/tip.png") no-repeat 140px center;
	border-color:#DD9854;
}
.form input.success, .form input.error, .form input.warning, .form input.info, .form input.tip {
/*
	padding:5px 25px 5px 5px;
	width:130px;
*/
}
.form p img {
	vertical-align:middle;
	margin-left:5px;
}
.form label.strong {
	font-weight:700;
}
.form.col label {
	float:left;
	width:140px;
	margin-top:5px;
	clear:left;
}
[onclick] {
	cursor: pointer;
}
.ui-datepicker-trigger {
	margin-right: 5px;
	cursor:pointer;
}
/* Stylish Switches */
.switch-enable, .switch-disable {
	display: block;
	float: left;
	line-height: 30px;
	border:1px solid #ccc;
	padding: 0 10px;
	background: url("/assets/images/beheer/bg-input.gif") repeat-x top #FEFEFE;
	font-weight: 700;
	color:#333333;
}
.switch-enable {
	border-right:0;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
}
.switch-disable {
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
}
.switch-disable.selected, .switch-enable.selected {
	color: #fff;
	padding: 0 10px;
}
.switch-disable.selected {
	background: #b04d44 url(/assets/images/beheer/grad.png) repeat-x bottom;
	border:1px solid #96413b;
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
}
.switch-enable.selected {
	background: #88bc1f url(/assets/images/beheer/grad.png) repeat-x bottom;
	border:1px solid #4f810f;
	border-right:0;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
}
.switch-wrapper span {
	cursor: pointer;
}
.switch-wrapper input {
	display: none;
}
.switch-wrapper {
	clear:both;
	padding-bottom:25px;
}
/* Stylish Switches (Small) */
.switch-wrapper.small .switch-disable, .switch-wrapper.small .switch-enable {
	padding: 0 5px;
}
.switch-wrapper.small .switch-disable.selected {
	background: #b04d44 url(/assets/images/beheer/grad.png) repeat-x bottom;
	border:1px solid #96413b;
	border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
}
.switch-wrapper.small .switch-enable.selected {
	background: #88bc1f url(/assets/images/beheer/grad.png) repeat-x bottom;
	border:1px solid #4f810f;
	border-right:0;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
}
.switch-wrapper.small .switch-enable, .switch-wrapper.small .switch-disable {
	font-size:85%;
	line-height:25px;
}
/* Progress Bars */
.progress-bar {
	background:url("/assets/images/beheer/grad.png") repeat-x center bottom #ccc;
	border:1px solid #808080;
	display:inline-block;
	padding:10px;
	position:relative;
	text-align:center;
	width:100px;
	vertical-align:middle;
	box-shadow:0 2px 4px #808080 inset;
	-moz-box-shadow:0 2px 4px #808080 inset;
	-webkit-box-shadow:0 2px 4px #808080 inset;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
body.ie7 .progress-bar, body.ie8 .progress-bar {
	zoom:1;
	display:inline;
}
.progress-bar span {
	background-image:url("/assets/images/beheer/grad.png");
	background-repeat:repeat-x;
	background-position:bottom center;
	border:1px solid rgba(0, 0, 0, 0.3);
	color:#fff;
	font-size:93%;
	position:absolute;
	left:0;
	bottom:0;
	top:0;
	text-shadow:0 -1px 0px rgba(0, 0, 0, 0.5);
	box-shadow:0 0 2px rgba(255, 255, 255, 0.4) inset;
	-moz-box-shadow:0 0 2px rgba(255, 255, 255, 0.4) inset;
	-webkit-box-shadow:0 0 2px rgba(255, 255, 255, 0.4) inset;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.progress-bar.blue > span {
	background-color:#00A1CD;
}
.progress-bar.red > span {
	background-color:#F00;
}
.progress-bar.green > span {
	background-color:#0F0;
}
/* Buttons */

.center {
	text-align: center;
}
button, .button, .button:visited {
	cursor:pointer;
	display:inline-block;
	font: inherit;
	line-height: 1;
	font-size:108%;
	margin-left: 0.5em;
	padding: 1ex 1em;
	width:auto;
	text-align:center;
	text-decoration: none;
	vertical-align:middle;
	border: 0;
	border-radius:3px;
	background: #CCC;
	color: #222;
}
button {
	font-weight:700;
}
button:hover, .button:hover {
	background: #888;
}
button.blue, .button.blue {
	background: #00A1CD;
	color: #FFF;
}
button.blue:hover, .button.blue:hover {
	background: #00b4e5;
}
button.green, .button.green {
	background: #20c00f;
	color: #FFF;
}
button.green:hover, .button.green:hover {
	background: #25d911;
}
button.red, .button.red {
	background: #c00f0f;
	color: #FFF;
}
button.red:hover, .button.red:hover {
	background: #d91111;
}

button.large, .button.large {
	font-size:138.5%;
	padding:10px 30px;
}
button.small, .button.small {
	font-size:93%;
	padding:4px 10px 5px;
}
form[disabled] button, form[disabled] button:hover,
button.disabled, button.disabled:hover,
.button.disabled, .button.disabled:hover {
	background: #ccc;
	color:#666;
	text-shadow:0 1px 0 #CCCCCC;
	cursor:default;
	border-color:#a3a3a3;	
}
form[disabled] button:active,
button.disabled:active, .button.disabled:active {
	position:relative;
	top:0;
	background-image: url('/assets/images/beheer/grad.png');
}
form[disabled] button:hover,
form[disabled] button {
	background: linear-gradient(to right, #888 0%, #CCC 8%, #888 16%, #888 50%, #CCC 58%, #888 66%);
	background-size: 200%;
	animation: 4s linear infinite bgscroll;
}
form[disabled] button:hover {
	animation: 2s linear infinite bgscroll;
}
@keyframes bgscroll {
	0%   { background-position:  100%; }
	100% { background-position: -100%; }
}
button img, .button img {
	display:inline;
	height:16px;
	margin-right:10px;
	vertical-align:-3px;
	width:16px;
}
/* notifications */
.notification.success {
	background:#f1ffbf url('/assets/images/beheer/icons/16/success.png') no-repeat 10px 10px;
	border-color:#a6d50f;
}
.notification.success span.strong {
	color:#283304;
}
.notification.error {
	background:#fecdc6 url('/assets/images/beheer/icons/16/error.png') no-repeat 10px 10px;
	border-color:#f45d43;
}
.notification.error span.strong {
	color:#33130e;
}
.notification.warning {
	background:#ffecb0 url('/assets/images/beheer/icons/16/warning.png') no-repeat 10px 10px;
	border-color:#ffbc2a;
}
p.notification.warning {
	background-position: 10px 2ex;
}
.notification.warning span.strong {
	color:#332508;
}
.notification.info {
	background:#d4e7f5 url('/assets/images/beheer/icons/16/information.png') no-repeat 10px 10px;
	border-color:#589ad7;
}
.notification.info span.strong {
	color:#152433;
}
.notification.tip {
	background:#ffeccd url('/assets/images/beheer/icons/16/tip.png') no-repeat 10px 10px;
	border-color:#dd9854;
}
.notification.tip span.strong {
	color:#332313;
}
.notification {
	padding:10px 10px 10px 35px;
	border:1px solid #fff;
	margin-bottom:20px;
	position:relative;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.notification.no-margin {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
	margin:0;
}
.notification .close {
	background:url("/assets/images/beheer/icons/16/close.png") no-repeat scroll 0 0 transparent;
	cursor:pointer;
	display:block;
	height:16px;
	position:absolute;
	right:10px;
	top:10px;
	width:16px;
}
.notification .close:hover {
	opacity:1;
}
.notification.nopic {
	background-image:none;
	padding:10px;
}
.notification span.strong {
	margin-right:10px;
}

.form textarea,
.form input.inputbig
{
	width: 100%;
	box-sizing: border-box;
	resize: none;
}

.form .thumb {
	max-width: 100%;
	max-height: 112px;
	width: auto;
}

.form select.select-big
{
	width: 300px;
}

.form input.input-big
{
	width: 285px;
}

.delete-link
{
	text-decoration: none;
	color: Red;	
}

.form fieldset p > * +  button,
.form fieldset p > * + .button,
.form button + #DeleteButton {
	float: right;
}

.form select.small
{
	width: 50px;	
}

#page-content .right {
	float: right;
	margin: 0;
}
.right + p {
	clear: none;
}

.flexform {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1em;
}
#page-content .flexform p {
	margin: 0 1em 2ex;
}
#page-content .flexform > .right,
.flexform > .right {
	margin-left: auto;
	align-self: end;
	margin-bottom: 0;
}

.gal {
	box-sizing: border-box;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}
.gal li {
	margin: 1em;
}
.gal img.target {
	outline: .5ex solid #888;
}
.gal :hover > img {
	outline: .5ex solid #000;
}
.gal li.target > a {
	font-size: 128px;
	cursor: pointer;
	color: #888;
}
.gal li > a:hover {
	color: #000;
}

.gal.square li {
	width: 100px;
	height: 104px;
}
.gal.square li img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.gal #upload {
	border: 4px dashed #CCC;
}
.gal #upload:active {
	border-color: #000;
	color: #000;
}
.gal #upload:before {
	/* cover input button */
	position: absolute;
	content: '+';
	width: 128px;
	line-height: 128px;
	font-size: 128px;
	text-align: center;
	pointer-events: none;
}
.gal #upload input {
	opacity: 0; /* active but invisible */
	height: 128px;
	width: 128px;
}
.gal #upload input:focus,
.gal #upload input:active {
	border: 0; /* undo ckeditor */
}

.seohint {
	margin-left: .4em;
	float: right;
	opacity: .8;
}
span.seohint small {
	font-size: inherit;
	opacity: .6;
	color: #000;
}
label.seo::before {
	margin-right: .3em;
	content: '●';
}
label.seo > .required {
	display: none;
}

.seohints {
	padding: 0;
	margin: 0;
}
.seohints {
	margin-bottom: 20px;
}
.seohints > li {
	list-style: none;
	margin: 1ex 0;
	margin-left: 2em;
}
.seohints > li::before {
	display: inline-block;
	margin-left: -1.5em;
	width: 1.5em;
	content: '⬤';
}
span.pass, label.pass::before,
.seohints > li.pass::before {
	color: #090;
}
span.fail, label.fail::before,
.seohints > li.fail::before {
	color: #E00;
}
span.ambi, label.ambi::before,
.seohints > li.ambi::before {
	color: #D70;
}