/* Site-specific style */

/* Login page */
#login-body {
    margin: 0;
    padding: 0;
    background-color: #eeeeee;
}
#login-sidebar-background {
    background: url(/images/swissmade-bg.jpg);
    background-size: contain;
    background-repeat: repeat-y;
}
#login-sidebar {
    max-width: 100%;
    background-color: #ff0000;
}
#login-logo {
    float: right;
}
#login-title-parent {
    display: flex;
    align-items: center;
}
#login-title {
    font-weight: 600;
    font-size: xx-large;
    color: #00b798;
}
#login-company {
    font-weight: 600;
    padding-right: 0.5em;
}
#login-copyright {
    font-size: xx-small;
}
#login-footer-left {
    padding-bottom: 5px;
    height: 10px;
    background-color: #00b798;
    opacity: 0.9;
    z-index: -99;
}
#login-footer-right {
    padding-bottom: 5px;
    height: 10px;
    background-color: #BBBBBB;
    opacity: 0.9;
    z-index: -99;
}
a.login-link {
    color: #00b798;
}

/* Header on full-screen pages */
.page-header {
    font-weight: 200;
    font-size: x-large;
    padding-top: 20px;
    padding-bottom: 30px;
}
/* Header on detail (pop-up) dialogs */
#detailsDiv .page-header {
    font-weight: 200;
    font-size: large;
    padding-bottom: 20px;
}

/* Column header on result page */
.columns-header-text {
    font-weight: 200;
    font-size: large;
    padding-bottom: 10px;
}

/* Price on result page */
.bold-text {
    font-weight: 200;
    font-size: large;
}

.progressTracker {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Progress button is currently not used, because it's not good enough yet */
.progressButton {
    font-size: smaller;
    font-weight: lighter;
}

/* Any input fileds which are read-only */
input:read-only {
    background-color: #F0F0F0;
}
input:-moz-read-only {
    /* Firefox special */
    background-color: #F0F0F0;
    /* Hide spinner in Firefox */
    -moz-appearance: textfield;
}
.readonly-input {
    /* IE special, because 'input:read-only' doesn't work in IE (need to set class=readonly-input) */
    background-color: #F0F0F0;
}

input[type="number"] {
     /* Hide spinner in Firefox (if not hover) */
    -moz-appearance: textfield;
}
input[type="number"]:read-write:hover,
input[type="number"]:read-write:focus {
    /* Show spinner in Firefox only on focus or hover */
    -moz-appearance: number-input;
}

/* Input fields with space left for a FontAwesome '?' */
.inputtext-with-tooltip-mark {
    width: calc(100% - 28px) !important;
    box-sizing: border-box;
}

/* Some rows, like those with spinners, need more space to be distinctable from the next row */
.grid-row-padding
{
    padding-bottom: 5px;
}

/* Vertical spacer to be used in a ui-grid */
.spacer 
{ 
    margin:0;
    padding:0;
    height:50px;
}
.spacer-small 
{ 
    margin:0;
    padding:0;
    height:10px;
}

/* Form validation error */
.text-danger {
    color: #ffffff;
    background-color: #f44336;
    border-color: #f44336;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* Split multi-line messages */
.ui-messages-summary {
    margin-left: 10px;
    font-weight: bold;
    vertical-align: top;
}
.ui-messages-detail {
    white-space: pre;
    display: inline-block;
}

/* Navigation bar */
.ui-menu {
    background: #f0f0f0;
}
#menubar .ui-menuitem-link
{
    margin-left: 10px;
    margin-right: 10px;
}
#menubar .ui-menuitem-text {
    font-weight: bold;
}
#menubar .ui-widget-content {
    border: 1px solid #262626;
    color: #DDD;
}

/* set copyright notice to the right */
#menubar > li:last-child {
    float: right;
}
#menubar-copyright {
    color: #00b798;
    font-size: small !important;
}
a.menubar-link {
    color: #00b798;
}

#menubar-language {
    margin-left: 80px;
    width: 100%;
}

.buttonPanel {
    position: fixed;
    bottom: 5px;
    padding-top: 15px;
    padding-bottom: 5px;
    width: 100%;
    background-color: white;
    opacity: 0.9;
    z-index: -99;
}

