/*
 * Copyright (c) 2017 WALLIX. All rights reserved.
 * Licensed computer software. Property of WALLIX.
 */

@font-face {
    font-family: 'bullet';
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/bullet.eot?#iefix") format('embedded-opentype'),
         url("/fonts/bullet.woff") format("woff");
}

body {
  font-family: "Century Gothic", "URW Gothic L", sans-serif;
  font-size: 12px;
}

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

img {border: 0;}

ul {list-style:none; margin:0; padding:0;}

a {text-decoration:none;}

p {margin: 0; padding: 0;}

textarea {min-width: 400px; height: 80px; width: 100%;}

pre {overflow: auto;}

/*
 * Layout
 *
 */

#page {padding: 0; margin: 0; min-width: 958px;}

#main {
}

#header {
}

#body {
}

#content {
  margin-left: 200px;
  padding: 1em 2em;
  min-height: 600px;
  font-size: 11px;
}

#footer {
  margin: 0 auto;
  height: 25px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#footer p {font-size:11px; color:#5C5C5C; text-align:center; padding-top:7px;}

/*
 * Header
 */

#header h1 {
  margin: 0;
  padding: 0;
/*  height: 32px;*/
  float: left;
/*  color: transparent;*/
  font-size: 32px;
}


/*
 * Old class used in WAB2.0/WAB2.1 and WLB2.0
 * This section is now replaced by settings_i18n and must be removed
 * See ZOO #1122
 */

#settings {margin: .5em 1em; float: right;}
#settings a {float: left; font-size: 10px; font-weight: bold; color: #969696;}

/*
 * New settings section used in WAB2.2
 */
#settings_i18n {
  margin-bottom: 3px;
  margin-left: 0;
  margin-right: 52px;
  margin-top: 3px;
  float: right;

}

#lang_en, #lang_fr {
}

#logout {
  font-weight:bold;
  display: inline-block;
}
#logout:hover {text-decoration: underline;}

#user {padding: 5px 0px 4px 0px; display: block; float: right;}

#user_name { display: inline-block; vertical-align: middle; margin: 0 30px 0 0;}
#user div {padding: 0 0 0 0; font-weight: bold; color: #808080;height:32px;}
#user div .title {color: #333333;}

#link_new_interface {
  display: block;
  float: right;
  font-weight: bold;
  padding: 15px 40px 4px 0px;
}

/*
 * Menu
 */

#menu {
  width: 200px;
  float: left;
  font-size: 11px;
  text-align: center;
}

#menu_background {
}

#menu ul li {
  font-weight: bold;
  background: #E4E4E4;
}
#menu > ul > li {
  border-bottom: solid 1px #d3d3d3;
}

#menu a {
  padding-top: 3px; height: 18px; display: block;
  text-align: left;
  padding-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submenu ul {display: none;}
.submenu li a {
  font-weight: normal;
  background: #fff;
  border-left: solid 3px #F37324;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu li li a {
  padding-left: 18px;
  background: #fff;
}

/*
 * Content : center of the page.
 */

.message, #indicator, .alert {
  padding: 4px 4px 4px 30px;
  margin-bottom: 12px;
  color: #444;
  font-weight: bold;
  border: 1px solid #ccc;
  background-color: #fff4ac;
}

.alert, .message {
  background: #fff4ac url(/images/silk/information.png) 8px 3px no-repeat;
}

.alert {
  color: red;
}

#indicator {text-align: center; background-image: none; display: none;}
#indicator span {
  background:  url(/images/base/loading.gif);
  background-repeat: no-repeat;
  padding-left: 26px;
  margin-left: -36px;
}


/*
 * Login page
 */

#loginbox {margin: 0 auto; padding: 60px 100px 0 100px; width: 360px;}
#loginbox h2 {text-align: center; font-size: 1.2em;}
#loginbox th {width: 70px;}
#loginbox input[type=submit] {margin: 5px 0;}
#loginbox .copyright {
  margin-top: .5em;
  text-align: center;
  color: #888;
}
#loginbox .login_message {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  text-align: justify;
  white-space: pre-line;
  border-top: solid 1px #aaaaaa;
  max-height: 120px;
  overflow-y: auto;
  padding-top: 20px;
  margin-left: -50px;
  margin-right: -50px;
}

/*
 * Tables (KILL THEM ALL!)
 */

table {text-align: center; padding: 0; width: 100%; border-collapse: collapse;}

table input[type=text], table input[type=password], table input[type=file], table textarea {
  margin: 2px auto;
  width: 93%;
  border: 1px solid #ddd;
  vertical-align: middle;
}

table input[type=text].ip {
    width: 150px;
}
table input[type=text].ip4 {
    width: 15ex;
}
table input[type=text].ip6 {
    width: 37ex;
}
table input[type=text].cidrprefix {
    width: 4ex;
}



/* */

input[disabled] { background-color: #efefef !important; }

table thead tr th {
    color : #707173;
    padding: 0.5ex;
    font-weight: bold;
    background: #E4E4E4;
}

table#maintable {
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

#maintable tbody td {text-align: left; padding-left: 10px;}
#maintable th {white-space: nowrap;}
#maintable th:first-child {width: 32px;}
#maintable td:first-child {padding: 0;}
#maintable td:first-child *, #maintable th:first-child * {float:left;padding:0;}

.multiple_icons {width: 48px !important;}
.multiple_icons img {padding-right: 2px !important}

#hablevel th, #hablevel td, #translevel th, #translevel td{
  padding: 0 2em;
  white-space: nowrap;
}

