/* ------------------------------------------------------------------------------------------------------------ */
/* VDGL Control Panel - Custom Styling */
/* ------------------------------------------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&family=Titillium+Web:wght@200;300;400;600;700;900&Yantramanav:wght@100;300;400;500;700;900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Share+Tech+Mono&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
/*.row [class*='col-'] {
    background-color: none;
    border: 1px dashed #ffffff40;
    background-clip: content-box;
    min-height: 30px;
}
*/
@font-face {
    font-family: 'CharlesWright';
    src: local('CharlesWrightBoldCaps'), url(fonts/CharlesWrightBoldCaps.woff) format('woff');
}

@font-face {
    font-family: 'Satoshi-Variable';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2'), url('fonts/Satoshi-Variable.woff') format('woff'), url('fonts/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

:root {
    --font-root-body: 'Poppins';
    --font-h-headings: 'Satoshi-Variable';
    --font-extra-large: 'Satoshi-Variable';
    --font-accordion-header: 'Open Sans';
    --font-section-header: 'Poppins';
    --font-basic-table: 'Poppins';
    --font-inner-section-header: 'Poppins';
    --font-inner-section-sub-text: 'Poppins';
    --font-json-header-root-path: 'Source Code Pro';
    --font-human-view-basic-cell-title: 'Open Sans';
    --font-vrm: 'CharlesWright';
    --font-vin: 'Satoshi-Variable';
    --font-vrm-in-grid: 'CharlesWright';
    --font-quick-search: 'CharlesWright';
    --font-quick-search-postcode: 'CharlesWright';
    --font-human-view-tip-table: 'Source Code Pro';
    --font-footer-copyright: 'Open Sans';
    --font-footer-contact-info: 'Open Sans';
    --font-footer-nav-text: 'Open Sans';
    --font-footer-nav: 'Open Sans';
    --font-json-viewer: 'Lucida Console';
    --font-code-language-button: 'Satoshi-Variable';
    --font-api-key-guid: 'JetBrains Mono';
    --font-progress-stats-value: 'Satoshi-Variable';
    --font-progress-stats-info: 'Satoshi-Variable';
    /* ------------------------------------------------ */
    --cell-size-title-1024: 0.70rem;
    --cell-size-title-576: 0.62rem;
    --cell-size-title-weight: 500;
    /* ------------------------------------------------ */
    --cell-size-value-1024: 0.95rem;
    --cell-size-value-576: 0.77rem;
    --cell-size-value-weight: 500;
    /* ------------------------------------------------ */
    --cell-size-suffix: 0.8rem;
    --cell-size-suffix-weight: 400;
    /* ------------------------------------------------ */
    --cell-size-prefix: 0.8rem;
    --cell-size-prefix-weight: 400;
    /* ------------------------------------------------ */
    --json-header-info-text-size: 0.87rem;
    --json-header-info-text-weight: 700;
    /* ------------------------------------------------ */
    --section-inner-header-info-text-size: 0.80rem;
    --section-inner-header-info-text-weight: 700;
    /* ------------------------------------------------ */
    --json-header-root-path-text-size: 0.65rem;
    --json-header-root-path-text-weight: 700;
    /* ------------------------------------------------ */
    --cell-money-text-size-1024: 1.9rem;
    --cell-money-text-weight-1024: 700;
    --cell-money-text-size-558: 1.35rem;
    --cell-money-text-weight-558: 700;
    --cell-money-text-size-576: 1.15rem;
    --cell-money-text-weight-576: 700;
    /* ------------------------------------------------ */
    --ukvd-progress-ring-size: 186px;
    --ukvd-progress-ring-width: 14px;
    --ukvd-progress-ring-animation-speed: 0.9s;
    --ukvd-progress-ring-value-font-size: 2.5rem;
    --ukvd-progress-ring-value-font-weight: 500;
    --ukvd-progress-ring-info-font-size: 0.85rem;
    --ukvd-progress-ring-info-font-weight: 500;
    /* ------------------------------------------------ */
    --ukvd-progress-ring-size-mini: 110px;
    --ukvd-progress-ring-width-mini: 8px;
    --ukvd-progress-ring-value-font-size-mini: 1.6rem;
    --ukvd-progress-ring-info-font-size-mini: 0.62rem;
    /* ------------------------------------------------ */
    --ukvd-stat-large-emphasise-font-size: 2.1rem;
    /* ------------------------------------------------ */
    --ukvd-cp-cell-text-size: 0.89rem;
    /* ------------------------------------------------ */
    --ukvd-cp-headerShade1: #303945;
    --ukvd-cp-headerShade2: #161d26;
    /* ------------------------------------------------ */
    --ukvd-loading-spinner-highlight: #1b7ff8;
    --ukvd-loading-spinner-border: #f3f3f3;
    /* ------------------------------------------------ */
    --ukvd-vin-entry-font-weight: 700;
}

html, body {
    font-family: var(--font-root-body), Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
}

.mainlayout-body {
    max-width: 1280px;
    min-height: 100vh;
    margin: 0 auto;
}

.basic-body {
    max-width: 1280px;
    min-height: 600px;
    margin: 0 auto;
}

a {
    color: #5d89f7;
    text-decoration: none;
    background-color: transparent;
}

p {
    color: var(--ukvd-colour-black);
}

a:hover {
    color: #4e73cf;
    text-decoration: underline;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

    a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
        color: inherit;
        text-decoration: none;
    }

    a:not([href]):not([tabindex]):focus {
        outline: 0;
    }


.display-as-table {
    display: table;
    width: 100%;
}

    .display-as-table > div {
        display: table-cell;
        float: none;
    }

.cp-textarea {
    resize: none;
    white-space: nowrap;
    overflow-x: scroll; /* or hidden */
}

.ukvd-hand-pointer {
    cursor: pointer;
}

.rz-steps-item {
    display: inline-block;
    margin-bottom: 17px;
}

.rz-tabview-panels {
    overflow: hidden !important;
}

.ukvd-force-word-break {
    overflow-wrap: break-word;
    white-space: break-spaces;
}

.ukvd-util-vertical-centre {
    margin-top: auto;
    margin-bottom: auto;
}

.ukvd-cp-tier-pill {
    font-size: 0.9rem !important;
    padding: 0.4rem 0.9rem !important;
    border-radius: 1rem !important;
}

/* ------------------------------------------------------------ */
/* Nato Phonetic Pills */
/* ------------------------------------------------------------ */
.ukvd-phonetic-alpha-pill {
    background-color: var(--ukvd-cp-phonetic-alpha-pill-fill);
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--ukvd-cp-phonetic-alpha-pill-border);
    color: var(--ukvd-cp-phonetic-alpha-pill-text);
    padding: 3px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 8px 2px;
    cursor: pointer;
    border-radius: 12px;
}

.ukvd-phonetic-number-pill {
    background-color: var(--ukvd-cp-phonetic-number-pill-fill);
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--ukvd-cp-phonetic-number-pill-border);
    color: var(--ukvd-cp-phonetic-number-pill-text);
    padding: 3px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 8px 2px;
    cursor: pointer;
    border-radius: 12px;
}

/* ------------------------------------------------------------ */

.ukvd-disabled-item {
    opacity: 0.6;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Home Screen Styling*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-welcome-head-text {
    font-family: var(--font-section-header);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ukvd-cp-text-black);
}

.ukvd-welcome-sub-head-text {
    font-family: var(--font-section-header);
    font-size: 2.76rem;
    font-weight: 900;
    color: var(--ukvd-cp-text-black);
}

.ukvd-welcome-sub-info-text {
    font-family: var(--font-h-headings);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--ukvd-cp-text-black);
    text-align: left;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .ukvd-welcome-head-text {
        font-size: 1.4rem;
    }

    .ukvd-welcome-sub-head-text {
        font-size: 1.7rem;
    }

    .ukvd-welcome-sub-info-text {
        font-size: 1.0rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .ukvd-welcome-head-text {
        font-size: 1.6rem;
    }

    .ukvd-welcome-sub-head-text {
        font-size: 2.0rem;
    }

    .ukvd-welcome-sub-info-text {
        font-size: 1.0rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .ukvd-welcome-head-text {
        font-size: 1.9rem;
    }

    .ukvd-welcome-sub-head-text {
        font-size: 2.2rem;
    }

    .ukvd-welcome-sub-info-text {
        font-size: 1.05rem;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .ukvd-welcome-head-text {
        font-size: 2.0rem;
    }

    .ukvd-welcome-sub-head-text {
        font-size: 2.5rem;
    }

    .ukvd-welcome-sub-info-text {
        font-size: 1.1rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media (min-width: 993px) and (max-width: 1380px) {
    .ukvd-welcome-head-text {
        font-size: 1.9rem;
    }

    .ukvd-welcome-sub-head-text {
        font-size: 2.0rem;
    }

    .ukvd-welcome-sub-info-text {
        font-size: 1.2rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1450px) {
    .ukvd-welcome-head-text {
        font-size: 2.4rem;
    }

    .ukvd-welcome-sub-head-text {
        font-size: 2.76rem;
    }

    .ukvd-welcome-sub-info-text {
        font-size: 1.4rem;
    }
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Home screen - quick nav buttons*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-home-screen-nav-container {
    align-items: center;
    padding: 5px 0px 10px 0px;
}

.ukvd-cp-home-screen-support-code {
    border-radius: 0.7em;
    border: 1px dashed var(--ukvd-home-panel-border-colour);
    padding: 0rem 0.6rem 0rem 0.6rem;
    background: var(--ukvd-home-panel-background);
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

a.ukvd-cp-home-screen-support-code:hover {
    cursor: pointer;
    color: var(--ukvd-cp-support-code-hover);
}

    a.ukvd-cp-home-screen-support-code:hover h4 {
        color: var(--ukvd-cp-support-code-hover);
    }

    a.ukvd-cp-home-screen-support-code:hover p {
        color: var(--ukvd-cp-support-code-hover);
    }

        a.ukvd-cp-home-screen-support-code:hover p.ukvd-cp-home-screen-nav-button-info {
            color: var(--ukvd-cp-support-code-hover);
            font-weight: 600;
            transform: scale(1.1);
        }

/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-nav-menu-support-code-container {
    align-items: center;
    padding: 5px 0px 10px 0px;
}

.ukvd-cp-nav-menu-support-code {
    padding: 0.6rem 0.6rem 0.3rem 0.6rem;
    text-align: center;
}

a.ukvd-cp-nav-menu-support-code:hover {
    cursor: pointer;
}

    a.ukvd-cp-nav-menu-support-code:hover h4 {
        color: var(--ukvd-cp-support-code-hover);
    }

    a.ukvd-cp-nav-menu-support-code:hover p {
        color: var(--ukvd-cp-support-code-hover);
    }

        a.ukvd-cp-nav-menu-support-code:hover p.ukvd-cp-p-mini-extra {
            color: var(--ukvd-cp-dark-grey2);
            font-weight: 600;
            transform: scale(1.1);
        }
/* ------------------------------------------------------------------------------------------------------------ */

.ukvd-cp-restrictions-mini-text {
    font-size: 0.85rem;
}

.ukvd-cp-restrictions-info-card {
    background-color: var(--ukvd-restrictions-info-card) !important;
}

    .ukvd-cp-restrictions-info-card p,
    .ukvd-cp-restrictions-info-card i,
    .ukvd-cp-restrictions-info-card li,
    .ukvd-cp-restrictions-info-card i.rzi,
    .ukvd-cp-restrictions-info-card h3 {
        color: var(--ukvd-colour-force-white) !important;
        font-variation-settings: 'FILL' 0;
    }

.ukvd-cp-restrictions-info-card-inner {
    background-color: var(--ukvd-restrictions-info-card-inner) !important;
}

    .ukvd-cp-restrictions-info-card-inner p,
    .ukvd-cp-restrictions-info-card-inner i,
    .ukvd-cp-restrictions-info-card-inner li,
    .ukvd-cp-restrictions-info-card-inner i.rzi,
    .ukvd-cp-restrictions-info-card-inner h3 {
        color: var(--ukvd-colour-force-white) !important;
        font-variation-settings: 'FILL' 0;
    }


.ukvd-cp-home-screen-nav-container {
    align-items: center;
    padding: 5px 0px 10px 0px;
}

.ukvd-cp-home-screen-nav-cards {
    background-color: var(--ukvd-home-panel-background) !important;
}

a.ukvd-cp-home-screen-nav-button {
    display: inline-block;
    padding: 0.1em 0.1em;
    /*margin: 0rem 0.3em 0.3em 0;*/
    border-radius: 0.52em;
    border: 1px dashed var(--ukvd-home-panel-border-colour);
    box-sizing: border-box;
    text-decoration: none;
    font-family: var(--font-code-language-button);
    font-weight: 800;
    font-size: 1.4rem;
    background-color: var(--ukvd-home-panel-button-background);
    text-align: center;
    transition: all 0.2s;
    width: 100%;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%), 0 0 0px 0 rgb(0 0 0 / 0%), 0 4px 10px 0 var(--ukvd-home-panel-shadow);
}

.ukvd-cp-home-screen-nav-button-title {
    font-size: 0.9rem;
    font-weight: 900;
    display: block;
    padding-top: 0px;
    margin-top: -8px;
    color: var(--ukvd-home-panel-title-text-colour);
}

.ukvd-cp-home-screen-nav-button-info {
    font-size: 0.8rem;
    padding-top: 0px;
    margin-top: 0px;
}

a.ukvd-cp-home-screen-nav-button:hover {
    cursor: pointer;
    border: 1px dashed var(--ukvd-home-panel-border-colour);
    background-color: var(--ukvd-cp-home-screen-nav-hover-text);
    color: white;
}

a.ukvd-cp-home-screen-nav-button i {
    color: var(--ukvd-home-panel-icon-colour);
    font-size: 2.5rem;
    font-style: normal;
}

.ukvd-cp-home-screen-nav-container:hover i {
    color: white;
}

.ukvd-cp-home-screen-nav-container:hover p {
    color: white;
}

.ukvd-cp-home-screen-nav-container:hover .ukvd-cp-home-screen-nav-button-title {
    color: white;
}

a.ukvd-cp-home-screen-nav-button p {
    color: var(--ukvd-home-panel-info-text-colour);
    font-size: 0.8rem;
    font-weight: 500;
    padding-left: 5px;
    padding-right: 5px;
}

a.ukvd-cp-home-screen-nav-button:active {
    background-color: var(--ukvd-cp-home-screen-nav-selected-bg);
    border: 1px solid var(--ukvd-home-panel-border-colour);
}

.ukvd-cp-home-screen-nav-container:active i {
    color: white;
}

.ukvd-cp-home-screen-nav-container:active p {
    color: white;
}

a.ukvd-cp-home-screen-nav-button.active {
    background-color: var(--ukvd-cp-home-screen-nav-selected-bg);
}

/*a.ukvd-cp-home-screen-nav-button.active {
    background-color: var(--ukvd-cp-home-screen-nav-selected-bg);
}
*/
.ukvd-cp-home-screen-nav-container.active i {
    color: white;
}

.ukvd-cp-home-screen-nav-container.active p {
    color: white;
}


@media all and (max-width:30em) {
    a .ukvd-cp-home-screen-nav-button {
        display: block;
        margin: 0.4em auto;
    }
}

.ukvd-cp-home-screen-nav-select-icon {
    font-size: 2.1rem;
    color: var(--ukvd-cp-home-screen-nav-hover-text);
}
/* ------------------------------------------------------------ */

.ukvd-item-hover:hover {
    cursor: pointer;
}

/* ------------------------------------------------------------ */
/* Override the default Radzen Steps Prev/Next buttons etc */
/* ------------------------------------------------------------ */
#step-buttons-override .rz-steps-buttons {
    display: flex;
    justify-content: end;
}

#step-buttons-override .rz-steps-next {
    background-color: var(--ukvd-cp-success);
    color: white !important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 6px;
    margin-left: 12px;
}

    #step-buttons-override .rz-steps-next .rz-state-disabled {
        opacity: 0.5;
    }

    #step-buttons-override .rz-steps-next:hover {
        filter: brightness(0.8);
    }

#step-buttons-override .rz-steps-prev {
    background-color: var(--ukvd-cp-disabled);
    color: white !important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 6px;
}

#step-buttons-override .rz-steps-next.rz-state-disabled {
    background-color: #dddddd;
    color: white !important;
    display: none;
}

#step-buttons-override .rz-steps-prev.rz-state-disabled {
    background-color: #dddddd;
    color: white !important;
    display: none;
}

#step-buttons-override .rz-steps-prev:hover {
    filter: brightness(0.8);
}

/*#cp-panel-within .rz-card {
    border-radius: 0.7rem !important;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%), 0 0 0px 0 rgb(0 0 0 / 0%), 0 0 7px 5px rgb(0 0 0 / 7%) !important;
}
*/

.rz-card {
    border-radius: 0.7rem !important;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%), 0 0 0px 0 rgb(0 0 0 / 0%), 0 4px 10px 0 rgb(0 0 0 / 7%) !important;
}

.rz-card-error {
    background-color: var(--ukvd-cp-error) !important;
}

.rz-card-info-blue {
    background-color: var(--ukvd-card-info) !important;
}

.rz-card-info-caution {
    background-color: var(--ukvd-cp-caution) !important;
}

.rz-card-info-advisory {
    background-color: var(--ukvd-cp-amber-light) !important;
}

.rz-card-info-grey {
    background-color: #555555 !important;
}


.ukvd-grid-basic-button-base {
    display: inline-flex;
    background-color: transparent;
    border: none;
    font-size: 1.6rem;
    opacity: 1.0;
    cursor: pointer;
    padding: 5px 13px;
    transition: all .1s ease-out;
}

.ukvd-grid-basic-button-small-base {
    display: inline-flex;
    background-color: transparent;
    border: none;
    font-size: 1.3rem;
    opacity: 1.0;
    cursor: pointer;
    padding: 5px 13px;
    transition: all .1s ease-out;
}

.ukvd-grid-basic-info-badge {
    background-color: var(--ukvd-cp-mid-grey);
    width: 12px;
    height: 12px;
    position: absolute;
    margin-left: 21px;
    margin-top: 4px;
    border-radius: 6px;
    border: 2px solid white;
}

.ukvd-note-enabled-badge {
    background-color: var(--ukvd-cp-success);
    width: 14px;
    height: 14px;
    position: absolute;
    margin-left: 21px;
    margin-top: 4px;
    border-radius: 7px;
    border: 2px solid white;
}

.ukvd-grid-basic-button-base i.rzi {
    font-size: 1.6rem;
}

.ukvd-grid-basic-button-base:hover i.rzi {
    transition: all .1s ease-in;
    transform: scale(1.3);
}

.ukvd-grid-basic-button-base:focus {
    outline: none;
}

.ukvd-grid-basic-button-small-base i.rzi {
    font-size: 1.3rem;
}

.ukvd-grid-basic-button-small-base:hover i.rzi {
    transition: all .1s ease-in;
    transform: scale(1.3);
}

.ukvd-grid-basic-button-small-base:focus {
    outline: none;
}


/*Custom Accordian Header*/
#accordian-custom .rz-accordion-content {
    background: none !important;
    padding-top: 0.5rem;
    padding-right: 0.0rem;
    padding-bottom: 0.5rem;
    padding-left: 0.0rem;
}

#accordian-custom .rz-accordion-header {
    background: none !important;
}

    #accordian-custom .rz-accordion-header a[role='tab'] {
        font-family: var(--font-accordion-header), Helvetica, Arial, sans-serif !important;
        font-weight: 700 !important;
    }

/*Custom Accordian JSON Header*/
#accordian-header-json .rz-accordion-content {
    background: none !important;
    padding-top: 0.5rem;
    padding-right: 0.0rem;
    padding-bottom: 0.5rem;
    padding-left: 0.0rem;
}

