/* FORM CSS Document iV4 FRONT */

/*** styling FORMS in tables with class .formtable ***/
table.formtable .dijitInlineEditBoxDisplayMode span[style]{
	text-decoration:none!important;
	display:block;
	width:10px;
	padding-left:8px;
	height:20px;
	overflow:hidden;
	background:transparent url(../images/textfield_empty.png) center center no-repeat;
	}
	table.formtable .dijitInlineEditBoxDisplayModeHover span[style]{
		text-decoration:none!important;
		display:block;
		width:10px;
		padding-left:8px;
		height:20px;
		overflow:hidden;
		background:transparent url(../images/textfield_empty_hover.png) center center no-repeat;
		}

/************************* START LESS ready *************************/	
table.formtable input.ui-state-default,
.tundra.frontend table.formtable .dijitTextBox,
.tundra.frontend #new_booking .dijitTextBox { /*see input.less for other settings*/	
	background-image:none;
	padding:2px 5px;
	}
	/*** start setting in case bootsrap is integrated ***/
	table.formtable input.ui-state-default,
	.tundra.bootstrapfront .bt_maincontent table.formtable .dijitTextBox,
	.tundra.bootstrapfront .bt_maincontent #new_booking .dijitTextBox {
		margin-right:0;
		padding-right:0;
		min-width:3em;
		/*width:-moz-calc(100% - 0.5em)!important;
		width:-webkit-calc(100% - 0.5em)!important;
		width:calc(100% - 0.5em)!important;*/
		width:100%; /* adjusted width calculation seems not needed anymore - april 2015 */
		}
		.tundra.bootstrapfront .bt_maincontent table.formtable .dijitTextBox .dijitInputInner,
		.tundra.bootstrapfront .bt_maincontent #new_booking .dijitTextBox .dijitInputInner {
			padding:5px 0;
			}
	/*** end setting in case bootsrap is integrated ***/
/************************* END LESS ready **************************/		

.tundra table.formtable .dijitInlineEditBoxDisplayMode,
.tundra table.booking_detail .dijitComboBox {
    border: 1px solid transparent;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px;	
	padding:2px 5px;
    }
	.tundra table.booking_detail .dijitComboBox {
		padding-left:1px;
		background-color:transparent;
		}
	.tundra table.formtable .dijitInlineEditBoxDisplayModeHover,
	.tundra table.formtable .dijit_a11y .dijitInlineEditBoxDisplayModeHover,
	.tundra table.formtable .dj_ie6 .dijitInlineEditBoxDisplayModeHover,
	.tundra table.booking_detail .dijitComboBoxHover {
		background-color: #f6f6f6;
		border: solid 1px #b3b3b3;
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		border-radius: 5px;	
		padding:2px 5px;
		}
		.tundra table.booking_detail .dijitComboBoxHover {
			padding-left:1px;
			}
			
table.formtable input.ui-state-default,
.tundra table.formtable .dijitTextBoxFocused,
.tundra table.booking_detail .dijitComboBoxFocused,
.tundra #new_booking .dijitTextBoxFocused {
	border: solid 1px #cccccc;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px;
	background-color:#ffffff;	
	}

/*** textarea in advanced search: full width ***/
.tundra table.advanced_search .dijitTextBox {
	width:100%!important;
	min-height:55px;
	}

/************************* START LESS ready *************************/
/* selectfield */
.tundra table.formtable .dijitButtonNode,
.tundra #new_booking .dijitButtonNode {
	background-image: none;
	background-color:transparent!important;
	border-width:0px;
	padding:0; 
	}
	/*** start setting in case bootsrap is integrated ***/
	.tundra.bootstrapfront .bt_maincontent table.formtable .dijitButtonNode,
	.tundra.bootstrapfront .bt_maincontent #new_booking .dijitButtonNode {
		padding:5px 0; 
		}
	/*** end setting in case bootsrap is integrated ***/
