/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





 */
:root {
  --text-size-xs: 0.75rem;
  --text-size-sm: 0.875rem;
  --text-size-base: 1rem;
  --text-size-lg: 1.125rem;
  --text-size-xl: 1.25rem;
  --text-size-2xl: 1.5rem;
  --text-size-3xl: 1.875rem;
  --text-size-4xl: 2.25rem;
  --text-size-5xl: 3rem;
  --bg-readonly: #661515;
  --bg-block: #d52b2b;
  --bg-allow: #1ca81b;
  --bg-isolate: #4a6f7f;
  --body-bg: #faf9f8;
  --nav-bg: #0b2458;
  --primary-dark: #0b2458;
  --primary-dark-hover: #2a4887;
  --status-success: #2ebf85;
  --primary-color: #2b51a2;
  --primary-hover: #345bb0;
  --primary-active: #224183;
  --secondary-color: #1270e5;
  --primary-link-color: #3765c5;
  --text-color: #242424;
  --td-helper-bg-color: #e9e9e9;
  --upgrade: #815fc2;
  --upgrade-opacity: rgba(129,95,194,0.2);
  --pw-hygiene-color: #7e62d7;
  --social-eng-color: #f5a919;
  --malware-risk-color: #4d7df8;
  --sensitive-data-color: #f1645a;
  --text-gray: #afafaf;
  --tt-heatmap-border: rgb(6 22 57);
  --chat-width: 60rem;

}

h6 {
    font-size: var(--text-size-base);
}

h5 {
    font-size: var(--text-size-lg);
}

h4 {
    font-size: var(--text-size-xl);
}

h3 {
    font-size: var(--text-size-2xl);
}

h2 {
    font-size: var(--text-size-3xl);
}

h1 {
    font-size: var(--text-size-4xl);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

.m-0 {
    margin: 0;
}

.w-100 {
    width: 100%;
}

.p-4 {
    padding: 1.5rem;
}

.d-none {
    display: none !important;
}

h2 {
    font-size: var(--text-size-2xl);
}

html,
body {
    min-height: 100vh;
}

body {
    font-family: "Inter", sans-serif;
    color: #242424;
    background: var(--body-bg);
    padding: calc(2rem + 4rem) 2rem 2rem calc(18.75rem + 2rem);
    overflow-y: scroll;
    overflow-x: hidden;
}

.block-wrapper {
    padding-bottom: 2rem;
}

.text-highlight {
    color: var(--primary-color);
}

#core, main, .wrapper, .chat-container {
    min-height: calc(100vh - 8rem);
}

a {
    color: var(--primary-link-color);
    cursor: pointer;
}

main {
    position: relative;
}

.wrapper {

}

.custom-urls .page:not(span) {
    margin-bottom: 0;
}

.page:not(span) {
    margin-bottom: 2rem;
}
.page:not(span) .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.page:not(span) .page-header .page-actions {
    display: flex;
    gap: 0.5rem;
}

tr:hover .host-button,
.category:hover .host-button {
    background: #f1f1f1;
    border-color: #9c9c9c;
}
tr:hover .host-button span,
.category:hover .host-button span {
    display: flex;
}

.category .host-button {
    font-size: 1rem;
}

.host-button {
    outline: none;
    padding: 0.25rem 2.5rem 0.25rem 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    border-radius: 0.1875rem;
    position: relative;
    font-size: 0.875rem;
    display: inline-flex;
    & img {
        margin-right: 0.375rem;
    }
}
.host-button:focus {
    outline: none;
}
.host-button:hover {
    background: #f1f1f1;
    border-color: #9c9c9c;
}
.host-button:hover span {
    display: flex;
}
.host-button span {
    display: none;
    position: absolute;
    right: 0;
    width: 2rem;
    height: 100%;
    background: #bbb;
    border-left: 1px solid #9c9c9c;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
}
.host-button span svg {
    fill: #636363;
}

.text-link {
    color: var(--primary-link-color);
    cursor: pointer;
}

.diagnostic .host-button {
    background: #f1f1f1;
    border-color: #9c9c9c;
    text-align: left;
    word-break: break-all;
}
.diagnostic .host-button span {
    display: flex;
}

.md5 {
    font-family: monospace;
    font-size: 0.625rem;
    white-space: nowrap;
    display: block;
    color: #bababa;
    text-align: center;
}

.api-token {
    font-family: monospace;
    white-space: nowrap;
}

/* .btn-outline. prefix added in DXE-1375 (markup: `btn-outline btn-primary
   download-with-md5 ...`): used to beat the base `.btn-outline` padding by
   source order; now needs (0,2,0) to win on specificity. Deliberately NOT
   (0,3,0) with .btn-primary too: the policy_groups/index.html.erb caller also
   carries .btn-sm, and originally `.btn-outline.btn-sm` (0,2,0) beat
   `.download-with-md5` (0,1,0) on specificity -- at (0,2,0) here, btn-sm still
   wins that tie via the later-loaded Tailwind stylesheet, exactly matching the
   original cascade; (0,3,0) would flip it. */
.btn-outline.download-with-md5 {
    padding: 0.5rem;
    width: 16rem;
}
.download-with-md5 > span {
    padding-left: 0.5rem;
}
.download-with-md5 img {
    height: 1.875rem;
    width: 1.875rem;
    object-fit: contain;
}
.download-with-md5 svg {
    margin-inline: 0;
    width: 2rem;
    height: 2rem;
}
.download-with-md5.windows svg {
    fill: #11adef;
}

.switch:not(.switcher .switch):not(.docs-search-result .switch) {
    padding: 0.25rem 0.5rem;
    background: rgba(37, 183, 178, 0.2117647059);
    color: #329c7b;
    font-size: 0.775rem;
    border-radius: 0.3rem;
    font-weight: bold;
}

.switch:not(.switcher .switch):not(.docs-search-result .switch).disabled {
    background-color: #e5e7eb;
    color: #666;
}

.pagination {
    margin-top: 2rem;
}
.pagination span a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0;
    box-shadow: none;
    background: #f1f1f1;
    border-radius: 0.3rem;
    font-size: 0.875rem;
}
.pagination span a:hover {
    background: #e7e7e7;
}
.pagination .page.current {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0;
    box-shadow: none;
    background: #333;
    color: #fff;
    border-radius: 0.3rem;
    font-size: 0.875rem;
}

.box {
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 0.1875rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.2);
}

p.notice {
    padding: 1rem 1.5rem;
    border: 2px solid #d1dedd;
    color: #527e7d;
    font-weight: bold;
    margin: 1rem 0;
    background-color: rgba(111, 152, 151, 0.13);
}

.alert {
    padding: 1rem 1.5rem;
    font-weight: bold;
    margin: 1rem 0;
    background: #ffe8e8;
    color: #7f4343;
    border-radius: 0.1875rem;
    border: 2px solid #f3d5d5;
}
.alert.alert-warning {
    background: #fff1e7;
    padding: 1rem 1.5rem;
    font-weight: bold;
    color: #bd855b;
}
.alert.alert-warning.m-0 {
    margin: 0;
}
.alert.alert-info {
    background: #e8f4fd;
    padding: 1rem 1.5rem;
    font-weight: bold;
    color: #2a6496;
    border: 2px solid #bce0f7;
}

.group-info {
    font-size: 0.625rem;
    font-style: italic;
}

.badge {
    padding: 0.125rem 0.375rem;
    background: #2f8985;
    color: #fff;
    font-weight: bold;
    border-radius: 0.175rem;
    white-space: nowrap;
}

.badge.nfr {
    font-size: 0.625rem;
    background: #333;
    border-radius: 0.125rem;
}