#accordian-header-json .rz-accordion-header {
    border: 1px solid var(--ukvd-human-view-accordian-header-bg-border) !important;
    padding-top: 4px;
    padding-bottom: 5px;
    margin-top: 10px;
    background-color: var(--ukvd-human-view-accordian-header-bg) !important;
    border-radius: 14px;
    color: var(--ukvd-human-view-accordian-header-text);
}

    #accordian-header-json .rz-accordion-header:hover {
        background-color: var(--ukvd-human-view-accordian-header-bg-hover) !important;
        color: var(--ukvd-human-view-accordian-header-text-hover);
    }

        #accordian-header-json .rz-accordion-header:hover a[role='tab'] {
            color: var(--ukvd-human-view-accordian-header-role-tab-hover);
        }


    /*#accordian-header-json .rz-accordion-header {
    border-bottom: 2px solid #ededed !important;
    padding-top: 4px;
    padding-bottom: 5px;
    margin-top: 10px;
}*/

    /*#accordian-header-json .rz-accordion-header {
    background: #dbdbdb !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 8px 8px 8px 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 10px;
    bottom: 3px;
}*/

    #accordian-header-json .rz-accordion-header a[role='tab'] {
        font-weight: 700 !important;
        color: var(--ukvd-human-view-accordian-header-role-tab-hover);
    }

/*Custom Accordian INNER - JSON Header*/
#accordian-inner-json .rz-accordion-content {
    background: none !important;
    padding-top: 0rem;
    padding-right: 0.0rem;
    padding-bottom: 0.5rem;
    padding-left: 0.0rem;
}

#accordian-inner-json .rz-accordion-header {
    background: var(--ukvd-human-view-accordian-header-inner-bg) !important;
    border: 1px solid var(--ukvd-human-view-accordian-header-inner-border) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 8px 8px;
    padding-top: 4px;
    padding-bottom: 9px;
    margin-top: 10px;
    margin-bottom: -6px;
    color: var(--ukvd-human-view-accordian-header-inner-text);
}

    #accordian-inner-json .rz-accordion-header:before {
        background: green !important;
        border-radius: 8px 8px 8px 8px;
    }

    #accordian-inner-json .rz-accordion-header:after {
        background: green !important;
        border-radius: 8px 8px 8px 8px;
    }

    #accordian-inner-json .rz-accordion-header:hover {
        background: #d9dfe2 !important;
        color: green;
    }

    #accordian-inner-json .rz-accordion-header a[role='tab'] {
        font-weight: 700 !important;
        color: var(--rz-accordion-item-color);
    }

    #accordian-inner-json .rz-accordion-header:hover a[role='tab'] {
        color: var(--ukvd-human-view-accordian-header-inner-text-hover) !important;
    }

    #accordian-inner-json .rz-accordion-header:hover {
        background: var(--ukvd-human-view-accordian-header-inner-bg-hover) !important;
        color: var(--ukvd-human-view-accordian-header-inner-text-hover);
    }

/*Custom Accordian SPECS and OPTIONS*/
#accordian-basic-blue-options .rz-accordion-content {
    background: none !important;
    padding-top: 0rem;
    padding-right: 0.0rem;
    padding-bottom: 0.5rem;
    padding-left: 0.0rem;
}

#accordian-basic-blue-options .rz-accordion-header {
    background: var(--ukvd-cp-accordian-basic-blue-options-bg) !important;
    border-radius: 8px 8px 8px 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 2px;
    margin-bottom: 0px;
    color: var(--ukvd-cp-accordian-basic-blue-options-text);
}

    #accordian-basic-blue-options .rz-accordion-header:hover {
        background: var(--ukvd-cp-accordian-basic-blue-options-bg-hover) !important;
        color: var(--ukvd-cp-accordian-basic-blue-options-text-hover) !important;
    }

    #accordian-basic-blue-options .rz-accordion-header a[role='tab'] {
        font-weight: 500 !important;
        color: var(--ukvd-cp-accordian-basic-blue-options-text) !important;
    }

    #accordian-basic-blue-options .rz-accordion-header:hover a[role='tab'] {
        font-weight: 500 !important;
        color: var(--ukvd-cp-accordian-basic-blue-options-text-hover) !important;
    }

#accordian-inner-json .rz-accordion-header:hover a[role='tab'] {
    color: #363636;
}

/*Custom Json Content Card*/
.rz-card-basic {
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 0 2px 0 rgb(0 0 0 / 8%), 0 4px 12px 0 rgb(0 0 0 / 4%);
}

.rz-card-basic-bordered {
    border: 1px solid var(--ukvd-cp-light-grey);
    border-radius: 0.25rem;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 14%), 0 0 0px 0 rgb(0 0 0 / 14%), 0 0px 0px 0 rgb(0 0 0 / 14%);
}

/*Custom Json Content Card*/
.rz-card#card-inner-json {
    border-radius: 0px 0px 12px 12px !important;
    border: 1px dashed var(--ukvd-human-view-accordian-inner-border);
    box-shadow: none !important;
    margin-top: -5px;
    padding-top: 10px;
}

/*Custom Json Content Card*/
.rz-card#card-outer-json {
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 0 2px 0 rgb(0 0 0 / 8%), 0 4px 12px 0 rgb(0 0 0 / 4%);
}

/*Custom  Card*/
.rz-card#card-inner-details-keylined {
    word-break: break-word;
    background-color: var(--ukvd-card-inner-details-background);
    border: none;
    border: 1px solid var(--ukvd-card-base-border-colour);
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 0 2px 0 rgb(0 0 0 / 8%), 0 4px 12px 0 rgb(0 0 0 / 4%);
}

/*Custom Card - Basic with dashed line*/
.rz-card#card-inner-info-details-dashed-keylined {
    background-color: var(--ukvd-inf-dashed-card-fill);
    word-break: break-word;
    border-radius: 0.25rem;
    box-shadow: none !important;
    border: 1px dashed var(--ukvd-inf-dashed-card-border);
}

/*#card-inner-json .rz-card {
    border-radius: 0px 0px 12px 12px !important;
    border: 1px dashed #dbdbdb;
    box-shadow: none !important;
}*/

/*json sub section - header/Json path*/
.section-json-header {
    font-family: var(--font-section-header), Helvetica, Arial, sans-serif !important;
    font-weight: var(--json-header-info-text-weight) !important;
    font-size: var(--json-header-info-text-size);
    padding-bottom: 0.2rem;
    color: var(--ukvd-colour-black);
    padding-top: 8px;
}

/*inner sub section - header/Json path*/
.section-inner-sub-header {
    font-family: var(--font-inner-section-header), Helvetica, Arial, sans-serif !important;
    font-weight: var(--section-inner-header-info-text-weight) !important;
    font-size: var(--section-inner-header-info-text-size);
    padding-bottom: 0.2rem;
    color: var(--ukvd-colour-black);
}

.section-inner-sub-text {
    font-family: var(--font-inner-section-sub-text), Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9rem;
    padding-bottom: 0.2rem;
    color: var(--ukvd-colour-black);
}


.ukvd-support-code-large {
    font-family: var(--font-h-headings);
    font-size: 2.8rem;
    font-weight: var(--json-header-root-path-text-weight);
    color: var(--cp-text-grey-mid);
}

/*json sub section - header/Json path*/
.json-header-root-path {
    font-family: var(--font-json-header-root-path);
    font-size: var(--json-header-root-path-text-size);
    font-weight: var(--json-header-root-path-text-weight);
    color: var(--ukvd-cp-json-path);
    padding-bottom: 14px;
    padding-top: 5px;
    border-bottom: var(--ukvd-cp-json-path-dashed-border);
}

/*Human View - Basic Cell Title*/
.human-view-basic-cell-title {
    font-family: var(--font-human-view-basic-cell-title), Helvetica, Arial, sans-serif !important;
    color: var(--cell-size-title-color);
    font-size: var(--cell-size-title-1024);
    font-weight: var(--cell-size-title-weight);
    text-transform: uppercase;
    border-bottom: 1px solid var(--cell-size-border-color);
    padding-bottom: 2px;
    margin-bottom: 7px !important;
}

@media (max-width: 576px) {
    .human-view-basic-cell-title {
        font-family: var(--font-human-view-basic-cell-title), Helvetica, Arial, sans-serif !important;
        color: var(--cell-size-title-color);
        font-size: var(--cell-size-title-576);
        font-weight: var(--cell-size-title-weight);
        text-transform: uppercase;
        border-bottom: 1px solid var(--cell-size-border-color);
        padding-bottom: 2px;
        margin-bottom: 7px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-x: clip;
    }
}

/*Human View - Basic Cell Value*/
.human-view-basic-cell-value {
    font-size: var(--cell-size-value-1024);
    font-weight: var(--cell-size-value-weight);
    padding-left: 1.4rem;
    overflow-wrap: anywhere;
}

.human-view-basic-cell-zero-pad-value {
    font-size: var(--cell-size-value-1024);
    font-weight: var(--cell-size-value-weight);
    overflow-wrap: anywhere;
}


/*Human View - Basic Cell Prefix Style*/
.human-view-basic-cell-prefix {
    font-size: var(--cell-size-prefix);
    font-weight: var(--cell-size-prefix-weight);
    padding-left: 1.4rem;
    padding-right: 0.25rem;
    color: var(--ukvd-cp-text-prefix);
}

/*Human View - Basic Cell Suffix Style*/
.human-view-basic-cell-suffix {
    font-size: var(--cell-size-suffix);
    font-weight: var(--cell-size-suffix-weight);
    padding-left: 0.45rem;
    color: var(--ukvd-cp-text-suffix);
}

/*Human View - Basic Cell Value*/
.json-mini-information-icon {
    font-size: 1.2rem !important;
    margin-right: 3px;
    margin-top: -2px;
    color: var(--ukvd-cp-json-mini-tooltip);
}

/*Human View - VRM Cell styling*/
.human-view-vrm-cell {
    text-align: center;
    font-family: var(--font-vrm);
    max-width: 144px;
    min-width: 111px;
    line-height: 1.429;
    color: var(--ukvd-cp-vrm-text);
    font-size: 1.3rem;
    outline: none;
    border: 1px solid var(--ukvd-cp-vrm-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vrm-bg);
    margin-left: 1.4rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    /*padding-top: 0.144rem;*/
    white-space: nowrap;
}

@media (max-width: 576px) {
    .human-view-vrm-cell {
        text-align: center;
        font-family: var(--font-vrm);
        max-width: 100px;
        min-width: 95px;
        color: var(--ukvd-cp-vrm-text);
        font-size: 1.1rem;
        outline: none;
        border: 1px solid var(--ukvd-cp-vrm-border);
        border-radius: 5px;
        box-shadow: none;
        background-color: var(--ukvd-cp-vrm-bg);
        margin-left: 1.4rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 2px;
        margin-bottom: 0.3rem !important;
        white-space: nowrap;
    }
}

/*Human View - VRM Cell styling*/
.human-view-vrm-disabled-cell {
    text-align: center;
    font-family: var(--font-vrm);
    max-width: 144px;
    min-width: 111px;
    line-height: 1.429;
    color: var(--ukvd-cp-vin-text);
    font-size: 1.3rem;
    outline: none;
    border: 1px solid var(--ukvd-cp-vin-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vin-bg);
    margin-left: 1.4rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    /*padding-top: 0.144rem;*/
    white-space: nowrap;
}

@media (max-width: 576px) {
    .human-view-vrm-disabled-cell {
        text-align: center;
        font-family: var(--font-vrm);
        max-width: 100px;
        min-width: 95px;
        color: var(--ukvd-cp-vin-text);
        font-size: 1.1rem;
        outline: none;
        border: 1px solid var(--ukvd-cp-vin-border);
        border-radius: 5px;
        box-shadow: none;
        background-color: var(--ukvd-cp-vin-bg);
        margin-left: 1.4rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 2px;
        margin-bottom: 0.3rem !important;
        white-space: nowrap;
    }
}

/*Human View - VRM Error Cell styling*/
.human-view-vrm-error-cell {
    text-align: center;
    font-family: var(--font-vrm);
    max-width: 144px;
    min-width: 111px;
    line-height: 1.429;
    color: var(--ukvd-colour-force-white);
    font-size: 1.3rem;
    outline: none;
    border: 1px solid var(--ukvd-cp-vrm-error-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-error);
    margin-left: 1.4rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    /*padding-top: 0.144rem;*/
    white-space: nowrap;
}

@media (max-width: 576px) {
    .human-view-vrm-error-cell {
        text-align: center;
        font-family: var(--font-vrm);
        max-width: 100px;
        min-width: 95px;
        color: var(--ukvd-colour-force-white);
        font-size: 1.1rem;
        outline: none;
        border: 1px solid var(--ukvd-cp-vrm-error-border);
        border-radius: 5px;
        box-shadow: none;
        background-color: var(--ukvd-cp-error);
        margin-left: 1.4rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 2px;
        margin-bottom: 0.3rem !important;
        white-space: nowrap;
    }
}

/*Human View - VIN Cell styling*/
.human-view-vin-cell {
    text-align: center;
    font-family: var(--font-vin);
    max-width: 250px;
    min-width: 111px;
    line-height: 1.429;
    color: var(--ukvd-cp-vin-text);
    font-size: 1.3rem;
    outline: none;
    border: 1px solid var(--ukvd-cp-vin-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vin-bg);
    margin-left: 1.4rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-top: 0.144rem;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .human-view-vin-cell {
        text-align: center;
        font-family: var(--font-vin);
        max-width: 250px;
        min-width: 111px;
        color: var(--ukvd-cp-vin-text);
        font-size: 1.0rem;
        outline: none;
        border: 1px solid var(--ukvd-cp-vin-border);
        border-radius: 5px;
        box-shadow: none;
        background-color: var(--ukvd-cp-vin-bg);
        margin-left: 1.4rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 0.15rem;
        margin-bottom: 0.3rem !important;
        white-space: nowrap;
    }
}

.ukvd-cp-large-text-money-value {
    font-size: 2rem;
    font-weight: 300;
}

.ukvd-cp-json-header-information-icon {
    font-size: 1.6rem !important;
    color: var(--ukvd-cp-json-info-icon);
    margin-right: 8px;
    padding-bottom: 6px;
    padding-top: 8px;
}

.ukvd-cp-human-view-quick-info-strip {
    margin-bottom: 1.5rem;
    padding-top: 0.3rem;
}

.ukvd-cp-human-view-quick-info-strip-text {
    font-weight: 700;
    font-size: min(2.6vw, 1.0rem);
}


.ukvd-cp-human-view-brand-logo-img {
    max-width: 100%;
    max-height: 126px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 764px) {
    .ukvd-cp-human-view-brand-logo-img {
        max-width: 100%;
        max-height: 94px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ------------------------------------------------------------ */

.ukvd-cp-human-view-tip-table {
    /*border: solid 1px #5c5c5c;*/
    border-collapse: collapse;
    border-spacing: 0;
    /*font: normal 13px Arial, sans-serif;*/
    font-size: 0.65rem;
    font-family: var(--font-human-view-tip-table);
    font-weight: 600;
    max-width: 400px;
    white-space: pre-wrap;
}

    .ukvd-cp-human-view-tip-table thead th {
        background-color: var(--ukvd-cp-human-view-tip-panel-bg-colour);
        border: 1px solid var(--ukvd-cp-human-view-tip-panel-stroke);
        color: var(--ukvd-cp-human-view-tip-panel-text);
        padding: 10px;
        text-align: left;
    }

    .ukvd-cp-human-view-tip-table tbody tr {
        border-bottom: 1px dashed #7e7676;
    }

    .ukvd-cp-human-view-tip-table tbody td {
        /*border: solid 1px #5c5c5c;*/
        color: #fff;
        padding: 10px;
    }

.ukvd-cp-human-view-tip-table-mini {
    white-space: nowrap;
    font-size: 0.7rem;
}

.ukvd-cp-mini-grey-info-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: #969696;
}

/* ------------------------------------------------------------ */
.ukvd-cp-selected-package-info-table-mini {
    white-space: nowrap;
    font-size: 0.8rem;
}

.ukvd-cp-selected-package-info-table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.8rem;
    font-family: var(--font-human-view-tip-table);
    font-weight: 600;
    max-width: 400px;
    white-space: nowrap;
}

    .ukvd-cp-selected-package-info-table thead th {
        background-color: var(--ukvd-cp-human-view-tip-panel-bg-colour);
        border: 1px solid var(--ukvd-cp-human-view-tip-panel-stroke);
        color: var(--ukvd-cp-human-view-tip-panel-text);
        padding: 10px;
        text-align: left;
    }

    .ukvd-cp-selected-package-info-table tbody tr {
        border-bottom: 1px dashed #7e7676;
    }

    .ukvd-cp-selected-package-info-table tbody td {
        color: #fff;
        padding: 10px;
    }

/* ------------------------------------------------------------ */
/* Manage the height of the Quick Lookup Tab View */
/* ------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
    .cp-quicklookup-tab-height {
        height: 600px;
    }

    .cp-quicklookup-content-height {
        height: 419px !important;
    }
}

@media only screen and (min-width: 600px) {
    .cp-quicklookup-tab-height {
        height: 650px;
    }

    .cp-quicklookup-content-height {
        height: 477px !important;
    }
}

@media only screen and (min-width: 768px) {
    .cp-quicklookup-tab-height {
        height: 700px;
    }

    .cp-quicklookup-content-height {
        height: 527px !important;
    }
}

@media only screen and (min-width: 992px) {
    .cp-quicklookup-tab-height {
        height: 750px;
    }

    .cp-quicklookup-content-height {
        height: 580px !important;
    }
}

@media only screen and (min-width: 1200px) {
    .cp-quicklookup-tab-height {
        height: 800px;
    }

    .cp-quicklookup-content-height {
        height: 664px !important;
    }
}
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* Override Radzen Dialog Mask */
/* ------------------------------------------------------------ */
.rz-dialog-mask {
    background-color: var(--ukvd-dialogue-overlay-color) !important;
    opacity: var(--ukvd-dialogue-overlay-opacity) !important;
}

.ukvd-dashed-separator-line {
    border-top: 1px dashed var(--ukvd-dashed-separator-line-colour);
    border-left: none;
    border-bottom: none;
    border-right: none;
}

.ukvd-solid-separator-line {
    border-top: 1px solid var(--ukvd-solid-line-colour);
    border-left: none;
    border-bottom: none;
    border-right: none;
}

hr.thin-dotted {
    border-top: 1px dashed var(--ukvd-thin-dotted-colour);
    border-left: none;
    border-bottom: none;
    border-right: none;
}

.cp-text-null {
    color: var(--ukvd-cp-text-null);
}

.cp-text-transparent {
    color: var(--ukvd-cp-text-transparent-colour);
}

.cp-read-only {
    color: var(--ukvd-cp-read-only);
}

.cp-no-access {
    color: var(--ukvd-cp-no-access);
}

.cp-text-blue {
    color: var(--ukvd-cp-blue-clean);
}

.cp-text-black {
    color: var(--ukvd-colour-black) !important;
}

.cp-text-white {
    color: var(--ukvd-colour-white) !important;
}

.cp-text-force-white {
    color: var(--ukvd-colour-force-white) !important;
}

.cp-text-force-black {
    color: var(--ukvd-colour-force-black) !important;
}

.cp-text-green {
    color: var(--ukvd-cp-success);
}

.cp-text-amber {
    color: var(--ukvd-cp-amber);
}

.cp-text-error {
    color: var(--ukvd-cp-error);
}

.cp-text-grey-light {
    color: var(--ukvd-cp-light-grey);
}

.cp-text-grey-mid {
    color: var(--ukvd-cp-mid-grey);
}

.cp-text-grey-dark {
    color: var(--ukvd-cp-dark-grey);
}

.cp-text-grey-dark2 {
    color: var(--ukvd-cp-dark-grey2);
}

.cp-text-processing {
    color: var(--ukvd-cp-processing) !important;
}

.cp-text-live {
    color: var(--ukvd-cp-api-key-live);
}

.cp-text-trial {
    color: var(--ukvd-cp-api-key-trial);
}

.cp-text-left {
    text-align: left
}

.cp-text-centre {
    text-align: center;
}