.tundra table.formtable .dijitSelect,
.tundra #new_booking .dijitSelect,
.tundra table.formtable .multiselect select {
	background-image:none;
	border-collapse: separate;
	padding:2px 5px;
	}
		
.tundra table.formtable .dijitArrowButtonContainer,
.tundra #new_booking .dijitArrowButtonContainer {
    border-width: 0!important;
	}
	.tundra #new_booking .dijitArrowButtonContainer {
		background-image:none;
		background-color:transparent;
		}
	/* no tr highlight for table.dijitSelect */
	table.dijitSelect tr:hover {
		background-color:transparent;
		}

	/*** select options ***/
	.tundra .dijitMenuPopup {
		padding:5px 10px 5px 10px!important;
		}
			.tundra .dijitMenuItemHover td.dijitMenuArrowCell,
			.tundra .dijitMenuItemSelected td.dijitMenuArrowCell {
				position: relative;
				vertical-align: middle;
				}
		
/************************* END LESS ready **************************/
	
		/* selectfield inline edit mode*/
		.tundra table.booking_detail .dijitSelect,
		.tundra table.manage_view .dijitSelect {
			background-image:none;
			background-color: transparent;
			border: solid 1px transparent;
			-webkit-border-radius: 5px; 
			-moz-border-radius: 5px; 
			border-radius: 5px;	
			border-collapse: separate;
			padding:2px 5px 2px 3px;
			}
						/*** exeption for manage_view AddRosterColor & RosterSetting ***/
						.tundra table.AddRosterColor .dijitSelect,
						.tundra table.RosterSetting .dijitSelect, 
						.tundra table.Modal .dijitSelect, 
                        .tundra table.BlockSetting .dijitSelect{
							background-color: #f6f6f6;
							border: solid 1px #b3b3b3;
							}
						/*** /exeption for manage_view AddRosterColor & RosterSetting ***/
			.tundra table.booking_detail .dijitSelect .dijitArrowButtonInner,
			.tundra table.manage_view .dijitSelect .dijitArrowButtonInner,
			.tundra table.booking_detail .dijitComboBox .dijitArrowButtonInner {
				visibility:hidden;
				}
						/*** exeption for manage_view AddRosterColor & RosterSetting ***/
						.tundra table.AddRosterColor .dijitSelect .dijitArrowButtonInner,
						.tundra table.Modal .dijitSelect .dijitArrowButtonInner,
						.tundra table.BlockSetting .dijitSelect .dijitArrowButtonInner,
						.tundra table.RosterSetting .dijitSelect .dijitArrowButtonInner {
							visibility:visible;
							}
						/*** /exeption for manage_view AddRosterColor & RosterSetting ***/				
		.tundra table.booking_detail .dijitSelectHover,
		.tundra table.manage_view .dijitSelectHover {
			border: solid 1px #b3b3b3;
			background-color: transparent;
			}
						/*** exeption for manage_view AddRosterColor & RosterSetting ***/
						.tundra table.AddRosterColor .dijitSelectHover,
						.tundra table.RosterSetting .dijitSelectHover,
						.tundra table.Modal .dijitSelectHover,
                        .tundra table.BlockSetting .dijitSelectHover{
							background-color:#ffffff;
							}
						/*** /exeption for manage_view AddRosterColor & RosterSetting ***/
			.tundra table.booking_detail .dijitSelectHover .dijitArrowButtonInner,
			.tundra table.manage_view .dijitSelectHover .dijitArrowButtonInner,
			.tundra table.booking_detail .dijitComboBoxHover .dijitArrowButtonInner {
				visibility:visible;
				}
		.tundra table.booking_detail .dijitSelectFocused,
		.tundra table.manage_view .dijitSelectFocused {
			background-color: #ffffff;
			border: solid 1px #cccccc;
			}
						/*** exeption for manage_view AddRosterColor & RosterSetting ***/
						.tundra table.AddRosterColor .dijitSelectFocused,
						.tundra table.RosterSetting .dijitSelectFocused, 
						.tundra table.Modal .dijitSelectFocused, 
                        .tundra table.BlockSetting .dijitSelectFocused {
							}
						/*** /exeption for manage_view AddRosterColor & RosterSetting ****/
			.tundra table.manage_view .dijitSelectFocused .dijitButtonNode,
			.tundra table.manage_view .dijitSelectHoverFocused .dijitButtonNode {
				background-color:#ffffff;
				}
			.tundra table.booking_detail .dijitSelectFocused .dijitArrowButtonInner,
			.tundra table.manage_view .dijitSelectFocused .dijitArrowButtonInner,
			.tundra table.booking_detail .dijitComboBoxFocused .dijitArrowButtonInner {
				visibility:visible;
				}
		.tundra table.booking_detail .dijitSelect .dijitButtonText,
		.tundra table.manage_view .dijitSelect .dijitButtonText {
			text-align:left;
			padding-left:0;
			}
		.tundra table.booking_detail .dijitTextBox .dijitButtonNode,
		.tundra table.booking_detail .dijitTextBox .dijitButtonNodeFocused,
		.tundra table.manage_view .dijitTextBox .dijitButtonNode,
		.tundra table.manage_view .dijitTextBox .dijitButtonNodeFocused {
			border-color: #9B9B9B;
			}

