/* Green Bean Management System
   Calmer sage palette, shared grid/header/form styles.
----------------------------------------------------------*/

:root {
    --gb-ink: #2f3a34;
    --gb-muted: #5d6b64;
    --gb-bg: #e6ebe7;
    --gb-paper: #fbfcfb;
    --gb-header: #3a5f4a;
    --gb-header-dark: #2c4a3a;
    --gb-menu: #314e3e;
    --gb-menu-hover: #4a735c;
    --gb-th: #3d5c4a;
    --gb-row-alt: #f1f5f2;
    --gb-row-hover: #e4eee7;
    --gb-border: #c9d4cc;
    --gb-link: #2d6a4f;
    --gb-link-hover: #1f4d39;
    --gb-accent: #6b8f78;
    --gb-danger: #a33b3b;
    --gb-focus: #7aa089;
}

html {
    background: var(--gb-bg);
}

body {
    background: var(--gb-bg);
    font-size: 0.875em;
    font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--gb-ink);
}

a:link, a:visited {
    color: var(--gb-link);
}

a:hover, a:active {
    color: var(--gb-link-hover);
    text-decoration: underline;
}

p {
    margin-bottom: 10px;
    line-height: 1.5em;
}

/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--gb-header-dark);
    margin: 0 0 0.45em 0;
}

h1 { font-size: 1.55em; }
h2 { font-size: 1.35em; padding-bottom: 0.25em; border-bottom: 1px solid var(--gb-border); }
h3 { font-size: 1.15em; }
h4 { font-size: 1.05em; }
h5, h6 { font-size: 1em; }

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0;
}

/* PRIMARY LAYOUT
----------------------------------------------------------*/

.page {
    width: 98%;
    max-width: none;
    background-color: var(--gb-paper);
    margin: 12px auto 24px auto;
    border: 1px solid #c3cdc6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(47, 70, 55, 0.08);
    overflow: visible;
}

.header {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--gb-header) 0%, var(--gb-header-dark) 100%);
    width: 100%;
    overflow: visible;
}

.header:after {
    content: "";
    display: table;
    clear: both;
}

.header h1 {
    font-weight: 600;
    margin: 0;
    padding: 8px 16px;
    color: #f4f8f5;
    border: none;
    line-height: 1.35em;
    font-size: 1.45em;
}

.header h1 img {
    vertical-align: middle;
    height: 56px;
    width: auto;
    background: #fff;
    border-radius: 12px;
    padding: 5px;
    box-sizing: content-box;
}

.main {
    font: inherit;
    padding: 16px 20px 24px 20px;
    margin: 0;
    min-height: 420px;
}

.leftCol {
    padding: 6px 0;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: var(--gb-muted);
    padding: 8px 0 16px 0;
    margin: 0 auto;
    text-align: center;
    line-height: normal;
}

/* TAB MENU
----------------------------------------------------------*/

