/* Global default styles. */

/*Go to color-scheme.css to make changes to the color scheme of the portal */
@import url("color-scheme.css?v=8");

:root {
    --bulma-table-cell-padding: 0.25em 0.5em;
    --bulma-link-text: var(--link-color);
    --page-horizontal-gutter: 40px;
}

@media (prefers-color-scheme: dark) {
  .container-body, html, body, h1, table, td, .label, input:not([type="submit"]), textarea, .control {
    color-scheme: light !important;
    //background-color: white;
    color: var(--primary-font) !important;
    /*border-color: #444444;*/
  }

html {
  scroll-behavior: smooth;
}

table td {
  background-color: #ffffff;
  color: #363636;
  border-color: #dbdbdb !important; /* Bulma's default border color */
}
}


* {
    /* Zero out all padding and margins to start with for better
     * cross-browser control. */
    padding: 10;
    margin: 0;
}

body, input, select, textarea, .inProgress {
    //font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    //font-family: Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
	//font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body {
    //font-size: 90%;
    background: #fff;
    //background-color: var(--alt-bg);
    color: var(--primary-font);
}

big {
  padding-left: none;
}

p {
    margin-bottom: 10px;
}

::placeholder {
    color: #ddd;
    opacity: 1;
}

img, .img, .img:active, .img:hover, .img:visited, .image {
    border: none;
    vertical-align: middle;
    background: transparent;
}
/* This must be declared seperately or IE will ignore all of the selectors. */
input[type=image] {
    border: none;
    vertical-align: middle;
    background: transparent;
    padding: 0;
}

.iconImg {
    background-color: transparent;
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    width: 20px;
}

span.hordeIcon {
    background-image: url("graphics/horde.png");
}

ins {
    background: #cfc;
}
del {
    background: #fcc;
}

br.spacer {
    line-height: 8px;
}

.box {
    padding: 3px;
    background: #fff;
}
.solidbox {
    border: 1px solid #000;
}
.greybox {
    border: 1px solid #000;
    background: #e9e9e9;
}
.headerbox {
    border: 1px solid #a6b0b1;
    border-top-width: 0;
    background: #fff;
    vertical-align: top;
}
.headerbox form {
    padding: 2px;
}

/*
.header {
    margin-top: 0px;
    font-weight: 800;
    line-height: var(--bulma-title-line-height);
    font-size: 1.50rem;
    margin-bottom: 1.5rem;
}
*/

.header1 {
    margin-top: 0px;
    font-weight: 800;
    line-height: var(--bulma-title-line-height);
    font-size: 1.50rem;
    margin-bottom: 1.5rem;
    color: hsl(221deg, 14%, 21%);
}


.header {
    color: hsl(221deg, 14%, 21%);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.125;
    margin-bottom: 1.5rem;
}


.header a:hover, a.header:hover {
    color: #333;
}
.header img {
    vertical-align: bottom;
}
.header input, .header select {
    font-size: 80%;
}
.header .smallheader input, .header .smallheader select, .header .smallheader .button {
    font-size: 89%;
}
.header .button, .header .smallheader .button {
    font-size: 72%;
}

.header strong {
    color: var(--font-color);
}
.header2 {
    /* background: url("graphics/tabset.png") repeat-x; */
    //background: var(--header-bg);
    font-weight: 800;
    line-height: var(--bulma-title-line-height);
    font-size: 2em;
    color: var(--font-color);
    text-align: left;
    font-size: 20px;
    padding: 11px 10px 8px 4px;
    //border: 1px solid #CCC;
    //border-radius: 5px;
    margin: 0px;
    min-height: 21px;
    color: var(--header-font); /* 337ab7; */ /* 333; */
}
.header2 a:hover, a.header:hover {
    color: #333;
}
.header2 img {
    vertical-align: bottom;
}
.header2 input, .header select {
    font-size: 80%;
}
.header2 .smallheader input, .header .smallheader select, .header .smallheader .button {
    font-size: 89%;
}
.header2 .button, .header .smallheader .button {
    font-size: 72%;
}

.nowrap {
    white-space: nowrap;
}
.clear {
    clear: both;
    line-height: 0;
    height: 0;
}

a {
    color: var(--link-color); /* 777; */ /* f5f5f5; */ /* #36525d; */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

a:hover:not([type="button"]):not(.button):not([type="submit"]) {
  color: var(--account-bg) !important;
}

//a:hover {
//    text-decoration: underline;
//}

.selected {
    background: #bbcbff;
}
.selected-over {
    background: #cef;
}

/* Table styles. */
table {
    //margin-left: 10px;
    /* border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    //border-right: 1px solid #ccc; */
}
td, th {
    padding: .10em .20px 0px .20em !important; /* padding: .20em .30em 0px .30em !important; */
    /* overflow: hidden; */
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    font-size: 95%;
}

table td, table th {
    vertical-align: middle !important;
}

ul.linedRow {
    list-style-type: none;
}
.linedRow, tr.linedRow td, table.linedRow td, ul.linedRow li {
    color: #000;
    background: #fff;
    border-bottom: 1px solid #d0d0d0;
}
table.linedRow, ul.linedRow {
    border-bottom: none;
}
.linedRowSelectedCol, td.linedRowSelectedCol, table.linedRow td.linedRowSelectedCol {
    color: #000;
    background: #f3f3f3;
    border-bottom: 1px solid #d0d0d0;
}
.selectedRow, tr.selectedRow td, .selectedRow a {
    background-color: #36525d;
    color: #fff;
}
table.nopadding {
    margin-left: 0;
    border-spacing: 0;
}
table.nopadding td, table.nopadding th {
    padding: 0;
}
table.nopadding table td, table.nopadding table th {
    padding: 0px;
}
table.nopadding .headerbox td, table.nopadding .headerbox th {
    padding: 0px 0px;
}
.sortdown, .sortup {
    font-weight: bold;
}
.sortup {
    background: url("graphics/za.png") left center no-repeat !important;
    text-indent: 15px;
}
.sortdown {
    background: url("graphics/az.png") left center no-repeat !important;
    text-indent: 15px;
}

/* Horde UI standard tables */
table.horde-table {
    border-spacing: 0;
}
table.horde-table th {
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
}
table.horde-table th.sortdown, table.horde-table th.sortup {
    font-weight: bold;
}
table.horde-table th.rightAlign {
    text-align: right;
}
table.horde-table td {
    border-bottom: 1px solid #d0d0d0;
}
.horde-table-header th, table.horde-table td, table.horde-table th {
    height: 21px;
    margin-left: 5px;
    padding: 0 5px;
}
.horde-table-header, table.horde-table thead tr, table.horde-table th {
    //background-image: url("graphics/tablehead-bg.png");
    background-color: var(--accent-light-color);
    background-repeat: repeat-x;
}
.horde-table-header a, table.horde-table th a {
    color: #000;
}
.horde-table-header .horde-split-left,
table.horde-table thead .horde-split-left,
.horde-table-header .horde-split-right,
table.horde-table thead .horde-split-right {
    background-image: url("graphics/tablehead-split.png");
    background-repeat: no-repeat;
}
.horde-table-header .horde-split-right,
table.horde-table thead .horde-split-right {
    background-position: right center;
}
table.horde-table thead .horde-split-left.sortup,
table.horde-table thead .horde-split-right.sortup,
table.horde-table thead .horde-split-left.sortdown,
table.horde-table thead .horde-split-right.sortdown {
    text-indent: 20px;
}
table.horde-table thead .horde-split-left.sortup,
table.horde-table thead .horde-split-left.sortdown {
    background-position: 5px center, left center;
}
table.horde-table thead .horde-split-right.sortup,
table.horde-table thead .horde-split-right.sortdown {
    background-position: 5px center, right center;
}
table.horde-table thead .horde-split-left.sortup,
table.horde-table thead .horde-split-right.sortup {
    background-image: url("graphics/za.png"), url("graphics/tablehead-split.png");
}
table.horde-table thead .horde-split-left.sortdown,
table.horde-table thead .horde-split-right.sortdown {
    background-image: url("graphics/az.png"), url("graphics/tablehead-split.png");
}
.horde-table-header .iconImg {
    vertical-align: middle;
}

/* Alternating styles. */
.striped, .rowEven {
    background-color: #eee;
}
.rowOdd {
    background-color: #ddd;
}
.striped.hover .rowEven:hover, .striped.hover .rowOdd:hover {
    background: #bbcbff;
}

.smallheader {
    font-size: 100%;
    font-weight: bold;
    padding: 2px;
}
.header .smallheader {
    font-size: 80%;
}
.header .smallheader a.smallheader {
    font-size: 100%;
}
small, .small {
    font-size: 80%;
}
.control {
    color: #000;
    background: #ebeff0;
    padding: 5px;
}
.accessKey {
    text-decoration: none;
}
.text {
    color: #000;
    background: #fff;
}

/* Base range input */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Remove focus/active outline */
input[type="range"]:focus,
input[type="range"]:active {
  outline: none;
  box-shadow: none;
  border: none;
}

/* Chrome / Safari / Edge track */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  border: none;
}

/* Chrome / Safari / Edge thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #3273dc; /* Bulma primary */
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px; /* Align with track */
  border: none;
  box-shadow: none;
}

/* Firefox track */
input[type="range"]::-moz-range-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  border: none;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #3273dc;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: none;
}

/* Remove Firefox focus outline */
input[type="range"]::-moz-focus-outer {
  border: 0;
}




/* Form styles. */
.horde-form table {
    width: 100%;
    padding: 2px;
    border-collapse: collapse;
    border-spacing: 0;
}




.horde-form tr {
    vertical-align: top;
}
.horde-form td {
    padding-bottom: 5px;
}
.horde-form-buttons {
    padding: 10px;
    margin: 10px 0;
    background-color: #ebeff0;
}
.horde-form .horde-form-buttons {
    padding-left: 15%;
}
.horde-form td.horde-form-label {
    padding: 5px 9px 0 0;
    text-align: right;
}
.horde-form-error {
    color: #f00;
}
.horde-form-field-description {
    color: var(--primary-font);
    font-size: 70%;
}
input, select, textarea {
    font-size: 100%;
    font-weight: normal;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    margin-bottom: 2px !important; 
}

