:root {
    --mud-palette-error: #B00020;
    --mud-palette-error-darken: #7A0016;
    --mud-palette-error-lighten: #8B0000;
    --mud-palette-error-contrast-text: #FFFFFF;
    --app-height: 100vh; /* fallback */
    --bs-nav-link-font-size: 16px;
    --keyfaxWhite: #fff;
    --keyfaxOffWhite: #ffdfdf;
    --keyfaxOffWhite2: #ddd;
    --keyfaxOffWhite3: #f8f8f8;
    --keyfaxOffWhite4: #eee;
    --keyfaxOffWhite5: #ccc;
    --keyfaxLightGrey: #ccf;
    --keyfaxGrey: #888;
    --keyfaxMediumGrey: #6c757d;
    --keyfaxDarkGrey: rgba(108,117,125,.5);
    --keyfaxGreyShade1: #545b62;
    --keyfaxGreyShade2: #4e555b;
    --keyfaxBlack: #000;
    --keyfaxRed: red;
    --keyfaxMaroon: #800000;
    --keyfaxPrimaryColorLighter: #9d45c2;
    --keyfaxPrimaryColor: #9d45c2;
    --keyfaxPrimaryColorDimmed: #9d45c2;
    --keyfaxPrimaryColorDimmedFurther: #9d45c2;
    --keyfaxPrimaryColorDeeperToBlack: #212529;
    --keyfaxSecondaryColor: #001769;
    --keyfaxPrimaryTextColor: #001769;
    --keyfaxImageHueFilter: hue-rotate(90deg) brightness(.7);
    --keyfaxImageHueFilterAction: hue-rotate(30deg) brightness(.03) saturate(50);
    --keyfaxPrimaryColorFaded: #eed0ff;
    --keyfaxButtonPrimaryBackgroundColor: var(--keyfaxSecondaryColor) !important;
    --keyfaxButtonPrimaryBorderColor: var(--keyfaxSecondaryColorLighter) !important;
    --keyfaxButtonPrimaryDisabled: var(--keyfaxButtonPrimaryBackgroundColor);
    --keyfaxPrimaryColorDeeper: #0855a6;
    --keyfaxPrimaryColorDeeperToBlack: #212529;
    --keyfaxSecondaryColorLighter: hsla(227,100,50,.5);
    --keyfaxDefaultFontColor: #212529;
    --keyfaxYellow: #ff0;
    /* The neutral one, added with OMF049: the other four existed but "Default" had no colour of its
       own, so it borrowed the caller blue and an author could not tell the two apart. */
    --keyfaxMsgDefaultBackground: #f0f0f2;
    --keyfaxMsgDefaultForeground: rgba(0,0,0,.8);
    --keyfaxMsgStaffBackground: #bce2bc;
    --keyfaxMsgCallerBackground: #dcedfc;
    --keyfaxMsgSecurityBackground: #dc3545;
    --keyfaxMsgCompulsoryBackground: #ffc107;
    --keyfaxMsgLightbulbBackground: #ff6929;
    --keyfaxMsgStaffForeground: rgba(0,0,0,.8);
    --keyfaxMsgCallerForeground: #21426d;
    --keyfaxMsgSecurityForeground: #fff;
    --keyfaxMsgCompulsoryForeground: rgba(0,0,0,.75);
    --keyfaxMsgLightbulbForeground: rgba(0,0,0,.5);
    --keyfaxTextPrimaryBootstrapOverrideColor: var(--keyfaxPrimaryColor);
    --keyfaxDropdownPrimaryColor: var(--keyfaxPrimaryColor);
    --keyfaxFocusHighlightBorderColor: var(--keyfaxPrimaryTextColor);
    --keyfaxErrorBackgroundColor: var(--keyfaxOffWhite);
    --keyfaxErrorBackgroundColorInFocus: var(--keyfaxOffWhite);
    --keyfaxErrorBorderColor: var(--keyfaxRed);
    --keyfaxErrorLabelColor: var(--keyfaxRed);
    --keyfaxFieldErrorBackgroundColor2: var(--keyfaxMaroon);
    --keyfaxPageLoaderbackgroundColor: var(--keyfaxWhite);
    --keyfaxSpliiterPanelBackgroundColor: var(--keyfaxOffWhite2);
    --keyfaxSpliiterPanelBackgroundColorHover: var(--keyfaxPrimaryColor);
    --keyfaxSpliiterPanelScrollbarColorHover: var(--keyfaxPrimaryColor);
    --keyfaxSpliiterPanelScrollbarColor: var(--keyfaxOffWhite2);
    --keyfaxPanelLeftBackgroundcolor: var(--keyfaxOffWhite3);
    --keyfaxPanelRightBackgroundcolor: var(--keyfaxWhite);
    --keyfaxHeaderLinksBackgroundcolor: var(--keyfaxWhite);
    --keyfaxLoginPageBackgroundColor: var(--keyfaxOffWhite4);
    --keyfaxTabHeadersForegroundColor: var(--keyfaxPrimaryTextColor);
    --keyfaxTabHeadersForegroundColorFHover: var(--keyfaxWhite);
    --keyfaxTabHeadersBackgroundColor: var(--keyfaxPrimaryColor);
    --keyfaxTabHeadersForegroundColorSelected: var(--keyfaxWhite);
    --keyfaxTabHeadersBackgroundColorSelected: var(--keyfaxPrimaryColor);
    --keyfaxTabHeadersForegroundColorAnchor: var(--keyfaxWhite);
    --keyfaxTabHeadersBackgroundColorAnchor: var(--keyfaxPrimaryColor);
    --keyfaxTabHeadersBackgroundColorAnchorHover: var(--keyfaxPrimaryColorDimmed);
    --keyfaxTabHeadersForegroundColorAnchorSelected: var(--keyfaxPrimaryColor);
    --keyfaxTabHeadersBackgroundColorAnchorSelected: var(--keyfaxWhite);
    --keyfaxSearchAutoCompleteResultsMatch: var(--keyfaxYellow);
    --keyfaxSearchAutoCompleteResultsBackground: var(--keyfaxWhite);
    --keyfaxSearchAutoCompleteResultsBackgroundColor: var(--keyfaxPrimaryColor);
    --keyfaxTreeviewAnchorForegroundColor: var(--keyfaxPrimaryTextColor);
    --keyfaxListOptionsForegroundColor: var(--keyfaxPrimaryTextColor);
    --keyfaxMainLeftHeading2Foreground: var(--keyfaxSecondaryColor);
    --keyfaxMainLeftHeading3Foreground: var(--keyfaxGrey);
    --keyfaxDefaultHeading2Foreground: var(--keyfaxSecondaryColor);
    --keyfaxSelectionBackground: var(--keyfaxPrimaryColor);
    --keyfaxSelectionBorder: var(--keyfaxPrimaryColor);
    --keyfaxSelectionForeground: var(--keyfaxWhite);
    --keyfaxContinueLinkBackgroundColor: var(--keyfaxWhite);
    --keyfaxItemClickedBackgroundColor: var(--keyfaxLightGrey);
    --keyfaxMessagesBackgroundColor: var(--keyfaxLightGrey);
    --keyfaxMessagesForegroundColor: var(--keyfaxBlack);
    --keyfaxMessagesBorderColor: var(--keyfaxPrimaryColorDimmedFurther);
    --keyfaxMessagesBoxColor: var(--keyfaxPrimaryColorDeeper);
    --keyfaxMessagesBoxHeaders: var(--keyfaxPrimaryColorDeeperToBlack);
    --keyfaxLegacyBorderColor: var(--keyfaxPrimaryColorDimmedFurther);
    --keyfaxQuestionForegroundColor: var(--keyfaxSecondaryColor);
    --keyfaxPreBackground: var(--keyfaxOffWhite4);
    --keyfaxButtonSecondaryForegroundColor: var(--keyfaxPrimaryTextColor);
    --keyfaxButtonSecondaryBackgroundColor: var(--keyfaxOffWhite2);
    --keyfaxButtonSecondaryBorderColor: var(--keyfaxOffWhite3);
    --keyfaxButtonSecondaryHoverForegroundColor: var(--keyfaxPrimaryTextColor);
    --keyfaxButtonSecondaryHoverBackgroundColor: var(--keyfaxOffWhite4);
    --keyfaxButtonSecondaryHoverBorderColor: --keyfaxOffWhite5;
    --keyfaxButtonSecondaryFocus: var(--keyfaxDarkGrey);
    --keyfaxButtonSecondaryDisabled: var(--keyfaxMediumGrey);
    --keyfaxButtonSecondaryForegroundDisabled: var(--keyfaxWhite);
    --keyfaxButtonSecondaryDropDownToggleForeground: var(--keyfaxWhite);
    --keyfaxButtonSecondaryDropDownToggleBackground: var(--keyfaxGreyShade1);
    --keyfaxButtonSecondaryDropDownToggleBorder: var(--keyfaxGreyShade2)
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.noselect {
    user-select: none !important; /* Standard property */
    -webkit-user-select: none !important; /* Chrome/Safari */
    -moz-user-select: none !important; /* Firefox */
    -ms-user-select: none !important; /* IE/Edge Legacy */
}

/* Glass-like modal */
.glass-modal {
    background: rgba(255, 255, 255, 0.2); /* semi-transparent */
    backdrop-filter: blur(10px); /* frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border-radius: 16px;
    padding: 20px;
    width: 80%;
    max-width: 320px;
    text-align: center;
    color: #fff;
    /* double edge for thickness */
    border: 2px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1);
}


