span.vr::before{ content:"|"; color:$c-white; }
hr::before{ border-top:1px solid #dfdfdf; width:100%; }

.pn{ padding:0!important; }
.ptn{ padding-top:0!important; }
.pln{ padding-left:0!important; }
.prn{ padding-right:0!important; }
.pv-sm{ padding-top:$space-sm!important; padding-bottom:$space-sm!important; }
.p-xs{ padding:$space-xs!important; }
.p-sm{ padding:$space-sm!important; }
.p-md{ padding:$space-md!important; }
.p-lg{ padding:$space-lg!important; }
.pt-sm{ padding-top:$space-sm!important; }
.p20{ padding:$space-md!important; }
.pt20{ padding-top:$space-md; }
.pt100{ padding-top:100px!important; }
.pb100{ padding-bottom:100px!important; }
.pb-sm{ padding-bottom:$space-sm!important; }
.pb-md{ padding-bottom:$space-md!important; }
.pb20{ padding-bottom:$space-md; }
.py-xs{ padding-top:$space-xs!important; padding-bottom:$space-xs!important; }
.py-sm{ padding-top:$space-sm; padding-bottom:$space-sm; }
.py-md{ padding-top:$space-md; padding-bottom:$space-md; }
.pr-xs{ padding-right:$xs; }
.pl-sm{ padding-left:$space-sm!important; }
.pl-md{ padding-left:$space-md!important; }
.pl-lg{ padding-left:$space-lg!important; }
.pl-xl{ padding-left:$space-xl!important; }
.pr-sm{ padding-right:$space-sm!important; }
.pr-md{ padding-right:$space-md!important; }
.pl15{ padding-left:15px!important; }
.mn{ margin:0;}
.mln{ margin-left:0;}
.mrn{ margin-right:0!important;}
.mbn{ margin-bottom:0!important;}
.m-sm{ margin:$space-sm!important;}
.m-lg{ margin:$space-lg!important;}
.m-auto{ @include m-auto(); }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt60{ margin-top:60px!important; }
.mt100{ margin-top:100px!important; }
.mt-sm{ margin-top:$space-sm!important;}
.mt-md{ margin-top:$space-md!important;}
.mt-lg{ margin-top:$space-lg!important;}
.mt-xl{ margin-top:$space-xl!important;}
.mt-xxl{ margin-top:$space-xxl!important;}
.mb100{ margin-bottom:100px!important; }
.mb-md{ margin-bottom:$space-md!important;}
.mb-xl{ margin-bottom:$space-xl!important;}
.ml-sm{ margin-left:$space-sm!important;}
.ml-md{ margin-left:$space-md!important;}
.ml-lg{ margin-left:$space-lg!important;}
.mr-sm{ margin-right:$space-sm!important;}
.mr-md{ margin-right:$space-md!important;}
.mb-sm{ margin-bottom:$space-sm!important;}
.bd-y{ border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; }

.of-y{ overflow-y:scroll; }
.of-y-m{ overflow-y:scroll; margin-right:-9px; }
.of-x{ overflow-x:auto; }
.of-x-hide{ overflow-x:hidden; }

.fs-xxs{ font-size:$fs-xxs!important; }
.fs-xs{ font-size:$fs-xs!important; }
.fs-sm{ font-size:$fs-sm!important; }
.fs-md{ font-size:$fs-md!important; }
.fs-lg{ font-size:$fs-lg!important; }
.fs-xl{ font-size:$fs-xl!important; }
.fs-xxl{ font-size:$fs-xxl!important; }
.fs66{ font-size:66px!important; }

.fw-lg, .strong{ font-weight:$bold-md!important; }
.fw-xl{ font-weight:$bold-lg; }

.br-a{ border:1px solid $c-border; }
.br-n{ border:none!important; }
.br-n-t{ border-top:none!important; }
.br-n-b{ border-bottom:none!important; }
/* Border */
.br-n{ border:none!important; }
.br-l-n{ border-left:0!important; }
.br-r-n{ border-right:0!important; }
.br-t-n{ border-top:0!important; }
.br-b-n{ border-bottom:0!important; }
.br-a{ border:1px solid $c-border!important; }
.br-r{ border-right:1px solid $c-border; }
.br-l{ border-left:1px solid $c-border; }
.br-b{ border-bottom:1px solid $c-border; }
.br-t{ border-top:1px solid $c-border!important; }
.br-l-6n-7:nth-child(6n+7){ border-left:1px solid $c-border!important; }
.br-l-5n-6:nth-child(5n+6){ border-left:1px solid $c-border!important; }
.br-l-4n-5:nth-child(4n+5){ border-left:1px solid $c-border!important; }
.br-l-3n-4:nth-child(3n+4){ border-left:1px solid $c-border!important; }

/* Rotate */
.deg90{ transition:transform .2s; transform: rotate(90deg); }

/* Color */
.bga-default{
	&.dark{ background-color:$c-default-dark; }
}
.bga-white{ background-color:$c-white; }
.bga-blue-light{ background-color:$c-blue-light; color:$c-muted; }

.text-primary{ 
	&, &:hover, &:focus, &:active {
		color:$c-primary!important; 
	}
}
a{
	&.text-primary{
		&, &:hover, &:focus, &:active {
			color:$c-primary!important; 
		}
	}
}
.text-primary.light{ color:$c-primary-light!important; }
.text-info{ color:$c-info!important; }
.text-success{ color:$c-success!important; }
.text-warning{ color:$c-warning!important; }
.text-danger{ color:$c-danger!important; }
.text-danger.light{ color:$c-danger-light!important; }
.text-blue-light{ color:$c-primary-light; }
.text-red-light{ color:$c-danger-light; }
.text-blue{ color:$c-primary; }
.text-blue-dark{ color:$c-blue-dark; }
.text-red{ color:$c-danger; }
.text-yellow{ color:$c-warning; }
.text-black{ color:$c-black!important; }
.text-grey{ color:$c-grey; }
.text-violet.light{ color:$c-violet-light!important; }
.text-white{ color:$c-white!important; }
.text-hover-danger:hover{ color:$c-danger!important; }
.text-hover-primary:hover{ color:$c-primary!important; }
.text-font-default{ color:$c-font-default!important; }

.h-sm{ height: $sm; }
.h-md{ height: $md; }
.h-lg{ height: $lg; }
.h-xl{ height: $xl; }
.h-xxl{ height: $xxl; }
.h-xxxl{ height: $xxxl; }

/* Align */
.va-t{ vertical-align:top!important; }
.va-m{ vertical-align:middle!important; }
.va-s{ vertical-align:sub; }
.al,.text-left{ text-align:left!important; }
.ac,.text-center{ text-align:center; }
.ar,.text-right{ text-align:right!important; }
.pull-right{
float:right;
	  &.pull-item{
		  padding-top:6px;
	  }
}

/* Work Break */
.text-break{ white-space:pre-line; word-break:break-all; line-height:1.2; }
.text-of{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; }

/* Size */
.w20{ width:20px; }
.w80{ width:80px; }
.w100{ width:100px; }
.w120{ width:120px; }
.w150{ width:150px; }
.w200{ width:200px; }
.w400{ width:400px; }
.w480{ width:480px; }
.whalf{ width:50%; }
.wfull{ width:100%; }
.h60{ height:60px; }
.h350{ height:350px; }
.h450{ height:450px; }
.h500{ height:500px; }
.h550{ height:550px; }
.hfull{ height:100%; }
.mw34{ max-width:34px!important; }
.mw40{ max-width:40px!important; }
.mw60{ max-width:60px!important; }
.mw80{ max-width:80px!important; }
.mw100{ max-width:100px!important; }
.mw120{ max-width:120px; }
.mw150{ max-width:150px!important; }
.mw500{ max-width:500px; }
.mwfull{ max-width:100%!important; }
.mnh60{ min-height:60px; }
.mnh400{ min-height:400px; }
.mnh440{ min-height:440px; }
.mnh500{ min-height:500px; }
.mnh700{ min-height:700px; }
.mh60{ max-height:60px!important; }

.custom_a{
	max-height:250px;
	overflow-y: auto;
}

/* Point */
.cur-point{ cursor:pointer; }

/* Pre */
.term{ padding:$space-sm; background-color:$c-default-dark; white-space:pre-line!important; word-break:break-all; overflow-y:auto; }
.pre-line{ white-space:pre-line!important; }

/* Position */
.pos-r{ position:relative; }

/* display */
.ib{ display:inline-block; }
.hide{ display:none; }
.block{ display:block; }


.flex-box{ 
	display:flex; 
	&.flex-row > *{
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
}
.flex-full{ flex:1 1 auto; }
.flex-none{ flex:0!important; }
.flex-center{ align-items: center; justify-content: center; }
.align-center{ align-self: center; }



/*================ Append ================*/
/*================================================== Switches - Created with Pure CSS, no js required ==================================================== */

.switch {
	position: relative;
}

.switch.switch-label {
	padding-left: 32px;
	padding-right: 50px;
}

.switch label {
	display: block;
	position: relative;
	color: transparent;
	background: #ddd;
	text-indent: 100%;
	width: 52px;
	height: 26px;
	cursor: pointer;
	transition: left 0.15s ease-out;
}

.switch input {
	display: none;
}

.switch input+label {
	margin-left: 0;
	margin-right: 0;
}

.switch label:after {
	content: "";
	display: block;
	background: $c-white;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	-webkit-transition: left 0.15s ease-out;
	-moz-transition: left 0.15s ease-out;
	transition: left 0.15s ease-out;
}

.switch input:checked+label {
	background: #2ba6cb;
}

.switch input:checked+label:after {
	left: 29px;
}

.switch label {
	width: 52px;
	height: 25px;
}

.switch label:after {
	width: 19px;
	height: 19px;
}

.switch input:checked+label:after {
	left: 29px;
}

.switch label {
	color: transparent;
	background: #dddddd;
}

.switch label:after {
	background: $c-white;
}

.switch input:checked+label {
	background: #2ba6cb;
}

.switch>.switch-label-left,
.switch>.switch-label-right {
	position: absolute;
	top: 3px;
}

.switch>.switch-label-left {
	left: -20px;
}

.switch>.switch-label-right {
	right: 10px;
}


/* Switch Sizes */

.switch.switch-lg label {
	width: 65px;
	height: 32px;
}

.switch.switch-lg label:after {
	width: 26px;
	height: 26px;
}

.switch.switch-lg input:checked+label:after {
	left: 35px;
}

.switch.switch-sm label {
	width: 45px;
	height: 22px;
}

.switch.switch-sm label:after {
	width: 16px;
	height: 16px;
}

.switch.switch-sm input:checked+label:after {
	left: 26px;
}

.switch.switch-xs label {
	width: 39px;
	height: 19px;
}

.switch.switch-xs label:after {
	width: 13px;
	height: 13px;
}

.switch.switch-xs input:checked+label:after {
	left: 22px;
}

.switch.radius label {
	border-radius: 4px;
}

.switch.radius label:after {
	border-radius: 3px;
}


/* Switch Option - Rounded */

.switch.round {
	border-radius: 1000px;
}

.switch.round label {
	border-radius: 26px;
}

.switch.round label:after {
	border-radius: 26px;
}


/* Switch Option - Inline */

.switch.switch-inline {
	display: inline-block;
}

.switch.switch-inline+.switch.switch-inline {
	margin-left: 15px;
}


/* SWITCH CONTEXTUALS  */

.switch.switch-primary input:checked+label {
	background-color: $c-primary;
}

.switch.switch-success input:checked+label {
	background-color: $c-success;
}

.switch.switch-info input:checked+label {
	background-color: $c-info;
}

.switch.switch-warning input:checked+label {
	background-color: $c-warning;
}

.switch.switch-danger input:checked+label {
	background-color: $c-danger;
}

.switch.switch-alert input:checked+label {
	background-color: #967adc;
}

.switch.switch-system input:checked+label {
	background-color: #37bc9b;
}

.switch.switch-dark input:checked+label {
	background-color: #3b3f4f;
}


/*================================================== Radios and Checkboxes ==================================================== */

.radio-custom,
.checkbox-custom {
	background-color: transparent;
	color: #555555;
}


/* hide default input */

.radio-custom input {
	display: none;
}

.checkbox-custom {
	input {
		display: none;
	}
	label:empty {
		padding-left: 10px;
	}
}

.radio-custom {
	label {
		&:empty {
			padding-left: 10px;
		}
		cursor: pointer;
		position: relative;
		padding-left: 32px;
		margin-right: 15px;
		margin-bottom: 5px;
	}
	&.radio-sm label {
		padding-left: 26px;
		font-size: 12px;
		font-weight: 400;
	}
	&.radio-xs label {
		padding-left: 20px;
		font-size: 11px;
		font-weight: 400;
	}
	label:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		border-radius: 64px;
		width: 20px;
		height: 20px;
		border: 2px solid #666;
		background: $c-white;
		transform:translateY(-50%);
	}
	&.radio-sm label:before {
		width: 16px;
		height: 16px;
		border-width: 1px;
	}
	&.radio-xs label:before {
		width: 12px;
		height: 12px;
		border-width: 1px;
	}
	input {
		&[type=radio]:checked+label:after,
		&[type=checkbox]:checked+label:after {
			content: "";
			position: absolute;
			top: 50%;
			left: 5px;
			border-radius: 64px;
			width: 10px;
			height: 10px;
			color: #666;
			transform:translateY(-50%);
			background-color: #666;
		}
	}
	&.radio-sm input {
		&[type=radio]:checked+label:after,
		&[type=checkbox]:checked+label:after {
//			top: 4px;
			left: 4px;
			width: 8px;
			height: 8px;
		}
	}
	&.radio-xs input {
		&[type=radio]:checked+label:after,
		&[type=checkbox]:checked+label:after {
//			top: 3px;
			left: 3px;
			width: 6px;
			height: 6px;
		}
	}
	&.square {
		label:before {
			border-radius: 2px;
		}
		input {
			&[type=radio]:checked+label:after,
			&[type=checkbox]:checked+label:after {
				border-radius: 2px;
			}
		}
	}
}


/* radio container */


/* radio border */


/* check radio icon */


/* alt style - square */


/* checkbox container */

.checkbox-custom {
	label {
		cursor: pointer;
		position: relative;
		padding-left: 32px;
		margin-right: 15px;
		margin-bottom: 5px;
		font-size: 15px;
	}
	&.checkbox-sm label {
		padding-left: 26px;
		font-size: 12px;
		font-weight: 400;
	}
	&.checkbox-xs label {
		padding-left: 20px;
		font-size: 11px;
		font-weight: 400;
	}
	label:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 22px;
		height: 21px;
		background-color: $c-white;
		border: 1px solid #666;
		border-width: 2px;
		border-radius: 1px;
	}
	&.checkbox-sm label:before {
		width: 16px;
		height: 15px;
		border-width: 1px;
	}
	&.checkbox-xs label:before {
		top: 1px;
		width: 12px;
		height: 12px;
		border-width: 1px;
	}
	input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			position: absolute;
			font-family: "FontAwesome";
			content: "\f00c";
			font-size: 12px;
			top: 4px;
			left: 4px;
			width: 0;
			height: 0;
			transform: rotate(-13deg);
		}
	}
	&.checkbox-sm input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			font-size: 10px;
			top: 2px;
			left: 2px;
		}
	}
	&.checkbox-xs input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			font-size: 10px;
			top: 1px;
			left: 0;
		}
	}
	&.fill {
		label {
			cursor: pointer;
			position: relative;
			padding-left: 32px;
			margin-right: 15px;
			margin-bottom: 5px;
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 2px;
				width: 22px;
				height: 21px;
				background-color: #666;
			}
		}
		input {
			&[type=checkbox]:checked+label:after,
			&[type=radio]:checked+label:after {
				position: absolute;
				font-family: "FontAwesome";
				content: "\f00c";
				font-size: 12px;
				top: 3px;
				left: 3px;
				width: 0;
				height: 0;
				color: $c-white !important;
				transform: rotate(-13deg);
			}
		}
	}
}


