/*

 Copyright 2010 Red Hat, Inc.

 Red Hat licenses this file to you under the Apache License, version
 2.0 (the "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
 implied.  See the License for the specific language governing
 permissions and limitations under the License.

*/

@import url("../app/frameworks/bootstrap.css");

section {
  padding-top: 1em;
  margin-bottom: 1em;
}

small {
  font-size:90%;
  color: #BFBFBF;
}

.hide {
  display: none;
}

.template {
  display: none;
}

.icon {
  line-height: 0;
  margin: 0;
  padding: 2px;
}
.center {
  text-align: center;
}
.center * {
  text-align: center;
}

.accordion * {
  background: transparent url(../img/disclosure-triangle-closed.png) center left no-repeat;
  padding: 0 0 0 25px;
}

.accordion-opened * {
  background: transparent url(../img/disclosure-triangle-open.png) center left no-repeat;
  padding: 0 0 0 25px;
}

div.nav_buttons {
  clear:both;
}
div.nav_buttons li div.summary {
  padding:0; margin:0;
}
.nowrap {
  white-space:nowrap;
}
.green-circle {
    display: inline-block;
    width:1em;
    height:1em;
    margin: 0 1em 0 0em;
    vertical-align:middle;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    /*
    background-image: linear-gradient(bottom, rgb(0,220,0) 25%, rgb(0,255,0) 100%);
    background-image: -o-linear-gradient(bottom, rgb(0,220,0) 25%, rgb(0,255,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(0,220,0) 25%, rgb(0,255,0) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,220,0) 25%, rgb(0,255,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(0,220,0) 25%, rgb(0,255,0) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(0,220,0)),
        color-stop(1.0, rgb(0,255,0))
    );
    */

    background-image: linear-gradient(bottom, rgb(210,230,174) 25%, rgb(234,255,194) 100%);
    background-image: -o-linear-gradient(bottom, rgb(210,230,174) 25%, rgb(234,255,194) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(210,230,174) 25%, rgb(234,255,194) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(210,230,174) 25%, rgb(234,255,194) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(210,230,174) 25%, rgb(234,255,194) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(210,230,174)),
        color-stop(1, rgb(234,255,194))
    );
}

.red-circle {
    display: inline-block;
    width:1em;
    height:1em;
    margin: 0 1em 0 0em;
    vertical-align:middle;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    /*
    background-image: linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,0,0) 100%);
    background-image: -o-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,0,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,0,0) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,0,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,0,0) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(190,30,46)),
        color-stop(1, rgb(255,0,0))
    );
    */
   background-image: linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,41,62) 100%);
    background-image: -o-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,41,62) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,41,62) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,41,62) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(190,30,46) 25%, rgb(255,41,62) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(190,30,46)),
        color-stop(1, rgb(255,41,62))
    );
}

div.nav_buttons li {
  padding:0; margin:0;
  display: block;
  padding: 1em;
}

div.nav_buttons ul {
  padding:0;
  margin:0;
}

div.nav_buttons + a.add img {
  padding: 1em;
}

#osgi_details_container {
  padding:2em;
  overflow:scroll;
}

.borderless, table.borderless tbody tr td {
  border: none;
}

.controls {
  height: 28px;
}

.top-border {
	border: none;
	border-top: 1px solid #ddd;
	padding: 10px 5px 0 5px;
}

#addProfileItem {
	padding-bottom: 3px;
    text-indent: 3px;
}

.block {
  display: block;
}

.right {
  float:right;
}

.left {
  float:left;
}

.hover_area .hover_hide {
  visibility:hidden;
}
.hover_area:hover .hover_hide {
  visibility:hidden
}

tr td div.hovered  {
  visibility:hidden;
}

tr:hover td div.hovered  {
  visibility: visible;
}

.hover {
  visibility:hidden
}

.hovered:hover {
  visibility: visible;
}

div.legend table {
  padding:5px;
  width:auto;
  background: white;
}
div.legend table td {
  border:none;
  padding:0;
}

div.edit-list ul {
  margin: 0 0 .5em 0;
}

div.edit-list li {
  display: block;
  border:0;
  padding: .5em;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
  color: black;
}

div.edit-list li:last-child {
  border-bottom: none;
}

