body {
	font-family: "Segoe UI", Verdana, arial, Sans-Serif;
	font-size: 16px;
}

html,
body,
pre,
xmp,
code {
	background-color: black;
	margin: 0;
	padding: 0;
	color: rgb(238, 238, 238);
}

table {
	border-spacing: 0;
	border: 0;
}

textarea {
	color: black
}

p {
	margin: 0;
}

/* width */
::-webkit-scrollbar {
	width: 13px;
}
/* Track */
::-webkit-scrollbar-track {
	background: #131313;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: rgb(32,39,58);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgb(32,39,58);
}

.formarea select,
.formarea input[type=button],
.formarea input[type=text],
.formarea input[type=password],
.formarea3 select,
.formarea3 input[type=button],
.formarea3 input[type=text],
.formarea3 input[type=password] {
	border-style: hidden;
	height: 30px;
	background-color: #131313;
	color:white;
	border-radius: 2px;
}

.formarea input[type=text],
.formarea input[type=password],
.formarea3 input[type=text],
.formarea3 input[type=password] {
	padding-left: 12px;
}

.formarea2 input[type=text],
.formarea2 input[type=password] {
	color:white;
}

img {
	border: 0 none;
}

a {
	text-decoration: none;
}

.wrapper {
	margin: 0 auto -4em;
	min-width: 1000px;
	min-height: 650px;
	height: 1000px
}

.maintable {
	vertical-align: top;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: 100;
}

.header_0 {
	height: 110px;
}

.title {
	color: #F0F0F0;
	padding: 8px 0;
	margin-top: 0;
	padding-top: 30px;
	padding-bottom: 30px
}

.title .header_1 {
	font-size: 21px;
	font-weight: 500;
}

.title .description {
	margin-top: 10px;
}

div.hr {
	border: none;
	border-top: 1px solid #6c6c6c;
	clear: both;
	height: 0;
	width: 100%;
	margin: 15px 0;
}

.break_word {
	word-wrap: break-word;
	word-break: break-all;
}

.header_desc {
	line-height: 1.5em;
}

.box_tn {
	margin-top: 20px;
}

.button_submit {
	color: #E4E4E4 !important;
	background: #21242C !important;
	border: 2px solid #703AAC !important;
	border-radius: 4px !important;
	cursor: pointer;
	width: 170px;
	height: 40px !important;
	min-width: 100px;
	margin: 0 20px 0 20px;
}

.button_submit:hover {
	border: 2px solid #9761D4 !important;
}

.button_submit:active {
	background: #131313 !important;
	border: 2px solid #703AAC !important;
}

.button_submit:disabled:hover {
	cursor: not-allowed;
}

.button_in_table {
	color: #E4E4E4 !important;
	background: #21242C!important;
	border: 2px solid #6D7784 !important;
	border-radius: 4px;
	cursor: pointer;
	height: 30px !important;
	min-width: 100px;
}

.button_in_table:hover {
	border: 2px solid #FFFFFF !important;
}

.button_in_table:active {
	background: #131313 !important;
	border: 2px solid #6D7784 !important;
}

.button_in_table:disabled:hover {
	cursor: not-allowed;
}
/* Menu stlye */

.menutext {
	width: 260px;
}

.menutext .parent {
	list-style-type: none;
	color: white;
	/* text-indent: 10px; */
	margin: 0;
	cursor: pointer;
	width: 260px;
}

.parent ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgb(118, 120, 126);
	width: 252px;
}

.menutext a {
	width: 260px;
	height: 60px;
	color: #cacaca;
	display: flex;
	/* padding: 7px 0 7px 19px; */
	text-decoration: none;
	cursor: pointer;
	align-items: center;
}

.menutext a:hover,
.menutext a:hover .menu_span {
	color: white;
	text-decoration: none;
}

.menutext a:hover .arrow {
	background: url(/image_msi/ic_dropdown_over.svg);
}

.menutext a.child-menu {
	height: 40px;
}

.child-menu span {
	margin-left: 45px;
}

.menutext .menu-selected {
	color: white;
	background: linear-gradient(90deg, #703AAC 0%, #344194 100%) no-repeat;
	background-size: 260px 60px;
	font-weight: 500;
}

.arrow {
	background: url(/image_msi/ic_dropdown_nor.svg);
	width: 15px;
	height: 15px;
	margin-top: 4px;
	float: right;
}

.arrow-selected {
	background: url(/image_msi/ic_dropdown_over.svg);
	width: 15px;
	height: 15px;
	margin-top: 4px;
	float: right;
}

.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height .1s ease;
	-o-transition: height .1s ease;
	transition: height .1s ease;
}


/* Main menu */

