/**
//
//                            ASSIA, Inc.
//                     Confidential and Proprietary
//                         ALL RIGHTS RESERVED.
//
//      This software is provided under license and may be used
//      or distributed only in accordance with the terms of
//      such license.
//
                                                                                                                                                               
**/

/******** HTML Common Tag styles **********/
* {
    box-sizing: content-box;
}

th {
    font-weight: bold;
}

body {
    font-size: 14px;
    z-index: 10;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Disable all pointer events. This is expected to be reverted on page load by cloudcheck.js */
body.pointer-events-none {
  pointer-events: none;
}

.h1, .main-heading > h1 {
    font-weight: bold;
}

.h1, .h1.ui-widget {
    font-size: 1.5em !important;
}

.main-heading > h1 {
    font-size: 1.2em !important;
    margin: 0.5em 0;
}

.h2 {
    font-weight: bold;
}

.h2, .h2-size {
    font-size: 1.2em;
}

.h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/* Default color definition */
:root {
    --font-color-default: black;
    --font-color-over-light-bkg: black;
    --font-color-over-dark-bkg: white;
    --light-component-bkg-color: white;

    --hover-shadow-over-dark-bkg: snow;

    --header-font-color: white;
    --header-bkg-color: #133261;

    --font-color-panel-title: black;
    --panel-title-bkg-color: #8FA1B4;

    --active-component-bkg-color-opt1: #0e73c6;
    --hover-component-bkg-color-opt1: #0e3fc6;

    --default-menu-font-color: #bcc7d1;
    --default-menu-bkg-color: #133261;
    --focus-menu-bkg-color: white;
    --focus-menu-font-color: black;
    --hover-menu-bkg-color: #D9FFFF;

    --paginator-active-page: #007ad9;

    --async-progressbar-bkg-color: #007ad9;

    --chart-select-all-color: #737890;

    /* Colors for severity */
    --color-not-defined: #808080;
    --color-unknown: #919191;
    --color-good: #2eb937;
    --color-ok: green;
    --color-bad: #ff0000;
    --color-warning: #ffa600;
    --color-low-warning: #cbcb04;
    --color-info: #3d5fd5;
}

.force-nowrap {
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 25px !important;
}

img {
    border: 0;
}

a:link {
    text-decoration: none;
}

/******** Layout Styles **********/
.assia-main-layout {
    --layout-header-height: 89px;
    --layout-header-not-tabs-height: 58px;
    --layout-header-menu-width: 300px;
    --layout-min-width: 1366px;

    display: grid;
    place-content: stretch;
    position: absolute !important;

    width: 100%;
    height: 100%;
    min-width: var(--layout-min-width);
    /** Required because pages with multi column table create a blank space at the bottom */
    overflow: hidden;
}

.assia-main-layout.small-menu {
    --layout-header-menu-width: 265px;
}

.assia-main-layout.collapsed-menu {
    --layout-header-menu-width: 1em;
}

.assia-main-layout:not(.no-tabs):not(.no-menu) {
    grid-template-areas: "header header"
                         "menu content";
    grid-template-rows: var(--layout-header-height) auto;
    /* Try to use as much as possible between the available space and largest element */
    grid-template-columns: var(--layout-header-menu-width) minmax(calc(100% - var(--layout-header-menu-width)), max-content);
}

.assia-main-layout.no-tabs:not(.no-menu) {
    grid-template-areas: "header header"
                         "menu content";
    grid-template-rows: var(--layout-header-not-tabs-height) auto;
    grid-template-columns: var(--layout-header-menu-width) auto;
}

.assia-main-layout.no-menu:not(.no-tabs) {
    grid-template-areas: "header"
                         "content";
    grid-template-rows: var(--layout-header-height) auto;
    grid-template-columns: auto;
}

.assia-main-layout.no-tabs.no-menu {
    grid-template-areas: "header"
                         "content";
    grid-template-rows: var(--layout-header-not-tabs-height) auto;
    grid-template-columns: auto;
}

.assia-main-layout > .assia-header-layout-unit {
    grid-area: header;
}

.assia-main-layout > .assia-west-menu-layout-unit {
    grid-area: menu;
    overflow: auto;
}

.assia-main-layout.no-menu > .assia-west-menu-layout-unit {
    display: none;
}

.assia-main-layout > .assia-center-panel-layout-unit {
    grid-area: content;
    display: flex;
    flex-flow: column;
    overflow: auto;
}

.assia-main-layout > .assia-center-panel-layout-unit > .assia-dialog-container {
    height: 1px;
    width: 1px;
    overflow: visible;
}

.assia-main-layout > .assia-center-panel-layout-unit  > .content-dynamic {
    flex-grow: 1;
}

.assia-footer-layout-unit {
    padding: 2em 0 1em 0;
}

.assia-footer-layout-unit > #footer {
    text-align: right;
    position: relative;
    right: 2em;
}

/******** HEADER styles **********/
.assia-header-layout-unit {
    padding: 0;
    z-index: 1 !important;
}

.assia-header-layout-unit .header-vendor-logo {
    width: auto;
    max-height: 40px;
    border: 0;
    vertical-align: middle;
}

/** Whole header form (including product tabs) */
.assia-header-layout-unit form#headerForm {
    margin: 0;
    padding: 0;
    max-height: 89px;
    min-height: 50px;
}

/** Header (not including product tabs) */
.assia-header-layout-unit div.header {
    width: 100%;
    background: var(--header-bkg-color);
    border: 0;
    height: 50px;
}

/** All links in header */
.assia-header-layout-unit div.header a {
    font-weight: bold;
    color: var(--header-font-color);
}

/** Expresse product label */
.assia-header-layout-unit .header-expresse-label {
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: var(--header-font-color);
    white-space: nowrap;
}

.assia-header-layout-unit .header-page-label {
    color: var(--header-font-color);
}

.assia-header-layout-unit .header-extra {
    text-align: right;
}

.assia-header-layout-unit .header-lang-selector {
    padding: 0 5px;
}

/** Header password expiration notice */
.assia-header-layout-unit .header-pwd-expiration-notice {
    color: #ffeb80;
    padding-right: 20px;
    font-style: italic;
}

/** Header welcome user */
.assia-header-layout-unit .header-welcome {
    font-weight: bold;
    color: var(--header-font-color);
    padding-right: 20px
}

.assia-header-layout-unit .header-welcome > a {
    font-weight: normal;
    text-decoration: underline;
}

/** Header logout */
.assia-header-layout-unit .header-logout > a {
    display: block;
    text-align: center;
}

/********* END HEADER styles **********/

/******** Primfaces There Override **********/
.ui-widget-content {
    background: var(--light-component-bkg-color);
}

/* PrimeFaces overrides the default, which is quite annoying! */
.ui-widget {
    font-size: 14px !important;
}

.ui-widget-header {
    background: var(--light-component-bkg-color);
    color: inherit;
}


.ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.ui-panel .ui-panel-content {
    padding: 0;
}

.ui-panel .ui-panel-content .ui-widget-content {
    padding: 0;
}

/* Hides the ugly div around the block UI image */
.ui-blockui-content {
    background: transparent;
    background-color: transparent !important;
    border: 0;
    box-shadow: none;
}

/* Centers the block UI image on viewport */
.ui-blockui-content img.viewport-centered {
    position: fixed;
    top: 47%;
    left: 47%;
}

.no-border,
.no-border.ui-panelgrid,
.no-border.ui-panelgrid > tbody > tr.ui-widget-content {
    border: 0 none;
}

label.bold {
    font-weight: bold;
}