/* CHOSEN (multi)select (for example used in block CustomFields in case the fields are based on custom tables */
.ChosenInlineEdit {
	border: 1px solid transparent;
    border-radius: 5px 5px 5px 5px;
    padding: 2px 5px;
	cursor:text;
	min-height: 1.4em;
	}
	.ChosenInlineEdit:hover {
		background-color: #f6f6f6;
		border: solid 1px #b3b3b3;
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		border-radius: 5px;	
		padding:2px 5px;
		}

/************************* START LESS ready *************************/
/* checkbox */
.tundra table.formtable .dijitCheckBox {
    background-image: none;
	}
	.tundra table.formtable .dijitCheckBoxHover {
		}
	/*** start setting in case bootsrap is integrated ***/
	.tundra.bootstrapfront .bt_maincontent table.formtable .dijitCheckBox {
		margin:5px 2px 5px 0;
		height:25px;
		width:25px;		
		}
		.tundra.bootstrapfront .bt_maincontent table.formtable .dijitCheckBox input.dijitCheckBoxInput {
			height:23px;
			width:23px;
			margin:0;
			}
			.tundra.bootstrapfront .bt_maincontent table.formtable .dijitCheckBoxChecked {
				background-position:5px 3px;
				}
				.tundra.bootstrapfront .bt_maincontent table.formtable .dijitCheckBoxCheckedHover {
					background-position:-11px 3px;
					}
					
	/* override settings for iCheck checkbox & radio formfields (color checked state settings + border-radius settings in input.less (border-radius only for checkbox in input.less) */
	/* for default state: use custom bootstrap based form colors for background (#fff) + border (#ccc) */
	#dashboard .icheckbox_flat,
	#dashboard .iradio_flat { 			
		background-color:#ffffff;
		background-image: url("../fs_images/flat.png")!important;
		background-repeat:no-repeat;
		border:1px solid #cccccc;
		}

	#dashboard .icheckbox_flat {
		background-image: url("../fs_images/flat.png")!important;
		background-position: 0 0!important;
		}
		#dashboard .icheckbox_flat.checked {
			background-image: url("../fs_images/flat.png")!important;
			background-position: -22px 0!important;
			}
		#dashboard .icheckbox_flat.disabled {
			background-image: url("../fs_images/flat.png")!important;
			background-position: -44px 0!important;
			cursor: not-allowed;
			}
		#dashboard .icheckbox_flat.checked.disabled {
			background-image: url("../fs_images/flat.png")!important;
			background-position: -66px 0!important;
			cursor: not-allowed;
			}

	#dashboard .iradio_flat {
		background-image: url("../fs_images/flat.png")!important;
		background-position: -88px 0!important;
		border-radius:50%;
		}
		#dashboard .iradio_flat.checked {
			background-image: url("../fs_images/flat.png")!important;
			background-position: -110px 0!important;
			}
		#dashboard .iradio_flat.disabled {
			background-image: url("../fs_images/flat.png")!important;
			background-position: -132px 0!important;
			cursor: not-allowed;
			}
		#dashboard .iradio_flat.checked.disabled {
			background-image: url("../fs_images/flat.png")!important;
			background-position: -154px 0!important;
			cursor: not-allowed;
			}
	
	#dashboard .icheckbox_flat input,
	#dashboard .iradio_flat input {
		margin:0;
		}
	
	/* HiDPI support */
	@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
		#dashboard .icheckbox_flat,
		#dashboard .iradio_flat {
			background-image: url("../fs_images/flat@2x.png")!important;
			-webkit-background-size: 176px 22px;
			background-size: 176px 22px;
			}
	}
	/* end override settings iCheck */

