:root {
	--danger: rgb(220, 53, 69);
	--danger-lite: rgba(220, 53, 69, 0.8);
	--warning: rgb(255, 193, 7);
	--success: rgb(40, 167, 69);
	--info: rgb(23, 162, 184);
	--secondary: rgb(108, 117, 125);
	--primary: rgb(0, 123, 255);
}

body {
	background: var(--background-color);
	color: var(--text-color);
}

@media screen and (min-height: 650px) {
	.login-theme-switch {
		position: fixed;
		bottom: 95px;
		right: 0px;
	}
}

.change_grps_sel {
	margin-left: 20px;
	margin-right: 12px !important;
}

.change_grps_sel,
.change_manage_sel {
	outline: 2px solid var(--info) !important;
	border-radius: 12px !important;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-color0) var(--scrollbar-color1);
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

*::-webkit-scrollbar-track {
	border-radius: 20px;
	background-color: var(--scrollbar-color1);
	border: 3px solid var(--scrollbar-color1);
	cursor: pointer !important;
}

*::-webkit-scrollbar-track:hover {
	background-color: var(--scrollbar-color2);
}

*::-webkit-scrollbar-track:active {
	background-color: var(--scrollbar-color3);
}

*::-webkit-scrollbar-thumb {
	border-radius: 12px;
	background-color: var(--scrollbar-color0);
	border: 2px solid var(--scrollbar-color1);
}

*::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-color4);
}

*::-webkit-scrollbar-thumb:active {
	background-color: var(--scrollbar-color5);
}

summary {
	font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
		"Arial Narrow Bold", sans-serif;
	font-size: 25px;
}

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

@media screen and (max-height: 650px) {
	.login-theme-switch {
		position: fixed;
		top: 25px;
		right: 0px;
	}
}

.mt-1 {
	width: 100%;
	margin-top: 0.25rem;
}

