/**
	* Ping default
	*
	*/
body{
	color: #2d2d2d;
	background-color: #efefef;
}

/**
	*	CSS module
	* Author : LOR Develop Solutions by nullAF
	* Version : 9.01.05 - 20241203
	*
	*/

body{
	margin: 0;
	border: 0;
	font-size: 18px;
	font-family: SGT, Tahoma;
}
div,
input,
select{
	border: 0;
	box-sizing: border-box;
}
img{ border: 0; }
a{ color: #2d2d2d; }
a:visited{ color: #1b1b1b; }
button{ all: unset; }

	.g{ display: grid; }
	.g3{ grid-template-columns: repeat(3, 1fr); }
	.gg{ grid-gap: 10px; }

	.xq{ display: flex; }
	.xqw{ display: flex; flex-wrap: wrap; }
	.xdw{ display: flex; flex-direction: column; }
	.x1{ flex: 1; }

		.js{ justify-content: flex-start; }
		.jm{ justify-content: center; }
		.je{ justify-content: flex-end; }
		.jb{ justify-content: space-between; }
		.ja{ justify-content: space-around; }
		.xh{ flex: .5; }

		.as{ align-items: flex-start; }
		.am{ align-items: center; }
		.ae{ align-items: flex-end; }
		.ab{ align-items: space-between; }
		.aa{ align-items: space-around; }

		.vs{ align-content: flex-start; }
		.vm{ align-content: center; }
		.ve{ align-content: flex-end; }
		.vb{ align-content: space-between; }
		.va{ align-content: space-around; }

		.ijs{ justify-self: flex-start; }
		.ijm{ justify-self: center; }
		.ije{ justify-self: flex-end; }

		.ias{ align-self: flex-start; }
		.iam{ align-self: center; }
		.iae{ align-self: flex-end; }

	.e{ position: relative; }
	.f{ position: fixed; }
	.a{ position: absolute; }

		.lF{ float: left; }
		.lC{ clear: left; }
		.rF{ float: right; }
		.rC{ clear: right; }
		.cC{ clear: both; }

	.t{ top: 0; }
	.l{ left: 0; }
	.b{ bottom: 0; }
	.r{ right: 0; }

	.hh{ height: 100%; }
	.hw{ width: 100%; }
	.hw5{ width: 50%; }
	.hw2{ width: 25%; }
	.hwv{ width: 100vw; }
	.hhv{ height: 100vh; }

	.of{ overflow: auto; }
	.ofx{ overflow-x: hidden; }
	.ofy{
		overflow-x: auto;
		overflow-y: hidden;
	}
	.ofn{ overflow: hidden; }

	.ttc{ text-transform: uppercase; }
	.tth{ text-transform: capitalize; }
	.t-c{ text-align: center; }
	.t-r{ text-align: right; }
	.tQ_{ font-weight: bold; }
	.tQ{ font-family: SGB !important; }

	.dsp-n{ display: none; }
	.o8{
		filter: alpha( opacity=80 );
		opacity: 0.8;
	}
	.ma_{ margin: auto; }
	.ma{
		left: 50%;
		-webkit-transform: translateX( -50% );
		-moz-transform: translateX( -50% );
		-ms-transform: translateX( -50% );
		-o-transform: translateX( -50% );
		transform: translateX( -50% );
	}
	.mv{
		top: 50%;
		-webkit-transform: translateY( -50% );
		-moz-transform: translateY( -50% );
		-ms-transform: translateY( -50% );
		-o-transform: translateY( -50% );
		transform: translateY( -50% );
	}
	.mamv{
		left: 50%;
		top: 50%;
		-webkit-transform: translate( -50%, -50% );
		-moz-transform: translate( -50%, -50% );
		-ms-transform: translate( -50%, -50% );
		-o-transform: translate( -50%, -50% );
		transform: translate( -50%, -50% );
	}

	.curH{ cursor: pointer; }
	.rnd-corC{
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-khtml-border-radius: 50%;
		border-radius: 50%;
	}
	.rnd-cor{
		-moz-border-radius: 1em;
		-webkit-border-radius: 1em;
		-khtml-border-radius: 1em;
		border-radius: 1em;
	}
	.rnd-corM{
		-moz-border-radius: 0.30em;
		-webkit-border-radius: 0.30em;
		-khtml-border-radius: 0.30em;
		border-radius: 0.30em;
	}
	
	.val1{ border: 2px solid #ec4646 !important; }

	.phc:focus::-webkit-input-placeholder{ color: transparent; }
	.phc:focus:-moz-placeholder{ color: transparent; } 
	.phc:focus::-moz-placeholder{ color: transparent; }
	.phc:focus:-ms-input-placeholder{ color: transparent; }

	#log{ max-height: 45%; }
		.logE{
			padding: 5px 10px;
			font-size: .8em;
			color: #fff;
			background: rgba(0,0,0,.7);
		}
	.err{
		width: calc( 100% - 40px );
		margin-top: 10px;
		padding: 10px 20px;
		color: #fff;
		letter-spacing: 2px;
		background-color: #F5646F;
	}
	#notif-box{
		top: 60px;
		max-width: 70%;
		padding: 10px 25px;
		font-size: 1.1em;
		color: #fff;
		letter-spacing: 2px;
		text-shadow: 0 1px 2px #2d2d2d;
		box-shadow: 0 2px 8px rgba( 10, 10, 10, .3);
		background-color: #7ac8f4;
	}
	
	.galg{
		display: grid;
		grid-gap: 5px;
		grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ));
		grid-auto-rows: 5px;
	}

	/** pre-set */
	#sbs-loader{
		font-size: 1em;
		color: #efefef;
		letter-spacing: 1px;
		text-shadow: 0 2px 3px transparent;
		background-color: transparent;

		transition: 
			background-color .5s,
			text-shadow .5s,
			font-size .5s;
	}
	#sbs-loader.ac{
		display: flex;
		font-size: 3em;
		letter-spacing: 4px;
		text-shadow: 0 2px 3px rgba(10, 10, 10, .9);
		background-color: rgba(10, 10, 10, .8);
	}
		
		.inwlb{
			position: relative;
		}
			.inwlb-p{
				top: 57%;
				color: #5b5b5b;
				margin-left: 15px;
				line-height: 14px;
				transition:
					top .2s,
					margin-left .2s,
					font-size .2s,
					background-color .2s;
			}
			.inwlb.isact .inwlb-p{
				top: 8px;
				margin-left: 5px;
				padding: 0 5px;
				font-size: .8em;
				background-color: #d3d3d3;
			}
			.inwlb-i:focus + .inwlb-p{
				background-color: #efefef;
			}
			.inwlb-i{
				font-size: 1.1em;
			}

		.bttn{
			color: #efefef;
			background-color: #3e3e3e;
		}
		.bttn:focus,
		.bttn:hover{
			cursor: pointer;
			background-color: #616161;
		}

		.bttn.ac{
			background-color: #aa2525;
		}
		.bttn.ac:focus,
		.bttn.ac:hover{
			background-color: #cb2525;
		}
			.bttn.ac .b-m{
				display: none;
			}
			.bttn.ac .b-s{
				display: block;
			}