.cp-text-right {
    text-align: right
}

.cp-body-basic-max-width {
    max-width: 80%;
}

.bold100 {
    font-weight: 100 !important;
}

.bold200 {
    font-weight: 200 !important;
}

.bold300 {
    font-weight: 300 !important;
}

.bold400 {
    font-weight: 400 !important;
}

.bold500 {
    font-weight: 500 !important;
}

.bold600 {
    font-weight: 600 !important;
}

.bold700 {
    font-weight: 700 !important;
}

.bold800 {
    font-weight: 800 !important;
}

.bold900 {
    font-weight: 900 !important;
}

.ukvd-cp-table-basic {
    white-space: nowrap;
    font-size: 0.8rem;
}

.wrap-on {
    white-space: normal;
}

.wrap-off {
    white-space: nowrap;
}

.wrap-break-all {
    word-break: break-all;
}

a.cp-text-white {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 3px 1px;
}

    a.cp-text-white:link {
        color: var(--ukvd-colour-white);
    }

    a.cp-text-white:hover {
        color: #e4ff00;
        border-bottom: 1px solid;
        text-decoration: none;
    }

    a.cp-text-white:active {
        color: var(--ukvd-colour-white);
    }

a.cp-text-white-plain {
    outline: none;
    color: var(--ukvd-colour-white);
    text-decoration: none;
}

    a.cp-text-white-plain:link {
        color: var(--ukvd-colour-white);
        text-decoration: none;
    }

    a.cp-text-white-plain:hover {
        color: var(--ukvd-colour-white);
        text-decoration: none;
    }

    a .cp-text-white-plain:visited {
        color: var(--ukvd-colour-white);
        text-decoration: none;
    }

    a.cp-text-white-plain:active {
        color: var(--ukvd-colour-white);
        text-decoration: none;
    }

/*----------------------------------------------------------*/
/* Custom Radio & check box buttons (for dark bg)
/*----------------------------------------------------------*/
#ukvd-vin-agreement-radios {
}

    #ukvd-vin-agreement-radios .rz-radiobutton-box {
        /*background-color: var(--ukvd-vin-agree-radio-off-bg);*/
        /*border: var(--rz-border-width) solid var(--ukvd-vin-agree-radio-off-border);*/
    }

        #ukvd-vin-agreement-radios .rz-radiobutton-box.rz-state-active {
            background-color: var(--ukvd-vin-agree-radio-on-bg);
            border-color: var(--ukvd-vin-agree-radio-on-border);
        }

        #ukvd-vin-agreement-radios .rz-radiobutton-box .rzi-circle-on {
            background-color: var(--ukvd-vin-radio-circle-background-on);
        }

    #ukvd-vin-agreement-radios .#ukvd-vin-agreement-radios .rz-radiobutton-box:hover:not(.rz-state-disabled) {
        background-color: var(--ukvd-vin-agree-radio-hover-bg);
        border-color: var(--ukvd-vin-agree-radio-hover-border);
    }

.rz-radio-button-list-horizontal {
    line-height: 1.6rem;
}

/*----------------------------------------------------------*/
/* Table / Grid Cells*/
/*----------------------------------------------------------*/
.ukvd-grid-cell-main-enabled-on {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--ukvd-cp-dark-grey2);
}

.ukvd-grid-cell-main-enabled-off {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ukvd-cp-dark-grey);
}

.ukvd-grid-cell-main-disabled {
    font-size: 0.84rem;
    font-weight: 300;
    color: var(--ukvd-cp-mid-grey);
    text-decoration: none;
    /*text-decoration: line-through;*/
}

.ukvd-grid-cell-mini-enabled-on {
    font-size: 0.79rem;
    font-weight: 800;
    color: var(--ukvd-cp-dark-grey2);
}

.ukvd-grid-cell-mini-enabled-off {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--ukvd-cp-dark-grey);
}

.ukvd-grid-cell-mini-disabled {
    font-size: 0.74rem;
    font-weight: 300;
    color: var(--ukvd-cp-mid-grey);
    text-decoration: none;
    /*text-decoration: line-through;*/
}
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/* Invoice Intent styling */
/*----------------------------------------------------------*/
.ukvd-invoice-cell-info-value {
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.ukvd-invoice-cell-info-value-total {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.ukvd-invoice-cell-info-mini {
    font-size: 0.67rem;
    font-weight: 400;
    color: var(--ukvd-cp-mid-grey);
    text-decoration: none;
}

.ukvd-invoice-cell-info-total {
    border-top: 1px dashed #d5d5d5;
}

.ukvd-invoice-transaction-pill-credit {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-transaction-credit) !important;
    margin-block: auto;
}

.ukvd-invoice-transaction-pill-subscription {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-transaction-subscription) !important;
    margin-block: auto;
}

.ukvd-invoice-transaction-pill-payment {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-transaction-payment) !important;
    margin-block: auto;
}

.ukvd-invoice-transaction-pill-adhoc {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-transaction-adhoc) !important;
    margin-block: auto;
}

.ukvd-invoice-transaction-pill-unlimited-sub {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-transaction-unlimited-sub) !important;
    margin-block: auto;
}

.ukvd-invoice-transaction-other {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-transaction-other) !important;
    margin-block: auto;
}

.ukvd-invoice-status-pending {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-invoice-status-pending) !important;
    margin-block: auto;
}

.ukvd-invoice-status-ready {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-invoice-status-ready) !important;
    margin-block: auto;
}

.ukvd-invoice-status-accounted {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-invoice-status-accounted) !important;
    margin-block: auto;
}

.ukvd-invoice-status-cancelled {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-invoice-status-cancelled) !important;
    margin-block: auto;
}

.ukvd-invoice-status-other {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-invoice-status-other) !important;
    margin-block: auto;
}

.ukvd-invoice-payment-banking-only {
    color: var(--ukvd-cp-invoice-payment-banking-only) !important;
}

.ukvd-invoice-payment-taken {
    Color: var(--ukvd-cp-invoice-payment-taken) !important;
}

.ukvd-invoice-payment-refunded {
    color: var(--ukvd-cp-invoice-payment-refunded) !important;
}

.ukvd-invoice-payment-failed {
    color: var(--ukvd-cp-invoice-payment-failed) !important;
}

.ukvd-invoice-payment-unpaid {
    color: var(--ukvd-cp-invoice-payment-unpaid) !important;
}

.ukvd-invoice-payment-other {
    color: var(--ukvd-cp-invoice-payment-other) !important;
}

.ukvd-invoice-show-button {
    width: 100%;
    border-radius: 18px !important;
    background-color: #f7f7f7 !important;
    color: #4f4f50 !important;
    border: 1px solid #b6b6b6 !important;
    font-size: 0.8rem !important;
}

.ukvd-receipt-show-button {
    width: 100%;
    border-radius: 18px !important;
    background-color: #dbe9ff !important;
    color: #4f4f50 !important;
    border: 1px solid #b6b6b6 !important;
    font-size: 0.8rem !important;
}

.ukvd-credit-show-button {
    width: 100%;
    border-radius: 18px !important;
    background-color: #d0ffb9 !important;
    color: #4f4f50 !important;
    border: 1px solid #b6b6b6 !important;
    font-size: 0.8rem !important;
}

.ukvd-refund-show-button {
    width: 100%;
    border-radius: 18px !important;
    background-color: #e8fdec !important;
    color: #4f4f50 !important;
    border: 1px solid #b6b6b6 !important;
    font-size: 0.8rem !important;
}

.ukvd-cp-description-additional-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ukvd-invoice-grid-additional-text-colour);
}

.ukvd-cp-invoice-status-text {
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--ukvd-invoice-grid-mini-text-colour);
}

.ukvd-cp-invoice-status-text-mini {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ukvd-cp-dark-grey);
}

.ukvd-cp-invoice-status-sub-text {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ukvd-cp-dark-grey);
}

.ukvd-cp-mini-info-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ukvd-cp-dark-grey);
}

.ukvd-cp-invoice-view-button-text {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--ukvd-cp-dark-grey);
}

/*----------------------------------------------------------*/


.ukvd-apikey-sandbox-info-panel {
    background-color: var(--ukvd-apikey-sandbox-panel-colour) !important;
    color: var(--ukvd-apikey-sandbox-panel-text);
    border: var(--ukvd-apikey-sandbox-panel-border);
}

.ukvd-apikey-live-info-panel {
    background-color: var(--ukvd-apikey-live-panel-colour) !important;
    color: var(--ukvd-apikey-live-panel-text);
    border: var(--ukvd-apikey-live-panel-border);
}

/*----------------------------------------------------------*/

.ukvd-disabled-RadzenTextBox {
    opacity: 1.0 !important;
}

.ukvd-table-summary-emphasised {
    font-family: var(--font-root-body), Helvetica, Arial, sans-serif !important;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.4rem !important;
}

.ukvd-vertical-panel-separator {
    width: 0.3rem;
    background-color: var(--ukvd-vertical-panel-separator-color);
    height: 41%;
    /* position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);*/
}

.ukvd-panel-container {
    display: flex;
    align-items: center; /* Vertically center all content */
    position: relative;
}

    .ukvd-panel-container::before {
        content: '';
        width: 1px;
        background-color: var(--ukvd-vertical-panel-separator-color);
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

.ukvd-panel {
    flex: 1; /* Ensure both columns take equal space */
}

.ukvd-panel-position-relative {
    position: relative;
}

.ukvd-summary-panel-card-header {
    background-color: var(--ukvd-summary-panel-card-header-color);
    color: white;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    border: var(--ukvd-summary-panel-card-header-border);
}

    .ukvd-summary-panel-card-header p {
        color: white;
    }

.red-hat-font {
    /*font-family: 'Chathura', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;*/
    /*font-weight: 300 !important;*/
}

.ukvd-cp-table-basic td {
    padding-bottom: 7px;
    padding-right: 15px;
    vertical-align: baseline;
}

a.ui-button:hover {
    color: #fff;
    text-decoration: none;
}

.rz-switch.rz-switch-checked .rz-switch-circle {
    background-color: var(--ukvd-cp-success) !important;
}

.cp-zero-margins {
    margin: 0px;
}


.ukvd-cp-grey-line {
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: #d9d9d9;
}


.ukvd-cp-info-extra-mini-top {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 0;
}

.ukvd-cp-info-extra-mini {
    font-weight: 400;
    font-size: 0.70rem;
}

.ukvd-cp-info-extra-mini-x2 {
    font-weight: 400;
    font-size: 0.65rem;
}

.ukvd-cp-info-large1 {
    font-family: var(--font-extra-large);
    font-weight: 700;
    font-size: 2.0rem;
    margin-top: -12px;
}

.ukvd-cp-info-large2 {
    font-family: var(--font-extra-large);
    font-weight: 700;
    font-size: 3.0rem;
    margin-top: -12px;
}

.ukvd-cp-info-extra-large {
    font-family: var(--font-extra-large);
    font-weight: 800;
    font-size: 4.0rem;
    margin-top: -12px;
}

.ukvd-cp-currency-main-large {
    font-family: var(--font-extra-large);
    font-weight: 800;
    font-size: 3.4rem;
    color: var(--ukvd-cp-currency-large-text);
}

.ukvd-cp-currency-main-fraction {
    font-family: var(--font-extra-large);
    font-weight: 700;
    font-size: 1.2rem;
    padding-top: 13px;
    padding-left: 4px;
    color: var(--ukvd-cp-currency-fraction-text);
}

@media (min-width: 320px) and (max-width: 480px) {
    .ukvd-cp-currency-main-large {
        font-size: 2.1rem;
    }

    .ukvd-cp-currency-main-fraction {
        font-size: 0.65rem;
    }
}

@media (min-width: 481px) and (max-width: 960px) {
    .ukvd-cp-currency-main-large {
        font-size: 2.5rem;
    }

    .ukvd-cp-currency-main-fraction {
        font-size: 0.8rem;
    }
}

.ukvd-cp-info-read-large {
    font-family: var(--font-extra-large);
    font-weight: 500;
    font-size: 1.3rem;
}

.ukvd-cp-info-read-container {
    background-color: #efefef;
    padding: 11px;
    border-radius: 12px;
}

.ukvd-cp-account-upgrade-header {
    height: 4.5rem;
    background-color: var(--ukvd-account-upgrade-info-header-color);
    padding: 17px;
    border-radius: 0.7rem 0.7rem 0rem 0rem;
    color: var(--ukvd-colour-white);
    border: var(--ukvd-account-upgrade-info-border);
}

.ukvd-cp-top-up-tier-heading {
    font-family: var(--font-extra-large);
    font-weight: 900;
    font-size: 1.0rem;
}

.ukvd-cp-top-up-tier-price-gbp {
    font-family: var(--font-extra-large);
    font-weight: 900;
    font-size: 1.65rem;
}

.ukvd-cp-p-mini {
    font-size: 0.75rem;
}

.ukvd-cp-p-mini-italic {
    font-size: 0.75rem;
    font-style: italic;
}

.ukvd-cp-p-mini-extra {
    font-size: 0.68rem;
}


@media (max-width: 576px) {
    .ukvd-cp-p-mini {
        font-size: 0.68rem;
    }

    .ukvd-cp-p-mini-italic {
        font-size: 0.68rem;
        font-style: italic;
    }

    .ukvd-cp-p-mini-extra {
        font-size: 0.61rem;
    }
}


.ukvd-cp-information-icon {
    font-size: 2.4rem !important;
    color: var(--ukvd-cp-help-icon);
    margin-right: 13px;
    font-variation-settings: 'FILL' 0 !important;
}

.ukvd-cp-mini-information-icon {
    font-size: 1.4rem !important;
    margin-right: 8px;
    margin-top: -2px;
    color: var(--ukvd-cp-help-icon);
    font-variation-settings: 'FILL' 0 !important;
}

.ukvd-cp-information-icon-white {
    font-size: 2.4rem !important;
    color: var(--ukvd-colour-white);
    margin-right: 13px;
}


.ukvd-cp-payment-success-icon {
    font-size: 5.5rem !important;
    color: var(--ukvd-cp-success);
}


.rz-button:hover {
    filter: brightness(0.85);
}

.ukvd-address-basic-headline {
    padding-top: 24px;
}

.ukvd-basic-pages-info-heading {
    margin-bottom: 2px
}

.page-header-section {
    display: flex;
}

.page-header-icon {
    display: flex !important;
    padding-top: 8px;
    font-size: 2.1rem !important;
    padding-right: 14px;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ukvd-cp-default-blue);
    width: 1em;
}

.page-header-icon-svg {
    display: block;
    position: relative;
    top: -11px;
    padding-top: -3px;
    font-size: 4rem !important;
    color: var(--ukvd-cp-default-blue);
    width: 1em;
}

.page-header-vdicheck-logo-container {
    float: right;
    right: 0px;
    position: absolute;
}

.page-header-vdicheck-logo {
    display: block;
    position: relative;
    top: -5px;
    font-size: 4rem !important;
    width: 3em;
}

@media (max-width: 576px) {
    .page-header-vdicheck-logo {
        display: none;
    }
}

.page-header-h1 {
    font-family: var(--font-h-headings);
    font-weight: 900;
    color: var(--ukvd-cp-page-header);
}

.page-description-p {
    font-weight: 300;
    line-height: 1.6em !important;
    color: var(--ukvd-cp-sub-text-grey);
}

@media (max-width: 768px) {
    .page-header-h1 {
        font-size: 1.75rem;
        padding-top: 4px;
        padding-bottom: 0px;
    }

    .page-description-p {
        font-size: 0.92rem;
    }
}

@media (max-width: 576px) {
    .page-header-h1 {
        font-size: 1.45rem;
        padding-top: 8px;
        padding-bottom: 0px;
    }

    .page-description-p {
        font-size: 0.84rem;
    }
}

.page-header-disabled-tag {
    display: flex;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-disabled);
    color: var(--ukvd-colour-white);
    margin-left: auto;
    height: 28px;
    border-radius: 18px;
}

.page-header-enabled-tag {
    display: flex;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-success);
    color: var(--ukvd-colour-force-white);
    margin-left: auto;
    height: 28px;
    border-radius: 18px;
}

.page-header-beta-tag {
    display: flex;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-beta);
    color: var(--ukvd-colour-force-white);
    margin-left: 12px;
    height: 28px;
    border-radius: 18px;
}

.page-header-new-tag {
    display: flex;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-new);
    color: var(--ukvd-colour-force-white);
    margin-left: 12px;
    height: 28px;
    border-radius: 18px;
    margin-top: 4px;
}


.ukvd-cp-pill-enabled {
    display: flex;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-success);
    color: var(--ukvd-colour-force-white);
    margin-left: 12px;
    height: 28px;
    border-radius: 18px;
}

.ukvd-cp-pill-disabled {
    display: flex;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-disabled);
    color: var(--ukvd-colour-force-white);
    margin-left: 12px;
    height: 28px;
    border-radius: 18px;
}


.ukvd-cp-dropdown-menu {
    width: 100%;
    background-color: var(--ukvd-cp-dropdown-bg) !important;
    font-weight: 600;
}

.ukvd-cp-text-input-area {
    width: 100%;
    background-color: var(--ukvd-cp-dropdown-bg) !important;
    font-weight: 600;
}

.ukvd-cp-disabled-text-box-highlighted {
    width: 100%;
    font-weight: 600;
    color: black;
    border: solid 1px lightgrey;
    padding: 4px;
    border-radius: 3px;
}


/* ------------------------------------------------------------------------------------------------------------ */
/*  VDI Check Warnings Lozenges */
/* ------------------------------------------------------------------------------------------------------------ */
.cp-vdi-warn-True {
    font-size: 0.8rem;
    font-weight: 400;
    padding: 3px;
    border-radius: 5px;
    color: white;
    width: 22px;
    min-width: 22px;
    text-align: center;
    margin-right: 3px;
    background-color: var(--ukvd-cp-error);
}

.cp-vdi-warn-False {
    font-size: 0.8rem;
    font-weight: 400;
    padding: 3px;
    border-radius: 5px;
    color: white;
    width: 22px;
    min-width: 22px;
    text-align: center;
    margin-right: 3px;
    background-color: var(--ukvd-cp-light-grey);
}

/* ------------------------------------------------------------------------------------------------------------ */
/*  VRM in Grid/Table */
/* ------------------------------------------------------------------------------------------------------------ */
.cp-vrm-within-grid {
    text-align: center;
    font-family: var(--font-vrm-in-grid);
    width: 100%;
    max-width: 120px;
    height: 1.9rem;
    margin-right: 10px;
    line-height: 1.9rem;
    color: var(--ukvd-cp-vrm-text);
    font-size: 1.1rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vrm-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vrm-bg);
}

/* ------------------------------------------------------------------------------------------------------------ */
/*  Fozen Grid Cell - override */
/* ------------------------------------------------------------------------------------------------------------ */
.rz-frozen-cell {
    /*background: #e7fbff !important;*/
}

/* ------------------------------------------------------------------------------------------------------------ */
/*  Notification - success - override */
/* ------------------------------------------------------------------------------------------------------------ */
.rz-growl-message-success .rz-growl-item {
    background: var(--ukvd-cp-success) !important;
}
/* ------------------------------------------------------------------------------------------------------------ */
/*  Buttons within Grid - override */
/* ------------------------------------------------------------------------------------------------------------ */
#cp-button-within-grid .rz-button {
    padding: 3px;
}

#cp-button-within-grid .rz-button-icon-left {
    font-size: 1rem;
}



/* ------------------------------------------------------------------------------------------------------------ */
/*  Header - mini info details */
/* ------------------------------------------------------------------------------------------------------------ */
.cp-header-signedin-label {
    font-size: 0.7rem;
    font-weight: 300;
    padding-left: 10px;
    color: #939393;
}

.cp-header-company-info-label {
    color: #ffffffb3;
    font-family: 'Open Sans';
    font-weight: 100;
    font-size: 0.76rem;
    padding-right: 14px;
}