/* checkbox border */


/* checked state icon */


/* alt style - filled bg ".fill" */


/* CHECKBOX/RADIO CONTEXTUALS */

.radio-custom.radio-primary label:before,
.checkbox-custom.checkbox-primary label:before {
	border-color: $c-primary;
}

.radio-custom.radio-primary input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: $c-primary;
		color: $c-primary;
	}
}

.checkbox-custom {
	&.checkbox-primary input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: $c-primary;
			color: $c-primary;
		}
	}
	&.fill.checkbox-primary label:before {
		background-color: $c-primary;
	}
}

.radio-custom.radio-success label:before,
.checkbox-custom.checkbox-success label:before {
	border-color: $c-success;
}

.radio-custom.radio-success input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: $c-success;
		color: $c-success;
	}
}

.checkbox-custom {
	&.checkbox-success input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: $c-success;
			color: $c-success;
		}
	}
	&.fill.checkbox-success label:before {
		background-color: $c-success;
	}
}

.radio-custom.radio-info label:before,
.checkbox-custom.checkbox-info label:before {
	border-color: $c-info;
}

.radio-custom.radio-info input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: $c-info;
		color: $c-info;
	}
}

.checkbox-custom {
	&.checkbox-info input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: $c-info;
			color: $c-info;
		}
	}
	&.fill.checkbox-info label:before {
		background-color: $c-info;
	}
}