.badge a {
    color: #fff;
}
.badge.template-1 {
    background: #474747;
}
.badge.template-2 {
    background: #338a80;
}
.badge.template-3 {
    background: #4979d8;
}
.badge.template-4 {
    background: #e07c12;
}
.badge.template-linked {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.badge.badge-0 {
    background: #dc3545;
}

.number-badge {
    background-color: #58647d;
    padding: 0.125rem 0.375rem;
    border-radius: 0.175rem;
}

.long-badge span {
    background-color: #e2e2e2;
    padding: 0.125rem 0.375rem;
    border-radius: 0.125rem;
    font-weight: 500;
    color: #242424;
}

.single-block {
    padding: 1.5rem;
    background-color: #fff;
    box-shadow:
        0 0.1rem 0.225rem 0 rgba(0, 0, 0, 0.13),
        0 0.01875rem 0.05625rem 0 rgba(0, 0, 0, 0.11);
    border-radius: 0.1875rem;
    position: relative;
}

.advanced-block .advanced-settings {
    padding: 1.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    background: #eaeaea;
}

.single-block.small {
    padding: 1rem;
}

.single-block.xsmall {
    padding: 0.5rem 1rem;
}

.single-block.multi {
    padding-left: 0;
    padding-right: 0;
}
.single-block.multi .desc {
    padding-left: 1.5rem;
    width: calc(100% - (30% + 1.5rem));
}
.single-block.multi::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;
    border-left: 1px solid #eeeeee;
    background-color: rgba(0, 0, 0, 0.01);
}
.single-block.multi .block {
    box-shadow: none;
    margin-bottom: 0;
    margin-top: -0.0625rem;
}
.single-block.multi .block:last-of-type .block-left {
    border-bottom: 1px solid #f1f1f1;
}
.single-block.multi .block:hover .block-left {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid #f1f1f1;
    z-index: 1;
}
.single-block.multi .block .block-left {
    padding-block: 1rem;
    border-top: 1px solid rgba(238, 238, 238, 0.54);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    padding: 0 0 0 1.5rem;
}
.single-block.multi .block .block-right {
    padding: 0;
    padding-block: 1rem;
    border-top: 1px solid rgba(238, 238, 238, 0.54);
    border-bottom: 1px solid rgba(238, 238, 238, 0.54);
}
.single-block.multi .browser-brand {
    width: 2.25rem;
}
.single-block.multi .browser-brand-line {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.custom-url-search-block {
    background: transparent;
    margin-top: -1rem;
    z-index: 1;
}

.block {
    position: relative;
    display: flex;
    margin-bottom: 2rem;
    background-color: #fff;
    box-shadow:
        0 0.1rem 0.225rem 0 rgba(0, 0, 0, 0.13),
        0 0.01875rem 0.05625rem 0 rgba(0, 0, 0, 0.11);
    border-radius: 0.125rem;
    &.bordered {
        border: 1px solid #eeeeee;
        box-shadow: none;
    }
}

.block-outline {
    box-shadow: none;
    border: 1px solid #ddd;
}

.block.light {
    font-size: 0.875rem;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid #ddd;
}
.block.light .block-left {
    padding: 0;
    border-radius: 0;
}
.block.light .block-left p {
    margin-bottom: 0.5rem;
}
.block.light .block-left p:last-child {
    margin: 0;
}
.block.light .block-right {
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
    justify-content: flex-end;
}
.block .block-left {
    padding: 1.5rem;
    width: 70%;
    border-radius: 0.125rem 0 0 0.125rem;
    position: relative;
}
.block .block-left.block-w100 {
    width: 100%;
}

.block .block-right {
    border-left: 1px solid #eeeeee;
    background-color: rgba(0, 0, 0, 0.01);
    padding: 2rem;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    &.narrow {
        padding: 1.5rem;
    }
}

.block .warn a {
    font-weight: bold;
}
.block .custom-checkbox-webfilter {
    display: flex;
    align-items: center;
}
.block .custom-checkbox-webfilter input {
    margin-right: 0.5rem;
}
.block .custom-checkbox-webfilter label {
    margin-right: 0.5rem;
    margin-bottom: 0;
}
.block select.form-control {
    width: 100%;
    background-color: #fff;
    padding-right: 2.4rem;
}
.block .form-group {
    margin: 0;
}

.block .get-help,
.single-block .get-help {
    position: absolute;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 0 0.1875rem 0 0.1875rem;
    display: flex;
    align-items: center;
    color: rgba(65, 129, 161, 0.875);
    padding: 0.3125rem 0.5625rem 0.3125rem 0.4375rem;
    font-size: 0.775rem;
    font-weight: bold;
    box-shadow: inset 0.1875rem -0.25rem 0.375rem -0.25rem rgba(59, 91, 107, 0.23);
    transition: all 0.1s linear;
}
.block .get-help svg path,
.single-block .get-help svg path {
    fill: orange;
    fill-opacity: 0.01;
    animation: colorChange 2s 1 forwards;
}
.block .get-help:hover,
.single-block .get-help:hover {
    background-color: rgba(65, 129, 161, 0.07);
    color: rgb(65, 129, 161);
}

@keyframes colorChange {
    0% {
        fill-opacity: 0.01;
    }
    50% {
        fill-opacity: 0.4;
    }
    100% {
        fill-opacity: 1;
        fill: orange;
    }
}
.block .get-help {
    border-top-right-radius: 0;
}

.block-wrapper h4,
.block-container h4 {
    margin-bottom: 1rem;
}



.web-filters-table {
    position: relative;
}
.web-filters-table tbody tr:nth-child(even) {
    background: #fff;
}
.web-filters-table tr.highlight {
    animation: highlight 2000ms ease-out;
}
.web-filters-table th {
    position: sticky;
    background: #2e3337;
    color: #fff;
    z-index: 1;
    top: 4rem;
}
.web-filters-table tbody tr:hover {
    background: #f9f9f9;
    cursor: pointer;
}
.web-filters-table td.category-cell {
    vertical-align: middle;
}
.web-filters-table .category-desc {
    color: #757575;
}
.web-filters-table .category-name {
    opacity: 0.8;
    margin-left: 0.3125rem;
}
.web-filters-table .category-selected {
    color: #000;
    opacity: 1;
}
.web-filters-table .urls a {
    font-size: 85%;
}
.web-filters-table .group-name {
    font-weight: bolder;
    background: #f1f1f1;
}

.iso-select .selected {
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    text-align: left;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.5rem) 50%;
}
.iso-select .dropdown {
    display: none;
    border: 1px solid #ddd;
    border-top: none;
}
.iso-select.visible .item {
    border-bottom: 1px solid #f1f1f1;
}
.iso-select.visible .selected {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.iso-select.visible .dropdown {
    display: block;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.iso-select.visible .dropdown .item:last-child {
    border-bottom: none;
}
.iso-select .item {
    padding-left: 2.8125rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 50%;
}
.iso-select .item-0 {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23ccc' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}
.iso-select .item-1 {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='green'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
.iso-select .item-2 {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z'/%3E%3C/svg%3E");
}
.iso-select .item-3 {
    background-image: url(/assets/isoolate-7f27c64410fa8c9b0ab5622fa4ca31788d67a1be3046d3e34ffe38bed5d7a017.svg);
}
.iso-select .item-4 {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23.093' viewBox='0 0 206.695 238.672' fill='maroon' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M33.255 78.86l24.5 14.033 36.9-21.336-24.26-14.17-37.13 21.473m148.77-4.95l24.67-14.243L103.347 0 0 59.668 24.67 73.9l45.715-26.392L149 92.977l24.353-14.1-78.597-45.44 8.593-4.962L182.03 73.9'/%3E%3Cpath d='M173.356 78.862L149 92.977v42.928l24.358-14.115V78.862m8.668-4.952v52.765l-78.68 45.484-.005 28.152 78.686-45.475v9.924l-78.68 45.426v28.485L206.697 179V59.668l-24.67 14.243'/%3E%3Cpath d='M103.346 172.16L66.26 150.672v28.152l37.08 21.488.005-28.152m-45.6-79.272L33.255 78.86v90.857l-8.587-4.958V73.9L0 59.668v119.336l103.346 59.67V210.19l-45.6-26.33V92.89'/%3E%3C/svg%3E%0A");
}

#mime-type-control .search {
    margin: 0.75rem 0 0.75rem 0;
}

#mime-type-control .mime-header {
    background: #fff;
    position: sticky;
    top: 0;
}

#mime-type-control .mime-list {
    height: 25rem;
    overflow-y: scroll;
}
#mime-type-control .mime-list li {
    display: flex;
    padding: 0.4375rem 0;
    border-bottom: 1px solid #f1f1f1;
}
#mime-type-control .mime-list li:hover {
    background: #f9f9f9;
    cursor: pointer;
}
#mime-type-control .mime-list li.head {
    font-size: 0.75rem;
    color: #aaa;
}
#mime-type-control .mime-list .check {
    width: 2.625rem;
    display: flex;
    justify-content: center;
}
#mime-type-control .mime-list .type {
    width: 56%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#mime-type-control .mime-list .desc {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.75rem;
    color: #a2a2a2;
    margin-top: -0.125rem;
}

.gname {
    padding: 0 0.75rem;
    background: #143758;
    color: #fff;
    border-radius: 0.25rem;
}
.gname a {
    color: #fff;
}

.note {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #e2eaf0;
    display: flex;
    align-items: center;
    border-radius: 0.1875rem;
}
.note svg {
    margin-right: 1rem;
    fill: #52758f;
}

.info-section {
    display: flex;
    margin: 1rem -0.5rem 0 -0.5rem;
}
.info-section > div {
    margin: 0 0.5rem;
    width: 25%;
    padding: 2rem;
    border-radius: 0.625rem;
    border: 2px solid #f1f1f1;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info-section > div > div:first-child {
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.info-section > div > div:last-child {
    font-size: 1.375rem;
}

.form-group select.multi {
    height: auto;
}

div.score {
    color: #fff;
    border-radius: 0.125rem;
    padding: 0 0.375rem;
    font-weight: bold;
    display: inline-block;
    font-size: 0.75rem;
    border: 1px solid transparent;
    background: #ddd;
    white-space: nowrap;
}
div.score.score--1 {
    background: #ddd;
}
div.score.score-0 {
    background: #333;
}
div.score.score-1 {
    background: #7b7b7b;
}
div.score.score-2 {
    background: #4ca74c;
}
div.score.score-3 {
    background: #daa43c;
}
div.score.score-4 {
    background: #e24c4c;
}
div.score.score-5 {
    border: 1px solid #bfbfbf;
    color: #aaa;
}

.tabs {
    display: flex;
    border-bottom: 2px solid #f1f1f1;
}
.tabs .tab a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    text-align: center;
    color: #aaaaaa;
    font-weight: bold;
    transition: all 0.1s linear;
}
.tabs .tab a svg {
    fill-opacity: 0.2;
}
.tabs .tab a:hover {
    background: #f9f9f9;
    color: #585858;
}
.tabs .tab a:hover svg {
    fill-opacity: 0.4;
}
.tabs .tab.active a {
    color: #3765c5;
}
.tabs .tab.active a::after {
    content: "";
    position: absolute;
    bottom: -0.125rem;
    left: 0;
    width: 100%;
    height: 0.125rem;
    background-color: #3765c5;
}
.tabs .tab.active a svg {
    fill: #585858;
    fill-opacity: 1;
}
.tabs.file-transfer .tab a {
    text-align: left;
    padding: 1rem 1rem 1rem 3rem;
    background-repeat: no-repeat;
    background-position: 1rem 50%;
}
.tabs.file-transfer .tab a.file-transfer {
    background-image: url(/assets/file_transfer_colored-132e422e38973558f52606c53aa5dd6fc2b6550934aaab6eb01052b0d6cada1d.svg);
}
.tabs.file-transfer .tab a.web-filter {
    background-image: url(/assets/globe-colored-daaba105b3fb5b5580f1010cf0b0d820f9c2e2ef918339ff9454c0e86c4abbf7.svg);
}
.tabs.file-transfer {
    padding: 0.4rem 0.4rem 0 0.4rem;
    background: #f1f1f1;
    justify-content: flex-start;
}
.tabs.file-transfer .tab a {
    font-weight: bold;
    border-color: transparent;
    padding: 1rem 1.5rem 1rem 2.8rem;
}
.tabs.file-transfer .tab.active a {
    background-color: #fff;
    border-radius: 0.1875rem 0.1875rem 0 0;
}

.month-selection {
    display: flex;
    justify-content: center;
    align-items: center;
}
.month-selection a {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    background: #fff;
    outline: none;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-block;
    border-radius: 0.3rem;
    box-shadow: 0 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.2);
}
.month-selection a.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.month-selection span {
    display: inline-flex;
    padding: 0 1rem;
    font-weight: bold;
    font-size: 0.875rem;
    text-align: center;
    justify-content: center;
}

.month-selection span:last-of-type {
    padding-right: 0;
}

.usages h4 {
    padding-left: 0.375rem;
    margin-bottom: 1rem;
}
.usages h4.active {
    color: #2f8985;
}
.usages h4.non_renewing {
    color: #8a6623;
}
.usages h4.in_trial {
    color: #7d35be;
}

.pill {
    border-radius: 6.25rem;
    padding: 0.125rem 0.75rem;
    color: #2f8985;
    background: rgba(47, 137, 133, 0.2);
    font-weight: bold;
}
.pill.pill-non_renewing {
    color: #8a6623;
    background: rgba(255, 165, 0, 0.2);
}
.pill.pill-in_trial {
    color: #7d35be;
    background: rgba(134, 0, 255, 0.2);
}

.pill.pill-trial-end-activate {
    color: darkcyan;
    background: lime;
}

.pill.pill-trial-end-cancel {
    color: maroon;
    background: lightcoral;
}

.pill.pill-alert {
    background: #ffe7e7;
    color: #662222;
}

.custom-urls .custom-urls-header {
    display: flex;
}
.custom-urls .table-scroll-container {
    overflow-y: auto;
    max-height: calc(100vh - 26.25rem);
    scrollbar-width: auto;
    scrollbar-color: #b5b5b5 #ededed;
    /* Chrome, Edge, and Safari */
}
.custom-urls .table-scroll-container::-webkit-scrollbar {
    width: 0.375rem;
}
.custom-urls .table-scroll-container::-webkit-scrollbar-track {
    background: #ededed;
    border-radius: 0.625rem;
}
.custom-urls .table-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 0.625rem;
    border: 0;
}
.custom-urls .custom-urls-count {
    padding: 0.125rem 0.375rem;
    border-radius: 0.1875rem;
    color: #fff;
    font-weight: normal;
    background: rgb(26, 26, 26);
    font-size: 0.675rem;
}

.block-note {
    padding: 1.3rem 1rem 1.3rem 5rem;
    border-radius: 0.1875rem;
    background-repeat: no-repeat;
    background-position: 1rem 50%;
    background-size: 3rem;
}
.block-note.block-note-info {
    background-color: #e7fcff;
    background-image: url(/assets/info-icon-d86987f63cf4694b42079734573ad7ba36d89d32a88a2d1fc23c771d37f21d83.svg);
}
.block-note.block-note-error {
    background-color: #ffebeb;
    background-image: url(/assets/danger-icon-6dcc2ca02ebd0e3b86103a21b4fefbac44a391af3ab93eab93fe074034790ff8.svg);
}
.block-note.block-note-warning {
    background-color: #fff3dc;
    background-image: url(/assets/warning-icon-dce7d6ec59f5d9814f3966bacc6dc1156c0ca5945f17c01797948568f1968236.svg);
}

.backup-codes ul {
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    border: 2px dashed #ddd;
}
.backup-codes ul li {
    width: 40%;
}