div.edit-list ul li a.delete {
  float:right;
}

div.edit-list ul li a.delete-role {
  float:right;
}

div.edit-list ul li:hover a.delete {
  visibility: visible;
}

pre.log {
  background:white;
  border:none;
  padding:0;
  margin:0;
  white-space:nowrap;
}

div.dataTables_scrollHeadInner table {
  margin:0px;
  border-bottom: none;
}
div.dataTables_scrollBody table {
  border-top: none;
}

input[type="checkbox"] {
  margin-right: .5em;
}

input.wide {display:block; width:100%;padding:0;border-width:0}

ul.simple {
  padding:0;
  margin:0;
}
ul.simple li {
  display: block;
  color:inherit;
}

table tbody tr.selected td {
  color: #000;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: -ms-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80D6F7), color-stop(100%, #4E9FDD));
  background-image: -webkit-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: -o-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: linear-gradient(top, #80D6F7, #4E9FDD);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80D6F7', endColorstr='#4E9FDD', GradientType=0);
}

table tbody tr:last-child:hover td:first-child {
    border-radius: 0px 0px 0px 4px;
}

table tbody tr:last-child:hover td:last-child {
    border-radius: 0px 0px 4px 0px;
}

table tbody tr.selected:last-child td:first-child {
    border-radius: 0px 0px 0px 4px;
}

table tbody tr.selected:last-child td:last-child {
    border-radius: 0px 0px 4px 0px;
}


.alert-message.block-message.error {
    background-color: #FADCDF;
    border-color: #be1e2d;
}

.close {
    text-shadow: transparent 0 0 0;
}

.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
    color: #000;
    text-shadow: transparent 0 0 0;
}

.topbar-inner, .topbar .fill {
    background-image: none;
}

.topbar .fill .container {
    background-color: #be1e2d;
}

.topbar h3 a, .topbar .brand {
    color: #fff;
    font-size: 24px;
    line-height: 39px;
    padding-bottom: 8px;
    margin-top: 0;
}

.topbar a {
    color: #fff;
    text-shadow: transparent 0 0 0;
    font-size: 18px;
    margin-top: 10px;
    padding: 7px 10px;
    line-height: 20px;
    margin-left: 3px;
    margin-right: 3px;
}

.topbar a:hover {
    background-color: #4E9FDD;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    border: none;
    border-bottom: 1px solid #4E9FDD;
}

.topbar div > ul .active > a, .nav .active > a {
    background-color: #4E9FDD;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    border: 1px solid #007aa7;
    border-bottom: 1px solid #4E9FDD;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", "Liberation Sans", FreeSans, Arial, sans-serif;
    color: #000;
    background-color: #333;
    font-size: 12px;
}



table {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    border-collapse: separate;
}

table tbody tr.selected:first-child td {
    -webkit-border-top-left-radius: 0px;
    -moz-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
}

.container {
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -15px;
}

.topbar div > ul a.menu:hover, .nav a.menu:hover, .topbar div > ul li.open .menu, .nav li.open .menu, .topbar div > ul .dropdown-toggle:hover, .nav .dropdown-toggle:hover, .topbar div > ul .dropdown.open .dropdown-toggle, .nav .dropdown.open .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.2);
}

.topbar div > ul a, .nav a {
	padding: 5px 10px 3px;
	margin: 6px 2px 12px;
}

.page-header {
	margin-left: 0;
	margin-right: 40px;
	border: none;
	margin-bottom: 17px;
}

#outer {
    min-height: 100%;
    background-color: #272727;
}
#middle {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    min-height: 100%;
}

#header {
    background-image: url("../img/header-check.png");
    padding: 20px 20px 8px 20px;
    border-bottom: 1px solid #000000;
    box-shadow: 0 3px 0 0 #4E9FDD;
    position: relative;
}

#logo {
    float: left;
}

#topbar_nav_container {
	float: left;
	clear: left;
	margin-left: -3px;
}

#topbar_user_container {
	position: relative;
	top: 12px;
	text-align: right;
	right: -2px;
	clear: right;
}

#productname {
    float: right;
    font-size: 20px;
    color: white;
    padding-top: 8px;
}

#flash_container {
    padding-left: 15px;
    padding-right: 20px;
}

