::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
}
input::placeholder {
	color: #e6e6e6 !important;
}
html { scroll-behavior: smooth;}
body {  background: #4c4c4c; margin:0; padding: 0; box-sizing: border-box;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* @note lib */

/* @note Size  -----*/
.wh100 {
	height: 100%;
	width: 100%;
  }
  .width-100 {
	width: 100%;
  }
  .height-100 {
	height: 100%;
  }
  /* @note Font  -----*/
  .font_size-14 { font-size: 14px; }
  .font_size-16 { font-size: 16px; }
  .font_size-18 { font-size: 18px; }
  .font_size-20 { font-size: 20px; }
  
  .fontweight-bold {font-weight: bold;}
  
  /* @note Hinh anh */
 
  
  
  /* @note Flexbox  ----------------*/
  .flexbox { display: flex; }
	.flexbox>* { display: block; }
  .flexbox_direction-column { flex-direction: column; }
  .flexbox_wrap { flex-wrap: wrap;}
  
  .flexbox_justifycontent-center { justify-content: center;}
  .flexbox_justifycontent-flexend { justify-content: flex-end;}
  .flexbox_justifycontent-flexstart { justify-content: flex-start;}
  .flexbox_justifycontent-spacebetween { justify-content: space-between;}
  .flexbox_justifycontent-spacearound { justify-content: space-around;}
  
  .flexbox_alignitems-center { align-items: center; }
  .flexbox_alignitems-stretch { align-items: stretch; }
  .flexbox_alignitems-start { align-items: start; }
  .flexbox_alignitems-end { align-items: end; }
  .flexbox_alignitems-baseline { align-items: baseline; }
  
  
  /*flexbox con*/
  .flexbox_grow-1 { flex-grow: 1; }
  .flexbox_grow-2 { flex-grow: 2; }
  .flexbox_grow-3 { flex-grow: 3; }
  .flexbox_grow-4 { flex-grow: 4; }
  .flexbox_grow-5 { flex-grow: 5; }
  .flexbox_grow-6 { flex-grow: 6; }
  .flexbox_grow-7 { flex-grow: 7; }
  .flexbox_grow-8 { flex-grow: 8; }
  .flexbox_grow-9 { flex-grow: 9; }
  .flexbox_grow-10 { flex-grow: 10; }
  
  .flexbox_shrink-1 { flex-shrink: 1; }
  .flexbox_shrink-2 { flex-shrink: 2; }
  .flexbox_shrink-3 { flex-shrink: 3; }
  .flexbox_shrink-4 { flex-shrink: 4; }
  .flexbox_shrink-5 { flex-shrink: 5; }
  .flexbox_shrink-6 { flex-shrink: 6; }
  .flexbox_shrink-7 { flex-shrink: 7; }
  .flexbox_shrink-8 { flex-shrink: 8; }
  .flexbox_shrink-9 { flex-shrink: 9; }
  .flexbox_shrink-10 { flex-shrink: 10; }
  
  .flexbox_order-1 { order: 1;}
  .flexbox_order-2 { order: 2;}
  .flexbox_order-3 { order: 3;}
  .flexbox_order-4 { order: 4;}
  .flexbox_order-5 { order: 5;}
  .flexbox_order-6 { order: 6;}
  .flexbox_order-7 { order: 7;}
  .flexbox_order-8 { order: 8;}
  .flexbox_order-9 { order: 9;}
  .flexbox_order-10 { order: 10;}
  .flexbox_order-11 { order: 11;}
  .flexbox_order-12 { order: 12;}
  
  .flexbox_alignself-center { align-items: center; }
  .flexbox_alignself-stretch { align-items: stretch; }
  .flexbox_alignself-start { align-items: start; }
  .flexbox_alignself-end { align-items: end; }
  .flexbox_alignself-baseline { align-items: baseline; }
  
  /* @note padding va margin ----------------*/
  .paddingleft-5 {
	padding-left: 5px !important;
  }
  .paddingleft-10 {
	padding-left: 10px !important;
  }
  .paddingleft-15 {
	padding-left: 15px !important;
  }
  .paddingright-5 {
	padding-right: 5px !important;
  }
  .paddingright-10 {
	padding-right: 10px !important;
  }
  .paddingright-15 {
	padding-right: 15px !important;
  }
  .paddingtop-5 {
	padding-top: 5px !important;
  }
  .paddingtop-10 {
	padding-top: 10px !important;
  }
  .marginleft-15 {
	margin-left: 15px;
  }
  .marginright-5 {
	margin-right: 5px !important;
  }
  .marginright-10 {
	margin-right: 10px !important;
  }
  .marginright-15 {
	margin-right: 15px !important;
  }
  .margintop-5 {
	margin-top: 5px !important;
  }
  .margintop-10 {
	margin-top: 10px !important;
  }
  .margintop-15 {
	margin-top: 15px !important;
  }
  .marginbottom-5 {
	margin-bottom: 5px !important;
  }
  .marginbottom-10 {
	margin-bottom: 10px !important;
  }
  .marginbottom-15 {
	margin-bottom: 15px !important;
  }

/* @note Main cover */

.mainform {
	position: relative;
	width: 300px;
	height:520px;
	background: linear-gradient(60deg, indigo,violet , #3399ff, green, #f0ad4e, orange, red);
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}
.mainform::before {
	position: absolute;
	content:'';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background: #636363; */
	margin: 2px;
	border-radius: 10px;

	background: rgba(99,99,99,0.8);
	/* backdrop-filter: blur(4px);  */
}

.formcover {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: 10px;
/* background: blue;	 */


	display: flex;
	flex-direction: column;
	align-items: center;
	
}
.formcover .logo {
	width: 150px;
	height: 150px;
	/* background: yellow; */

}


.formcover .system {
	position: relative;
	margin-top: 15px;
	width: 260px;
	height: 36px;
	justify-content: space-around;
	align-items: center;
	background: #a1a09e;
	border-radius: 5px;
}
.formcover .system span {
	text-align: center;
	width: 120px;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
	
	border-radius: 5px;
}
.formcover .system span.active {
	background: #e6e6e6;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}


.formcover .textinput {
	height: 34px;
	width: 240px;
	
	margin-top: 15px;
	align-items: center;
	border-bottom: 1px solid #a1a09e;
}
.formcover .textinput input {
	flex-grow: 1;
	margin-right: 10px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 16px;
	border: none;
	outline: none !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none !important;
	color: #F2941E;
	overflow: hidden;
}
.formcover .textinput .iconinput { 
	width: 26px;
	height: 26px;
	object-fit: contain;
	margin-left: 5px;
	margin-right: 5px;
}

/* @note check box */
.formcover  .checkboxinput {
	display: flex;
	align-items: stretch;
	width: 215px;
	margin-top: 15px;
}
.formcover  .checkboxinput input[type="checkbox"] { display: none; }
.formcover  .checkboxinput label {
	position: relative;
	display: inline-block;
	color: #d4d3d3;
	font-size: 16px;
	cursor: pointer;
}
.formcover  .checkboxinput label span {
	position: relative;
	display: inline-block;

	top: 5px;
	width: 20px;
	height: 20px;
	border: 2px solid #888;
	margin-left: 12px;
	margin-right: 10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.formcover  .checkboxinput input[type="checkbox"]:checked+label span:before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	bottom: 3px;
	background: #5bc0de;
	animation: animate 3s linear infinite;
}
.formcover  .checkboxinput input[type="checkbox"]:checked+label  {
	color: #71b0e2 !important;
}

@keyframes animate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* @note btn login */
.formcover  .btngroup {
	margin-top: 20px;
	width: 250px;
	justify-content: space-around;
	align-items: center;
}
.formcover  .btngroup .btn {
	text-align: center;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.formcover  .btnlogin {
	width: 120px;
	background: linear-gradient(45deg,#00ca4e,#00c6ff);
}
.formcover  .btnlogin:hover {
	background: linear-gradient(45deg,#00c6ff, #00ca4e);
}
.formcover  .btnforget {
	width: 110px;
	background: #a1a09e;
}
.formcover  .btnforget:hover {
	background: #FE017A;
}
/* @note background */
 .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	
}

#background2  { z-index: -2;}
#particles-js {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* @note xu ly text thanh password */
@font-face {
	font-family: 'PasswordDots';
	src: url('text-security-disc.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
input.password {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
font-size: 16px !important;
}
input.password:valid {
font-family: 'PasswordDots' !important;
font-size: 30px !important;
}

/* @note logo waiting */
.logo.active {
	-webkit-animation:spin 2s linear infinite;
	-moz-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 
	100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
	100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
	100% { 
		-webkit-transform: rotate(360deg); 
		transform:rotate(360deg); 
	} 
}