/* Bootstrap reduced - starts */

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    /*--bs-btn-font-family:;*/
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    border-radius: 6px;
}
/* Bootstrap reduced - ends */
/* Management CSS - starts */

@media (min-width: 200px) {
    .header-tabs {
        right: auto;
        bottom: -1px;
        left: 210px;
        display: inline-block;
        position: relative;
        top: -33px;
    }
}

.kf-header h1 span {
    position: absolute;
    margin-left: -13000px;
}

.kf-header h1 a {
    display: block;
    height: 38px;
    width: 175px;
    margin: 1rem .5rem 0 .75rem !important;
    background: url(/images/keyfax-logo.svg) no-repeat center center;
    background-size: 100%;
}

.kf-header {
    height: 60px;
}

.logoutLink {
    z-index: 1000;
    position: absolute;
    right: 0px;
    top: 0px;
}

.kfInfoBox {
    width: -webkit-fill-available;
    position: absolute;
    top: 0px;
    left: 50%;
    max-width: 60%;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    padding: 1px;
    z-index: -1;
}

@media (min-width: 200px) {
    .kfInfoBox {
        text-align: left;
        left: 212px;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        max-width: initial;
    }
}

@media (min-width: 200px) {
    .header-tabs .ui-tabs-nav a, .header-tabs .ui-tabs-nav a:link, .header-tabs .ui-tabs-nav a:visited {
        text-align: center;
        background: var(--keyfaxTabHeadersBackgroundColorAnchor);
        color: var(--keyfaxTabHeadersForegroundColorAnchor);
    }

        .header-tabs .ui-tabs-nav a, .header-tabs .ui-tabs-nav a.nav-link.active {
            color: var(--keyfaxTabHeadersBackgroundColorAnchor);
            background: var(--keyfaxTabHeadersForegroundColorAnchor);
            border-top: lightgrey 1px solid;
            border-left: lightgrey 1px solid;
            border-right: lightgrey 1px solid;
        }
}

.text-primary {
    color: var(--keyfaxTextPrimaryBootstrapOverrideColor) !important;
}

@media (min-width: 993px) {
    .kfInfoBox * {
        display: inline;
    }
}

.kfInfoBox * {
    display: block;
    padding: 0 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ui-tabs-nav {
    display: block;
}

.ui-corner-all, .ui-corner-top, .ui-corner-top {
    border-radius: 0 !important;
}

.ui-tabs-nav {
    display: inline-block;
}

.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}

.ui-tabs-nav {
    font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
    /* font-size: 12px; */
}