textarea {
    padding: 5px !important;
}
input, select {
    min-height: 0px; /* RayJ Changed */
}
input, option {
    padding: 5px 10px;
}
select {
    padding: 5px;
}
input:focus, textarea:focus, select:focus {
    background-color: #fff;
    border: solid 2px var(--link-color);
    outline: none;
    margin: -1px;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button,
a.horde-button,
a.horde-default,
a.horde-create,
a.horde-delete {
    /* background-image: url("graphics/button.png"); */
    background-color: var(--button-bg);
    font-weight: 600;
    border-color: var(--button-bg);
    background-repeat: repeat-x;
    border: 1px solid var(--button-border);
    border-radius: 5px;
    padding: 8px 16px;
    color: var(--button-font); /* #000; */
    cursor: pointer;
    //margin-top: 5px;
}

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button[type="submit"]:hover, a.horde-button:hover, a.horde-default:hover, a.horde-create:hover, a.horde-delete:hover, button:hover {
    opacity: 0.9;
}

a.horde-button, a.horde-default, a.horde-create, a.horde-delete, a.horde-cancel {
    display: inline-block;
    padding: 4px 13px;
    font-weight: normal;
    text-decoration: none;
    color: #000;
}
input.horde-default, a.horde-default {
    /* background-image: url("graphics/button-default.png"); */
    border-color: #4cae4c; /* #2a2a2a; */
    color: #fff;
    border: 1px solid #d0d0d0;
}
input.horde-create, a.horde-create {
    /* background-image: url("graphics/button-delete.png"); */
    border-color: var(--primary-font);
    background-color: var(--primary-font);
}
input.horde-suspend, a.horde-suspend {
    /* background-image: url("graphics/button-delete.png"); */
    border-color: #F08000;
    background-color: #F08000;
    color: #fff;
}
input.horde-delete, a.horde-delete {
    /* background-image: url("graphics/button-delete.png"); */
    border-color: hsl(348, 100%, 61%);
    background-color: hsl(348, 100%, 61%);
    color: black;
    font-weight: 500;
}
input.horde-cancel {
    background: transparent;
    border-style: none;
    color: #496f7e;
    padding: 3px;
    text-decoration: underline;
}
a.horde-cancel {
    color: #496f7e;
    padding: 4px 3px;
    text-decoration: underline;
}
input.horde-cancel:hover, a.horde-cancel:hover {
    text-decoration: none;
}
form[action^="https://"] input[type="submit"].horde-default {
    //background-image: url("graphics/locked-inv.png"), url("graphics/button-default.png");
    background-position: 95% center, left top;
    background-repeat: no-repeat, repeat-x;
    padding: 10px 20px 10px 20px;
}
input[disabled], input[disabled]:hover, textarea[disabled], option[disabled] {
    background-color: #e9e9e9;
    color: #a8a8a8;
}
.checkbox input[type="checkbox"], .radio input[type="radio"] {
    border: 0;
    height: 14px;
    width: 14px;
    background: transparent;
}

pre, code, .fixed, table.lineNumbered * {
    font-family: Menlo,Consolas,"Lucida Console","DejaVu Sans Mono",monospace;
}

/* Styles for email-like messages. */
.signature {
    color: #ccc;
}
.signature .fixed {
    color: #ccc;
}
.citation {
    margin: 1em 0;
    padding-left: 1em;
    border-left-width: 1px;
    border-left-style: solid;
    min-height: 12px;
}
.quoted1 {
    color: #606;
    border-color: #606;
    background-color: #eee;
}
.quoted2 {
    color: #077;
    border-color: #077;
}
.quoted3 {
    color: #900;
    border-color: #900;
}
.quoted4 {
    color: #009;
    border-color: #009;
}
.quoted5 {
    color: #b60;
    border-color: #b60;
}

/* Various popup and status layers. */
.notices {
    list-style-type: none;
}
.notices li, .notice {
    font-weight: bold;
    color: #000;
    background: #fff; /* #ffc; */
    border-bottom: 1px solid #d0d0d0;
    padding: 7px 10px;
    position: relative;
}
.notices img, .notice img {
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 0;
    margin-left: -30px;
}
.notices div.noticetext, .notice div.noticetext {
    //margin-left: 30px;
}
.tooltip, div.nicetitle {
    color: #000;
    padding: 5px;
    z-index: 1001;
    background: #eceff0;
    border: 1px solid #919293;
    -moz-box-shadow: 3px 3px 3px #888;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
}
div.nicetitle {
    position: absolute;
    overflow: hidden;
}
.inProgress {
    font-size: 80%;
    padding: 2px;
    color: #fff;
    background: #f00;
}

/* Quick add popup styles */
.quickAdd {
    width: 30em;
    padding: 1em;
    border: 1px solid #ccc;
    background: #fff; /* #ffc; */
}
.quickAdd textarea {
    width: 100%;
    height: 10em;
    margin-top: .5em;
}
.quickAdd p {
    margin-top: .5em;
    margin-bottom: .5em;
}
.quickAdd label {
    font-weight: bold;
}

/* Tree styles. */
img.horde-tree-icon {
    padding-right: 5px;
}
span.horde-tree-icon {
    padding: 3px 20px 3px 0;
}
.horde-tree-row {
    min-height: 20px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.horde-tree-toggle {
    cursor: pointer;
}
.horde-tree-spacer {
    width: 50%;
}

span.horde-tree-image {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}
span.horde-tree-image-1 {
    background-image: url("graphics/tree/line.png");
}
span.horde-tree-image-2 {
    background-image: url("graphics/tree/join.png");
}
span.horde-tree-image-3 {
    background-image: url("graphics/tree/joinbottom-down.png");
}
span.horde-tree-image-4 {
    background-image: url("graphics/tree/joinbottom.png");
}
span.horde-tree-image-5 {
    background-image: url("graphics/tree/minustop.png");
}
span.horde-tree-image-6 {
    background-image: url("graphics/tree/minus.png");
}
span.horde-tree-image-7 {
    background-image: url("graphics/tree/minusbottom.png");
}
span.horde-tree-image-8 {
    background-image: url("graphics/tree/minusonly.png");
}
span.horde-tree-image-9 {
    background-image: url("graphics/tree/plustop.png");
}
span.horde-tree-image-10 {
    background-image: url("graphics/tree/plus.png");
}
span.horde-tree-image-11 {
    background-image: url("graphics/tree/plusbottom.png");
}
span.horde-tree-image-12 {
    background-image: url("graphics/tree/plusonly.png");
}
span.horde-tree-image-13 {
    background-image: url("graphics/tree/nullonly.png");
}
span.horde-tree-image-14 {
    background-image: url("graphics/tree/folder.png");
}
span.horde-tree-image-15 {
    background-image: url("graphics/tree/folderopen.png");
}
span.horde-tree-image-16 {
    background-image: url("graphics/tree/leaf.png");
}

/* Modal forms */
body.modal-form {
    //background-color: var(--background-color);
    font-size: 110%;
    width: 20.5em;
    margin: 5em auto 4em auto;
    /*moz-border-radius: 10px;
    -webkit-border-radius: 10px;*/
    border-radius: 10px;
    /*
    -moz-box-shadow: 0 0 2em #ccc;
    -webkit-box-shadow: 0 0 2em #ccc;
    box-shadow: 0 0 2em #ccc;*/
}

#login-container {
    border-radius: 10px;
    padding: 15px;
    width: 21em;
    /*border: 1px solid black;*/
    background-color: white;
    box-shadow: 0 0 2em #ccc;
}

body.modal-form #login-logo {
    /*background-color: white;*/
    padding-top: 20px;
}

#login-logo img {
    min-width: 120px;
    width: 120px;
}

#login-logo-large img {
    min-width: 200px;
    width: 200px;
}

.password-reset-logo {
    min-width: 100px;
    width: 100px;
}

@media (max-width: 768px) {
    
   #login-container {
    margin: 5em auto;
    min-width: 90%;
    width: 90%;
    }
}


.horde-form-header {
    margin-bottom: 1em;
    border-bottom: thin dashed #ccc;
}
div.modal-form .notices {
    padding-top: 1em;
    font-size: 75%;
}
div.modal-form .notices li:first-child {
    border-top: 1px solid #d0d0d0;
}
div.modal-form form {
    padding: 1em;
    background-color: white;
}
div.modal-form label {
    font-weight: bold;
}
div.modal-form input, div.modal-form select {
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;
    width: 18em;
    margin-bottom: .5em;
}
div.modal-form input {
    padding-left: 0.5em;
    padding-right: 0.5em;
    /* width: 17.5em; */
    width: 95%;
    height: 30px;
    border-radius: 5px;
}

div.modal-form .submit-button {
    display: block;
    margin: .5em auto .9em auto;
    width: auto;
    height: 45px;
    background-color: var(--button-bg);
    border-radius: 5px;
    color: var(--button-font);
    border: 1px solid var(--button-border);
}

div.modal-form .submit-button:active {
    color: var(--header-color);
}

div.modal-form .extras {
    font-size: 75%;
    border-top: thin dashed #ccc;
    margin: .5em 0;
    text-align: center;
    color: var(--link-color);
}

/* Login page. */
.login-app {
    padding: 5px;
    text-align: center;
}

/* Login tasks */
div.logintasks-item {
    margin-bottom: 1em;
}
div.logintasks-item label {
    font-weight: normal;
    font-size: 90%;
}
div.logintasks-item 
input {
    width: auto;
    margin-bottom: 0;
}



/* Main body. */
.horde-ajax {
    overflow: hidden;
}


#horde-body {
  display: flex;
  align-items: stretch;
  width: 100%;

  /* Defeat legacy float layout */
  float: none !important;

  /* Helps with absolutely-positioned children in some Horde views */
  position: relative;
}

.horde-ajax #horde-body {
    position: absolute;
    top: 67px; /* 56px; */
    bottom: 0;
    border-bottom-width: 0;
}

#horde-contentwrapper {
  /* Take remaining space */
  flex: 1 1 auto;

  /* Prevent wide tables/long content from blowing out the layout */
  min-width: 0;

  /* Defeat legacy float/full-width wrapper rules */
  float: none !important;
  width: auto !important;

  box-sizing: border-box;
  //margin-left: 20px;
}

#horde-content {
  margin-left: 0px !important;
}

.horde-no-sidebar #horde-content {
    padding-left: 0;
}

/* Pager. */
.pager {
    text-align: center;
}

/* Tab styles. */
.tabset {
    background: url("graphics/tabset.png");
    float: left;
    min-height: 32px;
    width: 100%;
    margin-bottom: 25px;
}
.tabset ul {
    list-style: none;
}
.tabset li {
    background: url("graphics/tab.png") repeat-x;
    float: left;
    height: 22px;
    line-height: 22px;
    margin: 10px 3px 0 0;
    padding: 0 10px;
    white-space: nowrap;
}
.tabset li a {
    color: #9ca1a4;
    display: block;
    font-weight: bold;
    text-decoration: none;
}
.tabset li.horde-active {
    background: #fff;
}
.tabset li.horde-active a {
    color: #000;
}
.tabset img {
    display: block;
    float: left;
    padding: 1px 2px 0 0;
}

/* Preferences. */
#services_prefs .header ul {
    float: right;
    text-align: right;
    font-size: 80%;
}
#services_prefs .header li {
    list-style: none;
    display: inline;
}
#services_prefs .header img {
    vertical-align: middle;
}
.prefsOverview div {
    float: left;
}
.prefsOverview div div {
    padding-left: 10px;
    width: 95%;
}
.prefsOverview h2 {
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 8px;
}
.prefsOverview dt a {
    display: block;
    padding: 2px 2px 2px 0;
    font-weight: bold;
    color: #777;
}
.prefsOverview dd {
    padding: 2px 2px 2px 0;
    margin-bottom: 10px;
}
div.prefsContainer {
    padding: 1em;
}
div.prefsContainer > div {
    padding-bottom: 3px;
}
div.prefsContainer p {
    padding-top: 1em;
}
div.prefsContainer input.checkbox {
    vertical-align: middle;
}
img.prefsLinkImg {
    padding-right: 1px;
}
span.prefsAdvanced {
    padding: 6px 10px 0 0;
    font-size: 71%;
    font-weight: normal;
}

div.prefsErrorDiv {
    border: 1px solid red;
    display: inline-block;
    padding: 2px;
}

div.prefsError, .cacheAdminError, .htAdminError {
    color: red;
}

/* Block styles. */
.currentBlock {
    border: 2px solid red;
}
.blockIcons {
    display:none;
    vertical-align: middle;
    margin-left: 5px;
}
.blockHeader:hover .blockIcons {
    display: inline;
}

/* Help styles. */
body.help_about, body.help_entry {
    margin: 0.5em;
}
.helplink {
    cursor: help;
}
.help {
    background: #fff;
    color: #000;
}
.help h1 {
    font-size: 125%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.help h2 {
    padding-top: 1em;
    padding-bottom: 0.5em;
    font-size: 110%;
}
.help p {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
}
.help em {
    display: block;
    padding: 5px;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
}
.help em.helpTip {
    color: #090;
    background: #e0f0e0;
}
.help em.helpWarn {
    color: #900;
    background: #f0e0e0;
}

/* Keyboard key style */
.kbd {
    background: #eee;
    color: #000;
    white-space: nowrap;
    padding: 1px 2px;
    border: 1px solid #888;
    font-size: 90%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
span.keydownImg {
    background-image: url("graphics/keys/down.png");
}
span.keyleftImg {
    background-image: url("graphics/keys/left.png");
}
span.keyrightImg {
    background-image: url("graphics/keys/right.png");
}
span.keyupImg {
    background-image: url("graphics/keys/up.png");
}

/* Source markup styles. */
table.lineNumbered * {
    line-height: 16px;
}
.lineNumbered th {
    background: #e9e9e9;
    border-right: 1px solid #e0e0e0;
    border-bottom: none;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
}
.lineNumbered td {
    vertical-align: top;
    width: 100%;
    white-space: pre;
    background: #fff;
    padding-left: 10px;
}
.parentheses {
    color: #2a6;
    font-weight: bold;
}
.comment {
    color: #aac;
}
.htag {
    color: #569;
    background: #d5d6da;
    font-weight: bold;
}
.metac {
    color: #0ff;
    background: #d5d6da;
}
.id {
    color: #e82;
    background: #e4e4e0;
}
.attr {
    color: #6af;
}
.value {
    color: #d46;
}
.color {
    color: #f57;
}
.eol {
    color: #26e;
}
.url {
    color: #962;
}
.file {
    color: #444;
    background: #fe4;
}
.class {
    font-style: italic;
}

/* Sound selection. */
ul.sound-list {
    list-style: none;
}
.sound-list li {
    height: 24px;
}
.sound-list embed {
    vertical-align: middle;
    height: 24px;
}

/* Calendar Popup. */
.hordeCalendarPopup {
    border: 1px solid #ccc;
    background: #fff;
    width: 12em;
}
.hordeCalendarPopup thead {
    font-weight: bold;
}
.hordeCalendarPopup th {
    border-bottom: 1px solid #ccc;
}
.hordeCalendarPopup tbody {
    text-align: right;
}
.hordeCalendarPopup a {
    color: #000;
    display: block;
    padding: 2px;
}
.hordeCalendarPopup tbody a:hover {
    background: #ffc;
}
.hordeCalendarPopup .hordeCalendarCurrent {
    font-weight: bold;
    background: #eef;
}
.hordeCalendarPopup .hordeCalendarToday {
    font-weight: bold;
}
.hordeCalendarPopup .hordeCalendarWeek {
    background: #bbb;
    font-size: 90%;
    font-style: italic;
}

.hidden {
    display: none;
}

#load{
    width:86%;
    height:90%;
    position:fixed;
    z-index:9999;
    /* background:url("graphics/redbox_spinner.gif") no-repeat center center rgba(0,0,0,0.2) */
    background:url("graphics/ZZ5H.gif") no-repeat center center rgba(0,0,0,0.2)
}

/* Redbox styles. */
#RB_overlay {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    background-color: #000;
    filter: alpha(opacity=60);
    -moz-opacity: .6;
    opacity: .6;
}
#RB_loading {
    z-index: 101;
    width: 66px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    padding-bottom: 66px;
    text-align: center;
    background: url("graphics/redbox_spinner.gif") no-repeat bottom center;
}
#RB_window {
    z-index: 102;
    background-color: #fff;
    text-align: left;
}
#RB_window p, #RB_window ul {
    margin-bottom: 3px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.RB_confirm {
    background: #fff; /* #ffc; */
    border: 1px solid #ccc;
    padding: 1em;
}
.RB_confirm input {
    margin: .2em;
}
.RB_confirm ul {
    margin-left: .5em;
}
#RB_info {
    width: 30em;
    padding: 1em;
    border: 1px solid #ccc;
    background: #ccf;
}
#RB_info input {
    margin: .2em;
}