.default-unknown,
.color-not-defined {
    color: var(--color-not-defined);
}

.color-good {
    color: var(--color-good);
}

.color-bad {
    color: var(--color-bad);
}

.color-warning {
    color: var(--color-warning);
}

.color-normal {
    color: var(--font-color-default);
}

.errorMessagePanel {
    background: transparent;
    border: var(--color-bad) solid 1px !important;
    width: 500px;
}

.errorMessagePanel .ui-panel-titlebar {
    background: var(--color-bad) !important;
}

.warningMessagePanel {
    background: transparent;
    border: var(--color-warning) solid 1px !important;
    width: 500px;
}

.warningMessagePanel .ui-panel-titlebar {
    background: var(--color-warning) !important;
}

.normalMessagePanel {
    background: transparent;
    border: var(--color-ok) solid 1px !important;
    width: 500px;
}

.normalMessagePanel .ui-panel-titlebar {
    background: var(--color-ok) !important;
}

.ui-autocomplete,
.ui-selectonemenu.ui-state-default,
.ui-selectcheckboxmenu,
.title-button.ui-button,
.ui-datatable select.ui-column-filter {
    background: white none !important;
    border-radius: 5px;
    border: 1px solid black;
    color: var(--font-color-over-light-bkg);
}

.ui-autocomplete.ui-state-hover,
.ui-autocomplete.ui-state-focus,
.ui-selectonemenu.ui-state-hover,
.ui-selectonemenu.ui-state-focus,
.title-button.ui-button.ui-state-hover > .ui-button-text,
.title-button.ui-button.ui-state-focus > .ui-button-text,
.ui-selectcheckboxmenu.ui-state-hover .ui-selectcheckboxmenu-label,
.ui-selectcheckboxmenu.ui-state-focus .ui-selectcheckboxmenu-label {
    text-decoration: underline;
    box-shadow: 0px 0px 8px var(--hover-shadow-over-dark-bkg);
}

.ui-autocomplete,
.ui-selectonemenu-label,
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container,
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label {
    color: var(--font-color-over-light-bkg);
    background: none;
}

.ui-autocomplete-input.ui-state-default {
    border: none;
}

.ui-selectonemenu-label {
    width: auto !important;
}

.ui-autocomplete-dropdown.ui-state-default,
.ui-selectonemenu-trigger.ui-state-default,
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
    background: none;
    border: none;
    border-left: 1px solid black;
}

.ui-autocomplete-dropdown > .ui-icon.ui-icon-triangle-1-s,
.title-button.ui-state-default > .ui-icon.ui-icon-triangle-1-s {
    background: none;
    text-indent: 0px;
    margin-top: -10px;
}

.ui-selectonemenu-trigger:before,
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger:before,
.ui-autocomplete-dropdown .ui-icon.ui-icon-triangle-1-s:before,
.title-button.ui-button > .ui-icon.ui-icon-triangle-1-s:before {
    content: '\25BE';
    color: var(--font-color-over-light-bkg);
    font-size: 1.3em;
}

.ui-selectonemenu-trigger .ui-icon,
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon {
    background: none transparent;
}

.break-text {
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
}

.break-text-all {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

.no-wrap {
    white-space: nowrap;
}

ul.csv-list,
ol.csv-list {
    list-style-type: none;
    padding: 0;
    display: inline;
}

ul.csv-list > li {
    display: inline;
}

ul.csv-list > li:not(:last-child):after,
ol.csv-list > li:not(:last-child):after {
    content: ', ';
}

ul.no-icon,
ol.no-icon {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.label-default-right-margin {
    margin-right: 2em;
}

.ui-icon-searchbutton {
    height: 27px;
    width: 27px;
    margin-top: -13px !important;
    margin-left: -13px !important;
    background-image: url('/lpr/images/search.gif') !important;
    background-size: 27px;
}

.jqplot-table-legend {
    text-align: left;
}

.jqplot-yaxis {
    margin-left: 10px;
    margin-right: 10px;
    max-width: 51px;
    min-width: 51px;
}

.ui-messages-error-icon {
    display: none;
    float: right;
}

.ui-messages-fatal-icon {
    display: none;
    float: right;
}

.ui-messages ul {
    margin: 0;
}

.toolbarImg {
    height: 30px;
}

.toolbarTxt {
    color: var(--font-color-over-dark-bkg);
    font-weight: bold;
    font-family: Arial;
    font-size: larger;
}

/** Hide header  from data table */
.ui-datatable.no-header table thead,
.ui-datatable.no-header .ui-datatable-header,
.ui-datatable.no-header .ui-datatable-scrollable-header {
    display: none;
}

/** Prevent default ui-widget-content background when into a table. */
.ui-datatable table.componentDataPanel .ui-widget-content {
    background: inherit;
}

/** Transparent table background */
.ui-datatable table.no-background .ui-widget-header,
.ui-datatable table.no-background .ui-widget-header th,
.ui-datatable table.no-background .ui-widget-content,
.ui-datatable table.no-background .ui-widget-content td {
    background: transparent;
}

/** Table with no borders */
.ui-datatable table.no-border .ui-widget-header,
.ui-datatable table.no-border .ui-widget-header th,
.ui-datatable table.no-border .ui-widget-content,
.ui-datatable table.no-border .ui-widget-content td {
    border: 0 none;
}

/** Rows in datatables should be aligned to middle */
.ui-datatable tr {
    vertical-align: middle !important;
}

/** DataGrids with no padding between columns. */
.ui-datagrid.compact .ui-datagrid-column {
    padding: 0;
}

.ui-radiobutton .ui-state-default .ui-icon,
.ui-chkbox .ui-state-default .ui-icon,
.ui-paginator .ui-icon,
.ui-sortable-column-icon.ui-icon {
    /** TODO "cloudcheck/ui-icons_17369e_256x240.png" is deprecated and can be deleted. Replace with :before content */
    background-image: url('/lpr/javax.faces.resource/expresseImages/cloudcheck/ui-icons_17369e_256x240.png.jsf');
}

.custom-filter-range {
    min-width: 10em;
}

.custom-filter-range .custom-filter-range-input .ui-inputfield {
    width: 40%
}

.ui-radiobutton .ui-radiobutton-box,
.ui-chkbox .ui-chkbox-box {
    background: white;
}

/* Paginator customization */
.ui-paginator .ui-paginator-rpp-options,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last,
.ui-paginator-pages a.ui-paginator-page {
    background: var(--light-component-bkg-color);
    color: var(--font-color-over-light-bkg);
}

.ui-paginator-pages a.ui-paginator-page.ui-state-active {
    background: var(--paginator-active-page);
    color: #fff;
}

/* TODO this is for the clear view page, probably the style above is only user there, in such case modify that*/
#displayStatus td.toolbarTxt,
.clear-view-status td.toolbarTxt {
    color: var(--font-color-over-light-bkg);
}

.dataGrid td,.dataGrid tr {
    background: transparent;
    border: none;
    vertical-align: top;
}

.messageGrid tr,.messageGrid td {
    background: transparent;
    border: none;
    text-align: left;
}

.inline-sub-panel,
.line-info-panel-grid {
    background: var(--light-component-bkg-color);
    border: 0;
    font-family: Verdana, Arial, sans-serif;
    margin-left: 55px;
}

.line-info-panel-grid td {
    border: 0;
}

.lineStatusPanelGrid {
    background: var(--light-component-bkg-color);
    border: 0;
    font-family: Arial;
    margin-left: 55px;
}

.peOperDataPanel {
    background: var(--light-component-bkg-color);
    border: 0;
    font-family: Arial;
    margin-left: 55px;
}

.componentDataPanel {
    background: var(--light-component-bkg-color);
    border: 0 !important;
    margin: 0;
    width: 100%;
    padding: 0;
    border-style: none;
}

.componentDataPanel tr {
    border: none;
}

.componentDataPanel td {
    vertical-align: middle;
    border: none !important;
    background: var(--light-component-bkg-color);
}

.historyDates {
    width: 300px;
    font-family: Arial;
}

.fieldName {
    font-weight: bold;
    font-family: Arial;
}

.noBorderGrid {
    border: none;
}

.rateSliderTable {
    background: var(--light-component-bkg-color);
    border: 0 !important;
    margin: 0;
    width: 100%;
    padding: 0;
    border-style: none;
}

.rateSliderTable tr {
    border: none;
}

.rateSliderTable td {
    padding: 2px !important;
    border: none !important;
    background: var(--light-component-bkg-color);
}

.underline {
    text-decoration: underline;
}

.ui-slider-handle {
    background-image: url('/lpr/images/open_arrow.jpg') !important;
    border: none !important;
}

div.searchForm div.ui-panel-content.ui-widget-content {
    text-align: center;
}

div#headerPanel-resizer {
    /* Slightly nasty hack to make the header merge with the rest of the content*/
    background: none repeat-x scroll 0 0 rgb(242, 241, 241);
}

/* Product Selection Menu */
div.menuBar {
    padding-top: 2px;
    bottom: 0;
    height: 37px;
    border-bottom: 1px solid lightgrey;
}

div.menuBar .productSelector {
    background: none;
    border-bottom: none;
    color: var(--font-color-over-light-bkg);
    float: left;
}

div.menuBar .productSelector .ui-tabmenu {
    border: 0 none;
    background: transparent;
}

div.menuBar .productSelector .ui-tabmenu-nav {
    background: transparent;
}

div.product-menu .ui-tabmenuitem:focus,
div.product-menu .ui-tabmenuitem:hover,
.ui-tabs-header:focus {
    border-top: 2px solid black !important;
    border-left: 2px solid black !important;
    border-right: 2px solid black !important;
}

div.product-menu .ui-tabmenuitem:focus {
    background: var(--focus-menu-bkg-color);
}

div.product-menu .ui-tabmenuitem {
    background: var(--default-menu-bkg-color);
}

div.product-menu .ui-tabmenuitem:focus .ui-menuitem-text {
    color: var(--focus-menu-font-color);
    text-decoration: underline;
}

div.product-menu .ui-tabmenuitem:hover .ui-menuitem-text {
    color: var(--hover-menu-bkg-color);
    text-decoration: underline;
}

div.product-menu .ui-tabmenuitem:hover {
    background-color: var(--hover-component-bkg-color-opt1);
}

div.product-menu .ui-tabmenuitem:not(:hover,:focus).ui-state-active {
    background: var(--active-component-bkg-color-opt1);
}

/* End: Product Selection Menu */

/* Language Bar Styles */
div#languageBar {
    float: right;
    margin-top: 7px;
}