.ui-corner-all {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.ui-helper-clearfix {
    display: block;
}

.ui-helper-clearfix {
    display: inline-block;
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

ul.ui-tabs-nav {
    display: flex;
    gap: 0rem; /* optional spacing between items */
    list-style: none; /* removes bullets */
    padding: 1px;
    margin: 0;
}

    ul.ui-tabs-nav li.first {
        background: var(--keyfaxTabHeadersBackgroundColorAnchor);
        text-decoration: none;
        border-bottom: white 1px solid;
    }

    ul.ui-tabs-nav li.others {
        border-left: white 1px solid;
        /*padding: 5px 10px 5px 10px;*/
        background: var(--keyfaxTabHeadersBackgroundColorAnchor);
        text-decoration: none;
        border-bottom: white 1px solid;
    }

    ul.ui-tabs-nav li a {
        text-decoration: none;
        padding: 5px 10px 5px 10px;
    }

    ul.ui-tabs-nav li.active {
        border-left: white 1px solid;
        padding: 5px 5px 5px 5px;
        background: var(--keyfaxTabHeadersBackgroundColorAnchor);
        text-decoration: none;
    }

.headerContainer {
    border-bottom: 1px lightgrey solid;
    height: 60px;
}

.page, main {
    display: block !important;
}

.card-body.video-call-session {
    padding: 16px;
}

    .card-body.video-call-session div {
        font-size: small;
        font-weight: 700;
    }

.warn-report {
    background-color: lightsalmon;
}

.alert-report {
    background-color: lightcoral;
}

.warn-stat {
    font-size: 12px;
    border: black 1px solid;
    background-color: lightsalmon;
    margin: 3px;
    padding: 2px;
}

.alert-stat {
    font-size: 12px;
    border: black 1px solid;
    background-color: lightcoral;
    margin: 3px;
    padding: 2px;
}

.basic-stat {
    font-size: 12px;
    border: black 1px solid;
    background-color: lightgray;
    margin: 3px;
    padding: 2px;
}

.callStatOutlier {
    top: -5px;
    position: relative;
}

.call-details-container {
    display: flex;
    gap: 1rem;
}

    .call-details-container .left {
        width: 550px;
    }

@media (max-width:1000px) {
    .call-details-container .left {
        width: 350px;
    }

    .clipDate {
        text-wrap: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: clip;
        width: 100% !important;
    }

    .call-details-container .right {
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow: clip;
    }

    .callStatOutlier {
        display: none;
    }
}

.kf-header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

    .kf-header h1 a {
        margin-top: 0px !important;
    }

    .kf-header * {
        min-width: 0 !important;
        max-width: 100% !important;
    }


@media (max-width: 600px) {

    .header-tabs {
        left: unset;
        display: flex;
        justify-content: flex-end; /* main axis */
        top: -30px;
    }
}

@media (max-width:815px) {
    .call-details-container {
        display: block;
    }

        .call-details-container .right, .call-details-container .left {
            display: block;
            width: 100%;
            text-align: left;
        }

            .call-details-container .left .mud-button-root, .call-details-container .right .mud-button-root {
                display: none;
            }

        .call-details-container .right, .call-details-container .left {
            text-align: center !important;
        }

            .call-details-container .right .d-inline-flex {
                display: flex !important;
                flex-wrap: wrap;
                justify-content: center;
            }
}

.call-details-container .right {
    flex: 1;
    min-width: 100px;
    overflow-x: auto;
    justify-content: end;
    text-align: end;
}

.see-all-details {
    display: inline;
    text-decoration: underline;
    color: cornflowerblue;
    font-weight: 100;
}

.named-stat {
    font-weight: 400;
}

.results-container {
    overflow-y: scroll;
    height: calc(100vh - 220px);
}

.reports-container {
    overflow-y: scroll;
    height: calc(100vh - 140px);
}
/* Management CSS - ends */

.toggle-helper-text {
    font-size: 12px;
    margin-left: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.Vh-600px {
    height: calc(100vh - 600px) !important;
}

.Vh-200px {
    height: calc(100vh - 350px) !important;
}

.Vh-400px {
    height: calc(100vh - 530px) !important;
}

.one-way-commencement-msg {
    display: block;
    position: absolute;
    top: 0px;
    padding: 20px;
    background-color: black;
    opacity: 0.8;
    color: white;
    text-align: center;
    font: 400 30px arial, verddana;
}

.thankyouPage {
    width: 100vw;
    height: 100dvh;
    text-align: center;
    position: absolute;
    top: 0px;
    background-color: black;
    color: white;
    align-content: center;
}

.spinner {
    animation: rotate 1s linear infinite;
}

.path {
    stroke: #0078d4; /* Accent color */
    stroke-linecap: round;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.scale-75 {
    scale: 0.7;
    margin-top: -4px !important;
}

div#components-reconnect-modal {
    /*background: url(/logo.png) !important;
    background-repeat: no-repeat !important;
    background-color: black !important;
    background-position: top !important;*/
    background: url(omfaxlogo.svg) !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
    background-size: 300px 150px !important;
    background-color: black !important;
    color: white !important;
    opacity: 0.9 !important;
}

    div#components-reconnect-modal h5 {
        margin-top: 150px !important;
        /*color:white!important;*/
    }

        div#components-reconnect-modal h5 a {
            color: blue !important;
            text-decoration: underline !important;
        }

    div#components-reconnect-modal button {
        display: none !important;
    }

    div#components-reconnect-modal p {
        display: none !important;
    }

.SubscriptionTable .mud-table-container {
    height: 400px;
}

.corner-image {
    position: absolute;
    top: 50px;
    left: 20px;
    /* width: 100px; - or whatever size fits */
    width: 8vw;
    opacity: 0;
    transform: translateY(0);
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.corner-image-animate {
    animation: fadeSlide 8s ease-in-out forwards;
}

@media (max-width: 600px) {
    .corner-image {
        width: 60px;
        top: 10px;
        left: 10px;
    }
}

@keyframes fadeSlide {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(+400px);
    }
}