.cb {
	-ms-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	font-size: large;
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

@media only screen and (max-width: 825px) {
	.cb {
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		font-size: medium;
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
}

@media only screen and (max-width: 450px) {
	.cb {
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		font-size: small;
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
}

.cb label {
	display: inline-block;
}

*:focus {
	outline: none;
}

*:focus-visible {
	outline: 1px solid var(--outline) !important;
	outline-offset: 3px;
}

.switch-btn {
	font-size: x-large;
	background: var(--background-color);
	color: var(--border-color);
	border: 0px;
	box-shadow: 0px 0px 0px 2px var(--border-color);
	border-color: var(--border-color);
	border-top-left-radius: 5px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 0px;
	cursor: pointer;
}

.switch-btn-nav {
	font-size: x-large;
	cursor: pointer;
}

.a404 {
	position: fixed;
	left: 200px;
	font-weight: 900;
	font-size: 200px;
	font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
		"Arial Narrow Bold", sans-serif;
}

.f404 {
	position: fixed;
	left: 200px;
	top: 400px;
	font-size: 35px;
	font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
		"Arial Narrow Bold", sans-serif;
}

.d404 {
	position: fixed;
	left: 200px;
	text-decoration: underline;
	cursor: pointer;
	top: 460px;
	font-size: 25px;
	font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
		"Arial Narrow Bold", sans-serif;
}

@media only screen and (max-width: 825px) {
	.a404 {
		position: fixed;
		left: 20px;
		font-weight: 900;
		top: -80px;
		font-size: 125px;
		font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
			"Arial Narrow Bold", sans-serif;
	}

	.f404 {
		position: fixed;
		left: 20px;
		top: 190px;
		font-size: 30px;
		font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
			"Arial Narrow Bold", sans-serif;
	}

	.d404 {
		position: fixed;
		left: 20px;
		text-decoration: underline;
		cursor: pointer;
		top: 230px;
		font-size: 25px;
		font-family: Verdana, Geneva, Tahoma, Impact, Haettenschweiler,
			"Arial Narrow Bold", sans-serif;
	}
}

.switch-btn:hover {
	color: var(--border-color-hover);
	box-shadow: 0px 0px 0px 2px var(--border-color-hover);
}

.switch-btn:active {
	color: var(--border-color-active);
	box-shadow: 0px 0px 0px 2px var(--border-color-active);
}

.login-logo-container {
	width: 100%;
	height: 150px;
}

.bold {
	font-weight: bold !important;
}

.ns {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.login-logo {
	height: 100%;
	background-size: 100% 100%;
	width: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.login-form-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	margin-top: 20vh;
	position: fixed;
	left: 0;
	right: 0;
	padding: 5px;
}

@media only screen and (max-width: 600px) {
	.login-form-container {
		margin-top: 8vh;
	}
}

.boxclose {
	position: absolute;
	cursor: pointer;
	right: 22px;
	top: 17px;
	z-index: 10;
}

.videoname {
	width: 100% !important;
	text-align: center;
}

.boxclose:before {
	content: "×";
}

@media only screen and (max-width: 800px) {
	.container-a {
		display: grid;
		grid-template-columns: 12fr;
		gap: 0px 0px;
		margin-bottom: 10px;
	}

	.m-e-s {
		margin-right: 7px;
	}

	.m-s-s {
		margin-left: 7px !important;
	}

	.alm {
		margin-left: 7px !important;
		margin-right: 7px !important;
	}

	.m-s-ss {
		margin-left: 7px !important;
	}

	.m-e-ss {
		margin-right: 7px !important;
	}
}

@media only screen and (min-width: 800px) {
	.preview_container {
		width: 100%;
		justify-content: center;
	}

	.preview_container_small {
		justify-content: right !important;
	}

	.image_container,
	.vid_container {
		max-width: 650px;
	}

	.image_container_small,
	.vid_container_small {
		max-width: 500px !important;
	}

	.m-e-s {
		margin-right: 7px;
	}

	.m-s-s {
		margin-left: 7px !important;
	}

	.m-s-ss {
		margin-left: 4px !important;
	}

	.m-e-ss {
		margin-right: 4px !important;
	}

	.container-a {
		display: grid;
		grid-auto-columns: 1fr;
		grid-template-columns: 1fr 1fr;
		gap: 0px 0px;
		margin-bottom: 7px;
	}
}

@media only screen and (max-width: 450px) {
	.login-form-container {
		margin-top: 3vh;
	}
}

.login-header {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif, Tahoma, sans-serif;
	font-size: 30px;
	font-weight: bold;
}

.semi_borders {
	margin-top: -5px !important;
}

.w100 {
	width: 100% !important;
}

.w100 > th {
	width: 100% !important;
}

.login-form {
	margin-left: 5px;
	margin-right: 5px;
}

.login-input {
	margin-top: 20px;
	margin-left: 5px;
	margin-right: 5px;
}

.input-block {
	position: relative;
}

.m-20 {
	margin-top: 20px;
}

.m-10 {
	margin-top: 10px;
}

.p-10 {
	padding: 10px;
}

.pt-30 {
	padding-top: 30px;
}

.pb-5 {
	padding-bottom: 5px;
}

.bless,
.bless > * {
	border-radius: 0px !important;
}

.mbless {
	margin-bottom: -4px !important;
}

.mall-10 {
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
}

.m-5 {
	margin-top: 5px;
}

.input-button {
	margin-top: 20px;
}

.input-reg {
	margin-top: 15px;
	text-align: center;
}

table.pretty_table {
	white-space: nowrap;
	background-color: var(--modal-background-active);
	border-collapse: separate;
	border-spacing: 6px 6px;
	border: 0px solid var(--border-color);
	border-radius: 6px;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
		"Lucida Sans", Arial, sans-serif;
}

table.pretty_table tr {
	border-collapse: collapse;
	border: 1px solid var(--border-color);
}

.form-inline {
	display: inline-block;
	width: 100%;
}

.left-form-1 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	margin-left: 12px !important;
	border: 4px solid var(--modal-background-active);
	float: left;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 14px;
	padding-bottom: 14px;
	font-weight: bold;
	border: 4px solid var(--modal-background-active);
	border-radius: 7px;
	box-sizing: border-box;
	cursor: pointer;
	outline: 2px;
}

@media only screen and (max-width: 800px) {
	.left-form {
		width: 100%;
		float: left;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: bold;
		border: 4px solid var(--modal-background-active);
		border-radius: 7px;
		box-sizing: border-box;
		cursor: pointer;
		outline: 2px;
		margin-bottom: 4px;
	}

	.form_pretty {
		display: block;
		float: right;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 1rem;
		box-sizing: border-box;
		background-color: var(--background-color);
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
		border: 4px solid var(--modal-background-active);
		border-radius: 7px;
		box-sizing: border-box;
		width: 100%;
		margin-bottom: 1px;
	}
}

.ms-10 {
	margin-left: 10px;
}

.mb-0 {
	margin-bottom: 0px !important;
}

@media only screen and (min-width: 800px) {
	.left-form {
		width: 20%;
		float: left;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 14px;
		padding-bottom: 14px;
		font-weight: bold;
		border: 4px solid var(--modal-background-active);
		border-radius: 7px;
		box-sizing: border-box;
		cursor: pointer;
		outline: 2px;
	}

	.form_pretty {
		display: block;
		float: right;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 1rem;
		box-sizing: border-box;
		background-color: var(--background-color);
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
		border: 4px solid var(--modal-background-active);
		border-radius: 7px;
		box-sizing: border-box;
		width: calc(80% - 5px);
		margin-bottom: 1px;
	}
}

.left-form.toggled-online {
	box-shadow: 0px 0px 3px 0.5px #509b82;
}

.left-form.toggled-offline {
	box-shadow: 0px 0px 3px 0.5px #9b5050;
}

.pretty-search {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-color);
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 12px;
	padding-bottom: 12px;
	border: 4px solid var(--modal-background-active);
	border-radius: 7px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 6px;
}

table.pretty_table th {
	background-color: var(--modal-background-active-hover);
	text-align: left;
	border-collapse: collapse;
	border-radius: 4px;
	padding: 6px;
	padding-top: 4px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding-bottom: 4px;
	border: 0px solid var(--border-color);
}

table.pretty_table td {
	background-color: var(--background-color-flow);
	border-collapse: collapse;
	border-radius: 4px;
	padding: 6px;
	border: 0px solid var(--border-color);
}

.pagination {
	float: right;
	padding: 0px;
	margin: 0px;
	margin-top: 6px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pagination li {
	cursor: pointer;
	text-decoration: none !important;
	border-radius: 6px;
	display: inline-block;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 6px;
	border: 4px solid var(--modal-background-active);
	background-color: var(--background-color-flow);
	margin-bottom: 6px;
}

.pagination li.active {
	border: 4px solid var(--outline);
}

.pagination li.disabled {
	cursor: default !important;
}

.wait {
	color: var(--wait);
}

.pagination li.disabled a {
	cursor: default !important;
}

.pagination li a {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
		"Lucida Sans", Arial, sans-serif;
	text-decoration: none;
	color: var(--text-color);
	font-weight: bold;
}

.pagination_flat {
	margin: 5px !important;
	margin-bottom: 0px !important;
}

.do_copy_wialon,
.do_regen_wialon {
	width: 100%;
	border-color: -internal-light-dark(
		rgb(118, 118, 118),
		rgb(54, 54, 54)
	) !important;
	color: -internal-light-dark(black, white);
	border-style: solid;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 4px;
	border-width: 1px;
	cursor: pointer;
}

.do_copy_wialon:hover,
.do_regen_wialon:hover {
	background-color: var(--background-color);
	border-width: 1px;
	border-color: -internal-light-dark(
		rgb(118, 118, 118),
		rgb(54, 54, 54)
	) !important;
}

table.pretty_table td > button {
	border-color: -internal-light-dark(
		rgb(118, 118, 118),
		rgb(54, 54, 54)
	) !important;
	color: -internal-light-dark(black, white);
	border-style: solid;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 4px;
	border-width: 1px;
}

table.pretty_table td > button:hover {
	background-color: var(--background-color);
	border-width: 1px;
	border-color: -internal-light-dark(
		rgb(118, 118, 118),
		rgb(54, 54, 54)
	) !important;
}

table.pretty_table td > a {
	border-color: -internal-light-dark(
		rgb(118, 118, 118),
		rgb(54, 54, 54)
	) !important;
	color: -internal-light-dark(black, white);
	border-style: solid;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 4px;
	border-width: 1px;
}

table.pretty_table td > a:hover {
	background-color: var(--background-color);
	border-width: 1px;
	border-color: -internal-light-dark(
		rgb(118, 118, 118),
		rgb(54, 54, 54)
	) !important;
}

.input-reg a {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-decoration: underline;
	font-weight: bold;
	cursor: pointer;
	border-radius: 7px;
	padding: 2px;
}

.input-button > button {
	width: 100%;
	height: 48px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem;
	border: 2px solid var(--border-color);
	border-radius: 7px;
	cursor: pointer;
	background-color: var(--background-color);
	color: var(--text-color);
}

.input-button > button:hover {
	background-color: var(--background-color-hover);
}

.input-button > button:active {
	background-color: var(--background-color-active);
}

.input-block input {
	color: var(--border-color);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-color);
	padding: 12px;
	border: 2px solid var(--border-color);
	border-radius: 7px;
}

.placeholder-data {
	position: absolute;
	margin: 17px 0;
	padding: 0 4px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--border-color-hover);
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	top: 0;
	left: 12px;
	transition: all 0.2s;
	transform-origin: 0% 0%;
	background: none;
	pointer-events: none;
	transform: scale(0.8) translateY(-30px);
	background: var(--background-color);
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.input-block select {
	color: var(--border-color);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-color);
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 12px;
	padding-bottom: 10px;
	border: 2px solid var(--border-color);
	border-radius: 7px;
}

.m03 {
	padding: 0.5rem;
}

#data_select_files {
	color: var(--border-color);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-color);
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 11px;
	padding-bottom: 10px;
	border: 2px solid var(--border-color);
	border-radius: 7px;
}