/* override default width select2 container (100%) */
.form-horizontal .form-group .select2-container[style],
.formtable .select2-container[style],
table#fieldslist .select2-container[style] {
	width:100%!important;
	}
	/* override default width select2 container with formvalidation */
	.form-horizontal .form-group.has-error .select2-container[style],
	.form-horizontal .form-group.has-success .select2-container[style] {
		/*width:calc(100% - 34px)!important;*/
		}

	/* overrides for select2 fields: same height + look&feel as BS text fields */
	.form-horizontal .form-group .select2-container .select2-choice,
	.formtable .select2-container .select2-choice,
	table#fieldslist .select2-container .select2-choice  {
		height:34px;
		line-height:34px;
		background-image:none!important;
		color: #555;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
		}
		.form-horizontal .form-group .select2-dropdown-open .select2-choice,
		.formtable .select2-dropdown-open .select2-choice,
		table#fieldslist .select2-dropdown-open .select2-choice {
		    border: 1px solid #66afe9;
		    border-bottom-color: transparent;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
		    border-bottom-left-radius: 0;
		    border-bottom-right-radius: 0;
		    background-color: #eee;
			}
		.tundra .select2-drop-active {
		    border: 1px solid #66afe9;
		    border-top: none;
		     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
			}
		/* overrides for formvalidation has-success */
		.form-horizontal .form-group.has-success .select2-container .select2-choice  {
		background-color: #fff;
		border: 1px solid #3c763d;
		}
		.form-horizontal .form-group.has-success .select2-dropdown-open .select2-choice {
		    border: 1px solid #66afe9;
		    border-bottom-color: transparent;
		    background-color:rgba(60,118,61,0.25);
		    color:#3c763d;
			}
		/* overrides for formvalidation has-error */
		.form-horizontal .form-group.has-error .select2-container .select2-choice  {
		background-color: #fff;
		border: 1px solid #a94442;
		}
		.form-horizontal .form-group.has-error .select2-dropdown-open .select2-choice {
		    border: 1px solid #66afe9;
		    border-bottom-color: transparent;
		    background-color:rgba(169,68,66,0.25);
		    color:#a94442;
			}
			/* overrides for formvalidation icon */
			.form-horizontal .has-feedback .select2-container span.select2-chosen {
				margin-right:42.5px;
				}
			.form-horizontal .has-feedback .select2-container ~ .form-control-feedback {
			    right: 30px;
				}
/* end override settings select2 */
					
	/*** end setting in case bootsrap is integrated ***/
.tundra table.formtable .dijitCheckBoxChecked {
	background-image:url("../fs_images/SpriteButtons16x16.png");
	background-position:0 0;
	background-repeat:no-repeat;	
	background-color:transparent;
	}
	.tundra table.formtable .dijitCheckBoxCheckedHover {
		background-image:url("../fs_images/SpriteButtons16x16.png");
		background-position:-16px 0;
		background-repeat:no-repeat;
		}
/************************* END LESS ready **************************/