.two-factor-settings {
    margin: 0 -1rem;
    display: flex;
}
.two-factor-settings > div {
    border: 2px solid #f1f1f1;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 0 1rem;
    width: 50%;
}
.two-factor-settings .qr {
    display: flex;
    justify-content: center;
    border-top: 2px solid #f1f1f1;
    border-bottom: 2px solid #f1f1f1;
    padding: 1rem 0;
}

.supported-authenticators > div {
    display: flex;
    align-items: center;
}
.supported-authenticators span {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    margin-right: 1rem;
}
.supported-authenticators span img {
    width: 2.25rem;
    margin-right: 0.5rem;
}

.beta-channel-bar {
    background: rgba(103, 152, 31, 0.16);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.beta-channel-bar .beta-tag {
    font-size: 0.875rem;
    top: 0;
    margin-left: 0;
}

.beta-tag {
    background: #5d9a1d;
    padding: 0.25rem 0.375rem;
    border-radius: 0.125rem;
    font-size: 0.625rem;
    margin-left: 0.375rem;
    color: #fff;
    position: relative;
    top: -0.125rem;
}
.beta-tag.mini {
    top: 0;
    font-size: 0.5rem;
    padding: 0.125rem 0.25rem;
}

.tag-base {
    padding: 0.25rem 0.375rem;
    border-radius: 0.125rem;
    font-size: 0.625rem;
    color: #fff;
    position: relative;
    top: -0.125rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

.tag-green,
.tag-active,
.tag-ongoing {
    background: #5d9a1d;
}

.tag-blue,
.tag-upcoming {
    background: #348bff;
}

.tag-dark,
.tag-completed,
.tag-nousers {
    background: #484848;
}

.tag-red {
    background: #aa0410;
}

.tag-gray {
    background: #444444;
}

.tag-info {
    background: #a98a05;
    padding: 0.25rem 0.375rem;
    border-radius: 0.125rem;
    font-size: 0.625rem;
    margin-left: 0.375rem;
    color: #fff;
    position: relative;
    top: -0.125rem;
}

.api-key {
    padding: 1rem;
    background: #f9f9f9;
    font-weight: bold;
    border-radius: 0.125rem;
}
.api-key > span {
    padding-left: 0.5rem;
    font-weight: 400;
}

.installation .alert {
    padding: 0.5rem 1rem;
    font-weight: 400;
    margin: 1rem 0;
    background: #ffe7e7;
    color: #662222;
    border-radius: 0.1875rem;
}
.installation .success {
    background: #dfffda;
    padding: 0.5rem 1rem;
    font-weight: 400;
    margin: 1rem 0;
    color: #000;
    border-radius: 0.1875rem;
}
.installation .block-left:not(.status) {
    padding-left: 2rem;
}
.installation .block-right {
    flex-direction: column;
}
.installation .ext {
    width: 12.5rem;
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: 1rem 50%;
    padding: 1rem 1rem 1rem calc(1rem + 2rem + 1rem);
    border: 1px solid #ddd;
    border-radius: 0.1875rem;
    color: #242424;
}
.installation .ext:hover {
    border-color: #ccc;
    background-color: #f9f9f9;
}
.installation .google-ext {
    background-image: url(/assets/chrome-5fa5f9ef272e3636065219ecb46caed2e252a1967ec410fd6bf4d72bfb022d11.svg);
}
.installation .edge-ext {
    background-image: url(/assets/edge-1100c16033e58a936e1f0b6f73d2999bf7bc1faab8f0a073349fa10c1d8a1f76.svg);
}
.installation .firefox-ext {
    background-image: url(/assets/firefox-ee0ca1215b200ac04a67ae16401627ef5a690c105a03e9d357c3109d0f28008e.svg);
}
.installation .ios-ext {
    background-image: url(/assets/appstore-e6701361afed8c2cf99f0c0593ad2167b43ec07b5bb5cfbbb6281dde63162c3f.svg);
}
.installation .android-ext {
    background-image: url(/assets/playstore-d5553736f8f65d77f5a690fae2f4713a9d22df5de3896c01b8123e8afa5f3533.svg);
}
.installation div.or {
    padding-bottom: 2rem;
    font-weight: bold;
    color: #666;
}
.installation h4 {
    color: #666;
}
.installation p.note {
    background: #f2f2f2;
}
.installation hr {
    padding-bottom: 1rem;
}

.helper-badge {
    padding: 0.125rem 0.375rem;
    background: var(--td-helper-bg-color);
    color: #242424;
    font-weight: 500;
    border-radius: 0.125rem;
}
.helper-badge.danger {
    background: #ffe8e8;
}

.helper {
    background: #446fc9;
    color: #1e4396;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: bold;
    border-radius: 6.25rem;
    background: none;
    border: 2px solid #ddd;
    width: 1.375rem;
    height: 1.375rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.helper.helper-gray {
    color: #a8a8a8;
    font-weight: bold;
}
.helper.helper-alert {
    color: #b43e3e;
    font-weight: bold;
}
.helper.helper-warning {
    color: #ac6e1f;
    border-color: #ac6e1f;
    font-weight: bold;
}

.tooltip {
    background: #242424;
    color: #fff;
    padding: 1rem;
    max-width: 25rem;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
    z-index: 9999;
}
.tooltip.chart-item-tooltip {
    background-color: rgba(0, 0, 0, 0.875);
    color: #fff;
}
.tooltip.chart-item-tooltip > div {
    white-space: nowrap;
}
.tooltip.chart-item-tooltip .n {
    background: #f1f1f1;
    color: #1a1a1a;
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
    font-size: 0.625rem;
    font-weight: bold;
    margin-left: 1rem;
    width: 1.6875rem;
    text-align: center;
    display: inline-block;
    float: right;
    margin-left: 1rem;
}
.tooltip.chart-item-tooltip .n:not(.company) {
    color: #fff;
}
.tooltip.chart-item-tooltip .bullet {
    width: 0.625rem;
    height: 0.625rem;
    display: inline-flex;
    background-color: #ddd;
    border-radius: 0.125rem;
    margin-right: 0.5rem;
}
.tooltip.chart-item-tooltip .bullet.company {
    background-color: #ffffff;
    opacity: 0.8;
    background-size: 0.25rem 0.25rem;
    background-image: repeating-linear-gradient(
        45deg,
        #ddd 0,
        #ddd 0.025rem,
        #f1f1f1 0,
        #f1f1f1 50%
    );
}
.tooltip.chart-item-tooltip .company {
    background: #f1f1f1;
}
.tooltip.chart-item-tooltip .social {
    background: #f5a91b;
}
.tooltip.chart-item-tooltip .password {
    background: #7e62d7;
}
.tooltip.chart-item-tooltip .file {
    background: #4d7df8;
}
.tooltip.chart-item-tooltip .sensitive {
    background: #f1645a;
}
.tooltip.chart-item-tooltip .overall {
    background: #1be4f5;
}
.tooltip .arrow,
.tooltip .arrow::before {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    z-index: 9999;
    background: inherit;
}
.tooltip .arrow {
    visibility: hidden;
}
.tooltip .arrow::before {
    visibility: visible;
    content: "";
    transform: rotate(45deg);
}
.tooltip[data-popper-placement^="top"] > .arrow {
    bottom: -0.25rem;
}
.tooltip[data-popper-placement^="bottom"] > .arrow {
    top: -0.25rem;
}
.tooltip[data-popper-placement^="left"] > .arrow {
    right: -0.25rem;
}
.tooltip[data-popper-placement^="right"] > .arrow {
    left: -0.25rem;
}

.active .open-reports-total-badge {
    background: #cf6d3c;
}
.active .closed-reports-total-badge {
    background: #399c28;
}

.open-reports-total-badge,
.closed-reports-total-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.1875rem;
    margin-left: 0.5rem;
    background: #bcbcbc;
    color: #fff;
    font-weight: bold;
}

.increase .prio-button svg {
    transform: rotate(180deg);
}

.risk-table-hide {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.26s ease;
}

.risk-table-show {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.26s ease;
}

.extension-list .order {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    background: #f1f1f1;
    border-radius: 0.1875rem;
    font-weight: bold;
    color: #808080;
}
.extension-list table.table tbody td {
    border-color: #e9e9e9;
}

.extension-list table th {
    position: sticky;
    top: 4rem;
    z-index: 1;
    background-color: #fff;
}

.badge-flags:not(.tooltip .badge-flags) {
    width: calc(36px + 0.5rem);
}

.badge-flags span,
.badge-flags a {
    background-color: transparent;
    border: 1px solid #6982c7;
    cursor: pointer;
    color: #6982c7;
    width: .875rem;
    height: 1rem;
    line-height: 1rem;
    padding-inline: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    border-radius: 1px;
    opacity: 0.65;
}

.badge-flags span.active,
.badge-flags a.active {
    background-color: #6982c7;
    border-color: transparent;
    color: #fff;
    opacity: 1;
}

.badge-flags a.red {
    width: auto;
    color: #e33e44;
    background-color: #ffe5e7;
}

.badge-flags a.gray {
    width: auto;
    background-color: #e7e7e7;
    color: #2c2c2c;
}

.badge-flags a.orange {
    width: auto;
    color: #594800;
    background-color: #fff2c1;
}

#policy-groups .policy-groups-header {
    display: flex;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #e9e9e9;
}
#policy-groups .policy-groups-header .label {
    font-weight: bold;
}
#policy-groups .policy-groups-list .row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #e9e9e9;
}

#policy-groups .label {
    font-size: 0.875rem;
}
#policy-groups .label:nth-child(1) {
    width: 2rem;
    cursor: move;
}
#policy-groups .label:nth-child(2) {
    width: 6rem;
    text-align: center;
}
#policy-groups .label:nth-child(3) {
    width: calc(27% + ((100% - 77%) - 16rem));
}
#policy-groups .label:nth-child(4) {
    width: 8%;
}
#policy-groups .label:nth-child(5) {
    width: 10%;
}
#policy-groups .label:nth-child(6) {
    width: 6%;
    text-align: center;
}
#policy-groups .label:nth-child(7) {
    width: 8%;
    text-align: center;
}
#policy-groups .label:nth-child(8) {
    width: 18%;
}
#policy-groups .label:nth-child(9) {
    width: 4rem;
}
#policy-groups .label:nth-child(10) {
    width: 4rem;
    text-align: right;
}

#policy-groups.target-hidden .label:nth-child(3) {
    width: 25%;
}

#policy-groups.target-hidden .label:nth-child(4) {
    width: 15%;
}

#policy-groups.target-hidden .label:nth-child(6) {
    width: 10%;
}

#policy-groups.target-hidden .label:nth-child(8) {
    width: 21%;
}

#policy-groups .row.highlight {
    background-color: #fdf2d7 !important;
}
#policy-groups .row.is_default {
    background-color: #efefef !important;
}

#policy-groups .row.wont_work {
    background-color: #fff5f5 !important;
}

#policy-groups .label .time-based {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23b568ff' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E");
    background-size: 1.25rem;
}

.pg-note {
    color: var(--text-gray);
}

.time-based-policy-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23b568ff' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E");
    background-size: 1.25rem;
}

.draggable-source--is-dragging {
    background: #fdf2d7;
}

.draggable-mirror {
    opacity: 0;
    display: none;
}

.active-policy-name {
    color: #4c6cb0;
}

.back-to a {
    font-size: 0.75rem;
    color: #797979;
    display: inline-flex;
    align-items: center;
    font-weight: normal;
}
.back-to a svg {
    fill: #a9a9a9;
}
.back-to a:hover {
    color: #5677bb;
}
.back-to a:hover svg {
    fill: #797979;
}

