:root {
    --preview-layout-bg-color: #00639C;
    --preview-layout-text-base-color: #FFF;
    --preview-layout-text-base-hover: #FF8400;
    --preview-layout-text-primary-color: #FF8400;
    --preview-layout-text-primary-hover: #ff8400cc;
}

.colorpicker-block {
    margin-bottom: .25rem !important;
}

    .colorpicker-block > div {
        display: inline-block;
    }

    .colorpicker-block > a {
        color: var(--bs-card-color);
        display: inline-block;
        text-decoration: none;
    }

    .colorpicker-block:hover {
        background-color: rgba(230, 233, 235, .7) !important;
    }

.show-color-only > .k-input-inner {
    padding: 0 !important;
}

.show-color-only > button {
    display: none !important;
}


/*********************
    Preview Color Classes
*********************/
.preview-header {
    width: 100%;
    background-color: var(--preview-layout-bg-color);
}

.preview-layout-text-base {
    color: var(--preview-layout-text-base-color);
    white-space: nowrap;
    text-decoration: none;
}

a.preview-layout-text-base:hover {
    color: var(--preview-layout-text-base-hover);
}

.preview-layout-text-primary {
    color: var(--preview-layout-text-primary-color);
    white-space: nowrap;
    text-decoration: none;
}

a.preview-layout-text-primary:hover {
    color: var(--preview-layout-text-primary-hover);
}

.preview-button.k-button-solid-base {
    border-color: var(--preview-kendo-color-base, #dee2e6);
    color: var(--preview-kendo-color-on-base, #212529);
    background-color: var(--preview-kendo-color-base, #dee2e6);
}

    .preview-button.k-button-solid-base:hover, .preview-button.k-button-solid-base.k-hover {
        border-color: var(--preview-kendo-color-base-hover, #ced4da);
        background-color: var(--preview-kendo-color-base-hover, #ced4da);
    }

    .preview-button.k-button-solid-base:active, .preview-button.k-button-solid-base.k-active {
        border-color: var(--preview-kendo-color-base-active, #bdc4cb);
        background-color: var(--preview-kendo-color-base-active, #bdc4cb);
    }

.preview-button.k-button-solid-primary {
    border-color: var(--preview-kendo-color-primary, #0d6efd);
    color: var(--preview-kendo-color-on-primary, #fff);
    background-color: var(--preview-kendo-color-primary, #0d6efd);
}

    .preview-button.k-button-solid-primary:hover, .preview-button.k-button-solid-primary.k-hover {
        border-color: var(--preview-kendo-color-primary-hover, #0c64e4);
        background-color: var(--preview-kendo-color-primary-hover, #0c64e4);
    }

    .preview-button.k-button-solid-primary:active, .preview-button.k-button-solid-primary.k-active {
        border-color: var(--preview-kendo-color-primary-active, #0a58ca);
        background-color: var(--preview-kendo-color-primary-active, #0a58ca);
    }

/*********************
    RadioButtonList EM Logos
*********************/

.list-item-logo {
    height: 60px;
}