/* radiobutton */
.tundra table.formtable .dijitRadio,
.tundra table.formtable .dijitRadioHover, 
.tundra table.formtable .dijitRadioChecked,
.tundra table.formtable .dijitRadioCheckedHover {
    background-position: 0 0;
	background-repeat:no-repeat;
	}
.tundra table.formtable .dijitRadio {
    background-image: url("../images/radio.png");
	}
	.tundra table.formtable .dijitRadioHover {
		background-image: url("../images/radio_hover.png");
		}
.tundra table.formtable .dijitRadioChecked {
		background-image: url("../images/radio_checked.png");
		}
		.tundra table.formtable .dijitRadioCheckedHover {
			background-image: url("../images/radio_checked_hover.png");
			}

/* Form Lay-out and Hints */
fieldset {
	margin: 0;
	padding: .3em 1em;
	border-style: solid;
	border-width: 1px;
	}
	fieldset.noborder {
		border-width: 0px;
		}
		fieldset div {
		clear: both;
		margin: .1em 0;
		position: relative;
		text-align:left;
		}
		label.mandat, fieldset div.cr {
					margin: 0 1em 0 0;
					display: block;
					width: 40%;
					text-align: right;
					float: left;
					}
fieldset div.cr label, fieldset div.cr span.labelnb {
	text-align: left;
	margin-left: 31em;
	width: auto;
	float: none;
	}
/* Form Elements and Display (colorsettings as always in the main css file*/
input { 
	text-indent : 2px; 
	}

.block-field:hover
{
	/*background-color:#EDEDED; NOTE JV: use same structura as setup for tablerow hover in input.less */
}

.tundra table.add_customer .ires_error {
	border: solid 1px #b60000;
}


.tundra.frontend table.formtable .front_ires_error {
	border: solid 1px #b60000 !important;
}

.select2-results .select2-disabled {
	color: #b3b3b3;
}
span.btn-social, i.fa {
	color:#ffffff;
}

/* checkout, select reference field: text 'Selecteer hoe u ons gevonden heeft' must fit on XS devices */
.select-references .dijitSelectLabel {
	font-size:0.9em;
	}

/* Generic Setting to display Left Alined BS Lables (.control-label): 
add extended class "left-aligned-labels" to the FORM class "form-horizontal"
so the form class = <form class="form-horizontal left-aligned-labels"..... */
.left-aligned-labels .control-label {
	text-align:left!important;
}

/* styling INLINE FORM inside #payment_container (front.php?mod=payments[&type=....]) */
#payment_container .form-inline .form-group .control-label {
	margin-right:10px;
	}
#payment_container .form-inline .form-group div {
	display:inline-block;
	}
#payment_container .form-inline #message_div {
	margin-top:20px;
	}

/* correction vertical-alignment form fields (fixed in IRES-8714) */
.bootstrapfront #dashboard #showbookingconfdiv .formtable th, 
.bootstrapfront #dashboard #showbookingconfdiv .formtable td,
.bootstrapfront #dashboard #confirm_container .formtable th,
.bootstrapfront #dashboard #confirm_container .formtable td,
.bootstrapfront #dashboard #confirm_container .formtable td.spacer,
.bootstrapfront #dashboard #login_container .formtable th,
.bootstrapfront #dashboard #login_container .formtable td,
.bootstrapfront #dashboard #login_container .formtable td.spacer,
.bootstrapfront #dashboard #profile_container .formtable th,
.bootstrapfront #dashboard #profile_container .formtable td,
.bootstrapfront #dashboard #profile_container .formtable td.spacer,
.bootstrapfront #profile_container .formtable th,
.bootstrapfront #profile_container .formtable td,
.bootstrapfront #profile_container .formtable td.spacer,
.bootstrapfront .block-field th, 
.bootstrapfront .block-field td,
.bootstrapfront .block-field td.spacer {
    vertical-align: middle;
    }

