@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:500');

/* general */
input {
    letter-spacing: 0.04em;
}

input[readonly] {
    pointer-events: none;
    border-bottom-color: #f4f4f4 !important;
}

input.number, td.number {
    text-align: right !important;
}

span.number {
    float: right !important;
}

.gray-background {
    background-color: #4c4c4c;
}

.main-header .logo em {
    font-style: unset;
}

div.ui-messages-error a.message-link {
    color: #fff;
    text-decoration: underline;
}

div.ui-fluid div.ui-selectonemenu {
    height: unset;
}

div.ui-fluid div.ui-selectonemenu input.ui-inputfield {
    border: none !important;
}

div.ui-selectbooleancheckbox {
    display: flex;
    padding-bottom: 4px;
}

div.ui-selectbooleancheckbox .ui-chkbox-box {
    flex-shrink: 0;
}

div.ui-chkbox span.ui-icon-check {
    vertical-align: baseline;
}

i.fa-info-circle, i.fa-exclamation-circle {
    padding-left: .2em;
}

.ui-panel .ui-panel-content .ui-g {
    padding-top: 1em;
}

.ui-datepicker .ui-datepicker-header button {
    background: unset;
    border: unset;
}

.month-navigator-pane {
    display: inline-block;
    width: max-content;
}

.month-navigator-pane span.ui-icon-circle-triangle-w:before {
    font-family: FontAwesome;
    margin: 0 7px;
    content: "\f0d9" !important
}

.month-navigator-pane span.ui-icon-circle-triangle-e:before {
    font-family: FontAwesome;
    margin: 0 7px;
    content: "\f0da" !important
}

/* header */
body header.main-header {
    z-index: 1000;
}

/* sidebar */
.sidebar-menu span.label {
    line-height: inherit;
}

/* dialogs */
.ui-dialog-buttonpane {
    text-align: right !important;
}

.ui-dialog-content .ui-dialog-buttonpane {
    margin: 15px 5px -5px 5px !important;
}

.ui-dialog-content div.ui-material {
    margin-top: .5em;
    margin-bottom: .5em;
}

.ui-dialog-content span.ui-confirm-dialog-severity {
    display: none !important;
}

/* datatable */
.ui-datatable thead a.ui-rowgroup-toggler {
    float: left;
}

.ui-datatable thead th.ui-state-default {
    font-weight: 600;
}

.ui-datatable tfoot > tr > td {
    font-weight: 600 !important;
    color: #222 !important;
}

.ui-datatable .ui-rowgroup-header {
    background-color: #f9f9f9;
}

.ui-datatable .tag {
    float: right;
}

.ui-datatable .tag.tag-warning {
    color: #dd4b39;
}

.ui-datatable.no-alternating-rows .ui-datatable-odd {
    background-color: unset;
}

.ui-datatable-tablewrapper a.action-icon {
    text-decoration: none !important;
    float: right;
    margin-right: .1em !important;
    margin-left: .6em !important;
}

.ui-datatable-tablewrapper .ui-column-title a.link {
    color: #3c8dbc;
}

.ui-datatable-scrollable-body {
    outline: none;
}

.ui-datatable-scrollable-theadclone {
    visibility: collapse;
}

/* errors */
.error-container {
    display: block !important;
    padding-top: 4em;
}

.error-content {
    display: flex;
    background-color: white;
    max-width: 60em;
    margin: 0 auto;
    padding: 0 2em;
}

.error-content .sad-face {
    font-size: 150px;
    padding-right: 28px;
}

.error-content .title {
    font-size: 24pt;
    padding: 1em 0 0.5em;
}

/* search */
.search-criteria .ui-material .ui-link {
    margin-right: 0.8em;
}

.search-criteria .intervals {
    padding-top: 0;
    padding-bottom: 0;
}

.search-results {
    padding-top: 1.5em;
}

/* login */
html.login-page {
    background: center/cover no-repeat url(/billing/jakarta.faces.resource/bg-01.jpg.xhtml?ln=img) #4c4c4c;
    height: 100%;
}

.login-box {
    width: 28em;
}

.login-box .login-logo a {
    color: #666;
    font-size: 40pt;
    font-weight: 600;
}