.placeholder-select {
	position: absolute;
	margin: 17px 0;
	padding: 0 4px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--border-color-hover);
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	top: 0;
	left: 12px;
	transition: all 0.2s;
	transform-origin: 0% 0%;
	background: none;
	pointer-events: none;
	transform: scale(0.8) translateY(-30px);
	background: var(--background-color);
}

.input-block .placeholder {
	position: absolute;
	margin: 17px 0;
	padding: 0 4px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--border-color-hover);
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	top: 0;
	left: 12px;
	transition: all 0.2s;
	transform-origin: 0% 0%;
	background: none;
	pointer-events: none;
}

.input-block .placeholder_focused {
	position: absolute;
	margin: 17px 0;
	padding: 0 4px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--border-color-hover);
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	top: 0;
	left: 12px;
	transition: all 0.2s;
	transform-origin: 0% 0%;
	pointer-events: none;
	transform: scale(0.8) translateY(-30px);
	background: var(--background-color);
}

.hid {
	display: none;
}

.input-block img.capthca {
	position: absolute;
	top: 0;
	right: 0px;
	height: 100%;
	border: 2px solid var(--border-color);
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	box-sizing: border-box;
}

.input-block input:valid + .placeholder,
.input-block input:focus + .placeholder {
	transform: scale(0.8) translateY(-30px);
	background: var(--background-color);
}