.main-menu {
	cursor: pointer;
	display: inline-block;
	width: 126px;
	height: 55px;
	position: relative;
	background: rgb(0, 113, 157);
	background: -webkit-linear-gradient(rgba(0, 113, 157, 1) 0%, rgba(0, 85, 144, 1) 50%);
	background: -moz-linear-gradient(rgba(0, 113, 157, 1) 0%, rgba(0, 85, 144, 1) 50%);
	background: -o-linear-gradient(rgba(0, 113, 157, 1) 0%, rgba(0, 85, 144, 1) 50%);
	background: linear-gradient(rgba(0, 113, 157, 1) 0%, rgba(0, 85, 144, 1) 50%);
	border-bottom: 1px solid rgb(119, 121, 127);
}

.basic {
	border-top-left-radius: 0.4em;
}

.main-menu:hover {
	-moz-box-shadow: inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow: inset 0 0 10px #000000;
}

.blinking {
	animation: blinker 1s linear infinite;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

.main-menu-text {
	color: white;
	text-align: center;
	display: block;
	line-height: 55px;
	font-size: 16px;
}

.menu-background {
	width: 260px;
	height: 100px;
	border-top-left-radius: 0.4em;
	background: transparent url('/image/button_out.png') no-repeat scroll left bottom;
}

.headerbg {
	color: rgb(238, 238, 238);
	padding-bottom: 8px;
}

.boxshadow1 {
	background: #31343F none repeat scroll;
	padding: 10px 8px 20px;
	margin-bottom: 10px;
}

.boxshadow1>table {
	margin-left: 22px;
	margin-bottom: 22px;
	width: 100%;
}

div.hr {
	border-width: 1px;
	border-image: none;
	clear: both;
	height: 0;
	width: 100%;
	margin: auto;
}

div.hr2 {
	border-width: 1px medium;
	border-style: solid none;
	border-color: rgb(0, 0, 0);
	-moz-use-text-color: rgb(108, 108, 108);
	-moz-border-top-colors: none;
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
	clear: both;
	height: 0;
	width: 100%;
	margin: 8px 0;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.highlight {
	color: #eb2c43!important;
}

/*popup alert div*/

#policySection {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.5);
}

#policy_div {
	width: 900px;
	height: 450px;
	position: fixed;
	margin: -225px 0 0 -450px;
	top: 50%;
	left: 50%;
	color: white;
	border: solid 2px transparent;
	border-radius: 8px;
	background-image: linear-gradient(#272A30, #272A30), linear-gradient(60deg, #EB2C43 14%, #96408C 51%, #4F52C9 84%, #3459E2 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/*animation: fade .5s;*/
}

#sch_div {
	width: 1100px;
	height: 800px;
	position: fixed;
	margin: -400px 0 0 -550px;
	top: 50%;
	left: 50%;
	color: white;
	border: solid 2px transparent;
	border-radius: 8px;
	background-image: linear-gradient(#272A30, #272A30), linear-gradient(60deg, #EB2C43 14%, #96408C 51%, #4F52C9 84%, #3459E2 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* overflow-y: auto; */
	overflow: scroll;
	/*animation: fade .5s;*/
}

/*popup alert div END*/

/*loading mask*/

#LoaderSection {
	background-color: rgba(0, 0, 0, 0.65);
	height: 100%;
	opacity: 1;
	width: 100%;
	z-index: 2000;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sk-fading-circle {
	width: 100px;
	height: 100px;
	position: fixed;
	margin: -50px 0 0 -50px;
	top: 50%;
	left: 50%;
}

.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background: rgb(201, 48, 96);
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay .9s infinite ease-in-out both;
	animation: sk-circleFadeDelay .9s infinite ease-in-out both;
}

.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}

.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
}

.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
}

.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	transform: rotate(210deg);
}

.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	transform: rotate(240deg);
}

.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	transform: rotate(300deg);
}

.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
	-ms-transform: rotate(330deg);
	transform: rotate(330deg);
}

.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -.825s;
	animation-delay: -.825s;
	background: rgb(165, 51, 125);
}

.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -.75s;
	animation-delay: -.75s;
	background: rgb(135, 55, 153);
}

.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -.675s;
	animation-delay: -.675s;
	background: rgb(102, 58, 188);
}

.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -.6s;
	animation-delay: -.6s;
	background: rgb(107, 58, 177);
}

.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -.525s;
	animation-delay: -.525s;
	background: rgb(89, 60, 192);
}

.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -.45s;
	animation-delay: -.45s;
	background: rgb(105, 58, 179);
}

.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -.375s;
	animation-delay: -.375s;
	background: rgb(135, 55, 153);
}