/* Color picker styles. */
#color-picker {
    color: #999;
    background: #000;
    padding-bottom: 8px;
    border: 1px solid #111;
    width: 148px;
    height: 155px;
    z-index: 200;
}
#color-picker .north {
    background: #111;
    border-bottom: 1px solid #171717;
    font-size: 90%;
}
#color-picker .north div {
    color: #999;
    float: right;
    padding: 5px 7px;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
#color-picker .north div:hover {
    color: #fff;
}
#color-picker .south {
    margin: 32px 0 0 10px;
    cursor: crosshair;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
#color-picker .south img {
    height: 100%;
    width: 100%;
    position: relative;
    top: -8px;
    left: -1px;
}
#color-picker #color-picker-cursor {
    background: url("graphics/color-picker-cursor.gif") no-repeat;
    position: absolute;
    height: 9px;
    width: 9px;
    z-index: 101;
}
#color-picker #color-picker-cursor img {
    height: 100%;
    width: 100%;
    position: relative;
    top: -8px;
    left: -1px;
}
#color-picker #color-picker-hex {
    padding: 5px 0 4px 7px;
    cursor: text;
    float: left;
}
#color-picker #color-picker-hex:hover {
    color: #fff;
}
#color-picker #color-picker-hex-edit {
    float: left;
}
#color-picker #color-picker-resize {
    float: right;
    top: -14px;
    left: 7px;
    height: 14px;
    width: 14px;
    cursor: se-resize;
}
#color-picker #color-picker-sphere {
    height: 128px;
    width: 128px;
}
.color-picker-palette-src {
    background-image: url("graphics/color-picker-palette.png");
}
.color-picker-resize-src {
    background-image: url("graphics/color-picker-resize.gif");
}

.leftAlign {
    text-align: left;
}
.rightAlign {
    text-align: right;
}
.leftFloat {
    float: left;
}
.rightFloat {
    float: right;
}

/* Toggle quote styles. */
.toggleQuoteHide, .toggleQuoteShow {
    cursor: pointer;
    background: #ddd;
}
.toggleQuoteHide:hover, .toggleQuoteShow:hover {
    text-decoration: underline;
}
.toggleQuoteParent {
    margin-bottom: 8px;
}

/* SpellChecker styles. */
.spellcheckChecking, .spellcheckIncorrect {
    color: #f00;
}
.spellcheckIncorrect, .spellcheckCorrected {
    text-decoration: underline;
    cursor: pointer;
}
.spellcheckCorrected {
    color: #090;
}

/* Permissions. */
.permsAdd, .permsDelete, .permsEdit {
    padding-left: 3px;
}

/* KeyNavList styling. */
.KeyNavList {
    background: #eceff0;
    border: 1px solid #919293;
    border-bottom-width: 0;
    -moz-box-shadow: 3px 3px 3px #888;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
    overflow-x: hidden;
    overflow-y: auto;
    /*padding: 2px;*/
    position: absolute;
    z-index: 10000;
}
.KeyNavList ul {
    list-style-type: none;
}
.KeyNavList ul li {
    cursor: pointer;
    height: 19px;
    border-bottom: 1px solid #919293;
    padding: 5px 10px 0 10px;
    color: #000;
    white-space: nowrap;
}
.KeyNavList ul li.noselect {
    color: #888;
}
.KeyNavList ul li.selected {
    background: #c2ccd0;
}
.KeyNavList ul li:hover, .KeyNavList ul li.selected:hover {
    background: #36525d;
    color: #fff;
}

.table-btn {
    height: 30px !important;
    width: 30px !important;
}

/* Tag lists. */
ul.horde-tags {
    display: inline;
    list-style-type: none;
}
.hordeACListItem, ul.horde-tags li {
    display: inline-block;
    padding: 2px 4px;
    margin-right: 4px;
    background-color: #fff;
    color: #000;
    border: 1px #999 solid;
    font-size: 90%;
    font-weight: normal;
    line-height: normal;
}
.header ul.horde-tags li {
    font-size: 72%;
}
.hordeACListItem img, ul.horde-tags li img {
    vertical-align: middle;
}

/* Growler notice styling. */
#Growler {
    width: 340px;
    color: #fff;
}
#Growler div.GrowlerNotice {
    zoom: 1;
    padding: 10px 10px 10px 30px;
    margin: 5px auto;
    text-align: left;
    display: none;
    min-height: 20px;
    ;border-width: 1px;
    ;border-style: solid;
    border: none !important;
    border-radius: 5px;
    background-position: 3px center;
    background-repeat: no-repeat;
    cursor: pointer;
    font-size: 1.1em;
}
#Growler div.GrowlerNoticeHead {
    font-weight: bold;
}
.GrowlerNoticeBody {
    margin-right: 30px;
    overflow-x: hidden;
}
#Growler div.horde-error, #GrowlerLog li.horde-error {
    background-image: url("graphics/alerts/error.png");
}
#Growler div.horde-error div.GrowlerNoticeBody {
    padding-right: 15px;
}
#Growler div.horde-message, #GrowlerLog li.horde-message {
    background-image: url("graphics/alerts/message.png");
}
#Growler div.horde-success, #GrowlerLog li.horde-success  {
    background-image: url("graphics/alerts/success.png");
    background-color: hsl(141, 71%, 48%);
    color: var(--font-color);
}
#Growler div.horde-warning, #GrowlerLog li.horde-warning {
    background-image: url("graphics/alerts/warning.png");
}
#Growler div.horde-alarm, #GrowlerLog li.horde-alarm {
    background-image: url("graphics/alerts/alarm.png");
}
#GrowlerLog {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 200px;
    z-index: 10000;
    overflow-y: auto;
}
#GrowlerLog ul {
    overflow: auto;
}
#GrowlerLog ul li {
    color: #333;
    font-size: 100%;
    list-style-type: none;
    overflow: hidden;
    padding: 10px 30px;
    border-bottom: 1px dotted;
    background-position: 3px center;
    background-repeat: no-repeat;
}
#GrowlerLog ul li.horde-error {
    color: #fff;
}
#GrowlerLog ul li:last-child {
    border: 0;
}
#GrowlerLog li.GrowlerInfo {
    font-weight: bold;
    background: #999;
}
#GrowlerLog li.GrowlerNoAlerts {
    background: #999;
}
#GrowlerLog span.GrowlerAlertDate {
    font-size: 90%;
    font-style: italic;
    padding-left: 10px;
}
.GrowlerLogClear {
    padding-left: 10px;
}
div.GrowlerNoticeExit {
    background: url("icons/circle-xmark-solid.svg") no-repeat;
    ;background: url("graphics/close.png") no-repeat;
    cursor: pointer;
    float: right;
    height: 20px;
    width: 20px;
    text-indent: -10000px;
    overflow: hidden;
}
.horde-success {
    border-color: #759f3d;
    background-color: #8fc34b;
}
.horde-error {
    background-color: #f03232;
    border-color: #cb2a2a;
    color: #fff;
}
.horde-warning {
    background-color: #ffdf4d;
    border-color: #e1c444;
}
.horde-message {
    background-color: #689fb4;
    border-color: #5c8c9f;
}
.horde-alarm {
    background-color: #f49e51;
    border-color: #d38847;
}

/* Auto completer styles. See tags section too. */
.hordeACBox {
    background:white none repeat scroll 0 0;
    border: 1px solid #d0d0d0;
    cursor:default;
    text-align:left;
    min-height: 58px;
    padding: 4px;
}
.hordeACList {
    display:block;
    overflow:hidden;
    width:100%;
    cursor:default;
    list-style-type:none;
    margin:0;
    padding:0;
}
.hordeACList li {
    display: inline-block;
    font-size:90%;
    white-space:nowrap;
}
.hordeACTrigger, .hordeACTrigger:focus, .hordeACTrigger:disabled {
    background:transparent none repeat scroll 0 0;
    border:0 none;
    display:inline;
    outline: none;
    position:static;
    width:80px;
    font-size: 111%;
}
.hordeACItemRemove:hover {
    cursor:pointer;
}

/* Horde_Mime_Viewer styles. */
.mimeHeaders {
    border: 1px solid #ccc;
    background: #f9f9f9;
    display: inline-block;
    margin-bottom: 3px;
    padding: 5px;
}

/* Context Menus */
.context, .horde-buttonbar li div {
    min-width: 180px;
    position: absolute;
    z-index: 10000;
    background: #eceff0;
    border: 1px solid #919293;
    border-bottom-width: 0;
    -moz-box-shadow: 3px 3px 3px #888;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
}
.context {
    top: 0;
    left: 0;
    overflow-y: auto;
}
.context a, .context a:visited, .horde-buttonbar li div li a {
    white-space: nowrap;
    display: block;
    height: 19px;
    border-bottom: 1px solid #919293;
    padding: 5px 10px 0 10px;
    text-decoration: none;
    color: #000;
}
.context a:hover, .context a.contextSubmenu.contextHover,
.horde-buttonbar li div li a:hover {
    background-color: #c2ccd0 !important;
    cursor: pointer;
    text-decoration: none;
}
.context div.sep {
    background: #919293;
    height: 1px !important;
    padding: 0;
    margin-top: 1px;
}
.contextSubmenu {
    background: url("graphics/popright.png") 100% 50% no-repeat;
    padding-left: 16px;
}
.contextSelected {
    background-color: #36525d !important;
    color: #fff !important;
}
a.contextSelected:hover {
    color: #000 !important;
}
.contextMenu .iconImg {
    vertical-align: top;
    margin: -2px 6px 0 0;
}

/* Form ghosting. */
.formGhost {
    color: #a0a0a0 !important;
    font-style: italic;
}

/* PHP Shell. */
.gutter {
    padding-right: 8px;
}

/* Uploader */
.hordeUploaderHeaderContent {
    font-size: 18px;
    background-color: transparent;
    padding: 5px 10px 10px 10px;
    color: #000;
}
.hordeUploaderHeader {
    background-color: #BFC9CD;
}
.hordeUploaderFilelistHeader {
    background: none repeat scroll 0 0 #ebeff0;
    color: #42454A;
    padding: 8px;
    height: 20px;
}
.hordeUploaderSubHeader {
    font-size: 12px;
}
.hordeUploaderFooter {
  border-top: 1px solid #FFFFFF;
  height: 22px;
  line-height: 20px;
  vertical-align: middle;
  background: none repeat scroll 0 0 #ebeff0;
  color: #42454A;
  padding: 8px;
}

.hordeUploaderFilelist {
    height: 350px;
    overflow: auto;
}
.hordeUploaderFilelistItem {
    border-bottom: 1px solid #DDDDDD;
    padding: 10px 8px;
}
.hordeUploaderFilelistItemDone {
    color: #aaaaaa;
}
.hordeUploaderFilelistItemError {
    color: red;
    font-weight: bold;
}
.hordeUploaderFilename {
    float: left;
    width: 200px;
}
.hordeUploaderFilestatus,
.hordeUploaderFilesize,
.hordeUploaderFileaction
{
   float: right;
   text-align: right;
}
.hordeUploaderFilestatus,
.hordeUploaderFilesize
{
    width: 80px;
}
.hordeUploaderFileaction
{
    width: 20px;
    line-height: 20px;
}
.hordeUploaderSuccess
{
    background-image: url("graphics/alerts/success.png");
}
.hordeUploaderError
{
    background-image: url("graphics/alerts/error.png");
}
.hordeUploaderRemove
{
    background-image: url("graphics/delete.png");
}
/* For in place editing */
form.inplaceeditor-form {
    background: none;
}
.inplaceeditor-empty {
    font-style: italic;
    color: #999;
}

/* Nav images */
.navfirstgreyImg {
    background-image: url("graphics/nav/first-grey.png");
}
.navfirstImg {
    background-image: url("graphics/nav/first.png");
}
.navlastgreyImg {
    background-image: url("graphics/nav/last-grey.png");
}
.navlastImg {
    background-image: url("graphics/nav/last.png");
}
.navleftgreyImg {
    background-image: url("graphics/nav/left-grey.png");
}
.navleftImg {
    background-image: url("graphics/nav/left.png");
}
.navrightgreyImg {
    background-image: url("graphics/nav/right-grey.png");
}
.navrightImg {
    background-image: url("graphics/nav/right.png");
}

/* Loading image. */
span.loadingImg {
    background: #fff url("graphics/loading.gif") no-repeat center;
    border: 1px #e0e0e0 solid;
    height: 16px;
    margin: 10px 0 0 10px;
    padding: 3px;
    position: absolute;
    width: 16px;
    z-index: 1000;
}