.sbofx-tooltext{
	cursor: pointer;
}
.sbo-tooltip{
	max-width: 250px;
	padding: 10px 15px;
	border: 2px solid #b2b2b2;
	box-shadow: 0 7px 8px -9px rgba(10, 10, 10, .9);
	background-color: #efefef;
}
.sbo-break{
	width: 100%;
	height: 1px;
}

/* FONT RELATED */
@font-face{
	font-family: SGT;
	src: url('font/seguisb.ttf');
}
fsgt,
.fsgt{
	font-family: 'SGT', Tahoma, sans-serif;
}
@font-face{
	font-family: SGB;
	src: url('font/segoeuib.ttf');
}
fsgb,
.fsgb{
	font-family: 'SGB', Tahoma, sans-serif;
}
@font-face{
	font-family: LCD;
	src: url('font/lucon.ttf');
}
flcd,
.flcd{
	font-family: 'LCD', 'Lucida Console', sans-serif;
}

/* ICONS */
/** arrow right */
.ic-gg-cr {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs,1));
	width: 22px;
	height: 22px;
	border: 2px solid transparent;
	border-radius: 100px;
}
.ic-gg-cr::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid;
	border-right: 2px solid;
	transform: rotate(-45deg);
	right: 6px;
	top: 4px;
}

/** chev arrow */
.ic-gg-ard {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs,1)) rotate(180deg);
	width: 22px;
	height: 22px;
	border: 2px solid transparent;
	border-radius: 100px;

	transition: transform .1s;
}
.ic-gg-ard::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 9px;
	height: 9px;
	border-bottom: 2px solid;
	border-right: 2px solid;
	transform: rotate(45deg);
	left: 4px;
	top: 2px;
}

/** plus icon */
.ic-gg-mp,
.ic-gg-mp::after {
	display: block;
	box-sizing: border-box;
	background: currentColor;
	border-radius: 10px;
}
.ic-gg-mp {
	margin-top: 1px;
	position: relative;
	transform: scale(var(--ggs,1));
	width: 12px;
	height: 2px;

	transition: transform .3s;
}
.ic-gg-mp::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 12px;
	top: -5px;
	left: 5px;
}