div.hideSkiplink {
    background-color: var(--gb-menu);
    width: 100%;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 40;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

div.menu {
    padding: 4px 0 4px 8px;
    overflow: visible;
}

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

div.menu ul li a,
div.menu ul li a:visited {
    background-color: var(--gb-menu);
    border: 1px solid transparent;
    color: #edf3ef;
    display: block;
    line-height: 1.35em;
    padding: 6px 18px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover,
div.menu ul li a:active {
    background-color: var(--gb-menu-hover);
    color: #fff;
    text-decoration: none;
}

div.menu ul.dynamic {
    background: #243c30;
    border: 1px solid #1b2e24;
    z-index: 2000 !important;
}

div.menu ul.dynamic a,
div.menu ul.dynamic a:visited {
    background-color: #243c30;
    min-width: 13em;
}

div.menu ul.dynamic a:hover {
    background-color: var(--gb-menu-hover);
}

/* FORM ELEMENTS
----------------------------------------------------------*/

fieldset {
    margin: 1em 0;
    padding: 1em;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    background: #fff;
}

fieldset p {
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label {
    display: block;
}

fieldset label.inline {
    display: inline;
}

legend {
    font-size: 1.05em;
    font-weight: 600;
    padding: 2px 6px;
    color: var(--gb-header-dark);
}

input.textEntry,
input.passwordEntry {
    width: 320px;
    border: 1px solid var(--gb-border);
    border-radius: 4px;
    padding: 6px 8px;
}

div.accountInfo {
    width: 42%;
}

.main input[type="text"],
.main input[type="password"],
.main input[type="number"],
.main select,
.main textarea {
    border: 1px solid var(--gb-border);
    border-radius: 4px;
    padding: 4px 7px;
    font: inherit;
    color: var(--gb-ink);
    background: #fff;
}

.main input[type="text"]:focus,
.main input[type="password"]:focus,
.main select:focus,
.main textarea:focus {
    outline: 2px solid var(--gb-focus);
    border-color: var(--gb-accent);
}

.main input[type="submit"],
.main input[type="button"],
.main button,
.actionButton {
    background: var(--gb-header);
    color: #fff;
    border: 1px solid var(--gb-header-dark);
    border-radius: 4px;
    padding: 5px 12px;
    min-width: 5.5em;
    cursor: pointer;
    font: inherit;
}

.main input[type="submit"]:hover,
.main input[type="button"]:hover,
.main button:hover,
.actionButton:hover {
    background: var(--gb-menu-hover);
}

/* Grid/detail command buttons stay compact; image icons are not padded like form buttons */
.main table input[type="submit"],
.main table input[type="button"],
.main table button {
    min-width: 0;
    padding: 2px 6px;
    font-size: 0.85em;
}

.main table input[type="image"],
.main table img {
    padding: 0;
    min-width: 0;
    border: none;
    background: none;
    vertical-align: middle;
}

.NavigationButton,
.NavigationToPage {
    min-width: 0;
    padding: 2px 6px;
}

/* GRID NAVIGATION
----------------------------------------------------------*/

.NavigationButton {
    font-weight: 600;
    font-size: x-small;
    width: 24px;
    height: 26px;
}

.NavigationToPage {
    font-size: x-small;
    width: 28px;
    height: 22px;
}

/* TABLES / GRIDVIEWS
   Inline GridView HeaderStyle colours are overridden so every list
   uses the same muted sage header instead of lime or navy.
----------------------------------------------------------*/

.gridScroll {
    width: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow-x: auto;
    margin: 0 0 12px 0;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    background: #fff;
}

.gridScroll.packingLines,
.gridScroll.fitContents {
    width: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
}

table.TblZebra,
table.TblSimple,
table.TblThinRow,
table.TblWhite {
    font-family: inherit;
    text-align: left;
    margin: 0 0 12px 0;
    border-collapse: collapse;
    width: auto;
    max-width: none;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    overflow: visible;
    padding: 0;
}

.gridScroll table.TblZebra,
.gridScroll table.TblSimple,
.gridScroll table.TblThinRow,
.gridScroll table.TblWhite {
    margin: 0;
    border: none;
    border-radius: 0;
    width: auto !important;
    max-width: none;
}

.gridScroll table th,
.gridScroll table td {
    white-space: nowrap;
}

.gridScroll.fitContents table {
    width: auto !important;
    max-width: none;
}

.gridScroll.packingLines table.TblFit {
    width: auto !important;
    max-width: 100%;
}

.gridScroll.fitContents table th,
.gridScroll.fitContents table td {
    white-space: nowrap;
}

table.TblZebra th,
table.TblSimple th,
table.TblThinRow th,
table.TblWhite th,
table.TblZebra td,
table.TblSimple td,
table.TblThinRow td,
table.TblWhite td {
    border: 1px solid var(--gb-border) !important;
    text-align: left;
    padding: 4px 6px !important;
    color: var(--gb-ink) !important;
}

table.TblZebra th,
table.TblSimple th,
table.TblThinRow th,
table.TblWhite th {
    background-color: var(--gb-th) !important;
    color: #f4f8f5 !important;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: normal;
    line-height: 1.2;
}

table.TblZebra tr,
table.TblSimple tr,
table.TblThinRow tr,
table.TblWhite tr {
    background: #fff !important;
    color: var(--gb-ink) !important;
}

table.TblZebra tr:nth-child(even),
table.TblSimple tr:nth-child(even),
table.TblThinRow tr:nth-child(even),
table.TblWhite tr:nth-child(even) {
    background: var(--gb-row-alt) !important;
}

table.TblZebra tr:hover td,
table.TblSimple tr:hover td,
table.TblThinRow tr:hover td,
table.TblWhite tr:hover td {
    background: var(--gb-row-hover) !important;
    color: var(--gb-ink) !important;
}

table.TblZebra tr.odd {
    background: var(--gb-row-alt);
}

table.TblThinRow td,
table.TblThinRow th {
    padding: 4px 8px !important;
}

.TblLHColHdr {
    font-family: inherit;
    font-size: 12px;
    min-width: 480px;
    text-align: left;
    border-collapse: collapse;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--gb-border);
}

.TblLHColHdr th {
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-header-dark);
    padding: 10px 15px;
}

.TblLHColHdr td {
    color: var(--gb-muted);
    border-top: 1px solid var(--gb-border);
    padding: 6px 15px;
}

.TblLHCol-first {
    background: var(--gb-row-alt);
    font-weight: 600;
    color: var(--gb-header-dark);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

.TblLHCol-brown {
    background: #f4f1e6;
    font-weight: 600;
    color: #3a3729;
    vertical-align: middle;
}

.TblLHColHdr tr:hover td {
    color: var(--gb-ink);
    background: var(--gb-row-hover);
}

/* DetailsView / FormView */
.main table[cellspacing="2"],
.main table[cellpadding="3"] {
    border-collapse: separate;
}

.main .actionButton {
    min-width: 7em;
    padding: 0.35em 0.9em;
    margin: 0.25em 0.25em 0.25em 0;
}

/* Filters and add-forms */
.adjustForm,
.stockWarehouseQty,
#pnlNewPurchase,
#pnlNewAdjust {
    background: #f4f7f5;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
}

.adjustForm .adjustRow { overflow: hidden; margin-bottom: 0.55em; }
.adjustForm .adjustField { float: left; width: 48%; margin: 0 1% 0.35em 0; min-height: 2em; }
.adjustForm .adjustField label {
    display: inline-block;
    width: 8.5em;
    font-weight: 600;
    vertical-align: middle;
    color: var(--gb-header-dark);
}
.adjustForm .adjustField .fieldControl { display: inline-block; vertical-align: middle; }
.adjustForm .adjustActions { clear: both; margin-top: 0.8em; }
.adjustForm .adjustHint { clear: both; margin: 0.2em 0 0.6em 0; color: var(--gb-muted); }
.adjustForm .adjustNotes {
    clear: both;
    width: 98%;
    min-height: 2em;
}
.adjustForm .adjustNotes label {
    display: inline-block;
    width: 8.5em;
    font-weight: 600;
    vertical-align: middle;
}

/* MISC
----------------------------------------------------------*/

.clear { clear: both; }

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay {
    font-size: 0.95em;
    display: block;
    text-align: right;
    padding: 12px 16px 8px 16px;
    color: #eef4f0;
}

.loginDisplay a:link,
.loginDisplay a:visited,
.loginDisplay a:hover {
    color: #fff;
}

.appVersion {
    font-size: 0.75em;
    color: #d5e4da;
    margin-top: 2px;
}

.portalStaffPick {
    margin-top: 0.45em;
    font-size: 0.85em;
}

.portalStaffPick span {
    margin-right: 0.4em;
}

.portalStaffPick select {
    max-width: 16em;
}

.portalPickForm {
    max-width: 36em;
    margin: 0.6em 0 1.2em 0;
}

.portalPickForm .fieldRow {
    margin: 0.5em 0;
}

.portalPickForm .fieldLabel {
    display: inline-block;
    min-width: 7em;
    margin-right: 0.5em;
}

.failureNotification {
    font-size: 1.1em;
    color: var(--gb-danger);
}

.bold { font-weight: bold; }

.submitButton {
    text-align: right;
    padding-right: 10px;
}

.spacebefore { margin-left: 2em; }
.spaceafter { margin-right: 1.5em; }
.rightalign { text-align: right; }

.warehouseLinks a { white-space: nowrap; }

.buttonPanel {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f4f7f5;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4em;
}

.main .buttonPanel input[type="submit"],
.main .buttonPanel input[type="button"],
.main .buttonPanel button,
.buttonPanel .actionButton {
    margin: 0;
    min-width: 7em;
    padding: 0.35em 0.9em;
    font-size: inherit;
}

table.TblFit {
    width: auto !important;
    max-width: 100%;
}

.compactDetail {
    width: auto !important;
    max-width: 100%;
    display: inline-table;
    border-collapse: collapse !important;
}

.compactDetail td,
.compactDetail th {
    padding: 3px 8px !important;
    vertical-align: middle;
    border: 1px solid var(--gb-border);
}

.roastBatchForm {
    width: auto !important;
    max-width: 100%;
    display: inline-table;
}

.roastBatchForm table.roastBatchTable,
table.roastBatchTable {
    width: auto;
    max-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

table.roastBatchTable td {
    padding: 2px 8px 2px 0 !important;
    vertical-align: middle;
    line-height: 1.2;
}

table.roastBatchTable td:nth-child(odd) {
    font-weight: 600;
    width: 11em;
    white-space: nowrap;
}

table.roastBatchTable td.buttonRow {
    padding: 8px 0 0 0 !important;
    width: auto;
    font-weight: normal;
}

table.roastBatchTable td.blendMakeupCell {
    vertical-align: top;
    font-weight: normal;
    white-space: normal;
}

.greenBlendMakeup {
    display: block;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    max-width: 22em;
}

.gridScroll.fitContents.allowOverlay {
    overflow: visible;
}

table.TblThinRow td.greenCol,
table.TblFit td.greenCol {
    width: auto;
    white-space: nowrap;
    vertical-align: top;
    position: relative;
}

.greenStatus {
    white-space: nowrap;
    line-height: 1.3;
    position: relative;
}

.greenTick {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    font-weight: 700;
    color: #2d6a4f;
    font-size: 1.15em;
}

.greenWarn {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: #a33b3b;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 1em;
}

.blendToggle {
    margin-left: 6px;
    text-decoration: none !important;
    color: var(--gb-header-dark) !important;
    font-size: 1.1em;
    cursor: pointer;
}

h2.roastBatchHeading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1em;
}

.roastViewTabs {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

a.roastViewTab,
a.roastViewTab:visited {
    display: inline-block;
    padding: 5px 14px 4px 14px;
    margin: 0 0 -1px 3px;
    background: #d5dbd7;
    color: #4a5850;
    text-decoration: none;
    border: 1px solid #b7c0bb;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    min-width: 0;
}

a.roastViewTab:hover {
    background: #c5cdc8;
    color: #2d3a32;
}

a.roastViewTab-active,
a.roastViewTab-active:visited {
    background: #eef1ef;
    color: #2d3a32;
    border-color: #aeb6b1;
}

.roastGraphPanel {
    margin-top: 0.6em;
}

h2 .newItemLink,
h2 .newRoastLink {
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    color: #2d6a4f;
    margin-left: 1em;
    white-space: nowrap;
}

h2 .newItemLink:hover,
h2 .newRoastLink:hover {
    text-decoration: underline;
}

h2 .newItemLink img,
h2 .newRoastLink img {
    vertical-align: middle;
    margin-right: 4px;
}

.roastBatchTabs,
.blendSheetTabs {
    width: auto !important;
    max-width: 100%;
}

.blendSheetTabs .ajax__tab_header {
    background: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.25;
}

.blendSheetTabs .ajax__tab_header .ajax__tab_outer,
.blendSheetTabs .ajax__tab_header .ajax__tab_inner {
    display: inline-block;
    background: none !important;
    padding: 0 !important;
}

.blendSheetTabs .ajax__tab_header .ajax__tab_tab {
    display: inline-block;
    padding: 6px 14px 5px 14px !important;
    margin: 0 4px -1px 0 !important;
    background: #d5dbd7 !important;
    color: #4a5850 !important;
    font-weight: 600;
    border: 1px solid #b7c0bb;
    border-bottom: 1px solid var(--gb-border);
    border-radius: 6px 6px 0 0;
    height: auto !important;
    position: relative;
    z-index: 2;
}

.blendSheetTabs .ajax__tab_header .ajax__tab_hover .ajax__tab_tab {
    background: #c5cdc8 !important;
    color: #2d3a32 !important;
}

.blendSheetTabs .ajax__tab_header .ajax__tab_active .ajax__tab_tab {
    background: #fff !important;
    color: var(--gb-header-dark) !important;
    border-color: var(--gb-border);
    border-bottom-color: #fff !important;
}

.blendSheetTabs .ajax__tab_body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid var(--gb-border) !important;
    border-radius: 0 6px 6px 6px;
    padding: 12px 14px !important;
}

.greenNeededForm {
    max-width: 56em;
}

.greenNeededIntro {
    max-width: 42em;
    color: var(--gb-muted);
    margin: 0 0 0.85em 0;
}

.greenNeededInputs {
    margin: 0 0 0.85em 0;
}

.greenNeededForm .fieldRow {
    display: table;
    margin: 0.4em 0;
}

.greenNeededForm .fieldLabel {
    display: table-cell;
    min-width: 11em;
    padding-right: 0.85em;
    vertical-align: middle;
    white-space: nowrap;
}

.greenNeededForm .qtyBox {
    width: 7em;
    margin-right: 0.5em;
}

.greenNeededHint {
    display: block;
    color: #666;
    margin: 0 0 0.6em 0;
}

.greenNeededError {
    display: block;
    margin: 0 0 0.6em 0;
}

.greenNeededResult {
    display: block;
    clear: both;
    margin-top: 0.35em;
}

.greenNeededTotal {
    display: block;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--gb-header-dark);
    margin: 0 0 0.7em 0;
}

