@charset "UTF-8";

body {
	 overscroll-behavior: none 
}

.page-login::before {
	background-position: center bottom;
}

.navbar-brand {
    padding-left: 5px;
    padding-right: 10px;
}

.bg-grey-600 {
    background-color: #555 !important;
}

.site-navbar {
    background-color: #000000bb;
}

.site-skintools .site-skintools-title {
	margin-top:10px;
	margin-bottom: 10px;
}

#skintoolsReset.mt-20 {
	margin-top:10px!important;
}

.site-skintools-title {
	font-size: 16px;
}

.site-skintools {
	top:70px;
}

.x-grid3-hd-row td {
    font: bold 14px arial,tahoma,helvetica,sans-serif;
}

.x-grid3-row td, .x-grid3-summary-row td {
    font: normal 12px arial,tahoma,helvetica,sans-serif;
}

.x-panel-tbar, .x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar {
    width:100%!important;
}

.x-grid3-cell-inner, .x-grid3-hd-inner {
	white-space:normal;
}

.ext-strict .x-form-text {
    height: 21px;
}

.x-panel-bbar {
	width: 100%!important;
}

.x-grid3-scroller, .x-grid3-header-inner, .x-panel-body {
	width: 100%!important;
}

#device-grid, #device-grid .x-grid3, #speedlimit-grid, #speedlimit-grid .x-grid3, #location-grid, #location-grid .x-grid3 {
	width:100%!important;
}

#device-grid .x-grid3-td-7, #device-grid .x-grid3-td-8, #device-grid .x-grid3-td-9, #device-grid .x-grid3-td-7 .x-grid3-cell-inner, #device-grid .x-grid3-td-8 .x-grid3-cell-inner, #device-grid .x-grid3-td-9 .x-grid3-cell-inner
{
	cursor:pointer;
}

.clickable-cell:hover
{
	background-color:lightyellow!important;
}

#cpudatefilter, #latencydatefilter, #trafficdatefilter {
	width: 180px!important;
	margin: 10px 0px 10px 10px!important;
}

.cpu-popup-graph .x-form-date-trigger, .latency-popup-graph .x-form-date-trigger, .traffic-popup-graph .x-form-date-trigger, .total-download-popup-graph .x-form-date-trigger, .total-upload-popup-graph .x-form-date-trigger, .packetloss-popup-graph.x-window  .x-form-date-trigger {
	margin-top:10px!important;
}

.x-tool-close {
    background-size: 200%!important;
	width: 20px!important;
	height: 20px!important;
}

.x-tool-close-over, .x-tool-over .x-tool-close {
    background-position: -20px 0!important;
}

#device-cmb {
	/*width: calc(100vh - 90px)!important; */
	margin-bottom:10px;
}

.site-menu > .site-menu-item > .site-menu-sub
{
	max-height: 240px !important;
}

.x-form-invalid-field-default, textarea.x-form-invalid-field-default{
	background-image:none;
}


.x-form-text-wrap-default.x-form-text-wrap-invalid , textarea.x-form-text-wrap-default.x-form-text-wrap-invalid  {
	border-color: inherit;
}

.x-combo-list-item {
	white-space: normal;
}

.title-image {
	height: 35px;
	/*margin: 10px 0px 0px 25px;*/
}

.x-window-header-text-container-default {
	width: 100%!important;
}

#page-designer-win {
	top: 10px!important;
}

#page-designer-form .x-tool {
    background-size: inherit !important;
    width: 15px !important;
    height: 15px !important;
}

.x-form-cb-label {
	display:inline;
}

.x-toolbar, .x-grid-header-ct, .x-grid-view {
	width:100%!important;
}

/*#paging-toolbar .x-toolbar-text {
	text-align:right;
	width: 100%;
	left: auto!important;
	padding-right: 5px;
}

#paging-toolbar .x-box-inner {
	width: 100%!important;
}

.x-window-header, .x-header-body {
	width: 100%; 
}*/