.host-search {
    position: relative;
}
.host-search input.form-control {
    padding-right: 2.25rem;
}
.host-search .search {
    opacity: 0.2;
    position: absolute;
    right: 0.5rem;
    top: 0.375rem;
}

/* .btn-outline. prefix added in DXE-1375: same cascade-tie loss as the svg
   rule below -- the relocated `.btn-outline.btn-primary` base (0,2,0) sets
   background-color: #fff and now loads later, so .active must win on
   specificity. The :hover/:focus re-assertions preserve the original
   interaction order: at (0,2,1) they used to beat `.active` (0,2,0) on
   specificity, which a bare (0,3,0) bump would silently flip. */
.btn-outline.toggle-search-filters.active {
    background: #e4e4e4;
}
.btn-outline.toggle-search-filters.active:hover {
    background: #f9f9f9;
}
.btn-outline.toggle-search-filters.active:focus {
    background: #f1f1f1;
}
/* .btn-outline. prefix added in DXE-1375: markup is `btn-outline btn-primary
   toggle-search-filters`; this used to beat `.btn-outline svg` (equal
   specificity) by source order within main.css -- the .btn block now loads
   after the whole bundle, so this must win on specificity instead. */
.btn-outline.toggle-search-filters svg {
    margin: 0;
}

.search-filters {
    border-radius: 0.1875rem;
    overflow: hidden;
    max-height: 0;
    transition: all 0.5s ease;
    will-change: transform;
}
.search-filters > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.search-filters > div > * {
    margin-left: 1rem;
}
.search-filters.active {
    max-height: 6.25rem;
    margin-bottom: 1rem;
}

main .config-type-tabs li a.active {
    z-index: 5;
}

.config-type-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 2rem;
    position: relative;
}
.config-type-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.0625rem;
    width: 100%;
    height: 0.125rem;
    background-color: #2a51a2;
    z-index: 5;
}
.config-type-tabs li {
    position: relative;
}
.config-type-tabs li a {
    display: grid;
    grid-template-columns: 2.5rem calc(100% - 5rem) 2.5rem;
    color: #242424;
    position: relative;
    transition: background-color 0.2s linear;
    z-index: 1;
    font-size: 0.9375rem;
}
.config-type-tabs li a.active {
    color: #fff;
}
.config-type-tabs li a.active span {
    background-color: #2a51a2;
}
.config-type-tabs li a span {
    padding: 0.75rem 0;
    background-color: #fff;
}
.config-type-tabs li a span.l {
    left: 1rem;
    transform: skewX(-16deg);
    position: relative;
    border-radius: 0.625rem 0 0 0;
    box-shadow: -0.1875rem 0.125rem 0.25rem -0.1875rem rgba(0, 0, 0, 0.1);
}
.config-type-tabs li a span.m {
    box-shadow: 0 -0.375rem 1.0625rem -0.75rem rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 2rem;
    white-space: nowrap;
    z-index: 1;
}
.config-type-tabs li a span.m::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    left: 0;
}
.config-type-tabs li a span.r {
    right: 1rem;
    transform: skewX(16deg);
    position: relative;
    border-radius: 0 0.625rem 0 0;
    box-shadow: 0.1875rem 0.125rem 0.25rem -0.1875rem rgba(0, 0, 0, 0.2);
}
.config-type-tabs li a.file_transfers.active .m::before {
    background: url(/assets/file_transfer_white-e8a0c45638513f6f45052e52bb24e3a830af55d2228212e511acf3354c74db02.svg) no-repeat 50% 50%;
}
.config-type-tabs li a.web_filters.active .m::before {
    background: url(/assets/globe-colored_white-9956e792575d50173c0fc5cfabcd4efd71a8f457d3f25fbb0d41d817706e6b4a.svg) no-repeat 50% 50%;
}
.config-type-tabs li a.credentials.active .m::before {
    background: url(/assets/password_colored_white-8a245de702930ad342fd6d8eba14f8433a29509d0acb5bbb7cb611edcfd2203d.svg) no-repeat 50% 50%;
}
.config-type-tabs li a.adblocker.active .m::before {
    opacity: 0.9;
    background-color: rgba(255, 255, 255, 0.2);
}
.config-type-tabs li a.file_transfers .m::before {
    background: url(/assets/file_transfer_colored-132e422e38973558f52606c53aa5dd6fc2b6550934aaab6eb01052b0d6cada1d.svg) no-repeat 50% 50%;
}

.config-type-tabs li a.posture .m::before {
    background: url(/assets/posture-1e48b6642977d46b332aa4b5db7d994bd17d3a76a5b5c3258253296b469f4e2b.svg) no-repeat 50% 50%;
}

.config-type-tabs li a.posture.active .m::before {
    background: url(/assets/posture_white-9ce143049617e96cd0fd2cb53a009ff0a166a81edd519ce24a7eaf4489699148.svg) no-repeat 50% 50%;
}

.config-type-tabs li a.web_filters .m::before {
    background: url(/assets/globe-colored-daaba105b3fb5b5580f1010cf0b0d820f9c2e2ef918339ff9454c0e86c4abbf7.svg) no-repeat 50% 50%;
}
.config-type-tabs li a.credentials .m::before {
    background: url(/assets/password_colored-4bdcbe43402a5b623de5c2caea5e705f939e098d0fef4ebfc8e5d0ac3b24ff83.svg) no-repeat 50% 50%;
}
.config-type-tabs li a.adblocker .m::before {
    content: "AD";
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.675rem;
    opacity: 0.4;
}
.config-type-tabs li:nth-child(1) {
    margin-left: -0.5rem;
}
.config-type-tabs li:nth-child(1) a {
    z-index: 4;
}
.config-type-tabs li:nth-child(2) {
    left: -1.5rem;
}
.config-type-tabs li:nth-child(2) a {
    z-index: 3;
}
.config-type-tabs li:nth-child(3) {
    left: -3rem;
}
.config-type-tabs li:nth-child(3) a {
    z-index: 2;
}
.config-type-tabs li:nth-child(4) {
    left: -4.5rem;
}
.config-type-tabs li:nth-child(5) {
    left: -6rem;
}
.config-type-tabs li:nth-child(4) a {
    z-index: 1;
}

.rounded-tabs {
    display: grid;
    margin-bottom: 2rem;
    position: relative;
}

.rounded-tabs.recommendations:has(li.recommendations a.active)::after {
    background-color: #484848;
}

.rounded-tabs.recommendations .beta-tag.mini {
    top: -0.0625rem;
    background: #5d9a1d;
}

.rounded-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.0625rem;
    width: 100%;
    height: 0.125rem;
    background-color: #2a51a2;
    z-index: 5;
}
.rounded-tabs.reports,
.rounded-tabs.consents {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.rounded-tabs.phishing {
    grid-template-columns: repeat(4, 1fr);
}
.rounded-tabs.file_transfers {
    grid-template-columns: 1fr 1fr;
}
.rounded-tabs.pw-strength {
    grid-template-columns: repeat(5, 20%);
}
.rounded-tabs.pw-strength li a {
    font-size: 0.875rem;
}
.rounded-tabs li {
    position: relative;
}
.rounded-tabs li a {
    display: grid;
    grid-template-columns: 2rem calc(100% - 4rem) 2rem;
    color: #242424;
    position: relative;
    transition: background-color 0.2s linear;
    z-index: 1;
    font-size: 0.9375rem;
}
.rounded-tabs li a.active {
    color: #fff;
    z-index: 5 !important;
}

.rounded-tabs li.recommendations a.active span {
    background-color: #484848;
}

.rounded-tabs li a.active span {
    background-color: #2a51a2;
}

.rounded-tabs li a span i {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.1875rem;
    padding: 0.125rem 0.25rem;
    font-weight: bold;
    font-size: 0.775rem;
    font-style: normal;
    color: #535353;
}

.rounded-tabs li a span i.lang {
  background-color: #50b1c9;
  color: #fff;
}

.rounded-tabs li a.active span i {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.rounded-tabs li a span {
    padding: 0.75rem 0;
    background-color: #fff;
}
.rounded-tabs li a span.l {
    left: 1rem;
    transform: skewX(-16deg);
    position: relative;
    border-radius: 0.625rem 0 0 0;
    box-shadow: -0.1875rem 0.125rem 0.25rem -0.1875rem rgba(0, 0, 0, 0.1);
}
.rounded-tabs li a span.m {
    box-shadow: 0 -0.375rem 1.0625rem -0.75rem rgba(0, 0, 0, 0.1);
    position: relative;
    white-space: nowrap;
    text-align: center;
    z-index: 1;
}
.rounded-tabs li a span.m::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    left: 0;
}
.rounded-tabs li a span.r {
    right: 1rem;
    transform: skewX(16deg);
    position: relative;
    border-radius: 0 0.625rem 0 0;
    box-shadow: 0.1875rem 0.125rem 0.25rem -0.1875rem rgba(0, 0, 0, 0.2);
}
.rounded-tabs li:nth-child(1) {
    margin-left: -0.5625rem;
}
.rounded-tabs li:nth-child(1) a {
    z-index: 4;
}
.rounded-tabs li:nth-child(2) {
    left: -1.5rem;
}
.rounded-tabs li:nth-child(2) a {
    z-index: 3;
}
.rounded-tabs li:nth-child(3) {
    left: -3rem;
}
.rounded-tabs li:nth-child(3) a {
    z-index: 2;
}
.rounded-tabs li:nth-child(4) {
    left: -4.5rem;
}
.rounded-tabs li:nth-child(4) a {
    z-index: 1;
}
.rounded-tabs li:nth-child(5) {
    left: -6rem;
}
.rounded-tabs li:nth-child(5) a {
    z-index: 1;
}

.azure-integration .azure-block {
    background: url(/assets/azure_logo-786132cb923f6d985c71d843f1630c3bb7a4cea6a75003864016058ef0a85a5f.png) no-repeat;
    background-size: 3.625rem;
    padding-left: 4.5rem;
}
.azure-integration .azure-row {
    display: flex;
    align-items: center;
    padding-block: 0.125rem;
}
.azure-integration .azure-row span {
    font-weight: bold;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.azure-integration .not-granted {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    background-color: #cf4545;
    color: #fff;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}
.azure-integration .not-granted svg {
    margin-right: 0.375rem;
}
.azure-integration .granted {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    background-color: #4aab4a;
    color: #fff;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}
.azure-integration .granted svg {
    margin-right: 0.375rem;
}

.okta .page-header h4 {
    padding-left: 2.25rem;
    background: url(/assets/okta-f9ee3a46313894626825c0f3b7f863cee9598a52a4c902d37eacf90bea86b838.svg) no-repeat 0% 50%;
    background-size: 1.75rem;
}

.saaspass .page-header h4 {
    padding-left: 2.5rem;
    background: url(/assets/saaspass-03693760c6263b01eae1f74d01542c687ed416e5d381c15acf3f880ab06ed493.jpg) no-repeat 0% 50%;
    background-size: 1.75rem;
}

.miniorange .page-header h4 {
    padding-left: 2.5rem;
    background: url(/assets/miniorange-7f6c10ded73b5027ceffbb7686fb7e35044b1638da4644ea9e49755f38531e7a.png) no-repeat 0% 50%;
    background-size: 1.75rem;
}
.miniorange textarea#customer_mo_cert:read-only {
    background-color: #f9f9f9;
}
.miniorange .cert-file-upload {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 15rem;
}
.miniorange .cert-file-upload .upload {
    position: relative;
    height: calc(100% - 1.875rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border: 2px dashed #ddd;
    border-radius: 0.1875rem;
    margin-top: 1.5625rem;
}
.miniorange .cert-file-upload .upload label {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    text-align: center;
}
.miniorange .cert-file-upload .upload label:hover {
    background-color: #f9f9f9;
}
.miniorange .cert-file-upload .upload #cert-file-upload {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

#customer-satisfaction-survey {
    width: 37.5rem;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 3;
    border-radius: 0.25rem;
    padding: 0;
}
#customer-satisfaction-survey .dialog-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    background: #f1f1f1;
}
#customer-satisfaction-survey .dialog-content {
    padding: 1.5rem;
}
#customer-satisfaction-survey h4 {
    margin-bottom: 1.5rem;
    color: #3c3c3c;
}
#customer-satisfaction-survey::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}
#customer-satisfaction-survey form {
    padding: 1.5rem;
    background: #e7e5f2;
    border-radius: 0.25rem;
}
#customer-satisfaction-survey .scale {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
#customer-satisfaction-survey .scale button {
    background-color: #fff;
    border: 1px solid #e7e5f2;
    margin-right: -0.0625rem;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    font-weight: bold;
    color: #5c5971;
}
#customer-satisfaction-survey .scale button:hover {
    background-color: #5c5971;
    border-color: #5c5971;
    color: #fff;
    z-index: 1;
}
#customer-satisfaction-survey .labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #5c5971;
}