.greenNeededResult .gridScroll,
.greenNeededResult .gridScroll.fitContents {
    display: block;
    width: auto;
    max-width: 100%;
}

.roastBatchTable input.setpointAim {
    color: #444444;
}

.roastBatchTabs .ajax__tab_body {
    height: auto !important;
    overflow: visible !important;
}

.roastProfileChart {
    max-width: 100%;
    margin: 0.6em 0 0 0;
}

.roastProfileCanvasWrap {
    width: 46em;
    max-width: 100%;
    min-height: 360px;
    height: 360px;
    background: #fff;
}

.roastProfileCanvasWrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.roastProfileMarkers {
    margin: 0 0 0.8em 0;
}

.roastProfileMarkers span {
    font-weight: 600;
    margin-right: 0.6em;
}

.roastProfileMarker {
    margin-right: 1em;
    white-space: nowrap;
}

.roastProfileEmpty {
    display: block;
    margin: 0 0 0.6em 0;
    color: var(--gb-muted);
}

.blendDetails {
    position: absolute;
    left: 0;
    top: 1.5em;
    z-index: 8;
    margin-top: 0;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: 4px;
    white-space: nowrap;
    font-size: 0.9em;
    max-width: none;
    box-shadow: 0 4px 12px rgba(47, 70, 55, 0.12);
}

