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

html {
    font-size: 12px;
}

body {
    font-family: "Open Sans", Arial, sans-serif, serif;
    color: var(--gidc-grey-900);
}

label {
    font-weight: 600;
}

/* Flexbox layout */
header, footer {
    background-color: var(--gidc-blue-800);
    color: #fff;
    font-size: 12px;
}

header {
    font-weight: 500;
    height: 64px;
}

footer {
    height: 40px;
}

header a#headerForm\:logo {
    border: none;
}

header #logoText {
    font-size: 1.1em;
    font-weight: 600;
}

header a, footer a {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 2px solid #fff;
}

header a:hover, footer a:hover {
    text-decoration: none !important;
    border-bottom: 2px solid var(--gidc-green-500);
}

footer a:has(.pi) {
    border-bottom: none !important;
}

footer a:has(.pi):hover {
    border-bottom: none !important;
}

footer .pi {
    font-size: 1.4rem !important;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lex-panel-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gidc-blue-50);
}

.lex-wrapper, .lex-wrapper-800 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.lex-wrapper {
    max-width: 1920px;
}

.wrapper-800 {
    max-width: 800px;
    margin: auto;
}

.lex-icon-button {
    display: inline-block;
    margin: 0.2rem;
}

.lex-icon-button em {
    font-size: 1.3rem !important;
}

.lex-icon-circle::before {
    content: "\e911";
    display: inline-block;
    font: normal normal normal 14px/1 primeicons;
    font-size: inherit;
    width: 1.5em;
    text-align: center;
}

.lex-accepted::before {
    color: var(--gidc-green-500);
}

.lex-disapproved::before {
    color: var(--gidc-red-500);
}

.lex-pending:before {
    color: var(--gidc-yellow-500);
}

.lex-loaded::before {
    color: #e80ae4;
}

.lex-cancelled::before {
    color: var(--gidc-blue-300);
}

.lex-delivered::before {
    color: var(--gidc-blue-800);
}

.lex-damaged::before {
    color: var(--gidc-grey-500);
}

.lex-undelivered::before {
    color: var(--gidc-red-100);
}

.lex-panel {
    border: 1px solid var(--gidc-grey-350);
    background: var(--gidc-grey-150);
    padding: 1rem 1rem;
    color: var(--gidc-grey-900);
    border-radius: 4px;
}

.lex-scroll-panel {
    width: 100%;
    height: 200px;
    border: 1px solid var(--gidc-grey-200);
    margin: 0;
    padding: 10px;
    overflow: auto;
    border-radius: 4px;
}

/* Mobile Simulator overrides */

#form\:shipmentDialog > .ui-dialog-titlebar.ui-widget-header.ui-helper-clearfix {
    padding: 0.5rem 1rem;
}

div#form\:shipmentDialog_content {
    padding: 0;
    margin: 0;
    overflow: clip;
}

/* PrimeFaces overrides */
div#blockUi {
    box-shadow: none !important;
}

div#blockUi em {
    font-size: 8em;
}

/* Hack to fix PrimeIcons alignment issue in MS Edge */
.pi {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    transform: translateZ(0);
    will-change: transform;
}