.radio-custom.radio-warning label:before,
.checkbox-custom.checkbox-warning label:before {
	border-color: $c-warning;
}

.radio-custom.radio-warning input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: $c-warning;
		color: $c-warning;
	}
}

.checkbox-custom {
	&.checkbox-warning input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: $c-warning;
			color: $c-warning;
		}
	}
	&.fill.checkbox-warning label:before {
		background-color: $c-warning;
	}
}

.radio-custom.radio-danger label:before,
.checkbox-custom.checkbox-danger label:before {
	border-color: $c-danger;
}

.radio-custom.radio-danger input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: $c-danger;
		color: $c-danger;
	}
}

.checkbox-custom {
	&.checkbox-danger input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: $c-danger;
			color: $c-danger;
		}
	}
	&.fill.checkbox-danger label:before {
		background-color: $c-danger;
	}
}

.radio-custom.radio-alert label:before,
.checkbox-custom.checkbox-alert label:before {
	border-color: #a992e2;
}

.radio-custom.radio-alert input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #a992e2;
		color: #a992e2;
	}
}

.checkbox-custom {
	&.checkbox-alert input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #a992e2;
			color: #a992e2;
		}
	}
	&.fill.checkbox-alert label:before {
		background-color: #a992e2;
	}
}

.radio-custom.radio-system label:before,
.checkbox-custom.checkbox-system label:before {
	border-color: #48c9a9;
}