#page_container {
    background-color: #fff;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0 15px 20px;
}

#footer {
    background-color: #272727;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    font-weight: normal;
    font-style: italic;
    color: #bbb;
    text-align: center;
}

.topbar {
	height: 60px;
    z-index: 0;
}

#username {
	float: right;
	text-align: right;
	color: white;
  font-size: 14px;
}

span.logout-divider {
  opacity:0.5;
}

#username span.username {
	color: #fff;
	font-weight: bold;
}

#username a {
	color: #fff;
	text-decoration: none;
  padding: 0 4px 1px 4px;
  font-size: 14px;
}

#username a:hover {
	background-color: #4E9FDD;
	background-image: none;
	color: #fff;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.topbar div > ul .menu-dropdown, .nav .menu-dropdown, .topbar div > ul .dropdown-menu, .nav .dropdown-menu {
	background-color: #BFDCE8;
    -webkit-border-radius: 0 4px 4px 4px;
    -moz-border-radius: 0 4px 4px 4px;
    border-radius: 0 4px 4px 4px;
	padding: 0;
	margin-left: 2px;
}

.topbar div > ul .menu-dropdown li a, .nav .menu-dropdown li a, .topbar div > ul .dropdown-menu li a, .nav .dropdown-menu li a {
	color: #fff;
	text-shadow: transparent 0 0 0;
	margin: 5px 2px;
}

.topbar div > ul .menu-dropdown li a:hover, .nav .menu-dropdown li a:hover, .topbar div > ul .dropdown-menu li a:hover, .nav .dropdown-menu li a:hover {
	background-color: #BFDCE8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
	background-image: none;
	filter: none;
}

.detailsBlock {
	padding-top: 10px;
}

table.borderless tr td {
  padding: 5px;
}

table.borderless tr td:first-child {
  text-align: right;
}

table.borderless tr td:last-child {
  text-align: left;
}

table.overviewSection {
	border: 1px solid #ddd;
}

table.overviewSection th, table.overviewSection td {
	padding: 5px 10px 4px;
}

table.overviewSection div.edit-list ul li {
  /* border-bottom: 1px solid #eee; */
}

table.overviewSection div.edit-list.agents-page ul li:first-child {
  padding-top: 0px;
}

table.overviewSection div.edit-list.agents-page ul li {
  padding-left: 0px;
}

table.overviewSection div.edit-list ul li:hover {

}

table.overviewSection tr th {
  border-bottom: 1px solid #ddd;
}

table.overviewSection tr td {
	border: none;
}

table.overviewSection tr td.wrap {
  white-space: normal;
}

table.overviewSection tr td:first-child {
  width: 10%;
	white-space: nowrap;
	text-align: right;
}

table.overviewSection tr td:last-child {
  width: 90%;
}


table.overviewSection tr td.right {
  text-align: right;
}

table.overviewSection tr td:last-child {
    text-align: left;
}

div.button-tray {
  display:inline-block;
  background-color: transparent;
  border: none;
  line-height:0;
  padding:.2em;
}

.btn {
	margin-left: 2px;
}

.btn:first-child {
	margin-left: 0;
}