.vjs-player-wrap {
    margin: 0 auto 1rem;
    max-height: 100%; /* never exceed dialog height */
    max-width: 100%;
    overflow: hidden; /* prevent spillover */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-wrapper .video-js {
    max-height: 100%;
    max-width: 100%;
    height: auto !important; /* override vjs-fluid padding hack */
    width: auto !important;
}

@media (min-width: 1000px) {
    .vjs-player-wrap {
        max-width: 900px;
    }

    .VideoPopupDialog {
        max-width: 810px;
    }
}

@media (max-width: 1000px) {
    .vjs-player-wrap {
        width: 100%;
    }

    .VideoPopupDialog {
        width: 100%;
        height: 100% !important;
        margin: 0;
        max-width: 100%;
        max-height: 100% !important;
        border-radius: 0;
        overflow-y: scroll;
        touch-action: pan-y;
    }

    .video-js[class*="-dimensions"] {
        width: 100% !important;
        height: 70vh !important;
        max-height: 70vh; /* or whatever fits your layout */
        padding-top: 0px !important;
    }

    .video-js {
        touch-action: pan-y;
    }
}

.media-strip {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-wrap: wrap;
}

.media-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

@media (min-width: 815px) {
    .player-wide {
        display: flex;
    }
}


@media (min-width: 1000px) {
    .vjs-fluid {
        width: 360px !important;
        height: 75dvh !important;
        padding-top: 0px !important;
    }
}

@media (max-width: 1000px) and (min-width:815px) {
    .vjs-fluid {
        width: 350px !important;
        max-height: 85vh !important;
    }
}

.customer-notes p {
    max-width: 810px;
}

@media (max-width:815px) {
    .vjs-fluid {
        width: 350px !important;
        max-height: 60dvh !important;
    }

    .customer-notes {
        margin-top: 10px;
    }

    .kfInfoBox h6.text-primary {
        font-size: xx-small !important;
        float: right !important;
        width: 180px !important;
        height: 50px !important;
        white-space: break-spaces !important;
        text-align: end !important;
    }

    .logoutLink {
        display: none;
    }
}

@media (max-width:385px) {
    .kfInfoBox h6.text-primary {
        font-size: 7px !important;
    }
}

@media (max-width:815px) {
    .others {
        display: none;
    }
}

@media (min-width:815px) and (max-width:1065px) {
    .others, .first, .last {
        white-space: nowrap;
    }
}


.player-wide {
    align-items: flex-start;
    gap: 12px;
}

.media-chip img:hover {
    transform: scale(1.05);
}

.media-chip.active {
    border-color: #0d6efd;
    background: #eef5ff;
}

.media-chip img {
    width: 60px;
    height: 36px;
    object-fit: cover;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 60px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.accept-tsandcs-container {
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc(100vw - 60px) !important;
}

    .accept-tsandcs-container div {
        margin-left: 35px;
        line-height: 22px;
    }

button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* No #blazor-error-ui rule here on purpose. It used to force `background-color:#f8d7da !important`,
   which suited the framework's default one-line bar at the foot of the page. The layouts now render a
   proper dialog whose backdrop covers the viewport, and that !important repainted the WHOLE SCREEN
   pink. The error UI is styled entirely in MainLayout.razor.css / EmptyLayout.razor.css — leave it
   there, where the markup is. */


.video-prompt, .call-notes, .call-artefacts {
    color: black;
    background-color: #ffffff !important;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    width: 25vw;
    margin: 1em;
    border-radius: 10px;
    left: 1em;
}

#video-prompt-input {
    padding: 10px;
    margin: 10px;
    border: lightgray solid 1px;
    border-radius: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.video-prompt div.container, .call-notes div.container, .call-artefacts div.container {
    padding: 5px;
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    background-color: white;
}

.call-artefacts div.container {
    height: 100%;
}

.video-prompt div.header, .call-notes div.header, .call-artefacts div.header {
    width: 100%;
    border-bottom: 1px lightgrey solid;
    height: 24px;
    padding-bottom: 15px;
}

.video-prompt div div.title, .call-notes div div.title, .call-artefacts div div.title {
    color: #171629;
    text-decoration: none;
    border-bottom: white 1px solid;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 21px;
    padding: 3px 10px;
    margin-top: 3px;
    width: fit-content;
    cursor: default;
    -webkit-font-smoothing: antialiased; /* Safari/Chrome macOS */
    -moz-osx-font-smoothing: grayscale; /* Firefox macOS */
    text-rendering: optimizeLegibility; /* General hint */
}

.header.call-notes-header {
    padding-top: 20px !important;
}

.call-notes-container {
    position: relative;
    height: 100%;
}

.call-notes-editor {
    padding: 10px;
    margin: 10px;
    border: lightgray solid 1px;
    border-radius: 12px;
    width: calc(100% - 45px);
    height: calc(100% - 550px);
    resize: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.video-prompt-default {
    position: relative;
    padding-right: 20px;
    padding: 12px;
    cursor: pointer;
    font-size: 18px;
}

    .video-prompt-default::after {
        content: ">";
        position: absolute;
        right: 5px; /* distance from right edge */
        top: 50%; /* halfway down */
        transform: translateY(-50%); /* vertical centering */
        font-size: 24px; /* adjust size as needed */
        color: #888; /* style */
        transition: all 0.1s ease; /* smooth press effect */
        /*transform: scaleX(0.6);*/
        font-stretch: condensed;
    }
    /* Pressed state */
    .video-prompt-default:active::after {
        transform: translateY(-45%); /* nudges it down slightly */
        text-shadow: 0 1px 0 rgba(0,0,0,0.3); /* subtle depth */
    }

    .video-prompt-default:active {
        transform: translateY(2px); /* nudges it down slightly */
        color: #555; /* darkens the arrow */
        text-shadow: 0 1px 0 rgba(0,0,0,0.3); /* subtle depth */
    }
/* Hide when viewport width < 1000px */
@media (max-width: 1000px) {
    .video-prompt-and-call-notes {
        display: none !important;
    }

    .call-artefacts {
        display: none !important;
    }

    .call-artefacts-prompt-call-notes-warning {
        display: block !important;
    }
}

.call-artefacts-prompt-call-notes-warning {
    display: none;
    z-index: 1000;
    right: 1em;
    bottom: 5em;
    position: absolute;
    width: 240px;
    text-align: right;
}

.video-prompt-and-call-notes {
    position: absolute;
    z-index: 1000;
    right: 1em;
    top: 100px;
    display: block;
    bottom: 5em;
    top: 100px;
    /*bottom: calc(100vh - 100px - 3em);*/
}

.video-prompt {
    height: -webkit-fill-available;
    overflow: clip;
}

.call-notes {
}

.call-state {
    height: 40px;
}

.call-artefacts {
    position: absolute;
    z-index: 1000;
    left: 1em;
    bottom: 5em;
    top: 100px;
    display: block;
    /*height: fit-content;*/
    overflow: clip;
}

    .call-artefacts .card-body {
        height: calc(100% - 270px);
        padding: 20px;
        display: grid;
        gap: 10px;
        overflow-y: auto;
    }

@media (min-width: 1000px) {
    .call-artefacts .card-body img {
        width: 90% !important;
    }

    .call-artefacts .card-body {
        grid-template-columns: repeat(1, 1fr); /* 3 per row */
    }
}

@media (min-width: 1300px) {
    .call-artefacts .card-body img {
        width: 90% !important;
    }

    .call-artefacts .card-body {
        grid-template-columns: repeat(2, 1fr); /* 3 per row */
    }
}

@media (min-width: 1600px) {
    .call-artefacts .card-body img {
        width: 90% !important;
    }

    .call-artefacts .card-body {
        grid-template-columns: repeat(2, 1fr); /* 3 per row */
    }
}

.call-artefacts .card-body img {
    /*width: 66%;*/
    height: auto;
    cursor: pointer;
}

.card-body {
    color: black;
    margin: 1em;
    background-color: white;
    border-radius: 4px;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
}

    .card-body .btn:focus {
        box-shadow: none !important;
    }

    .card-body textarea {
        margin: 1em;
        width: -webkit-fill-available;
        resize: none;
    }

    .card-body #display-prompt {
        background-color: aqua;
        width: fit-content;
        align-self: flex-end;
        padding: 3px 15px;
        margin: 5px;
        background-color: rgb(0, 23, 105);
        font-size: 18px;
    }

.thumbprint-topleft {
    position: absolute;
    top: 1em;
    left: 1em;
    z-index: 1000;
    height: 34px;
}

.videoPromptOverlayText {
    position: absolute;
    bottom: 3em;
    color: white;
    font-size: 32px;
    font-weight: 600;
    text-shadow: 3px 3px 5px black;
    -webkit-text-stroke: 1px black;
    display: none;
    text-align: center;
}

.notes-saving-saved {
    display: none;
    float: right;
    margin-top: -20px;
}
/* Countdown page */
.countdown-container {
    text-align: -webkit-center !important;
    animation: countdown-fadeIn 0.2s forwards;
    font-family: Arial, sans-serif;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    text-align: center;
    justify-content: center; /* horizontal centering */
    align-items: center; /* vertical centering */
}

.countdown-bubble {
    background: #9d45c2; /* Omfax Purple */
    color: white;
    border-radius: 50%;
    width: min(calc(min(100vw, 100vh) - 3em), 50vh);
    height: min(calc(min(100vw, 100vh) - 3em), 50vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    /*animation: pulse 1.5s infinite;*/
}

.countdown-title {
    font-size: calc(min(10vw, 10vh)); /* scales with viewport */
    font-weight: bold;
    margin-bottom: 50px;
    color: #9d45c2;
}

.countdown {
    margin-top: 10px;
    font-size: calc(min(60vw, 60vh)); /* scales with viewport */
}

@keyframes countdown-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes countdown-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.countdown-subtext {
    position: absolute;
    margin-top: 30px;
    color: #9d45c2;
    border: none;
    bottom: 6em;
    padding: 15px 25px;
    border-radius: 30px;
    font-size: calc(min(5vw, 5vh)); /* scales with viewport */
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s;
    left: 50%; /* move to horizontal center */
    transform: translateX(-50%); /* shift back by half width */
    text-align: center;
}


.keynect-header {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100px; /* or whatever fits your layout */
    z-index: 10; /* make sure it's above background but below interactive elements */
}

.shadow-bottom {
    position: relative;
}

    .shadow-bottom::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px; /* adjust for shadow depth */
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    }

.absolute-shadow {
}

    .absolute-shadow::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    }

.contact-details {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin-top: 24px;
    color: slategrey;
}

code {
    color: #001769; /* your primary */
    background-color: #f0f2f7;
    padding: 2px 4px;
    border-radius: 4px;
}


.countdown-popover-style {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 2000 !important; /* above everything */
    width: 90vw !important;
    max-width: 90vw !important;
}

.call-resource {
    position: relative;
    display: inline-block;
    margin: 8px;
}

    .call-resource img {
        display: block;
        width: 150px; /* or whatever size you use */
        height: auto;
        border-radius: 4px;
    }

.delete-btn {
    position: absolute;
    top: 2px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 14px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .delete-btn:hover {
        background: rgba(255,0,0,0.8);
    }
/* Resource Preview Modal Styles */
@keyframes preview-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes preview-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.resource-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: preview-fade-in 0.3s ease-in-out forwards;
}

    .resource-preview-modal.hidden {
        animation: preview-fade-out 0.3s ease-in-out forwards;
        pointer-events: none;
    }

.resource-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    cursor: pointer;
}