.input-block input:focus {
	color: var(--border-color-active);
	border-color: var(--border-color-active);
}

.input-block :focus + .placeholder {
	color: var(--border-color-active);
}

.modal {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--modal-background) !important;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
}

.modal-max {
	box-shadow: 0px 0px 2px 2px var(--border-color-hover);
	border-radius: 10px;
	background-color: var(--background-color);
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 5vh;
}

.modal-content,
.modal-content.xl,
.modal-content.xxl {
	box-shadow: 0px 0px 2px 2px var(--border-color-hover);
	border-radius: 10px;
	background-color: var(--background-color);
	margin-left: auto;
	margin-right: auto;
	margin-top: 10vh;
	width: -moz-fit-content;
	width: fit-content;
	min-width: 100px;
	max-width: 500px;
}

@media only screen and (max-width: 1600px) {
	#ddevs > * {
		font-size: small !important;
	}

	.gsig {
		font-size: 18px !important;
	}
}

@media only screen and (max-width: 800px) {
	.no_mb {
		margin-bottom: 0px !important;
	}

	.do_copy_wialon,
	.do_regen_wialon {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}

	.m10-800 {
		margin-top: 10px;
	}

	.pagination {
		float: left;
	}

	.pagination li {
		margin-left: 0px;
		margin-right: 6px;
	}
}

