@font-face {
	font-family: neuehaasgrotesk;
	src: url('neuehaasgrotesk.otf');
}
@keyframes wrong-password {
        25% {transform: translate(3px);}
        50% {transform: translate(-3px);}
        75% {transform: translate(3px);}
        100% {transform: translate(-3px);}
}
@keyframes leave {
	from {transform: translate(0); }	
	to {transform: translate(1000px);}
}
@keyframes enter {
	from {left: 3000px;}
	to {left: 0px;}
}
@media (max-width: 1275px) {
	@-ms-viewport {
		width: 750px;
	}
	@viewport {
		width: 750px;
	}
	#container {
        	width: 600px;
        	margin: 75px auto;
	}
	#cacti {
        	width: 600px;
	}
	#cacti .container {
        	width: 600px;
        	float: left;
        	margin: 0 20px 10px 0;
	}
	#tickets {
		width: 550px;
	}	
}
@media (min-width: 1275px) and (max-width: 1900px) {
	#container {
        	width: 1250px;
        	margin: 75px auto;
	}	
	#cacti {
        	width: 1250px;
	}
	#tickets {
		width: 1250px;
	}
}
@media (min-width: 1900px) {
        #container {
                width: 2000px;
                margin: 75px auto;
        }
        #cacti {
                width: 1300px;
        	float: left;
	}
	#tickets {
		width: 600px;
		float: left;
	}

}
body {
	background-color: #fafafa;
	font-family: neuehaasgrotesk;
}
h1 {
}
#widget-container {
	position: fixed;
	right: 25px;
	bottom: 25px;
	width: 500px;
}
#orders {
        position: relative;
        float: right;
        margin: 5px 0;
        width: 300px;
        min-height: 100px;
        max-height: 600px;
        border-radius: 5px;
        background-color: white;
        padding: 10px;
        border: 1px solid black;
        box-shadow: 0px 0px 47px 7px rgba(0,0,0,0.05);
/*      color: #EF2B2D;*/
}
#orders h3 {
        font-weight: 700;
        margin: 0;
        padding: 0;
}
#addons {
        position: relative;
        float: right;
        margin: 5px 0;
        width: 300px;
        min-height: 100px;
        max-height: 600px;
        border-radius: 5px;
        background-color: white;
        padding: 10px;
        border: 1px solid black;
        box-shadow: 0px 0px 47px 7px rgba(0,0,0,0.05);
/*      color: #EF2B2D;*/
}
#addons h3 {
        font-weight: 700;
        margin: 0;
        padding: 0;
}
#duplicate-server {
        position: relative;
        width: 300px;
        min-height: 100px;
        max-height: 600px;
        border-radius: 5px;
        background-color: #FDEBEB;
        padding: 10px;
        border: 5px solid #EF2B2D;
        box-shadow: 0px 0px 47px 7px rgba(0,0,0,0.05);
	color: #EF2B2D;

}
#cancellations {
        position: relative;
	float: right;
	margin: 5px 0; 
        min-height: 100px;
        max-height: 600px;
        border-radius: 5px;
        background-color: white;
        padding: 10px;
        border: 1px solid black;
        box-shadow: 0px 0px 47px 7px rgba(0,0,0,0.05);