/*.x-html-editor-wrap .x-box-inner, .x-html-editor-wrap  .x-box-target, .x-html-editor-input {
	width: 100%!important;
}*/


#page-designer-win .x-panel-default-framed {
	border: none!important;
	padding: 0px!important;
}

#page-designer-win-body {
	width: 100%!important;
}

.upload-icon {
	background: url('/global/images/toolbar/image_add.png') no-repeat 0 0 !important;
}

.x-form-file-input {
	height: 22px;
}

.x-html-editor-wrap textarea {
	width: 100%;
}

#page-designer-win.x-window .x-html-editor-wrap .x-box-inner {
	height: 87px!important;
	width: 600px!important;
}

#page-designer-win.x-window .x-html-editor-wrap .x-htmleditor-iframe, #page-designer-win.x-window .x-html-editor-wrap textarea {
	height: 60px!important;
}

.panel-heading {
	padding: 10px 0px 0px 30px;
}

.hp-addt-device-fieldset {
    padding: 0px 10px 10px 10px;
}

.hp-addt-device-fieldset legend {
    width: auto; 
}

.x-grid-item  {
    background-color: #e5faff!important;
}

.x-grid-item-alt  {
    background-color: #ffffff!important;
}

.x-grid-cell-special {
	padding: 0px 5px;
}

.x-grid-td {
	vertical-align:middle!important;
}

.x-grid-td {
    padding: 5px;
}

.x-column-header {
	padding: 0px 5px;
}

.hp-addt-device-grid .x-grid-td {
    padding: 0px;
}

.x-grid-cell-row-checker .x-grid-cell-inner {
    padding: 4px 5px 3px 0px!important;
}

.x-column-header-checkbox .x-column-header-inner {
    padding: 5px 5px 4px 0px!important;
}

.x-grid-cell-inner {
	white-space: normal!important;
}

.user_active {
    background: #15d515;
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    color: white;
}

.user_expired {
    background: #ff3300e3;
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    color: white;
}

.user_online {
    background: #0087ff;
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    color: white;
}

.user_idle {
    background: #ff9f09;
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    color: black;
}

.no-data-found {
	padding-top: 30px;
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
	font-family: Verdana;
	color: #8d654b;
	max-height:80%;
	max-width: 90%;
	margin: 0 auto;
}

.daily_graph
{
	text-align:center; 
	width: 100%;
}

#domain_list-inputEl {
	height: 150px;
}

#dns-category-grid-body .x-grid-view, #user-grid-body .x-grid-view , #devicesmonitoring-grid-body .x-grid-view{
	overflow-y: auto!important;
}

.x-scroll-indicator-x {
	display:none;
}

#domain_list.x-form-item-default.x-item-disabled, #cat_id.x-form-item-default.x-item-disabled {
	opacity: 0.7;
}

#device-selection {
	border: 1px solid #99bce8;
	padding: 10px 20px 0px 20px;
	border-radius: 10px;
	background: linear-gradient(to bottom right, #0059b3, #0066cc, #0073e6, #0080ff);
}

.hp-dashboard-box {
	float:left;
	margin-top: 10px;
	padding: 0px 10px 0px 0px;
}

.hp-dashboard-graph {
    border: 1px solid #99bce8;
    padding: 10px;
    border-radius: 10px;
}

#add-edit-domain-form legend {
	width: auto;
}

.dns_icon_btn {
	width: 40px;
	height: auto;
}

.menu-icon {
	width: 40px;
	display: block;
	margin: 0 auto;
}

.dashboard-user-box {
  float: left;
  border: 1px solid #99bce8;
  margin: 0px 5px;
  padding: 10px;
  border-radius: 5px;
  width: 31.3%;
  color: white;
}