/* Javascript alternate css style */

tr.odd, tr.even {
  height: 26px;
}

/* Configuration table (used by forms) */

.orange_frame legend {color: #58585a;}

.orange_frame h2 {
  margin: 20px 0 0 0;
  padding: 2px 10px;
  font-size: 12px;
  color: #58585a;
  background: #fff;
}

.orange_frame h3 {
  margin: 20px 0 0 0;
  padding: 2px 10px;
  font-size: 12px;
  color: #58585a;
  background: #fff;
}

.orange_frame table.header {
    background: #E4E4E4;
    height: 20px;
    color: #58585a;
}

.orange_frame table.header th {
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
}

.orange_frame .inner {
  padding: 10px;
  border: 1px solid #fff;
  background: #E4E4E4;
}

.orange_frame .inner table td {
    text-align: left;
    border: none;
    background-color: transparent;
    margin-right: 20px;
    color: #48484a;
    vertical-align: middle;
}

span.star_red {color: red;}

/* Hack to align table form, always in an .inner div */
div.inner {text-align: left;}
.inner th {text-align: right; color: #444; padding-right: 10px; width: 180px; vertical-align: top;}
.inner input {}
.inner input[type=submit] {/*min-width: 80px;*/ margin: 20px 0 0 55px;}
.inner input[type=button] {/*min-width: 80px;*/  margin: 20px 0 0 5px;}
.inner input[type=file] {min-width: 350px;}

.inner fieldset thead th {
  width: auto;
  background: transparent;
  text-align: left !important;
}

/*
 * Navigator: display the path to the current page.
 */

#nav {
  height: 21px;
  clear: both;
  font-size: 12px;
  font-weight: bold;
}

.category {
  float: left;
  height: 17px;
  padding: 2px 5px 2px 175px;
  background: #939598;
  color:  white;
}

.page {float: left; padding: 2px 5px; color: white;}

a#doc {
  margin: 2px 5px;
  height: 16px;
  width: 16px;
  display: block;
  float: right;
}

/*
 * Dashboard
 */

#dashboard table {margin: 10px 0!important;}

div.gauge {
	height: 25px;
	width: 600px;
	margin: 3px auto;
	line-height: 25px;
	vertical-align: middle;
	border: 1px solid #aeaeae;
}

.gauge span, .gauge div {color: #707173; padding: 0 5px; font-size: 10px; font-weight: bold;}
.gauge .name {
	width: 30%;
	float: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gauge .value {
  float: right;
  width: 65%;
  height: 100%;
  color: #fff;
  text-align: left;
  background:gray;
}

.value div, .value p, .value img {float: left;}
.value div {overflow:hidden; width:0px; height:20px; padding-top:2px;}

.invisible {visibility: hidden;}
.nodisplay {display: none;}


table.metric {border: 1px solid #aeaeae;}
tr.simple {height: 25px; border-top: 1px solid #ccc;}

/*
 *  We need JavaScript! (Why? please don't cry!)
 */

#noscript {
  position: absolute;
  width: 100%;
  filter: alpha(opacity = 70);/* for IE */
  opacity: 0.7; /* CSS3 standard */
  color: #fff;
  background: red;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}

/*
 * Approvals
 */

.approval_request {
  padding: 10px;
  margin-right: 60px;
  background: #e4e4e4;
}

.approval_reply {
  padding: 10px;
  margin: 15px 0 0 60px;
  background: #e4e4e4;
}

.approval_accepted {
  background: #e0f0e0;
}

.approval_rejected {
  background: #f0e0e0;
}

.approval_comment {
  padding: 5px;
  margin: 10px 0 10px 0;
  border: solid 1px #aaa;
  background: #f0f0f0;
}

.approval_accepted .approval_comment {
  background: #f0fff0;
  border: solid 1px #9b9;
}

.approval_rejected .approval_comment {
  background: #fff0f0;
  border: solid 1px #b99;
}

.approval_status_pending {
  color: #000066;
}

.approval_status_accepted {
  color: #006600;
}

.approval_status_rejected {
  color: #660000;
}

.approval_status_cancelled, .approval_status_closed {
  color: #000000;
}

.progress {
  margin-left: 10px;
}

.progress_bar {
  float: left;
  width: 250px;
  height: 20px;
  border-collapse: collapse;
  border-top: 1px solid #b3b3b3;
  border-left: 1px solid #b3b3b3;
  box-shadow: 2px 2px 1px #b3b3b3;
  border-bottom: 1px solid #939393;
  border-right: 1px solid #939393;
}

.progress_bar .done {
  background: #8ee532;
}

.progress_pct {
  font-size: 13px;
  font-weight: bold;
  margin-left: 10px;
}

.progress_eta {
  font-family: sans-serif;
  font-size: 12px;
  margin-left: 4px;
}

a i.fa {
	cursor: pointer;
}

div .ui-widget-header {
  border: 1px solid #F37324;
  background: #F37324;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #888888;
    background: #888888;
    font-weight: bold;
    color: #ffffff;
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
	 background-image: url("images/ui-icons_ffffff_256x240.png");
}

.hidden_text {
  font-family: 'bullet' !important;
}

.license_property{
  min-width: 250px;
}

.message.error:empty{
  display:none;
}