.radio-custom.radio-system input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #48c9a9;
		color: #48c9a9;
	}
}

.checkbox-custom {
	&.checkbox-system input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #48c9a9;
			color: #48c9a9;
		}
	}
	&.fill.checkbox-system label:before {
		background-color: #48c9a9;
	}
}

.radio-custom.radio-dark label:before,
.checkbox-custom.checkbox-dark label:before {
	border-color: #484d61;
}

.radio-custom.radio-dark input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #484d61;
		color: #484d61;
	}
}

.checkbox-custom {
	&.checkbox-dark input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #484d61;
			color: #484d61;
		}
	}
	&.fill.checkbox-dark label:before {
		background-color: #484d61;
	}
}

.radio-custom.radio-light label:before,
.checkbox-custom.checkbox-light label:before {
	border-color: #eee;
}

.radio-custom.radio-light input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #666;
		color: #666 !important;
	}
}

.checkbox-custom {
	&.checkbox-light input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #666;
			color: #666 !important;
		}
	}
	&.fill.checkbox-light label:before {
		background-color: #eee;
	}
}

.radio-custom.radio-disabled label:before,
.checkbox-custom.checkbox-disabled label:before {
	border-color: #b9b9b9;
}

.radio-custom.radio-disabled input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #b9b9b9;
		color: #b9b9b9;
	}
}