.dashboard-user-box.active-users {
  background: linear-gradient(to bottom right, #00cc00, #00ff00, #00cc00);
}

.dashboard-user-box.expired-users {
  background: linear-gradient(to bottom right, #e60073, #ff4da6, #e60073);
}

.dashboard-user-box.online-users {
  background: linear-gradient(to bottom right, #0066ff, #66a3ff, #0066ff);
}

.dashboard-user-box .md-account  {
	float: right;
	font-size: 40px;
	line-height: 55px;
}

.user-box-num {
	font-size: 23px;
	font-weight: bold;
}

.dashboard-device-box {
  float: left;
  border: 1px solid #99bce8;
  margin: 0px 5px;
  padding: 10px;
  border-radius: 5px;
  width: 23%;
  color: white;
  text-align:center;
  line-height: 20px;
}

.dashboard-device-box.cpu {
	background: linear-gradient(to bottom right, #00b377, #00ffaa, #00b377);
}

.dashboard-device-box.latency {
	background: linear-gradient(to bottom right, #661aff, #aa80ff, #661aff);
}

.dashboard-device-box.free-hdd {
	background: linear-gradient(to bottom right, #999900, #ffcc00, #999900);
}

.dashboard-device-box.free-memory {
	background: linear-gradient(to bottom right, #992600, #ff531a, #992600);
}

.device-box-num {
	font-size: 20px;
	font-weight: bold;
}

.dashboard-device-box .md-info-outline, .dashboard-device-box .md-memory, .dashboard-device-box .md-card-sd {
	font-size: 40px;
	line-height: 35px;
	margin-bottom: 15px;
}

.page-dark.layout-full .brand {
	text-align:center;
}

.dashboard-traffic-box {
  border: 1px solid #99bce8;
  margin: 0px 5px;
  padding: 30px 20px;
  border-radius: 5px;
  width: 100%;
  color: white;
  text-align: center;
}

.dashboard-traffic-box.top-download {
  background: linear-gradient(180deg, #009900, #00ff00, #009900);
  margin-bottom: 10px;
}

.dashboard-traffic-box.top-upload {
  background: linear-gradient(180deg, #0d5bd9, #5693f5, #0d5bd9);
}

.dashboard-traffic-box .md-account  {
	font-size: 70px;
	line-height: 55px;
}

.traffic-box-num {
	font-size: 23px;
	font-weight: bold;
}

.dashboard-table th {
  text-align: center;
  font-size: 11px;
  font-weight:bold!important;
  vertical-align:middle!important;
}

.dashboard-table td {
  text-align: center;
  font-size: 10px;
  vertical-align:middle!important;
}

.dashboard-table  .panel-title {
	text-align:center;
	padding: 15px 30px;
	color: white;
}

.dashboard-table   .badge {
  font-weight: 500;
  font-size: 10px;
  width: 70px;
}
	
.dashboard-table.panel {	
	border: 1px solid #99bce8;
	margin-bottom:0px;
}

.panel > .table-responsive {
  padding: 0px 10px 10px 10px;
}

dashboard-table.panel > .table-responsive .table > tbody > tr > td:first-child {
  padding-left: 10px;
}

.dashboard-table table {
	color: black;
}

.dashboard-table  .panel-heading {
  padding: 0px;
}

.dashboard-table  .table-striped tbody tr:nth-of-type(2n+1) {
  background-color: rgba(174, 251, 255, 0.3);
}

.dashboard-table.most-timeout .panel-heading {
  background: linear-gradient(to right, #ff0084, #b3005f, #800044, #b3005f, #ff0088);
}

.dashboard-table.most-intermittent .panel-heading {
  background: linear-gradient(to right, #ffd11a, #cc7a00, #b36b00, #cc7a00, #ffd11a);
}

.dashboard-table.latest-report .panel-heading {
 background: linear-gradient(to right, #00ffff, #4d4dff, #0000ff, #4d4dff, #00ffff);
}

@media (max-width: 1000px) and (max-height: 475px) {
	.cpu-popup-graph.x-window, .latency-popup-graph.x-window, .traffic-popup-graph.x-window, .total-download-popup-graph.x-window, .total-upload-popup-graph.x-window, .log-popup-graph.x-window, .packetloss-popup-graph.x-window {
		width:70%!important;
		height: calc(100vh - 25px)!important;
		top: 10px !important;
		left: 15% !important;
	}
	
	.cpu-popup-graph .x-window-body,.latency-popup-graph .x-window-body, .traffic-popup-graph .x-window-body, .total-download-popup-graph .x-window-body, .total-upload-popup-graph .x-window-body, .log-popup-graph .x-window-body, .packetloss-popup-graph .x-window-body {
		width:100%!important;
		height: calc(100vh - 60px)!important;
	}
	
	.x-window .x-tool-after-title {
		left: auto !important;
		right: 0!important;
	}
	
	.x-window-header, .x-window-header-body,  .x-window .x-box-inner , .x-window .x-box-target{
		width: 100%!important;
	}
	
	.x-css-shadow {
		display:none!important;
	}
	
	.add-edit-device, .add-edit-speedlimit , .add-edit-location, .add-edit-user{
		top: 20% !important;
		left: 30% !important;
	}
	
	#page-designer-win.x-window , #page-designer-win .x-window-plain .x-window-body, #page-designer-win.x-window .x-box-inner, #page-designer-win.x-window .x-box-target{
		width: 100%!important;
	}
	
	#page-designer-win.x-window .x-tool-after-title {
		width: 100% !important;
		left: auto !important;
		text-align: right;
	}
	
	.x-html-editor-wrap  .x-html-editor-container {
		overflow:auto!important;
	}
	
	.x-html-editor-wrap  .x-box-inner {
		max-width:none!important;
	}
	
	#page-designer-win .x-html-editor-wrap .x-toolbar {
		width: 600px !important;
	}
	
	#page-designer-win.x-window .x-html-editor-wrap .x-box-inner {
		width: 100% !important;
		overflow-x: auto;
	}
	
	#page-designer-win #title, #page-designer-win #footer {
		width: 100%!important;
	}
	
	.site-menu > .site-menu-item > .site-menu-sub
	{
		max-height: 170px !important;
	}
	
	.x-panel-default {
		width: 100%!important;
	}
	
	.no-data-found  img {
		max-height: 200px;
	}
	
	#log-tab , #log-tab-body, #log-tab-body  .x-panel, #log-tab-body  .x-panel-body {
		height: 100%!important;
	}
}

@media (max-width: 1370px) {
	.dashboard-user-box {
		width: 31%;
	}
	
	.dashboard-device-box {
		width: 22.6%;
	}
	
	.device-box-num {
		font-size: 17px;
	}
	
	.dashboard-traffic-box {
		padding: 20px;
	}
}

@media (max-width: 1080px) {
	.dashboard-user-box {
		width: 30%;
	}
	
	.dashboard-device-box {
		width: 23.7%;
	}
	
	.dashboard-traffic-box {
		padding: 5px 10px;
	}
	
	.dashboard-traffic-box .md-account {
		font-size: 50px;
	}
	
	.device-box {
		clear: both;
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767.98px) {
    .navbar-brand-center {
		transform: none;
		position: relative;
		left: auto;
	}
	
	.navbar-toggler-left {
		margin-left: 0px;
	}
	
	.navbar-toggler {
		padding-right:0px;
	}
	
	.x-css-shadow {
		display:none!important;
	}
	
	.x-html-editor-wrap  .x-html-editor-container {
		overflow:auto!important;
	}
	
	.x-html-editor-wrap  .x-box-inner {
		max-width:none!important;
	}
	
	#page-designer-win.x-window , #page-designer-win .x-window-plain .x-window-body, #page-designer-win.x-window .x-box-inner, #page-designer-win.x-window .x-box-target{
		width: 100%!important;
	}
	
	.x-panel-default {
		width: 100%!important;
	}
}

@media (max-width: 500px) {
	.cpu-popup-graph.x-window, .latency-popup-graph.x-window, .traffic-popup-graph.x-window, .total-download-popup-graph.x-window, .total-upload-popup-graph.x-window , .log-popup-graph.x-window, .packetloss-popup-graph.x-window{
		width:100%!important;
		left: 0!important;		
		top: 20vh !important;
	}
	
	.cpu-popup-graph, .latency-popup-graph, .traffic-popup-graph, .total-download-popup-graph, .total-upload-popup-graph , .packetloss-popup-graph {
		height: 275px!important;
	}
	
	.cpu-popup-graph .x-window-body,.latency-popup-graph .x-window-body, .traffic-popup-graph .x-window-body, .total-download-popup-graph .x-window-body, .total-upload-popup-graph .x-window-body, .packetloss-popup-graph .x-window-body {
		width:100%!important;
		height:240px!important;
	}
	
	.log-popup-graph  {
		/*height: 290px!important;*/
		height: 460px!important;
	}
	
	.log-popup-graph .x-window-body {
		width:100%!important;
		/*height:255px!important;*/
		height:425px!important;
	}
	
	.daily_graph
	{
		text-align:center; 
		width: 100%;
	}
	
	.total_dns_graph {
		padding-top: 10px;
	}
	
	/*#cpu-popup-graph_header, #cpu-popup-graph_header-body, #cpu-popup-graph_header-innerCt*/
	
	.x-window-header-body, .x-window-header {
		max-width: 100%;
	}
	
	.page {
		min-height:auto;
	}
	
	.x-shadow {
		display:none!important;
	}
	
	.panel-body, .panel-footer, .panel-title {
		padding-right: 10px;
		padding-left: 10px;
	}
	
	.x-window , .x-window-plain .x-window-body, .x-window .x-box-inner, .x-window .x-box-target{
		max-width: 100%;
	}
	
	.x-window .x-tool-after-title {
		width: 100% !important;
		left: auto !important;
		text-align: right;
	}
	
	.title-image {
		margin-left: 7px;
	}
	
	.x-column {
		width: 100%!important;
	}
	
	#page-designer-win #left-column .x-container {
		width: 100%!important;
	}
	
	#page-designer-win #left-column .x-html-editor-wrap {
		width: 100%!important;
		overflow:auto!important;
	}
	
	.x-html-editor-wrap .x-toolbar-default::after {
		display:block!important;
	}
	
	.x-html-editor-wrap  .x-html-editor-container {
		overflow:auto!important;
	}
	
	.x-html-editor-wrap  .x-box-inner {
		max-width:none!important;
	}
	
	/*#page-designer-preview {
		height: 619px!important;
	}*/
	
	#page-designer-win-body{
		height: 1600px!important;
	}
	
	#page-designer-win {
		height: 1630px!important;
	}
	
	.panel-heading {
		padding: 10px 0px 0px 10px;
	}
	
	.no-data-found {
		padding-top: 20%;
		font-size: 14px;
		line-height: 20px;
	}
	
	.no-data-found  img {
		max-height: 130px;
	}
	
	#log-tab , #log-tab-body, #log-tab-body  .x-panel, #log-tab-body  .x-panel-body {
		height: 100%!important;
	}
	
	.dashboard-user-box {
		width: 30.5%;
	}
	
	.dashboard-device-box {
		width: 47%;
		margin-bottom: 8px;
	}
	
	#ticker_bg_color_field {
		width:100%!important;
	}
	
	.dashboard-table th {
	  text-align: center;
	  font-size: 9px;
	  font-weight:bold;
	}

	.dashboard-table td {
	  text-align: center;
	  font-size: 9px;
	}
	
}

@media (max-width: 400px) {
	.dashboard-user-box {
		margin: 0px 4px;
	}
	
	.dashboard-device-box {
		width: 46%;
	}
}