/* ----------------------------------------------------------------------------
 * Filename:     Wallix.css
 * Application:  WALLIX Bastion
 * Description:  Common CSS file for WALLIX products
 * Version:      0.0.1
 * Author:       Julien Vitard <jvi@wallix.com>
---------------------------------------------------------------------------- */

/* == STRUCTURE: ==============================================================

    $__header
    $__menu
    $__content
    $__action button
    $__description
    $__status
    $__tables
    $__links
    $__certificates, keys
    $__logs
    $__licences
    $__dashboard
    $__jQueryPlugins
    $__alignment

---------------------------------------------------------------------------- */


/*  __content
---------------------------------------------------------------------------- */


/*  __action button

---------------------------------------------------------------------------- */




/*  __description

    It consists in textareas mostly

---------------------------------------------------------------------------- */

textarea.description {
/*    width: 300px;*/
    font-size: 12px;
    font-family: Arial, sans-serif;
    resize: none;
}


/*  __status

    It exists different kind of status:
    - True / Avalaible
    - False / Not_available
    - None / In_progress

---------------------------------------------------------------------------- */

span.status_True, span.status_False, span.status_None, span.status_Nyet,
span.available, span.not_available, span.in_progress, span.success,
span.failure {
    padding-left: 30px;
    color: black;
    background-position: 5px 50%;
    background-repeat: no-repeat;
    float: left;
}

span.isLocked, span.isUnlocked, span.enabled, span.disabled, span.isDisabled,
span.connect_success, span.connect_failed, span.connect_killed, span.warning,
span.connect_shared,
span.edit {
    display: inline-block;
    background-position: 0 50%;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    margin-left:auto;
    margin-right:auto;
}

span.status_True, span.available, span.enabled {
    background-image: url(/images/silk/tick.png);
}

span.status_False, span.not_available, span.disabled {
    background-image: url(/images/minus.png);
}

span.status_None, span.in_progress {
    background-image: url(/images/fileType/spinner.gif);
}

span.isLockedClick {
    cursor: pointer;
    cursor: hand;
}

span.edit {
    background-image: url(/images/silk/page_white_edit.png);
}


span.isUnlocked {
   background-image: none;
}


span.enabled span, span.disabled span, span.edit span {
    display: none;
}

span.connect_success, span.success {
    background-image: url(/images/accept.png);
}

span.connect_failed, span.failure {
    background-image: url(/images/delete.png);
}

span.connect_killed{
    background-image: url(/images/ban.png);
}

span.warning {
    background-image: url(/images/exclamation.png);
}

span.connect_shared{
    background-image: url(/images/silk/user_shadow.png);
}

/*  __links

    It exists different kind of links:
    - help
    - download
    - download as CSV
    - view/preview
    - add
    - del
    - edit
    - email

---------------------------------------------------------------------------- */

a.help {
    padding: 0 0 10px 20px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(/images/silk/help.png);
}

a.download, a.download_CSV, a.preview {
    padding: 5px 20px 0 0;
    background-position: 0px 50%;
    background-repeat: no-repeat;
}

a.download, a.download_CSV, a.download_session, a.download_log,
a.download_video, a.download_backup { background-image: url(/images/disk.png); }

a.preview, a.view_proxy { background-image: url(/images/silk/zoom.png); }

a.shadow_session { background-image: url(/images/silk/user_shadow.png); }

a.download_session_txt { background-image: url(/images/page_white_text.png); }

a.view_approval { background-image: url(/images/approved.png); }

a.download_log, a.download_video, a.download_backup {
/*    background-image: url(/images/disk.png);*/
    padding-left: 25px;
    background-position: 0px 50%;
    background-repeat: no-repeat;
}

a.download_log, a.download_backup {
    white-space: nowrap;
    margin-right: 10px;
}

/*a.view_proxy {
    background-image: url(/images/silk/zoom.png);
    width: 16px;
    height: 16px;
    padding-left: 25px;
    background-position: 0px 50%;
    background-repeat: no-repeat;
    display: block;
    white-space: nowrap;
    margin-right: 10px;
}*/

.connect { background-image: url(/images/connect.png); }
.disconnect { background-image: url(/images/disconnect.png); }
.ghost {background-image: url(/images/ghost.png); }

a.view_proxy, a.download_session, a.download_session_txt, a.view_approval, a.shadow_session,
.connect, .disconnect, .ghost{
    width: 16px;
    height: 16px;
    background-position: 0px 50%;
    background-repeat: no-repeat;
    display: inline-block;
}


/*a.download {
    padding: 5px 20px 0 0;
    background: url(/images/disk.png) 5px no-repeat;
    background-position: right;
}*/


/*a.preview {
    padding: 5px 20px 0 0;
    background: url(common/images/silk/zoom.png) 5px no-repeat;
    background-position: right;
}*/

a.ask_password {
    background-image: url(/images/key__pencil.png);
    height: 25px;
    width: 25px;
    display: block;
    background-position: 0px 50%;
    background-repeat: no-repeat;
}

a.add, a.del, a.edit, a.email, a.inline_edit {
    display: block;
    height: 16px;
    width: 16px;
    padding: 0 0 0 20px;
    background-position: left center;
    background-repeat: no-repeat;
}