a.icon {
    display: block;
    width: 100%;
    height: 100%;
}

/* Topbar. */
a.horde-mainnavi:link, a.horde-mainnavi:visited, a.horde-mainnavi:active {
    display: block;
    color: var(--nav-font); /* fff; */
    text-decoration: none;
}
.horde-point-center:hover, a.horde-mainnavi:hover,
a.horde-mainnavi-active:link, a.horde-mainnavi-active:visited,
a.horde-mainnavi-active:active {
    color:  var(--nav-font-active);  /* #7eaa42; */
}

a.horde-mainnavi-active {
    font-weight: bold;
}

a.horde-mainnavi:hover {
    color: var(--nav-font-hover);
    margin-top: 0;
}

.horde-dropdown {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}
.horde-dropdown ul {
    list-style: none;
    padding: 6px;
    margin: 0;
    z-index: 10;
    min-width: 190px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(31, 41, 55, 0.15), 0 3px 8px rgba(31, 41, 55, 0.08);
}
.horde-dropdown ul li {
    position: relative;
    border-bottom: 0;
    border-radius: 7px;
    white-space: nowrap;
}
.horde-dropdown ul li:last-child {
    position: relative;
    border-bottom: 0px solid #919294;
}
.horde-dropdown ul li.arrow {
    padding-right: 18px;
    background-image: none;
}
.horde-dropdown ul li.arrow:hover {
    background-image: none;
}
.horde-dropdown ul li.arrow::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 9px;
    color: #94a3b8;
    font-size: 17px;
    line-height: 1;
    transform: translateY(-52%);
    pointer-events: none;
}
.horde-dropdown li ul {
    position: absolute;
    display: none;
    top: calc(100% - 6px);
    left: 0;
    margin-left: 0;
}
.horde-dropdown ul li ul {
    top: -7px;
    left: calc(100% + 6px);
    margin-top: 0;
    margin-left: 0;
}
.horde-dropdown li:hover ul, .horde-dropdown li.over ul {
    display: block;
}
.horde-dropdown li:hover ul ul, .horde-dropdown li.over ul ul {
    display: none;
}
.horde-dropdown ul li:hover ul, .horde-dropdown ul li.over ul {
    display: block;
}
.horde-drowdown-str {
    height: auto;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 7px;
}
.horde-drowdown-str a.horde-mainnavi {
    padding: 9px 12px;
    border-radius: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}
.horde-drowdown-str:hover {
    background: color-mix(in srgb, var(--accent-color) 11%, white);
}
.horde-drowdown-str:hover a.horde-mainnavi {
    color: var(--primary-color) !important;
}

#horde-head {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, color-mix(in srgb, var(--nav-bg) 82%, white) 0%, var(--nav-bg) 100%);
    /* background-image: url("graphics/head-bg.png"); */
    border-bottom: 0;
    box-shadow: 0 4px 10px rgba(55, 81, 126, 0.12);
    z-index: 1100;
}
#horde-logo {
    float: none;
    flex: 0 0 200px;
    box-sizing: border-box;
    //margin-top: 10px;
    //margin-left: 20px;
    //margin-right: 40px;
    width: 200px;
    height: 60px;
    padding-left: 12px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: contain;              /* scale proportionally */
    background-position: center left;           /* centered in the box */
    background-origin: content-box;        /* image respects padding */
    background-image: url("/logo");
    background-repeat: no-repeat;
    //background-size: var(--logo-percent);
    background-color: var(--logo-bg);
    //background-position: var(--logo-position);
    border-right: 0;
}

#horde-logo.horde-logo--white-label {
    background-color: transparent;
}

#horde-logo.horde-logo--hero {
    background-color: var(--sidebar-bg);
}

#horde-head.horde-head--grouped {
    position: sticky;
    top: 0;
}

#horde-head.horde-head--grouped #horde-logo {
    flex-basis: 240px;
    width: 240px;
}

#horde-head.horde-head--grouped.horde-head--hero-logo {
    box-shadow: none;
}

#horde-head.horde-head--grouped.horde-head--hero-logo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 240px;
    border-bottom: 1px solid rgba(55, 81, 126, 0.12);
    box-shadow: 0 4px 10px rgba(55, 81, 126, 0.12);
    /* Match the full header shadow without casting it across the Hero logo. */
    clip-path: inset(0 -16px -16px 0);
    pointer-events: none;
}

/* Opted-in Super Admin workspace bar. */
#horde-head.horde-head--workspace {
    height: auto;
    min-height: 60px;
}

.horde-workspace {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    min-width: 0;
    padding: 8px 0;
    margin-left: 28px;
}

.horde-workspace__search {
    position: relative;
    flex: 1 1 var(--workspace-search-min-width, 230px);
    min-width: var(--workspace-search-min-width, 230px);
    max-width: max(320px, var(--workspace-search-min-width, 230px));
}

.horde-workspace--context-only {
    justify-content: flex-end;
    margin-left: 0;
}

.horde-workspace__search-form {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    margin: 0;
}

.horde-workspace__search-icon {
    position: absolute;
    left: 13px;
    z-index: 1;
    color: #64748b;
    font-size: 13px;
    pointer-events: none;
}

.horde-workspace__search-input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 66px 0 36px;
    border: 1px solid #d7e0ea;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--primary-font);
    font: inherit;
    font-size: 13px;
    line-height: 38px;
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.horde-workspace__search-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.horde-workspace__search-input:focus {
    border-color: color-mix(in srgb, var(--accent-color) 72%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.horde-workspace__search-input::-webkit-search-cancel-button {
    display: none;
    appearance: none;
}

.horde-workspace__search-clear {
    position: absolute;
    right: 8px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
}

.horde-workspace__search-clear:hover,
.horde-workspace__search-clear:focus-visible {
    outline: none;
    background: #eef2f6;
    color: #334155;
}

.horde-workspace__search-clear[hidden],
.horde-workspace__search-shortcut[hidden] {
    display: none;
}

.horde-workspace__search-shortcut {
    position: absolute;
    right: 9px;
    display: inline-flex;
    align-items: center;
    height: 22px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid #dbe3ec;
    border-radius: 5px;
    background: #f8fafc;
    color: #64748b;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.horde-workspace__results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: min(520px, calc(100vh - 82px));
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #dbe3ec;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 41, 55, 0.16), 0 4px 12px rgba(31, 41, 55, 0.08);
    z-index: 1200;
}

.horde-workspace__results[hidden] {
    display: none;
}

.horde-workspace__result-group {
    padding: 7px 9px 4px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.horde-workspace__result-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.horde-workspace__result-row > .horde-workspace__result {
    flex: 1 1 0;
    min-width: 0;
}

.horde-workspace__result-details {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border-radius: 7px;
    color: #718198;
    font-size: 16px;
    text-decoration: none;
}

.horde-workspace__result-details:hover,
.horde-workspace__result-details:focus-visible {
    color: var(--accent-color);
    background: var(--accent-light-color);
}

.horde-workspace__result-details:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.horde-workspace__result {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px;
    border-radius: 7px;
    color: var(--primary-font);
    text-decoration: none;
}

.horde-workspace__result:hover,
.horde-workspace__result:focus,
.horde-workspace__result.is-active {
    outline: none;
    background: color-mix(in srgb, var(--accent-color) 11%, white);
    color: var(--primary-color);
}

.horde-workspace__result > i {
    display: flex;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: var(--accent-light-color);
    color: var(--primary-color);
    font-size: 13px;
}

.horde-workspace__result-copy,
.horde-workspace__result-copy strong,
.horde-workspace__result-copy small {
    display: block;
    min-width: 0;
}

.horde-workspace__result-copy strong,
.horde-workspace__result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horde-workspace__result-copy strong {
    font-size: 13px;
    line-height: 1.3;
}

.horde-workspace__result-copy small {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
}

.horde-workspace__result-badge {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fff3d6;
    color: #77540b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.horde-workspace__result-status {
    display: flex;
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 0 11px;
    color: #64748b;
    font-size: 12px;
}

.horde-workspace__quick-links {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    align-items: center;
}

.horde-workspace__quick-links a {
    display: flex;
    gap: 7px;
    align-items: center;
    min-height: 36px;
    box-sizing: border-box;
    padding: 0 9px;
    border-radius: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.horde-workspace__quick-links a:hover,
.horde-workspace__quick-links a:focus {
    outline: none;
    background: color-mix(in srgb, var(--accent-color) 10%, white);
    color: var(--primary-color);
}

.horde-workspace__quick-links i {
    color: var(--primary-color);
    font-size: 12px;
}

.horde-workspace__link-compact,
.horde-workspace[data-link-density="compact"] .horde-workspace__link-full,
.horde-workspace[data-link-density="icons"] .horde-workspace__quick-links span {
    display: none;
}

.horde-workspace[data-link-density="compact"] .horde-workspace__link-compact {
    display: inline;
}

.horde-workspace[data-link-density="icons"] .horde-workspace__quick-links a {
    width: 34px;
    justify-content: center;
    padding: 0;
}

.horde-workspace .horde-workspace__context {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 7px;
    align-items: center;
    margin-left: auto;
    padding: 0 2px 0 14px;
    border: 0;
    border-left: 1px solid #dbe3ec;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
}

.horde-workspace__context-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 19px;
}

.horde-workspace__context-copy,
.horde-workspace__context-label,
.horde-workspace__context-value {
    display: block;
    min-width: 0;
}

.horde-workspace__context-copy {
    flex: 0 1 auto;
    max-width: 320px;
}

.horde-workspace .horde-workspace__context-return,
.horde-workspace .horde-workspace__context-details {
    color: inherit;
    text-decoration: none;
}

.horde-workspace__context-return .horde-workspace__return-icon,
.horde-workspace__context-return:hover > i:first-child,
.horde-workspace__context-return:focus-visible > i:first-child {
    display: none;
}

.horde-workspace__context-return:hover .horde-workspace__return-icon,
.horde-workspace__context-return:focus-visible .horde-workspace__return-icon {
    display: inline-block;
}

.horde-workspace__context-details:hover,
.horde-workspace__context-details:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.horde-workspace__context-return:focus-visible,
.horde-workspace__context-details:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.horde-workspace__context-label {
    margin-bottom: 3px;
    color: #94a3b8;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.horde-workspace__context-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    color: #64748b;
    font-size: 14px;
    line-height: 18px;
}

.horde-workspace .horde-workspace__context-value strong {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    color: #475569;
    font-size: 15px;
    font-weight: 700;
}

/* Preserve the complete identity; long names wrap instead of being clipped. */
.horde-workspace__context-value > span {
    flex: 0 0 auto;
}
.horde-workspace__context-value > span[aria-hidden] {
    margin: 0 .3em;
}

.horde-workspace__context-copy--with-balance {
    max-width: 400px;
}
.horde-workspace__balance-item {
    margin-left: 16px;
    white-space: nowrap;
}
.horde-workspace .horde-workspace__balance {
    font-size: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: inherit;
    white-space: nowrap;
    text-decoration: none;
}

.horde-workspace .horde-workspace__balance:hover,
.horde-workspace .horde-workspace__balance:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.horde-workspace .horde-workspace__balance:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.horde-head--workspace .horde-user-menu {
    margin-left: 24px;
}

.horde-workspace--context-only + .horde-user-menu {
    margin-left: 24px;
}

.horde-workspace[data-workspace-account-type="white_label"] + .horde-user-menu {
    margin-left: 24px;
}

@media (min-width: 701px) {
    .horde-head--grouped .horde-workspace + .horde-user-menu {
        margin-left: 20px;
    }
}

.horde-super-admin-workspace .page-context__account,
.horde-super-admin-portal-context .page-context__account {
    display: none !important;
}

#horde-sidebar .new-summary {
    background-image: url("/list-solid.svg");
}

#horde-version {
    float: left;
    height: 16px;
    padding: 18px 10px 0px 0px;
    font-size: 90%;
    font-weight: bold;
    font-style: italic;
    color: #fff;
    /* text-shadow: 1px 1px 0px #000; */
}
#horde-navigation {
    float: none;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    margin: 0 0 0 20px;
    font-size: 14px;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    /* text-shadow: 1px 1px 0px #000; */
    cursor: default;
    z-index: 7;
}
.horde-navipoint {
    float: none;
    display: flex;
    align-items: center;
    height: 100%;
}
.horde-navipoint:hover .horde-point-arrow {
    /* background-image: url("graphics/navi-arrow-active.png"); */
}
.horde-navipoint:hover .horde-point-center a {
    color: ; /* #4c6995; */ /* #7eaa42; */
}
.horde-point-left {
    float: left;
    width: 10px;
    height: 34px;
}
.horde-point-center {
    float: none;
    display: flex;
    align-items: center;
    height: auto;
    padding: 0;
}
.horde-point-arrow, .horde-point-arrow-active {
    float: none;
    width: auto;
    height: auto;
    margin: 1px 0 0 7px;
    /* background-image: url("graphics/navi-arrow-normal.png"); */
    background-repeat: no-repeat;
    color: #64748b;
    font-size: 10px;
    line-height: 1;
    text-indent: 0;
    overflow: visible;
}
.horde-point-arrow-active {
    /* background-image: url("graphics/navi-arrow-active.png"); */
}
.horde-point-right {
    float: left;
    width: 10px;
    height: 34px;
}
.horde-point-left-active {
    display: none;
    /* background-image: url("graphics/navi-left-active.png"); */
    background-repeat: no-repeat;
}
.horde-point-center-active {
    float: none;
    display: flex;
    align-items: center;
    height: auto;
    padding: 0;
    /* background-image: url("graphics/navi-center-active.png"); */
    background-repeat: repeat-x;
}
.horde-point-right-active {
    display: none;
    /* background-image: url("graphics/navi-right-active.png"); */
    background-repeat: no-repeat;
}