div#languageBar > .flag,
div#languageBar > .lang-selector {
    margin: 0 10px 0 0;
}

div#languageBar >.flag {
    width: 30px;
    height: 18px;
    border: 0;
}

div#languageBar > .lang-selector {
    font-weight: bold;
}

/* End: Language Bar Styles */
/* End: Header styles */
div.loginPanel {
    box-shadow: 2px 2px 10px #313131;
    background: var(--light-component-bkg-color) url('/lpr/images/logo.png') 1.5em 1.5em/300px 183px no-repeat;
    text-align: center;
    width: 640px; /* Use "px" since we are making it fit "logo.png"s width */
    margin: auto;
    font-size: large;
    padding: 1.5em;
    border: 0;
    min-height: 200px;
}

button.login-button {
    float:right;
}

span.loginProductName {
    display: block;
    margin: 1.2em 0 0.7em 0;
    font-size: 0.8em;
    line-height: 1.6em;
    font-weight: bold;
    white-space: pre-wrap;
}

div.loginPanel img#logo {
    float: left;
}

div.loginPanel form {
    margin-left: 300px; /* Width of "logo.png" */
}

div.loginPanel input {
    width: 18em;
}

div.group {
    clear: both;
}

div.loginContent {
    height: 99%;
    position: relative;
}

form.inline-form {
    display: inline-block;
}

div#westPanel-resizer {
    background-color: #F2F1F1;
}

.assia-confirmation-dialog-content {
    max-width: 50em;
}

.assia-confirmation-dialog-content tr {
      border: 0 none;
 }

.assia-confirmation-dialog-content .ui-panelgrid-cell {
    background: var(--light-component-bkg-color);
}

.assia-confirmation-dialog-content .dialog-buttons {
    text-align: right;
}

.ui-confirmation-button-panel {
    clear: both;
    float: right;
    border: 0 none;
}

div.ui-dialog-content {
    background-color: var(--light-component-bkg-color) !important;
}

div.realtimeProgress {
    background-image: url('/lpr/images/waiting.jpg');
    background-repeat: no-repeat;
    min-height: 60px;
    padding: 1em;
    background-color: var(--light-component-bkg-color);
}

div.realtimeProgress div.ui-panel-content {
    margin-left: 60px;
}

div.realtime-buttons {
    padding: 10px 10px;
}

/* Wrapper for pages. Is not rendered if no page is selected. */
div.dsleContent {
    padding: 0.8em;
    background-color: var(--light-component-bkg-color);
    border: none;
    margin: 0 .8em;
}

div#dsleCentralContentPanel tr {
    vertical-align: top;
}

/* innecesary? */
.componentDataPanel tr {
    vertical-align: middle;
}

.ui-panelgrid .ui-panelgrid-cell {
    border: 0;
}

#dsleCentralContentPanel tr, /* for any table in the content panel */
.multi-column-table tr /* for any table in a p:dialog appended to the body */ {
    background-color: var(--light-component-bkg-color);
}

div.ui-panel-titlebar {
    background-color: var(--panel-title-bkg-color);
    color: var(--font-color-panel-title);
    padding: 0.3em;
    border: none;
}

/* These are all the panels inside the dsleCentralContentPanel area (it excludes menu, header, etc) */
div#dsleCentralContentPanel div.ui-panel.ui-widget.ui-widget-content div.ui-panel-content.ui-widget-content {
    background-color: var(--light-component-bkg-color);
    border: 1px solid grey !important;
    padding: 0.75em !important;
}

div#dsleCentralContentPanel div.ui-panel.ui-widget.ui-widget-content {
    margin-bottom: 1em;
}

.advancedSearchForm .ui-dialog .ui-widget-content.ui-dialog-content {
    background-color: #f2f2f2 !important;
}

.advancedSearchForm > .ui-dialog-content {
    overflow: hidden;
}

.ui-widget-content a {
    color: var(--active-component-bkg-color-opt1);
}

a.advancedSearch {
    font-size: 0.8em;
    color: #2b74cc;
    margin-left: 1em;
}

/* -------------- DSLE-8533 - DSLE-7935 Corrections -------------- */
/* Following styles were added due to some others applies to	   */
/* general dialogs and headers style defined for primefaces skin   */
/* and share for other dialogs. 								   */

.advance-search .ui-widget-header,
.dialog-with-table .ui-widget-header {
    background: none repeat scroll 0 0 #424548;
    color: #F9F7F7;
}

.advance-search table,
.dialog-with-table table {
    min-width: 100% !important;
}