.new_deployment .form-group {
    margin: 0;
}
.new_deployment .single-block,
.new_deployment .block {
    margin-bottom: 1rem;
}

.table-selection .table-item.show {
    grid-template-columns: 12.5rem 1fr;
}
.table-selection .table-item.show:hover {
    cursor: pointer;
    background-color: transparent;
}
.table-selection .table-item.show .method-name > div:first-child {
    font-size: 1.5rem;
}
.table-selection .table-item {
    user-select: none;
    padding-block: 0.675rem;
    display: grid;
    grid-template-columns: 6.25rem 1fr 6.25rem;
    border-bottom: 1px solid #f1f1f1;
}
.table-selection .table-item:hover {
    cursor: pointer;
    background-color: rgba(0, 155, 255, 0.07);
}
.table-selection .table-item .method-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-selection .table-item .method-logo img {
    max-height: 48px;
}

.table-selection .table-item .method-name {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 1rem;
    font-size: 0.875rem;
}
.table-selection .table-item .method-name > div:first-child {
    font-weight: bold;
}
.table-selection .table-item .method-name > div:last-child {
    margin-top: 0.25rem;
    color: #505050;
}
.table-selection .table-item .method-selection {
    display: flex;
    align-items: center;
    justify-content: center;
}

.deployment-suggestions {
    margin-top: 1rem;
}
.deployment-suggestions .suggestion {
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    position: relative;
}
.deployment-suggestions .suggestion.suggestion-info {
    background-color: #e4fcff;
}
.deployment-suggestions .suggestion.suggestion-info .suggestion-pill {
    background-color: #ceecf2;
}
.deployment-suggestions .suggestion.suggestion-warning {
    background-color: #fef5eb;
}
.deployment-suggestions .suggestion.suggestion-warning .suggestion-pill {
    background-color: #ebdfd0;
}
.deployment-suggestions .suggestion.suggestion-error {
    background-color: #faddd5;
}
.deployment-suggestions .suggestion.suggestion-error .suggestion-pill {
    background-color: #e6c1b3;
}
.deployment-suggestions .suggestion .desc {
    font-size: 0.875rem;
}
.deployment-suggestions .suggestion .suggestion-pill {
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.6588235294);
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.deployment-suggestions .suggestion .suggestion-pill span {
    margin-left: 0.25rem;
}

.dx-badge {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
}
.dx-badge.download {
    background: url(/assets/download-c8935f88ef2a2b3389ab2ca09e80a491a5897de89582f4ced4c1cbdbf5a0bd5b.svg) no-repeat 50% 50%;
}
.dx-badge.upload {
    background: url(/assets/upload-5d6f4dec24e7a837c0c82f451105353c265b16989cd7906ed4392d8417cd44cb.svg) no-repeat 50% 50%;
}

.partner-external-notifications {
    padding: 1rem;
    border: 1px solid #e8e8e8;
    border-radius: 0.25rem;
}
.partner-external-notifications table tbody tr:last-child td {
    border: none;
}

.not-billed-user,
.agent-children.not-billed-user {
    color: #ccc;
}

.breadcrumb {
    display: flex;
}
.breadcrumb > span {
    display: flex;
    align-items: center;
}
.breadcrumb > span:not(:last-child)::after {
    content: "";
    background-image: url("data:image/svg+xml,%0A%3Csvg fill='%23ccc' xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 -960 960 960' width='20'%3E%3Cpath d='M346-270q-13-13-13-30t13-30l150-150-150-150q-13-13-13-30t13-30q13-13 30-13t30 13l180 180q7 7 10 14.5t3 15.5q0 8-3 15.5T586-450L406-270q-13 13-30 13t-30-13Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.full-truncate {
    position: relative;
}

.full-truncate > div {
    width: 90%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.partner-api-key-show .token-row {
    padding: 0.75rem;
    border-block: 0.0625rem solid #f1f1f1;
    background: #f9f9f9;
}

.reset-cache-security-dashboard {
    position: relative;
    z-index: 1;
}

.excel-export-pwd span {
    font-weight: bold;
}

.logs-excel-export {
}

.logs-excel-export {
    .auto-generated-pwd {
        background-color: #ffe4b2;
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
        border-radius: 0.125rem;
        font-weight: bold;
    }
    .btn-outline.btn-primary svg {
        margin: 0;
    }
    .invalid-feedback {
        margin-top: 0.275rem;
        color: #b73a3a;
        font-size: 0.775rem;
    }
}

.user-mask {
    position: relative;
}

.user-mask::after {
    position: absolute;
    backdrop-filter: blur(0.1875rem);
    content: "";
    padding-inline: 0.25rem;
    left: -0.25rem;
    right: -0.25rem;
    bottom: 0;
    top: 0;
}

.dns-servers > div span:first-child {
    background-color: rgba(42, 81, 162, 0.04);
    font-weight: bold;
    font-size: 0.775rem;
    padding: 0.1875rem 0.375rem;
    border-radius: 0.25rem;
    width: 3rem;
    display: inline-block;
    color: #2b51a2;
}
.dns-servers > div {
    margin-top: 0.1875rem;
}
.dns-servers > div span:last-child {
    font-family: monospace;
    letter-spacing: -0.0625rem;
}

.child-table {
    padding-top: 1rem;
    background-color: #fff9ec;
    border-left: 1px solid #f8f1e1;
    border-right: 1px solid #f8f1e1;
    border-bottom: 1px solid #f8f1e1;
}

.child-table table th,
.child-table table td {
    font-size: 0.675rem;
    border-color: #f8f1e1;
}

.child-table table th {
    color: #9d937e;
}

.child-table table td {
    border-bottom: none;
}
.autocomplete-result {
    background: #fff;
    box-shadow: 0 0.5625rem 0.9375rem 0.1875rem rgba(0, 0, 0, 0.2);
    border-radius: 0.1875rem;
    border: 1px solid #ddd;
    position: absolute;
    width: max-content;
    top: 100%;
    left: 0;
    z-index: 2;
}
.autocomplete-result.autocomplete-result-department {
    min-width: 100%;
}


.autocomplete-result > div {
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) 50%;
    padding: 0.5rem 1rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill-opacity='0.1' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M440-440v120q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-120h120q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H520v-120q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v120H320q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440h120ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z'/%3E%3C/svg%3E");
}

.autocomplete-result > div:hover {
    background-color: #f1f1f1;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill-opacity='0.2' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M440-440v120q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-120h120q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H520v-120q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v120H320q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440h120ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z'/%3E%3C/svg%3E");
}

.default-value {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff3e6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem 0 0 0;
    font-size: 0.675rem;
}

.default-value-relative {
    position: relative;
    inset: auto;
}

.bottom-left-radius {
    border-bottom-left-radius: 0.25rem;
}

.dx-note {
    padding: 1rem;
    border: 2px solid #f1f1f1;
    border-radius: 0.25rem;
}

.dx-note-yellow {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.08);
}

.btn-light {
    outline: none;
    padding: 0.3rem 0.65rem;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 0.125rem;
    display: flex;
    user-select: none;
}

.btn-light.small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-light.xsmall {
    padding: 0.15rem 0.35rem;
    font-size: 0.675rem;
}

.btn-light.red {
    color: #c46b74;
    border-color: rgba(190, 86, 96, 0.15);
    background: rgba(190, 86, 96, 0.1);
}

.btn-light.red:hover {
    border-color: rgba(190, 86, 96, 0.3);
    background: rgba(190, 86, 96, 0.2);
}

.btn-light.blue {
    color: #496db7;
    border-color: rgba(42, 81, 162, 0.15);
    background-color: rgba(42, 81, 162, 0.1);
}

.btn-light.blue:hover {
    border-color: rgba(42, 81, 162, 0.3);
    background-color: rgba(42, 81, 162, 0.2);
}

.btn-light:focus {
    outline: none;
}

.btn-light:disabled,
.btn-light.disabled {
    pointer-events: none;
    opacity: 0.65;
}

.multi-select-container {
    position: relative;
    user-select: none;
    z-index: 2;
}
.multi-select-container .selected-list {
    background-color: #fff;
    border-radius: 0.1875rem;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.5rem) 50%;
    transition: box-shadow 0.2s linear;
    border: 1px solid #ddd;
    padding: 0.5rem;
}

.multi-select-container .selected-list:hover {
    cursor: pointer;
    border-color: #c2c2c2;
}

.multi-select-container .selected-item {
    display: inline-flex;
    padding: 0.1875rem 0.375rem;
    border-radius: 0.125rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    align-items: center;
    background-color: #f1f1f1;
    font-weight: normal;
}

.multi-select-container .list {
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    border-radius: 0.1875rem;
    border: 1px solid #ddd;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.625rem 0.9375rem 0.625rem rgba(0, 0, 0, 0.13);
    z-index: 1;
}

.multi-select-container .inner-list {
    max-height: 12.5rem;
    overflow: auto;
}

.multi-select-container .footer {
    padding: 0.5rem 0.65rem;
    display: flex;
    justify-content: end;
    border-top: 1px solid #f1f1f1;
}

.multi-select-container .list .list-item {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: normal;
}

.multi-select-container .list .list-item:hover {
    background-color: #f9f9f9;
}

.multi-select-container .list .list-item.selected {
    background-color: #f0f8ff;
}

.favorite {
    user-select: none;
}

.favorite:focus {
    outline: none;
    border: none;
}

.favorite[data-state="true"] {
    color: #ff9d12;
}

.slidecontainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.slidecontainer .min,
.slidecontainer .max {
    opacity: 0.3;
}

.slidecontainer .slide-value {
    display: inline-flex;
}

.slidecontainer.disabled-slider .slider::-webkit-slider-thumb {
    background-color: #ccc;
}

.slidecontainer.disabled-slider .slider {
    background-color: #e6e6e6;
}

.slidecontainer.disabled-slider .slide-value {
    color: #c6c6c6;
}

.slidecontainer.disabled-slider .min,.slidecontainer.disabled-slider .max {
    color: #757575;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 0.375rem;
    border-radius: 0.3125rem;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #04aa6d;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #04aa6d;
    cursor: pointer;
}

.inner-table {
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 0.1875rem;
}

.inner-table.white {
    background: #fff;
}


.item-search {

}
.item-search .item-list legend {
  display: none;
}

.item-search .item-list {
  margin-top: 1rem;
  height: 240px;
  overflow-y: scroll;
}

.upgrade-container {
  position: relative;
}

.blur {
  filter: blur(7px);
}