.resource-preview-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: 20px;
    overflow: hidden;
}

.resource-preview-content {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: calc(25vw - 40px);
    max-height: calc(100vh - 180px);
    text-align: center;
}

.resource-preview-media {
    max-width: 100%;
    max-height: 75dvh;
    min-height: 65dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: none !important;
}

    .resource-preview-media.visible {
        display: block !important;
    }

.resource-preview-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: background-color 0.2s ease;
}

    .resource-preview-close-btn:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .resource-preview-close-btn:active {
        transform: scale(0.95);
    }

.resource-preview-jumptokeynect {
    padding-top: 10px;
    cursor: pointer;
    display: flow-root;
}

.video-progress-container {
    padding-top: 10px;
    width: 100%;
    max-width: 400px;
    margin: 10px auto;
    text-align: center;
    font-family: sans-serif;
}

.video-progress-bar {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}

.video-progress-fill {
    height: 100%;
    width: 0%;
    background: #4caf50; /* green */
    transition: width 0.2s ease;
}

.video-progress-label {
    font-size: 14px;
    color: #333;
}


.reports-overflowy-clip > div {
    overflow-y: clip;
}


div.endpoint ul li a {
    color: #d03b29;
}

.endpoint {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 2em;
    padding: 1.5em
}

/* ── Chat UI — dynamic content styles ──────────────────────────────────────
   These rules apply to HTML inserted by JavaScript (History.razor chat page).
   Blazor CSS isolation (scoped attributes) does not reach dynamically-inserted
   HTML, so these must live here in the global stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */

/* The customer's house-rules notice, at the very top of a chat above the opening line
   (TextualChatService.RenderBanner). Deliberately NOT a bubble: square corners, a flat grey fill and
   a hard black border, so it reads as a posted notice rather than as the first thing the assistant
   said. Full width for the same reason — a bubble is someone talking to you, a banner is the rules
   of the room. Never coloured by tenant branding: a monitoring notice that looks like part of the
   conversation is a monitoring notice people scroll past. */
.chat-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #e8e8e8;
    border: 1px solid #000;
    border-radius: 0;
    color: #1a1a1a;
    font-size: 0.8rem;
    line-height: 1.45;
    /* Authored text, so it may legitimately be more than one line and may carry long words. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Per-turn thumbs, floated right under the agent's bubble (TextualChatService.RenderTurnFeedback).
   Quiet until hovered or pressed: it is an offer, not a demand, and it sits in the thread beside
   whatever the assistant just said. Kept small deliberately — the widget can be a narrow strip of a
   phone screen, which is also why there are no reason chips. */
/* Its OWN line, pushed to the far right — NOT tucked against the bubble (Tom, 17 Sep 2026). Sitting
   immediately beside the question, two thumbs read as the way to ANSWER it, and some people will use
   them that way: we lose the answer and get a rating nobody meant to give. Distance plus the label
   inside the group are what say "this is about the reply, not a reply".

   The full-width basis works with .chat-row.agent's flex-wrap below: the bubble keeps its line, this
   drops onto the next one and right-aligns. */
/* Pushed to the FAR RIGHT, on its own line under the bubble. Sitting tucked against the question,
   two thumbs read as the way to ANSWER it, and some people will use them that way — losing the answer
   and gaining a rating nobody meant to give. Distance is what separates the two.

   The package it contains is deliberately tiny (see .chat-fb-group): unnoticeable unless somebody
   actually wants to rate or complain, because the aim is that people answer the questions. */
.chat-feedback {
    /* SAME line as the bubble, pushed to the far right of it by the auto margin — not tucked against
       the question, and not on a row of its own (Tom, 17 Sep 2026).

       Both halves matter. Hard against the bubble, two thumbs read as the way to ANSWER the question
       and people use them that way; on their own line they cost a row of the transcript and stop
       being discreet. The auto margin buys the separation for free, in space the row already had. */
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    padding-left: 8px;
}

/* The rounded group. Bordered rather than filled so it reads as a quiet enclosure and does not fight
   whatever background a customer's theme gives the thread. One line tall on purpose: the label sits
   BESIDE the buttons, not above them, which is the only way to have a title at all without the
   control growing into something that competes with the conversation. */
/* ONE package: the label sits ABOVE the two thumbs inside a single soft container, so the pair reads
   as a labelled control rather than as two loose buttons that might be answer options for the
   question beside them. Narrow and capped, because the aim is that people answer the questions —
   the rating is a second thought and should look like one. */
.chat-fb-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 5px 2px;
    /* A hairline, not a frame: enough to say "these belong together", not enough to draw the eye. */
    border: 1px solid var(--kfx-border, #ededed);
    border-radius: 9px;
    /* The BUTTONS set the width; the label wraps to fit rather than stretching it. */
    width: 74px;
}

.chat-fb-btns {
    display: flex;
    gap: 6px;
}