.advance-search .ui-datatable th,
.dialog-with-table .ui-datatable th {
    background: url("") repeat-x scroll 50% 50% #68727B !important;
    color: var(--font-color-over-dark-bkg) !important;
}

/* ------------- DSLE-8533 - DSLE-7935 Corrections End ----------- */

.leftHalfPanel, .rightHalfPanel {
    width: 48%;
}

.rightHalfPanel {
    float: right;
    clear: right;
}

.leftHalfPanel {
    float: left;
    clear: left;
}

th {
    vertical-align: middle;
}

label.disabled,td.disabled,label.false,span.false {
    color: red;
}

label.enabled,td.enabled,label.true,span.true {
    color: green;
}

td.blank {
    background-color: gray;
}

div.ui-selectonemenu,div.ui-selectcheckboxmenu {
    vertical-align: middle;
}

.ui-selectonemenu-items.ui-selectonemenu-table.ui-widget-content {
    box-sizing: revert;
}

.ui-dialog-content div.ui-widget-content {
    background-color: var(--light-component-bkg-color);
}

div.nocontent div.ui-panel-content.ui-widget-content {
    display: none
}

.advancedSearch-container {
    position: relative;
}

.advancedSearch-container .ui-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    cursor: pointer;
}

/*** WELCOME PAGE START ***/
div.product {
    background-color: var(--light-component-bkg-color);
    border: solid 1px #666666;
    border-radius: 1em;
    width: 95%;
    margin: 0 auto 0.5em auto;
    font-size: 1.2em;
}

div.product table td {
    vertical-align: middle;
}

img.productImage {
    width: 40px;
    height: 40px;
    margin: 1.1em;
}

div.product a {
    color: var(--font-color-over-light-bkg);
    text-decoration: none;
    display: block;
}

/*** WELCOME PAGE END ***/

.dataTable {
    margin: auto;
}

.working {
    cursor: wait;
}

.hasTooltip {
    color: blue;
}

.narrowColumn {
    max-width: 8em;
    white-space: normal !important;
    word-wrap: break-word;
}

.assia-custom-tooltip {
    z-index: 2;
}

.ui-datatable.x-wrapper-overflow-auto .ui-datatable-tablewrapper {
    overflow-x: auto;
}

.v-overflow-scroll-only .ui-selectcheckboxmenu-items-wrapper {
    overflow-y: auto;
}

.centeredValues td {
    text-align: center;
}

.text-center-aligned,
.centered {
    text-align: center;
}

.text-right-aligned {
    text-align: right;
}

.text-left-aligned {
    text-align: left;
}

.invisible {
    opacity: 0.0;
    height: 1px;
    width: 1px;
}

input.invisible-block {
    display: none;
    visibility: hidden;
}

div.smallTable table {
    width: auto !important;
    margin: auto;
}

.highlightedLineId {
    background-color: rgb(254,242,165);
}
.small-link {
    font-size: 12px;
}
.grid-center {
    margin: auto;
    border-collapse: collapse;
}
.grid-center , .grid-center tr, .grid-center tr td {
    border: 0 none;
}
.grid-center tr td {
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.element-center {
    text-align: center;
}

.tooltip {
    max-width: 90%;
    word-break: break-all;
}

.tooltip-paragraph {
    clear: both;
    display: block;
}

.select-all {
    margin-bottom: 0.6em;
    margin-left: 3px;
}

.advancedSearchLeftPanel {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    min-width: 220px;
    overflow: hidden;
    height: 365px;
}

.advancedSearchLeftPanel .search-fields-wrapper {
    overflow-y: auto; 
    overflow-x: hidden;
    height: 320px
}

.advancedSearchLeftPanel .search-fields-panel {
    width:210px;
    border:none
}


.advanced-search-right-panel {
    height: 365px;
    display: inline-block;
    vertical-align: top;
    width: 74%;
    margin-right: 0;
    margin-left: 5px;
    overflow-y: auto;
    overflow-x: auto;
}

.advanced-search-right-panel .result-selection-single-click {
    width: 16px;
}

.advanced-search-container {
    margin: 0;
    padding: 0;
    height: 100%;
}

.advanced-search-separator {
    margin:  0;
    padding: 0;
    height:  0;
}

.advance-search-submit {
    margin-top: 5px;
}

#resultTable {
    display: inline-block;
 }
 
.full-width {
    width: 100% !important;
}

.input-list-field {
    margin-bottom: 2px;
}

.waitSearchText {
    display: table;
    margin: 0 auto !important;
}

.menu-node-container {
  width: 200px;
}
.menu-node {
    white-space: normal;
    word-break: break-word;
}

.footer-disclaimer {
    font-size: 12px;
    color: grey;
}

/** Label-value tables **/
.table-label {
    text-align: left;
    padding-right: 2.5em;
    vertical-align: middle;
}

.table-label-nested {
    font-style: italic;
    /** TODO transform this into em */
    padding-left: 50px !important;
}

.table-value {
    text-align: right;
    font-weight: bold;
    vertical-align: middle;
}
/************************/

/** Provisioning Info Panel **/
.provisioning-info-overlay-panel {
    min-width: 300px;
    text-align: left;
}

.provisioning-info-overlay-panel .table-label {
    font-weight: normal;
}

.provisioning-info-overlay-panel .ui-messages-warn-detail {
    font-weight: normal;
}

.overlay-panel-wrapped-text {
    word-wrap: break-word;
    width: 260px;
    display: block
}

.overlay-panel-footer {
    text-align: right;
    font-size: small !important;
    font-style: italic;
    font-weight: normal;
    color: grey;
    padding: 8px 0 0 50px;
}

.inline-small-button {
    height: 20px !important;
    width: 20px !important;
    margin-left: 7px !important;
    border-radius: 0.4em !important;
}

.inline-smaller-button {
    height: 15px !important;
    width: 15px !important;
    margin-left: 7px !important;
    border-radius: 0.4em !important;
}
/************************/

/** Panel common styles **/
.panel-footer {
    text-align: right;
    font-size: small !important;
    font-style: italic;
    font-weight: normal;
    color: grey;
}
/**************************

/** Key Value Tables **/
.keyValueTable table thead tr {
    display: none;
}

.keyValueTable tbody td {
    border: none !important;
}

.keyValueTable table,.dataTable {
    margin: auto;
    width: auto;
}

.key-value-table-panel{
    border: 0;
    padding: 0;
}
/************************/

.ui-tabs-nav {
    background-color: var(--light-component-bkg-color);
}

.ui-tabs-panels {
    background-color: var(--light-component-bkg-color);
    border: 1px solid #808080;
}

/** Constrain autocomplete size and inner text entries. */
.long-items.ui-autocomplete-panel {
    max-width: 80%; /* TODO Discuss the size */
}

.long-items.ui-autocomplete-panel li.ui-autocomplete-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.half-panel {
    width: 48%;
}

.chart-wrapper {
    height: 350px;
    padding: 1em 0;
}

div.chart-wrapper > .jqplot-target {
    height: 100%;
}

.block-headline {
    border: 1px gray solid;
    padding: 5px;
    border-radius: 5px;
    background-color: gainsboro;
    font-weight: bold;
    display: inline-block;    
}

.min-top-margined {
    margin-top: 5px;
}

.medium-top-margined {
    margin-top: 1em;
}

.min-left-margin {
    margin-left: 10px;
}

.top-vertical-align {
    vertical-align: top !important;
}

.middle-vertical-align {
    vertical-align: middle !important;
}

.no-margin {
    margin: 0 !important;
}

.checkbox-column {
    width: 18px;
}

