/* 2:35 AM 2022-11-12 */
FORM{
	margin:40px 0;
	padding:0;
}
FORM FIELDSET{
	margin:20px 0 30px 0;
	padding:0;
	border:0;
}
FORM FIELDSET:last-child{margin-bottom:0;}
FORM FIELDSET.indent{margin-left:20px;}
FORM FIELDSET.optional{display:none;}
FORM FIELDSET.q{
	position:relative;
	overflow:hidden;
	margin:0;
}
FORM FIELDSET.q *{
	position:absolute;
	top:-100%;
	left:-100%;
}
FORM FIELDSET LEGEND{
	margin:0;
	padding:0;
	width:100%;
	position:relative;	
}
FORM FIELDSET LABEL{
	position:relative;
	display:block;
	margin:0 0 .3em 0;
	padding:0 !important;
	font-size:1em;
	line-height:1.4em;
	max-width:42em;
}
FORM FIELDSET LABEL SPAN.r{
	position:absolute;
	bottom:0;
	right:0;
	font-size:80%;
	color:#FF0000;
}
FORM FIELDSET LABEL:has(span.r){padding:0 70px 0 0 !important;}
FORM FIELDSET LABEL SPAN.r.grey{color:#999999 !important;}
FORM FIELDSET LABEL.checkbox{
	margin-left:1em;
	padding:.3em 0 .6em 1.7em !important;
}
FORM FIELDSET LABEL.checkbox:after{
	content:'';
	position:absolute;
	left:1.7em;
	max-width:39.3em;
	bottom:0;
	right:0;
	border-bottom:1px dashed #000000;
}
FORM FIELDSET TEXTAREA,
FORM FIELDSET INPUT,
FORM FIELDSET SELECT,
FORM FIELDSET DIV.editable{
	box-sizing:border-box;
	outline:none;
	background-color:#ffffff;
	width:auto;
	font-family:inherit;
	font-size:inherit;
	line-height:1.7em;
	padding:.3em .6em;
	border:1px solid #000000;
	color:#000000;
	border-radius:.6em;	
	transition:all 300ms ease;
}
FORM FIELDSET TEXTAREA.extend,
FORM FIELDSET INPUT.extend,
FORM FIELDSET SELECT.extend,
FORM FIELDSET DIV.editable.extend{
	width:100%;
	max-width:42em;
}
FORM FIELDSET INPUT.search-input{}
FORM FIELDSET INPUT.search-input::placeholder{
	color:#999999;
	font-style:italic;
}

FORM FIELDSET INPUT[type='file']{border:0;}
FORM FIELDSET INPUT[type='checkbox'],
FORM FIELDSET INPUT[type='radio']{
	margin:0 .6em 0 0;
	padding:0;
	transform:scale(1.2);	
}
FORM FIELDSET INPUT[type='number']::-webkit-inner-spin-button, 
FORM FIELDSET INPUT[type='number']::-webkit-outer-spin-button{ 
	-webkit-appearance:none; 
	margin:0; 
}
FORM FIELDSET LABEL.checkbox INPUT[type='checkbox'],
FORM FIELDSET LABEL.checkbox INPUT[type='radio']{
	position:absolute;
	left:0;
	top:.6em;
}
FORM FIELDSET SELECT OPTION{font-family:inherit;}
FORM FIELDSET TEXTAREA,
FORM FIELDSET DIV.editable{
	resize:vertical;
	min-height:10em;
}
FORM FIELDSET INPUT::-ms-clear{display:none;}
FORM FIELDSET INPUT[type='submit']{
	background-color:#ffffff;
	border:1px solid #000000;
	padding:.6em 1.2em;
	margin:0 1em 1em 0;
	color:#000000;
	cursor:pointer;
    appearance:none;
}
FORM FIELDSET INPUT[type='submit'].cancel{border:1px dashed #999999;}
FORM FIELDSET INPUT[type='submit'].delete{
	color:#FF0000;
	border:1px solid #FF0000;
}
FORM FIELDSET INPUT[type='submit']:hover,
FORM FIELDSET INPUT[type='submit']:focus{
	color:#FFFFFF;
	background-color:#000000;
}
FORM FIELDSET INPUT[type='submit'].cancel:hover,
FORM FIELDSET INPUT[type='submit'].cancel:focus{
	background-color:#999999;
}
FORM FIELDSET INPUT[type='submit'].delete:hover,
FORM FIELDSET INPUT[type='submit'].delete:focus{
	color:#FFFFFF;
	background-color:#FF0000;
}
FORM FIELDSET INPUT[type='button']{
	cursor:pointer;
	border:0;
	padding:.3em .6em;
	font-size:inherit;
	color:#000000;
	background-color:#FFFFFF;
	outline:none;
	border-radius:.3em;	
	transition:all 300ms ease;
    appearance:none;	
}
FORM FIELDSET INPUT[type='checkbox'].form-input-error,
FORM FIELDSET TEXTAREA.form-input-error,
FORM FIELDSET INPUT.form-input-error,
FORM FIELDSET SELECT.form-input-error,
FORM FIELDSET DIV.editable.form-input-error{
	border-color:#FF0000 !important;
}
FORM FIELDSET TEXTAREA:focus,
FORM FIELDSET INPUT:focus,
FORM FIELDSET SELECT:focus,
FORM FIELDSET DIV.editable:focus{
	background-color:#eeeeee;
	box-shadow:0 0 5px rgba(0,0,255,.6);	
}
FORM FIELDSET TEXTAREA.form-input-error:focus,
FORM FIELDSET INPUT.form-input-error:focus,
FORM FIELDSET SELECT.form-input-error:focus,
FORM FIELDSET DIV.editable.form-input-error:focus{
	box-shadow:0 0 5px rgba(255,0,0,.6);	
}
FORM FIELDSET INPUT[type='number']::-webkit-inner-spin-button, 
FORM FIELDSET INPUT[type='number']::-webkit-outer-spin-button{ 
	-webkit-appearance:none; 
	margin:0; 
}
FORM FIELDSET P.charcater-count{
	font-size:80%;
	color:#0000FF;
	margin-top:0;
}
FORM FIELDSET P.form-error-container{
	position:relative;
	color:#FF0000;
	line-height:1.2em;	
	margin:0 0 .6em 0;
	padding:0 0 0 2.2em;
	display:none;
}
FORM FIELDSET P.form-error-container.error-display,
FORM FIELDSET P.form-error-container.displayed{
	display:block;
}
FORM FIELDSET P.form-error-container:before{
	position:absolute;
	left:0;
	top:-.1em;
	content:"!";
	font-weight:500;
	line-height:1.5em;
	width:1.5em;
	height:1.5em;
	text-align:center;
	background-color:#FF0000;
	color:#FFFFFF;
	margin:0;
	padding:0;
	border-radius:999px;	
	animation:ErrorFieldFlash 2000ms ease 0ms infinite normal forwards;		
}
FORM FIELDSET.btn-list{
	box-sizing:border-box;
	display:flex;
	flex-direction:row;
	align-items:stretch;
	justify-content:start;
	flex-wrap:wrap;
}
FORM FIELDSET INPUT.btn-list{
	flex-grow:0;
	flex-shrink:0;
}
DIV.form-general-error-container{
	position:relative;
	border:1px solid #FF0000;
	background-color:#FFFFFF;
	padding:.6em 1em;
	margin:2em 0;
	border-radius:.6em;		
}
DIV.form-general-error-container:before,
DIV.form-general-error-container:after{
	content:'';
	position:absolute;
	bottom:-12px;
	left:.7em;
	width:0;
	height:0;
	border-left:12px solid transparent;
	border-right:12px solid transparent;
	border-top:12px solid #FF0000;
	z-index:1;
}
DIV.form-general-error-container:before{
	bottom:-11px;
	border-top-color:#FFFFFF;
	z-index:2;
}
DIV.form-general-error-container P{
	color:#FF0000;
	margin:0;
}
FORM .custom-upload,
FORM .image-container{
	position:relative;
	overflow:hidden;
	border:1px solid #000000;
	padding:.6em;
	border-radius:.6em;
}
FORM .image-container IMG{border-radius:.4em;}
FORM .image-container.mw200{max-width:200px;}
FORM .custom-upload LABEL{
	display:inline-block;
	margin:0 1em 0 0;
	width:80px;
	height:80px;
	background:transparent url('/assets/images/icons/upload-icon.png?v2=true') no-repeat top left;
	cursor:pointer;
	vertical-align:top;
}
FORM .custom-upload INPUT{
	position:absolute;
	top:-120%;
	left:-120%;
}
FORM .custom-upload SPAN{
	display:inline-block;
	padding:.5em 0;
	color:#0000FF;
	-ms-word-break:break-all;
	word-break:break-all;
	word-break:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	hyphens:auto;	
}
FORM .custom-upload SPAN I{
	display:block;
	margin:.6em 0;
	color:#0000FF;
	font-size:80%;
}

@keyframes ErrorFieldFlash{
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:0;}  
}
DIV.form-helper-text{
	position:relative;
	margin:1em 0;
	padding:.5em 40px .5em 1em;
	font-size:85%;
	color:#666666;
	border-left:1px dashed #EEEEEE;
	cursor:pointer;
	transition:all 300ms ease;
}
DIV.form-helper-text:hover{border-color:#CCCCCC;}
DIV.form-helper-text:before{
	content:'?';
	display:block;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	background-color:#EEEEEE;
	border-radius:15px;
	transition:all 300ms ease;
}
DIV.form-helper-text:hover:before{background-color:#CCCCCC;}
DIV.form-helper-text P:first-child{margin-top:0;}
DIV.form-helper-text P:last-child{margin-bottom:0;}
DIV.form-helper-text P{display:none;}
DIV.form-helper-text.display{
	border-left-color:#0000FF;
	color:#0000FF;
}
DIV.form-helper-text.display P{display:block;}
DIV.form-helper-text.display:before{
	content:'X';
	position:absolute;
	top:.5em;
	right:0;
}
DIV.form-helper-text.display:before,
DIV.form-helper-text.display:hover:before{
	background-color:#0000FF;
	color:#FFFFFF;
}

/*
* 5:56 AM 2024-04-28
*/
DIV.custom-select{
	margin:1em 0;
	max-height:10em;
	overflow:auto;
	border:1px solid #000000;
	border-radius:.6em;
}
DIV.custom-select.advanced{
	max-height:15em;
	position:relative;
}
DIV.custom-select DIV{
	position:relative;
	box-sizing:border-box;
	width:100%;
	padding:.3em;
	border-bottom:1px solid #000000;
	transition:all 300ms ease;
}
DIV.custom-select DIV:hover{background-color:#CCCCCC;}
DIV.custom-select.advanced DIV.actions{transition:none !important;}
DIV.custom-select.advanced DIV.actions:hover{background-color:transparent;}

DIV.custom-select DIV:last-child{border-bottom:0;}
DIV.custom-select DIV INPUT,
DIV.custom-select DIV SELECT{
	accent-color:#0000FF;
}
DIV.custom-select DIV LABEL{
	margin:0;
	min-height:30px;
	-ms-word-break:break-all;
	word-break:break-all;
	word-break:break-word;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	hyphens:auto;
}
DIV.custom-select DIV BUTTON{
	margin:0;
	padding:0;
	line-height:30px;
	text-align:center;
	box-sizing:border-box;
	border:1px solid #000000;
	cursor:pointer;
	font-size:inherit;
	color:#000000;
	background-color:#FFFFFF;
	outline:none;
	border-radius:.3em;	
	transition:all 300ms ease;
    appearance:none;
}
DIV.custom-select.advanced DIV BUTTON.action-btn{
	position:absolute;
	top:.3em;
	right:.3em;
	width:40px;
	height:40px;
	border-radius:40px;
	border:1px solid #0000FF;
}
DIV.custom-select.advanced DIV BUTTON.action-btn.order-arrow{right:50px;}


DIV.custom-select.advanced DIV.actions LABEL{text-align:center;}
DIV.custom-select.advanced DIV.actions BUTTON{
	padding:.3em .6em .3em 40px;
	padding-left:calc(40px + .6em);
	margin:1em auto;
	position:relative;
}
DIV.custom-select.advanced DIV.actions BUTTON:before{
	content:'+';
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:40px;
	line-height:40px;
	border-right:1px solid #000000;
	transition:all 300ms ease;
}
DIV.custom-select.advanced DIV.actions BUTTON:hover{color:#0000FF;}
DIV.custom-select.advanced DIV.actions BUTTON:hover:before{
	color:#FFFFFF;
	background-color:#0000FF;
}
DIV.custom-select.advanced SELECT{
	max-width:calc(100% - 110px);
	padding:.3em .2em;
}

DIV.custom-select.advanced DIV BUTTON.action-btn.order-arrow{background:#FFFFFF url('/assets/images/icons/icon-sprite-move.png') no-repeat 0px 0px;}
DIV.custom-select.advanced DIV BUTTON.action-btn.delete{background:#FFFFFF url('/assets/images/icons/icon-sprite-delete.png') no-repeat 0px 0px;}
DIV.custom-select.advanced DIV:first-child BUTTON.action-btn.delete{display:none;}
DIV.custom-select.advanced DIV BUTTON.action-btn.order-arrow:hover,
DIV.custom-select.advanced DIV BUTTON.action-btn.delete:hover{
	background-color:#0000FF;
	background-position:0px -40px;	
}

DIV.ns-group-01{
	border:1px solid #000000;
	border-radius:1em;
	padding:1em;
	margin:0 0 2em 0;
}
DIV.ns-group-01 FIELDSET{
	margin:0 0 1em 0;
	padding:0 0 1em 0;
	border-bottom:1px dashed #000000;
}
DIV.ns-group-01 FIELDSET:last-child{
	margin:0;
	padding:0;
	border:0;
}
DIV.ns-group-01.disabled{
	opacity:.4;
	border-style:dashed;
}