@media only screen and (min-width: 800px) {
	.no_mb {
		margin-bottom: 12px !important;
	}

	.add_dev_name {
		flex: 1 1 100%;
		order: 1;
	}

	.add_dev_imei {
		flex: 1 1 100%;
		order: 2;
	}

	.add_dev_pass {
		flex: 1 1 100%;
		order: 3;
	}

	.cur_pass {
		flex: 1 1 100%;
		order: 1;
	}

	.set_all_ts {
		flex: 1 1 50%;
		order: 1;
	}

	.set_cached_ts {
		flex: 1 1 50%;
		order: 2;
	}

	.set_all_ts div {
		margin-right: 5px;
	}

	.set_cached_ts div {
		margin-left: 5px;
	}

	.set_realname {
		flex: 1 1 100%;
		order: 2;
	}

	.set_phone {
		flex: 1 1 100%;
		order: 3;
	}

	.set_email {
		flex: 1 1 100%;
		order: 4;
	}

	.set_company {
		flex: 1 1 100%;
		order: 5;
	}

	.set_wialon {
		flex: 1 1 100%;
		order: 8;
	}

	.wialon_token {
		flex: 1 1 100%;
		order: 9;
	}

	.wialon_token_copy {
		flex: 1 1 70%;
		order: 12;
	}

	.do_copy_wialon {
		margin-left: 7px;
	}

	.wialon_regen {
		flex: 1 1 30%;
		order: 11;
	}

	.wialon_token_copy_text {
		flex: 1 1 100%;
		order: 10;
	}

	.set_pass {
		flex: 1 1 50%;
		order: 6;
	}

	.set_pass div {
		margin-right: 5px;
	}

	.set_pass_confirm {
		flex: 1 1 50%;
		order: 7;
	}

	.set_pass_confirm div {
		margin-left: 5px;
	}

	.set_pass_help {
		flex: 1 1 100%;
		order: 8;
	}

	.inputs_fields {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.modal-content.xl {
		width: 750px;
		max-width: 750px;
	}

	.modal-content.xxl {
		width: 750px;
		max-width: 750px;
	}

	.modal-content.max {
		width: 100vw !important;
		max-width: 750px;
	}

	.new_username {
		flex: 1 1 50%;
		order: 1;
	}

	.new_group {
		flex: 1 1 100%;
		order: 1;
	}

	.new_username div {
		margin-right: 5px;
	}

	.new_password {
		flex: 1 1 50%;
		order: 3;
	}

	.new_password div {
		margin-right: 5px;
	}

	.new_password_conf {
		flex: 1 1 50%;
		order: 4;
	}

	.new_password_conf div {
		margin-left: 5px;
	}

	.new_realname {
		flex: 1 1 50%;
		order: 2;
	}

	.new_realname div {
		margin-left: 5px;
	}

	.new_company {
		order: 5;
		flex: 1 1 50%;
	}

	.new_company div {
		margin-right: 5px;
	}

	.new_tel {
		order: 6;
		flex: 1 1 50%;
	}

	.new_tel div {
		margin-left: 5px;
	}

	.new_email {
		order: 7;
		flex: 1 1 100%;
	}

	.new_email_half {
		order: 7;
		flex: 1 1 50%;
	}

	.new_type {
		order: 8;
		flex: 1 1 50%;
	}

	.new_imei {
		order: 8;
		flex: 1 1 50%;
	}

	.new_devpass {
		order: 9;
		flex: 1 1 50%;
	}

	.new_imei div {
		margin-right: 5px;
	}

	.new_devpass div {
		margin-left: 5px;
	}

	.capthca-box {
		order: 10;
		flex: 1 1 100%;
	}

	.new_email_half div {
		margin-right: 5px;
	}

	.new_type div {
		margin-left: 5px;
	}
}

.ms_5 {
	marker-start: 5px;
}

.modal-header {
	justify-content: space-between;
	display: flex;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: var(--background-color-flow);
}

.modal-name {
	font-size: large;
	font-weight: bold;
}

.modal-close {
	cursor: pointer;
}

.float-l {
	float: left;
	margin-right: 5px;
}

.ml {
	max-width: 100px;
}

.modal-footer {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 7px;
	background-color: var(--background-color-flow);
	text-align: right;
}

.modal-body {
	max-height: 62vh;
	overflow-y: auto;
}

.modal-body-max {
	max-height: 82vh;
	overflow-y: auto;
}

.preview_container {
	position: sticky;
	top: 0px;
	display: inline-flex;
}

.image_container {
	height: 100%;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 12px;
	padding-top: 12px;
	background-size: cover;
	overflow: hidden;
	position: relative;
}

.img_preview {
	border-radius: 15px;
	border: 2px solid var(--border-color);
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.vid_preview {
	border-radius: 15px;
	border: 2px solid var(--border-color);
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.modal-footer * {
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	border: 2px solid var(--border-color);
	border-radius: 7px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 4px;
	padding-right: 4px;
	cursor: pointer;
	background-color: var(--background-color);
	color: var(--text-color);
}

.modal-footer *:hover {
	background-color: var(--background-color-hover);
}

.modal-footer *:active {
	background-color: var(--background-color-active);
}

#captcha-timer::before {
	content: "[";
}

#captcha-timer::after {
	content: "]";
}

#captcha_img {
	cursor: pointer;
}