.permission-ro select {
    pointer-events: none;
}

.key-container {
    padding: 1rem;
    background: #364555;
    color: #fff;
    border-radius: 4px;
    position: relative;
}

.key-container .key {
    word-break: break-all;
    font-family: monospace;
    font-size: 0.775rem;
    padding-right: 6rem;
    padding-top: 1.35rem;
}

.key-container button.copy {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.key-container .key-label {
    position: absolute;
    border-radius: 0 0 6px 6px;
    background: #293543;
    top: 0;
    padding-inline: .5rem;
    padding-block: .25rem;
    font-size: 0.775rem;
    font-weight: bold;
}


.spinner_ajPY {
    transform-origin:center;
    animation: spinner_AtaB .75s infinite linear
}
@keyframes spinner_AtaB{
    100% {
        transform:rotate(360deg)
    }
}

.combobox-results {
    padding: 1rem;
    position: absolute;
    left: 0;
    top: 100%;
    width: 20rem;
    background: #fff;
    border-radius: 0.3125rem;
    box-shadow: 0 0.125rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.2);
    & .searching {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.multi-column-list-container {
    padding: 1rem;
    position: absolute;
    left: 0;
    top: 100%;
    width: 20rem;
    background: #fff;
    border-radius: 0.3125rem;
    box-shadow: 0 0.125rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.2);

    & .multi-column-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: .5rem;
    }

    & .multi-column-list-item {
        display: flex;
        gap: 1rem;
        padding: .5rem 1rem;
        border-radius: 0.25rem;
        border: 1px solid #f1f1f1;
        cursor: pointer;
        &:hover {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
        }
    }
}


.single-column-list-container {
    padding: 1rem;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: #fff;
    border-radius: 0.3125rem;
    box-shadow: 0 0.125rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.2);
    z-index: 10;

    & .single-column-list {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: .5rem;
        gap: .5rem;
    }

    & .single-column-list-item {
        display: flex;
        gap: 1rem;
        padding: .25rem 1rem;
        border-radius: 0.25rem;
        border: 1px solid #f1f1f1;
        cursor: pointer;
        &:hover {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
        }
    }
}

.copy-line {
    display: flex;
    background-color: #f1f1f1;
    border-radius: 0.1875rem;
    position: relative;
    height: 2.2rem;
    width: 100%;
    &.inline {
        width: fit-content;
    }
    & > div:first-child {
        border-radius: 0.1875rem 0 0 0.1875rem;
        white-space: nowrap;
    }
    & .copy-line-content {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        width: 100%;
    }
    & .label {
        font-weight: bold;
        background-color: #e3e3e3;
        display: flex;
        align-items: center;
        padding-inline: .75rem;
        border-radius: 0.1875rem 0 0 0.1875rem;
    }
    & .data {
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        padding-left: .75rem;
        font-family: monospace;
        font-size: 0.85rem;
    }
    & .copy {
        background-color: #e3e3e3;
        border-radius: 0 0.1875rem 0.1875rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.4rem;
        outline: none;
        & span {
            pointer-events: none;
        }
        &:hover {
           background-color: #d7d7d7;
        }
        &:active {
            background-color: #505050;

            & svg:first-of-type {
               display: none;
            }

            & svg:last-of-type {
                display: block;
                fill: #fff;
            }
        }
        & svg:last-of-type {
            display: none;
        }
    }
}

.saml-drop-layer-container {
    position: relative;
    height: 200px;
}
.saml-drop-layer {
    cursor: pointer;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    border-radius: 0.1875rem;
    background-color: rgba(241,241,241, 0.5);
    color: #979797;
    border: 1px solid transparent;
}

.saml-drop-layer:hover {
    background-color: rgba(241,241,241, 0.875);
    border-color: #dedede;
}

.saml-config .form-block .form-block-row {
    gap: 4rem;
}


.usage-widget .icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10rem;
    align-items: center;
    justify-content: center;
}

.usage-widget .icon.received {
    background-color: oklch(0.73 0.24 142.64 / 0.20);
}

.usage-widget .icon.received svg {
    fill: #1ecb1e;
}

.usage-widget .icon.sent {
    background-color: oklch(0.52 0.23 274.71 / 0.20);
}

.usage-widget .icon.sent svg {
    fill: #4b4beb;
}

.usage-widget .info {
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.usage-widget .info .label {
    color: #b2b2b2;
    font-size: 0.875rem;
}

.usage-widget .info .value {
    font-weight: bold;
    letter-spacing: -1px;
    color: #444444;
}

.usage-widget:last-of-type {
    border-left :1px solid #ebebeb;
    padding-left: 2rem;
}

.usage-widget.small .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.usage-widget.small .info {
    line-height: 1;
}

.usage-widget.small .info .label {
    font-size: 0.675rem;
}

.usage-widget.small .info .value {
    font-size: 0.875rem;
    width: 4rem;
}

.usage-widget.small:last-of-type {
    padding-left: 1.35rem;
}

.usage-widget-alone {
    border-left : 0px !important;
    padding-left: 0px !important;
}

.pii-rule-list {
    height: 15rem;
    overflow-y: scroll;
    padding: .5rem 0 1rem 1rem;
    background: #fff;
}


.pii-rule-list .list-content li {
    display: flex;
    padding: 0.4375rem 0;
    border-bottom: 1px solid #f1f1f1;
}

.pii-rule-list .list-content li .title {
    font-size: 0.875rem;
}
.pii-rule-list .list-content li .value {
    width: 100%;
    font-size: 0.75rem;
    color: #a2a2a2;
    margin-top: -0.125rem;
}

.pii-rule-list .list-content li:hover {
    background: #f9f9f9;
    cursor: pointer;
}


.progress {
    position: relative;
}
.progress .bar {
    height: 1.5rem;
    background-color: dodgerblue;
    border-radius: 2px;
}

.progress .value {
    position: absolute;
    top: 4px;
    left: 4px;
    color: #fff;
    font-size: 0.675rem;
}

.prompt-query-short {
    background-color: #f1f1f1;
    border-radius: 0.2875rem;
    padding-block: .25rem;
    padding-inline: .65rem;
    font-family: monospace;
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-query {
    background-color: #fffaf3;
    border-radius: 0.2875rem;
    padding-block: .65rem;
    padding-inline: 1rem;
    font-family: monospace;
    font-size: .75rem;
    border: 1px solid #ffe3bc;
}

.log-details-group {
    padding: 1.5rem;
    border-radius: .5rem;
    border: 2px solid #f8e9d5;
    margin-top: 1rem;
    margin-bottom: 2rem;
    position: relative;
    &:has(.prompt-query) {

    }
    &:last-of-type {
        margin-bottom: 1rem;
    }
    .field-container:not(:last-of-type) {
        border-bottom: 2px solid #f8e9d5;
        padding-bottom: .5rem;
    }

    .field .label {
        color: #4e4a45;
    }
    h6 {
        position: absolute;
        top: -10px;
        background: #fff5e8;
        font-size: 0.875rem;
        color: #9e9589;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -.5rem;
            width: .5rem;
            height: 100%;
            background: #fff5e8;
        }
        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: -.5rem;
            width: .5rem;
            height: 100%;
            background: #fff5e8;
        }
    }
}

.remove-background {
    background: none !important;
}

.content-blurred {
    filter: blur(4px);
    user-select: none;
    cursor: default;
    opacity: 0.7;
}


.text-copy {
    color: var(--primary-color);
    &:focus {
        outline: none;
    }
}

.tooltip.text-copy {
    color: #fff;
    font-size: 0.75rem;
    padding-block: .5rem;
    padding-inline: .65rem;
}

.dx-wc-container {
    scroll-margin-top: 10rem;
}

.dx-wc-list .dx-wc-list-item {
    display: grid;
    border-bottom: 1px solid #e8e8e8;
    scroll-margin-top: 4rem;
    align-items: center;
    user-select: none;
    &:not(.dx-wc-header) {
        background-color: #f9f9f9;
    }
    &:not(.dx-wc-header):hover {
        cursor: pointer;
        background-color: #f1f1f1;
        & .appearance-select {
            background-color: #fff;
            border: 1px solid #bababa;
        }
    }
    &.highlight {
        animation: dx-highlight 2s ease-out;
    }

    .dx-wc-cell {
        padding-block: .5rem;
    }
}

.dx-wc-list .dx-wc-list-child-container .dx-wc-list-item {
    background-color: #fff;
    border-bottom-color: #f5f5f5;
}

.dx-wc-list.credentials .dx-wc-list-item {
    grid-template-columns: 2rem 6fr repeat(4, 1.5fr) minmax(8rem, 10rem);
}

.dx-wc-list.credentials .dx-wc-list-child-container .dx-wc-list-item {
    grid-template-columns: 2rem 1fr minmax(8rem, 10rem);
}

.dx-wc-list.webfilters .dx-wc-list-item {
    grid-template-columns: 2rem 5fr repeat(5, 1.5fr) minmax(8rem, 10rem);
}

.dx-wc-list.webfilters .dx-wc-list-child-container .dx-wc-list-item {
    grid-template-columns: 2rem 1fr minmax(8rem, 10rem);
}

.dx-wc-list.file-filters .dx-wc-list-item {
    grid-template-columns: 2rem 10fr minmax(8rem, 14rem);
}

.dx-wc-list .dx-wc-header {
    background-color: #fcfcfc;
    .dx-wc-cell {
        color: #9c9c9c;
    }
}

.dx-wc-list .dx-wc-list-child-container {
    display: grid;
    grid-template-columns: 1fr;
    transition: max-height 0.25s ease;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    position: relative;

    &.opening {
        z-index: 3;
        opacity: 1;
        &:has(.aps-list:not(.d-none)) {
            z-index: 4;
        }
    }
}


.aps-container {
    position: relative;
    padding-right: .5rem;

    .aps {
        width: 100%;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 0.325rem .35rem 0.325rem .5rem;
        border-radius: 0.1875rem;
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        cursor: pointer;
        &:hover {
            border-color: #bababa;
            svg {
                fill: #696969;
            }
        }
    }

    .aps-trigger {
        width: 1.25rem;
        height: 1.25rem;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='18px' height='18px' fill='%23aaa'%3E%3Cpath d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' %3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
    }

    & .aps-content {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    & .aps-label {
        white-space: nowrap;
    }

    & .aps-list {
        width: calc(100% - .5rem);
        right: .5rem;
        z-index: 4;
        position: absolute;
        border: 1px solid #bababa;
        padding-block: .25rem .25rem;
        border-radius: 0.1875rem;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.2);
        .aps-list-item {
            cursor: pointer;
            padding-block: .25rem;
            padding-inline: .5rem;
            &:hover {
                background-color: #f0f0f0;
            }
        }
    }
}