.chart-legend {
    line-height: 1.5em;
}

.chart-legend,
.profile-name {
    display: block;
    max-width: 30em; /* TODO Discuss size */
    overflow: hidden;
    text-overflow: ellipsis
}

/** ONT Traffic Analysis */
.traffic-analysis-panel .traffic-analysis-inner-panel {
    margin-top: 14px;
    margin-bottom: 14px;
}

.traffic-analysis-panel .bw-analysis-chart {
    margin-top: 30px;
}

.hidden {
    display: none;
}

.offscreen {
    position: fixed;
    left: -1000px;
    top: -1000px;
}

/* Progress bar */
.ui-progressbar {
    border: 0 none;
    height: 1.714em;
    background-color: #6a737f;
    border-radius: 3px;
}

.ui-progressbar-value {
    border: 0 none;
    margin: 0;
    background: #133261;
    border-radius: 3px;
}

.ui-progressbar-label {
    margin-top: 0;
    color: white;
    padding-top: 2px;
}

/* New menu */
.menu-nav {
    max-width: 2.8em;
    background-color: var(--default-menu-bkg-color); /* This is header's background color */
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    height: calc(100% - 5px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: height 200ms 100ms ease, max-width 200ms 100ms ease;
    padding-top: 5px;
}

/* Scrollbar */
.menu-nav::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.menu-nav::-webkit-scrollbar-track {
    background: #133261;
    border-radius: 3px
}

/* Handle */
.menu-nav::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.menu-nav::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.menu-nav-form {
    height: 100%;
}

.menu-nav .menu-list {
    margin-bottom: 15px;
}

.menu-nav .menu-header {
    display: none;
    vertical-align: middle;
    padding: 5px 0 5px 1em;
}

.menu-nav.expanded .menu-header {
    display: inline-block;
}

.menu-nav .menu-header .ui-icon {
    display: inline-block;
    margin-left: -25px;
    cursor: pointer;
    vertical-align: middle;
}

.menu-nav .toggle {
    /** Hack to hide search box while transition is being performed */
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
}

.menu-nav .toggle-button {
    display: inline-block;
    padding: .5em 1.2em;
}

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

.menu-nav li {
    position: relative;
}

.menu-nav .search-container {
    margin-bottom: 5px;
}

.menu-nav .search-container input {
    margin-left: 1em;
    width: calc(100% - 4em);
}

.menu-nav .search-container.no-advanced-search input {
    width: calc(100% - 2em);
}

.menu-nav .search-container .advance-search-icon {
    color: var(--font-color-over-dark-bkg);
    cursor: pointer;
    font-size: 1.3em;
}

.menu-nav li a.menu-link {
    color: var(--default-menu-font-color);
    padding: .2em 1em .1em .5em;
    border-left: .5em solid transparent;
    display: flex;
    text-decoration: none;
}

.menu-nav a.menu-link .arrow {
    position: absolute;
    right: -10em;
    transition: right 200ms 100ms ease;
}

.menu-nav li.selected a.menu-link .arrow {
    transform: rotate(90deg) translateX(.5em) translateY(.5em);
}

.menu-nav>ul>li>ul>li a.menu-link {
    padding-left: 1.5em;
}

.menu-nav>ul>li>ul>li>ul>li a.menu-link {
    padding-left: 2em;
}

.menu-nav a.menu-link:hover > .text,
.menu-nav a.menu-link:focus > .text{
    text-decoration: underline;
}

.menu-nav a.menu-link:hover {
    background-color: var(--hover-component-bkg-color-opt1);
    color: var(--hover-menu-bkg-color);
}

.menu-nav a.menu-link:focus {
    background-color: var(--focus-menu-bkg-color);
    color: var(--focus-menu-font-color);
}

.menu-nav a.menu-link.active {
    background-color: var(--active-component-bkg-color-opt1);
    border-left-color: white;
    color: white;
}

.menu-nav>ul ul {
    overflow: hidden;
    max-height: 0;
    transition: max-height 200ms 100ms ease;
}

.menu-nav a.menu-link:focus i.fa {
    color: var(--focus-menu-font-color);
}

.menu-nav a.menu-link i.fa {
    color: var(--focus-menu-bkg-color);
    padding-right: 1em;
    max-width: 1em;
    min-width: 1em;
}

.menu-nav a.menu-link i.fa.spacer {
    padding-right: 1em;
}

.menu-nav input {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.menu-nav li.only-expanded {
    max-height: 0;
    transition: max-height 200ms 100ms ease;
}

.menu-nav.expanded {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.menu-nav.expanded>ul li.selected>ul {
    max-height: 1000px;
}

.menu-nav.expanded li.only-expanded {
    max-height: 1000px;
}

.menu-nav.expanded a.menu-link .arrow {
    right: 0;
}

.menu-nav hr {
    margin-left: 3em;
    margin-right: 1em;
    transition: margin-left 200ms 100ms ease;
}

.menu-nav.expanded hr {
    margin-left: 1em;
}

.menu-nav .menu-line-search-input {
    height: 1.6em;
    width: 100%;
}

.menu-nav .menu-line-search-input.no-advanced-search {
    width: calc(100% - 1.3em);
}

.menu-nav .menu-line-search-input::placeholder {
    color: #bbb;
    font-size: .8em;
    font-style: italic;
}

/** Make external links on old-menu look like usual internal links */
/** TODO ui-state-hover does not work for this type of links */
a.menu-node {
    color: #222;
}

img.header-assia-logo.loading {
    animation: logo-animation 5s linear infinite;
    -webkit-animation: logo-animation 5s linear infinite;
    -moz-animation: logo-animation 5s linear infinite;
}

/** Logo animation */
@-moz-keyframes logo-animation { from { -moz-transform: rotateX(0deg); } to { -moz-transform: rotateX(360deg); } }
@-webkit-keyframes logo-animation { from { -webkit-transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); } }
@keyframes logo-animation { from { transform: rotateX(0deg); } to { transform: rotateX(360deg);} }

/** Balloons. Circles with short text inside (usually counters) */
.balloon {
    display: inline-block;
    position: relative;
}

/* TODO Either use the same colors are ".color-*" styles or the other way around */
.balloon.color-good {
    color: var(--color-good);
}

.balloon.color-bad {
    color: var(--color-bad);
}

.balloon.color-warning {
    color: var(--color-warning);
}

.balloon.margin {
    margin-right: .3em;
}

.balloon.super {
    font-size: .8em !important;
    vertical-align: super;
}

.balloon.balloon-xl {
    font-size: 1.7em !important;
}

.balloon.balloon-xxl {
    font-size: 2.1em !important;
}

.balloon span.symbol {
    font-family: "FontAwesome";
}

.balloon span.text,
.balloon span.symbol {
    color: white; /* TODO Create special variable for this */
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: .6em;
}

.balloon span.symbol {
    top: 48%;
    left: 48%;
}

.balloon span.text {
    font-weight: bold;
    top: 50%;
    left: 50%;
}

.balloon.default-unknown span.symbol:before {
    content: "\f128"; /* fa-question */
}

.balloon.color-good span.symbol:before,
.balloon.status-ok  span.symbol:before {
    content: "\f00c"; /* fa-check */
}

.balloon.color-bad    span.symbol:before,
.balloon.status-error span.symbol:before {
    content: "\f00d"; /* fa-times */
}

.balloon.color-warning span.symbol:before {
    content: "\f12a"; /* fa-exclamation */
}

/* Icons using FontAwesome characters
   They are rendered using an inline element with two characters (see next style) */
.status-icon {
    display: inline-block;
    height: 1em;
    position: relative;
    vertical-align: bottom;
    width: 1em;
}

/* We will use one character for the icon background (usually a circle) and another and another for
   status icon. The former will be rendered in the ":before", the later in the ":after" but we want
   both to overlap, so the position is "absolute" from the ".status-icon" element */
.status-icon:before,
.status-icon:after {
    display: inline-block;
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
}

/* Default background character is the circle.
   Default background color is grey, for unknown values */
.status-icon:before {
    color: grey;
    content: "\f111"; /* fa-circle */
}

/* Default foreground icon color is white.
   Default icon is the "?" for unknown values.
   We use a slightly smaller font for the icon, so that the circle surrounds it completely
   (otherwise the icon will reach circle's edge)
   As a result of using a smaller font here, we will have to manually place the icon in the
   circle's center by using the "top" and "left" properties */
.status-icon:after {
    color: white; /* TODO Use same variable as for ballons */
    content: "\f128"; /* fa-question */
    font-size: .6em;
    top: .3em;
    left: .4em;
}

.status-icon.color-good:before,
.status-icon.normal:before,
.status-icon.line-status-0:before {
    color: var(--color-good);
}

.status-icon.color-good:after,
.status-icon.normal:after,
.status-icon.line-status-0:after {
    content: "\f00c"; /* fa-check */
    top: .4em !important;
    left: .2em !important;
}

.status-icon.degraded:before,
.status-icon.low:before,
.status-icon.color-low:before {
    color: var(--color-low-warning);
}

.status-icon.degraded:after,
.status-icon.low:after,
.status-icon.color-low:after {
    content: "\f129"; /* fa-info */
    left: .5em;
}

.status-icon.color-warning:before,
.status-icon.severely-degraded:before,
.status-icon.medium:before {
    color: var(--color-warning);
}

.status-icon.color-warning:after,
.status-icon.severely-degraded:after,
.status-icon.medium:after {
    content: "\f12a"; /* fa-exclamation */
    top: .4em !important;
    left: .5em !important;
}

.status-icon.color-bad:before,
.status-icon.line-status-1:before,
.status-icon.line-status-2:before,
.status-icon.service-interrupted:before,
.status-icon.high:before {
    color: var(--color-bad);
}

.status-icon.color-bad:after,
.status-icon.line-status-1:after,
.status-icon.line-status-2:after,
.status-icon.service-interrupted:after,
.status-icon.high:after {
    content: "\f00d"; /* fa-times */
    left: .3em;
}

.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/** Progress spinner icon */
.small-progress {
    width: 20px;
    height: 20px;
    margin: 0em .5em 0em .5em;
}

.small-progress.hidden-icon {
    display: none;
}

.profile-change-rt-diagnostics-status-panel * {
    vertical-align: middle;
    margin-top: 1em;
    margin-bottom: 1em;
}

.profile-change-rt-diagnostics-status-panel .profile-change-rt-diagnostics-status-text {
    font-style: italic;
    font-weight: bold
}

.pertone-chart canvas {
    margin: 0 auto;
    width: 100% !important;
    height: 300px !important;
}

/** Floating go-to-top button */
#floating-button {
    cursor: pointer;
    opacity: 0;
    position: fixed;
    right: -1em;
    bottom: -1em;
    transition: all .25s;
    visibility: hidden;
    z-index: 100;
}

#floating-button.visible {
    opacity: .8;
    right: 1em;
    bottom: 3em;
    visibility: visible;
}