.icon-cancel:hover {
	color: brown;
}

.icon-x:hover {
	color: brown;
}

.waitlay {
	cursor: wait;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.topnav {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 7px;
	overflow: hidden;
	background-color: var(--modal-background-nav);
	border-radius: 8px;
}

.topnav a {
	background-color: var(--lbutton);
	cursor: pointer;
	float: left;
	display: block;
	color: var(--text-color);
	text-align: center;
	padding: 14px;
	text-decoration: none;
	font-size: 17px;
	border-radius: 5px;
	margin-right: 7px;
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.btncontent a:hover {
	background-color: var(--modal-background-hover);
}

.btncontent a.active {
	background-color: var(--modal-background-active);
}

.btncontent a.active:hover {
	background-color: var(--modal-background-active-hover);
}

.btncontent a {
	float: left;
	display: block;
	color: var(--text-color);
	text-align: center;
	padding: 14px;
	text-decoration: none;
	font-size: 17px;
	border-radius: 5px;
	margin-right: 7px;
	background-color: var(--lbutton);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.btncontent {
	width: calc(100% - 14px);
	height: 50px;
	margin-top: 7px !important;
	padding: 7px;
	border-radius: 7px;
	background-color: var(--modal-background-nav);
}

.helpmsg {
	font-family: "Courier New", Courier, monospace;
	font-size: 0.8rem;
}

.allcontent {
	overflow-y: auto;
	overflow-x: auto;
	width: calc(100% - 14px);
	margin-top: 7px !important;
	padding: 7px;
	border-radius: 7px;
	background-color: var(--modal-background-nav);
}

.topnav a.rmenu {
	float: right;
	box-shadow: none !important;
}

.mr0 {
	margin-right: 0px !important;
}

.topnav a.icon.icon-menu {
	margin-right: 0px !important;
}

.login-logo-container-nav {
	float: left;
	display: block;
	color: var(--text-color);
	text-align: center;
	height: 48px;
	background-size: 100% 100%;
	width: 149px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--logo);
	margin-left: 5px;
	margin-right: 15px;
}

.topnav a:hover {
	background-color: var(--modal-background-hover);
}

.topnav a.active {
	background-color: var(--modal-background-active);
}

.topnav a.active:hover {
	background-color: var(--modal-background-active-hover);
}

.topnav .icon {
	display: none;
}

.d-mobile {
	display: none;
}

.fullstick {
	justify-content: center;
}

@media screen and (max-width: 800px) {
	.preview_container {
		background-color: var(--hider);
		justify-content: center;
		width: 100%;
	}

	.image_container,
	.vid_container {
		max-width: 700px;
	}

	.topnav a:not(:first-child) {
		display: none;
	}

	.topnav a.icon {
		float: right;
		display: block;
	}

	.topnav a.icon {
		float: right;
		display: block;
	}

	.d-mobile {
		display: inline-block;
		padding-left: 5px;
	}
}

@media screen and (max-width: 800px) {
	.topnav.responsive {
		position: relative;
	}

	.topnav.responsive .icon {
		position: absolute;
		right: 7px;
		top: 7px;
	}

	.topnav.responsive a,
	.topnav.responsive div {
		float: none;
		display: block;
		text-align: left;
	}

	.topnav.responsive .keys {
		margin-left: 0px !important;
		margin-right: 0px !important;
		margin-top: 7px !important;
		margin-bottom: 0px !important;
	}
}

.inf {
	margin: 10px;
}

.incative {
	color: var(--incative);
}

.abs {
	position: absolute;
	border-radius: 7px;
	background-color: var(--modal-background-hover);
	padding: 3px;
	border: 2px solid var(--border-color);
	margin-left: -5px;
}

.abs button {
	padding-top: 7px;
	padding-bottom: 7px;
}

.gsig {
	padding: 1px !important;
	border: 0px !important;
	border-radius: 4px;
	font-size: 20px;
	background-color: var(--modal-background-active);
}

.pointer {
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.no_select {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.error {
	outline: 2px solid var(--danger-lite);
}

.online[golink] {
	cursor: pointer !important;
}

.alert {
	opacity: 0.8;
	pointer-events: all;
	border-radius: 3px;
	margin: 0.3rem;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	box-shadow: 0px 0px 3px 1px var(--border-color);
}

.alert[warning] {
	color: black;
	background-color: var(--warning);
}

.alert[danger] {
	color: white;
	background-color: var(--danger);
}

.danger {
	color: var(--danger);
}

.alert[success] {
	color: white;
	background-color: var(--success);
}

.alert[info] {
	color: white;
	background-color: var(--info);
}

.alert[secondary] {
	color: white;
	background-color: var(--secondary);
}

.alert *:nth-child(2) {
	max-height: 100px;
	overflow-y: auto;
	padding-top: 0.2rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.alert *:nth-child(1) {
	font-weight: bold;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.grp > * {
	margin-bottom: 5px;
}

.grp {
	padding-bottom: 1px !important;
}

@media only screen and (min-width: 900px) {
	.modal-content.xxl,
	.modal-content.max {
		width: 885px;
		max-width: 885px;
	}
}

@media only screen and (min-width: 950px) {
	.modal-content.xxl,
	.modal-content.max {
		width: 930px;
		max-width: 930px;
	}
}

@media only screen and (min-width: 1050px) {
	.modal-content.xxl,
	.modal-content.max {
		width: 1030px;
		max-width: 1030px;
	}
}

@media only screen and (min-width: 1100px) {
	.modal-content.xxl,
	.modal-content.max {
		width: 1080px;
		max-width: 1080px;
	}
}

@media only screen and (min-width: 1170px) {
	.modal-content.xxl,
	.modal-content.max {
		width: 1150px;
		max-width: 1150px;
	}
}

@media only screen and (min-width: 1220px) {
	.modal-content.xxl,
	.modal-content.max {
		width: 1200px;
		max-width: 1200px;
	}
}

.disperm {
	color: var(--secondary);
	cursor: not-allowed !important;
}

.disperm.danger {
	color: var(--danger-secondary);
	cursor: not-allowed !important;
}

.akeys {
	margin-top: -5px;
	background-color: rgb(255, 255, 255);
	color: black;
	font-weight: bold;
	border: 0px solid black;
	border-radius: 0.35rem;
}

.akeys:hover {
	background-color: rgb(207, 207, 207);
	border-radius: 0.45rem;
}

.akeys:active {
	background-color: rgb(185, 185, 185);
	border-radius: 0.55rem;
}

.new_dev_name {
	width: 100px;
	height: 100%;
	border: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
	outline: 0px !important;
}

.sort.asc::after {
	content: "\002B06";
	padding-left: 3px;
	font-size: small;
}

.sort.desc::after {
	content: "\002B07";
	padding-left: 3px;
	font-size: small;
}

th.sort {
	cursor: pointer;
}

.greenborder {
	color: var(--text-color);
	outline: 0.2px solid #509b82 !important;
	border: 0.8px solid #509b82 !important;
}

.unborder {
	color: var(--text-color);
	outline: 0.2px solid var(--background-color) !important;
	border: 0.8px solid var(--background-color) !important;
}

.centered {
	text-align: center !important;
}

.lefted {
	text-align: left !important;
}

@media only screen and (min-width: 800px) {
	#auto_scroll {
		overflow-x: hidden !important;
		overflow-y: hidden !important;
	}

	.container-settings {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-auto-columns: 1fr;
		grid-auto-rows: 1fr;
		gap: 0.5em 0.5em;
		grid-auto-flow: column;
		grid-template-areas:
			"grid_start grid_end"
			"camera_num content_num"
			"go_btn go_btn";
	}

	.container-all {
		display: grid;
		align-self: start;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: 0fr 1fr;
		grid-auto-columns: 1fr;
		grid-auto-rows: 1fr;
		gap: 0.5em 0.5em;
		grid-auto-flow: column;
		grid-template-areas:
			"grid_settings grid_table"
			"grid_preview grid_table";
	}

	.grid_img_preview {
		margin-top: -0.3rem !important;
		box-sizing: border-box;
		border-radius: 7px;
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.grid_table_container {
		overflow-x: auto;
		max-height: 550px;
		margin-top: 0.5rem;
	}
}

.underline {
	text-decoration: underline;
}

@media only screen and (max-width: 800px) {
	.container-settings > * {
		margin-bottom: 0.5rem;
	}

	.dipnone {
		display: none;
	}

	.grid_preview {
		z-index: 10;
		position: sticky;
		top: 0;
		box-sizing: border-box;
		background-color: var(--hider);
	}

	.flex_btns {
		margin-top: 0.3rem;
	}

	.grid_table_container {
		overflow-y: auto;
		margin-top: 0.5rem;
	}

	.grid_img_preview {
		box-sizing: border-box;
		border-radius: 7px;
		height: auto;
		width: auto;
		max-width: 100%;
		max-height: 100%;
	}
}

.grid_vid_preview {
	box-sizing: border-box;
	border-radius: 7px;
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.wrapped_table {
	white-space: normal !important;
}

.grid_settings {
	padding-top: 5px;
	grid-area: grid_settings;
}

.grid_preview {
	grid-area: grid_preview;
}

.content_close {
	z-index: 11;
	cursor: pointer;
	padding: 5px !important;
	border-radius: 7px;
	opacity: 25%;
	border: 0px;
	width: 100%;
}

.content_close:hover {
	opacity: 100%;
}

.grid_table {
	overflow: auto;
	justify-content: start;
	align-content: start;
	padding-top: 5px;
	grid-area: grid_table;
}

.grid_start {
	grid-area: grid_start;
}

.grid_end {
	grid-area: grid_end;
}

.camera_num {
	grid-area: camera_num;
}

.content_num {
	grid-area: content_num;
}

.go_btn {
	grid-area: go_btn;
}

.go_file_btn {
	background-color: var(--modal-background-active);
	color: var(--text-color);
	text-align: center;
	padding: 14px;
	text-decoration: none;
	font-size: 17px;
	border-radius: 5px;
	margin-right: 7px;
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	width: 100%;
	border-color: var(--border-color);
	border-style: solid;
	cursor: pointer;
}

.go_file_btn:hover {
	border-color: var(--text-color);
}

.go_file_btn:active {
	border-color: var(--border-color-hover);
}

.grid-pretty-search {
	color: var(--border-color);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-color);
	border: 2px solid var(--border-color);
	border-radius: 7px;
	padding: 13px !important;
}

.flex_btns {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.flex_btns-item1 {
	flex-grow: 1;
}

.flex_btns-item2 {
	flex-grow: 1;
	min-width: 50%;
}

#sel_day {
	padding: 13px;
}

.delitemer {
	cursor: pointer;
	color: var(--text-color);
	font-size: 0.8rem;
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin-left: 0.62rem;
	margin-right: 0.74rem;
	user-select: none;
}

.res_username,
.res_code,
.res_password,
.res_password_confirm {
	flex: 1 1 100%;
	order: 1;
}

.undecorated {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 0.9rem;
	background-color: var(--background-color);
	color: var(--text-color);
	text-decoration: none;
	padding-left: 2px;
}

details summary {
	cursor: pointer;
}

option[grp] {
	background-color: #ccc !important;
}

.add_new_perm_name {
	width: 200px !important;
	min-width: 100px !important;
}