.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -.3s;
	animation-delay: -.3s;
	background: rgb(168, 51, 125);
}

.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -.225s;
	animation-delay: -.225s;
	background: rgb(200, 48, 97);
}

.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -.15s;
	animation-delay: -.15s;
	background: rgb(217, 46, 82);
}

.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -.075s;
	animation-delay: -.075s;
	background: rgb(220, 46, 80);
}

@-webkit-keyframes sk-circleFadeDelay {
	0%,
	39%,
	100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

@keyframes sk-circleFadeDelay {
	0%,
	39%,
	100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}
/* block whole page */

.blocker,
#blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	opacity: 0;
	z-index: 9999999;
}

.mainbody {
	width: 1530px;
	height: 100%;
	min-height: 1280px;
}

.header_bar {
	position: relative;
	width: 100%;
	font-size: 36px;
	height: 70px;
	line-height: 35px;
}

.bgcolor_1 {
	background-color: #272A30;
}

.bgcolor_2 {
	background-color: rgb(33, 36, 44);
}

#dash_mode_div {
	width: 100%;
	height: 100%;
	min-height: 300px;
}

#dash_cpu_div {
	width: 100%;
	height: 100%;
	min-height: 240px;
}

#dash_device_div {
	width: 100%;
	height: 100%;
	min-height: 400px;
}

#body_div {
	height: 100%;
	vertical-align: top;
	position: relative;
	margin-left: 10px;
}

/* MSI dashboard */

.logo {
	margin-left: 30px;
	margin-right: 20px;
	width: 70px;
	height: 70px;
	background:url('/image_msi/logo_msi.svg');
}

.logo_div {
	display: flex;
	width: fit-content;
	cursor: pointer;
	align-items: center;
}

.logo_div_no_redirect {
	display: flex;
	width: fit-content;
	align-items: center;
}

.icon {
	width: 20px;
	height: 20px;
	margin: 10px;
}

.wizard_a {
	border-radius: 6px; border: 2px solid #6D7784; margin-bottom: 10px;
}

.wizard_a:hover {
	background: #21242C 0% 0% no-repeat padding-box;
	border: 2px solid white;
}

.menu_span {
	color: #cacaca;
	/* margin-left: 15px; */
}

.menu_span:hover {
	color: white;
}

.menutext .menu-selected .menu_span {
	color: white;
}

.menu_div {
	/* position: relative;
	top: 10px;
	left: -10px; */
	color: #CACACA;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 87%;
	padding: 5px;
}

.mode_nor img {
	margin-top: 15px;
	width: 60px;
	height: 60px;
}

.mode_nor div:nth-child(2) {
	margin-top: -2px;
}

.mode_nor {
	width: 140px;
	height: 140px;
	background: #21242C no-repeat;
	box-shadow: 2px 2px 3px #0000004D;
	border-radius: 10px;
	opacity: 0.7;
	text-align: center;
	display: inline-block;
	margin-right: 30px;
	cursor: pointer;
	border: 4px transparent solid;
	word-break: break-all;
}

#ai_div {
	width: 160px;
	height: 160px;
}

.mode_nor div:nth-child(1) {
	margin-top: 5px;
}

.mode_nor:hover {
	opacity: 0.85
}

.default_mode {
	background-image: url('/image_msi/img_default.png');
	background-image: url('/image_msi/img_default.png'), linear-gradient(90deg, rgba(53, 65, 126, 1), rgba(53, 65, 126, 0.2));
}

.ai_mode {
	background-image: url('/image_msi/img_ai.png');
	background-image: url('/image_msi/img_ai.png'), linear-gradient(90deg, rgba(0, 131, 179, 1), rgba(0, 131, 179, 0.2));
}

.gaming_mode {
	background-image: url('/image_msi/img_gaming.png');
	background-image: url('/image_msi/img_gaming.png'), linear-gradient(90deg, rgba(233, 49, 154, 1), rgba(233, 49, 154, 0.2));
}

.streaming_mode {
	background-image: url('/image_msi/img_entertaintment.png');
	background-image: url('/image_msi/img_entertaintment.png'), linear-gradient(90deg, rgba(112, 58, 172, 1), rgba(112, 58, 172, 0.2));
}

.wfh_mode {
	background-image: url('/image_msi/img_wfh.png');
	background-image: url('/image_msi/img_wfh.png'), linear-gradient(90deg, rgba(64, 126, 255, 1), rgba(64, 126, 255, 0.2));
}

.qos_mode {
	background-image: url('/image_msi/img_traditional.png');
	background-image: url('/image_msi/img_traditional.png'), linear-gradient(90deg, rgba(153, 93, 79, 1), rgba(153, 93, 79, 0.2));
}