/*      color: #EF2B2D;*/
}
#cancellations h3 {
	font-weight: 700;
	margin: 0;
	padding: 0;
}
th, td {
	padding: 2.5px;
}	
.ticket-url {
	text-decoration: none;
}
#tickets {
}
#ticketswrapper {
	height: 1000px;
	overflow-y: hidden;
}
#cacti .container {
	width: 600px;
	float: right;
	margin: 0 20px 10px 0;
}
#cacti iframe {
	width: 600px;
	height: 1000px;
	overflow-y: hidden;
	padding: 0;
	border: 1px solid #F0F0F0;
	display: block;
}
#cacti .toptalker {
	height: 100px;
	width: 600px;
	background-color: white;
	padding: 0 5px; 
	border-radius: 3px;
	margin: 7.5px 0 0 0;
	overflow-y: hidden;
	overflow-x: hidden;
}
/*#toptalker-container {
        height: 500px;
        background-color: white;
        padding: 0 5px;
        border-radius: 3px;
        margin: 7.5px 0 0 0;
        overflow-y: hidden;
}
#toptalker-container ul {
	float: left;
	width: 50%;
}*/	
#cacti .cacti {
	height: 350px;	
	background-color: white;
	border-radius: 3px;
 	padding: 5px;
}
.cacti, .toptalker {
	box-shadow: -2px 2px 0px 0px rgba(232,232,232,1);
}
.close {
    display: none;
}
.show {
  display: block;
}
.dropmenu {
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 25px;
}
.dropmenu h3:hover {
	cursor: pointer;
}
.dropmenu h3 {
  padding: 10px;
  width: 500px;
  margin: 0;
  font-size: 16pt;
}
a {
	color: inherit;
	text-decoration: none;	
}
.menustyle {
	box-shadow: -2px 2px 0px 0px rgba(232,232,232,1);
	border: 1px solid #F0F0F0;	
	border-radius: 3px;
	background-color: white;
	z-index: 25;
}
.menustyle h3:hover {
	background-color: #F0F0F0;
}
.menustyle > h3:first-child {
	border-radius: 3px 3px 0 0;	
	background-color: #F8F8F8; 
}
.menustyle h3:last-child {
	border-radius: 0 0 3px 3px;
}
#network-select-menu {
	color: #696969;
	float: left;
}
#menu {
	position: fixed;
	top: 25px;
	right: 25px;
}
#menu:hover {
	cursor: pointer;
}
.ticket-url {
        color: #696969; 
        text-decoration: none;
}
.ticket-url:hover {
        color: #939393;
}
#time {
        font-size: 32pt;
        width: 200px;
        margin: 10px auto;
        color: #696969;
}
#department-container div {
        margin: 0 10px;
        color: #696969;
}
.department {
        width: 100%;
        color: #696969;
        padding: 5px;
        font-family: neuehaasgrotesk;
}
.ticket {
        width: 100%;
}
.ticket-container {
        position: relative;
        top: 5px;
        margin: 10px;
        padding: 15px;
        background-color: white;
        border: 1px solid #f6f6f6;
        border-radius: 3px;
        box-shadow: -2px 2px 0px 0px rgba(232,232,232,1);
}
.old .ticket-container {
        border: 1px solid #ffa190;
        box-shadow: -2px 2px 0px 0px #ffa190;
        background-color: #ffefec;
}
.ticket h2 {
        font-size: 14pt;
        margin-bottom: 2px;
        color: #696969;
}
.ticket p {
        color: #939393;
        height: 64px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
}
.response {
        color: #939393;
        margin-bottom: 10px;
}
.response-user {
        color: #696969;
}
.old .response-time {
        color: #ff6347;
}
.department {
        font-size: 12pt;
        line-height: 11pt;
        width: 95%;
        margin: auto;
}
a:hover {
        color: black;
}
#webcam-switch {
	position: fixed;
	top: 25px;
	right: 25px;
}
.wiggle {
	animation-name: wrong-password;
	animation-duration: .25s;
	animation-iteration-count: infinite;

}
.leave {
	animation-name: leave;
	animation-duration: .25s;
	animation-fill-mode: forwards;
}
.enter {
	animation-name: enter;
	animation-duration: .25s;
	animation-fill-mode: forwards;
}
.hide {
	display: none;
}
.show {
	display: initial;
}
#webcam-auth {
	position: relative;
	margin: 100px auto;
	width: 500px;
	height: 100px;
	border-radius: 25px;
	background-color: white;
	text-align: center;
	font-size: 32pt;
	color: #939393;
	overflow-y: hidden;
}
#webcam-auth:hover {
	cursor: pointer;
	background-color: #f2f2f2;
}
#webcam-auth span {	
	position: relative;
	top: 25px;
	padding: 5px;
}
#password:hover {
	cursor: text;
}
#password:focus {
	outline: none;
}
#webcam-container {
	width: 75%;
	margin: auto;
}
#webcam-container img {
	height: 100%;
	float: left;
	margin: 5px;
	width: 300px;
	height: 300px;	
}
.traffic > h3 {
	font-size: 12pt;
	margin: 0;
	line-height: 12pt;
	padding: 0;
}
.usage {
        color: #32CD32;
}
.high-usage {
        color: #FF0000;
}
img {
        width: 16px;
        height: 16px;
}
.ifdesc-ip {
        color: #939393;
}
#hover {
	position: fixed;
	top: 100px;
	right: 100px;
	font-size: 11pt;		
	background-color: white;
	border-radius: 5px;
	padding: 10px;	
}
.refresh:hover {
	cursor: pointer;
}
.toptalker-container {
	padding: 10px;
}
.traffic {
	float: left;
	width: 150px;	
	margin-right: 50px;
}