#floating-button.visible:hover {
    opacity: 1;
}

#floating-button .circle {
    color: #17369e;
    text-shadow: 0 0 .15em #000;
}

#floating-button .text {
    color: #fff;
    top: 46%; /* TODO Rework the "balloon"s styles so that this hack for proper vertical alignment is not necessary*/
}

.floating-button-link {
    font-size: 2em;
}

.indent-after-first {
    text-indent: -1em;
    padding-left: 1em;
}

span.indent-after-first {
    display: inline-block;
}

table.border-collapse {
    border-collapse: collapse;
}

.pertone-comparison-line-selection-panel {
    margin: auto;
}

.pertone-comparison-line-selection-panel td {
    vertical-align: middle;
}

.pertone-comparison-line-selection-panel .ui-chips-container {
    width: 600px;
}

.pertone-comparison-line-selection-panel .ui-chips-container input {
    width: 400px;
}

.pertone-comparison-date-selection-panel {
    margin: 1em 0em
}

.pertone-comparison-date-selection-panel td {
    vertical-align: middle;
}

.olt-selector-panel {
    margin-top: 1em;
}

.olt-selector-panel > label {
    margin-right: 1em;
}

.text-with-tooltip {
    color: blue;
}

.dispatch-action-panel-content .action-message,
.dispatch-action-panel-content .normal-message,
.dispatch-action-panel-content .last-fix-date {
    display: block;
    clear: both;
    margin-top: 10px;
}

.dispatch-action-panel-content .action-message {
    font-weight: bold;
    font-size: 1.2em;
}

.dispatch-action-panel-content .normal-message {
    font-weight: bold;
}
.dispatch-action-panel-content .last-fix-date {
    font-weight: bold;
    font-style: italic;
}

.command-link-panel {
    font-weight: bold;
}

.command-link-panel a {
    font-style: normal;
}

.command-link-panel a i.pi{
    font-size: 1.5em;
    vertical-align: sub;
}

/** Vendor ID historical data styles */
.vendor-id-historical-data {
    min-width: 30em;
}

.vendor-id-historical tr {
    line-height: 1.5em;
}

.vendor-id-historical tr.highlight {
    background-color: #fffbe9;
}

.vendor-id-historical td i.pi {
    color: #2eb937;
    font-size: 1.5em;
    vertical-align: sub;
}

.margin-right {
    margin-right: .4em;
}

.margin-right-big {
    margin-right: 2em;
}

.margin-1 {
    margin: 0.5em 1em;
}

.inline-field-value-list {
    display: inline;
    white-space: nowrap;
}

.inline-field-value-list .field {
    font-weight: bold;
    margin-right: .5em;
}

.inline-field-value-list .value {
    margin-right: .8em;
}

.cpe-interoperability-row {
    overflow-wrap: anywhere;
}

/*****************************************/
/* Styles moved from "expresseStyle.css" */
/*****************************************/
.port-link.first-port,
.port-value.first-port {
    padding-right: 15px;
}

/**************************************************/
/* STYLES USED IN CLOUDCHECK AND COMMANDE PAGES,  */
/* BUT NOT IN THE REST OF EXPRESSE PAGES          */
/*                                                */
/* IMPORTANT: All styles that have generic class  */
/* names, but are not generic, MUST be prefixed   */
/* with 'body.wifi-theme' to ensure they will not */
/* affect Expresse or ClearView                   */
/**************************************************/
.margin-left {
    margin-left: .4em;
}

.margin-left-big {
    margin-left: 2em;
}

a.no-style {
    color: inherit !important;
    text-decoration: inherit !important;
}

.assia-checkbox div.ui-chkbox-box {
    cursor: pointer;
}

.assia-checkbox div.ui-chkbox-box.ui-state-disabled {
    cursor: auto;
    pointer-events: none;
}

body.wifi-theme .ui-widget-overlay {
    background: #636363 !important;
    opacity: .9;
}

body.wifi-theme .realtime-confirmation-dialog {
    width: 50em !important;
}

/* Buttons originally designed for Wi-Fi pages, now also used in Commande */
body.wifi-theme .action-button { /* TODO Create variables for colors */
    background: none #17369e !important;
    border: 1px solid #101b85 !important;
    color: white;
    cursor: pointer;
}