#ai_div.mode_selected {
	border: 4px rgba(0, 255, 252, 1) solid;
	opacity: 0.85;

}

#gaming_div.mode_selected {
	border: 4px rgba(255, 0, 92, 1) solid;
	opacity: 0.85;

}

#streaming_div.mode_selected {
	border: 4px rgba(155, 67, 249, 1) solid;
	opacity: 0.85;

}

#wfh_div.mode_selected {
	border: 4px rgba(44, 109, 255, 1) solid;
	opacity: 0.85;

}

#qos_div.mode_selected {
	border: 4px rgba(229, 108, 26, 1) solid;
	opacity: 0.85;

}

.mode_selected {
	border: 4px transparent solid;
	background-image: linear-gradient(#21242C, #21242C), linear-gradient(60deg, #EB2C43 14%, #96408C 51%, #4F52C9 84%, #3459E2 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	opacity: 0.85;
}

.wifi_btn {
	text-align: center;
	cursor: pointer;
	width: 210px;
	height: 55px;
	background: #21242C no-repeat;
	border: 2px solid #6D7784;
	border-radius: 6px;
	opacity: 1;
	line-height: 51px;
	display: flex;
	justify-content: center;
}

.wifi_btn:hover {
	border: 2px solid #fff;
}

.wifi_btn:focus {
	border: 2px solid #fff;
	background: #131313 no-repeat !important;
}

.wifi_btn img {
	margin: auto;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 15px;
	margin-left: 0;
}

.logout {
	cursor: pointer;
	margin: auto;
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_logout_nor.svg);
}

.logout:hover {
	background: url(/image_msi/ic_logout_over.svg);
}

.logout:active {
	background: url(/image_msi/ic_logout_pre.svg);
}

.qos_setting {
	margin: 10px 10px 0 0 !important;
	width: 18px;
	height: 18px;
	background: url(/image_msi/ic_traditional_setting_nor.svg) no-repeat;
	float: right;
	position: relative;
	z-index: 10;
}

.qos_setting:hover {
	background: url(/image_msi/ic_traditional_setting_over.svg);
}

#ai_img {
	width: 70px !important;
	height: 70px !important;
	background: url(/image_msi/ic_ai_nor.svg);
	margin: 20px auto !important;
}

.ai_sel {
	background: url(/image_msi/ic_ai_selected.svg) !important;
}

#gaming_img {
	width: 60px !important;
	height: 60px !important;
	background: url(/image_msi/ic_gaming_nor.svg);
	margin: 15px auto !important;
}

.gaming_sel {
	background: url(/image_msi/ic_gaming_selected.svg) !important;
}

#streaming_img {
	width: 60px !important;
	height: 60px !important;
	background: url(/image_msi/ic_entertaintment_nor.svg);
	margin: 15px auto !important;
}

.streaming_sel {
	background: url(/image_msi/ic_entertaintment_selected.svg) !important;
}

#wfh_img {
	width: 60px !important;
	height: 60px !important;
	background: url(/image_msi/ic_wfh_nor.svg);
	margin: 15px auto !important;
}

.wfh_sel {
	background: url(/image_msi/ic_wfh_selected.svg) !important;
}

#qos_img {
	width: 60px !important;
	height: 60px !important;
	background: url(/image_msi/ic_traditional_nor.svg);
	margin: 15px auto !important;
}

.qos_sel {
	background: url(/image_msi/ic_traditional_selected.svg) !important;
}

#connention_div {
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#connention_div>div {
    margin: 0 10px 0 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.connention_info {
	margin-top: 10px;
	width: fit-content;
}

.sts_normal {
	position: relative;
	top: 100%;
	left: 100%;
	margin: -15px 0 0 -15px;
	width: 25px;
	height: 25px;
	background: url(/image_msi/ic_status_normal.svg) no-repeat;
	background-color: #3441E2;
	border-radius: 50%;
}

.sts_error {
	position: relative;
	top: 100%;
	left: 100%;
	margin: -15px 0 0 -15px;
	width: 25px;
	height: 25px;
	background: url(/image_msi/ic_status_error.svg) no-repeat;
	background-color: #EB2C43;
	border-radius: 50%;
}

.sts_client {
	position: relative;
	top: 100%;
	left: 100%;
	margin: -15px 0 0 -15px;
	width: 25px;
	height: 25px;
	background-color: #3441E2;
	border-radius: 50%;
}

.sts_none {
	position: relative;
	top: 100%;
	left: 100%;
	margin: -15px 0 0 -15px;
	width: 25px;
	height: 25px;
	background-color: #555E6B;
	border-radius: 50%;
}