.btn.primary {
  background-color: #4E9FDD;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#80d6f7), to(#4E9FDD));
  background-image: -moz-linear-gradient(top, #80d6f7, #4E9FDD);
  background-image: -ms-linear-gradient(top, #80d6f7, #4E9FDD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80d6f7), color-stop(100%, #4E9FDD));
  background-image: -webkit-linear-gradient(top, #80d6f7, #4E9FDD);
  background-image: -o-linear-gradient(top, #80d6f7, #4E9FDD);
  background-image: linear-gradient(top, #80d6f7, #4E9FDD);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80d6f7', endColorstr='#4E9FDD', GradientType=0);
}

.btn.primary:hover {
  background-position: 0 0;
  background-color: #4E9FDD;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#80D6F7), to(#4E9FDD));
  background-image: -moz-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: -ms-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80D6F7), color-stop(100%, #4E9FDD));
  background-image: -webkit-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: -o-linear-gradient(top, #80D6F7, #4E9FDD);
  background-image: linear-gradient(top, #80D6F7, #4E9FDD);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80D6F7', endColorstr='#4E9FDD', GradientType=0);
}

form.body.wizard {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  width: 560px;
  height: 420px;
}

form.body.wizard fieldset {
  margin-bottom: 0px;
  padding-top: 0px;
}

div.modal-body.wizard {
  padding: 0px;
}

.twipsy {
  filter: alpha(opacity=100);
  -khtml-opacity: 1.0;
  -moz-opacity: 1.0;
  opacity: 1.0;

}

div.twipsy .twipsy-inner {
    box-shadow: 2px 2px 2px #333;
    box-shadow: 2px 2px 2px #333;
    box-shadow: 2px 2px 2px #333;
    box-shadow: 2px 2px 2px #333;
}


ul.inputs-list.agent-selector {
  height: 250px;
  width: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
}

ul.inputs-list.profile-selector {
  height: 200px;
  width: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.fixed250px {
  height: 250px;
  width: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.fixed200px {
  height: 200px;
  width: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.fixed150px {
  height: 150px;
  width: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
}

li.padded {
  padding-left: 3px;
}


.wizardPageInstructions {
	margin-bottom: 15px;
}

p.radioDescription {
	position: relative;
	left: 2px;
	margin-bottom: 0;
}

ul.inputs-list {
    margin-left: 20px;
}

.labelless ul.inputs-list {
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 0px;
}

div.input ul.inputs-list {
    margin-left: 0;
}

ul.inputs-list label strong {
	color: #000;
}

.inputs-list input[type="radio"].agent-select, .inputs-list input[type="checkbox"].agent-select {
	margin-bottom: 9px;
}

form .labelless {
	margin-left: 0;
}

.agent-select {
  float: left;
}

td.indicator {
  position: relative;
  text-align: center;
  vertical-align: middle;
}

img.indicator {
  height: 20px;
  width: 20px;
}

fieldset legend {
  line-height: 2;
  padding-left: 20px;
}

.pad1 {
  padding: 1px;
}

.pad1em {
  padding: 1em;
}

.welcome-page {
  height: 475px;
}

.create-button {
  text-align: center;
  padding-top: 1.2em;
  margin-top: 10px;
  margin-right: 10px;
}

span.error {

}

.queue-label {
  color: black;
  margin-right: 1em;
}

.modal {
	border-radius: 10px;
}

.modal-header {
    background-image: url("../img/modal-header.png");
	background-color: #6F6F6F;
    border-radius: 6px 6px 0 0;
}

.modal-header a {
    color: #ddd;
	filter: alpha(opacity=100);
	-khtml-opacity: 1.0;
	-moz-opacity: 1.0;
	opacity: 1.0;
}

.modal-header a:hover {
    color: #fff;
    filter: alpha(opacity=100);
    -khtml-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
}

.modal-header h3 {
	color: #fff;
}

#app_help {
    float: right;
    position: relative;
    top: 2px;
    cursor: pointer;
}

.tabs {
	margin-bottom: 0;
	margin-left: 20px;
	border-bottom: none;
}

.tabs li.active a {
	border: 1px solid #ddd;
	cursor: default;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background-color: #4E9FDD;
    color: white;
    position: relative;
    bottom: 10%;
    height: 110%;

}


.tabs li.active a:hover {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background-color: #4E9FDD;
    color: white;
    border: 1px solid #ddd;
	cursor: default;
}

.tabs li a {
	padding: 5px 14px 6px;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	display: inline-block;
	background-color: #e6e6e6;
	color: black;
	font-size: 13px;
	line-height: normal;
	border: 1px solid #ddd;
	margin-right: 3px;
}

.tabs li a:hover {
    background-color: #4E9FDD;
	background-position: 0 -15px;
    border-bottom: 1px solid #4E9FDD;
    color: white;
  	text-decoration: none;
	border: 1px solid #ccc;
	border-bottom: none;
}

.tab-body {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 10px;
	border: 1px solid #ddd;
}

#add-detail-item {
	white-space: nowrap;
	padding-top: 9px;
	height: 2em;
}

#add-detail-item input {
	margin-left: 4px;
	margin-right: 4px;
	min-width: 400px;
    vertical-align: top;
}

input, textarea, select {
	color: #404040;
}

/* Between span7 and span8; used for 2 columns that would normally be span8s when inside a tab body */
.span75 {
	width: 449px;
}
table#bundle_details tr td ul, table#service_details tr td ul {
	margin-left: 10px;
}

span.headerValue {
	overflow: scroll;
	width: 305px;
	display: inline-block;
}

table.nav-list tbody tr {
	cursor: pointer;
  height: 46px;
}

table.nav-list tbody tr td {
  vertical-align: middle;
}

table.overviewSection ul {
	margin-bottom: 0;
}

.breadcrumbs {
  margin-top: 0px;
  margin-bottom: 18px;
  font-size: 32px;
  line-height: 33px;
  color: #333333;
  font-weight: bold;
}

.breadcrumbs a {
  color: #333333;
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: #666666;
  text-decoration: none;
}

.big {
  width: 100%;
}

.less-big {
  width: 75%;
}

ul.type-select {
  width: 510px;
}

ul.type-select li {
  margin-bottom: 1em;
}

div.nav_buttons ul li div ul {
    margin-top: -1px;
}

ul.controls {
  list-style: none;
  height: 18px;
}

ul.controls li {
  display: inline;
  padding: 0px;
  padding-left: 6px;
  color: inherit;
  line-height: 16px;
  vertical-align: middle;
}

ul.controls li img {
  vertical-align: middle;
}

img.valigner
{
  height:100%;
  width: 0px;
  vertical-align: middle;
  visibility: hidden;
}


div.instances.nav_buttons ul li {
  padding: 5px;
  height: 50px;
}

div.instances.nav_buttons ul li div.box {
  margin-right: 3px;
}

.box {
  display: block;
  float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #e6e6e6;
  margin: 5px;
  width: 80px;
  white-space: nowrap;
}

.key {
  clear: left;

	background-color: #e6e6e6;

  font-size: 80%;
  font-weight: bold;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #e6e6e6;

  text-transform: uppercase;

  color: #000
}

.value {
  text-align: center;
  padding-top: 2px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  min-height: 1.15em;
  font-size: 85%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.box.right {
  float: right;
  width: 60px;
}

div.box.right a {
  margin-right: 2px;
  display: block;
  float: left;
}

div.box.hostname {
  width: 110px;
}

td.bundleId {
	max-width: 21px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

td.bundleName {
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

td.bundleVersion {
	max-width: 92px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

td.bundleState {
	max-width: 54px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

td.serviceId {
	max-width: 21px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

td.serviceClasses {
	max-width: 386px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

div.dataTables_filter {
  margin-bottom: 10px;
}

.sorting_asc {
  color: #fff;

  background-color: #27baf1;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a0e0f9), color-stop(25%, #a0e0f9), to(#27baf1));
  background-image: -webkit-linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: -moz-linear-gradient(top, #a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: -ms-linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: -o-linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0e0f9', endColorstr='#27baf1', GradientType=0);

}

.sorting :hover {
  background-color: #27baf1;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a0e0f9), color-stop(25%, #a0e0f9), to(#27baf1));
  background-image: -webkit-linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: -moz-linear-gradient(top, #a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: -ms-linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: -o-linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  background-image: linear-gradient(#a0e0f9, #a0e0f9 25%, #27baf1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0e0f9', endColorstr='#27baf1', GradientType=0);  
}

.sorting {
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
  background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
  background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
  background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
  background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
  background-image: linear-gradient(white, white 25%, #E6E6E6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#E6E6E6', GradientType=0);  
}

ul.repo-list {
  margin: 0px;
}

ul.repo-list li {
  list-style-type: none;
  font-size: 90%;
  color: black;
}

.value-display {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ddd;
  width: 40em;
  height: 20em;
  background-color: #fff;
}

#cloud-options {
  height: 12em;
}

.config-display {
  border: 1px solid #ddd; 
  border-radius: 4px; 
  padding: 5px;  
  margin-bottom: 5px;
  margin-right: 5px;
}

/* ------------------------------------------
CSS TOGGLE SWITCHES (Ionuț Colceriu)
Licensed under Unlicense
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */
@media only screen {

    /* Checkbox
     */
    .toggle {
        position: relative;
        display: block;
        width: 150px;

        padding: 0;
        margin: 0;
        margin-bottom: 1em;

        font-family: sans-serif;
        font-weight: bold;
        font-size: 12px;
        color: #fff;

        text-shadow: 1px 1px 1px #191b1e;
    }

    /* Position the label over all the elements, except the toggle-button
     * Clicking anywhere on the label will change the switch-state
     */
    .toggle label {
        position: relative;
        z-index: 3;
        text-align: left;

        display: block;
        width: 100%;
        padding: 3px 0;
        text-shadow: none;
        font-size: 12px;
    }

    /* Don't hide the input from screen-readers and keyboard access
     */
    .toggle input {
        position: absolute;
        opacity: 0;
        z-index: 5;
    }

    /* Outline the toggle when the input is focused */
    .toggle input:focus ~ .toggle-button {
        outline: 1px dotted #fff;
    }

    /* Track */
    .toggle label:after {

        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        display: block;
        width: 80px;
        height: 18px;
        padding: 2px 0;

        background-color: #dd7e6d;
        border: 1px solid #b15b4d;
        border-radius: 2px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.17), 0 1px 0px rgba(255, 255, 255, 0.9);

        /* Text labels */
        content: "NO \a YES";
        white-space: pre;

        color: #8f5247;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 1px 0px rgba(255, 255, 255, 0.4);

        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    /* We could use label:after to create the toggle button
     * But we won't be able to use transitions on it, except in Firefox
     */
    .toggle span {
        display: block;
        position: absolute;
        right: -1px;
        top: -2px;
        z-index: 4;
        width: 40px;
        height: 26px;

        border: 1px solid #bbbbbb;

        background-color: #f7f7f7;
        background-image: -webkit-linear-gradient(top, #f7f7f7, #ececec);
        background-image:    -moz-linear-gradient(top, #f7f7f7, #ececec);
        background-image:     -ms-linear-gradient(top, #f7f7f7, #ececec);
        background-image:      -o-linear-gradient(top, #f7f7f7, #ececec);
        background-image:         linear-gradient(top, #f7f7f7, #ececec);

        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 1), 0 1px 1px rgba(0, 0, 0, 0.12);
        border-radius: 2px;

        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .toggle input:checked ~ span {
        right: 45px;
    }

    .toggle input:checked + label:after {
        background-color: #a0c66b;
        border-color: #87aa5b;

        color: #60783f;
    }
}

div.versions ul li div ul.controls li {
    display: block;
    padding: 0px;
    margin: 0px;
}

div.versions ul li div ul li a.indicator {
    padding-left: 0px;
    margin-right: 25px;
}

/* TODO - rename these classes */
li .indicator span {
  margin-left: 5px;
}

.indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    clear: both;
    margin-top: -5px;

}

a.indicator span {
    position: relative;
    margin-top: -12px;
    margin-right: -7px;
}

:root a.indicator span { margin-top: 4px \0; }

span.red-dot\.png {
    background-color: rgb(226,0,0);
    box-shadow: inset 0px 1px 0px 0px rgba(117, 117, 117, 0.49),
    0px 0px 3px 2px rgba(226,0,0,0.5);
}

span.gray-dot\.png {
    background-color: rgb(137, 127, 133);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5);
}

span.green-dot\.png {
    background-color: rgb(0, 255, 13);
    box-shadow: inset 0px 1px 0px 0px rgba(116, 116, 116, 0.49),
    0px 0px 3px 2px rgba(29, 236, 41, 0.48);
}

span.yellow-dot\.png {
    background-color: rgb(255, 229, 0);
    box-shadow: inset 0px 1px 0px 0px rgba(116, 116, 116, 0.49),
    0px 0px 3px 2px rgba(235, 236, 26, 0.47);
}

span.spacer\.gif {
    background-color: rgb(137, 127, 133);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5)
}

span.pending\.gif {
    background-color: rgb(137, 127, 133);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5);
}

#users tbody tr td:first-child {
  max-width: 217px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#user_overview_container div table tbody tr td:last-child {
  max-width: 217px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


#agent_nav_container table tbody tr td:first-child {
  max-width: 217px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#agent_details_container div table thead tr th h4 {
  max-width: 342px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.versions.nav_buttons ul li {
  max-width: 432px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profiles.nav_buttons ul li {
  max-width: 432px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