/* DataGrid with DeviceVariant buttons */
[id^=deviceVariantGrid] .ui-datagrid-column {
    padding: 0;
}
[id^=deviceVariantGrid] .ui-button {
    background-size: contain;
    height: 80px;
    width: 80px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: none;
}
[id^=deviceVariantGrid] .ui-widget-content {
    background: none;
    border: none;
}
[id^=deviceVariantGrid] .ui-state-hover {
    border: solid;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

/* DeviceVariant row headers */
[id^=deviceVariantHeader] .gridRowHeader {
    display: block;
    height: 75px;
    margin-top: 5px;
    background-color: white;
}
[id^=deviceVariantHeader] .gridRowHeaderName {
    display: inline;
}
[id^=deviceVariantHeader] .gridRowHeaderDescription {
    margin-top: 2px;
    /*margin-bottom: 4px;*/
    margin-right: 4px;
    font-size: small;
    font-style: italic;
}
.gridRowHeaderDescription p {
    margin: 2px 0px 0px 0px;
}
[id^=deviceVariantHeader] .ui-datagrid-column {
    padding: initial;
}
[id^=deviceVariantHeader] .ui-datagrid-content {
    border: none;
}


/* DataGrid with Component buttons */
[id^=componentGrid] .ui-datagrid-column {
    padding: initial;
}
[id^=componentGrid] .ui-datagrid-content {
    justify-content: flex-start;
}
[id^=componentGrid] .ui-button {
    width: 0;
    margin-right: 0;
}
[id^=componentGrid] .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
[id^=componentGrid] .ui-state-default {
    border: none;
}
[id^=componentGrid] .ui-widget-content {
    background: none;
    border: none;
    width: 925px;  /* suitable for 18 components of 50px each, plus some spare for borders etc. */
}
.fa-link, .fa-cog, .fa-cogs {
    color: #FF9900;
    /*background: #00b798;*/
    position: absolute;
    top: 0% !important;
    left: unset !important;
    right: 0% !important;
    margin-top: 2px !important;
    margin-right: 2px !important;
}

/* Buttons under a datatable should (almost) fill parent (pui-grid-responsive) container */
#btAddRow, #btEditRow, #btDeleteRow {
    width: 90%;
}

/* Progress dialog */
#dlgProgress {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.8;
    /*display: flex;
    justify-content: center;
    align-items: center;
    resize: both;
    overflow: auto;*/
}

/* Progress-bar on form-submit */
progress:not(value) {
    position: absolute;
    top: 50%;
    left: 10%;
    text-indent: .5em;
    width: 80%;
    height: 1em;
}
/* Text on form-submit */
.progresslabel {
    font-weight: 200;
    font-size: x-large;
    text-align: center;
    margin: 10px;
    padding: 10px;
    width: 80%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 40%;
    left: 50%;
    resize: both;
    overflow: hidden;
}

#sketch3d {
    width: 100%;
}

/* to style an inline FontAwesome icon (currently used for the '?'-tooltip) */
.fa-icon {
    display: inline-block;
    vertical-align: top;
    margin-left: 2px;
    color: cornflowerblue;
}

/* System-wide PrimeUI customizations */

/* Butons should (almost) fill parent container, except when it's within a confirmation dialog (pui-dialog-buttonpane) */
.ui-dialog-buttonpane .ui-button
{
    width: auto;
}
.ui-spinner-button
{
    width: 20px !important;
}
.ui-button
{
    width: 98%;
    box-sizing: border-box;
}


/* Dropdown list should fill parent container */
.ui-dropdown
{
    width: 100%;
    box-sizing: border-box;
}

/* Autocomplete-dropdown should fill parent (pui-grid-responsive) container */
.ui-autocomplete
{
    width: 100%;
    box-sizing: border-box;
}

/* Input fields should fill parent (pui-grid-responsive) container */
.ui-inputtext {
    width: 100%;
    box-sizing: border-box;
}
.ui-spinner-input
{
    text-align: left;
}

/* Overlays (background on detail dialogs) */
.ui-widget-overlay {
    background: #BBBBBB;
}

/* Change background color of checkbox (PrimeUI puiswitch) to green/red */
.ui-inputswitch .ui-inputswitch-on {
    background: #00B798;
}
.ui-inputswitch .ui-inputswitch-off {
    background: #FF7C7C;/*#FFA0A0;*/
}

.field-validation-error {
    color: red;
}

/* Accordion header should be smaller and the selected one should have no special color */
.ui-accordion .ui-accordion-header a {
    display: block;
    font-size: 1em;
    padding: .1em .5em .1em 2.2em;
}
.ui-state-active, .ui-state-active a:link {
    border: 1px solid #93c3cd; /* copied from theme */
    background: #93c3cd; /* copied from theme */
    font-weight: bold;
    color: #333333;
}