.internet_img {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_internet.svg) no-repeat;
}

.tbl_selected .internet_img {
	background: url(/image_msi/ic_internet_selected.svg) no-repeat;
}

#internet_info_div:hover .internet_img {
	background: url(/image_msi/ic_internet_over.svg) no-repeat;
}

.line {
	border: none;
	border-top: 2px solid #FFFFFF;
	clear: both;
	width: 185px;
	border-radius: 1px;
	margin: 0 !important;
}

.id_img {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_id.svg) no-repeat;
}

.tbl_selected .id_img {
	background: url(/image_msi/ic_id2_selected.svg) no-repeat;
}

#device_info_div:hover .id_img {
	background: url(/image_msi/ic_id2_over.svg) no-repeat;
}

.wired_img {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_wired_nor.svg) no-repeat;
}

.wired_img_dis {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_wired_disable.svg) no-repeat;
}

.tbl_selected .wired_img,
.tbl_selected .wired_img_dis {
	background: url(/image_msi/ic_wired_selected.svg) no-repeat;
}

#wired_div:hover .wired_img,
#wired_div:hover .wired_img_dis {
	background: url(/image_msi/ic_wired_over.svg) no-repeat;
}

.wireless_img {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_wireless_nor.svg) no-repeat;
}

.wireless_img_dis {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_wireless_disable.svg) no-repeat;
}

.tbl_selected .wireless_img,
.tbl_selected .wireless_img_dis {
	background: url(/image_msi/ic_wireless_selected.svg) no-repeat;
}

#wireless_div:hover .wireless_img,
#wireless_div:hover .wireless_img_dis {
	background: url(/image_msi/ic_wireless_over.svg) no-repeat;
}

.block_img_wired {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_unblock_n.svg) no-repeat;
}

.unblock_img_wired {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_block_n.svg) no-repeat;
}

.block_img {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_unblock.svg) no-repeat;
}

.unblock_img {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_block.svg) no-repeat;
}

.usb_img {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_usb_nor.svg) no-repeat;
}

.usb_img_dis {
	width: 60px;
	height: 60px;
	background: url(/image_msi/ic_usb_disable.svg) no-repeat;
}

.tbl_selected .usb_img,
.tbl_selected .usb_img_dis {
	background: url(/image_msi/ic_usb_selected.svg) no-repeat;
}

#usb_div:hover .usb_img,
#usb_div:hover .usb_img_dis {
	background: url(/image_msi/ic_usb_over.svg) no-repeat;
}

.cli_option {
	cursor: pointer;
	color: #6D7784;
}

.cli_option_sel {
	cursor: pointer;
	color: #B726C2;
}


/* CPU Usage */

.CircularProgress-Bg,
.CircularProgress-Fg {
	fill: none;
	stroke-width: 16px;
	stroke-linecap: round;
}

.CircularProgress-Bg {
	fill: #21242C;
	stroke: #21242C;
}

.CircularProgress-Fg {
	transition: stroke-dashoffset .5s ease-in-out;
	stroke: url(#CPU_Gradient);
	stroke-dasharray: 553;
	/* 2 x radius x pi */
	stroke-dashoffset: 150;
}

.CircularProgress-Text {
	font-size: 50px;
	font-weight: 600;
	fill: #FFFFFF;
}

.progress-custom {
	display: table;
	width: 100%;
	margin-bottom: 15px; /*optionally same as the margin bottom of progress class*/
}

.progress-custom .progress{
	margin-bottom: 0;
	/* display: table-cell; */
	vertical-align: middle;
	height: 10px;
	width: 200px;
	background-color:#31343F;
}

.progress-custom .progress-bar{
	background-color:#A12DAA;
}

.progress-custom .progress-value{
	display: table-cell;
	/* vertical-align: middle; */
	width: 1%;
	padding: 0 10px; /*optionally*/
}

/* MSI dashboard END */


/* MSI table style */

.formarea,
.formarea2 {
	width: 1160px;
	margin: auto;
	padding-bottom: 30px;
}

.formarea3 {
	width: 700px;
	margin: auto;
	padding-bottom: 30px;
}

.formarea th,
.formarea2 th,
.formarea3 th {
	height: 35px;
	font-weight: normal;
	font-size: 16px;
	background-color: rgb(33, 36, 44);
	border-collapse: separate;
	border-bottom: 5px #31343F solid;
}

.formarea td,
.formarea2 td,
.formarea3 td {
	height: 60px;
	font-size: 16px;
	background-color: rgba(72, 90, 135, 0.1);
	border-collapse: separate;
	border-bottom: 5px #31343F solid;
}

.formarea th:nth-child(1) {
	padding-left: 15px;
}

.formarea td:nth-child(1) {
	padding-left: 200px;
	width: 380px;
}

.formarea td:nth-child(n+2) {
	padding-left: 20px;
}

.formarea2 th:nth-child(1),
.formarea2 td:nth-child(1),
.formarea3 th:nth-child(1),
.formarea3 td:nth-child(1) {
	padding-left: 15px;
}

/* MSI table style END*/


/* MSI common style */

.mainform {
	background-color: #31343F;
	margin-bottom: 10px;
}

#subpage_div {
	width: 1160px;
	margin: auto;
	/*animation: fade .5s;*/
}

