h1 {
	color: #7bc257;
}

h2 {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	display:inline-block;
	margin: 40px 8px 10px 8px;
	color: #cccccc;
}


a {
	color: #c2548a;
	display:inline-block;
	text-decoration: none;
	font-weight: 400;
}
a:hover {
	color: #931f4d
}

body {
	background: LINEAR-GRADIENT(0deg, rgba(122,194,87,0.6), #FFFFFF)
}

html, body {
	height: 100%;
	margin: 0;
	font-family: sans-serif;
}

.globalHeader {
	background-color: #72df11;
	z-index: 120;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 45px;
	line-height: 41px;
	color: #ffffff;
	display: -moz-flex;
	display: -ms-flex;
	display: -ms-flexbox;
	/* [1] */
	display: flex;
}

.globalHeader_logo {
	color: #FFFFFF;
	padding-left: 10px;
	padding-top: 5px;
}

.globalHeader_logo img {
	height: 40px !important;
}

.globalHeader_separator {
	border-right: 0.5px dotted rgba(255, 255, 255, .5);
	width: 1px;
	height: 36px;
	top: 3px;
	position: relative;
}

.globalHeader_left_block {
	width: 49px;
}

.globalHeader_user {
	right: 25px;
	padding-left: 25px;
	position: absolute;
	border-left: 0.5px dotted rgba(255, 255, 255, .5);
	height: 36px;
	top: 3px;
	font-weight: bold;
}

.globalMenu {
	top: 45px;
	width: 50px;
	height: 100%;
	position: fixed;
	left: 0px;
	background: #191C21;
	color: rgba(255, 255, 255, 0.4);
	font-size: 30px;
	z-index: 5;
	padding-top: 15px;
}
.menuSelected {
	color: rgba(174, 255, 0, 1);
}


.container {
	height: auto;
	position: absolute;
	left: 50px;
	top: 45px;
	width: -moz-calc(100% - 50px);
	width: -webkit-calc(100% - 50px);
	width: calc(100% - 50px);
}

.tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #191C21;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 5px;

	font-size: 15px;
	font-family: sans-serif;

	/* Position the tooltip */
	position: relative;
	z-index: 15;
	left: 20px;
	top: -9px;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

.material-icons:hover .tooltiptext {
	visibility: visible;
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 30px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';

	padding: 12px 10px;
	cursor: pointer;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

.material-icons.md-24 {
	font-size: 31px;
	padding: 10px 0 10px 8px;
	width: 35px;
}

.material-icons.md-10 {
	font-size: 20px;
	padding: 5px;
}

.icon_button {
	padding: 0;
}

.material-icons:hover {
	color: white;
}

button {
	border: none;
	background-color: #72df11;
	border-radius: 5px;
	padding: 7px 12px;
	-moz-border-radius: 5px;
	color: white;
	font-weight: bold;

	cursor: pointer;
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
}
button:hover {
	background-color: #bdc0c5;
}

button:disabled {
	background-color: #bdc0c5;
}

.submenu {
	background-color: #f1f1f1;
	border-bottom: 0.5px solid rgba(0, 0, 0, .15);
	height: 30px;
	padding-left: 8px;
}

.submenu button {
	background-color: #191c21;
	border-radius: 5px;
	padding: 0px 8px;
	height: 22px;
	margin: 4px 0 0 4px;
	font-weight: normal;
}

.submenu button:hover {
	background-color: #72df11;

}

#content {
	margin-right: 50px;
}

#overlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.65); /* Black background with opacity */
	z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
}

.popup {
	position: fixed;
	z-index: 2001; /* Make sure its above other items. */
	top: 50%;
	left: 50%;
	/* You will not need the below, its only for styling   purposes. */
	border: 1px solid #72df11;
	background-color: #fff;
	border-radius: 5px;
	text-align: center;
	display: none;
}

#add_device_popup {
	width: 350px;
	height: 200px;
	margin-top: -100px; /* Changes with height. */
	margin-left: -175px; /* Your width divided by 2. */
}

#edit_device_popup {
	width: 350px;
	height: 240px;
	margin-top: -120px; /* Changes with height. */
	margin-left: -175px; /* Your width divided by 2. */
}

#add_dns_popup {
	width: 350px;
	height: 140px;
	margin-top: -70px; /* Changes with height. */
	margin-left: -175px; /* Your width divided by 2. */
}

#edit_dns_popup {
	width: 350px;
	height: 140px;
	margin-top: -70px; /* Changes with height. */
	margin-left: -175px; /* Your width divided by 2. */
}

#static_dns_select_popup {
	width: 500px;
	height: 600px;
	margin-top: -300px; /* Changes with height. */
	margin-left: -250px; /* Your width divided by 2. */
	z-index: 2002;
}

.popup_header {
	width: 100%;
	height: 25px;
	background-color: #72df11;
	color: white;
	padding-top: 5px;
	font-weight: bold;
	margin-bottom: 10px;
}

.tail {
	width: 0px;
	height: 0px;
	border: 11px solid;
	border-color: transparent #191C21 transparent transparent;
	position: absolute;
	top: 3px;
	left: -21px;
}

#popups label {
	width: 110px;
	display: inline-block;
	text-align: left;
}

#popups input {
	border-radius: 5px;
	margin: 2px 0;
	width: 150px;
}

#popups select {
	border-radius: 5px;
}

#popups form {
	margin-bottom: 10px;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 20px;
	top: 5px;
	left: -4px;
}

/* 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: .4s;
	transition: .4s;
	width: 46px;
}

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

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

input:disabled + .slider {
	background-color: #e4e4e4;
}

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

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

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

input[type=number] {
	width: 39px;
	border: none;
	border-radius: 5px;
	height: 22px;
	text-align: center;
}

/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset]  {
	background-color: #7bc257;
	border: none;
	color: white;
	padding: 15px 80px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 13px;
	-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
	box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	margin: 5px 20px 5px 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
	background-color: #39ace7;
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
	-moz-transform: scale(0.95);
	-webkit-transform: scale(0.95);
	-o-transform: scale(0.95);
	-ms-transform: scale(0.95);
	transform: scale(0.95);
}

input[type=text], input[type=password]{
	background-color: #f6f6f6;
	border: none;
	color: #0d0d0d;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 5px;
	width: 85%;
	border: 2px solid #f6f6f6;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus {
	background-color: #fff;
	border-bottom: 2px solid #5fbae9;
}

input[type=text]:placeholder, input[type=password]:placeholder {
	color: #cccccc;
}

footer {
	position: fixed;
	height: 50px;
	bottom: 0;
	width: 100%;
	background-color: #ccc
}

footer p {
	padding: 15px;
}

.error-message {
	color: #a94442;
}

.error-message:first-letter {
	text-transform: capitalize;
}

.wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100%;
	padding: 20px;
	margin-top: -75px;
}

#formContent {
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background: #fff;
	padding: 30px;
	width: 90%;
	max-width: 450px;
	position: relative;
	padding: 0px;
	-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
	box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
	text-align: center;
}

#formFooter {
	background-color: #f6f6f6;
	border-top: 1px solid #dce8f1;
	padding: 10px;
	text-align: center;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

.panel-default>.panel-heading {
	color: #333;
	background-color: #fff;
	border-color: #e4e5e7;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.panel-default>.panel-heading a {
	display: block;
	padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
	content: "";
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	float: right;
	transition: transform .25s linear;
	-webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
	background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
	content: "\2212";
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
	content: "\002b";
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}