.login-box .login-logo em {
    color: #296282;
    font-style: unset;
}

.login-box .login-box-body {
    padding: 0;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.4);
}

.login-box .login-box-body .ui-tabs {
    opacity: 0;
    transition: opacity .2s ease-in;
    background-color: transparent;
}

.login-box .login-box-body .ui-tabs .ui-tabs-panel {
    background-color: white !important;
}

.login-box .login-box-body .ui-tabs .ui-tabs-panel .info a {
    color: #3c8dbc;
    text-decoration: underline;
}

.login-box .login-box-body .service-logo, .login-box .login-box-body .service-logo-mini {
    max-height: 2.2em;
}

.login-box .login-box-body .ui-tabs-header {
    width: auto !important;
}

.login-box .login-box-body .ui-tabs-header a {
    padding: .5em .7em
}

.login-box .login-box-body .ui-tabs-header.ui-state-default {
    min-width: 2em;
    max-width: 4em;
    transition: min-width .4s, max-width .4s;
}

.login-box .login-box-body .ui-tabs-header.ui-state-active, .login-box .login-box-body .ui-tabs-header.ui-state-hover {
    min-width: 6em;
    max-width: 10em;
}

.login-box .login-box-body .ui-tabs-header.ui-state-default .service-logo {
    display: none;
}

.login-box .login-box-body .ui-tabs-header.ui-state-default .service-logo-mini {
    display: unset;
}

.login-box .login-box-body .ui-tabs-header.ui-state-active .service-logo, .login-box .login-box-body .ui-tabs-header.ui-state-hover .service-logo {
    display: unset;
}

.login-box .login-box-body .ui-tabs-header.ui-state-active .service-logo-mini, .login-box .login-box-body .ui-tabs-header.ui-state-hover .service-logo-mini {
    display: none;
}

.login-box .login-box-body .message {
    text-align: center;
    white-space: pre-line;
}

.login-box .login-box-body .confirmation {
    background-color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 1em 1.4em;
}

.login-box .login-box-body .confirmation .code {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.login-box .login-box-body .confirmation iframe {
    width: 100%;
    height: 8em;
    border: 0;
}

.login-box .login-box-body .confirmation .ui-progressbar {
    height: 0;
    margin-top: 0.6em;
}

.login-box .login-box-body div.ui-g {
    padding-top: 1em;
}

.login-box .login-box-body div.ui-message {
    min-height: 1.5em;
}

.login-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
}

.login-footer a {
    color: inherit;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* user menu */
.user-menu .dropdown-menu {
    right: 0 !important;
    width: 300px !important;
}

.user-menu .dropdown-menu a {
    color: #3c8dbc !important;
}

.user-menu .dropdown-menu i {
    margin-right: 5px;
}

.user-menu .clients {
    margin-bottom: 10px;
}

.user-menu .clients .switch {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.user-menu .bottom-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* contracts */
.contracts .access-key-block {
    margin-left: 1em;
}

.contracts .access-key-block .ui-commandlink {
    color: #3c8dbc;
    text-decoration: underline;
}

.contracts .access-key-block .access-key {
    display: flex;
    line-height: 2;
}

.contracts .access-key-block .access-key .key {
    font-size: 22px;
    font-weight: 600;
    text-indent: 0;
    padding-bottom: 0.1em;
    padding-right: 0.2em;
}

.contracts .access-key-block button.ui-button {
    align-self: center;
    padding: 2px !important;
}

/* certs */
.cert-renew-dialog textarea.cert-data {
    font-family: monospace !important;
    height: 8em !important;
    line-height: 1.1 !important;
    resize: vertical !important;
}

.cert-renew-dialog label.cert-data-label {
    padding: 0 !important;
    top: -20px !important;
    font-size: 12px !important;
}

.cert-renew-dialog i.cert-data-command {
    color: #3c8dbc !important;
    right: .8em !important;
    top: .2em !important;
}

@media (max-width: 460px) {
    .login-box {
        width: 92%;
    }
}

@-moz-document url-prefix() {
    body ul.sidebar-menu li span.label {
        margin-top: unset;
    }
}