.horde-point-left,
.horde-point-right {
    display: none;
}

#horde-navigation > .horde-navipoint > .horde-dropdown {
    float: none;
    display: flex;
    align-items: center;
    height: 100%;
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li > div > a {
    display: flex;
    align-items: center;
    min-height: 38px;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 9px;
    line-height: 20px;
    transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li > .horde-point-center:hover > a,
#horde-navigation > .horde-navipoint > .horde-dropdown > li > div > a:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    color: var(--primary-color) !important;
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li > .horde-point-center-active > a {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
    font-weight: 700;
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li > .horde-point-center-active > a:hover {
    background: transparent;
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li > .horde-point-center-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2.5px;
    border-radius: 2.5px 2.5px 0 0;
    background: var(--primary-color);
}

#horde-navigation > .horde-navipoint > .horde-dropdown > li > div > a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
}
.horde-settings {
    float: left;
    width: 22px;
    height: 27px;
    margin: 7px 0 0 0;
}
#horde-search {
    float: right;
    padding: 10px 15px;
    position: relative;
    top: 62px;
    right: 7px;
    z-index: 99;
}
#horde-search form {
    display: inline;
}
#horde-search #horde-search-input, #horde-search .horde-fake-input {
    width: 200px;
    background: #fff;
    font-size: 50%;
    float: left;
}
#horde-search #horde-search-input {
    width: 190px;
    max-height: 30px;
}
#horde-search .horde-fake-input #horde-search-input {
    padding: 0 5px 0 0;
    width: 170px;
    margin: 0;
    float: none;
}
#horde-search span.horde-popdown {
    cursor: pointer;
    float: none;
    height: 20px;
    margin-top: -2px;
    width: 16px;
}
#horde-search-icon {
    float: left;
    margin: 4px 0 0 7px;
    height: 25px;
}
#horde-logout, #horde-login {
    float: none;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    margin: 0 var(--page-horizontal-gutter) 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent-color) 48%, white);
    border-radius: 50%;
    background-color: var(--accent-light-color);
    background-position: center;
    background-size: 16px;
    background-image: url("icons/arrow-right-from-bracket-solid.svg");
    background-repeat: no-repeat;
    z-index: 7;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#horde-logout:hover, #horde-login:hover {
    background-image: url("icons/arrow-right-from-bracket-solid-success.svg");
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.12);
    transform: translateY(-1px);
}

.horde-user-menu {
    position: relative;
    float: right;
    flex: 0 0 auto;
    margin: 0 var(--page-horizontal-gutter) 0 auto;
    z-index: 1000;
}

.horde-user-menu__recent {
    padding: 10px 12px;
    border-bottom: 1px solid #e5eaf0;
}
.horde-user-menu__recent[hidden] { display: none; }
.horde-user-menu__recent-list a {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 7px 4px;
    border-radius: 6px;
    color: #475569;
    text-decoration: none;
}
.horde-user-menu__recent-list a:hover,
.horde-user-menu__recent-list a:focus-visible { background: #f1f5f9; }
.horde-user-menu__recent-list a > i { width: 16px; flex: 0 0 16px; color: var(--primary-color); }
.horde-user-menu__recent-list a > span { min-width: 0; }
.horde-user-menu__recent-list strong { display: block; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.horde-user-menu__recent-list small { display: block; font-size: 11px; color: #64748b; line-height: 15px; }

.horde-user-menu > summary {
    list-style: none;
}

.horde-user-menu > summary::-webkit-details-marker {
    display: none;
}

.horde-user-menu__trigger {
    display: flex;
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent-color) 48%, white);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, var(--accent-light-color));
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 7px rgba(31, 41, 55, 0.08);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.horde-user-menu--account .horde-user-menu__trigger {
    font-size: 16px;
}

.horde-user-menu__trigger:hover,
.horde-user-menu[open] .horde-user-menu__trigger {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 18%, white);
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.12);
    transform: translateY(-1px);
}

.horde-user-menu__trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.horde-user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 41, 55, 0.16), 0 4px 12px rgba(31, 41, 55, 0.08);
}

.horde-user-menu__account {
    padding: 14px 16px 12px;
}

.horde-user-menu__label,
.horde-user-menu__identity,
.horde-user-menu__meta {
    display: block;
}

.horde-user-menu__label {
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.horde-user-menu__identity {
    overflow: hidden;
    color: var(--primary-font);
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horde-user-menu__meta {
    overflow: hidden;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horde-user-menu__actions {
    padding: 5px 0;
    border-top: 1px solid #e6ebf1;
}

.horde-user-menu__action {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 16px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.horde-user-menu__action i,
.horde-user-menu__logout i {
    width: 16px;
    text-align: center;
}

.horde-user-menu__action i {
    margin-top: 2px;
}

.horde-user-menu__action-copy,
.horde-user-menu__action-copy strong,
.horde-user-menu__action-copy small {
    display: block;
}

.horde-user-menu__action-copy strong {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.horde-user-menu__action-copy small {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.horde-user-menu__action:hover,
.horde-user-menu__action:focus {
    background: #f4f7fb;
    color: var(--primary-color);
}

.horde-user-menu__logout {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid #e6ebf1;
    color: hsl(348, 86%, 43%);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.horde-user-menu__logout:hover,
.horde-user-menu__logout:focus {
    background: hsl(347, 90%, 96%);
    color: hsl(348, 86%, 43%);
}

.horde-user-menu__layout {
    padding: 11px 16px 13px;
    border-top: 1px solid #e6ebf1;
}

.horde-user-menu__layout label {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.horde-user-menu__select-wrap {
    position: relative;
    display: block;
}

.horde-user-menu__select-wrap select {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 34px 0 10px;
    border: 1px solid #d6dee8;
    border-radius: 8px;
    appearance: none;
    background: #f8fafc;
    color: #334155;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.horde-user-menu__select-wrap select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.horde-user-menu__select-wrap i {
    position: absolute;
    top: 50%;
    right: 11px;
    color: #64748b;
    font-size: 10px;
    pointer-events: none;
    transform: translateY(-50%);
}

#horde-login {
    background-image: url("graphics/login.png");
}

#horde-login-pass-capslock {
    color: red;
    font-size: 90%;
    font-weight: bold;
    padding-bottom: 15px;
}

.horde-icon-settings {
    background-image: url("graphics/settings.png");
    background-repeat: no-repeat;
}
.horde-icon-settings:hover {
    background-image: url("graphics/settings-active.png");
}
.horde-icon-settings a {
    width: 22px;
    height: 27px;
}

/* Sub bar. */
#horde-sub {
    max-width: 500px;
    height: 60px;
    background-color: transparent;
    position: absolute;
    top: 0px;
    right: calc(var(--page-horizontal-gutter) + 58px);
    z-index: 21;
}

#horde-subadmin {
    max-width: 500px;
    height: 60px;
    background-color: transparent;
    position: absolute;
    top: 0px;
    right: calc(var(--page-horizontal-gutter) + 58px);
    z-index: 21;
}

#horde-capadmin {
    width: 100%;
    height: 25px;
    background-color: #ffffff; /* 333333; */
    border-bottom: 2px solid #6FF;
}
.selected-customer-top {
    float: right;
    padding: 7px 14px;
    color: white;
    font-weight: 500;
    margin-top: 10px;
    border-radius: 50px;
    background-color: var(--account-bg);
    white-space: nowrap;        /* Prevent text wrapping */
    overflow: hidden;           /* Hide overflow content */
    text-overflow: ellipsis;    /* Show "..." when content overflows */
    max-width: 100%;            /* Or set a fixed width like 300px */
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--account-bg) 72%, white);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--account-bg) 18%, transparent);
}

.selected-customer-top--admin {
    border: 1px solid #dbe3ec;
    background-color: #f8fafc;
    color: #64748b;
}

.selected-customer-top--admin strong {
    color: #475569;
}

.selected-customer-top--white-label {
    border: 1px solid #b5e4f5;
    background-color: #eef9fc;
    color: #36758c;
}

.selected-customer-top--white-label strong {
    color: #23758f;
}

@media (max-width: 1200px) {
    #horde-logo {
        flex-basis: 170px;
    }

    #horde-navigation {
        margin-left: 10px;
        font-size: 13px;
    }

    #horde-navigation > .horde-navipoint > .horde-dropdown > li > div > a {
        padding-right: 9px;
        padding-left: 9px;
    }

    .horde-user-menu,
    #horde-logout,
    #horde-login {
        margin-right: 20px;
    }

    #horde-sub,
    #horde-subadmin {
        right: 78px;
    }

    .horde-workspace {
        gap: 10px;
        margin-left: 16px;
    }
}

@media (max-width: 900px) {
    #horde-logo {
        flex-basis: 145px;
        padding-right: 10px;
        padding-left: 10px;
    }

    #horde-navigation {
        margin-left: 5px;
        font-size: 12px;
    }

    #horde-navigation > .horde-navipoint > .horde-dropdown > li > div > a {
        min-height: 36px;
        padding-right: 7px;
        padding-left: 7px;
    }

    .horde-user-menu,
    #horde-logout,
    #horde-login {
        margin-right: 12px;
    }

    .horde-user-menu__trigger,
    #horde-logout,
    #horde-login {
        width: 38px;
        height: 38px;
    }

    #horde-sub,
    #horde-subadmin {
        right: 58px;
        max-width: calc(100% - 220px);
    }

    .horde-workspace__quick-links {
        display: none;
    }
}

@media (max-width: 700px) {
    #horde-head.horde-head--workspace {
        flex-wrap: wrap;
    }

    .horde-head--workspace .horde-workspace {
        order: 1;
        flex-basis: calc(100% - 32px);
        margin: 0 16px;
    }

    .horde-head--workspace .horde-user-menu {
        margin-left: auto;
    }
}

.selected-customer-bottom {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;

  /* Bulma utility classes translated */
  background-color: hsl(0, 0%, 98%); /* has-background-white-bis */
  font-weight: 600; /* has-text-weight-semibold */

  display: flex;
  align-items: center;           /* is-align-items-center */
  justify-content: center;       /* is-justify-content-center */
}

#horde-info {
    display: none;
    float: right;
    padding: 0px 14px 0 0;
    color: var(--info-font); /* fff; */
}

#horde-info img {
    padding: 0px;
}

#horde-info a {
    color: #fff;
    padding: 0px;
}

/* Mainpage */
#horde-page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-left: 8px;
}

#horde-sidebar {
  /* Sidebar fixed width (matches your rendered inline style width:175px) */
  flex: 0 0 200px !important;   /* fixed column width in flex layout */
  width: 200px !important;      /* explicit width */
  max-width: 200px !important;  /* prevent stretching */
  min-width: 200px !important;  /* prevent shrinking */


  /* Force it to the left even though it appears after contentwrapper in the DOM */
  order: -1;

  /* Defeat legacy sidebar positioning */
  float: none !important;
  margin-left: 0 !important;

  /* Let it size naturally in flex */
  height: auto;
  min-height: 100vh;

  box-sizing: border-box;

  background-color: var(--sidebar-bg);
  padding-top: 3px;           /* optional */

}

.horde-ajax #horde-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: 0;
}
#horde-sidebar a {
    color: var(--primary-font); /* 337ab7; */ /* 000; */
    font-weight: 500;
    text-decoration: none;
}

.horde-new {
    height: 30px;
    padding: 5px 0 5px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: thin solid #CCC;
    border-right: thin solid #CCC;
    /* background-image: url("graphics/sidebar-new-bg.png"); */
    background-color: #777;
    /* background-repeat: repeat-x; */
    /* border-bottom: 1px solid #787878; */
    font-size: 110%;
    font-weight: bold;
    color: #fff;
    /* text-shadow: -1px -1px 0px #000; */
}
.horde-portal-new {
    float: left;
    border-right: 1px solid #787878;
    margin-right: 10px;
}
#horde-sidebar .horde-new-link a, .horde-new-link a {
    padding-left: 28px;
    margin: 5px 10px 0 10px;
    background-image: url("graphics/sidebar-new.png");
    background-repeat: no-repeat;
    background-position: left 1px;
    color: #fff;
    display: block;
}
.horde-new-split {
    float: right;
    width: 2px;
    height: 29px;
    margin-left: 10px;
    background-image: url("graphics/sidebar-split.png");
    background-repeat: no-repeat;
}
.horde-new-extra {
    float: right;
    width: 20px;
    height: 24px;
    margin: 5px 6px 0 7px;
    background-image: url("graphics/sidebar-refresh.png");
    background-repeat: no-repeat;
}
.horde-new-extra a {
    display: block;
}
.horde-new-extra a:hover {
    text-decoration: none;
}