/** round left arrow */
.ic-gg-rla {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 40px;
	height: 32px;
	border: 3px solid;
	transform: scale(var(--ggs,1));
	border-radius: 22px;
}
.ic-gg-rla::after,
.ic-gg-rla::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	left: 6px;
}
.ic-gg-rla::after {
	width: 10px;
	height: 10px;
	border-bottom: 3px solid;
	border-left: 3px solid;
	transform: rotate(45deg);
	bottom: 8px;
	animation-name: rlaAnim;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.ic-gg-rla::before {
	width: 11px;
	height: 4px;
	bottom: 11px;
	background: currentColor;
	animation-name: rlaTAnim;
	animation-duration: 1s;
	animation-iteration-count: infinite;
} 

/** history/ reorder */
.ic-gg-hs {
	top: 5px;
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs,1));
	width: 14px;
	height: 2px;
	border-radius: 3px;
	background: currentColor
}
.ic-gg-hs::after,
.ic-gg-hs::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border-radius: 3px
}
.ic-gg-hs::before {
	border: 2px solid;
	width: 6px;
	height: 6px;
	left: 10px;
	top: -2px
}
.ic-gg-hs::after {
	top: -20px;
	left: 0;
	width: 14px;
	height: 2px;
	opacity: .5;
	background: currentColor;
	box-shadow:
		0 23px 0 0,
		0 26px 0 0,
		0 29px 0 0
} 

/** pen */
.ic-gg-p {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: rotate(-45deg) scale(var(--ggs,1));
	width: 10px;
	height: 3px;
	border-right: 2px solid transparent;
	box-shadow: 0 0 0 2px;
	border-top-right-radius: 1px;
	border-bottom-right-radius: 1px;
	margin-right: -2px
}
.ic-gg-p::after,
.ic-gg-p::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute
}
.ic-gg-p::before {
	background: currentColor;
	border-left: 0;
	right: -6px;
	width: 1px;
	height: 3px;
	border-radius: 1px;
	top: 0
}
.ic-gg-p::after {
	width: 8px;
	height: 3px;
	border-top: 3px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: 5px solid;
	left: -11px;
	top: -2px
}

/** trash */
.ic-gg-tr {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs,1));
	width: 8px;
	height: 9px;
	border: 2px solid transparent;
	box-shadow:
		0 0 0 2px,
		inset -1px 0 0,
		inset 1px 0 0;
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;
	margin-top: 4px
}
.ic-gg-tr::after,
.ic-gg-tr::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute
}
.ic-gg-tr::after {
	background: currentColor;
	border-radius: 3px;
	width: 14px;
	height: 2px;
	top: -4px;
	left: -5px
}
.ic-gg-tr::before {
	width: 8px;
	height: 4px;
	border: 1px solid;
	border-bottom: transparent;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	top: -7px;
	left: -2px
}
/** list remove */
.ic-gg-lx{
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs,1));
	width: 12px;
	height: 6px;
	border-top: 0 solid transparent;
	border-bottom: 2px solid transparent;
	box-shadow:
		inset 0 -2px 0,
		-2px 4px 0 -2px,
		0 -2px 0 0
}
.ic-gg-lx::after,
.ic-gg-lx::before{
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 2px;
	background: currentColor;
	transform: rotate(-45deg);
	top: 8px;
	right: -5px
}
.ic-gg-lx::before{
	width: 2px;
	height: 8px;
	top: 5px;
	right: -2px
}
/** list add */
.ic-gg-la{
	left: -2px;
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs,1));
	width: 12px;
	height: 6px;
	border-top: 0 solid transparent;
	border-bottom: 2px solid transparent;
	box-shadow:
		inset 0 -2px 0,
		-2px 4px 0 -2px,
		0 -2px 0 0
}

.ic-gg-la::after,
.ic-gg-la::before{
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 8px;
	height: 2px;
	background: currentColor;
	top: 6px;
	right: -6px
}
.ic-gg-la::before{
	width: 2px;
	height: 8px;
	top: 3px;
	right: -3px
} 

/** information */
.sbic-info {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, .7));
	width: 20px;
	height: 20px;
	border: 2px solid;
	border-radius: 40px;
}
.sbic-info::after,
.sbic-info::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	border-radius: 3px;
	width: 2px;
	background: currentColor;
	left: 7px;
}
.sbic-info::after {
	bottom: 2px;
	height: 8px;
}
.sbic-info::before {
	height: 2px;
	top: 2px;
}

/** hexagon icon */
.sbic-hex,
.sbic-hex::after,
.sbic-hex::before {
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.sbic-hex {
  position: relative;
  transform: scale(var(--ggs, .8));
}
.sbic-hex::after,
.sbic-hex::before {
  content: "";
  position: absolute;
  left: -3px;
}
.sbic-hex::before {
  transform: rotate(60deg);
}
.sbic-hex::after {
  transform: rotate(-60deg);
}


/* ANIMATION */
@keyframes rlaAnim {
	0%{left: 20px;}
	100%{left: 6px;}
}
@keyframes rlaTAnim {
	0%{left: 20px;width: 11px;}
	80%{left: 8px;width: 17px;}
	100%{left: 6px;width: 17px;}
}