.cp-header-mini-info-title {
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--ukvd-header-mini-info-title);
    border-right: 1px solid #415060;
    padding-right: 8px;
}

.cp-header-mini-info-content {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ukvd-header-mini-info-title);
    padding-left: 8px;
}

    .cp-header-mini-info-content a:hover {
        color: var(--nav-menu-sub-header-hover-text);
        text-decoration: none;
    }

.cp-header-mini-force-right {
    position: absolute;
    right: 10px;
}

.cp-a-hover-none a:hover {
    text-decoration: none;
}

.cp-header-trial-account-details-base {
    background-color: var(--ukvd-trial-account-heading);
    /* background-color: #161d26; */
    /* background-image: linear-gradient(to bottom, #06080a, #161d26); */
    border-bottom: 4px solid var(--ukvd-trial-account-stroke);
    /* border-top: 1px solid #303945;*/
}

    .cp-header-trial-account-details-base p {
        color: var(--ukvd-colour-force-white) !important;
    }

.cp-header-trial-account-text {
    font-size: 1.0rem;
    font-weight: 600;
}

@media (max-width: 990px) {
    .cp-header-trial-account-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 767px) {
    .cp-header-trial-account-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .cp-header-trial-account-text {
        font-size: 0.9rem;
    }
}





/* ------------------------------------------------------------------------------------------------------------ */
/*  Header */
/* ------------------------------------------------------------------------------------------------------------ */
.cp-header-impersonate-container {
    background-color: var(--ukvd-cp-impersonate-warn);
    background-image: linear-gradient(to right, var(--ukvd-cp-impersonate-grad1), var(--ukvd-cp-impersonate-grad2));
    height: 73px;
    /*border-bottom: 2px solid #4e0718 !important;*/
    /*box-shadow: 0px 4px 5px 0px #212830;*/
}

    .cp-header-impersonate-container h3 {
        color: var(--ukvd-colour-white);
        /*display: contents;*/
    }

    .cp-header-impersonate-container p {
        color: var(--ukvd-colour-white);
        font-size: 0.85rem;
        /*display: contents;*/
    }

    .cp-header-impersonate-container td {
        color: var(--ukvd-colour-white);
        font-size: 0.80rem;
        white-space: nowrap;
    }

.impersonate-strong {
    font-weight: 600;
    padding-right: 13px;
}

.cp-header-impersonate-warn-icon {
    font-size: 3.3rem !important;
    color: var(--ukvd-colour-white);
}



.cp-header-impersonate-on {
    height: 167px !important
}


.header {
    background-color: var(--ukvd-cp-headerShade1) !important;
    min-height: 3.125rem;
    border-bottom: 0px !important;
    color: var(--ukvd-colour-white);
    box-shadow: 0 6px 9px 0 rgb(0 0 0 / 37%) !important;
}

.sidebar-toggle {
    background-color: var(--ukvd-cp-headerShade1) !important;
    border-right: 1px solid #3f4b5a !important;
    color: var(--ukvd-colour-white) !important;
}


.ukvd-cp-header-ukvdlogo-left {
    height: 49px;
}

.ukvd-cp-header-cplogo-left {
    height: 39px;
    border-left: 1px solid #3f4b5a;
    padding-left: 12px;
}

.ukvd-cp-header-top-bg {
    background-color: var(--ukvd-cp-headerShade1);
}

.ukvd-cp-header-top-sub-bg {
    background-color: var(--ukvd-cp-headerShade2);
}

.ukvd-cp-header-base-bg {
    background-color: var(--ukvd-cp-headerShade2);
    height: 28px;
}

.ukvd-cp-header-left-base-bg {
    background-color: var(--ukvd-cp-headerShade3);
    width: 295px;
    height: 28px;
}

.ukvd-cp-header-left-base-text {
    color: #b9b9b9;
    font-size: 0.7rem;
    text-align: center;
    padding-top: 6px;
    padding-left: 80px;
}

.ukvd-cp-card-dark {
    background-color: var(--ukvd-cp-headerShade1) !important;
}

.ukvd-nav-find-section-styling {
    padding: 1rem;
    background-color: var(--ukvd-nav-menu-search-background);
    border-bottom: 1px solid var(--ukvd-nav-menu-search-border);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* VDGL Report Styling */
/* ------------------------------------------------------------------------------------------------------------ */

.ukvd-report-totals-cell {
    font-size: 0.83rem;
    font-weight: 600;
}

.ukvd-report-totals-this-day-cell {
    font-size: 0.87rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .ukvd-report-totals-cell {
        font-size: 0.8rem;
        font-weight: 600;
    }

    .ukvd-report-totals-this-day-cell {
        font-size: 0.87rem;
        font-weight: 700;
    }
}

@media (max-width: 576px) {
    .ukvd-report-totals-cell {
        font-size: 0.7rem;
        font-weight: 600;
    }

    .ukvd-report-totals-this-day-cell {
        font-size: 0.87rem;
        font-weight: 700;
    }
}

/* ------------------------------------------------------------------------------------------------------------ */
/* VDGL Office Hours Table */
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-office-hours-table {
    border: solid 1px var(--cp-text-transparent); /*var(--ukvd-cp-light-grey);*/
    border-collapse: collapse;
    border-spacing: 0;
    font: var(--font-h-headings);
}

    .ukvd-office-hours-table thead th {
        background-color: var(--ukvd-cp-light-grey);
        border: solid 1px var(--cp-text-transparent); /*var(--ukvd-cp-light-grey);*/
        color: var(--ukvd-colour-black);
        padding: 10px;
        text-align: left;
    }

    .ukvd-office-hours-table tbody td {
        border: solid 1px var(--cp-text-transparent); /*var(--ukvd-cp-light-grey);*/
        color: #333;
        padding: 10px;
    }

.ukvd-office-hours-table-window {
    border: solid 1px var(--cp-text-transparent); /*var(--ukvd-cp-light-grey);*/
    border-collapse: collapse;
    border-spacing: 0;
    font: var(--font-h-headings);
}

    .ukvd-office-hours-table-window thead th {
        background-color: var(--ukvd-cp-light-grey);
        border: solid 1px var(--cp-text-transparent); /*var(--ukvd-cp-light-grey);*/
        color: var(--ukvd-colour-black);
        padding: 10px;
        text-align: left;
    }

    .ukvd-office-hours-table-window tbody td {
        border: solid 1px var(--cp-text-transparent); /*var(--ukvd-cp-light-grey);*/
        color: #333;
        padding: 1px;
    }

/* ------------------------------------------------------------------------------------------------------------ */
/* VDGL Basic Receipt View Table */
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-basic-receipt-table {
    border: solid 1px var(--ukvd-cp-light-grey);
    border-collapse: collapse;
    border-spacing: 0;
    font: var(--font-h-headings);
}

    .ukvd-basic-receipt-table thead th {
        background-color: var(--ukvd-cp-light-grey);
        border: solid 1px var(--ukvd-cp-mid-grey);
        color: var(--ukvd-colour-black);
        padding: 10px;
        text-align: left;
    }

    .ukvd-basic-receipt-table tbody td {
        border: solid 1px var(--ukvd-cp-light-grey);
        color: #333;
        padding: 10px;
    }

/* ------------------------------------------------------------------------------------------------------------ */
/* Nav Headers */
/* ------------------------------------------------------------------------------------------------------------ */
/* Nav Header - Default */
.rz-panel-menu .rz-navigation-item-wrapper {
    background-color: var(--nav-menu-header) !important;
}

    .rz-panel-menu .rz-navigation-item-wrapper .rz-navigation-item-link .rz-navigation-item-icon {
        color: var(--nav-menu-header-icon) !important;
    }

    .rz-panel-menu .rz-navigation-item-wrapper .rz-navigation-item-link .rz-navigation-item-text {
        font-size: 0.85rem;
        font-weight: 600 !important;
        color: var(--nav-menu-header-text) !important;
    }

    /* Nav Header - Hover */
    .rz-panel-menu .rz-navigation-item-wrapper:hover {
        background-color: var(--nav-menu-header-hover) !important;
    }

        .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text {
            color: var(--nav-menu-header-hover-text) !important;
        }

        .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
            color: var(--nav-menu-header-hover-icon) !important;
        }

/* Nav Header - Active */
.rz-navigation-item-link .rz-navigation-item-link-active {
    background-color: var(--nav-menu-header-active) !important;
}
/* ------------------------------------------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------------------------------------------ */
/* Nav Sub Header */
/* ------------------------------------------------------------------------------------------------------------ */
/* Nav Sub Header - Default */
.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: var(--nav-menu-sub-header) !important;
}

.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon {
    color: var(--nav-menu-sub-header-icon) !important;
}

.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link {
    color: var(--nav-menu-sub-header-text) !important;
    font-size: 0.85rem;
    font-weight: 400 !important;
}

.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu span.rz-navigation-item-text {
    color: var(--nav-menu-sub-header-text) !important;
    font-size: 0.85rem;
    font-weight: 400 !important;
}

/* ------------------------------------------------------------------------------------------------------------ */

/* Nav Sub Header - Hover */
.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--nav-menu-sub-header-hover) !important;
    transition: var(--rz-menu-item-transition);
}

    .ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
        color: var(--nav-menu-sub-header-hover-text) !important;
        font-size: 0.92rem;
        font-weight: 500 !important;
    }

    .ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover span.rz-navigation-item-text {
        color: var(--nav-menu-sub-header-hover-text) !important;
        font-size: 0.92rem;
        font-weight: 500 !important;
    }

    .ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
        color: var(--nav-menu-sub-header-hover-icon) !important;
    }
/* ------------------------------------------------------------------------------------------------------------ */

/* Nav Sub Header - Active */
.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: var(--nav-menu-sub-header-active) !important;
}

    .ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link {
        color: var(--nav-menu-sub-header-active-text) !important;
        font-size: 0.85rem;
        font-weight: 500 !important;
    }

    .ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active span.rz-navigation-item-text {
        color: var(--nav-menu-sub-header-active-text) !important;
        font-size: 0.85rem;
        font-weight: 500 !important;
    }

    .ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: var(--nav-menu-sub-header-active-icon) !important;
    }

/* Activated Nav Menu - Side Bar */
.rz-panel-menu .rz-navigation-item-active:before, .rz-panel-menu .rz-navigation-item-wrapper-active:before {
    background-color: var(--activate-menu-bar) !important;
}

.rz-sidebar {
    width: 300px !important;
    /*width: var(--ukvd-side-nav-menu-width) !important;*/
    overflow: hidden !important;
}

    .rz-sidebar:hover {
        overflow-y: auto !important;
    }

.rz-sidebar-expanded {
    width: 300px !important;
    /*width: var(--ukvd-side-nav-menu-width) !important;*/
}

.menu-footer-text {
    padding-top: 23px;
    color: var(--ukvd-colour-white);
}

.menu-base-separator {
    display: block;
    width: 100%;
    height: 1px;
    padding-top: 1px;
    padding-bottom: 0px;
    background-color: #7a7a7a;
    margin-bottom: 22px
}
/* ------------------------------------------------------------------------------------------------------------ */
/* Sidebar Search Inputbox */
#nav-menu-search-box {
    width: 100%;
    height: 2.25rem;
    line-height: 1.429;
    color: var(--nav-search-box-text-search-color);
    font-size: 0.875rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--nav-search-box-border-color);
    border-radius: 4px;
    box-shadow: none;
    background-color: var(--nav-search-box-background-color);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Quick Search Inputbox */
.ukvd-cp-header-quick-search-container {
    display: flex;
}

#quick-search-vin-box {
    text-align: center;
    font-family: var(--font-quick-search);
    max-width: 144px;
    height: 2.25rem;
    margin-right: 10px;
    line-height: 1.429;
    color: var(--ukvd-cp-vrm-text);
    font-size: 1.1rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vin-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vin-bg);
}

#quick-search-vrm-box {
    text-align: center;
    font-family: var(--font-quick-search);
    max-width: 144px;
    height: 2.25rem;
    margin-right: 10px;
    line-height: 1.429;
    color: var(--ukvd-cp-vrm-text);
    font-size: 1.4rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vrm-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vrm-bg);
}

    #quick-search-vrm-box::placeholder {
        color: var(--ukvd-cp-vrm-placeholder);
    }

#quick-search-postcode-box {
    text-align: center;
    font-family: var(--font-quick-search-postcode);
    max-width: 144px;
    height: 2.25rem;
    margin-right: 10px;
    line-height: 1.429;
    color: var(--ukvd-cp-postcode-text);
    font-size: 1.4rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-postcode-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-postcode-bg);
}

    #quick-search-postcode-box::placeholder {
        color: var(--ukvd-cp-postcode-placeholder);
    }



/* ------------------------------------------------------------------------------------------------------------ */
/* Demo VRM styling */
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-demo-vrm {
    text-align: center;
    font-family: var(--font-vrm);
    max-width: 164px;
    min-width: 126px;
    height: 2.25rem;
    line-height: 36px;
    color: var(--ukvd-cp-vrm-text);
    font-size: 1.2rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vrm-border);
    border-radius: 7px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vrm-bg);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Quick Search VRM - Inputbox */
/* ------------------------------------------------------------------------------------------------------------ */
#ukvd-cp-quick-search-vrm-box {
    text-align: center;
    font-family: var(--font-vrm);
    width: 100%;
    height: 74px;
    color: var(--ukvd-cp-vrm-text);
    font-size: 2.8rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vrm-border);
    border-radius: 13px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vrm-bg);
}

    #ukvd-cp-quick-search-vrm-box::placeholder {
        color: var(--ukvd-cp-vrm-placeholder);
        font-size: 2.4rem;
    }
/* ------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------ */
/* Quick Search VIN - Inputbox */
/* ------------------------------------------------------------------------------------------------------------ */
/* Wrapper positioning */
.ukvd-cp-vin-input-wrapper {
    position: relative;
    width: 100%;
}

/* Make the actual input transparent but keep it functional */
.ukvd-cp-vin-input-transparent {
    text-align: center;
    font-family: var(--font-vin);
    font-weight: var(--ukvd-vin-entry-font-weight);
    text-transform: uppercase;
    width: 100%;
    height: 74px;
    font-size: 35px;
    font-size: 2.1vw;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vin-border);
    border-radius: 13px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vin-bg);
    color: transparent; /* Hide the actual text */
    caret-color: var(--ukvd-cp-vin-text); /* Keep cursor visible */
}

.ukvd-cp-vin-input-transparent::placeholder {
    color: transparent; /* Hide default placeholder */
}

/* Overlay that shows colored text */
.ukvd-cp-vin-display-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allow clicks to pass through to input */
    font-family: var(--font-vin);
    font-weight: var(--ukvd-vin-entry-font-weight);
    text-transform: uppercase;
    font-size: 35px;
    font-size: 2.1vw;
}

.ukvd-cp-vin-char {
    display: inline-block;
}

.ukvd-cp-vin-digit {
    color: var(--ukvd-cp-vin-digit);
}

.ukvd-cp-vin-letter {
    color: var(--ukvd-cp-vin-text);
}

.ukvd-cp-vin-placeholder {
    color: var(--ukvd-cp-vin-placeholder);
}

/* Handle focus state */
#ukvd-cp-quick-search-vin-box:focus {
    border-color: var(--ukvd-cp-vin-border-focus, var(--ukvd-cp-vin-border));
}

#ukvd-cp-quick-search-vin-box {
    text-align: center;
    font-family: var(--font-vin);
    font-weight: var(--ukvd-vin-entry-font-weight);
    text-transform: uppercase;
    width: 100%;
    height: 74px;
    color: var(--ukvd-cp-vin-text);
    font-size: 35px;
    font-size: 2.1vw;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-vin-border);
    border-radius: 13px;
    box-shadow: none;
    background-color: var(--ukvd-cp-vin-bg);
}

#ukvd-cp-quick-search-vin-box::placeholder {
    color: var(--ukvd-cp-vin-placeholder);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Quick Search Postcode - Inputbox */
/* ------------------------------------------------------------------------------------------------------------ */
#ukvd-cp-quick-search-postcode-box {
    text-align: center;
    font-family: var(--font-quick-search-postcode);
    width: 100%;
    height: 74px;
    color: var(--ukvd-cp-postcode-text);
    font-size: 1.9rem;
    transition: all 0.1s linear;
    outline: none;
    border: 1px solid var(--ukvd-cp-postcode-border);
    border-radius: 13px;
    box-shadow: none;
    background-color: var(--ukvd-cp-postcode-bg);
}

#ukvd-cp-quick-search-postcode-box::placeholder {
    color: var(--ukvd-cp-postcode-placeholder);
    font-size: 1.9rem;
    padding-bottom: 26px;
    line-height: normal;
}
/* ------------------------------------------------------------------------------------------------------------ */


@media (max-width: 1268px) {
    #ukvd-cp-quick-search-vin-box {
        font-size: 35px;
        font-size: 3.9vw;
    }

    .ukvd-cp-vin-input-transparent {
        font-size: 35px;
        font-size: 3.9vw;
    }

    .ukvd-cp-vin-display-overlay {
        font-size: 35px;
        font-size: 3.9vw;
    }
}

@media (min-width: 1040px) and (max-width: 1267px) {
    #ukvd-cp-quick-search-vin-box {
        font-size: 35px;
        font-size: 1.7vw;
    }

    .ukvd-cp-vin-input-transparent {
        font-size: 35px;
        font-size: 1.7vw;
    }

    .ukvd-cp-vin-display-overlay {
        font-size: 35px;
        font-size: 1.7vw;
    }
}

@media (min-width: 991px) and (max-width: 1039px) {
    #ukvd-cp-quick-search-vin-box {
        font-size: 35px;
        font-size: 1.5vw;
    }

    .ukvd-cp-vin-input-transparent {
        font-size: 35px;
        font-size: 1.5vw;
    }

    .ukvd-cp-vin-display-overlay {
        font-size: 35px;
        font-size: 1.5vw;
    }
}

@media (max-width: 767px) {
    #ukvd-cp-quick-search-vin-box {
        font-size: 35px;
        font-size: 5.7vw;
    }
    .ukvd-cp-vin-input-transparent {
        font-size: 35px;
        font-size: 5.7vw;
    }

    .ukvd-cp-vin-display-overlay {
        font-size: 35px;
        font-size: 5.7vw;
    }
}

@media (max-width: 576px) {
    #ukvd-cp-quick-search-vin-box {
        font-size: 35px;
        font-size: 4.9vw;
    }

    .ukvd-cp-vin-input-transparent {
        font-size: 35px;
        font-size: 4.9vw;
    }

    .ukvd-cp-vin-display-overlay {
        font-size: 35px;
        font-size: 4.9vw;
    }
}

/* ------------------------------------------------------------------------------------------------------------ */
/*Large/bold styling*/
.ukvd-cp-human-bold-large {
    font-weight: 700;
    font-size: 2.0rem;
}

/*money field styling*/
.ukvd-cp-human-view-money {
    font-weight: var(--cell-money-text-weight-1024);
    font-size: var(--cell-money-text-size-1024);
}

@media (min-width: 558px) and (max-width: 1100px) {
    .ukvd-cp-human-view-money {
        font-weight: var(--cell-money-text-weight-558);
        font-size: var(--cell-money-text-size-558);
    }
}

@media (max-width: 576px) {
    .ukvd-cp-human-view-money {
        font-weight: var(--cell-money-text-weight-576);
        font-size: var(--cell-money-text-size-576);
    }
}
/* ------------------------------------------------------------------------------------------------------------ */

/*money field styling*/
.ukvd-cp-human-view-emphasied {
    font-weight: 700;
    font-size: 1.8rem;
}

@media (min-width: 558px) and (max-width: 1100px) {
    .ukvd-cp-human-view-emphasied {
        font-weight: 700;
        font-size: 1.4rem;
    }
}

@media (max-width: 576px) {
    .ukvd-cp-human-view-emphasied {
        font-weight: 700;
        font-size: 1.1rem;
    }
}
/* ------------------------------------------------------------------------------------------------------------ */