.dx-policy-action-bg {
    background-repeat: no-repeat;
    background-position: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    background-size: contain;

    &.action-item-expand {
        background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cg%3E%3Cpath d='M0,0h24 M24,24H0' fill='none'/%3E%3Cpath d='M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z'/%3E%3Cpath d='M0,0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
    }

    &.webfilters {
        &.action-item-0 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23ccc' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
        }
        &.action-item-1 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='green'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
        }
        &.action-item-2 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z'/%3E%3C/svg%3E");
        }
        &.action-item-3 {
            background-image: url(/assets/isolate-95088c3d44547380bb22b6abce21ce0da3d8d9dd0ab49d4806010882c40d061d.svg);
            background-size: 1rem;
        }
        &.action-item-4 {
            background-image: url(/assets/readonly-917df790e9b02d53232f3ef40d8710ead7f255e7c299ad082ba2184c747ed2b2.svg);
            background-size: 1rem;
        }
    }

    &.credentials {
        &.action-item-0 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23ccc' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
        }
        &.action-item-1 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='green'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
        }
        &.action-item-2 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z'/%3E%3C/svg%3E");
        }
        &.action-item-3 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='orange' height='40' viewBox='0 -960 960 960' width='40'%3E%3Cpath d='M270.667-318q12.769 0 21.64-8.871 8.872-8.872 8.872-21.513 0-12.641-8.872-21.641-8.871-9-21.512-9t-21.641 9.003q-9 9.004-9 21.51 0 12.769 9.003 21.641Q258.16-318 270.667-318Zm-25.128-123.333h50.255v-203.231h-50.255v203.231Zm169.334 65.384h299.588v-50.255H414.873v50.255Zm0-165.283h299.588v-50.254H414.873v50.254ZM158.77-180.001q-25.788 0-44.176-18.388-18.387-18.388-18.387-44.176v-474.87q0-25.788 18.387-44.176 18.388-18.388 44.176-18.388h642.46q25.788 0 44.176 18.388 18.387 18.388 18.387 44.176v474.87q0 25.788-18.387 44.176-18.388 18.388-44.176 18.388H158.77Zm0-50.255h642.46q4.616 0 8.462-3.847 3.847-3.846 3.847-8.462v-474.87q0-4.616-3.847-8.462-3.846-3.847-8.462-3.847H158.77q-4.616 0-8.462 3.847-3.846 3.846-3.846 8.462v474.87q0 4.616 3.846 8.462 3.846 3.847 8.462 3.847Zm-12.308 0v-499.488 499.488Z'/%3E%3C/svg%3E");
        }
    }


    &.login-guard {
        &.action-item-0 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23ccc' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
        }
        &.action-item-1 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='green'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
        }
        &.action-item-2 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z'/%3E%3C/svg%3E");
        }
    }


    &.file-filters {
        min-width: 1.25rem;
        min-height: 1.25rem;
        &.action-item-0 {
            background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='%23ccc' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
            background-size: contain;
        }
        &.action-item-1 {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='14' height='20' viewBox='0 0 14 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 -6.11959e-07L14 7L12.6 8.425L8 3.825L8 11L6 11L6 3.825L1.4 8.4L1.1365e-06 7L7 -6.11959e-07ZM8 13L8 16L6 16L6 13L8 13ZM8 18L8 20L6 20L6 18L8 18Z' fill='%2332A657'/%3E%3C/svg%3E%0A");
            background-size: .5rem;
        }
        &.action-item-2 {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='14' height='20' viewBox='0 0 14 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 20L0 13L1.4 11.575L6 16.175V9H8V16.175L12.6 11.6L14 13L7 20ZM6 7V4H8V7H6ZM6 2V0H8V2H6Z' fill='%2332A657'/%3E%3C/svg%3E%0A");
            background-size: .5rem;
        }
        &.action-item-3 {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 20L16 13L17.4 11.575L22 16.175V9H24V16.175L28.6 11.6L30 13L23 20ZM22 7V4H24V7H22ZM22 2V0H24V2H22Z' fill='%2332A657'/%3E%3Cpath d='M7 -6.11959e-07L14 7L12.6 8.425L8 3.825L8 11L6 11L6 3.825L1.4 8.4L1.1365e-06 7L7 -6.11959e-07ZM8 13L8 16L6 16L6 13L8 13ZM8 18L8 20L6 20L6 18L8 18Z' fill='%2332A657'/%3E%3C/svg%3E%0A");
            background-size: 1rem;
        }
        &.action-item-4 {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='14' height='20' viewBox='0 0 14 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 -6.11959e-07L14 7L12.6 8.425L8 3.825L8 11L6 11L6 3.825L1.4 8.4L1.1365e-06 7L7 -6.11959e-07ZM8 13L8 16L6 16L6 13L8 13ZM8 18L8 20L6 20L6 18L8 18Z' fill='%23A63234'/%3E%3C/svg%3E%0A");
            background-size: .5rem;
        }
        &.action-item-5 {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='14' height='20' viewBox='0 0 14 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 20L0 13L1.4 11.575L6 16.175V9H8V16.175L12.6 11.6L14 13L7 20ZM6 7V4H8V7H6ZM6 2V0H8V2H6Z' fill='%23A63234'/%3E%3C/svg%3E%0A");
            background-size: .5rem;
        }
        &.action-item-6 {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 20L16 13L17.4 11.575L22 16.175V9H24V16.175L28.6 11.6L30 13L23 20ZM22 7V4H24V7H22ZM22 2V0H24V2H22Z' fill='%23A63234'/%3E%3Cpath d='M7 -6.11959e-07L14 7L12.6 8.425L8 3.825L8 11L6 11L6 3.825L1.4 8.4L1.1365e-06 7L7 -6.11959e-07ZM8 13L8 16L6 16L6 13L8 13ZM8 18L8 20L6 20L6 18L8 18Z' fill='%23A63234'/%3E%3C/svg%3E%0A");
            background-size: 1rem;
        }
    }

}

@keyframes dx-highlight {
    0% {
        background-color: #ffd17991;
    }
    25% {
        background-color: #ffd17991;
    }
    50% {
        background-color: #ffd17991;
    }
    75% {
        background-color: #ffd17991;
    }
    100% {
        background-color: #fff;
    }
}


.row-highlight {
    animation: dx-highlight 1.2s ease-out forwards;
}
.version-distribution {
    margin-top: 1.5rem;
    background-color: #fff;
    box-shadow:
        0 0.1rem 0.225rem 0 rgba(0, 0, 0, 0.13),
        0 0.01875rem 0.05625rem 0 rgba(0, 0, 0, 0.11);
    border-radius: 0.125rem;
    padding: 1.5rem;
}


.version-distribution h6 {
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.version-item {
    margin-bottom: 1.25rem;
}

.version-item:last-child {
    margin-bottom: 0;
}

.version-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.version-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-color);
}

.version-count {
    font-size: 0.75rem;
    color: var(--text-gray);
}

.version-bar-container {
    height: 0.5rem;
    background-color: #f0f0f0;
    border-radius: 1rem;
    overflow: hidden;
}

.version-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 1rem;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nexi-customer-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 56rem;
}

/* Policy template deploy button */
.btn-deploy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
}
.btn-deploy svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-container .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
}
.dialog-container .dialog {
  border-radius: 0.25rem;
  width: 37.5rem;
  min-height: 12.5rem;
  background: #fff;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 0.25rem 0.625rem 0.125rem rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 6.25rem;
}
.dialog-container .dialog.error {
  background: #fee8e7;
}
.dialog-container .dialog.error .dialog-header {
  color: #603a38;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='36' fill='%23a95b58' viewBox='0 0 24 24' width='36'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}
.dialog-container .dialog-header {
  padding: 1.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: 1.5rem 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='36' fill='%23bbb' viewBox='0 0 24 24' width='36'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M12,13L12,13c-0.55,0-1-0.45-1-1V8c0-0.55,0.45-1,1-1h0c0.55,0,1,0.45,1,1v4 C13,12.55,12.55,13,12,13z M13,16c0,0.55-0.45,1-1,1s-1-0.45-1-1c0-0.55,0.45-1,1-1S13,15.45,13,16z'/%3E%3C/g%3E%3C/svg%3E");
}
.dialog-container .dialog-header .title {
  padding-left: 3rem;
}
.dialog-container .dialog-content {
  padding: 1.5rem;
}
.dialog-container .dialog-footer {
  padding: 1.5rem;
  display: flex;
  justify-content: flex-end;
}
.glide-center {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
}

.glide__arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.glide__track {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.glide__arrow {
  opacity: 0.3;
  position: absolute;
  transition: opacity 0.3s linear;
}
.glide__arrow:focus {
  outline: none;
}
.glide__arrow:hover {
  opacity: 0.5;
}

.glide__arrow--left {
  left: 0;
}

.glide__arrow--right {
  right: 0;
}

.glide__bullets {
  display: flex;
  padding: 1rem 0 0 0;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 2;
}
.glide__bullets .glide__bullet {
  width: 2.5rem;
  height: 0.25rem;
  background-color: #f1f1f1;
  transition: background-color 0.3s linear;
}
.glide__bullets .glide__bullet.glide__bullet--active {
  background-color: #ccc;
}
.glide__bullets .glide__bullet:focus {
  outline: none;
}
.glide__bullets .glide__bullet:hover {
  background-color: #ddd;
}

.dialog-group-content .dialog-name {
  background: #2f487e;
  padding: 0.5em 1.5em;
  font-size: 0.6875rem;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.0625rem;
}
.dialog-group-content .dialog-name .order {
  color: rgba(255, 255, 255, 0.7);
}
.dialog-group-content .hover-layer {
  display: none;
}
.dialog-group-content .isoolate-dialog:hover .hover-layer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  color: #fff;
  background: rgba(44, 43, 56, 0.96);
}

/* Chrome, Edge, and Safari */
.template-container .inner-list::-webkit-scrollbar {
  width: 0.625rem;
}

.template-container .inner-list::-webkit-scrollbar-track {
  background: #304250;
}

.template-container .inner-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid #304250;
}