#horde-sidebar h3 {
    min-height: 12px;
    margin: 0 10px;
    font-size: 100%;
    font-weight: bold;
    cursor: default;
}
#horde-sidebar a.horde-add {
    float: right;
    margin-top: -2px;
    height: 17px;
    width: 16px;
    background: transparent url("graphics/plus-sidebar.png") no-repeat right center;
    text-indent: -10000px;
    overflow: hidden;
    cursor: pointer;
}
.horde-collapse,
.horde-expand {
    display: block;
    padding-left: 26px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.horde-collapse {
    background-image: url("graphics/collapse.png");
    background-position: left 2px;
}
.horde-expand {
    background-image: url("graphics/expand.png");
    background-position: left 1px;
}
#horde-sidebar div.horde-resources {
    margin-top: 10px;
}
#horde-sidebar div.horde-resources div {
    margin: 0px;
    padding: 3px 0px;
}

div[style="background-color:#dddddd;color:#000"] {
    background-color: var(--sidebar-bg) !important;
}

.horde-resource-link {
    overflow: hidden;
}
.horde-resource-on, .horde-resource-off, .horde-resource-none {
    display: inline-block;
    min-height: 15px;
    padding: 3px 0 3px 18px;
    cursor: pointer;
    //background-position: 10px 2px;
    background-repeat: no-repeat;
}
.horde-resource-on:hover, .horde-resource-off:hover {
    text-decoration: underline;
}
.horde-resource-on, .horde-resource-off:hover {
    //background-image: url("graphics/checkbox_on.png");
    border-left: 4px solid var(--accent-color);
}
.horde-resource-off {
    //background-image: url("graphics/checkbox_off.png");
}
.horde-resource-on.horde-radiobox, .horde-resource-off.horde-radiobox:hover {
    //background-image: url("graphics/radiobox_on.png");
}
.horde-resource-off.horde-radiobox {
    //background-image: url("graphics/radiobox_off.png");
}
#horde-sidebar div.horde-resources .horde-resource-edit-000,
#horde-sidebar div.horde-resources .horde-resource-edit-fff {
    float: right;
    display: block;
    background: url("graphics/edit-sidebar-000.png") no-repeat;
    margin: 2px 10px 0 0;
    width: 17px;
    height: 17px;
    text-indent: -10000px;
    overflow: hidden;
    cursor: pointer;
}
#horde-sidebar div.horde-resources .horde-resource-edit-fff {
    background-image: url("graphics/edit-sidebar-fff.png");
}
#horde-sidebar div.horde-resources div a {
    color: var(--sidebar-font);
}
#horde-sidebar .horde-info {
    font-style: italic;
    padding: 10px 0 0 36px;
}

.horde-sidebar-split {
    border-top: 1px solid #858889;
    height: 10px;
    margin: 10px 0 0;
}
.horde-subnavi {
    height: 40px;
    padding: 7.5px 0 4px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    //border-bottom: thin solid #CCC;
    //border-right: thin solid #CCC;
    background-color: var(--sidebar-bg);
}

.horde-subnavi-active, .horde-subnavi:hover{
    height: 40px;
    /* background-image: url("graphics/sidebar-active-bg.png");
    background-repeat: repeat-x; */
    background-color: var(--sidebar-bg-active);
    border-left: 3px solid var(--account-bg);
    //border-bottom: thin solid #CCC;
    transition: all 0.1s ease; 
}


#horde-sidebar .horde-subnavi a {
    color: var(--sidebar-font);
}

#horde-sidebar .horde-subnavi-active a {
    color: var(--nav-font-active);
}

.horde-subnavi-icon {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center right;
    display: inline-block;
    height: 16px;
    margin: 2.5px 5px 7px 8px;
    vertical-align: middle;
    width: 20px;
}
.horde-subnavi-point {
    display: inline;
    margin-left: 3px;
   padding-top: 2px;
}
.horde-popdown {
    background-image: url("graphics/popdown.png");
    background-repeat: no-repeat;
    background-position: top center;
    float: right;
    height: 24px;
    width: 24px;
    cursor: pointer;
}
.horde-subnavi-sub {
    padding-left: 9px;
}

/* Grouped navigation. The application list is global; only the current
   application's permission-filtered page menu is expanded. */
#horde-body.horde-navigation-grouped > #horde-contentwrapper {
    margin-left: 240px;
}

#horde-sidebar.horde-grouped-sidebar {
    position: fixed;
    top: var(--workspace-header-height, 60px);
    bottom: 0;
    left: 0;
    z-index: 0;
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: calc(100vh - var(--workspace-header-height, 60px));
    min-height: 0;
    padding: 12px 4px 22px 9px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    background: var(--sidebar-bg);
    box-shadow: 1px 0 0 rgba(55, 81, 126, 0.16),
                6px 0 14px rgba(55, 81, 126, 0.20);
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

@supports not (scrollbar-gutter: stable) {
    #horde-sidebar.horde-grouped-sidebar {
        overflow-y: scroll;
    }
}

#horde-sidebar.horde-grouped-sidebar:hover,
#horde-sidebar.horde-grouped-sidebar:focus-within {
    scrollbar-color: color-mix(in srgb, var(--sidebar-font) 28%, transparent) transparent;
}

#horde-sidebar.horde-grouped-sidebar::-webkit-scrollbar {
    width: 8px;
}

#horde-sidebar.horde-grouped-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#horde-sidebar.horde-grouped-sidebar::-webkit-scrollbar-thumb {
    border: 2px solid var(--sidebar-bg);
    border-radius: 999px;
    background: transparent;
}

#horde-sidebar.horde-grouped-sidebar:hover::-webkit-scrollbar-thumb,
#horde-sidebar.horde-grouped-sidebar:focus-within::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sidebar-font) 28%, transparent);
}

#horde-sidebar.horde-grouped-sidebar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--sidebar-font) 42%, transparent);
}

.horde-grouped-sidebar__nav,
.horde-grouped-sidebar__group,
.horde-grouped-sidebar__application {
    display: block;
}

#horde-sidebar .horde-grouped-sidebar__app-toggle.horde-grouped-sidebar__app-row {
    gap: 9px;
    padding: 5px 38px 5px 9px;
    isolation: isolate;
}

#horde-sidebar .horde-grouped-sidebar__app-row > .horde-grouped-sidebar__app-icon {
    pointer-events: none;
}

#horde-sidebar .horde-grouped-sidebar__app-destination {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

#horde-sidebar .horde-grouped-sidebar__expand {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0 3px 0 0;
    border: 0;
    border-radius: 7px;
    appearance: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#horde-sidebar .horde-grouped-sidebar__expand .horde-grouped-sidebar__app-chevron {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    border-radius: 5px;
    font-size: 12px;
}

#horde-sidebar .horde-grouped-sidebar__expand:hover .horde-grouped-sidebar__app-chevron,
#horde-sidebar .horde-grouped-sidebar__expand:focus-visible .horde-grouped-sidebar__app-chevron {
    background: color-mix(in srgb, var(--sidebar-font) 10%, transparent);
    color: var(--accent-color);
}

#horde-sidebar .horde-grouped-sidebar__app-destination:hover,
#horde-sidebar .horde-grouped-sidebar__app-destination:focus-visible {
    color: var(--accent-color);
}

#horde-sidebar .horde-grouped-sidebar__app-row:has(.horde-grouped-sidebar__app-destination:hover),
#horde-sidebar .horde-grouped-sidebar__app-row:has(.horde-grouped-sidebar__app-destination:focus-visible) {
    background: color-mix(in srgb, var(--sidebar-font) 8%, transparent);
}

#horde-sidebar .horde-grouped-sidebar__app-destination:focus-visible,
#horde-sidebar .horde-grouped-sidebar__expand:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.horde-grouped-sidebar__pages {
    display: block;
}

.horde-grouped-sidebar__group + .horde-grouped-sidebar__group {
    margin-top: 18px;
}

#horde-sidebar .horde-grouped-sidebar__heading {
    min-height: 0;
    margin: 0 12px 7px;
    color: color-mix(in srgb, var(--sidebar-font) 58%, transparent);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

#horde-sidebar .horde-grouped-sidebar__app-link {
    position: relative;
    display: flex;
    min-height: 44px;
    box-sizing: border-box;
    gap: 11px;
    align-items: center;
    margin: 2px 0;
    padding: 5px 11px;
    border-radius: 9px;
    color: var(--sidebar-font);
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.horde-grouped-sidebar__app-link > i:first-child {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--sidebar-font) 10%, transparent);
    color: var(--sidebar-font);
    font-size: 14px;
}

#horde-sidebar .horde-grouped-sidebar__app-link:hover,
#horde-sidebar .horde-grouped-sidebar__app-link:focus {
    background: color-mix(in srgb, var(--sidebar-font) 10%, transparent);
    color: var(--sidebar-font);
}

#horde-sidebar .horde-grouped-sidebar__application.is-active > .horde-grouped-sidebar__app-link {
    background: color-mix(in srgb, var(--sidebar-font) 13%, transparent);
    color: var(--nav-font-active);
    font-weight: 750;
}

.horde-grouped-sidebar__application.is-active > .horde-grouped-sidebar__app-link::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-color);
}

.horde-grouped-sidebar__app-chevron {
    margin-left: auto;
    color: color-mix(in srgb, var(--sidebar-font) 62%, transparent);
    font-size: 10px;
}

.horde-grouped-sidebar__pages {
    margin: 4px 0 8px 20px;
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--sidebar-font) 18%, transparent);
}

#horde-sidebar .horde-grouped-sidebar__subheading {
    min-height: 0;
    margin: 11px 8px 5px;
    color: color-mix(in srgb, var(--sidebar-font) 58%, transparent);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}

.horde-grouped-sidebar__page {
    position: relative;
    display: flex;
    min-height: 34px;
    box-sizing: border-box;
    align-items: center;
    margin: 1px 0;
    padding: 4px 8px;
    border-radius: 7px;
    color: color-mix(in srgb, var(--sidebar-font) 82%, transparent);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.horde-grouped-sidebar__page:hover,
.horde-grouped-sidebar__page:focus-within {
    background: color-mix(in srgb, var(--sidebar-font) 8%, transparent);
    color: var(--sidebar-font);
}

.horde-grouped-sidebar__page.is-active {
    background: color-mix(in srgb, var(--sidebar-font) 11%, transparent);
    color: var(--nav-font-active);
}

.horde-grouped-sidebar__page.is-active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -11px;
    width: 2px;
    border-radius: 2px;
    background: var(--accent-color);
}

#horde-sidebar .horde-grouped-sidebar__page-icon-link {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.horde-grouped-sidebar__page .horde-subnavi-icon {
    width: 16px;
    height: 16px;
    margin: 0;
    background-position: center;
    background-size: contain;
    opacity: 0.82;
}

.horde-grouped-sidebar__fallback-icon {
    font-size: 5px;
    opacity: 0.64;
}

.horde-grouped-sidebar__page-link {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#horde-sidebar .horde-grouped-sidebar__page-link a,
#horde-sidebar .horde-grouped-sidebar__page-link .horde-resource-none {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horde-grouped-sidebar__new {
    margin: 5px 0 7px;
}

#horde-sidebar .horde-grouped-sidebar__new a {
    display: flex;
    min-height: 34px;
    box-sizing: border-box;
    gap: 9px;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--sidebar-font) 20%, transparent);
    border-radius: 7px;
    color: var(--sidebar-font);
    font-size: 14.5px;
    font-weight: 650;
}

#horde-sidebar .horde-grouped-sidebar__new a:hover,
#horde-sidebar .horde-grouped-sidebar__new a:focus {
    background: color-mix(in srgb, var(--sidebar-font) 10%, transparent);
}

.horde-grouped-sidebar__resource,
.horde-grouped-sidebar__custom-content {
    margin: 4px 6px;
    color: color-mix(in srgb, var(--sidebar-font) 82%, transparent);
    font-size: 12px;
}

.horde-grouped-sidebar__resource {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 2px;
}

#horde-sidebar .horde-grouped-sidebar__resource a,
#horde-sidebar .horde-grouped-sidebar__custom-content a {
    color: var(--sidebar-font);
}

.horde-navigation-grouped + #horde-slideleft,
.horde-grouped-sidebar + #horde-slideleft {
    display: none;
}

/* Compact accordion treatment. Application rows carry the hierarchy; page
   rows are intentionally quieter so long menus do not become a wall of cards. */
#horde-sidebar .horde-grouped-sidebar__heading {
    margin: 0 10px 5px;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.12em;
}

.horde-grouped-sidebar__group + .horde-grouped-sidebar__group {
    margin-top: 14px;
}

#horde-sidebar .horde-grouped-sidebar__app-toggle {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    gap: 9px;
    align-items: center;
    margin: 1px 0;
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    appearance: none;
    background: transparent;
    color: color-mix(in srgb, var(--sidebar-font) 88%, transparent);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

#horde-sidebar .horde-grouped-sidebar__app-toggle:not(.horde-grouped-sidebar__app-row):hover,
#horde-sidebar .horde-grouped-sidebar__app-toggle:not(.horde-grouped-sidebar__app-row):focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--sidebar-font) 8%, transparent);
    color: var(--sidebar-font);
}