/*Create animate invisible button*/
.ukvd-cp-invisible-button {
    background: transparent;
    border: none;
    outline: none !important;
}

    .ukvd-cp-invisible-button::after {
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .ukvd-cp-invisible-button:hover {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        filter: brightness(0.8);
    }


    .ukvd-cp-invisible-button:active {
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .ukvd-cp-invisible-button::selection {
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .ukvd-cp-invisible-button:focus {
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

.ukvd-cp-sub-header-multiple {
    display: flex;
    justify-content: space-between;
}


@media only screen and (min-device-width: 992px) and (max-device-width: 1124px) {
    .ukvd-cp-demo-vrm {
        max-width: 127px;
        min-width: 86px;
        height: 2.25rem;
        line-height: 36px;
        font-size: 1.04rem;
    }
}

@media only screen and (min-device-width: 1125px) and (max-device-width: 1245px) {
    .ukvd-cp-demo-vrm {
        max-width: 127px;
        min-width: 108px;
        height: 2.25rem;
        line-height: 36px;
        font-size: 1.1rem;
    }
}


.hljs {
    display: block;
    overflow-x: auto;
    background: white;
    color: black;
}

.hljs-comment,
.hljs-quote,
.hljs-variable {
    color: #008000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
    color: #00f;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
    color: #a31515;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
    color: #2b91af;
}

.hljs-doctag {
    color: #808080;
}

.hljs-attr {
    color: #f00;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
    color: #00b0e8;
}


.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

.documentation-link {
    text-decoration: none !important;
    padding: 6px 0;
    display: flex;
    align-items: center;
    position: relative;
    float: right;
    margin-left: -100%;
}

.social-link {
    margin-right: 8px;
    text-decoration: none;
}

.console-content {
    height: 230px;
    overflow: auto;
}

.console-header {
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 0 0 16px 0;
}

.console-title {
    flex: 1;
    margin: 0 !important;
}

.console-message {
    margin: 8px 0;
    padding: 4px 0;
    display: flex;
    align-items: baseline;
    color: var(--ukvd-colour-black);
    background: rgba(210,233,255,0.8);
    border-radius: 4px;
}

.console-message-time {
    font-size: 12px;
    padding: 2px 4px;
}

/* next */

body {
    background-color: var(--ukvd-cp-body-background) !important;
    background-image: none !important;
}

.stage {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.light {
    padding-top: 3rem;
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-position: 50% -700px;
}

.dark {
    background-color: #050A23;
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-position: 50% 0;
    padding-bottom: 3rem;
}

.next a {
    color: #FF504D;
}

    .next a:hover {
        text-decoration: none;
        color: #FF7371;
    }

.dark a {
    color: #FF9C9A;
}

    .dark a:hover {
        color: #FF504D;
    }

.next h1,
.next h2,
.next h3,
.next h4,
.next h5,
.next h6 {
    line-height: 100%;
    color: #050A23;
}

.next .dark,
.next .dark h1,
.next .dark h2,
.next .dark h3,
.next .dark h4,
.next .dark h5,
.next .dark h6,
.next .dark p {
    color: var(--ukvd-colour-white);
}

.next h1 {
    font-weight: bold;
    font-size: 72px;
    letter-spacing: -0.02em;
}

.next .subtitle {
    font-weight: 100;
    font-size: 24px;
    line-height: 1.3em;
    margin: 3rem 0 3.75rem;
}

    .next .subtitle strong {
        font-weight: 700;
    }

.next .description {
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    margin-bottom: 4rem;
}

.next h3 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.next p {
    font-size: 18px;
    font-weight: 400;
    color: #515256;
}

/* Top navigation links */
.nav-links a {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    color: #050A23;
    margin: .5rem 0 0 2.5rem;
    transition: all 0.3s;
}

    .nav-links a:hover {
        color: #FF504D;
    }

.rz-button.btn-success, .btn-success.rz-paginator-element {
    background-color: var(--ukvd-cp-success) !important;
    color: var(--ukvd-colour-white);
}

.rz-button {
    border-radius: 0.35rem !important;
}

.rz-badge-success {
    background-color: var(--ukvd-cp-success) !important;
}

.ukvd-dark-button-add-border {
    border: var(--ukvd-dark-button-border-style) !important;
}

/* VDGL Footer Styling */
.ukvd-cp-footer-text-container {
    /*height: 48px;*/
    position: relative;
}

.ukvd-cp-mini-list-tick {
    color: var(--ukvd-cp-success);
    font-size: 0.9rem !important;
    vertical-align: middle;
    padding-right: 16px;
}


.ukvd-cp-footer-vertical-centre {
}

.ukvd-cp-footer-copyright-info {
    font-family: var(--font-footer-copyright), Helvetica, Arial, sans-serif !important;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ukvd-colour-force-white);
}

.ukvd-cp-footer-nav-heading {
    color: var(--ukvd-footer-heading-text-colour);
    text-align: left;
    font-weight: 600;
}

.ukvd-cp-footer-nav-menu ul {
    padding: 0px;
    margin: 0px;
    /*-moz-text-size-adjust: 0.75rem;*/
}

.ukvd-cp-footer-nav-menu li {
    color: var(--ukvd-colour-white);
    list-style: none;
    padding: 0;
    margin-top: 5px;
    text-align: left;
}

.ukvd-cp-footer-nav-menu a {
    display: block;
    font-family: var(--font-footer-nav), Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem;
    font-weight: 300;
    text-align: left;
    text-decoration: none;
    /*    line-height: 1.6em;*/
}

.ukvd-cp-footer-nav-menu li:hover {
    color: #2e87ba;
    list-style: none;
    padding: 0;
    margin-top: 5px;
    text-align: left;
    font-weight: 600;
    text-decoration: none;
}

.ukvd-cp-footer-nav-menu a:hover {
    color: #2e87ba;
    list-style: none;
    padding: 0;
    margin-top: 5px;
    text-align: left;
    font-weight: 600;
    text-decoration: none;
}

.ukvd-cp-footer-section1 {
    /*position: fixed;*/
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--ukvd-cp-footerShade1);
    color: white;
    text-align: center;
    height: auto;
}

.ukvd-cp-footer-section2 {
    /*position: fixed;*/
    left: 0;
    bottom: 48px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--ukvd-cp-footerShade2);
    color: white;
    text-align: center;
    /*height: 102px;*/
}

.ukvd-cp-footer-section3 {
    /*position: fixed;*/
    left: 0;
    bottom: 0;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--ukvd-cp-footerShade3);
    color: white;
    text-align: center;
    /*height: 48px;*/
}

.ukvd-cp-footer-account-info {
    font-weight: 600;
    color: #00CEFF;
}

.ukvd-cp-footer-ukvd-logo {
    max-height: 66px;
}

.ukvd-cp-footer-address-info {
    font-size: 0.7rem;
    text-align: left;
    color: var(--ukvd-colour-force-white);
}

.ukvd-cp-footer-version-info {
    font-size: 0.62rem;
    text-align: center;
    margin-top: -6px;
}

.ukvd-cp-footer-contact-info {
    font-family: var(--font-footer-contact-info), Helvetica, Arial, sans-serif !important;
    font-size: 0.7rem;
    text-align: left;
}

.ukvd-cp-nav-menu-info-text {
    font-family: var(--font-footer-nav-text), Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.3rem;
    color: var(--ukvd-nav-menu-info-text);
}

.ukvd-cp-footer-nav-a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.ukvd-cp-mini-tick-list {
    font-size: 0.8rem;
    line-height: 23px;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

.ukvd-cp-login-list {
    line-height: 38px;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

@media (max-width: 767px) {
    #quick-search-vrm-box {
        max-width: 126px;
        height: 2.25rem;
        margin-right: 10px;
        line-height: 1.429;
        font-size: 1.3rem;
    }

        #quick-search-vrm-box::placeholder {
            font-size: 1.3rem;
        }

    #quick-search-postcode-box {
        max-width: 126px;
        height: 2.25rem;
        margin-right: 10px;
        line-height: 1.429;
        font-size: 1.3rem;
    }

        #quick-search-postcode-box::placeholder {
            font-size: 1.3rem;
        }


    .ukvd-cp-footer-contact-info {
        text-align: left;
        /*margin-left: 50px;*/
    }

    .ukvd-cp-footer-vertical-centre {
    }

    .ukvd-cp-footer-copyright-info {
        text-align: center;
        font-size: 0.8rem;
    }

    .ukvd-cp-footer-text-container {
        /*            height: 62px !important;
            position: relative;
*/
    }

    .ukvd-cp-footer-section2 {
        /*height: 200px;*/
    }

    .ukvd-cp-footer-section3 {
        left: 0;
        bottom: 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        background-color: var(--ukvd-cp-footerShade3);
        color: white;
        text-align: center;
    }
}
/* CTA Buttons */

@media (max-width: 767px) {
    .cp-body-basic-max-width {
        max-width: 85%;
    }

    .cp-header-mini-info-title {
        font-size: 0.6rem;
    }

    .cp-header-mini-info-content {
        font-size: 0.75rem;
    }

    .cp-header-impersonate-container h3 {
        font-size: 1.0rem;
    }

    .cp-header-impersonate-container p {
        font-size: 0.80rem;
    }

    .cp-header-impersonate-container td {
        font-size: 0.72rem;
        padding-top: 2px;
    }

    .cp-header-impersonate-warn-icon {
        font-size: 3.0rem !important;
    }
}

@media (max-width: 576px) {
    .cp-body-basic-max-width {
        max-width: 90%;
    }

    .cp-header-mini-info-title {
        font-size: 0.8rem;
    }

    .cp-header-mini-info-content {
        font-size: 0.65rem;
    }

    .cp-header-impersonate-container h3 {
        font-size: 1.2rem;
    }

    .cp-header-impersonate-container p {
        font-size: 0.65rem;
    }

    .cp-header-impersonate-container td {
        font-size: 0.72rem;
        padding-top: 2px;
    }

    .cp-header-impersonate-warn-icon {
        font-size: 3.0rem !important;
        /*visibility: hidden;*/
    }
}

#ukvd-header-menu-dark {
    background-color: var(--ukvd-cp-headerShade1);
    color: var(--ukvd-header-panel-text-colour);
    border: none;
    padding-top: 5px;
}


#ukvd-header-menu-selector .rz-navigation-item-icon {
    color: var(--ukvd-header-panel-text-colour);
}

#ukvd-header-menu-selector .rz-navigation-item-link {
    color: var(--ukvd-header-panel-text-colour);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    margin-right: -6px !important;
    display: flex;
    justify-content: flex-end !important;
}

#ukvd-header-menu-selector .rz-navigation-menu {
    border-radius: 8px;
    line-height: 28px;
    right: 10px;
}

#ukvd-header-menu-item .rz-navigation-item-text {
    padding-right: 20px;
}

#ukvd-header-menu-selector .rz-navigation-item .rz-navigation-item-active {
    background-color: var(--ukvd-cp-headerShade1);
    color: yellow !important;
    border: 1px dashed #303b48;
    border-radius: 8px;
}

#ukvd-header-menu-item .rz-navigation-item-link {
    color: var(--ukvd-dropdown-menu-text-colour);
    padding: 0.5rem;
}

#ukvd-header-menu-item .rz-navigation-item-icon {
    color: var(--ukvd-dropdown-menu-icon-colour);
}

.header-messages-icon {
    font-size: 35px !important;
    color: var(--ukvd-colour-white);
    padding-top: 15px;
    padding-right: 21px;
}

    .header-messages-icon:hover {
        color: var(--nav-menu-header-hover-icon);
    }

.header-messages-badge {
    position: absolute;
    right: 9px;
    min-width: 25px;
    border: 3px solid var(--rz-header-background-color);
}

.header-messages-badge-small-device {
    position: absolute;
    margin-left: 9px !important;
    min-width: 25px;
    border: 3px solid var(--rz-header-background-color);
}

.ukvd-cp-no-decoration {
    text-decoration: none !important;
}


.ukvd-cp-tick {
    background-color: var(--ukvd-cp-success);
    border-radius: 6px
}

.ukvd-cp-select-payment-decoration {
    text-decoration: none !important;
    outline: none;
    font-weight: 700;
    color: var(--ukvd-cp-blue-clean);
}

    .ukvd-cp-select-payment-decoration .rz-card:hover {
        background-color: var(--ukvd-cp-light-grey);
    }

.ukvd-cp-pay-amount-button {
    width: 100%;
    height: 64px !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    background-color: var(--ukvd-cp-blue-clean) !important;
}

.ukvd-payment-card-info {
    font-size: 1.225rem !important;
    font-weight: 500 !important;
}

.ukvd-payment-card-expire-info {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: var(--ukvd-cp-dark-grey);
}

@media (max-width: 764px) {
    .ukvd-cp-pay-amount-button {
        width: 100%;
        height: 64px !important;
        font-size: 0.95rem !important;
        font-weight: 300 !important;
        background-color: var(--ukvd-cp-blue-clean) !important;
    }

    .ukvd-payment-card-info {
        font-size: 0.91rem !important;
        font-weight: 500 !important;
    }

    .ukvd-payment-card-expire-info {
        font-size: 0.7rem !important;
        font-weight: 400 !important;
        color: var(--ukvd-cp-dark-grey);
    }
}


.ukvd-cp-select-company-decoration {
    text-decoration: none !important;
    outline: none;
    font-weight: 700;
    color: var(--ukvd-cp-blue-clean);
}

    .ukvd-cp-select-company-decoration:hover {
        color: white;
        text-decoration: none !important;
    }

    .ukvd-cp-select-company-decoration i:hover {
        color: white !important;
        text-decoration: none !important;
    }

    .ukvd-cp-select-company-decoration .rz-card:hover {
        background-color: var(--ukvd-cp-blue-clean);
    }

    .ukvd-cp-select-company-decoration i:focus {
        outline: none;
    }

    .ukvd-cp-select-company-decoration .rz-card:focus {
        outline: none;
    }

.ukvd-cp-select-disabled-company-decoration {
    text-decoration: none !important;
    outline: none;
    font-weight: 700;
    color: var(--ukvd-cp-disabled) !important;
}

    .ukvd-cp-select-disabled-company-decoration:hover {
        color: white;
        text-decoration: none !important;
    }

    .ukvd-cp-select-disabled-company-decoration i:hover {
        color: white !important;
        text-decoration: none !important;
    }

    .ukvd-cp-select-disabled-company-decoration .rz-card:hover {
        color: white !important;
        background-color: var(--ukvd-cp-disabled);
    }

    .ukvd-cp-select-disabled-company-decoration i:focus {
        outline: none;
    }

    .ukvd-cp-select-disabled-company-decoration .rz-card:focus {
        outline: none;
    }


.cta-strip {
    margin-top: 4rem;
}

.cta-button {
    text-decoration: none;
    display: inline-block;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    padding: 1rem 2rem;
    margin: 1rem .5rem 0;
    border-radius: .75rem;
    border: 1px solid #050A23;
    box-sizing: border-box;
    color: #050A23 !important;
    transition: all 0.3s ease-in-out;
}

.dark .cta-button {
    border-color: rgba(255,255,255,.3);
    color: var(--ukvd-colour-white) !important;
}

.cta-button.primary {
    font-weight: 600;
    color: var(--ukvd-colour-white) !important;
    border-color: #FF504D;
    background: #FF504D;
}

.cta-button:hover {
    text-decoration: none;
    color: var(--ukvd-colour-white) !important;
    border-color: #050A23;
    background: #050A23;
}

.dark .cta-button:hover {
    text-decoration: none;
    color: #050A23 !important;
    border-color: var(--ukvd-colour-white);
    background: var(--ukvd-colour-white);
}

.cta-button:active {
    color: #c2c2c2 !important;
}

.dark .cta-button:active {
    color: #515256 !important;
}

/* Customer Logos */

.customers {
    margin-top: 5rem;
    margin-bottom: 1rem;
    border-radius: .75rem;
    background-color: var(--ukvd-colour-white);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
}

    .customers h3 {
        font-size: 1rem;
        font-weight: 300;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        min-width: 110px;
        margin: 2rem 0;
    }

.logos {
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

    .logos img {
        height: 24px;
        margin: 0 12px 32px;
    }

    .logos .square {
        height: 48px;
    }

/* Radzen Features */

video {
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5);
    background: rgba(0,0,0,.3) url("../images/play.svg") no-repeat 50% 50%;
}

.radzen-features ul {
    margin-top: 0;
    margin-bottom: 0;
    list-style-image: url("../images/checkmark.svg");
}

.radzen-features li {
    cursor: default;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    transition: all 0.3s ease-in-out;
}

/* Most Popular Components */

.popular-components {
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

    .popular-components a {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1151f3;
        transition: all 0.2s;
        border-bottom: 1px solid transparent;
    }

        .popular-components a:hover {
            color: #0E44CC;
            border-bottom-color: #0E44CC;
        }

    .popular-components .component-icon {
        width: 32px;
        height: 32px;
        display: block;
        margin: 0 auto 1rem;
    }


/* All Components */

.all-components ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.all-components li {
    display: flex;
    align-items: flex-start;
    padding: 0.25rem 0;
}

.all-components h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 150%;
    margin: 1.25rem 0 0.25rem;
}

.all-components a {
    line-height: 1rem;
    color: #1151f3;
    transition: all 0.2s;
    border-bottom: 1px solid transparent;
}

    .all-components a:hover {
        color: #0E44CC;
        border-bottom-color: #0E44CC;
    }

.all-components .rz-badge {
    margin-left: 0.5rem;
    margin-top: 0.0625rem;
    font-size: 0.5rem;
    line-height: 0.625rem;
}

/* Footer */

.copyright {
    margin-top: 6rem;
    opacity: .2;
    transition: all 0.4s ease-in-out;
}

    .copyright p {
        font-size: 1rem;
        font-weight: 300;
        color: #ACAFB9;
    }

    .copyright:hover {
        opacity: 1;
    }

/* Content */

/*p code,
ul code {
    display: inline-block;
}

p code,
ul code,
pre {
    padding: 0 0.5rem;
    font-size: 0.8125em !important;
    line-height: 1.5rem;
    background: rgba(0,0,0,.08);
    border-radius: 0.25rem;
}*/

.ukvd-cp-code-block-view {
    display: inline-block;
    overflow-y: auto;
    padding: 0.8rem;
    font-size: 0.88rem !important;
    line-height: 1.5rem;
    background-color: #1e1e1e;
    border-radius: 0.38rem;
    width: 100%;
}

.ukvd-cp-json-code-view {
    display: inline-block;
    padding: 0 0.5rem;
    font-size: 0.88rem !important;
    line-height: 1.5rem;
    background: var(--ukvd-json-background-colour);
    border-radius: 0.25rem;
}

.body {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.rz-sidebar {
    bottom: 0 !important;
    border-right: 0 !important;
    background-color: var(--nav-menu-background) !important;
}

.content-footer {
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-position: right -450px top -200px;
}

    .content-footer h2 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 100%;
    }

.docu h2 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
}

.rz-card.docu p,
.rz-card.docu ul {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-weight: 400;
}

.docu img {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 4rem auto;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
}

img.illustration {
    box-shadow: none;
    max-width: 300px;
    min-height: 220px;
}

/* Sidebar */

.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-item-icon-children {
    margin-left: auto;
}

.ukvd-cp-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon {
    margin-left: 0px;
}

.rz-badge {
    border-radius: 0.6rem !important;
}

.ukvd-cp-sidebar .rz-panel-menu .rz-badge {
    margin-left: 0.5rem;
    font-size: 0.5rem;
    line-height: 0.625rem;
    padding-top: 4px;
}

.rz-badge-beta {
    background-color: var(--badge-beta);
}
/* Responsive */

@media (max-width: 1024px) {
    .documentation-link {
        padding: 0;
        float: none;
        margin-left: 0;
        margin-bottom: 1rem;
    }
}

@media (max-width: 767px) {
    .nav-links a {
        margin-left: 1rem;
    }
}