a.add { 
    border: 0 solid #FFFFFF;
    background-image: url(/images/add.png)
}

a.inline_edit {
    display: inline-block;
    padding: 0 0 0 5px;
}

a.del { background-image: url(/images/silk/cross.png) }
a.email { background-image: url(/images/silk/email.png) }
a.edit, a.inline_edit {
    background-image: url(/images/silk/page_white_edit.png)
}

a.left { background-position: left; }
a.right{ background-position: right; }


/*  __tables

    It exists different kind of tables:
    - results tables:
        property | separator | value with mandatory/optional parameters
    - visualization tables :
        based on datatable (jQuery plugin)

---------------------------------------------------------------------------- */

span.optional:after{
    content: "   ";
    display: block;
    clear: both;
    visibility: hidden;
    font-weight: bold;
    margin-right: 10px;
}

/* Table Results */

body table.results {
  width: 100%;
}

body table.results.fixed-layout {
  table-layout: fixed;
}


body table.results td {
    vertical-align: middle;
}

body table.results td.separator {
    height: 20px;
    width: 10px;
    vertical-align: middle;
}

body table.results td.property,
body table.results td.property.large,
body table.results.properties-lg td.property,
body table.results.properties-lg th.property {
    text-align: right;
    font-weight: bold;
    color: #444;
    max-width: 250px;
    vertical-align: middle;
}

body table.results td.property {
    width: 200px;
}

body table.results.properties-lg td.property,
body table.results.properties-lg th.property {
    width: 250px;
}

body table.results td.property.large {
    width: 350px;
}

body table.results th.property {
    text-align: right !important;
}

body table.results td.value {
    text-align: left;
    vertical-align: middle;
}

body table.results td.innerproperty {
    text-align: right;
    vertical-align: middle;
    width: 10px;
    white-space: nowrap;
}

body table.results td.top,
body table.results.properties-lg td.property,
body table.results.properties-lg th.property {
    vertical-align: top;
}

body table.results td input.ro {
    background-color: transparent;
    border: 1px transparent solid;
}

body table.results.top td {
    vertical-align: top;
}

body table.results td.break-word {
  word-wrap: break-word;
}

.results input.inline-sm {
    width: 45px;
    margin-right: 10px;
}

.results input.inline-lg {
    width: 450px;
    margin-right: 10px;
}

.readonly, input[readonly] {
    color: #58585A;
    font-size: 11px;
    font-family: 'Century Gothic', 'URW Gothic L', sans-serif;
    background-color: transparent;
 }

input[readonly] {
    border: 0px solid gray !important;
}
/* Table visualization */

.visualization th.buttons {
    vertical-align: middle;
    text-align: center;
    width: 100px;
}

/*
.visualization th {
    vertical-align: middle;
    text-align: center;
}*/
/*
.visualization td {
    vertical-align: middle;
}

.visualization {
    margin-top: 10px;
    margin-bottom: 10px;
}*/


/*  __not_editable

    inputs which are not editable

---------------------------------------------------------------------------- */

input[type="text"].not_editable {
  background-color: transparent;
  font-weight: bold;
  border: 0px solid transparent;
}

/*  __certificates

    Certificates are displayed inside textareas.
    They can be editable (certificate) or readonly (ro_certificate)

---------------------------------------------------------------------------- */

textarea.ro_certificate, textarea.certificate {
  font-family: Consolas, monospace;
  font-size: 11px;
  min-height: 225px;
  max-width: 520px;
  resize: none;
}

textarea.ro_certificate {
  background-color: transparent;
  padding: 2px;
  border: 1px solid #DDD;
  color: gray;
}

textarea.certificate {
  background-color: white;
  border: 1px solid #DDD;
  color: black;
}


/*  __jQueryPlugins

    - DateTimePicker ()
    - DataTable

---------------------------------------------------------------------------- */

/* Display the calendar in datetime picker */

img.ui-datepicker-trigger {
    vertical-align: middle;
    padding-left: 5px;
}

/* Align content of dataTable rows vertically */

.inner table.dataTable td {
    /* TODO: Too specific -> .inner !!! */
    vertical-align: middle;
}

.inner table.dataTable thead th {
    /* TODO: Too specific -> .inner !!! */
    vertical-align: middle;
    text-align: center;
    padding-left: 0px;
    width: 50px;
}

.inner table.dataTable tbody td {
    /* TODO: Too specific -> .inner !!! */
    vertical-align: middle;
    text-align: center;
    padding-left: 0px;
    width: 50px;
}

table.dataTable td.center {text-align: center; }
table.dataTable td.left {text-align: left; }
table.dataTable td.right {text-align: right; }

/*table.dataTable thead th {
    
}*/


fieldset.no_border {
    border: none;
}

/*  __alignment
---------------------------------------------------------------------------- */

.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }


/* Logs enlightment
-----------------------------------------------------------------------------*/

li.logline {
  white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
  white-space: -pre-wrap; /* Opera 4 - 6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
  word-wrap: break-word; /* IE 5.5+ */
  margin: 2px 0;
  font-family: monospace;
  font-size: 10px;
  margin-left: 2px;
}

li.logline:hover {
  color: #F37324!important;
  cursor: default;
  font-weight: bold;
}