#horde-sidebar .horde-grouped-sidebar__application.is-open > .horde-grouped-sidebar__app-toggle {
    background: color-mix(in srgb, var(--sidebar-font) 9%, transparent);
    color: var(--sidebar-font);
}

#horde-sidebar .horde-grouped-sidebar__application.is-current > .horde-grouped-sidebar__app-toggle {
    font-weight: 700;
}

.horde-grouped-sidebar__application.is-current > .horde-grouped-sidebar__app-toggle::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -9px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--accent-color);
}

.horde-grouped-sidebar__app-icon {
    width: 18px;
    flex: 0 0 18px;
    color: color-mix(in srgb, var(--sidebar-font) 78%, transparent);
    font-size: 14px;
    text-align: center;
}

.horde-grouped-sidebar__application.is-current .horde-grouped-sidebar__app-icon {
    color: var(--accent-color);
}

.horde-grouped-sidebar__app-chevron {
    margin-left: auto;
    color: color-mix(in srgb, var(--sidebar-font) 52%, transparent);
    font-size: 8px;
    transition: transform 0.16s ease;
}

.horde-grouped-sidebar__application.is-open .horde-grouped-sidebar__app-chevron {
    transform: rotate(90deg);
}

.horde-grouped-sidebar__pages {
    margin: 3px 0 7px 12px;
    padding: 0 0 0 8px;
    border-left: 0;
}

.horde-grouped-sidebar__pages[hidden] {
    display: none;
}

#horde-sidebar .horde-grouped-sidebar__subheading {
    margin: 8px 7px 3px;
    font-size: 10px;
    line-height: 13px;
}

#horde-sidebar .horde-grouped-sidebar__page {
    display: flex;
    min-height: 30px;
    box-sizing: border-box;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 4px 7px;
    border-radius: 6px;
    color: color-mix(in srgb, var(--sidebar-font) 75%, transparent);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
}

#horde-sidebar .horde-grouped-sidebar__page > i {
    width: 14px;
    flex: 0 0 14px;
    color: color-mix(in srgb, var(--sidebar-font) 58%, transparent);
    font-size: 11.5px;
    text-align: center;
}

#horde-sidebar .horde-grouped-sidebar__page > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#horde-sidebar .horde-grouped-sidebar__page:hover,
#horde-sidebar .horde-grouped-sidebar__page:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--sidebar-font) 7%, transparent);
    color: var(--sidebar-font);
}

#horde-sidebar .horde-grouped-sidebar__page.is-active {
    background: color-mix(in srgb, var(--sidebar-font) 8%, transparent);
    color: var(--nav-font-active);
    font-weight: 650;
}

#horde-sidebar .horde-grouped-sidebar__page.is-active::before {
    top: 8px;
    bottom: 8px;
    left: -10px;
    width: 2px;
}

.horde-grouped-sidebar__loading,
.horde-grouped-sidebar__empty {
    display: flex;
    gap: 7px;
    align-items: center;
    min-height: 32px;
    padding: 3px 7px;
    color: color-mix(in srgb, var(--sidebar-font) 62%, transparent);
    font-size: 12px;
}

#horde-sidebar .horde-grouped-sidebar__resource {
    position: relative;
    display: flex;
    min-height: 30px;
    box-sizing: border-box;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 4px 7px;
    border-radius: 6px;
    background: transparent !important;
    color: color-mix(in srgb, var(--sidebar-font) 75%, transparent) !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 18px;
}

#horde-sidebar .horde-grouped-sidebar__resource > i {
    width: 14px;
    flex: 0 0 14px;
    color: color-mix(in srgb, var(--sidebar-font) 58%, transparent);
    font-size: 11.5px;
    text-align: center;
}

#horde-sidebar .horde-grouped-sidebar__resource > span {
    min-width: 0;
    flex: 1 1 auto;
}

#horde-sidebar .horde-grouped-sidebar__resource a.horde-resource-on,
#horde-sidebar .horde-grouped-sidebar__resource a.horde-resource-off {
    display: block;
    min-height: 0;
    padding: 0;
    border-left: 0;
    background: none;
    color: inherit;
    text-decoration: none;
}

#horde-sidebar .horde-grouped-sidebar__resource:hover,
#horde-sidebar .horde-grouped-sidebar__resource:focus-within {
    background: color-mix(in srgb, var(--sidebar-font) 7%, transparent) !important;
    color: var(--sidebar-font) !important;
}

#horde-sidebar .horde-grouped-sidebar__resource.is-active {
    background: color-mix(in srgb, var(--sidebar-font) 8%, transparent) !important;
    color: var(--nav-font-active) !important;
    font-weight: 650;
}

#horde-sidebar .horde-grouped-sidebar__resource.is-active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -8px;
    width: 2px;
    border-radius: 2px;
    background: var(--accent-color);
}

#horde-sidebar .horde-grouped-sidebar__retry {
    display: flex;
    width: 100%;
    min-height: 32px;
    gap: 7px;
    align-items: center;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sidebar-font);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

#horde-sidebar .horde-grouped-sidebar__retry:hover,
#horde-sidebar .horde-grouped-sidebar__retry:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--sidebar-font) 8%, transparent);
}

#horde-sidebar .horde-grouped-sidebar__extra a {
    display: flex;
    min-height: 30px;
    gap: 8px;
    align-items: center;
    padding: 4px 7px;
    color: color-mix(in srgb, var(--sidebar-font) 75%, transparent);
    font-size: 14.5px;
}

/* Slider. */
#horde-slideleft {
    position: absolute;
    top: 0;
    bottom: 0;
}
.horde-splitbar-vert {
    width: 8px;
    /* background-image: url("graphics/slidevert-bg.png"); */
    background-repeat: repeat-y;
}
.horde-splitbar-vert.DragElt {
    cursor: col-resize;
}
.horde-splitbar-vert-handle {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background-image: url("graphics/slidevert.png");
    background-repeat: no-repeat;
    background-position: center center;
}
.DragElt .horde-splitbar-vert-handle {
    display: block;
}
.horde-splitbar-horiz {
    height: 8px;
    background-image: url("graphics/slidehoriz-bg.png");
    background-repeat: repeat-x;
    cursor: row-resize;
}
.horde-splitbar-horiz-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background-image: url("graphics/slidehoriz.png");
    background-repeat: no-repeat;
    background-position: center center;
}

/* Buttonbar. */
.horde-buttonbar {
    min-height: 30px;
    /* background-image: url("graphics/buttonbar-bg.png"); */
    background-repeat: repeat;
    overflow: hidden;
}
.horde-button-icon {
    float: left;
    width: 20px;
    height: 24px;
    margin: 5px 5px 0 15px;
}
.horde-button-left, .horde-button-left-arrow {
    float: left;
    height: 22px;
    margin: 4px 15px 0 15px;
}
.horde-button-right, .horde-button-right-arrow {
    float: right;
    height: 22px;
    margin: 4px 5px 0 32px;
}
.horde-buttonbar .disabled {
    display: none;
}
.horde-buttonbar, .horde-buttonbar a, .horde-buttonbar a:link,
.horde-buttonbar a:visited, .horde-buttonbar a:active {
    color: #616161;
    font-weight: bold;
    text-decoration: none;
}
.horde-buttonbar .horde-icon {
    margin-top: 2px;
    padding-top: 6px;
    padding-left: 25px;
    background-position: left center, right center;
    background-repeat: no-repeat;
}
.horde-buttonbar .horde-popdown {
    position: relative;
    margin: -5px 10px 0 -12px;
    padding: 0;
    background-position: center center;
}
.horde-buttonbar .horde-nobutton .horde-popdown {
    margin-left: 0;
    margin-right: 0;
}
.horde-buttonbar select {
    margin-left: -4px;
    margin-right: 8px;
    background-color: transparent;
    border-width: 0;
    color: #616161;
    font-weight: bold;
}
.horde-buttonbar select:hover {
    color: var(--accent-color)
}

.horde-buttonbar ul {
    list-style: none;
}
.horde-buttonbar li {
    float: left;
    height: 40px;
    padding-top: 8px;
    background-image: url("graphics/button-split.png");
    background-repeat: no-repeat;
    background-position: right top;
}
.horde-buttonbar li.horde-icon {
    margin: 0;
    padding: 8px 0 0 0;
    background-position: right top;
}
.horde-buttonbar li a, .horde-buttonbar li span, .horde-buttonbar li select {
    background-repeat: no-repeat;
    background-position: 10px center;
    padding: 7px 12px 7px 10px;
}
.horde-buttonbar li span.accessKey {
    padding: 0;
}
.horde-buttonbar li select {
    margin-top: -7px;
    cursor: pointer;
    height: auto;
}
.horde-buttonbar li option {
    padding: 0;
}
.horde-buttonbar li.horde-icon a {
    padding-left: 35px;
}
.horde-buttonbar li span.iconImg, .horde-buttonbar li input {
    margin-top: -3px;
}
.horde-buttonbar li.horde-nobutton a {
    padding: 0;
}
.horde-buttonbar .rightFloat li {
    background-position: center left;
}
.horde-buttonbar li:hover, .horde-buttonbar li.horde-active {
    //background-image: url("graphics/button-split.png"), url("graphics/button-active-bg.png");
    background-repeat: no-repeat, repeat-x;
}
.horde-buttonbar .rightFloat li:hover,
.horde-buttonbar .rightFloat li.horde-active {
    background-position: center left, center center;
}
.horde-buttonbar .horde-hasmenu {
    padding-right: 24px;
    background: url("graphics/popdown.png") no-repeat right center;
}
.horde-buttonbar li div {
    display: none;
}
.horde-buttonbar li:hover div {
    display: block;
}
.horde-buttonbar li ul li {
    float: none;
    background: transparent;
    height: auto;
    margin: 0;
    padding: 0;
}
.horde-buttonbar li ul li a, .horde-buttonbar li ul li a:link {
    font-weight: normal;
    color: #000;
}
.horde-buttonbar li.horde-nobutton {
    background-image: none;
    padding-left: 15px;
    margin-left: 0;
}
.horde-buttonbar .rightFloat li.horde-nobutton {
    margin-right: 5px;
}

/* Sidebar entries. */
.horde-admin-config {
    background-image: url("graphics/config.png");
}
.horde-admin-user {
    background-image: url("graphics/user.png");
}
.horde-admin-group {
    background-image: url("graphics/group.png");
}
.horde-admin-perms {
    background-image: url("graphics/perms.png");
}
.horde-admin-locked {
    background-image: url("graphics/locked.png");
}
.horde-admin-alarm {
    background-image: url("graphics/alerts/alarm.png");
}
.horde-admin-php {
    background-image: url("graphics/php.png");
}
.horde-admin-sql {
    background-image: url("graphics/sql.png");
}
.horde-admin-shell {
    background-image: url("graphics/shell.png");
}
.horde-admin-mobile {
    background-image: url("graphics/mobile.png");
}
.horde-admin-data, .horde-admin-hashtable, .horde-data {
    background-image: url("graphics/data.png");
}
.horde-perms {
    background-image: url("graphics/perms.png");
}
.horde-search {
    background-image: url("graphics/search.png");
}

#portal {
    clear: left;
}

/* Session display. */
.current-sessions {
    width: 100%;
}

/* ActiveSync display */
.activesync-devices {
    width: 100%;
}

/* Print CSS. */
@media print {
    body, .header, .smallheader {
        background: #fff;
        color: #000;
    }

    a, .signature, .signature .fixed {
        color: #000;
    }

    #horde-head, #horde-sub, #horde-sidebar, #horde-slideleft, .togglequotehide, .togglequoteshow {
        display: none;
    }

    #horde-body.horde-navigation-grouped > #horde-contentwrapper {
        margin-left: 0;
    }

    .horde-ajax #horde-body {
        top: 0;
    }

    #horde-page {
        left: 0 !important;
        padding-left: 0;
    }

    .headerbox {
        border: none;
    }

    .control, .rowEven, .rowOdd {
        background-color: #fff;
        border-bottom: thin solid #000;
    }

    .selected {
        background: #ddd;
    }

    .quoted1, .quoted2, .quoted3, .quoted4, .quoted5 {
        color: #000;
        border-left-color: #000;
    }

    #Growler, #GrowlerLog {
        display: none !important;
    }
}