@media (max-width: 576px) {
    .next h1 {
        font-size: 3.5rem;
    }

    .all-components h4 {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .all-components a {
        font-size: 1.25rem;
        font-weight: 400;
    }

    .popular-components a {
        width: 7rem;
        margin-bottom: 2rem;
    }

    .customers h3 {
        margin: 1rem 0 0;
    }

    .copyright {
        opacity: 1;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

json-viewer {
    overflow: auto;
    max-height: 800px;
    border-radius: 6px;
    /*font-size: 0.88rem !important;*/
    font-family: 'Source Code Pro';
    font-size: 0.94rem !important;
    --background-color: #303945;
    --color: #f8f8f2;
    --font-family: monaco, Consolas, var(--font-json-viewer), monospace;
    --font-size: 0.5rem;
    --indent-size: 1.5em;
    --indentguide-size: 1px;
    --indentguide-style: solid;
    --indentguide-color: #fff;
    --indentguide-color-active: #666;
    --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);
    --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);
    --string-color: #a3eea0;
    --number-color: #d19a66;
    --boolean-color: #4ba7ef;
    --null-color: #df9cf3;
    --property-color: #bdbdbd;
    --preview-color: rgba(222, 175, 143, 0.9);
    --highlight-color: #6fb3d2;
}

/* Loading Ring/Animations */

/* Single Ring Spinner */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #fff transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

/* Dual  Ring Spinner */
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

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

/* Basic - clean table */
.ukvd-cp-basic-table {
    font-family: var(--font-basic-table), Helvetica, Arial, sans-serif !important;
    color: #666;
    /* font-size: 12px; */
    /* text-shadow: 1px 1px 0px #fff; */
    background: #eaebec;
    margin: 20px;
    /*width: -webkit-fill-available;*/
    border: #e0e0e0 1px solid;
    -moz-border-radius: 3px;
    /* -webkit-border-radius: 13px; */
    /* border-radius: 3px; */
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    /* -webkit-box-shadow: 0 1px 2px #d1d1d1; */
    /* box-shadow: 0 1px 2px #d1d1d1;*/
}

    .ukvd-cp-basic-table a:link {
        color: #666;
        font-weight: bold;
        text-decoration: none;
    }

    .ukvd-cp-basic-table a:visited {
        color: #999999;
        font-weight: bold;
        text-decoration: none;
    }

    .ukvd-cp-basic-table a:active,
    .ukvd-cp-basic-table a:hover {
        color: #bd5a35;
        text-decoration: underline;
    }

    .ukvd-cp-basic-table th {
        padding: 21px 25px 22px 25px;
        border-top: 1px solid #fafafa;
        border-bottom: 1px solid #e0e0e0;
        background: #ededed;
        background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
        background: -moz-linear-gradient(top, #ededed, #ebebeb);
    }

        .ukvd-cp-basic-table th:first-child {
            text-align: left;
            padding-left: 20px;
        }

    .ukvd-cp-basic-table tr:first-child th:first-child {
        -moz-border-radius-topleft: 3px;
        -webkit-border-top-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    .ukvd-cp-basic-table tr:first-child th:last-child {
        -moz-border-radius-topright: 3px;
        -webkit-border-top-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .ukvd-cp-basic-table tr {
        text-align: center;
        padding-left: 20px;
    }

    .ukvd-cp-basic-table td:first-child {
        text-align: left;
        padding-left: 20px;
        border-left: 0;
    }

    .ukvd-cp-basic-table td {
        padding: 18px;
        border-top: 1px solid var(--ukvd-colour-white);
        border-bottom: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        background: #fafafa;
        background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
        background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
    }

    .ukvd-cp-basic-table tr.even td {
        background: #f6f6f6;
        background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
        background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
    }

    .ukvd-cp-basic-table tr:last-child td {
        border-bottom: 0;
    }

        .ukvd-cp-basic-table tr:last-child td:first-child {
            -moz-border-radius-bottomleft: 3px;
            -webkit-border-bottom-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .ukvd-cp-basic-table tr:last-child td:last-child {
            -moz-border-radius-bottomright: 3px;
            -webkit-border-bottom-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

    .ukvd-cp-basic-table tr:hover td {
        background: #f2f2f2;
        background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
        background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
    }

.ukvd-cp-mot-pill {
    background-color: var(--ukvd-cp-mot-prs);
    color: var(--ukvd-colour-white);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 15px !important;
    text-align: center;
}

.ukvd-background-transparent {
    background: var(--ukvd-transparent-panel-overlay) url('data:image/svg+xml,\
   <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".10" >\
            <rect x="200" width="200" height="200" />\
            <rect y="200" width="200" height="200" />\
   </svg>');
    background-size: 22px 22px;
}

.ukvd-dashed-grey-border {
    border: 1px dashed var(--ukvd-card-base-border-colour) !important;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* font-face size override form various screen sizes*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-font-size-default {
    font-size: 0.88rem;
}

@media (max-width: 1268px) {
    .ukvd-cp-font-size-default {
        font-size: 0.88rem;
    }
}

@media (min-width: 1040px) and (max-width: 1267px) {
    .ukvd-cp-font-size-default {
        font-size: 0.88rem;
    }
}

@media (min-width: 991px) and (max-width: 1039px) {
    .ukvd-cp-font-size-default {
        font-size: 0.88rem;
    }
}

@media (max-width: 767px) {
    .ukvd-cp-font-size-default {
        font-size: 0.81rem;
    }
}

@media (max-width: 576px) {
    .ukvd-cp-font-size-default {
        font-size: 0.78rem;
    }
}

.ukvd-row-highlight-on {
    background-color: #f7fdc3;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* Text styling*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-selected-package-text-emphasise {
    color: var(--ukvd-cp-blue-clean);
    /*border: 1px solid #2982dd3b;*/
    /*padding: 5px 7px 5px 7px;*/
    /*margin: 0px 3px 0px 3px;*/
    /*border-radius: 8px;*/
    /*background: #504f4f17;*/
}

.ukvd-api-error-code-text {
    text-transform: uppercase;
    font-family: var(--font-api-key-guid) !important;
}

.ukvd-text-code-to-upper {
    text-transform: uppercase;
    font-family: var(--font-api-key-guid) !important;
}

/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-text-code-to-upper-main {
    text-transform: uppercase;
    font-family: var(--font-api-key-guid) !important;
    font-size: 1.0rem !important;
}

@media (max-width: 1268px) {
    .ukvd-text-code-to-upper-main {
        font-size: 1.0rem !important;
    }
}

@media (min-width: 1040px) and (max-width: 1267px) {
    .ukvd-text-code-to-upper-main {
        font-size: 0.96rem !important;
    }
}

@media (min-width: 991px) and (max-width: 1039px) {
    .ukvd-text-code-to-upper-main {
        font-size: 0.94rem !important;
    }
}

@media (max-width: 767px) {
    .ukvd-text-code-to-upper-main {
        font-size: 0.92rem !important;
    }
}

@media (max-width: 576px) {
    .ukvd-text-code-to-upper-main {
        font-size: 0.9rem !important;
    }
}
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-text-api-key-description-small {
    font-size: 0.75rem;
    font-weight: 400 !important;
}

@media (max-width: 576px) {
    .ukvd-text-api-key-description-small {
        font-size: 0.64rem;
        font-weight: 400 !important;
    }
}

.ukvd-text-api-key-sandbox-description-small {
    font-weight: 500 !important;
    font-size: 0.78rem;
}

.ukvd-text-api-key-live-description-small {
    font-weight: 500 !important;
    font-size: 0.78rem;
}

@media (max-width: 576px) {
    .ukvd-text-api-key-sandbox-description-small {
        font-weight: 500 !important;
        font-size: 0.72rem;
    }

    .ukvd-text-api-key-live-description-small {
        font-weight: 500 !important;
        font-size: 0.72rem;
    }
}

.ukvd-text-code-to-upper-grid {
    text-transform: uppercase;
    font-family: var(--font-api-key-guid) !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
}

@media (max-width: 1268px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.98rem !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 1040px) and (max-width: 1267px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.98rem !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 990px) and (max-width: 1039px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 1038px) and (max-width: 989px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 767px) and (max-width: 988px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 577px) and (max-width: 766px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 576px) {
    .ukvd-text-code-to-upper-grid {
        font-size: 0.74rem !important;
        font-weight: 500 !important;
    }
}


.ukvd-ip-allow-pill {
    display: flex;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-success);
    color: var(--ukvd-colour-white);
    margin-left: 12px;
    height: 28px;
    border-radius: 18px;
}

.ukvd-ip-deny-pill {
    display: flex;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 15px;
    align-items: center;
    justify-content: center;
    background: var(--ukvd-cp-error);
    color: var(--ukvd-colour-white);
    margin-left: 12px;
    height: 28px;
    border-radius: 18px;
}

a.ukvd-basic-href {
    color: var(--ukvd-cp-default-blue) !important;
    transition: all 0.2s;
}

    a.ukvd-basic-href:hover {
        color: var(--ukvd-cp-default-blue) !important;
        cursor: pointer;
        border-bottom: 2px solid var(--ukvd-cp-default-blue);
        font-weight: 600;
    }

/* ------------------------------------------------------------------------------------------------------------ */
/* Custom - Code sample button*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-code-language-container {
    display: flex;
    align-items: center;
}

a.ukvd-cp-code-language-button {
    display: inline-block;
    padding: 0.1em 0.1em;
    margin: 0rem 0.3em 0.3em 0;
    border-radius: 0.52em;
    border: 1px dashed var(--ukvd-cp-code-button-border);
    box-sizing: border-box;
    text-decoration: none;
    font-family: var(--font-code-language-button);
    font-weight: 800;
    font-size: 1.4rem;
    background-color: var(--ukvd-cp-code-button-background-off);
    text-align: center;
    transition: all 0.2s;
    width: 100%;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%), 0 0 0px 0 rgb(0 0 0 / 0%), 0 4px 10px 0 rgb(0 0 0 / 7%);
}


    a.ukvd-cp-code-language-button:hover {
        cursor: pointer;
        border: 1px dashed var(--ukvd-cp-code-button-border-hover);
        background-color: var(--ukvd-cp-code-button-background-hover);
    }

    a.ukvd-cp-code-language-button i {
        color: var(--ukvd-cp-code-button-border-icon-off);
        font-size: 2.3rem;
    }

.ukvd-cp-code-language-container:hover i {
    color: var(--ukvd-cp-code-language-hover-text);
}

.ukvd-cp-code-language-container:hover p {
    color: var(--ukvd-cp-code-language-hover-text);
}

a.ukvd-cp-code-language-button p {
    color: var(--ukvd-cp-code-language-text);
    font-size: 1.2rem;
}

a.ukvd-cp-code-language-button:active {
    background-color: var(--ukvd-cp-code-language-selected-bg);
    border: 1px solid var(--ukvd-cp-code-button-border-active);
}

.ukvd-cp-code-language-container:active i {
    color: var(--ukvd-cp-code-button-icon-active);
}

.ukvd-cp-code-language-container:active p {
    color: var(--ukvd-cp-code-button-text-active);
}

a.ukvd-cp-code-language-button.active {
    background-color: var(--ukvd-cp-code-language-selected-bg);
}

a.ukvd-cp-code-language-button.active {
    background-color: var(--ukvd-cp-code-language-selected-bg);
}

.ukvd-cp-code-language-container.active i {
    color: var(--ukvd-cp-code-container-icon-active);
}

.ukvd-cp-code-language-container.active p {
    color: var(--ukvd-cp-code-container-text-active);
}


@media all and (max-width:30em) {
    a .ukvd-cp-code-language-button {
        display: block;
        margin: 0.4em auto;
    }
}

.ukvd-cp-code-language-select-icon {
    font-size: 2.1rem;
    color: var(--ukvd-cp-code-language-hover-text);
}

.ukvd-inline-href {
    color: var(--ukvd-cp-blue-clean);
    font-weight: 600;
    text-decoration: none;
    transition: color 100ms ease-in-out 100ms;
}

    .ukvd-inline-href:hover {
        color: var(--ukvd-cp-success);
        text-decoration: none;
        font-weight: 600;
    }

/* ------------------------------------------------------------------------------------------------------------ */
/* Custom - PAYGO TIER button*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-paygo-tier-button-container {
    display: flex;
    align-items: center;
}

#ukvd-cp-tier-active {
    color: var(--ukvd-cp-paygo-tier-button-hover-text);
    background-color: var(--ukvd-cp-paygo-tier-button-selected-bg);
    border: 3px solid var(--ukvd-cp-paygo-tier-button-action-colour);
}

    #ukvd-cp-tier-active a, #ukvd-cp-tier-active p {
        color: var(--ukvd-cp-paygo-tier-button-hover-text);
    }

.ukvd-cp-tier-active-icon-item {
    background: var(--ukvd-cp-tier-icon-background-active);
    color: var(--ukvd-cp-success) !important;
    font-size: 27px !important;
    border-radius: 20px;
    border: var(--ukvd-cp-tier-button-border);
}

a.ukvd-cp-paygo-tier-button-button {
    display: inline-block;
    padding: 0.4rem;
    margin: 0rem 0.3em 0.3em 0;
    border-radius: 0.52em;
    border: var(--ukvd-cp-paygo-tier-button-border);
    box-sizing: border-box;
    text-decoration: none;
    background-color: var(--ukvd-cp-paygo-tier-button-bg);
    text-align: center;
    transition: all 0.2s;
    width: 100%;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%), 0 0 0px 0 rgb(0 0 0 / 0%), 0 2px 13px 0 rgb(0 0 0 / 14%);
}


    a.ukvd-cp-paygo-tier-button-button:hover {
        cursor: pointer;
        border: var(--ukvd-cp-paygo-tier-button-border-hover);
        background-color: var(--ukvd-cp-paygo-tier-button-bg-hover);
    }

    a.ukvd-cp-paygo-tier-button-button i {
        color: var(--ukvd-cp-paygo-tier-button-action-colour);
    }

.ukvd-cp-paygo-tier-button-container:hover i {
    color: var(--ukvd-cp-paygo-tier-button-hover-text);
}

.ukvd-cp-paygo-tier-button-container:hover p {
    color: var(--ukvd-cp-paygo-tier-button-hover-text);
}

a.ukvd-cp-paygo-tier-button-button p {
    color: var(--ukvd-cp-dark-grey2);
}

a.ukvd-cp-paygo-tier-button-button:active {
    background-color: var(--ukvd-cp-paygo-tier-button-selected-bg);
    border: 3px solid var(--ukvd-cp-paygo-tier-button-action-colour);
}

.ukvd-cp-paygo-tier-button-container:active i {
    color: var(--ukvd-cp-paygo-tier-button-action-colour);
}

.ukvd-cp-paygo-tier-button-container:active p {
    color: var(--ukvd-cp-paygo-tier-button-action-colour);
}

a.ukvd-cp-paygo-tier-button-button.active {
    background-color: var(--ukvd-cp-paygo-tier-button-selected-bg);
}

a.ukvd-cp-paygo-tier-button-button.active {
    background-color: var(--ukvd-cp-paygo-tier-button-selected-bg);
}

.ukvd-cp-paygo-tier-button-container.active i {
    /*color: greenyellow*/
}

.ukvd-cp-paygo-tier-button-container.active p {
    /*color: greenyellow*/
}


@media all and (max-width:30em) {
    a .ukvd-cp-paygo-tier-button-button {
        display: block;
        margin: 0.4em auto;
    }
}

.ukvd-cp-paygo-tier-button-select-icon {
    font-size: 2.1rem;
    color: var(--ukvd-cp-paygo-tier-button-hover-text);
}

.ukvd-cp-request-license-button-mini {
    width: 100%;
    border-radius: 18px !important;
    background-color: var(--ukvd-license-request-button-background-colour) !important;
    color: var(--ukvd-license-button-text-colour) !important;
    border: 1px solid var(--ukvd-license-button-border-colour) !important;
    font-size: 0.65rem !important;
    height: 24px !important;
    min-height: 27px !important;
    padding: 0px 5px 0px 5px !important;
}

.ukvd-cp-request-permission-button-mini {
    width: 100%;
    border-radius: 18px !important;
    background-color: var(--ukvd-permission-request-button-background-colour) !important;
    color: var(--ukvd-license-button-text-colour) !important;
    border: 1px solid var(--ukvd-license-button-border-colour) !important;
    font-size: 0.63rem !important;
    height: 24px !important;
    min-height: 27px !important;
    padding: 0px 5px 0px 5px !important;
}

.ukvd-cp-request-license-button {
    width: 100%;
    border-radius: 18px !important;
    background-color: var(--ukvd-colour-white) !important;
    color: var(--ukvd-license-button-text-colour) !important;
    border: 1px solid var(--ukvd-license-button-border-colour) !important;
    font-size: 0.7rem !important;
}

.ukvd-cp-request-permission-button {
    width: 100%;
    border-radius: 18px !important;
    background-color: var(--ukvd-license-request-button-background-colour) !important;
    color: var(--ukvd-license-button-text-colour) !important;
    border: 1px solid var(--ukvd-license-button-border-colour) !important;
    font-size: 0.7rem !important;
}

.ukvd-restricted-code-enabled-pill {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.9rem !important;
    border-radius: 1rem !important;
}

.ukvd-restricted-code-enabled-pill-style {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-paygo-account) !important;
    margin-block: auto;
}

.ukvd-restricted-code-enabled-pill-mini {
    font-size: 0.55rem !important;
    border-radius: 1rem !important;
}

.ukvd-restricted-code-enabled-pill-style-mini {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-paygo-account) !important;
    margin-block: auto;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* Account type pills styling*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-pill-font-size {
    font-size: 0.9rem !important;
}

@media (min-width: 980px) and (max-width: 1080px) {
    .ukvd-pill-font-size {
        font-size: 0.7rem !important;
    }
}

.ukvd-account-type-pill-trial {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-trial-account) !important;
    margin-block: auto;
}

.ukvd-account-type-pill-paygo {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-paygo-account) !important;
    margin-block: auto;
}

.ukvd-account-type-pill-subscription {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-subscription-account) !important;
    margin-block: auto;
}

.ukvd-account-type-pill-monthly-contract {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-monthly-account) !important;
    margin-block: auto;
}

.ukvd-account-type-pill-unlimited {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-unlimited-account) !important;
    margin-block: auto;
}

.ukvd-account-type-pill-service {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-service-account) !important;
    margin-block: auto;
}

.ukvd-account-type-pill-support {
    border-radius: 1rem !important;
    background-color: var(--ukvd-cp-support-account) !important;
    margin-block: auto;
}