.portalCards {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px 0;
    margin: 1em 0 0 0;
}

.portalCard {
    display: table-cell;
    width: 33%;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    padding: 16px 18px 18px 18px;
    box-shadow: 0 4px 12px rgba(47, 70, 55, 0.08);
    vertical-align: top;
}

.portalCard h3 {
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0;
}

.portalCard p {
    color: var(--gb-muted);
    min-height: 3.2em;
}

.portalCard a.actionButton,
.portalCard a.actionButton:visited,
.portalCard a.actionButton:hover {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

/* User admin lists */
table.list {
    border-collapse: collapse;
    border: 1px solid var(--gb-border);
    background: #fff;
}
table.list th {
    background: var(--gb-th) !important;
    color: #f4f8f5 !important;
    font-weight: 600;
    padding: 7px 10px;
    text-align: left;
}
table.list td {
    border-top: 1px solid var(--gb-border);
    padding: 6px 10px;
}
table.list tr:nth-child(even) { background: var(--gb-row-alt); }

/* BUSY OVERLAY
----------------------------------------------------------*/

body.gb-is-busy {
    cursor: wait;
}

.gb-busy {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50000;
    background: rgba(47, 58, 52, 0.28);
    cursor: wait;
}

.gb-busy.gb-busy-visible {
    display: block;
}

.gb-busy-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
}

.gb-busy-bar-run {
    width: 32%;
    height: 100%;
    background: #d7eadc;
    -webkit-animation: gbBusySlide 1.1s ease-in-out infinite;
    animation: gbBusySlide 1.1s ease-in-out infinite;
}

.gb-busy-card {
    position: absolute;
    top: 38%;
    left: 50%;
    width: 220px;
    margin-left: -110px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(47, 70, 55, 0.22);
    text-align: center;
    color: var(--gb-header-dark);
    font-weight: 600;
}

.gb-busy-spin {
    width: 22px;
    height: 22px;
    margin: 0 auto 10px auto;
    border: 3px solid #d5e3d9;
    border-top-color: var(--gb-header);
    border-radius: 50%;
    -webkit-animation: gbBusySpin 0.8s linear infinite;
    animation: gbBusySpin 0.8s linear infinite;
}

.gb-busy-text {
    font-size: 0.95em;
}

@-webkit-keyframes gbBusySlide {
    0% { margin-left: -32%; }
    100% { margin-left: 100%; }
}

@keyframes gbBusySlide {
    0% { margin-left: -32%; }
    100% { margin-left: 100%; }
}

@-webkit-keyframes gbBusySpin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes gbBusySpin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}