.scrollable {
    //height: 620px; /* or any value */
    height: 500px; /* or any value */
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.scrollable-table {
    max-height: 500px;       /* limit height */
    overflow-y: auto !important;  /* force vertical scroll */
    overflow-x: auto;        /* allow horizontal scroll if needed */
    display: block;          /* make div a block so overflow works */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
}

.table-container {
  overflow-x: auto;
  overflow-y: auto !important;
  /* max-height: 800px; */
  -webkit-overflow-scrolling: touch; /* for smoother scrolling on mobile */
}

.horizontal-scroll {
    white-space: nowrap;
}


.loader {
  border: 12px solid #f3f3f3; /* Light grey */
  border-top: 12px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.notification {
  padding: 10px 20px !important;
  //max-width: 800px;
  margin-top: 20px;
}

.table-template b {
   color: var(--sidebar-bg) !important;
}

.table-template tr:last-of-type td {
  border-top: 1px solid var(--primary-color) !important;
}

.table-template font {
 color: var(--sidebar-bg) !important;
}

.table-template font small{
 font-size: 0.5em; !important;
}

.table-template big {
  padding-left: 0px !important;
}

.account-summary {
  width: 700px !important;
}

.account-summary tr td:first-of-type {
  font-weight: 700 !important;
}

.resulttable {
    table-layout: fixed;
    width: 100%; /* or any fixed width */
}


.resulttable td, .resulttable th {
 padding: 3px 6px;
   overflow: hidden !important;
     text-overflow: ellipsis !important;
       white-space: nowrap !important;
}

.resulttable .account-number, .resulttable .account-number-header {width: 11%; max-width: 11%; }
.resulttable .customer-name, .resulttable .customer-name-header { width: 26% !important; }
.resulttable .reference { width: 9% !important; font-size: 80%; }
.resulttable .platform { width: 6% !important; font-size: 80%; text-align: center; border-left: 1px solid #ccc; display: none; }
.resulttable .platform-header { width: 6%; text-align: center; border-left: 1px solid #ccc; display: none; }
.resulttable .platform a { color: var(--font-color); font-weight: 400; }
.resulttable .agent { width: 9% !important; font-size: 80%; text-align: center; }
.resulttable .agent-header { width: 9% !important; text-align: center; }
.resulttable .plan { width: 15% !important; font-size: 80%; }
.resulttable .plan-header { width: 15% !important; }
.resulttable .start-date { width: 9% !important; font-size: 80%; text-align: center;  }
.resulttable .start-date-header { width: 9% !important; text-align: center;  }
.resulttable .bill-date { width: 8% !important; font-size: 80%; text-align: center; }
.resulttable .bill-date-header { width: 8% !important; text-align: center; }
.resulttable .balance, .resulttable .balance-header { width: 9% !important; text-align: right; border-right: none !important; font-weight: 500;}
.resulttable .status { width: 9% !important; text-align: left;}
.resulttable .status-header { width: 9% !important; text-align: left;}

/.resulttable th {
//    font-size: 80%;
//}

.resulttable a {
  font-weight: 600;
}

//.resulttable tr:first-of-type td {
 // padding: 8px 0px 20px 0px !important;
//}

.resulttable input[name="search"] {
  margin-left: 8px;
  background-color: transparent !important; 
}

.search-container {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: var(--alt-bg);
}


[color="#5cb85c"] {
  color: hsl(141, 71%, 48%);
}

[color="#d9534f"] {
  color: hsl(348, 100%, 61%);
}

[color="#f4a055"] {
 color: hsl(40, 100%, 50%);
}

[color="#ff0000"] {
  color: hsl(348, 100%, 61%);
}

.resulttable .results-header {
  background-color: hsl(206, 70%, 96%);
  font-weight: 500;
  font-size: 12px;
  color: #444444;
}

.resulttable .results-header a b {
  font-weight: 500 !important;
}
.resulttable tr td:nth-of-type(5) {
  text-align: center !important;
}
.resulttable tr td:nth-of-type(5) a {
  font-weight: 400;
  color: inherit;
}

.resulttable a {
 color: var(--sidebar-bg);
}

/* .resulttable tbody tr td img {
  width: 16px;
  margin-right: 5px;
} */

.resulttable .account-number i {
   margin-right: 8px;
   color: var(--button-primary);
}
.resulttable .customer-name i {
   margin-right: 8px;
   //color: var(--accent-color);
   color: #209cee;
}

/*
a:not(#horde-sidebar .horde-subnavi a) {
 color: var(--link-color) !important;
}
a:hover {
  color: var(--link-hover-color) !important;
  transition: 0.2s ease !important;
}
*/
a strong {
 color: var(--link-color) !important;
}

a strong:hover {
  color: var(--link-hover-color) !important;
  transition: 0.2s ease !important;
}

[name="deleteparticipant1"] {
  padding: 7.5px 10px 7.5px 11px !important;
}

[name="startover"], [name="deleteparticipant1"], [name="suspendaccount"], [name="setoverseascallsrestricted"], [name="toggleiou"] {
    background-color: var(--button-warning) !important;
    color: #1e1e1e !important;
    font-weight: 600 !important;
    border: none !important;
}
[name="updatelinetype"], .password-reset-button, [name="addmeeting"], [value="Create SMS Group"], [name="sendmessage"], [name="submit"], [name="ttssubmit"], [value="Add Billing Item"], [name="addplan"], [name="addexternalcli"], [name="addcontact"], [value="Save Details"], [value="Apply"], #uploadfile, [value="Submit"], [value="Update Details"], input[type="submit"][name="search"] {
    background-color: var(--button-primary) !important;
    color: #1e1e1e !important;
    font-weight: 600 !important;
    border: none !important;
}


[value="View Account"], [name="uploadcsvfile"], [value="Update"], [name="updatepassword"], [name="export"] {
    background-color: var(--button-link) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: none !important;
}
[name="addrecipient"], [name="addcalltest"], [value="Add another participant"], [name="editprofile"], [name="processchorusupdate"], [name="searchbutton"] {
    background-color: var(--button-info) !important;
    color: #1e1e1e !important;
    font-weight: 600 !important;
    border: none !important;
}

[value="Edit"] {
    background-color: hsl(0, 0%, 96%) !important;
    color: #1e1e1e !important;
    font-weight: 600 !important;
}

[value="Edit"]:hover {
    opacity: 70% !important;
}

[value="Cancel"], [name="deleteallcontacts"] {
    background-color: var(--button-danger) !important;
    color: #1e1e1e !important;
    font-weight: 600 !important;
    border: none !important;
}

[name="autotopupenabled"], [name="autodebitenabled"], [name="savecard"] {
    float: right !important;
}

input[type="image"] {
    margin-top: 10px;
}


[bgcolor="#f5f5f5"] {
    background-color: var(--alt-bg) !important;
}

input[alt="Search"] {
    margin-left: 6px;
}

#horde_login input[type="text"], #horde_login input[type="password"] {
    height: 40px;
}

#horde_login .extras {
    margin-top: 30px;
}

#password-reset-container {
    text-align: center;
    padding: 10px;
}
.password-reset-box {
    margin: auto;
}


#input-container {
    max-width: 400px;
    margin: auto;
}

#password-reset-container .enter-account-email {
    color: var(--accent-color);
    font-size: 18px; 
    width: 100%; 
    padding: 7px 12px 7px 15px; 
    text-align: center;
}
#password-reset-container .enter-account-email::placeholder {
    font-size: 0.9em;
}

.container-body {
    //margin: auto;
    //margin: 0px 10px;
    padding: 28px var(--page-horizontal-gutter);
    //padding: 20px 40px;
    //max-width: 1400px;
}

.container-default {
  padding: 20px;
  max-width: 1100px;
}

.container-inner {
    //padding: 40px;
    border: 1px solid black;
    border-radius: 5px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  //padding: 40px;
}

.no-border {
    border: none !important;
}

.control {
    background-color: transparent;
}

.card-content {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
.card-content.is-hidden {
  max-height: 0;
  opacity: 0;
  padding: 0;
}
.card-content:not(.is-hidden) {
  /* max-height: 1000px; */
  opacity: 1;
}

.card-header:hover {
    background-color: #F9FAFC
}

.accordion .card-header {
    border-radius: 5px !important;
}

.accordion .card {
    margin-bottom: 5px !important;
}

.accordion .card:last-of-type {
    margin-bottom: 0px !important;
}

.search-button {
    margin-left: 6px;
    font-size: 1.2em;
}

.card textarea::placeholder {
    color: #6c757d;
}

.is-halfwidth {
    width: 50% !important;
}

.bg-alt {
  border: none !important;
}

#sentiment-slider-group {
  border-left: 3px solid #dbdbdb;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-top: 0.75rem;
}

.inset-group {
  border-left: 3px solid #dbdbdb;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.email-add-tag input {
    height: 100%;
    vertical-align: middle;
    border: none;
    border-radius: 5px 0px 0px 5px;
}

.email-add-tag span {
    padding: 2px 0px 0px 1.5px;
}
.email-add-button[data-disabled="true"] {
    opacity: 60%;
}

.email-add-tag input:focus {
    margin: 0px;
    border: none;
}

.email-tag-active input {
    background-color: #dbfef7 !important;
}

.email-add-button[data-disabled="true"]:hover {
   cursor: default !important;
   opacity: 60%;
   background-color: hsl(171, 100%, 41%) !important;
   box-shadow: none !important;
}

#ai-transcription-info {
    max-width: 100%;
}
#alert-settings-box {
    background-color: #f9f9fb;
}

.hero-tabs {
    border-bottom: 1px solid var(--accent-color);
}

.fullwidth {
    width: 100%;
}

.user-select {
    width: 120px;
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden;
}

figure.image.is-48x48 i {
  font-size: 40px;         /* Match the figure size */
  display: block;          /* Take up full width */
  width: 40px;
  height: 40px;
  line-height: 48px;       /* Vertically center icon */
  text-align: center;      /* Horizontally center icon */
}

.has-text-hero {
    color: #37517e;
}

.mini-audio-player-wrapper {
  margin: 0;
  padding: 0;
}

.mini-audio-player {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f8f8f8;
    font-family: sans-serif;
  }

  .mini-audio-player button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    width: 30px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
  }

  .mini-audio-player button:hover {
    color: #007BFF;
  }

  .playing {
    animation: pulse 1.2s infinite;
  }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }



#hero_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

#hero_preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #47b2e4;
  border-top-color: #e7e4fe;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

#page_loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

#page_loader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #47b2e4;
  border-top-color: #e7e4fe;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}



@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes summary-flash {
  0% {
    box-shadow: 0px 0px 0px 0px #47b2e4;
  }
  50% {
    box-shadow: 0px 0px 12px 0px #47b2e4;
  }
  100% {
    box-shadow: 0px 0px 0px 0px #47b2e4;
  }
}

.short-input {
    max-width: 250px !important;
}

.has-tooltip-multiline[data-tooltip]::before {
    white-space: pre-line; /* Required for \A line breaks */
}

.country-highlight {
    background-color: #ffe58f;
    padding: 0 2px;
    border-radius: 2px;
    animation: fadeHighlight 2s ease forwards; /* keep element visible after animation */
}

@keyframes fadeHighlight {
    0%   { background-color: #ffe58f; opacity: 1; }
    70%  { background-color: #ffe58f; opacity: 1; }
    100% { background-color: #ffe58f; opacity: 0; }
}

[x-cloak] {
    display: none !important;
}

#workspace-customer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #fff;
    flex-direction: column;
    overflow: hidden;
    color: #37517e;
}

.workspace-customer-overlay__header {
    position: relative;
    flex: 0 0 auto;
    min-height: 46px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #fff 0%, #f4f6f9 100%);
    color: #37517e;
    padding: 7px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #dce4ef;
    box-shadow: 0 3px 10px rgba(55, 81, 126, .1);
    z-index: 1;
}

.workspace-customer-overlay__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
}

.workspace-customer-overlay__status {
    margin-left: auto;
    color: #64748b;
    font-size: 13px;
    white-space: nowrap;
}

.workspace-customer-overlay__close {
    flex: 0 0 auto;
    background: #fff;
    color: #37517e;
    border: 1px solid #d5deeb;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.workspace-customer-overlay__close:hover,
.workspace-customer-overlay__close:focus-visible {
    background: var(--accent-light-color, #edf8fe);
    border-color: var(--accent-color, #79c8ec);
}

.workspace-customer-overlay__close:focus-visible {
    outline: 2px solid var(--accent-color, #79c8ec);
    outline-offset: 2px;
}

.workspace-customer-overlay__content {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.workspace-customer-overlay__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.workspace-customer-overlay__opening {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #37517e;
    font-size: 20px;
    padding: 24px;
    text-align: center;
}

#workspace-customer-overlay.is-opening .workspace-customer-overlay__opening {
    display: flex;
}

.workspace-customer-overlay__progress {
    display: none;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: #e3f3fb;
}

#workspace-customer-overlay.is-loading .workspace-customer-overlay__progress {
    display: block;
}

.workspace-customer-overlay__progress::after {
    content: '';
    position: absolute;
    width: 35%;
    height: 100%;
    background: var(--accent-color, #55bce7);
    animation: workspace-frame-loading 1.3s ease-in-out infinite;
}

.workspace-customer-overlay__slow:not([hidden]) {
    display: block;
    flex: 0 0 auto;
    padding: 10px 18px;
    background: #fff8e6;
    color: #705619;
    font-size: 14px;
    border-bottom: 1px solid #eee0bb;
}

@keyframes workspace-frame-loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(386%); }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-customer-overlay__progress::after {
        animation: none;
        width: 100%;
        opacity: .65;
    }
}

@media (max-width: 600px) {
    .workspace-customer-overlay__header { flex-wrap: wrap; gap: 6px 12px; }
    .workspace-customer-overlay__title { flex: 1; }
    .workspace-customer-overlay__close { margin-left: auto; }
    .workspace-customer-overlay__status { order: 3; width: 100%; }
    .workspace-customer-overlay__status:empty { display: none; }
}