/* ------------------------------------------------------------------------------------------------------------ */
/*Payment Styling*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-cp-pay-card-dropdown-icon {
    font-size: 2.2rem;
    color: var(--ukvd-payment-card-icons);
}

@media (max-width: 764px) {
    .ukvd-cp-pay-card-dropdown-icon {
        font-size: 1.6rem;
        color: var(--ukvd-payment-card-icons);
    }
}

.ukvd-cp-pay-card-icon {
    font-size: 4rem;
    color: var(--ukvd-payment-card-icons);
}

@media (max-width: 764px) {
    .ukvd-cp-pay-card-icon {
        font-size: 2.7rem;
        color: var(--ukvd-payment-card-icons);
    }
}

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: .25rem;
}

.list-group-numbered {
    list-style-type: none;
    counter-reset: section;
}

    .list-group-numbered > li::before {
        content: counters(section,".") ". ";
        counter-increment: section;
    }

.list-group-item-action {
    width: 100%;
    color: #495057;
    text-align: inherit;
}

    .list-group-item-action:hover, .list-group-item-action:focus {
        z-index: 1;
        color: #495057;
        text-decoration: none;
        background-color: #f8f9fa;
    }

    .list-group-item-action:active {
        color: #212529;
        background-color: #e9ecef;
    }

.list-group-item {
    position: relative;
    display: block;
    padding: .5rem 1rem;
    color: #212529;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
}

    .list-group-item:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }

    .list-group-item:last-child {
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit;
    }

    .list-group-item.disabled, .list-group-item:disabled {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
    }

    .list-group-item.active {
        z-index: 2;
        color: #fff;
        background-color: #3f68b4;
        border-color: #3f68b4;
    }

    .list-group-item + .list-group-item {
        border-top-width: 0;
    }

        .list-group-item + .list-group-item.active {
            margin-top: -1px;
            border-top-width: 1px;
        }

.list-group-horizontal {
    flex-direction: row;
}

    .list-group-horizontal > .list-group-item:first-child {
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0;
    }

    .list-group-horizontal > .list-group-item:last-child {
        border-top-right-radius: .25rem;
        border-bottom-left-radius: 0;
    }

    .list-group-horizontal > .list-group-item.active {
        margin-top: 0;
    }

    .list-group-horizontal > .list-group-item + .list-group-item {
        border-top-width: 1px;
        border-left-width: 0;
    }

        .list-group-horizontal > .list-group-item + .list-group-item.active {
            margin-left: -1px;
            border-left-width: 1px;
        }

@media(min-width: 576px) {
    .list-group-horizontal-sm {
        flex-direction: row;
    }

        .list-group-horizontal-sm > .list-group-item:first-child {
            border-bottom-left-radius: .25rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-sm > .list-group-item:last-child {
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-sm > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-sm > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media(min-width: 768px) {
    .list-group-horizontal-md {
        flex-direction: row;
    }

        .list-group-horizontal-md > .list-group-item:first-child {
            border-bottom-left-radius: .25rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-md > .list-group-item:last-child {
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-md > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-md > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-md > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media(min-width: 992px) {
    .list-group-horizontal-lg {
        flex-direction: row;
    }

        .list-group-horizontal-lg > .list-group-item:first-child {
            border-bottom-left-radius: .25rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-lg > .list-group-item:last-child {
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-lg > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-lg > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media(min-width: 1200px) {
    .list-group-horizontal-xl {
        flex-direction: row;
    }

        .list-group-horizontal-xl > .list-group-item:first-child {
            border-bottom-left-radius: .25rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-xl > .list-group-item:last-child {
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-xl > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-xl > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media(min-width: 1400px) {
    .list-group-horizontal-xxl {
        flex-direction: row;
    }

        .list-group-horizontal-xxl > .list-group-item:first-child {
            border-bottom-left-radius: .25rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-xxl > .list-group-item:last-child {
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-xxl > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-xxl > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

.list-group-flush {
    border-radius: 0;
}

    .list-group-flush > .list-group-item {
        border-width: 0 0 1px;
    }

        .list-group-flush > .list-group-item:last-child {
            border-bottom-width: 0;
        }

.list-group-item-primary {
    color: #263e6c;
    background-color: #d9e1f0;
}

    .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
        color: #263e6c;
        background-color: #c3cbd8;
    }

    .list-group-item-primary.list-group-item-action.active {
        color: #fff;
        background-color: #263e6c;
        border-color: #263e6c;
    }

.list-group-item-secondary {
    color: #41464b;
    background-color: #e2e3e5;
}

    .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
        color: #41464b;
        background-color: #cbccce;
    }

    .list-group-item-secondary.list-group-item-action.active {
        color: #fff;
        background-color: #41464b;
        border-color: #41464b;
    }

.list-group-item-success {
    color: #0f5132;
    background-color: #d1e7dd;
}

    .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
        color: #0f5132;
        background-color: #bcd0c7;
    }

    .list-group-item-success.list-group-item-action.active {
        color: #fff;
        background-color: #0f5132;
        border-color: #0f5132;
    }

.list-group-item-info {
    color: #055160;
    background-color: #cff4fc;
}

    .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
        color: #055160;
        background-color: #badce3;
    }

    .list-group-item-info.list-group-item-action.active {
        color: #fff;
        background-color: #055160;
        border-color: #055160;
    }

.list-group-item-warning {
    color: #664d03;
    background-color: #fff3cd;
}

    .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
        color: #664d03;
        background-color: #e6dbb9;
    }

    .list-group-item-warning.list-group-item-action.active {
        color: #fff;
        background-color: #664d03;
        border-color: #664d03;
    }

.list-group-item-danger {
    color: #842029;
    background-color: #f8d7da;
}

    .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
        color: #842029;
        background-color: #dfc2c4;
    }

    .list-group-item-danger.list-group-item-action.active {
        color: #fff;
        background-color: #842029;
        border-color: #842029;
    }

.list-group-item-light {
    color: #636464;
    background-color: #fefefe;
}

    .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
        color: #636464;
        background-color: #e5e5e5;
    }

    .list-group-item-light.list-group-item-action.active {
        color: #fff;
        background-color: #636464;
        border-color: #636464;
    }

.list-group-item-dark {
    color: #141619;
    background-color: #d3d3d4;
}

    .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
        color: #141619;
        background-color: #bebebf;
    }

    .list-group-item-dark.list-group-item-action.active {
        color: #fff;
        background-color: #141619;
        border-color: #141619;
    }

/* ------------------------------------------------------------------------------------------------------------ */
/* Code View with line numbers*/
/* ------------------------------------------------------------------------------------------------------------ */
/*.ukvd-cp-code-area pre {
    background: #303030;
    color: #f1f1f1;
    padding: 10px 16px;
    border-radius: 2px;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
    counter-reset: line 1;
}

.ukvd-cp-code-area pre > span::before {
    content: '1';
    display: inline-block;
    padding: 0 .5em;
    margin-right: .5em;
    color: #888;
}

.ukvd-cp-code-area pre div {
    line-height: 1.5rem;
    counter-increment: line;
}

.ukvd-cp-code-area pre div::before {
    content: counter(line);
    display: inline-block;
    padding: 0 .5em;
    margin-right: .5em;
    color: #888;
}*/

.filled-icon {
    font-variation-settings: 'FILL' 1 !important;
}

.outlined-icon {
    font-variation-settings: 'FILL' 0 !important;
}

.theme-toggle {
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove extra spacing */
    cursor: pointer; /* Make it clickable */
    display: flex; /* Align content properly */
    align-items: center;
    justify-content: center;
}

    .theme-toggle img {
        width: 20px;
        height: 20px;
        /*filter: invert(1);*/
    }

/* ------------------------------------------------------------------------------------------------------------ */
/* Radzen Steps CSS override*/
/* ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 576px) {
    .rz-steps-item {
        margin-bottom: 4px !important;
    }

    .rz-steps-number {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
        line-height: 0.8rem !important;
    }

    .rz-steps-title {
        font-size: 0.67rem;
    }
}

.rz-dropdown-items-wrapper, .rz-multiselect-items-wrapper {
    max-height: 280px !important;
}

#ukvd-history-reports .rz-tick-text {
    stroke: none;
    fill: var(--rz-chart-axis-label-color);
    font-size: 0.78rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Cookie display*/
/* ------------------------------------------------------------------------------------------------------------ */
.cookieConsentContainer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 9999;
}

.cookieConsentPanel {
    background-color: white;
    box-shadow: #bdbdbd 0px 1px 15px 2px;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* Payment screen - forced css styling*/
/* ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 992px) {
    .payment-screen-padding-adjust {
        padding-top: 130px;
    }
}

@media (max-width: 580px) {
    .payment-h3-font {
        font-size: 0.93rem;
    }
}

/* Style for the popover container */
.popover-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 78%);
    z-index: 1000;
}

/* Style for the popover content */
.popover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1001; /* Higher z-index than container */
}

.info-panel-heading-margin-fix {
    margin-left: -16px;
    margin-right: -16px;
}

.cp-ukvd-clear-button {
    width: 100%;
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Busy overlay*/
/* ------------------------------------------------------------------------------------------------------------ */
#cp-ukvd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    z-index: 9999; /* Ensure overlay is on top of other content */
    display: block; /* Initially shown */
}

/* Loader animation styles */
.cp-ukvd-loader {
    border: 10px solid var(--ukvd-loading-spinner-border);
    border-top: 10px solid var(--ukvd-loading-spinner-highlight); /* Blue border on top */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite; /* Apply rotation animation */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px; /* Adjust to center vertically */
    margin-left: -40px; /* Adjust to center horizontally */
}

.cp-ukvd-loader-text {
    color: #ffffff !important; /* Text color */
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%); /* Center horizontally */
    /*margin-top: 40px;*/ /* Adjust to position below the loader */
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Loading Account info/overlay*/
/* ------------------------------------------------------------------------------------------------------------ */
#cp-ukvd-loading-account-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff63; /* Semi-transparent background */
    z-index: 9999; /* Ensure overlay is on top of other content */
    display: block; /* Initially shown */
}

/* Loader animation styles */
.cp-ukvd-loading-account-loader {
    border: 10px solid var(--ukvd-loading-spinner-border);
    border-top: 10px solid var(--ukvd-loading-spinner-highlight); /* Blue border on top */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite; /* Apply rotation animation */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px; /* Adjust to center vertically */
    margin-left: -40px; /* Adjust to center horizontally */
}

.cp-ukvd-loading-account-loader-text {
    color: var(--ukvd-loading-spinner-highlight); /* Text color */
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%); /* Center horizontally */
    /*margin-top: 40px;*/ /* Adjust to position below the loader */
}

/* Keyframe animation for spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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


/* ------------------------------------------------------------------------------------------------------------ */
/* Stats*/
/* ------------------------------------------------------------------------------------------------------------ */
.ukvd-stat-large-font {
    font-size: var(--ukvd-stat-large-emphasise-font-size);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Circular Progress Bar*/
/* ------------------------------------------------------------------------------------------------------------ */
.progress {
    width: var(--ukvd-progress-ring-size);
    height: var(--ukvd-progress-ring-size);
    line-height: var(--ukvd-progress-ring-size);
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

    .progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: var(--ukvd-progress-ring-width) solid var(--ukvd-progress-ring-background-grey);
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .progress .progress-left {
        left: 0;
    }

    .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: var(--ukvd-progress-ring-width);
        border-style: solid;
        position: absolute;
        top: 0;
        border-color: var(--ukvd-progress-ring-success);
    }

    .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: calc(var(--ukvd-progress-ring-size)/2);
        border-bottom-right-radius: calc(var(--ukvd-progress-ring-size)/2);
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .progress .progress-right {
        right: 0;
    }

        .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: calc(var(--ukvd-progress-ring-size)/2);
            border-bottom-left-radius: calc(var(--ukvd-progress-ring-size)/2);
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .progress .progress-value {
        display: flex;
        border-radius: 50%;
        font-size: var(--ukvd-progress-ring-value-font-size);
        font-family: var(--font-progress-stats-value);
        font-weight: var(--ukvd-progress-ring-value-font-weight);
        text-align: center;
        line-height: 20px;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: inherit;
    }

        .progress .progress-value div {
            margin-top: 10px;
        }

        .progress .progress-value span {
            font-size: var(--ukvd-progress-ring-info-font-size);
            font-weight: var(--ukvd-progress-ring-info-font-weight);
            font-family: var(--font-progress-stats-info);
            text-transform: uppercase;
        }

#ukvd-mini-circle-stat .progress {
    width: var(--ukvd-progress-ring-size-mini);
    height: var(--ukvd-progress-ring-size-mini);
    line-height: var(--ukvd-progress-ring-size-mini);
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

    #ukvd-mini-circle-stat .progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: var(--ukvd-progress-ring-width-mini) solid var(--ukvd-progress-ring-background-grey);
        position: absolute;
        top: 0;
        left: 0;
    }

    #ukvd-mini-circle-stat .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    #ukvd-mini-circle-stat .progress .progress-left {
        left: 0;
    }

    #ukvd-mini-circle-stat .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: var(--ukvd-progress-ring-width-mini);
        border-style: solid;
        position: absolute;
        top: 0;
        border-color: var(--ukvd-progress-ring-blue);
    }

    #ukvd-mini-circle-stat .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: calc(var(--ukvd-progress-ring-size-mini)/2);
        border-bottom-right-radius: calc(var(--ukvd-progress-ring-size-mini)/2);
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    #ukvd-mini-circle-stat .progress .progress-right {
        right: 0;
    }

        #ukvd-mini-circle-stat .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: calc(var(--ukvd-progress-ring-size-mini)/2);
            border-bottom-left-radius: calc(var(--ukvd-progress-ring-size-mini)/2);
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    #ukvd-mini-circle-stat .progress .progress-value {
        display: flex;
        border-radius: 50%;
        font-size: var(--ukvd-progress-ring-value-font-size-mini);
        font-weight: var(--ukvd-progress-ring-value-font-weight);
        font-family: var(--font-progress-stats-value);
        text-align: center;
        line-height: 20px;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

        #ukvd-mini-circle-stat .progress .progress-value div {
            margin-top: 10px;
        }

        #ukvd-mini-circle-stat .progress .progress-value span {
            font-size: var(--ukvd-progress-ring-info-font-size-mini);
            font-weight: var(--ukvd-progress-ring-info-font-weight);
            font-family: var(--font-progress-stats-info);
            text-transform: uppercase;
        }

#ukvd-circle-stat-success .progress .progress-bar {
    border-color: var(--ukvd-progress-ring-success);
}

#ukvd-circle-stat-all-combined .progress .progress-bar {
    border-color: var(--ukvd-progress-ring-all-statuses);
}

/* This for loop creates the necessary css animation names Due to the split circle of progress-left and progress right, we must use the animations on each side. */
.progress[data-percentage="1"] .progress-right .progress-bar {
    animation: loading-1 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="1"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="2"] .progress-right .progress-bar {
    animation: loading-2 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="2"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="3"] .progress-right .progress-bar {
    animation: loading-3 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="3"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="4"] .progress-right .progress-bar {
    animation: loading-4 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="4"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="5"] .progress-right .progress-bar {
    animation: loading-5 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="5"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="6"] .progress-right .progress-bar {
    animation: loading-6 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="6"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="7"] .progress-right .progress-bar {
    animation: loading-7 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="7"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="8"] .progress-right .progress-bar {
    animation: loading-8 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="8"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="9"] .progress-right .progress-bar {
    animation: loading-9 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="9"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="10"] .progress-right .progress-bar {
    animation: loading-10 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="10"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="11"] .progress-right .progress-bar {
    animation: loading-11 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="11"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="12"] .progress-right .progress-bar {
    animation: loading-12 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="12"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="13"] .progress-right .progress-bar {
    animation: loading-13 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="13"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="14"] .progress-right .progress-bar {
    animation: loading-14 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="14"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="15"] .progress-right .progress-bar {
    animation: loading-15 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="15"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="16"] .progress-right .progress-bar {
    animation: loading-16 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="16"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="17"] .progress-right .progress-bar {
    animation: loading-17 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="17"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="18"] .progress-right .progress-bar {
    animation: loading-18 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="18"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="19"] .progress-right .progress-bar {
    animation: loading-19 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="19"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
    animation: loading-20 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="20"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="21"] .progress-right .progress-bar {
    animation: loading-21 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="21"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="22"] .progress-right .progress-bar {
    animation: loading-22 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="22"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="23"] .progress-right .progress-bar {
    animation: loading-23 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="23"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="24"] .progress-right .progress-bar {
    animation: loading-24 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="24"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="25"] .progress-right .progress-bar {
    animation: loading-25 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="25"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="26"] .progress-right .progress-bar {
    animation: loading-26 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="26"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="27"] .progress-right .progress-bar {
    animation: loading-27 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="27"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="28"] .progress-right .progress-bar {
    animation: loading-28 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="28"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="29"] .progress-right .progress-bar {
    animation: loading-29 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="29"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
    animation: loading-30 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="30"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="31"] .progress-right .progress-bar {
    animation: loading-31 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="31"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="32"] .progress-right .progress-bar {
    animation: loading-32 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="32"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="33"] .progress-right .progress-bar {
    animation: loading-33 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="33"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="34"] .progress-right .progress-bar {
    animation: loading-34 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="34"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="35"] .progress-right .progress-bar {
    animation: loading-35 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="35"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="36"] .progress-right .progress-bar {
    animation: loading-36 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="36"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="37"] .progress-right .progress-bar {
    animation: loading-37 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="37"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="38"] .progress-right .progress-bar {
    animation: loading-38 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="38"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="39"] .progress-right .progress-bar {
    animation: loading-39 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="39"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
    animation: loading-40 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="40"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="41"] .progress-right .progress-bar {
    animation: loading-41 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="41"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="42"] .progress-right .progress-bar {
    animation: loading-42 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="42"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="43"] .progress-right .progress-bar {
    animation: loading-43 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="43"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="44"] .progress-right .progress-bar {
    animation: loading-44 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="44"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="45"] .progress-right .progress-bar {
    animation: loading-45 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="45"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="46"] .progress-right .progress-bar {
    animation: loading-46 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="46"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="47"] .progress-right .progress-bar {
    animation: loading-47 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="47"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="48"] .progress-right .progress-bar {
    animation: loading-48 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="48"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="49"] .progress-right .progress-bar {
    animation: loading-49 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="49"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="50"] .progress-left .progress-bar {
    animation: 0;
}

.progress[data-percentage="51"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="51"] .progress-left .progress-bar {
    animation: loading-1 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="52"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="52"] .progress-left .progress-bar {
    animation: loading-2 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="53"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="53"] .progress-left .progress-bar {
    animation: loading-3 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="54"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="54"] .progress-left .progress-bar {
    animation: loading-4 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="55"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="55"] .progress-left .progress-bar {
    animation: loading-5 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="56"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="56"] .progress-left .progress-bar {
    animation: loading-6 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="57"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="57"] .progress-left .progress-bar {
    animation: loading-7 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="58"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="58"] .progress-left .progress-bar {
    animation: loading-8 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="59"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="59"] .progress-left .progress-bar {
    animation: loading-9 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="60"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="60"] .progress-left .progress-bar {
    animation: loading-10 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="61"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="61"] .progress-left .progress-bar {
    animation: loading-11 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="62"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="62"] .progress-left .progress-bar {
    animation: loading-12 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="63"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="63"] .progress-left .progress-bar {
    animation: loading-13 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="64"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="64"] .progress-left .progress-bar {
    animation: loading-14 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="65"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="65"] .progress-left .progress-bar {
    animation: loading-15 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="66"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="66"] .progress-left .progress-bar {
    animation: loading-16 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="67"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="67"] .progress-left .progress-bar {
    animation: loading-17 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="68"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="68"] .progress-left .progress-bar {
    animation: loading-18 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="69"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="69"] .progress-left .progress-bar {
    animation: loading-19 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="70"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="70"] .progress-left .progress-bar {
    animation: loading-20 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="71"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="71"] .progress-left .progress-bar {
    animation: loading-21 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="72"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="72"] .progress-left .progress-bar {
    animation: loading-22 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="73"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="73"] .progress-left .progress-bar {
    animation: loading-23 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="74"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="74"] .progress-left .progress-bar {
    animation: loading-24 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="75"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="75"] .progress-left .progress-bar {
    animation: loading-25 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="76"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="76"] .progress-left .progress-bar {
    animation: loading-26 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="77"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="77"] .progress-left .progress-bar {
    animation: loading-27 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="78"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="78"] .progress-left .progress-bar {
    animation: loading-28 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="79"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="79"] .progress-left .progress-bar {
    animation: loading-29 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="80"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="80"] .progress-left .progress-bar {
    animation: loading-30 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="81"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="81"] .progress-left .progress-bar {
    animation: loading-31 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="82"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="82"] .progress-left .progress-bar {
    animation: loading-32 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="83"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="83"] .progress-left .progress-bar {
    animation: loading-33 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="84"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="84"] .progress-left .progress-bar {
    animation: loading-34 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="85"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="85"] .progress-left .progress-bar {
    animation: loading-35 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="86"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="86"] .progress-left .progress-bar {
    animation: loading-36 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="87"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="87"] .progress-left .progress-bar {
    animation: loading-37 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="88"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="88"] .progress-left .progress-bar {
    animation: loading-38 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="89"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="89"] .progress-left .progress-bar {
    animation: loading-39 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="90"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="90"] .progress-left .progress-bar {
    animation: loading-40 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="91"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="91"] .progress-left .progress-bar {
    animation: loading-41 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="92"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="92"] .progress-left .progress-bar {
    animation: loading-42 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="93"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="93"] .progress-left .progress-bar {
    animation: loading-43 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="94"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="94"] .progress-left .progress-bar {
    animation: loading-44 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="95"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="95"] .progress-left .progress-bar {
    animation: loading-45 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="96"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="96"] .progress-left .progress-bar {
    animation: loading-46 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="97"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="97"] .progress-left .progress-bar {
    animation: loading-47 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="98"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="98"] .progress-left .progress-bar {
    animation: loading-48 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="99"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="99"] .progress-left .progress-bar {
    animation: loading-49 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

.progress[data-percentage="100"] .progress-right .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards;
}