body.wifi-theme .action-button.ui-corner-all {
    border-radius: 1em;
}

/** This is to override new Google Chrome outline style of focused elements
 *  It fits on borderless or square elements, but does not feel good on rounded ones */
body.wifi-theme .action-button:focus {
    outline: none;
}

body.wifi-theme .action-button:hover {
    background-color: var(--hover-component-bkg-color-opt1) !important;
}

body.wifi-theme .action-button:focus > span.ui-button-text,
body.wifi-theme .action-button:hover > span.ui-button-text {
    text-decoration: underline;
}

body.wifi-theme img.device-type {
    height: 1.8em;
    margin-right: .3em;
    vertical-align: middle;
    width: 1.8em;
}

body.wifi-theme a.link-to-devices:hover,
body.wifi-theme a.link-to-devices:hover * {
    color: #3d5fd5 !important;
    text-decoration: underline !important;
}

.ui-dialog.no-title .ui-dialog-titlebar {
    display: none;
}

/* Rounded dialogs (grabbed from CloudCheck) */
.assia-rounded-dialog.ui-dialog,
.assia-rounded-popup {
    background-color: #fff !important;
    border-radius: 1em;
    font-style: normal !important;
    padding: 2em;
}

.assia-rounded-dialog.ui-dialog .ui-dialog-content {
    background-color: #fff !important;
}

.assia-rounded-dialog.ui-dialog .content {
    margin: 1.5em 0;
}

.assia-rounded-dialog.ui-dialog .content h1 {
    font-size: .9em;
}

.assia-rounded-dialog.ui-dialog a.close-button {
    color: black;
    font-size: .8em;
    font-weight: bolder;
}

.assia-rounded-dialog.ui-dialog button.close-button,
body.wifi-theme .action-cancel {
    background: none #fff !important;
    border: 1px solid #a5a5a5 !important;
    color: black !important;
}

.assia-rounded-dialog.ui-dialog .footer {
    text-align: right;
}

.assia-rounded-dialog.ui-dialog button.ui-button-text-only,
.assia-rounded-popup button.ui-button-text-only {
    cursor: pointer;
    border-radius: 1em;
}

.assia-rounded-dialog.ui-dialog button.ui-button-text-only {
    font-weight: normal;
}

.assia-rounded-dialog.ui-dialog button.ui-button-text-icon-left .ui-button-text {
    padding-left: 2em !important;
}

.assia-rounded-dialog.ui-dialog button.ui-button .ui-button-text,
.assia-rounded-popup button.ui-button .ui-button-text {
    padding: .5em 1.5em;
}

/* Buttons placed to the right of the dialog */
/** This is to override new Google Chrome outline style of focused elements
 *  It fits on borderless or square elements, but does not feel good on rounded ones */
body.wifi-theme .action-perform:focus,
body.wifi-theme .action-cancel:focus {
    outline: none;
}

/* Keep synched with ".action-button:hover" in "assiaStyle.css" for consistency */
body.wifi-theme .action-perform:hover {
    background-color: var(--hover-component-bkg-color-opt1) !important;
}

/* Keep synched with ".action-button:..." in "assiaStyle.css" for consistency */
body.wifi-theme .action-perform:focus > span.ui-button-text,
body.wifi-theme .action-perform:hover > span.ui-button-text,
body.wifi-theme .action-cancel:focus > span.ui-button-text,
body.wifi-theme .action-cancel:hover > span.ui-button-text {
    text-decoration: underline;
}

body.wifi-theme .action-perform,
body.wifi-theme .action-cancel {
    float: right;
}

/** Remove right margin applied by label-default-right-margin */
body.wifi-theme .action-perform.label-default-right-margin {
    margin-right: 0;
}

body.wifi-theme .action-perform {
    background: none #17369e !important;
    border: 1px solid #101b85 !important;
    color: white;
}

/** Dialogs with action buttons in the footer */
body.wifi-theme .action-dialog .confirm-dialog-severity {
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 10px;
}

body.wifi-theme .action-dialog .dialog-form {
    margin-top: 1em;
}

body.wifi-theme .action-dialog .action-perform,
body.wifi-theme .action-dialog .action-cancel {
    margin: 15px 5px 0 !important;
}

body.wifi-theme .action-dialog .dialog-form.no-input {
    margin-top: 1em;
}

body.wifi-theme .action-dialog.ui-dialog .ui-dialog-buttonpane,
body.wifi-theme .action-dialog.ui-dialog {
    background: none;
}

body.wifi-theme .action-dialog.ui-dialog .ui-button {
    margin: 0 5px;
}

body.wifi-theme .assia-rounded-dialog.ui-dialog.action-dialog .content {
    white-space: pre-wrap;
}