.btn_field {
	padding: 30px 0 40px 0 !important;
	background-color: transparent !important;
	text-align: center;
}


/* MSI checkbox style */

input[type=checkbox] {
	display: none;
}

input[type=checkbox]+label.custom_checkbox {
	cursor: pointer;
	display: inline-block;
	padding: 0;
	background: url('/image_msi/ic_checkbox_nor.svg') no-repeat;
	height: 20px;
	width: 20px;
	vertical-align: middle;
}

input[type=checkbox]:checked+label.custom_checkbox {
	background: url('/image_msi/ic_checkbox_selected.svg') no-repeat;
	height: 20px;
	width: 20px;
	display: inline-block;
	vertical-align: middle;
}

/* MSI checkbox style END */


/* MSI radio style */

input[type=radio] {
	display: none;
}

input[type=radio]+label.custom_radio {
	cursor: pointer;
	display: inline-block;
	padding: 0;
	background: url('/image_msi/ic_singlebox_nor.svg') no-repeat;
	height: 20px;
	width: 20px;
	vertical-align: middle;
}

input[type=radio]:checked+label.custom_radio {
	background: url('/image_msi/ic_singlebox_selected.svg') no-repeat;
	height: 20px;
	width: 20px;
	display: inline-block;
	vertical-align: middle;
}

input[type=radio]:disabled+label.custom_radio {
	cursor: auto;
	background: url('/image_msi/ic_singlebox_disable.svg') no-repeat;
	height: 20px;
	width: 20px;
	display: inline-block;
	vertical-align: middle;
}

input[type=radio]:checked:disabled+label.custom_radio {
	cursor: auto;
	background: url('/image_msi/ic_singlebox_disable.svg') no-repeat;
	height: 20px;
	width: 20px;
	display: inline-block;
	vertical-align: middle;
}

/* MSI radio style END*/

/* MSI input file style */

input[type=file] {
	display: none;
}

.custom-file-upload {
	border: 2px solid #6D7784 !important;
	border-radius: 4px;
	cursor: pointer !important;
	background: #21242C !important;
	height: 30px !important;
	min-width: 100px;
	text-align: center;
	margin: auto;
	font-weight: normal;
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.custom-file-upload:hover {
	border: 2px solid #FFFFFF !important;
}

.custom-file-upload:active {
	background: #131313 !important;
	border: 2px solid #6D7784 !important;
}

/* MSI input file style END */
/* bootstrap-select option box */

.dropdown.show > .dropdown-toggle,
.dropdown-menu.show > .inner.show {
	border: 1px solid #555E6B !important;
}

.dropdown-menu {
	margin: 0;
	padding: 0;
	background-color: #131313 !important;
	color: white !important;
	border: 0 !important;
	top: 90%;
	border-radius: 2px;
}

.dropdown-menu>li>a {
	color: white !important;
	padding: 4px 12px;
	font-size: 16px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
	background-color: #EB2C43;
}

.dropdown-menu>.active>a {
	background-color: inherit;
}

.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
	background-color: #EB2C43;
}

.bootstrap-select .dropdown-toggle {
	background-color: #131313 !important;
	color: white !important;
	font-size: 16px;
	border: 0 !important;
	border-radius: 2px;
	padding: 4px 12px;
}

.bootstrap-select .dropdown-toggle:focus {
	outline: 0 !important;
	border: 0 !important;
}

.bootstrap-select>.dropdown-toggle::after,
.bootstrap-select .dropdown-toggle .caret {
	width: 15px;
	height: 15px;
	border: none;
	background: url('/image_msi/ic_dropdown_nor.svg') no-repeat;
	margin-top: 3px;
}

.dropdown.show .dropdown-toggle::after,
.bootstrap-select>.dropdown-toggle:hover::after,
.bootstrap-select .dropdown-toggle:hover .caret {
	background: url('/image_msi/ic_dropdown_over.svg') no-repeat;
}