.dialog-templates .isoolate-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.625rem;
  position: relative;
  background: #2c2b38;
  transform: translate3d(0, 0, 0);
  color: #fff;
}
.dialog-templates .isoolate-dialog-content {
  width: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dialog-templates .isoolate-dialog-content .content {
  width: 100%;
  position: relative;
}
.dialog-templates .tooltip-trigger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  color: #fff;
}
.dialog-templates .isoolate-dialog .message {
  display: none;
  overflow-wrap: break-word;
  white-space: normal;
}
.dialog-templates .isoolate-dialog .message.visible {
  display: block;
  min-height: 1.5rem;
}
.dialog-templates .isoolate-dialog-content .content-container {
  padding: 2em;
  background: #2c2b38;
  overflow-wrap: break-word;
  min-height: 10.9375rem;
}
.dialog-templates .isoolate-dialog .header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1.5em 2em;
  background: #302f3d;
}
.dialog-templates .isoolate-dialog .header h1 {
  margin: 0;
  font-size: 1em;
  font-weight: bold;
  width: calc(100% - (2.625rem + 1em));
}
.dialog-templates .isoolate-dialog .header .icon {
  width: 2.5em;
  height: 2.4em;
  background-size: 100%;
  background-position: 50% 50%;
  position: absolute;
  right: 1.4em;
}
.dialog-templates .isoolate-dialog .icon.success {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2319a970' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24' y='0'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M11.3,2.26l-6,2.25C4.52,4.81,4,5.55,4,6.39v4.71c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V6.39 c0-0.83-0.52-1.58-1.3-1.87l-6-2.25C12.25,2.09,11.75,2.09,11.3,2.26z M10.23,14.83l-2.12-2.12c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0l1.41,1.41l3.54-3.54c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41l-4.24,4.24 C11.26,15.22,10.62,15.22,10.23,14.83z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.dialog-templates .isoolate-dialog .icon.warning {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ce9e2e' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,13L12,13c-0.55,0-1-0.45-1-1V8 c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1v4C13,12.55,12.55,13,12,13z M12,17L12,17c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h0 c0.55,0,1,0.45,1,1v0C13,16.55,12.55,17,12,17z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.dialog-templates .isoolate-dialog .icon.error {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ce3636' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,13L12,13c-0.55,0-1-0.45-1-1V8 c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1v4C13,12.55,12.55,13,12,13z M12,17L12,17c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h0 c0.55,0,1,0.45,1,1v0C13,16.55,12.55,17,12,17z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.dialog-templates .isoolate-dialog .icon.loading {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='%23fff' fill-opacity='0.4' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
}
.dialog-templates .isoolate-dialog .consent {
  display: none;
}
.dialog-templates .isoolate-dialog .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.5em 2em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  background: #302f3d;
}
.dialog-templates .isoolate-dialog .footer .logo {
  position: absolute;
  left: 1.5em;
  width: 3.75rem;
  height: 1.4375rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dialog-templates .isoolate-dialog .footer .logo img {
  max-height: 100%;
}
.dialog-templates .isoolate-dialog .footer button {
  border: 1px solid transparent;
  padding: 0.5em 0.75em;
  background: #434252;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  margin-left: 0.75em;
  color: #fff;
}
.dialog-templates .isoolate-dialog .footer button:hover {
  background: #525163;
}
.dialog-templates .isoolate-dialog .footer button.green {
  background: #19a970;
}
.dialog-templates .isoolate-dialog .footer button.green:hover {
  background: #189463;
}
.dialog-templates .isoolate-dialog .footer button.orange {
  background: #ce9e2e;
}
.dialog-templates .isoolate-dialog .footer button.orange:hover {
  background: #b78b24;
}
.dialog-templates .isoolate-dialog .report-block {
  display: none;
}
.dialog-templates .isoolate-dialog .report-block .form-errors {
  display: none;
  background: #823939;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}
.dialog-templates .isoolate-dialog .report-message {
  margin-bottom: 0.5em;
}
.dialog-templates .isoolate-dialog .report-block select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem 0.75rem;
  appearance: none;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #2c2b38;
  border: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
}
.dialog-templates .isoolate-dialog .report-block textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #2c2b38;
  border: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 1rem;
}
.dialog-templates .isoolate-dialog .report-block .select-container {
  margin-bottom: 1rem;
}
.dialog-templates .isoolate-dialog .report-block.visible {
  display: block;
}
.dialog-templates .isoolate-dialog .report-block .reason {
  display: none;
}
.dialog-templates .isoolate-dialog .report-block .reason.visible {
  display: block;
}
.dialog-templates .isoolate-dialog .info-block {
  display: none;
}
.dialog-templates .isoolate-dialog .info-block.visible {
  display: block;
}
.dialog-templates .isoolate-dialog .field-container {
  margin-top: 1.25rem;
}
.dialog-templates .isoolate-dialog .field-container .field {
  position: relative;
  padding: 0.25rem 0;
  display: flex;
}
.dialog-templates div.score {
  font-size: inherit;
  background: none;
}
.dialog-templates .isoolate-dialog .field-container .field > div:first-child {
  font-weight: bold;
  width: 6.25rem;
  display: inline-block;
}
.dialog-templates .isoolate-dialog .field-container .value {
  width: calc(100% - 6.25rem);
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog-templates .isoolate-dialog .field-container .score > div:last-child {
  padding: 0.2em 0.5em;
  font-weight: bold;
  font-size: 0.8em;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-templates .score_0 {
  background: #1c1c1c;
}
.dialog-templates .score_1 {
  background: #7b7b7b;
}
.dialog-templates .score_2 {
  background: #4ca74c;
}
.dialog-templates .score_3 {
  background: #daa43c;
}
.dialog-templates .score_4 {
  background: #e24c4c;
}
.dialog-templates .isoolate-dialog .upload-result li.allow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2319a970' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Cpath d='M0,0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10c5.52,0,10-4.48,10-10S17.52,2,12,2z M16.95,10.23l-5.66,5.66 c-0.39,0.39-1.02,0.39-1.41,0l-2.83-2.83c-0.39-0.39-0.39-1.02,0-1.41c0.39-0.39,1.02-0.39,1.41,0l2.12,2.12l4.95-4.95 c0.39-0.39,1.02-0.39,1.41,0C17.34,9.21,17.34,9.84,16.95,10.23z'/%3E%3C/g%3E%3C/svg%3E");
}
.dialog-templates .isoolate-dialog .upload-result li.block {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ce3636' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,13L12,13c-0.55,0-1-0.45-1-1V8 c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1v4C13,12.55,12.55,13,12,13z M12,17L12,17c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h0 c0.55,0,1,0.45,1,1v0C13,16.55,12.55,17,12,17z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dialog-templates .isoolate-dialog .upload-result li .reason {
  opacity: 0.5;
}
.dialog-templates .isoolate-dialog .upload-result li:first-child {
  margin-top: 0;
}

.theme-light .isoolate-dialog {
  color: #242424;
  background: none;
}
.theme-light .isoolate-dialog:hover::after {
  color: #242424;
  background: rgba(255, 255, 255, 0.85);
}
.theme-light .isoolate-dialog .header {
  background: #f1f1f1;
}
.theme-light .isoolate-dialog .footer {
  background: #f1f1f1;
}
.theme-light .isoolate-dialog .report-block select {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.theme-light .isoolate-dialog .field-container .score > div:first-child {
  color: #242424;
}
.theme-light .isoolate-dialog:hover .hover-layer {
  background: rgba(47, 72, 126, 0.84);
}
.theme-light .isoolate-dialog-content .content-container {
  background: #f9f9f9;
}
.theme-light .tooltip-trigger {
  color: #ccc;
  border-color: #ddd;
}

.template-dialog {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.template-dialog .form-group {
  margin-bottom: 1rem;
  position: relative;
}
.template-dialog .overlay {
  background: rgba(0, 0, 0, 0.875);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.template-dialog > .content-container {
  width: calc(37.5rem + 2rem);
  z-index: 3;
  background: #fff;
}
.template-dialog > .content-container > .content {
  padding: 1rem;
  max-height: 80vh;
  overflow-y: scroll;
}
.template-dialog > .content-container > .footer {
  padding: 1rem;
  background: #f3f3f3;
}
.template-dialog > .content-container > .footer .form-actions {
  display: flex;
  justify-content: space-between;
}
.template-dialog .isoolate-dialog {
  font-size: 1rem;
  margin-bottom: 1rem;
  min-height: 21.25rem;
}
.template-dialog .isoolate-dialog[data-dialog-layout="credentials_warn"],
.template-dialog .isoolate-dialog[data-dialog-layout="credentials_warn_info"] {
  min-height: 14rem;
}
.template-dialog .isoolate-dialog [data-editable-selector] {
  position: relative;
}
.template-dialog .isoolate-dialog [data-editable-selector].hover:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  outline: 2px solid #47ffe2;
  box-shadow: inset 0 0 0.875rem 0 #47ffe2;
}
.template-dialog .isoolate-dialog .footer .logo {
  width: 7.5rem;
  height: 2.875rem;
}
.template-dialog .isoolate-dialog .hover-layer {
  display: none;
}
.template-dialog .template-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f3f3f3;
}
.template-dialog .template-dialog-header h1 {
  font-size: 1.5rem;
}
.template-dialog .report-options {
  border: 1px solid #ddd;
  border-radius: 0.1875rem;
  padding: 0.375rem 0.75rem;
  margin-bottom: 1rem;
}
.template-dialog .report-options li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f1f1;
}
.template-dialog .report-options li span {
  cursor: pointer;
  opacity: 0.1;
}
.template-dialog .report-options li:hover span {
  opacity: 0.3;
}
.template-dialog .report-options .add-option {
  position: relative;
}
.template-dialog .report-options .add-option .add-option-button {
  position: absolute;
  top: 0.4375rem;
  right: 0;
}
.template-dialog .report-options .add-option .form-group {
  margin-bottom: 0;
}
.template-dialog .report-options .add-option .form-control {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  outline: none;
}
.template-dialog ul, .template-dialog ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.upload-file-preview input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.upload-file-preview .template-logo {
  width: 7.5rem;
  height: 2.875rem;
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.upload-file-preview .template-logo img {
  max-height: 100%;
}




/* The credentials helper dialog (variants 210/211) ships light-only in the extension, so it
   deliberately sits outside the theme-light/default-dark palette below: it must preview as light
   whatever theme the template uses. Don't add .theme-light overrides for these rules. */
.dx-credentials-helper-dialog {
  background-color: #fbfbfb;
  color: #333;
  position: relative;
}

/* Keep the dark theme's wrapper colour from framing the light card. */
.dialog-templates .isoolate-dialog[data-dialog-layout^="credentials_warn"] {
  background: none;
}

.dx-credentials-helper-dialog-header {
  text-align: left;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 10px 50%;
}

.dx-credentials-helper-dialog-header.warning {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ce9e2e' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,13L12,13c-0.55,0-1-0.45-1-1V8 c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1v4C13,12.55,12.55,13,12,13z M12,17L12,17c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h0 c0.55,0,1,0.45,1,1v0C13,16.55,12.55,17,12,17z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dx-credentials-helper-dialog-header.loading {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='%23ccc' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E");
}

.dx-credentials-helper-dialog-header.success {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2319a970' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24' y='0'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M11.3,2.26l-6,2.25C4.52,4.81,4,5.55,4,6.39v4.71c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V6.39 c0-0.83-0.52-1.58-1.3-1.87l-6-2.25C12.25,2.09,11.75,2.09,11.3,2.26z M10.23,14.83l-2.12-2.12c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0l1.41,1.41l3.54-3.54c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41l-4.24,4.24 C11.26,15.22,10.62,15.22,10.23,14.83z'/%3E%3C/g%3E%3C/svg%3E");
}

.dx-credentials-helper-dialog-header h1 {
  font-size: .65rem;
  margin: 0;
  padding-left: 2.25rem;
}

.dx-credentials-helper-dialog-header {
  padding: .5rem .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dx-credentials-helper-dialog-header .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.dx-credentials-helper-dialog-header .close svg {
  fill: #ccc;
}

.dx-credentials-helper-dialog-content,
.dx-credentials-helper-dialog-footer {
  padding: .5rem .75rem;
}

.dx-credentials-helper-dialog-content {
  border-top: 1px solid #e5e5e5;
  font-size: 0.65rem;
}

.dx-credentials-helper-dialog-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e5e5e5;
  min-height: 38px;
  align-items: center;
}

.dx-credentials-helper-dialog-footer .logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  width: 64px;
  height: 18px;
}

.dx-credentials-helper-dialog-footer .logo img {
  max-width: 100%;
  max-height: 100%;
}

.dx-credentials-helper-dialog-footer .buttons {
  display: flex;
  gap: .5rem;
}

.dx-credentials-helper-dialog-footer button {
  padding: 4px 6px;
  border: 1px solid transparent;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  font-size: .65rem;
}

.dx-credentials-helper-dialog-footer button.remember {
  background-color: orange;
  color: #fff;
}
.dx-credentials-helper-dialog-footer button.no {
  background-color: #333;
  color: #fff;
}


.dx-credentials-helper-dialog-content {
  #bar {
    display: flex;
    gap: 2px;
  }
  #bar.str_0 span {
    background-color: red;
  }
  #bar.str_1 span {
    background-color: orange;
  }
  #bar.str_2 span {
    background-color: #ffd400;
  }
  #bar.str_3 span {
    background-color: #9ced1f;
  }
  #bar.str_4 span {
    background-color: #45a670;
  }
  #bar span {
    width: 20px;
    height: 4px;
  }
  #amount-icon {
    width: 20px;
    height: 20px;
  }
}
@media (min-width: 768px) {
    html {
        font-size: 10px;
    }

    html:has(body.docs-iframe) {
        font-size: 14px;
    }

    .chat-size.narrow {
        width: 42rem;
    }
}

@media (min-width: 992px) {
    .chat-size.narrow {
        width: 46rem;
    }
    html {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .chat-size.narrow {
        width: 46rem;
    }
    html {
       font-size: 14px;
    }
}

@media (min-width: 1400px) {
    .chat-size.narrow {
        width: 54rem;
    }
    html {
        font-size: 16px;
    }
}