@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Nunito Regular'), local('Nunito-Regular'),
       url('../fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nunito-v9-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'SonicWallIconFont';
  src:  url('../fonts/SonicWallIconFont.eot');
  src:  url('../fonts/SonicWallIconFont.eot') format('embedded-opentype'),
    url('../fonts/SonicWallIconFont.woff2') format('woff2'),
    url('../fonts/SonicWallIconFont.ttf') format('truetype'),
    url('../fonts/SonicWallIconFont.woff') format('woff'),
    url('../fonts/SonicWallIconFont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'SonicWallIconFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-info:before {
  content: "\e094";
  color: #47AFE8;
  position: relative;
  top: 1px;
  cursor: pointer;
}
.icon-threat-Intrusion:before {
  content: "\f1ac";
  color: #F6A23E;
}
.icon-threat-Malware:before {
  content: "\f1ad";
  color: #C98ABF;
}
.icon-threat-Spyware:before {
  content: "\f1ae";
  color: #3DB6A3;
}
.typeIcon {
	font-size: 19px;
	position: relative;
	top: -1px;
}
body {
	background: black;
	font-family: 'Nunito';
	font-weight: 400;
	overflow: hidden;
}

#map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: #000;
	overflow: hidden;
}
#mapBackground {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: no-repeat center;
	background-image: url('../../map.svg');
	background-size: contain;
}
div.bottomBar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
}

div.bottomBar .panel,md-card {
	width: 240px;
	background: rgba(0, 0, 0, 0);
	margin: 0 10px 10px 0;
	float: left;
}
div.panel .panelHeader {
	font-size: 12px;
	padding: 6px 0 0 10px;
	height: 20px;
	color: #000;
	/*#AEAEAE;*/
	background: rgba(255, 121, 26, 1);
	/*rgba(255, 255, 255, 0.0980392156862745);*/
}
div.panel .panelBodyContainer {
	height: 110px;
	background: rgba(255, 255, 255, 0.0588235294117647);
	/*rgba(255, 255, 255, 0.2);*/
}
div.panel .panelBody {	
	font-size: 13px;
	height: 36px;
	border-bottom: 1px solid #000;
	position: relative;	
}
div.panel .panelBody .pbLeft {
	width: 43px;
	padding: 9px 12px 0 0;
	color: #CCCCCC;
	text-align: right;
}
div.panel .panelBody .pbMiddle {
	position: absolute;
	top: 9px;
	left: 55px;
}
div.panel .panelBody .pbRight {
	width: 138px;
	color: #868686;
	position: absolute;
	left: 90px;
	top: 9px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
}

.mobilePanelHeader {
	font-size: 14px;
	line-height: 30px;
	background: rgba(255, 121, 26, 1);
	text-align: center;
	margin-bottom: 10px;
}
.mobilePanelEmpty {
	color: #CCCCCC;
	text-align: center;
	height: 108px;
	line-height: 36px;
}
.mobilePanel {
	font-size: 14px;
	display: flex;
	line-height: 36px;
	width: 223px;
	margin: auto;
}
.mobilePanel .mpLeft {
	width: 43px;
	color:#CCCCCC;
	margin-right: 12px;
	text-align: right;
}
.mobilePanel .mpMiddleSquare {
	position: relative;
	top: 9px;
	width: 16px;
	height: 16px;
	margin-right: 6px;
}
.mobilePanel .mpMiddleType {
	position: relative;
	top: 5px;
	width: 22px;
}
.mobilePanel .mpRight {
	color: #868686;
	margin-left: 8px;
	width: 138px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
}

@media (max-width: 1270px) {
  #bottomBarPC {
  	display: none;
  }
  #map {
  	overflow-x: scroll;
  }
}
@media (min-width: 1271px) {
  #bottomBarMobile {
  	display: none;
  }
}

md-card {
  min-width: 240px;
}

md-card md-card-content {
  padding: 0px;
}

div[layout="row"] {
  overflow: auto;
}

.ngIncludeItem {
	position: absolute;
    animation-duration: 0.20s;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.20s;
    -webkit-animation-timing-function: ease-in-out;
}

/* When the page enters, slide it from the right */
.ngIncludeItem.ng-hide-remove {
    animation-name: slideFromRight;
    -webkit-animation-name: slideFromRight;
}
/* When the page enters and moveToLeft is true, slide it from the left(out of the user view) to the right (left corner) */
.ngIncludeItem.moveToLeft.ng-hide-remove {
    animation-name: slideFromLeft;
    -webkit-animation-name: slideFromLeft;
}
/* When the page leaves, slide it to left(out of the user view) from the left corner,
    in other words slide it from the left(out of the view) to the left corner but in reverse order */
.ngIncludeItem.ng-hide-add {
    animation-name: slideFromLeft;
    animation-direction: reverse;
    -webkit-animation-name: slideFromLeft;
    -webkit-animation-direction: reverse;
}
/* When the page leaves, slide it to the right(out of the user view) from the the left corner,
    in other words, slide it from the right but in reverse order  */
.ngIncludeItem.moveToLeft.ng-hide-add {
    animation-name: slideFromRight;
    animation-direction: reverse;
    -webkit-animation-name: slideFromRight;
    -webkit-animation-direction: reverse;
}

@keyframes slideFromLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideFromLeft {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-webkit-keyframes slideFromRight {
    0% {
        -webkit-transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}
::-webkit-scrollbar {
	display: none;
}