.bootstrap-select>.dropdown-toggle:focus::after,
.bootstrap-select .dropdown-toggle:focus .caret {
	background: url('/image_msi/ic_dropdown_selected.svg') no-repeat;
}

.dropdown.show .dropdown-toggle::after,
.bootstrap-select>.dropdown-toggle:focus:hover::after,
.bootstrap-select .dropdown-toggle:focus:hover .caret {
	background: url('/image_msi/ic_dropdown_over.svg') no-repeat;
}

.bootstrap-select a:focus {
	/* for chrome */
	outline: 0 !important;
}

/* bootstrap-select option box END */

.w250 {
	width: 250px !important;
}

.w550 {
	width: 550px !important;
}

.submenu_div {
	padding-top: 10px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #31343F;
}

.submenu_btn {
	color: #A8A9AA;
	margin-top: 30px;
	cursor: pointer;
	min-width: 116px;
	max-width: 230px;
	width: fit-content;
	height: 55px;
	border-right: 2px solid #6D7784;
	opacity: 1;
	display: flex;
	text-align: center;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	padding: 5px;
	word-break: break-word;
}

.submenu_btn:hover {
	border-color: #6D7784;
	color: #fff;
}

.submenu_btn:last-child {
	border: 0;
}

.submenu_btn.sel {
	border-color: #6D7784;
	color: #fff;
	background: linear-gradient(90deg, #703AAC 0%, #344194 100%) no-repeat;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 50px #131313 inset;
	-webkit-text-fill-color: white;
}

.edit_icon {
	width: 20px;
	height: 20px;
	background: url(/image_msi/ic_edit_nor.svg);
	cursor: pointer;
}

.edit_icon:hover {
	background: url(/image_msi/ic_edit_over.svg);
}

.edit_icon:active {
	background: url(/image_msi/ic_edit_pre.svg);
}

.del_icon {
	width: 20px;
	height: 20px;
	background: url(/image_msi/ic_delete_nor.svg);
	cursor: pointer;
}

.del_icon:hover {
	background: url(/image_msi/ic_delete_over.svg);
}

.del_icon:active {
	background: url(/image_msi/ic_delete_pre.svg);
}

.copy_icon {
	width: 25px;
	height: 25px;
	background: url(/image_msi/ic_list_copy_nor.svg);
	cursor: pointer;
}

.copy_icon:hover {
	background: url(/image_msi/ic_list_copy_over.svg);
}

.copy_icon:active {
	background: url(/image_msi/ic_list_copy_pre.svg);
}


.add_icon {
	width: 20px;
	height: 20px;
	background: url(/image_msi/ic_create.svg);
	cursor: pointer;
}

.add_icon:hover {
	opacity: 0.7;
}

.list_add_icon {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_list_add_nor.svg);
	cursor: pointer;
	margin: 10px;
}

.list_add_icon.hover,
.list_add_icon:hover {
	background: url(/image_msi/ic_list_add_over.svg);
}

.list_add_icon.active,
.list_add_icon:active {
	background: url(/image_msi/ic_list_add_pre.svg);
}

.list_del_icon {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_list_delete_nor.svg);
	cursor: pointer;
	margin: 10px;
}

.list_del_icon:hover {
	background: url(/image_msi/ic_list_delete_over.svg);
}

.list_del_icon:active {
	background: url(/image_msi/ic_list_delete_pre.svg);
}

.list_edit_icon {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_list_edit_nor.svg);
	cursor: pointer;
	margin: 10px;
}

.list_edit_icon:hover {
	background: url(/image_msi/ic_list_edit_over.svg);
}

.list_edit_icon:active {
	background: url(/image_msi/ic_list_edit_pre.svg);
}

.list_ipt {
	height: 30px;
	border-style: hidden;
	background-color: #131313;
}

.clickimage {
	cursor: pointer;
}

.eyes {
	width: 22px;
	filter: invert(100%);
	margin-top: -5px;
}

#input_client {
	position: relative;
	width: fit-content;
	z-index: 1;
}

#connected_client {
	position: relative;
	z-index: 0;
	margin-top: -27px;
}

#input_client input {
	height: 27px;
	width: 210px
}

#fw_info:hover,
#app_info:hover {
	color: red;
	cursor: pointer;
}

.header_info_des
 {
	position: absolute;
	max-width: 400px;
	border: 2px solid #555E6B;
	background: #272A30 no-repeat;
	padding: 30px;
	z-index: 1;
	text-align: center;
	font-size: 16px;
	animation: fade .5s;
	display: none
}

#fw_des a {
	float: right;
	color: red;
	cursor: pointer;
}

.header_info {
	color: #fff;
	font-size: 16px;
	text-align: center;
	max-width: fit-content;
	word-break: keep-all;
}