.checkbox-custom {
	&.checkbox-disabled input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #b9b9b9;
			color: #b9b9b9;
		}
	}
	&.fill.checkbox-disabled label:before {
		background-color: #b9b9b9;
	}
}

.radio-custom.radio-pink label:before,
.checkbox-custom.checkbox-pink label:before {
	border-color: #f23a65;
}

.radio-custom.radio-pink input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #f23a65;
		color: #f23a65;
	}
}

.checkbox-custom {
	&.checkbox-pink input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #f23a65;
			color: #f23a65;
		}
	}
	&.fill.checkbox-pink label:before {
		background-color: #f23a65;
	}
}

.radio-custom.radio-yellow label:before,
.checkbox-custom.checkbox-yellow label:before {
	background: transparent;
	border-color: #FDCF00;
}

.radio-custom.radio-yellow input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: #FDCF00;
		color: #FDCF00;
	}
}

.checkbox-custom {
	&.checkbox-yellow input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: #FDCF00;
			color: #FDCF00;
		}
	}
	&.fill.checkbox-yellow label:before {
		background-color: #FDCF00;
	}
}

.radio-custom.radio-white label:before,
.checkbox-custom.checkbox-white label:before {
	border-color: $c-white;
	background-color: transparent;
}

.radio-custom.radio-white input {
	&[type=radio]:checked+label:after,
	&[type=checkbox]:checked+label:after {
		background-color: $c-white;
		color: $c-white;
	}
}

.checkbox-custom {
	&.checkbox-white input {
		&[type=checkbox]:checked+label:after,
		&[type=radio]:checked+label:after {
			background-color: $c-white;
			color: $c-white;
		}
	}
	&.fill.checkbox-white label:before {
		background-color: $c-white;
	}
}