.progress[data-percentage="100"] .progress-left .progress-bar {
    animation: loading-50 var(--ukvd-progress-ring-animation-speed) linear forwards var(--ukvd-progress-ring-animation-speed);
}

@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(3.6);
        transform: rotate(3.6deg);
    }
}

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(7.2);
        transform: rotate(7.2deg);
    }
}

@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(10.8);
        transform: rotate(10.8deg);
    }
}

@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(14.4);
        transform: rotate(14.4deg);
    }
}

@keyframes loading-5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(18);
        transform: rotate(18deg);
    }
}

@keyframes loading-6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(21.6);
        transform: rotate(21.6deg);
    }
}

@keyframes loading-7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(25.2);
        transform: rotate(25.2deg);
    }
}

@keyframes loading-8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(28.8);
        transform: rotate(28.8deg);
    }
}

@keyframes loading-9 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(32.4);
        transform: rotate(32.4deg);
    }
}

@keyframes loading-10 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(36);
        transform: rotate(36deg);
    }
}

@keyframes loading-11 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(39.6);
        transform: rotate(39.6deg);
    }
}

@keyframes loading-12 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(43.2);
        transform: rotate(43.2deg);
    }
}

@keyframes loading-13 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(46.8);
        transform: rotate(46.8deg);
    }
}

@keyframes loading-14 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(50.4);
        transform: rotate(50.4deg);
    }
}

@keyframes loading-15 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(54);
        transform: rotate(54deg);
    }
}

@keyframes loading-16 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(57.6);
        transform: rotate(57.6deg);
    }
}

@keyframes loading-17 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(61.2);
        transform: rotate(61.2deg);
    }
}

@keyframes loading-18 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(64.8);
        transform: rotate(64.8deg);
    }
}

@keyframes loading-19 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(68.4);
        transform: rotate(68.4deg);
    }
}

@keyframes loading-20 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(72);
        transform: rotate(72deg);
    }
}

@keyframes loading-21 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(75.6);
        transform: rotate(75.6deg);
    }
}

@keyframes loading-22 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(79.2);
        transform: rotate(79.2deg);
    }
}

@keyframes loading-23 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(82.8);
        transform: rotate(82.8deg);
    }
}

@keyframes loading-24 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(86.4);
        transform: rotate(86.4deg);
    }
}

@keyframes loading-25 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(90);
        transform: rotate(90deg);
    }
}

@keyframes loading-26 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(93.6);
        transform: rotate(93.6deg);
    }
}

@keyframes loading-27 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(97.2);
        transform: rotate(97.2deg);
    }
}

@keyframes loading-28 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(100.8);
        transform: rotate(100.8deg);
    }
}

@keyframes loading-29 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(104.4);
        transform: rotate(104.4deg);
    }
}

@keyframes loading-30 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(108);
        transform: rotate(108deg);
    }
}

@keyframes loading-31 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(111.6);
        transform: rotate(111.6deg);
    }
}

@keyframes loading-32 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(115.2);
        transform: rotate(115.2deg);
    }
}

@keyframes loading-33 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(118.8);
        transform: rotate(118.8deg);
    }
}

@keyframes loading-34 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(122.4);
        transform: rotate(122.4deg);
    }
}

@keyframes loading-35 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(126);
        transform: rotate(126deg);
    }
}

@keyframes loading-36 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(129.6);
        transform: rotate(129.6deg);
    }
}

@keyframes loading-37 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(133.2);
        transform: rotate(133.2deg);
    }
}

@keyframes loading-38 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(136.8);
        transform: rotate(136.8deg);
    }
}

@keyframes loading-39 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(140.4);
        transform: rotate(140.4deg);
    }
}

@keyframes loading-40 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(144);
        transform: rotate(144deg);
    }
}

@keyframes loading-41 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(147.6);
        transform: rotate(147.6deg);
    }
}

@keyframes loading-42 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(151.2);
        transform: rotate(151.2deg);
    }
}

@keyframes loading-43 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(154.8);
        transform: rotate(154.8deg);
    }
}

@keyframes loading-44 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(158.4);
        transform: rotate(158.4deg);
    }
}

@keyframes loading-45 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(162);
        transform: rotate(162deg);
    }
}

@keyframes loading-46 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(165.6);
        transform: rotate(165.6deg);
    }
}

@keyframes loading-47 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(169.2);
        transform: rotate(169.2deg);
    }
}

@keyframes loading-48 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(172.8);
        transform: rotate(172.8deg);
    }
}

@keyframes loading-49 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(176.4);
        transform: rotate(176.4deg);
    }
}

@keyframes loading-50 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180);
        transform: rotate(180deg);
    }
}

.progress {
    /*margin-bottom: 1em;*/
}



/* ------------------------------------------------------------------------------------------------------------ */
/* CSS Print Styles*/
/* ------------------------------------------------------------------------------------------------------------ */
@media print {
    .ukvd-cp-no-print {
        display: none !important;
    }

    .ukvd-cp-text-print-black {
        color: var(--ukvd-colour-black) !important;
    }


    html, body {
        /*        width: 210mm;
        height: 297mm;
*/
    }

    .ukvd-cp-json-code-view {
        font-size: 6pt !important;
        background-color: none !important;
    }

    pre#json-renderer {
        font-size: 6pt !important;
        background-color: none !important;
    }


    /*    .container, .row {
        width: 100%;
        max-width: none;
    }
*/
    /*body.print-xl .row {
            display: flex;
            flex-wrap: wrap;
        }

        body.print-xl .col-xl-3 {
            width: 25% !important;
            max-width: 25% !important;
            box-sizing: border-box;
            display: block !important;
            float: none !important;
        }*/

    /* Optional resets */
    /*body.print-xl * {
            box-sizing: border-box;
        }*/

    /*    body.print-xl .col-4 {
        float: left;
        width: 33.3333% !important;
        max-width: 33.3333% !important;
        box-sizing: border-box;
        display: block !important;
    }

    body.print-xl .col-6 {
        width: 50% !important;
        max-width: 50% !important;
    }

    body.print-xl .col-2 {
        width: 16.6667% !important;
        max-width: 16.6667% !important;
    }

    body.print-xl .col-1 {
        width: 8.3333% !important;
        max-width: 8.3333% !important;
    }
*/


    /* Force the XL column sizes for print */
    /*.col-xl-3 {
        width: 25% !important;*/ /* col-3 should take up 25% of the width */
    /*}

    .col-xl-6 {
        width: 50% !important;*/ /* col-6 should take up 50% of the width */
    /*}*/

    /* Optionally adjust margins and padding for better print formatting */
    /*body {
        margin: 0;
        padding: 10px;
    }*/


    /*.col {
        padding: 0;
    }*/

    /*    @-moz-document url-prefix() {
    }

    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-smdm-12 {
        float: left;
    }

    .col-sm-12,
    .col-md-12 {
        width: 100%;
    }

    .col-sm-11,
    .col-md-11 {
        width: 91.66666667%;
    }

    .col-sm-10,
    .col-md-10 {
        width: 83.33333333%;
    }

    .col-sm-9,
    .col-md-9 {
        width: 75%;
    }

    .col-sm-8,
    .col-md-8 {
        width: 66.66666667%;
    }

    .col-sm-7,
    .col-md-7 {
        width: 58.33333333%;
    }

    .col-sm-6,
    .col-md-6 {
        width: 50%;
    }

    .col-sm-5,
    .col-md-5 {
        width: 41.66666667%;
    }

    .col-sm-4,
    .col-md-4 {
        width: 33.33333333%;
    }

    .col-sm-3,
    .col-md-3 {
        width: 25%;
    }

    .col-sm-2,
    .col-md-2 {
        width: 16.66666667%;
    }

    .col-sm-1,
    .col-md-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0%;
    }*/

    .visible-xs {
        display: none !important;
    }

    .hidden-xs {
        display: block !important;
    }

    table.hidden-xs {
        display: table;
    }

    tr.hidden-xs {
        display: table-row !important;
    }

    th.hidden-xs,
    td.hidden-xs {
        display: table-cell !important;
    }

    .hidden-xs.hidden-print {
        display: none !important;
    }

    .hidden-sm {
        display: none !important;
    }

    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

/* ------------------------------------------------------------------------------------------------------------ */
/* CSS Blazor Bar Chart*/
/* ------------------------------------------------------------------------------------------------------------ */
:root {
    /* Default variables */
    --blazor-barchart-line-colour: #b1b1b1;
    --blazor-barchart-line-opacity: 0.25;
    --blazor-barchart-item-gap: 2%;
    --blazor-barchart-item-base-opacity: 0.7;
    --blazor-barchart-item-default-colour: #060606;
    --blazor-barchart-item-border-colour: #b1b1b1;
    --blazor-barchart-item-border: 0px solid white;
    --blazor-barchart-item-tick-colour: #b1b1b1;
    --blazor-barchart-label-font-colour: #b1b1b1;
    --blazor-barchart-x-axis-values-font-colour: #b1b1b1;
    --blazor-barchart-series-info-font-colour: #b1b1b1;
    --blazor-barchart-label-column-value-font-size: 0.8rem;
    --blazor-barchart-label-column-font-colour: #b1b1b1;
    --blazor-barchart-x-axis-labels-font-size: 0.72rem;
    --blazor-barchart-y-axis-labels-font-size: 0.72rem;
    --blazor-barchart-x-axis-info-font-size: 1.03rem;
    --blazor-barchart-y-axis-info-font-size: 1.03rem;
    --blazor-barchart-padding-block: 1.5rem;
    --blazor-barchart-y-axis-label-rotate: 180deg;
    --blazor-barchart-grid-template-areas: "legend legend legend" "y-label y-values chart" ". .x-label";
    --blazor-barchart-grid-template-columns: auto auto 1fr;
    --blazor-barchart-grid-template-rows: auto auto 1fr auto auto;
    --blazor-barchart-bar-max-width: 120px;
    --blazor-barchart-y-axis-info-padding: 0px 12px 0px 12px;
    --blazor-barchart-y-axis-values-alignment: right;
    --blazor-barchart-tooltip-border-colour: #060606;
    --blazor-barchart-tooltip-background-colour: #060606;
    --blazor-barchart-tooltip-title-text-colour: #ffffff;
    --blazor-barchart-tooltip-value-border-colour: #ffffff2e;
    --blazor-barchart-tooltip-value-background-colour: #00000066;
    --blazor-barchart-tooltip-value-text-colour: #ffffff;
    --blazor-barchart-tooltip-percentage-border-colour: #ffffff2e;
    --blazor-barchart-tooltip-percentage-background-colour: #00000066;
    --blazor-barchart-tooltip-percentage-text-colour: #ffffff;
    --blazor-barchart-y-contract-padding-padding: 0px;
    --blazor-barchart-y-spread-padding-padding: 12px;
    --blazor-barchart-y-spread-extended-padding-padding: 36px;
    --blazor-barchart-legend-padding: 12px 0px 0px 0px;
    --blazor-barchart-legend-padding: 12px 0px 0px 0px;
    --blazor-barchart-x-axis-label-padding: 12px 0px 0px 0px;
}

/* Chart Container */
.blazor-barchart-container {
    display: grid;
    grid-template-areas: var(--blazor-barchart-grid-template-areas);
    grid-template-columns: var(--blazor-barchart-grid-template-columns);
    grid-template-rows: var(--blazor-barchart-grid-template-rows);
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    position: relative;
}

/* Legend Section */
.blazor-barchart-legend {
    position: relative;
    grid-area: legend;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: var(--blazor-barchart-legend-padding);
}

.blazor-barchart-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 124px;
}

.blazor-barchart-legend-box {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #b1b1b1;
}

.blazor-barchart-legend-info {
    margin-top: 0.5rem;
}

.blazor-barchart-label {
    font-size: 0.75rem;
    color: var(--blazor-barchart-series-info-font-colour);
}

.blazor-barchart-value {
    font-size: 0.8rem;
    color: var(--blazor-barchart-label-font-colour);
    font-weight: 600;
}

/* Y-Axis Label */
.blazor-barchart-y-axis-label {
    grid-area: y-label;
    writing-mode: vertical-rl;
    transform: rotate(var(--blazor-barchart-y-axis-label-rotate));
    text-align: center;
    font-size: var(--blazor-barchart-y-axis-info-font-size);
    font-weight: 600;
    color: var(--blazor-barchart-series-info-font-colour);
    padding-inline: 0.5rem;
    padding: var(--blazor-barchart-y-axis-info-padding);
}

.blazor-barchart-y-axis-values {
    grid-area: y-values;
    display: grid;
    grid-template-rows: repeat(var(--blazor-barchart-y-axis-label-count), 1fr);
    align-self: stretch;
    justify-self: end;
    z-index: 0;
    --blazor-barchart-line-spacing: calc(100% / var(--blazor-barchart-line-count));
    row-gap: var(--blazor-barchart-line-spacing);
    padding-block: var(--blazor-barchart-padding-block);
}

    .blazor-barchart-y-axis-values span {
        font-size: var(--blazor-barchart-y-axis-labels-font-size);
        font-weight: 600;
        color: var(--blazor-barchart-x-axis-values-font-colour);
        text-align: var(--blazor-barchart-y-axis-values-alignment);
        padding-right: 0.5rem;
        transform: translateY(50%);
        line-height: 0;
    }

/* X-Axis Label */
.blazor-barchart-x-axis-label {
    grid-area: x-label;
    text-align: center;
    font-size: var(--blazor-barchart-x-axis-info-font-size);
    font-weight: 600;
    color: var(--blazor-barchart-series-info-font-colour);
    padding: var(--blazor-barchart-x-axis-label-padding);
    margin-bottom: var(--blazor-barchart-y-contract-padding-padding);
}

/* Bar Chart Item Container */
.blazor-barchart {
    height: 8rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: var(--blazor-barchart-item-gap);
    padding-inline: var(--blazor-barchart-item-gap);
    padding-block: var(--blazor-barchart-padding-block);
    position: relative;
    isolation: isolate;
    grid-area: chart;
}

    /* Grid Lines */
    .blazor-barchart::after {
        content: "";
        position: absolute;
        inset: var(--blazor-barchart-padding-block) 0;
        z-index: -1;
        --blazor-barchart-line-width: 1px;
        --blazor-barchart-line-spacing: calc(100% / var(--blazor-barchart-line-count));
        background-image: repeating-linear-gradient( to top, transparent 0 calc(var(--blazor-barchart-line-spacing) - var(--blazor-barchart-line-width)), var(--blazor-barchart-line-colour) 0 var(--blazor-barchart-line-spacing) );
        box-shadow: 0 var(--blazor-barchart-line-width) 0 var(--blazor-barchart-line-colour);
        /*opacity: var(--blazor-barchart-line-opacity);*/
        border-left: 1px dashed var(--blazor-barchart-line-colour);
        border-right: 1px dashed var(--blazor-barchart-line-colour);
    }

    /* Bar Item */
    .blazor-barchart > .blazor-barchart-item {
        border-radius: 8px 8px 0px 0px;
        height: calc(1% * var(--blazor-barchart-val));
        background-color: var(--blazor-barchart-item-colour, var(--blazor-barchart-item-default-colour));
        opacity: var(--blazor-barchart-item-base-opacity);
        border: var(--blazor-barchart-item-border);
        border-bottom-width: 0px;
        position: relative;
        animation: blazor-barchart-item-height 1s ease forwards;
        max-width: var(--blazor-barchart-bar-max-width);
        width: auto;
        flex-grow: 1;
        flex-basis: 0;
    }

        /* Dotted Vertical Line */
        .blazor-barchart > .blazor-barchart-item[data-index]::before {
            content: "";
            position: absolute;
            top: -100%;
            bottom: 0;
            left: 50%;
            width: 1px;
            border-left: 1px dotted var(--blazor-barchart-item-tick-colour);
            transform: translateX(-50%);
        }

/* Change opacity when hovering over a specific item (bar) */
.blazor-barchart-item:hover {
    opacity: 1;
    z-index: 3;
    font-weight: 800;
}

/* Optional: style for the hovered bar itself */
.blazor-barchart-item {
    box-sizing: border-box;
    transition: border-top 0.2s ease, border-left 0.2s ease, border-right 0.2s ease, box-shadow 0.2s ease;
}

    /* Tooltip container */
    .blazor-barchart-item .blazor-barchart-tooltip {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--blazor-barchart-tooltip-background-colour);
        box-shadow: 0px 4px 9px 3px #0000006e;
        border: 1px solid var(--blazor-barchart-tooltip-border-colour);
        padding: 8px 7px;
        border-radius: 8px;
        min-width: 212px;
        max-width: 450px;
        text-align: center;
        font-size: 0.75rem;
        z-index: 2;
    }

    /* On hover, show the tooltip */
    .blazor-barchart-item:hover .blazor-barchart-tooltip {
        display: block;
        color: var(--blazor-barchart-tooltip-title-text-colour);
    }

    /* Tooltip title styles */
    .blazor-barchart-item .tooltip-title {
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--blazor-barchart-tooltip-title-text-colour);
        margin-bottom: 7px;
    }

    /* Tooltip value styles */
    .blazor-barchart-item .tooltip-value {
        font-weight: normal;
        font-size: 0.9rem;
        margin-bottom: 4px;
        background-color: var(--blazor-barchart-tooltip-value-background-colour);
        border: 1px solid var(--blazor-barchart-tooltip-value-border-colour);
        color: var(--blazor-barchart-tooltip-value-text-colour);
        border-radius: 4px;
        padding: 4px;
    }

    /* Tooltip percent styles */
    .blazor-barchart-item .tooltip-percent {
        font-weight: normal;
        font-size: 0.9rem;
        background-color: var(--blazor-barchart-tooltip-percentage-background-colour);
        border: 1px solid var(--blazor-barchart-tooltip-percentage-border-colour);
        color: var(--blazor-barchart-tooltip-percentage-text-colour);
        border-radius: 4px;
        padding: 4px;
    }

    .blazor-barchart-item:hover::after {
        opacity: 1;
    }

@keyframes blazor-barchart-item-height {
    from {
        height: 0;
    }
}

/* Label and Value positioning inside each item */
.blazor-barchart > .blazor-barchart-item > * {
    position: absolute;
    text-align: center;
}

.blazor-barchart > .blazor-barchart-item > .blazor-barchart-label {
    inset: 100% 0 auto 0;
    font-size: var(--blazor-barchart-y-axis-labels-font-size);
    font-weight: 600;
    color: var(--blazor-barchart-label-font-colour);
    padding-top: 22px;
}

.blazor-barchart > .blazor-barchart-item > .blazor-barchart-value {
    inset: auto 0 100% 0;
    font-size: var(--blazor-barchart-label-column-value-font-size);
    color: var(--blazor-barchart-label-column-font-colour);
    font-weight: 600;
    padding-bottom: 7px;
}

.blazor-barchart > .blazor-barchart-item::before {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 14px;
    border-right: 1px solid var(--blazor-barchart-item-tick-colour);
    /*height: calc(var(--blazor-barchart-height) - 40px);*/
    /*background: repeating-linear-gradient(to top, var(--blazor-barchart-item-tick-colour) 0, var(--blazor-barchart-item-tick-colour) 4px, transparent 8px, transparent 8px);*/
    /*opacity: var(--blazor-barchart-line-opacity);*/
    z-index: -1;
}