#fw_notice {
	position: absolute;
	margin: -30px 0 0 -12px;
	width: 10px;
	height: 10px;
	background-color: #EB2C43;
	border-radius: 50%;
	display: none;
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

input::-ms-reveal,
input::-ms-clear { /* disable IE / Edge default password eye */
	display: none;
}
#apply_percentage {
	position: fixed;
	font-size: 30px;
}

#apply_msg {
	position: fixed;
	top: 60%;
}

.button_left {
	float: left;
	margin-left: 0px;
}

.button_right {
	float: right;
	margin-right: 0px;
}

/* MSI common style END*/

/* Schedule style START */
#selectable .ui-selecting { background: #EB2C43; }
#selectable .ui-selected { background: #703AAC; color: white; }
#selectable .ui-unselected { background: black; color: green; }
#selectable .ui-unselecting { background: green; color: black; }
#selectable { border-spacing:0px; margin-left:0px;margin-top:0px; padding: 0px; width:100%;}
#selectable td { height: 22px; }
.parental_th{
	color:white;
	background:rgb(33, 36, 44);
	/* cursor: pointer; */
	cursor: default;
	width:160px;
	height:22px;
	border-bottom:solid 1px black;
	border-right:solid 1px black;
	border-left:solid 1px black;
	border-top: solid 1px black;
}
/* .parental_th:hover{
	background:#EB2C43;
	cursor: pointer;
} */

.checked{
	background-color:#703AAC;
	width:82px;
	border-bottom:solid 1px black;
	border-right:solid 1px black;
}

.disabled{
	width:82px;
	/* background-color: #31343F; */
	border-bottom:solid 1px black;
	border-right:solid 1px black;
}

.close {
	color: white;
}

.close:hover {
	color: white;
}

.modal-header {
	border-bottom: 0px;
}

.modal-content {
	background-color: #31343F;
	border: solid 2px transparent;
	border-radius: 8px;
	background-image: linear-gradient(#272A30, #272A30), linear-gradient(60deg, #EB2C43 14%, #96408C 51%, #4F52C9 84%, #3459E2 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
}
.modal-dialog {
	overflow-y: initial !important
}

.modal-body {
	/* height: 250px; */
	overflow-y: auto;
}

.schedule_icon {
	width: 30px;
	height: 30px;
	background: url(/image_msi/ic_schedule_nor.svg);
	cursor: pointer;
	margin: 10px;
}

.schedule_icon:hover {
	background: url(/image_msi/ic_schedule_over.svg);
}

.schedule_icon:active {
	background: url(/image_msi/ic_schedule_pre.svg);
}

.input_text{
	border-style: hidden;
	height: 30px;
	background-color: #131313;
	color: white;
	border-radius: 2px;
}

.bg-custom {
	background: rgba(72, 90, 135, 0.1);
}

.circle {
	margin-right: 5px;
	cursor: pointer;
	width: 60px;
	height: 60px;
	line-height: 55px;
	border-radius: 50%;
	font-size: 20px;
	text-align: center;
	color:#6D7784;
	border: 2px solid #6D7784;
	background: transparent;
}

.circle.selected {
	border: 0;
	color: #fff;
	background: #B726C2;
}

.selectpicker-center .filter-option-inner{
	text-align: center;
}

 /* The switch - the box around the slider */

.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	margin-bottom: 0;
}

/* Hide default HTML checkbox */

.switch input {
	display: none;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .3s;
	transition: .3s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: #B726C2;
}

input:focus+.slider {
	box-shadow: 0 0 1px #B726C2;
}


input:checked+.slider:before {
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
}

input:checked~.slider:before {
	/* content: '\2714'; */
	text-indent: 0.5em;
	color: #000;
}

/* Rounded sliders */

.slider.round {
	border-radius: 24px;
}

.slider.round:before {
	border-radius: 50%;
}
/* Schedule style END */

.block_icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	background: url(/image_msi/ic_block.svg);
	cursor: pointer;
	margin-left: 10px;
	filter: invert(100%);
	vertical-align: middle;
}

.block_icon:hover {
	opacity: 0.6;
}

#_1g_img {
	width: 60px !important;
	height: 60px !important;
	background: url(/image_msi/ic_1gbps.svg);
	margin: 15px auto !important;
}

#_25g_img {
	width: 60px !important;
	height: 60px !important;
	background: url(/image_msi/ic_25gbps.svg);
	margin: 15px auto !important;
}

.rotate {
	animation: rotation 4s infinite linear;
	width: 100px;
	height: 100px;
	position: fixed;
	margin: -50px 0 0 -50px;
	top: 50%;
	left: 50%;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}