/* IRES-9939: CSS FIX for Issue with virtual keyboard and select2 formfields (mobile devices only!) */
.mobile .bootstrapfront .select2-drop-mask[style],
.tablet .bootstrapfront .select2-drop-mask[style] {
    display:none!important;
}

/* IRES-10946: Styling improvements Customer Form */
.formHeader .subhead {
	padding-top: 20px!important;
}
/* left align control-label inside horizontal form */
.form-horizontal.leftAlignLabels .control-label {
	text-align: left;
}
/* override the message_success image (set in button.css): we use the fontawesome check icon now (right aligned the input field) */
.form-horizontal.leftAlignLabels .col-sm-8 div:not([class*="iti"]),
.form-horizontal.leftAlignLabels .form-group .select2-container[style] {
	width: calc(100% - 16px)!important;
	display: inline-block;
	}
	/* Keep ires-core-library select components as flex controls. The generic div rule
	   above was written for legacy wrappers and breaks the caret/value alignment. */
	.form-horizontal.leftAlignLabels .col-sm-8 .ires-select-container {
		width: calc(100% - 16px)!important;
		display: inline-block;
	}
	.form-horizontal.leftAlignLabels .col-sm-8 .ires-select-selection {
		width: 100%!important;
		display: flex!important;
	}
	.form-horizontal.leftAlignLabels .col-sm-8 .iti {
		width: calc(100% - 16px)!important;
	}
	.form-horizontal.leftAlignLabels .col-sm-8 .icheckbox_flat {
		width: 20px!important;
	}
.form-horizontal .message_success.fa-check {
	color: #0f5132;
	display: inline-block;
	background-image: none;
}
/* the class 'help-block' is added to the message_wrong class for a nice alignment */
.form-horizontal .message_wrong.help-block {
	color: #b60000;
}
/* validation border glow for registration/customer form fields */
.form-horizontal .form-control.is-valid {
	border-color: #198754;
	box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
.form-horizontal .form-control.is-invalid {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
/* alignment buttons on mod=registration + customer_form.tpl (right align with the formfields right end) */
.registrationFields .buttonContainer,
.customerFields .buttonContainer {
	padding-right: 16px;
}

/* Google Places autocomplete dropdown styling for front forms */
.pac-container {
	margin-top: 2px;
	border: 1px solid #c9d3dc;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 12px 30px rgba(25, 49, 70, 0.18);
	overflow: hidden;
	z-index: 3000 !important;
	font-family: inherit;
}

.pac-container .pac-item {
	padding: 10px 14px;
	border-top: 1px solid #eef2f6;
	line-height: 1.35;
	font-size: 0.97rem;
	color: #1f2d3d;
	cursor: pointer;
}

.pac-container .pac-item:first-child {
	border-top: none;
}

.pac-container .pac-item .pac-item-query {
	display: inline;
	margin-right: 0.3rem;
	font-weight: 600;
	color: #0f2233;
}

.pac-container .pac-item:hover,
.pac-container .pac-item.pac-item-selected {
	background-color: #f2f7fb;
}

.pac-container .pac-matched {
	font-weight: 700;
	color: #17324a;
}

.width3em {
	width: 3em;
}
.width4em {
	width: 4em;
}
.width5em {
	width: 5em;
}
.width6em {
	width: 6em;
}
.width7em {
	width: 7em;
}
.width8em {
	width: 8em;
}
.width9em {
	width: 9em;
}


.ml3em {
	margin-left: 3em;
}
.ml4em {
	margin-left: 4em;
}
.ml5em {
	margin-left: 5em;
}
.ml6em {
	margin-left: 6em;
}
.ml7em {
	margin-left: 7em;
}
.ml8em {
	margin-left: 8em;
}
.ml9em {
	margin-left: 9em;
}

/* The customcheck */
.customcheck {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 15px;
	cursor: pointer;
	font-weight: bold;
	font-size: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.customcheck input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
	background-color: #68aed1;
	border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.customcheck .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Payment Checkout */
.paymethod_width {
	width: 12rem!important;
}