.chat-fb-label {
    font-size: 0.54rem;
    line-height: 1.2;
    color: var(--kfx-muted, #8a8a8a);
    text-align: center;
    /* Allowed to wrap now — it is stacked above the buttons, so height is the cheap direction and the
       package stays narrow. */
    white-space: normal;
}

.chat-fb-opt { opacity: .75; }

.chat-fb-btn {
    /* Explicit display: a bare <button> in a flex row collapses oddly in Chromium otherwise. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* NO container of its own — no border, no background, no ring. The package around the pair is the
       only box; giving each thumb its own made them read as two separate controls rather than one
       labelled choice (Tom, 17 Sep 2026). What changes on click is the ICON. */
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kfx-muted, #9a9a9a);
    cursor: pointer;
    opacity: .6;
    transition: opacity .12s ease, transform .08s ease;
}
.chat-fb-btn svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.chat-fb-btn:hover,
.chat-fb-btn:focus-visible {
    opacity: 1;
    transform: scale(1.12);
}

.chat-fb-btn:focus-visible {
    outline: 2px solid var(--kfx-accent, #6b2d8f);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pressed — YELLOW, because that is what a rating control looks like everywhere else people use one
   (Tom, 17 Sep 2026), rather than picking up the product's purple and reading as chrome.

   The icon is a deep amber-gold, NOT a bright yellow: #a16207 sits around 5:1 on this white bubble
   strip, where a literal #ffd700 is roughly 1.6:1 and would be close to invisible for anyone with
   low vision — a control nobody can see is not a familiar control. The soft yellow wash behind it
   carries the "yellow" impression that a bright icon would have, at no cost to legibility.

   Colour is NOT the only signal: aria-pressed carries the state for a screen reader and the filled
   background carries it for anyone who cannot separate the two hues. */
/* Chosen: the THUMB ITSELF turns bright yellow with a darker gold outline — Facebook's like, where
   the icon carries the state and nothing boxes it in.

   The outline is doing real work, not decoration. Bright yellow on white is about 1.7:1, so a flat
   yellow thumb would be close to invisible to anyone with low vision; the gold stroke draws the
   shape's edge at ~5:1 and is what actually says "this one is chosen", with aria-pressed carrying it
   for a screen reader. Do not drop the stroke to "clean it up". */
.chat-fb-btn.on {
    opacity: 1;
}

.chat-fb-btn.on svg {
    fill: #f5c518;
    stroke: #a16207;
    stroke-width: 1;
    stroke-linejoin: round;
}

/* The five-star conversation rating, shown once when a chat completes
   (TextualChatService.RenderConversationRating). Full width and centred, unlike the thumbs: this one
   IS asking for something, so it is allowed to occupy a line — it only ever appears when there is no
   more conversation to scroll past it. */
.chat-rating {
    margin: 10px 0 2px;
    padding: 12px 14px;
    border: 1px solid var(--kfx-border, #e2e2e2);
    border-radius: 10px;
    text-align: center;
}

.chat-rating-q {
    font-size: 0.82rem;
    color: var(--kfx-muted, #6a6a6a);
    margin-bottom: 7px;
}

.chat-rating-stars {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.chat-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 36px of tap target — this is the one control in the thread people are ASKED to use, and a star
       small enough to miss is a rating not given. */
    width: 36px;
    height: 36px;
    padding: 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c9c9c9;
    cursor: pointer;
    transition: color .12s ease, transform .08s ease;
}

.chat-star svg { width: 22px; height: 22px; fill: currentColor; }
.chat-star:hover { transform: scale(1.08); }
.chat-star:focus-visible { outline: 2px solid var(--kfx-accent, #6b2d8f); outline-offset: 1px; }

/* Chosen — the same amber-gold as a pressed thumb, so the two controls read as one family. */
.chat-star.on { color: #a16207; }

.chat-rating-done {
    margin-top: 7px;
    font-size: 0.78rem;
    color: var(--kfx-muted, #6a6a6a);
}

.chat-row {
    display: flex;
}

.chat-row.agent {
    justify-content: flex-start;
}

.chat-row.user {
    justify-content: flex-end;
}

.chat-bubble-wrapper {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent .chat-bubble-wrapper {
    align-items: flex-start;
}

.user .chat-bubble-wrapper {
    align-items: flex-end;
}

.chat-bubble {
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
}

.agent .chat-bubble {
    background: #ffffff;
    color: #212121;
    border-radius: 4px 18px 18px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user .chat-bubble {
    background: #1565c0;
    color: #ffffff;
    border-radius: 18px 4px 18px 18px;
}

/* The engine refused an answer (e.g. numeric validation, QUE079/080/081) — the reason renders as its
   own bubble above the re-asked question, tinted so it reads as a correction, not a new question. */
.chat-bubble.chat-error {
    background: #fdecea;
    color: #b00020;
    font-weight: 600;
}

/* Human advisor takeover (Stage 3): the advisor's bubble is visually distinct from the AI's so the tenant
   knows a person has stepped in, and a small "Advisor" label sits above it. */
.chat-advisor-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6a1b9a;
    padding-left: 4px;
}

.agent .chat-bubble.advisor-bubble {
    background: #f3e5f5;
    color: #4a148c;
    border: 1px solid #ce93d8;
    border-radius: 4px 18px 18px 18px;
}

/* Centred system note (advisor joined / handed back). */
.chat-row.system {
    justify-content: center;
}

.chat-system-note {
    font-size: 0.75rem;
    color: #757575;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 4px 12px;
    margin: 2px 0;
}

/* (The yellow "Administrator hint" bubble lived here. The hint moved to the admin sims' "Why it
   chose that" rail — see KfxAdminRationaleRail — so the test transcript now reads exactly as an end
   user's does, and voice gets the same note that only chat used to.) */

/* ── Auto-answer recap card: one compact "Got it — Kitchen ✓ · Boiler ✓" acknowledgement of
   everything answered from what the user already said. Assumed (confirm-in-passing) chips are
   amber with a "?" — Stage D wires them to tap-to-correct. Each chip's tooltip is the question. */
.recap-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.recap-lead {
    color: #5f6a72;
    font-size: 0.8rem;
}

.recap-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: none;
    border-radius: 12px;
    background: #e8f2ec;
    color: #1d5c38;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.recap-chip:hover {
    filter: brightness(0.95);
}

.recap-chip i {
    font-style: normal;
    font-size: 0.7rem;
    opacity: 0.75;
}

/* The question the chip's answer belongs to — without it a chip like "No ✓" is meaningless. */
.recap-chip-q {
    opacity: 0.7;
    font-weight: 400;
}

.recap-chip-q::after {
    content: ":";
}

.recap-chip.assumed {
    background: #fdf3e0;
    color: #8a5a14;
}

/* Grounded-answer citations under a chat bubble — where the policy answer came from. */
.chat-citations {
    font-size: 0.72rem;
    color: #5f6a72;
    padding: 2px 6px 0;
}

.chat-citations a {
    color: #1565c0;
}

/* Illustrating pictures under an answer ("what does a gully look like?") — at most three, so a
   simple wrap rather than a carousel. Each is capped so a large upload can't dominate the thread. */
.chat-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 6px 0;
}

.chat-images figure {
    margin: 0;
    max-width: 200px;
}

.chat-images img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    background: #fff;
}

/* Each thumbnail opens the full-size viewer (chat.js enhanceThreadImages → kfx-lightbox.js) — a
   diagram's labels are unreadable at 200px, and this crop hides part of it besides. The cursor and
   the keyboard wiring are set INLINE by chat.js, because on an embedded host page this stylesheet
   may not be loaded at all; these two rules are the polish on our own surfaces, not the affordance. */
.chat-images img:hover {
    border-color: #9fb0bd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.chat-images img:focus-visible {
    outline: 2px solid #1565c0;
    outline-offset: 2px;
}

.chat-images figcaption {
    font-size: 0.7rem;
    color: #5f6a72;
    padding-top: 3px;
    line-height: 1.3;
}

.choice-buttons,
.answer-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.choice-btn,
.option-btn {
    padding: 7px 16px;
    border: 1.5px solid #1565c0;
    border-radius: 20px;
    background: #ffffff;
    color: #1565c0;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}

/* The hosted-form card (forms plan P3): its "open the form" link wears option-btn — anchors need
   the button look explicitly; long form names wrap rather than overflowing the bubble column. */
a.option-btn {
    display: inline-block;
    text-decoration: none;
    white-space: normal;
    max-width: 100%;
}

.choice-btn:hover,
.option-btn:hover {
    background: #1565c0;
    color: #ffffff;
}

.choice-btn:disabled,
.option-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Design §27: the question's SUGGESTED answer — a dashed outline, never a selection; the click
   (or tick) is still required. Applied by ChatRenderService when the engine matched a default. */
.option-btn.option-suggested,
.option-checkbox.option-suggested {
    outline: 2px dashed #1565c0;
    outline-offset: 2px;
    border-radius: 20px;
}

.option-checkbox.option-suggested {
    border-radius: 8px;
}

/* The answer given before a Back — a solid outline and a tint, so it reads as "what you chose"
   against the dashed suggestion. The click (or tick) is still the answer. */
.option-btn.option-previous,
.option-checkbox.option-previous {
    outline: 2px solid #1565c0;
    outline-offset: 2px;
    border-radius: 20px;
    background-color: rgba(21, 101, 192, 0.12);
}

.option-checkbox.option-previous {
    border-radius: 8px;
}

/* Inline question inputs (number / date / time / address fields) — the HELPER controls chat.js
   builds for question types that would otherwise only be answerable by typing. They never replace
   the composer: typing the answer stays available at every question, which is what keeps the
   parsing server-side in CoreChatService for voice and WhatsApp too. */
.kf-chat-qinput {
    padding: 6px 10px;
    border: 1.5px solid #cfd8dc;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #263238;
    background: #ffffff;
    min-width: 0;
    max-width: 100%;
}

.kf-chat-qinput:focus {
    outline: none;
    border-color: #1565c0;
}

.kf-chat-qinput:disabled {
    opacity: 0.5;
    background: #f5f5f5;
    cursor: default;
}

/* Typing indicator — three bouncing dots */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 18px !important;
    min-width: 56px;
}

.typing-indicator span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9e9e9e;
    animation: kf-bounce 1.3s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes kf-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-7px); }
}

/* ── InteractionMessage box ─────────────────────────────────────────────── */

.msg-box {
    border-radius: 6px !important;
    border: 1px solid #e0e0e0;
    padding: 14px 16px !important;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.msg-box-title {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 8px;
    color: #1565c0;
    border-bottom: 1px solid #e8eaf6;
    padding-bottom: 6px;
}

.msg-box-body {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #212121;
}

.msg-box-body p  { margin: 0 0 8px; }
.msg-box-body ul { margin: 4px 0 8px 18px; }
.msg-box-body li { margin-bottom: 4px; }
.msg-box-body strong { font-weight: 600; }
.msg-box-body table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.msg-box-body th,
.msg-box-body td { border: 1px solid #e0e0e0; padding: 6px 10px; font-size: 0.8125rem; }
.msg-box-body th { background: #f5f5f5; font-weight: 600; }

.msg-style-information {
    border-left: 4px solid #1565c0;
    background: #e8f0fe;
}

.msg-style-warning {
    border-left: 4px solid #f57c00;
    background: #fff3e0;
}
.msg-style-warning .msg-box-title { color: #e65100; border-bottom-color: #ffe0b2; }

.msg-style-success {
    border-left: 4px solid #2e7d32;
    background: #e8f5e9;
}
.msg-style-success .msg-box-title { color: #1b5e20; border-bottom-color: #c8e6c9; }

.msg-style-error {
    border-left: 4px solid #c62828;
    background: #ffebee;
}
.msg-style-error .msg-box-title { color: #b71c1c; border-bottom-color: #ffcdd2; }

/* ── Continue button ────────────────────────────────────────────────────── */

.continue-row {
    margin-top: 8px;
}

.continue-btn {
    padding: 7px 20px;
    border: 1.5px solid #1565c0;
    border-radius: 20px;
    background: #1565c0;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.18s, border-color 0.18s;
}

.continue-btn:hover {
    background: #0d47a1;
    border-color: #0d47a1;
}

.continue-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── /telephone "Start Telephone Simulation" button ──────────────────────────
   Global (not component-scoped) so it styles BOTH the server-rendered button and
   the copy phone-sim.js re-injects via innerHTML (which carries no CSS-isolation
   scope attribute, so a scoped rule would miss it).  Matches the /chat page's
   #startChatBtn styling, but centred within the white config box. */
#startSimBtn {
    align-self: center;
    background: #1565c0;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}

#startSimBtn:hover {
    background: #0d47a1;
}

/* ── Legacy message styles, ported from the 4.4.x editor.css (OMF054) ────────────────────────────
   Source: keyfaxdata/src/KFClient/CitizenDev/html/editor.css, whose own header says what it is for:
   "Provides the default CSS classes dynamically added into CKEditor 4. These CSS classes populate
   the Styles drop down." There is no stylesSet anywhere in legacy — the DROPDOWN IS BUILT FROM THIS
   STYLESHEET, one entry per `element.class` selector, which is why the legacy list is labelled with
   selector text ("div.msg-alert-primary") rather than friendly names.

   Ported VERBATIM in colour and shape rather than modernised. These classes are already in customer
   content — the 4.4.8 export carries msg-alert-* and msg-badge-* — so a message authored in legacy
   has to look the same here. Note the palette is Bootstrap FOUR, and primary is Keyfax orange
   (#FE8942) everywhere except the alerts, which is not a mistake to "correct".

   Unscoped on purpose: the same authored HTML is shown by the result cards, staff diagnostics, the
   web runtime and the editor, and a style working in only some of those is worse than none. */

/* Alerts */
div.msg-alert-primary, div.msg-alert-secondary, div.msg-alert-success,
div.msg-alert-info, div.msg-alert-danger, div.msg-alert-warning {
    position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem;
    border: 1px solid transparent; border-radius: 30px;
}
div.msg-alert-primary   { color:#004085; background-color:#cce5ff; border-color:#b8daff; }
div.msg-alert-secondary { color:#383d41; background-color:#e2e3e5; border-color:#d6d8db; }
div.msg-alert-success   { color:#155724; background-color:#d4edda; border-color:#c3e6cb; }
div.msg-alert-info      { color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb; }
div.msg-alert-danger    { color:#721c24; background-color:#f8d7da; border-color:#f5c6cb; }
div.msg-alert-warning   { color:#856404; background-color:#fff3cd; border-color:#ffeeba; }

/* Buttons */
a.msg-btn-primary, a.msg-btn-secondary, a.msg-btn-success,
a.msg-btn-info, a.msg-btn-danger, a.msg-btn-warning {
    display:inline-block; font-weight:400; text-align:center; white-space:nowrap;
    vertical-align:middle; user-select:none; border:1px solid transparent;
    padding:.375rem .75rem; font-size:1rem; line-height:1.5; border-radius:30px; text-decoration:none;
}
a.msg-btn-primary   { color:#fff;     background-color:#FE8942; border-color:#FE8942; }
a.msg-btn-secondary { color:#fff;     background-color:#6c757d; border-color:#6c757d; }
a.msg-btn-success   { color:#fff;     background-color:#28a745; border-color:#28a745; }
a.msg-btn-info      { color:#fff;     background-color:#17a2b8; border-color:#17a2b8; }
a.msg-btn-danger    { color:#fff;     background-color:#dc3545; border-color:#dc3545; }
a.msg-btn-warning   { color:#212529;  background-color:#ffc107; border-color:#ffc107; }

/* Badges */
span.msg-badge-primary, span.msg-badge-secondary, span.msg-badge-success,
span.msg-badge-info, span.msg-badge-danger, span.msg-badge-warning {
    display:inline-block; padding:.25em .4em; font-size:75%; font-weight:700; line-height:1;
    text-align:center; white-space:nowrap; vertical-align:baseline; border-radius:.25rem;
}
span.msg-badge-primary   { color:#fff;    background-color:#FE8942; border-color:#FE8942; }
span.msg-badge-secondary { color:#fff;    background-color:#6c757d; border-color:#6c757d; }
span.msg-badge-success   { color:#fff;    background-color:#28a745; border-color:#28a745; }
span.msg-badge-info      { color:#fff;    background-color:#17a2b8; border-color:#17a2b8; }
span.msg-badge-danger    { color:#fff;    background-color:#dc3545; border-color:#dc3545; }
span.msg-badge-warning   { color:#212529; background-color:#ffc107; border-color:#ffc107; }

/* Text */
a.msg-text-muted,     span.msg-text-muted     { color:#888888; }
a.msg-text-primary,   span.msg-text-primary   { color:#FE8942; }
a.msg-text-secondary, span.msg-text-secondary { color:#6c757d; }
a.msg-text-success,   span.msg-text-success   { color:#28a745; }
a.msg-text-info,      span.msg-text-info      { color:#17a2b8; }
a.msg-text-danger,    span.msg-text-danger    { color:#dc3545; }
a.msg-text-warning,   span.msg-text-warning   { color:#C49300; }

/* Headings */
h1.msg-success, h2.msg-success, h3.msg-success, h4.msg-success, h5.msg-success, h6.msg-success { color:#28a745 !important; }
h1.msg-primary, h2.msg-primary, h3.msg-primary, h4.msg-primary, h5.msg-primary, h6.msg-primary { color:#FE8942 !important; }
h1.msg-secondary, h2.msg-secondary, h3.msg-secondary, h4.msg-secondary, h5.msg-secondary, h6.msg-secondary { color:#6c757d !important; }
h1.msg-info, h2.msg-info, h3.msg-info, h4.msg-info, h5.msg-info, h6.msg-info { color:#17a2b8 !important; }
h1.msg-danger, h2.msg-danger, h3.msg-danger, h4.msg-danger, h5.msg-danger, h6.msg-danger { color:#dc3545 !important; }
h1.msg-warning, h2.msg-warning, h3.msg-warning, h4.msg-warning, h5.msg-warning, h6.msg-warning { color:#ffc107 !important; }

/* Images, tables, lists */
img.msg-left  { padding:5px; margin-right:5px; float:left;  border:2px solid #DDD; }
img.msg-right { padding:5px; margin-right:5px; float:right; border:2px solid #DDD; }
table.msg-grey { background-color:#F5F5F5; }
table.msg-grey th { background-color:#DDD; }
ul.msg-square { list-style-type:square; }

/* Spans (the pre-4.4 set) */
span.msg-marker-yellow { background-color:#FE8942; }
span.msg-marker-green  { background-color:lime; }
span.msg-emphasis      { font-style:italic; }
span.msg-strong        { font-weight:bold; }
span.msg-deleted-text  { text-decoration:line-through; }
span.msg-inserted-text { text-decoration:underline; }

/* The dropdown's own rows, each drawn in the style it applies — legacy did the same thing with
   `.cke_panel_listItem div.msg-alert-*`, which is the tell that its list was built from this
   stylesheet. The margin reset is that rule's descendant, for the same reason. */
.kfx-msgstyle-list { display:flex; flex-direction:column; gap:2px; }
.kfx-msgstyle-group { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
                      color:var(--adm-text-4,#8a8594); padding:8px 2px 3px; }
.kfx-msgstyle-item { display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
                     font-size:13px; background:none; border:0; padding:5px 8px; border-radius:4px; }
.kfx-msgstyle-item > * { margin:0 !important; }
.kfx-msgstyle-item:hover { background:var(--adm-surface-2,#f7f6fa); }
.kfx-msgstyle-note { margin-top:10px; font-size:11.5px; color:var(--adm-text-3,#736e80); line-height:1.5; }
/* The Styles dropdown's toolbar control — a labelled dropdown standing in for the stock Formats
   ("Paragraph") one it replaced, so it has to read like a dropdown rather than an icon. */
.kfx-tb-btn.kfx-tb-dropdown { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; white-space: nowrap; }
.kfx-tb-btn.kfx-tb-dropdown .e-icons { font-size: 10px; }
/* ONE scroller, not two. The panel body (.kfx-sc-body) already scrolls at 260px — sized for the
   special-characters grid it was built for — and the styles list had its own max-height on top, so
   the dropdown came up with an inner and an outer scrollbar. The list scrolls with the body now, and
   the body is given more room here because this list is ~50 rows rather than a compact grid. */
.kfx-rte .kfx-msgstyle-panel .kfx-sc-body { max-height: min(460px, 60vh); }