/* Fullpage block-ui (grabbed from CloudCheck) */
body.wifi-theme .ui-dialog.block-ui,
body.wifi-theme .ui-widget.block-ui,
body.wifi-theme .ui-corner-all.block-ui,
body.wifi-theme .ui-shadow.block-ui,
body.wifi-theme .block-ui .ui-dialog-content,
body.wifi-theme .block-ui .ui-widget-content {
    background: transparent !important;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Asynchronous operation progress dialog fixed on top right of the page */
.ui-dialog.async-progress-dialog {
    border: 1em solid var(--async-progressbar-bkg-color) !important;
    border-radius: 1em;
    box-shadow: 0 .3em .3em;
    background-color: var(--async-progressbar-bkg-color) !important;
    margin: 4em 3em 0 0;
}

.ui-dialog.async-progress-dialog .ui-dialog-content {
    background-color: transparent !important;
    overflow: visible;
}

.ui-dialog.async-progress-dialog .ui-dialog-content .spinner {
    width: 4em;
}

.ui-dialog.async-progress-dialog .ui-dialog-content .spinner img {
    height: 3em;
    width: 3em;
}

.ui-dialog.async-progress-dialog .ui-dialog-content .text {
    color: white;
}

.ui-dialog.async-progress-dialog .ui-dialog-content .text .title {
    font-size: 1.4em;
    font-weight: bold;
    padding-right: 3em;
    white-space: nowrap;
}

/* Search result table customization */
body.wifi-theme .search-result-table .ui-datatable-header {
    border: none;
}

body.wifi-theme .search-result-table .ui-paginator {
    background: transparent;
    color: black;
    border: none;
}

body.wifi-theme .search-result-table .ui-datatable-scrollable-header,
body.wifi-theme .search-result-table .ui-datatable-scrollable-header-box {
    background: transparent;
}

body.wifi-theme table.search-result-inner-table th.ui-state-default,
body.wifi-theme table.search-result-inner-table th.ui-state-hover {
    background: var(--light-component-bkg-color) !important;
    box-shadow: none !important;
    color: var(--font-color-over-light-bkg) !important;
    font-size: .9em;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    border-top: 0 !important;
    border-bottom: 1px solid #ccc !important;
    border-left: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
}

body.wifi-theme table.search-result-inner-table tr.ui-state-hover {
    background-color: #ddd !important;
    background-repeat: repeat-x !important;
    background-image: none;
    box-shadow: none !important;
    color: var(--font-color-over-light-bkg);
}

body.wifi-theme table.search-result-inner-table tbody {
    background-color: transparent;
}

body.wifi-theme .search-result-inner-table thead,
body.wifi-theme .search-result-table .ui-datatable-scrollable-header {
    border-color: #eaeaea;
}

body.wifi-theme .ui-growl-item-container {
       background: var(--light-component-bkg-color) !important;
       border-color: var(--font-color-over-light-bkg);
}

body.wifi-theme .ui-growl-item-container.ui-growl-info {
       color: rgb(48, 129, 221);
}

body.wifi-theme .ui-growl-item-container.ui-growl-warn {
       color: rgb(255, 165, 0);
}

/* Credential management for CloudCheck And Commande */
.ui-dialog.credential-management .ui-dialog-title h2 {
    margin: 0;
}

.ui-dialog.credential-management .basic-mode-width {
    width: 43em;
}

.ui-dialog.credential-management .adv-mode-width {
    width: 77em;
}

/* For password input text, make sure there is enough space for the button used to show/hide the password */
.network-credentials-container input.password-input {
    max-width: calc(100% - 45px);
}

.ui-button.password-view-toggle {
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
    color: black;
    box-shadow: none;
    margin: 0 !important;
}

.ui-button.password-view-toggle:focus,
.ui-button.password-view-toggle:hover {
    outline: 2px dashed;
    outline-offset: -7px;
}

.credential-management-blocker.ui-widget-overlay {
    background: #c5c0c0f0 !important;
    padding: 1em 1em 4em 1em;
    border-radius: 14px;
    margin-left: -1em;
    margin-top: -1em;
}

.credential-management-blocker-img {
    width: 2em;
    height: 2em;
}

/* Tooltips with complex contents (such as tables) */
.ui-tooltip .ui-widget-content {
    background: transparent;
    color: var(--light-component-bkg-color);
}

.ui-tooltip.detail-tooltip .ui-widget-content {
    font-size: .9em;
    line-height: .8em;
}

.ui-tooltip.detail-tooltip .ui-widget-content .data-label {
    font-weight: bold;
}

/** Toggle theme */
body.wifi-theme  .ui-toggleswitch-slider {
    background: none lightgrey;
    height: 0.8em;
    width: 2em;
}

body.wifi-theme .ui-toggleswitch-slider:before {
    background: none gray;
    height: 0.8em;
    width: 0.8em;
    bottom: 0;
}

body.wifi-theme .ui-toggleswitch-checked .ui-toggleswitch-slider:before {
    background: none limegreen;
    -webkit-transform: translateX(0.9em);
    -ms-transform: translateX(0.9em);
    transform: translateX(0.9em);
}

/* Colored balloons */
.flag-img-box {
    border-radius: 50%;
    color: #fff;
    padding: 0 8px;
    position: relative;
}

.flag-img-box.missing {
    border: 1px solid transparent;
}

.flag-img-box.missing:before {
    color: var(--color-not-defined);
    content: "\f068"; /* fa-minus */
    font-family: "FontAwesome";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flag-img-box.error,
.flag-img-box.high {
    background-color: var(--color-bad);
    border: 2px solid var(--color-bad);
}

.flag-img-box.warn,
.flag-img-box.medium {
    background-color: var(--color-warning);
    border: 2px solid var(--color-warning);
}

.flag-img-box.info {
    background-color: var(--color-info);
    border: 2px solid var(--color-info);
}

.flag-img-box.good {
    background-color: var(--color-good);
    border: 2px solid var(--color-good);
}

.flag-img-box.unknown {
    background-color: var(--color-unknown);
    border: 2px solid var(--color-unknown);
}

/* Spinners shown by JavaScript */
img.assia-spinner {
    display: none;
    height: 1.8em;
    margin-left: 1em;
    position: absolute;
    width: 1.8em;
}

/* Navigation icon-only buttons */
/* Using "#centerPanel .ui-widget" is necessary to override the font-size in "cloudCheck.css" */
#centerPanel .ui-widget button.action-button.navigation-button {
    font-size: 1.5em !important;
    font-weight: bold;
    height: 20px;
}

.ui-button-icon-only.action-button.navigation-button .ui-icon {
    margin-top: -11px;
    height: 20px;
    width: 20px;
    margin-left: -12px;
}

/* Chart legends */
.series-color {
    outline: 1px solid #ccc;
    border: 1px solid transparent;
}

.series-color .background {
    width: 0;
    height: 0;
    border-width: .5em;
    border-style: solid;
}

.toggle-all .series-color .background {
    color: var(--chart-select-all-color);
}

.series-legend.series-hidden:not(.toggle-all) .series-color .background {
    opacity: 0;
}

.leaning-x-axis-values {
    margin-right: 3em;
}

.chart-legends-container {
    border: 1px solid #ccc;
    padding: .5em;
    margin: .5em 0;
}

.series-legend-panel-header {
    font-weight: bold;
    margin: 1em 0;
    text-align: left;
    text-decoration: underline;
}

.series-legend-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10em, 20em));
    margin: .5em;
}

/** Handle specific cases when there are few items */
.series-legend-panel.single-item {
    grid-template-columns: 100%;
}

.series-legend-panel.two-items {
    grid-template-columns: 50% 50%;
}

.series-legend-panel.three-items {
    grid-template-columns: 33.33% 33.33% 33.33%;
}


.series-legend-panel.short-labels {
    grid-template-columns: repeat(auto-fill, minmax(7em, 13em));
}

.series-legend.ui-link,
.series-legend.ui-link.ui-state-disabled,
.series-legend.ui-link:visited {
    color: inherit;
    display: block;
    opacity: 1;
}

.series-color {
    display: inline-block;
    margin-right: .6em;
}

.series-label {
    vertical-align: top;
    display: inline-block;
    padding-left: 1em;
    text-indent: -1em;
    word-wrap: break-word;
    max-width: calc(100% - 16px - 1.6em);
}

.series-legend.series-hidden:not(.toggle-all) .series-label {
    text-decoration: line-through;
}

.series-legend.series-hidden.toggle-all .series-label.series-select-all,
.series-legend.toggle-all .series-label.series-clear-all {
    display: inline-block;
}

.series-legend.toggle-all .series-label.series-select-all,
.series-legend.series-hidden.toggle-all .series-label.series-clear-all {
    display: none;
}

.config-group-expand {
    vertical-align: bottom;
}

.config-group-expand .ui-icon {
    margin-top: -5px !important;
}

div.configuration-group-container-wrapper.hidden {
    display: none;
}

.configuration-group-container {
    list-style: none;
    margin: 0;
    padding: 0;
}

.configuration-group-container > li {
    display: inline-block;
}

.configuration-group {
    background: #e3e7f8;
    border: 1px solid #294fd1;
    color: black;
    border-radius: 5px;
    padding: 1px 5px;
    margin: 0 5px;
    line-height: 2em;
}

/**********************
* ERROR PAGE STYLES
***********************/

/* TODO Create variables for colors */
.error-table {
    font-size: 1rem;
}

.error-table-title {
    color:red;
    font-size:1.4em;
    font-weight:bold;
    font-family:Arial;
}

.home-page-link {
    font-size: 1rem;
    color:blue;
}

.error-details {
    background:transparent;
    border:0;
    float:left;
}

/******************
*  ACCESSIBILITY  *
*******************/

.accessible {
    --font-color-panel-title: white;
    --panel-title-bkg-color: #133261;

    --color-not-defined: #555555;
    --color-unknown: #4F5A65;
    --color-good: #134D13;
    --color-ok: #134D13;
    --color-bad: #800000;
    --color-warning: #D43900;
    --color-low-warning: #B74E64;
    --color-info: #006CE0;
}

/* Element will be located were they cannot be reached */
.screenreader-only {
        position:absolute;
        left:-10000px;
        top:-10000px;
        overflow:hidden;
}