:root {
    --background-color-main: #FAFAFA;
    --background-color-dialogs: white;
    --color-underline: #A5B2B9;
    --padding-side-topbar-menu: 32px;
    --padding-top-topbar-menu: 27px;
    --height-topbar-title: 54px;
    --height-topbar-tabs: 36px;
    --height-sub-tabs: 36px;
    --height-modal-top-tabs: 39px;
    --background-color-topbar: white;
    --background-color-sidebar: #222B36;
    --background-color-sidebar-hover: #313D4A;
    --background-color-sidebar-selected: #404E60;
    --background-color-tag-blink: #B2D2F1;
    --width-topbar-menu: 143px;
    --color-disabled: #CCCCCC;
    --color-topbar: #4A4A4A;
    --top-topology-topbar: 53px;
    --top-topology-background: calc(var(--top-topology-topbar) + 42px);
    --top-back-to-cluster-card: calc(var(--top-topology-background) + 10px);
    --left-topology-orientation-title: 36px;
    --color-sidebar: white;
    --color-scroll-sidebar: #353E4C;
    --color-filter-icon: #C4C4C4;
    --color-highlight-1: #3FA2F7;
    --color-highlight-2: #7BC2FF;
    --color-highlight-3: #84C9FF;
    --color-highlight-sidebar: #42A5ED;
    --color-tw-slider-disabled: #626262;
    --color-hover-1: #7BC2FF;
    --color-hover-2: #C4E4FF;
    --color-hover-3: #EFF7FF;
    --color-active-icon: #42A5ED;
    --color-active-click-1: #4895D8;
    --color-nav-link: #717171;
    --color-input-placeholder: #C4C4C4;
    --width-topology-selector: 250px;
    --background-color-tw-dialog: #3A3D3F;
    --background-color-topbar-drawer: #DBDEE1;
    --transition-delay-close-topbar-drawer: 0.3s;
    --background-color-button-primary-hover: #021745;
    --background-color-save-button: #088D10;
    --background-color-tag: #D3E8FC;
    --background-color-incident-information: #EE4036;
    --margin-top-tw-tag: 10px;
    --width-sidebar-open: 216px;
    --width-sidebar-closed: 64px;
    --width-sidebar-popout: 155px;
    --width-radar-filter: 300px;
    --height-sidebar-title: 40px;
    --height-table-top-group-filter: 32px;
    --height-full-table-top-group-filter: 111px;
    --color-primary-button: #1F75B2;
    --color-active-primary-button: linear-gradient(180deg, #2686CB 0.89%, #1F75B2 100.89%);
    --color-placeholder: #8E8E8E;
    --height-radar-dialog-header: 64px;
    --height-modal-header: 60px;
    --height-modal-footer: 64px;
    --margin-modal-top: 50px;
    --margin-modal-bottom: 50px;
    --margin-modal-body: 16px;
    --border-width-modal: 1px;
    --padding-right-left-cell: 8px;
    --padding-top-bottom-cell: 8px;
    --padding-left-icon-filter: 8px;
    --padding-expanded-content: 24px;
    --font-size-icon-filter: 12px;
    --padding-left-dropdown-toggle: 8px;
    --padding-right-dropdown-toggle: 12px;
    --color-html-link: #0000CE;
    --width-rule-effects-button-small: 57px;
    --width-rule-effects-button: 65px;
    --border-radius-input: 3px;
    --tw-header-filter-size: 16px;
    --background-color-tw-dialog-header: #212121;
    --height-topology-modal: 410px;
    --height-topology-modal-header: 56px;
    --height-table-header-row: 33px;
    --height-table-body-row: 37px;
    --table-wrapper-max-height-complement: 2px;
    --color-border-section: #D4D4D4;

    /* alert card */
    --color-alert-card-success: #56C568;
    --color-alert-card-warning: #FFCE42;

    /* Table vars */
    --color-table: #333333;
    --color-table-hover: #EFF7FF;
    --background-color-table: white;
    --color-border-table: #EAEAEA;
    --color-border-gray-table: #717171;

    --border-table: 1px solid var(--color-border-table);
    --border-active-table: 2px solid var(--color-active-icon);

    /* calculating the modal body max-height from the screen height minus the modal's margin, border, header and footer */
    --height-modal-body: calc(100vh - var(--height-modal-header) - var(--height-modal-footer) - var(--margin-modal-top) - var(--margin-modal-bottom) - 2 * var(--border-width-modal));
    --height-topology-modal-body: calc(var(--height-topology-modal) - var(--height-topology-modal-header) - 2 * var(--border-width-modal));

    /* z-indexes */
    --z-index-tw-top-tabs-drawer: 1;
    --z-index-sidebar-wrapper: 999;
    --z-index-tl-scrollable: calc(var(--z-index-tw-top-tabs-drawer) + 2);
    --z-index-tw-selector: calc(var(--z-index-tl-scrollable) + 1);
    --z-index-tw-tags-icon-filter: calc(var(--z-index-tl-scrollable) + 1);
    --z-index-topbar: calc(var(--z-index-tl-scrollable) + 1);
    --z-index-scan-progress: calc(var(--z-index-topbar) + 1);
    --z-index-topology-topbar: calc(var(--z-index-topbar) - 1);
    --z-index-tw-selector-selector-dropdown: 0;

    /* nya-bs-select */
    --top-nya-bs-select-caret: 14px;
    --right-nya-bs-select-caret: 16px;
}

#page-wrapper.is-saas {
    --width-topbar-menu: 109px;
}

.full-view {
    --padding-top-topbar-menu: 16px;
}

html {
    overflow: hidden;
    height: 100%;
}

#index-page-content {
    height: 100%;
}

.tw-dialogs-view {
    transition: all ease-in-out 200ms;
    position: absolute;
    box-shadow: 0px 5px 15px #888888;
    overflow: hidden;
    z-index: 990;
    background-color: white;
    max-width: 1340px;
    margin: 25px auto;
}

.hide {
    display: none;
}

.tw-dialog-center,
.tw-dialog-center-short,
.tw-extra-short-dialog {
    left: 8%;
    right: 8%;
}

.tw-extra-wide-dialog {
    left: 3%;
    right: 3%;
}

.tw-dialog-bottom {
    left: 2%;
    right: 2%;
}

.tw-dialog-narrow {
    max-width: 950px;
}

.tw-dialog-medium {
    max-width: 1100px;
}

.tw-scan-dropdown {
    display: flex;
    position: relative;
}

.tw-input-autocomplete .nya-bs-select.btn-group .dropdown-menu {
    top: -13px;
}

.invisible-selector-toggle ol.selector-dropdown.nya-bs-select.form-control {
    background: transparent;
    border: none;
    height: 0;
    padding: 0;
}

.invisible-selector-toggle .selector-dropdown.nya-bs-select.form-control .dropdown-toggle,
.invisible-selector-toggle .selector-dropdown.nya-bs-select.form-control .dropdown-toggle .filter-option {
    display: none;
}

.twistlock-ui .tw-scan-dropdown tw-selector .dropdown-menu,
.twistlock-ui .tw-scan-dropdown tw-selector .nya-bs-select.selector-dropdown {
    width: 340px;
    max-width: 340px;
}

.twistlock-ui .tw-scan-dropdown tw-selector .dropdown-menu.open {
    border: none;
}

.twistlock-ui .tw-scan-dropdown tw-selector {
    top: 34px;
    right: 0px;
    position: absolute;
}

.twistlock-ui tw-credential-selector .nya-bs-select .nya-bs-option a {
    padding: 12px 14px 12px 17px;
}

.twistlock-ui tw-selector .credential-item .secondary-text,
.twistlock-ui tw-selector .selected:hover .credential-item .secondary-text {
    color: #717171;
}

tw-credential-selector .external-cred .nya-bs-select .dropdown-toggle .filter-option {
    --external-creds-icon-size: 22px;
    padding-left: calc(var(--external-creds-icon-size) + 3px);
}

tw-credential-selector .external-cred .nya-bs-select .dropdown-toggle .filter-option:before {
    content: "";
    background: url("prisma-cloud.svg");
    background-size: contain;
    position: absolute;
    height: var(--external-creds-icon-size);
    width: var(--external-creds-icon-size);
    top: 3px;
    left: 0;
}

.twistlock-ui tw-selector .credential-item .id {
    font-size: 14px;
    font-family: "Lato-Bold";
    max-width: 70%;
}

.twistlock-ui tw-selector .credential-item .description {
    font-size: 13px;
    line-height: 16px;
}

.twistlock-ui tw-selector .credential-item .text-separator {
    margin: 0 8px 0 8px;
}

.twistlock-ui tw-selector .nya-bs-select .credential-item .additional-details {
    margin-top: 6px;
    font-size: 12px;
}

.twistlock-ui tw-selector .nya-bs-select .credential-item .additional-details .type {
    max-width: calc(100% - 46px);
}

.twistlock-ui tw-selector .credential-item .additional-details .icon,
.twistlock-ui tw-selector .selected:hover .credential-item .additional-details .icon {
    margin-right: 6px;
    font-size: 20px;
    color: #AFAFAF;
}

.twistlock-ui tw-selector .selected .credential-item .secondary-text,
.twistlock-ui tw-selector .selected .credential-item .additional-details .icon {
    color: inherit;
}

@media (min-height: 866px) {
    .tw-dialog-center {
        bottom: 80px;
        height: 785px;
    }
}

@media (max-height: 865px) and (min-height: 796px) {
    .tw-dialog-center {
        top: 0%;
        height: 785px;
    }
}

@media (max-height: 795px) {
    .tw-dialog-center {
        top: 0%;
        bottom: 10px;
    }
}

@media (min-height: 400px) {
    .tw-dialog-bottom {
        bottom: 20px;
        height: var(--height-topology-modal);
    }
}

@media (max-height: 400px) {
    .tw-dialog-bottom {
        bottom: 20px;
        top: 0%;
    }
}

@media (min-height: 831px) {
    .tw-dialog-center-short {
        top: 0px;
        bottom: 260px;
        height: 570px;
    }

    .tw-extra-wide-dialog {
        top: 0px;
        bottom: 80px;
        height: 750px;
    }
}

@media (max-height: 830px) and (min-height: 581px) {
    .tw-dialog-center-short {
        top: 0%;
        height: 570px;
    }
}

@media (max-height: 580px) {
    .tw-dialog-center-short {
        top: 0%;
        bottom: 10px;
    }
}

@media (max-height: 830px) and (min-height: 761px) {
    .tw-extra-wide-dialog {
        height: 750px;
        top: 0%;
    }
}

@media (max-height: 760px) {
    .tw-extra-wide-dialog {
        bottom: 10px;
        top: 0%;
    }
}

@media (min-height: 661px) {
    .tw-extra-short-dialog {
        bottom: 260px;
        height: 400px;
    }
}

@media (max-height: 660px) and (min-height: 411px) {
    .tw-extra-short-dialog {
        top: 0%;
        height: 400px;
    }
}

@media (max-height: 410px) {
    .tw-extra-short-dialog {
        top: 0%;
        bottom: 10px;
    }
}

.twistlock-ui table {
    --border-table: 1px solid var(--color-border-table);
    --color-table: #333333;
    --background-color-table: white;
}

.twistlock-ui table.gray-table-layout,
.twistlock-ui .gray-table-layout table {
    --border-table: 1px solid var(--color-border-gray-table);
    --color-table: #C8C8C8;
    --background-color-table: var(--background-color-tw-dialog);
    --color-table-hover: #5C5F60
}

.twistlock-ui.gray-modal-layout .scrollable-modal,
.gray-modal-layout .dialog-overflow {
    overflow-y: auto;
    height: calc(100% - var(--height-radar-dialog-header));
    max-height: unset;
}

.gray-modal-layout .dialog-overflow.has-footer {
    height: calc(100% - (var(--height-radar-dialog-header) + var(--height-modal-footer)));
}

.tw-dialogs-view.ng-animate .dialog-overflow {
    overflow-y: hidden;
}

.tw-dialog {
    transition: all ease-in-out 100ms;
    display: block;
    height: 100%;
}

.tw-dialogs-view.ng-enter,
.tw-dialog.ng-enter,
.tw-dialogs-view.ng-leave.ng-leave-active,
.tw-dialog.ng-leave.ng-leave-active {
    opacity: 0;
}

.tw-dialogs-view.ng-leave,
.tw-dialog.ng-leave,
.tw-dialogs-view.ng-enter.ng-enter-active,
.tw-dialog.ng-enter.ng-enter-active {
    opacity: 1;
}

.tw-dialog-controls {
    position: absolute;
    right: 32px;
    top: 20px;
    display: inline-flex;
}
.tw-dialog-controls.color-white .tw-table-icon .tw-hover {
    color: var(--background-color-tag);
}
.gray-table-layout .tw-table-icon .tw-default,
.gray-table-layout .tw-table-icon .tw-hover,
.color-white .tw-hover:active,
.color-white .tw-hover,
.color-white {
    color: white;
}

.gray-table-layout .table-btn[disabled] {
    opacity: 0.3;
}

/* no border dark table for the radar */
.twistlock-ui .gray-table-layout.no-borders-table table,
.twistlock-ui table.gray-table-layout.no-borders-table,
.twistlock-ui .gray-table-layout.no-borders-table table thead th,
.twistlock-ui table.gray-table-layout.no-borders-table thead th,
.twistlock-ui .gray-table-layout.no-borders-table table tbody td,
.twistlock-ui table.gray-table-layout.no-borders-table tbody td  {
    border: none;
}

.twistlock-ui .gray-table-layout.no-borders-table tr td:first-of-type {
    font-family: Lato-Semibold;
}

#content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    position: relative;
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.subnet-dialog-scrollable-list {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 20px;
}

.flex-row {
    display: flex;
    flex-direction: row;
    height: 100%;
}

a,
a:hover,
a:active {
    color: var(--color-html-link);
    cursor: pointer;
}

a.disabled {
    color: var(--color-disabled);
    background-color: transparent;
    cursor: auto;
}

.disabled-section a,
a.disabled-section {
    color: #333333;
    background-color: transparent;
    cursor: auto;
}

a.tw-hover.disabled,
a:hover.disabled {
    color: var(--color-disabled);
    text-decoration: none;
}

.link-with-icon {
    text-indent: 2px;
}

.link-with-icon .icon {
    font-size: 12px;
}

.link-with-icon:hover .icon {
    color: unset;
}

/* The current content element - not including sidebar and topbar */
#ui-view {
    height: 100vh;
    overflow-y: auto;
    padding-top: 32px;
}

#ui-view.full-view {
    padding-top: 0px;
    overflow: hidden;
}

.login #ui-view {
    height: 100vh;
    padding-top: unset;
}

/*
Topbar
*/
.topbar {
    z-index: var(--z-index-topbar);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.topbar-group {
    position: relative;
    width: 100%;
    background-color: var(--background-color-topbar);
    color: var(--color-topbar);
    padding-left: var(--padding-side-topbar-menu);
}

.topbar-title-wrapper {
    padding-top: 16px;
    padding-left: 16px;
    padding-bottom: 8px;
    display: flex;
    height: var(--height-topbar-title);
}

.orientation-title {
    font-family: "Lato-Light";
    font-size: 24px;
    float: left;
    align-items: center;
    text-transform: capitalize;
}

.full-view .orientation-title {
    position: absolute;
    top: 12px;
    left: var(--left-topology-orientation-title);
}

.topbar-tabs-wrapper {
    display: flex;
    height: var(--height-topbar-tabs);
}

.topbar-menu-group {
    position: absolute;
    right: 0px;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: var(--padding-top-topbar-menu) var(--padding-side-topbar-menu);
}

.topbar-menu-group .topbar-icon-group {
    display: flex;
    justify-content: flex-end;
    width: var(--width-topbar-menu);
    margin-bottom: 0;
    transition: margin-bottom 100ms 140ms ease-in;
}

.topbar-menu-group .topbar-icon-group .item {
    padding-left: 12px;
}

.topbar-icon {
    font-size: 13px;
    color: #969DA1;
    vertical-align: -1px;
    padding-left: 2px;
}

.topbar-icon.fa-question {
    font-size: 17px;
    margin-right: 3px;
    margin-top: 3px;
    vertical-align: unset;
}

.modal-header .topbar-icon.fa-question {
    vertical-align: text-top;
}

.topbar-icon.icon-cowbell {
    padding-left: 3px;
}

.topbar-icon-circle:hover {
    border-color: var(--color-hover-1);
}

.topbar-icon-circle:hover .topbar-icon,
.topbar-icon:hover {
    color: var(--color-hover-1);
}

.dropdown.open .topbar-icon {
    color: var(--color-highlight-1);
}

.dropdown.open .topbar-icon-circle {
    border-color: var(--color-highlight-1);
}

.topbar-icon-circle {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 1px solid #969DA1;
    text-align: center;
}

.topbar-menu-group .dropdown-menu {
    background-color: #393D40;
    font-size: 16px;
    font-family: "Lato-Regular";
    color: #C5C5C2;
    margin-top: 10px;
    border: none;
}

.topology-top-bar .dropdown-menu .dropdown-header,
.topbar-menu-group .dropdown-menu .dropdown-header {
    font-size: 16px;
    color: #C5C5C2;
}

.topbar-menu-group .dropdown-menu-text {
    color: white;
}

.topology-top-bar .dropdown-menu a {
    color: #333333;
}

.topbar-menu-group .dropdown-menu a {
    font-family: "Lato-Medium";
    color: var(--color-highlight-2);
}

.topology-top-bar .dropdown-menu a:hover,
.topbar-menu-group .dropdown-menu a:hover {
    background-color: var(--color-highlight-2);
    color: #333333;
}

.topology-top-bar .dropdown-menu-right:after,
.topbar-menu-group .dropdown-menu-right:after {
    position: absolute;
    top: -6px;
    right: 6px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #393D40;
    border-left: 6px solid transparent;
    content: '';
}

.project-selector-group {
    position: relative;
    height: 65px;
    flex: auto 0 0;
}

.project-selector-group-button {
    height: 100%;
    width: 100%;
    display: inline-flex;
    align-items: center;
    outline: none;
    cursor: pointer;
    font-family: "Lato-Regular";
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    color: var(--color-sidebar);
}

.project-selector-group-button:hover {
    background-color: var(--background-color-sidebar-hover);
}

.current-project-group {
    overflow: hidden;
    transition: text-indent 0.3s ease;
}

.sidebar-closed .current-project-group {
    text-indent: -110px;
}

.current-project {
    color: #84C9FF;
    font-family: "Lato-Regular";
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    padding-top: 2px;
}

.current-project > .tw-overflow-ellipsis {
    max-width: 140px;
}

.current-project .fa-angle-right {
    font-size: 1.1em;
    margin-left: 6px;
    margin-top: 2px;
}

#topbar-tabs-dropdown {
    height: 100%;
}

#topbar-tabs-dropdown > button {
    height: 100%;
    border-bottom: 3px solid var(--color-highlight-1);
    border-top: 3px solid transparent;
    padding: 3px 25px 0px 8px;
    font-size: 14px;
    font-family: "Lato-Semibold";
    z-index: 0;
    width: auto;
}

#topbar-tabs-dropdown > button:hover {
    color: var(--color-hover-1);
}

#topbar-tabs-dropdown.open > button {
    z-index: 100; /* when dropdown is open, hide the gap between button and opened list by elevating button over the background */
}

#topbar-tabs-dropdown .caret {
    top: 45%;
    right: 8px;
    border-color: var(--color-topbar);
}


#topbar-tabs-dropdown > button:hover .caret {
    border-color: var(--color-hover-1);
}

.no-pointer-events {
    pointer-events: none;
}

.btn-group.no-border-radius>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}


.topbar-tabs.tabs-dummy-placeholder {
    visibility: hidden;
}

.topbar-tabs {
    position: absolute;
    overflow: hidden;
    min-width: 260px; /* make tabs collapse animation stop at the minimum width - makes a better looking transition to dropdown tabs */
}

.topbar-tabs.collapsing {
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.topbar-tabs a {
    font-family: "Lato-Regular";
    font-size: 14px;
    text-decoration: none;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    float: left;
    height: var(--height-topbar-tabs);
    color: var(--color-topbar);
}

.topbar-tabs a:hover:not(.selected) {
    color: var(--color-hover-1);
}

.topbar-tabs a.selected:hover {
    color: var(--color-topbar);
}

.topbar-tabs a.selected {
    font-family: "Lato-Bold";
    border-top: 3px solid transparent; /* In order to keep the inner text in the same place as without borders */
    border-bottom: 3px solid var(--color-highlight-1);
}
/* End topbar */

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.clearfix {
    overflow: auto;
}

.twistlock-textarea {
    resize: none;
}

.clickable-row,
.pointer {
    cursor: pointer;
}

/* The max width is dependant on the container */
.popover {
    max-width: 100%;
}

.tw-fixed-icon-column {
    width: 74px;
}

.tw-selected-checkbox-column {
    width: 76px;
}

.tw-order-column {
    width: 60px;
}

.tw-fixed-icon-column.has-header-filters,
.tw-selected-checkbox-column.has-header-filters {
    width: 96px;
}

.tw-fixed-semi-medium-icon-column {
    width: 90px;
}

.tw-fixed-semi-medium-icon-column.has-header-filters {
    width: 116px;
}

.tw-fixed-effect-column {
    width: 105px;
}

.tw-fixed-effect-column.has-header-filters {
    width: 131px;
}

.tw-fixed-medium-effect-column {
    width: 152px;
}

.tw-fixed-medium-effect-column.has-header-filters {
    width: 178px;
}

.tw-fixed-wide-effect-column {
    width: 283px;
}

.tw-fixed-extra-wide-effect-column {
    width: 300px;
}

.tw-metadata-tags-autocomplete-column {
    width: 165px;
}

.cnnf .tw-table .effect {
    padding-left: calc(50% - 37px);
}

.tw-fixed-severity-icon-column {
    width: 92px;
}

.tw-fixed-severity-icon-column.has-header-filters {
    width: 105px;
}

.tw-fixed-wide-icon-column {
    width: 150px;
}

.tw-fixed-wide-icon-column.has-header-filters {
    width: 176px;
}

.tw-fixed-medium-icon-column {
    width: 119px;
}

.tw-fixed-medium-icon-column.has-header-filters {
    width: 145px;
}

.tw-collection-column {
    width: 91px;
}

.tw-collection-column.has-header-filters {
    width: 117px;
}

.tw-risk-factors-column {
    width: 98px;
}

.tw-risk-factors-column.has-header-filters {
    width: 124px;
}

.tw-fixed-extra-wide-column {
    width: 220px;
}

.tw-fixed-extra-wide-column.has-header-filters {
    width: 246px;
}

.defender-type-column {
    width: 250px;
}

.tw-fixed-rule-effects-column.small {
    width: 175px;
}

.tw-fixed-rule-effects-column {
    width: 235px;
}

.tw-fixed-rule-effects-column.large {
    width: 290px;
}

.table-fixed-column-width-unwrapped,
.table-fixed-column-width {
    table-layout: fixed;
    width: 100%;
}

.table-fixed-column-width td {
    overflow: hidden;
    white-space: nowrap;
}

.table-fixed-column-width td.collection-column {
    white-space: normal;
}

.table-fixed-column-width-unwrapped td {
    white-space: normal;
    overflow: hidden;
}

.inline-link-length-limit {
    max-width: 18vw;
}

.inline-link-length-limit .indent-compensate {
    margin-left: -3px;
}

.audit-table td {
    white-space: normal;
}

.secondary-table-details {
    margin-left: 30px;
}

.twistlock-ui table.table-data-aligned-top tbody td {
    vertical-align: top;
}

td.no-overflow {
    overflow: inherit;
}

.center-glyph {
    text-align: center;
    display: block;
}

.tw-dlg-name-header {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

th[st-sort] .tw-header-content .tw-header-filters:after {
    content: url("sort.svg");
    width: 18px;
    font-size: 12px;
    line-height: 17px;
    display: flex;
    padding-left: 4px;
}

th[st-sort] .tw-header-content .tw-header-filters:hover:after {
    content: url("sort-hover.svg");
}

.tw-table .tw-header-content .icon-sort {
    font-size: 18px;
    line-height: 20px;
    width: 18px;
}

th[st-sort] .tw-header-content .tw-header-filters {
    font-size: 18px;
}

th {
    /* Safari compatibility: override bold table headers inherited from user agent stylesheet  */
    font-weight: unset;
}

.radar-dialog .modal-content {
    box-shadow: 0px 0px 12px 2px #A5BAD1;
}

.twistlock-ui .modal-content td[tw-wait],
.twistlock-ui .modal-content .bottom-row,
.twistlock-ui .modal-content table td.pagination-row.transparent-background,
.twistlock-ui .modal-content table tbody tr .transparent-background,
.twistlock-ui .modal-content table tbody tr.transparent-background > td,
.twistlock-ui .modal-content .transparent-background {
    background-color: var(--background-color-dialogs);
}

.twistlock-ui .tw-dialog td[tw-wait],
.twistlock-ui .tw-dialog .bottom-row,
.twistlock-ui .tw-dialog table td.pagination-row.transparent-background,
.twistlock-ui .tw-dialog table tbody tr .transparent-background,
.twistlock-ui .tw-dialog table tbody tr.transparent-background > td,
.twistlock-ui .tw-dialog .transparent-background {
    background-color: var(--background-color-dialogs);
}

td[tw-wait],
.bottom-row,
.twistlock-ui table td.pagination-row.transparent-background,
.twistlock-ui table tbody tr .transparent-background,
.twistlock-ui table tbody tr.transparent-background > td,
.transparent-background {
    background-color: var(--background-color-main);
}

/* when combined with sort - move filter icon to the right */
.twistlock-ui th[st-dropdown-filter] .tw-header-content,
.twistlock-ui th[st-sort][st-dropdown-filter] .tw-header-content,
.twistlock-ui th[st-sort][st-date-filter] .tw-header-content {
    width: calc(100% - 16px);
}

th[st-dropdown-filter] .icon-filter,
th[st-date-filter] .icon-filter {
    color: var(--color-filter-icon);
}

th[st-sort].st-sort-descent .tw-header-content .tw-header-filters,
th[st-sort].st-sort-ascent .tw-header-content .tw-header-filters {
    width: 16px;
}

th[st-sort].st-sort-descent .tw-header-content .tw-header-filters:after,
th[st-sort].st-sort-ascent .tw-header-content .tw-header-filters:after {
    vertical-align: middle;
    font-size: 16px;
    line-height: 16px;
}

th[st-sort].st-sort-ascent .tw-header-content .tw-header-filters:after {
    content: url("arrow-down.svg");
}

th[st-sort].st-sort-ascent .tw-header-content .tw-header-filters:hover:after {
    content: url("arrow-down-hover.svg");
}

th[st-sort].st-sort-descent .tw-header-content .tw-header-filters:after {
    content: url("arrow-up.svg");
}

th[st-sort].st-sort-descent .tw-header-content .tw-header-filters:hover:after {
    content: url("arrow-up-hover.svg");
}


.visibility-hidden {
    visibility: hidden;
}

.filter-dropdown-item {
    white-space: nowrap;
    font-family: "Lato-Light";
    color: #333333;
    text-transform: none;
    margin-left: 15px;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-dropdown-item .tw-checkbox {
    margin-right: 5px;
}

/* Override library shadow for dropdown toggles (e.g., active "filter" icon on a table header) */
.btn-group.open .dropdown-toggle {
    box-shadow: none;
}

.expandable-section .expandable-header:hover .expand-row-link,
.twistlock-ui .expanding-rows-table tr.clickable-row:hover .expand-row-icon {
    color: var(--color-hover-1);
}

.twistlock-ui table.expanding-rows-table tr.expanded-content .waas-expand-table {
    /* stacking the table under the main table's filter dropdown*/
    position: sticky;
    z-index: 1;
    overflow: inherit;
}

.waas-expand-table .tw-collection-selection {
    border-bottom: none;
    white-space: normal;
}

.dropdown.open .icon-filter {
    color: var(--color-active-icon);
}

.date-pick {
    width: 160px;
}

.tw-filter-dropdown-search {
    min-width: 220px;
    font-size: 16px;
    font-family: "Lato-Light";
    display: flex;
    align-items: center;
}

.tw-filter-dropdown-search-buttons {
    padding-top: 3px;
}

.tw-filter-dropdown-search .tw-filter-dropdown-search-buttons {
    padding-left: 0;
    padding-right: 5px;
    font-family: "Lato-Regular"
}

.tw-filter-dropdown-scroller {
    max-height: 320px;
    overflow-y: auto;
}

.form-group .tw-form-dropdown-scroller {
    max-height: 280px;
    overflow-y: auto;
}

.form-group .tw-form-button-group-headline {
    font-weight: bold;
    padding-top: 6px;
    margin-bottom: 0;
}

.form-group .tw-form-button-group-divider {
    margin-bottom: 6px;
}

.form-group .tw-form-toggle-group-divider {
    margin-bottom: 20px;
}

.tw-hyperlink-small-button {
    display: block;
    white-space: nowrap;
    font-size: small;
    text-transform: none;
    text-decoration: underline;
    cursor: pointer;
}
/*
TODO: remove this after updating ui-bootstrap (https://github.com/twistlock/twistlock/issues/309)
TODO: make sure to check that the date-picker in the audit page looks ok without this
Without this the datepicker in firefox looks squished.
(see https://github.com/angular-ui/bootstrap/issues/3941)
Updating ui-bootstrap should make it work without this
*/
.date-pick button[style] {
    width: auto !important;
    min-width: 100%;
}

.error {
    color: red;
}

/*
Context menu
*/
.position-relative {
    position: relative;
}
.duration {
    border-color: #e5e5e5 #eee #eee #eee;
    border-style: solid;
    border-width: 1px 0;
}

.progressbar-border {
    border: 1px solid black;
}

.padding-left-5 {
    padding-left: 5px !important;
}

/* Override bootstrap color of error fields */
.twistlock-ui .has-error .control-label {
    color: initial;
}

.has-error.tl-has-error {
    margin-bottom: 0;
}

.tl-scrollable-container,
.tl-scrollable-flexible-container,
.tl-small-scrollable {
    overflow-y: auto;
    border-style: none;
}

.tl-scrollable-container {
    height: 400px;
}

.modal-body .tl-scrollable-container {
    height: 380px;
}

.modal-body .tl-scrollable-container.large {
    height: 400px;
}


.tl-scrollable-flexible-container .table,
.tl-scrollable-flexible-container .table.tight-bottom {
    margin-bottom: 0px;
}

.tl-scrollable-flexible-container {
    max-height: 400px;
    margin-bottom: 26px;
}

.tl-scrollable-flexible-container.compact {
    max-height: 294px;
}

.tl-scrollable-flexible-container.mini {
    max-height: 140px;
}

.tl-scrollable-flexible-container.large,
.modal-body .tl-scrollable-flexible-container.extra-large {
    max-height: 627px;
}

.modal-body .tl-scrollable-flexible-container {
    max-height: 380px;
}

.modal-body .tl-scrollable-flexible-container.rows-4 {
    max-height: calc(var(--height-table-header-row) + (4 * var(--height-table-body-row)) + var(--table-wrapper-max-height-complement));
}

.modal-body .tl-scrollable-flexible-container.mini {
    max-height: 152px;
}

.modal-body .tl-scrollable-flexible-container.large {
    max-height: 400px;
}

.modal-body .tl-scrollable-flexible-container.compact {
    max-height: 281px;
}

.tl-small-scrollable {
    max-height: 200px;
}

.min-height-155 {
    min-height: 155px !important;
}

.min-height-260 {
    min-height: 260px !important;
}

.tl-scrollable-container.tl-scrollable-cves {
    height: 600px;
    overflow-y: auto;
    border-style: none;
    padding: 0;
}

.tl-scrollable-border {
    padding: 0;
    border: none;
    background-color: #e6e6e6;
}

/* changing table and first table tr's borders for a scrollable containers sticky headers */
.twistlock-ui .tl-scrollable-container > table,
.twistlock-ui .tl-scrollable-flexible-container > table,
.twistlock-ui .tl-small-scrollable > table {
    border-top: none;
}

.twistlock-ui .tl-scrollable-container > table thead+tbody tr:first-of-type:not(.expanded-row) td,
.twistlock-ui .tl-scrollable-flexible-container > table thead+tbody tr:first-of-type:not(.expanded-row) td,
.twistlock-ui .tl-small-scrollable > table thead+tbody tr:first-of-type:not(.expanded-row) td {
    border-top: none;
}

.twistlock-ui .tl-scrollable-container > table > thead > tr > th,
.twistlock-ui .tl-scrollable-container > table > thead:first-child > tr:first-child > th,
.twistlock-ui .tl-scrollable-flexible-container > table > thead > tr > th,
.twistlock-ui .tl-scrollable-flexible-container > table > thead:first-child > tr:first-child > th,
.twistlock-ui .tl-small-scrollable > table > thead > tr > th,
.twistlock-ui .tl-small-scrollable > table > thead:first-child > tr:first-child > th {
    /* safari compatibility */
    position: -webkit-sticky;
    position: sticky;
    z-index: var(--z-index-tl-scrollable); /* lower than nya-bs-select z-index value */
    top: 0;
    border-top: var(--border-table);
    border-bottom: var(--border-table);
}

.twistlock-ui .tl-scrollable-container > table > thead > tr > th.has-active-filter,
.twistlock-ui .tl-scrollable-container > table > thead:first-child > tr:first-child > th.has-active-filter,
.twistlock-ui .tl-scrollable-flexible-container > table > thead > tr > th.has-active-filter,
.twistlock-ui .tl-small-scrollable > table > thead > tr > th.has-active-filter {
    border-bottom: var(--border-active-table);
}

.twistlock-ui .tl-scrollable-container table th .table-dropdown.tw-filters-dropdown,
.twistlock-ui .tl-scrollable-flexible-container table th .table-dropdown.tw-filters-dropdown,
.twistlock-ui .tl-small-scrollable table th .table-dropdown.tw-filters-dropdown {
    top: calc(var(--padding-top-bottom-cell) + (var(--height-table-top-group-filter)/2));
}

.twistlock-ui table tbody td tw-rule-effects tw-radio-group div {
    margin-top: 0;
}

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

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

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

.text-align-end {
    text-align: end;
}

.text-align-start {
    text-align: start;
}

.tw-trust-badge {
    line-height: 0.8em;
    vertical-align: middle;
    font-size: 17px;
    display: inline-flex;
}

.tw-trust-badge-dlg {
    margin-bottom: 1px;
    margin-right: 3px;
}

.trust-icon-column {
    width: 25px;
}

.notification-badge {
    position: relative;
    left: 33px;
    top: -40px;
    border: 2px solid #F2F2F2;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background: #EE1C25;
}

.topbar-icon-circle .notification-badge {
    left: 18px;
    top: -28px;
    border-color: var(--background-color-topbar);
}

[uib-tooltip-popup].text-align-left .tooltip-inner {
    text-align: left;
}

/*
  Cytoscape network graph css http://js.cytoscape.org/
*/
#cy {
    height: 400px;
    border: none;
    position: relative;
    clear: both;
    background-color: #2C3B4A;
}

/*
 Vertical offsets
 http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows
*/
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

/*
Sidebar
*/
#page-wrapper {
    display: flex;
    flex-grow: 1;
    /* flex-grow doesn't work with percent height of 100%. set to 0 so flex-grow can override this and take 100% height */
    height: 0;
    transition: padding-left .4s ease 0s;
}

#sidebar-wrapper {
    left: 0;
    width: var(--width-sidebar-open);
    flex-shrink: 0;
    height: 100%;
    z-index: var(--z-index-sidebar-wrapper);
    background-color: var(--background-color-sidebar);
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width .4s ease 0s;
}

.sidebar-closed #sidebar-wrapper {
    width: var(--width-sidebar-closed);
}

/* Sidebar header - start */
.sidebar-header {
    flex-basis: 89px;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    background-color: var(--background-color-sidebar);
}

.sidebar-header:hover {
    background-color: var(--background-color-sidebar-hover);
}

.right-sidebar {
    /* animation on flex-basis is not supported in safari */
    /* set width along with flex-basis:auto to allow animation on width */
    width: 320px;
    flex: 0 0 auto;
    background-color:var(--color-border-table);
    position: relative;
    transition: width .4s ease;
}

.right-sidebar-closed.right-sidebar {
    /* animation on flex-basis is not supported in safari */
    /* set width along with flex-basis:auto to allow animation on width */
    width: 5px;
    margin-left: 4px;
    flex: 0 0 auto;
}

.right-sidebar-shoulder {
    height: 32px;
    width: 24px;
    position: absolute;
    top: 53px;
    left: -24px;
    transform: rotate(180deg);
    cursor: pointer;
    z-index: calc(var(--z-index-sidebar-wrapper) + 1);
}

.right-sidebar-shoulder:after {
    content: url("sidebar-close.svg");
}

.right-sidebar-closed .right-sidebar-shoulder:after {
    content: url("sidebar-open.svg");
}

.right-sidebar.ng-hide-add {
    transition: width .3s ease;
}

.right-sidebar.ng-hide-add.right-sidebar-closed {
    display: none;
}

.right-sidebar.ng-hide-remove {
    transition: width .3s ease;
    /* animation on flex-basis is not supported in safari */
    /* set width along with flex-basis:auto to allow animation on width */
    width: 5px;
    flex: 0 0 auto;
}

.right-sidebar.ng-hide-add.ng-hide-add-active {
    /* animation on flex-basis is not supported in safari */
    /* set width along with flex-basis:auto to allow animation on width */
    flex: 0 0 auto;
    width: 0px;
}

.twistlock-ui hr.right-sidebar-separator {
    margin: 30px 0 30px -25px;
    width: calc(100% + 50px);
    border-top: 2px solid #CCCCCC
}

.twistlock-ui.tw-dashboard {
    padding-top: 20px;
    padding-bottom: 15px;
    font-size: 14px;
    position: absolute;
    white-space: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

.defenders-summary .widget {
    margin-left: 25px;
    padding-bottom: 5px;
    padding-top: 5px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #CCCCCC;
    min-width: 245px;
}

.incidents-trend {
    margin-top: 35px;
    margin-bottom: 35px;
}

.incidents-trend-chart {
    width: 270px;
    max-width: 270px;
}

.no-stats {
    margin-top: 14px;
    padding-top: 14px;
    width: 100%;
    border-top: solid 1px #CCCCCC;
}

.no-stats .text {
    font-size: 14px;
}

.show-more-filters,
.topology-dialog .topology-dialog-details .show-more,
.impacted-data .header {
    font-size: 13px;
    padding-left: 10px;
}

.waas-total-col,
.show-more-filters,
.show-more-filters:hover {
    color: var(--color-primary-button);
}

.radar-filters-group .show-more-filters:after {
    color: var(--color-primary-button);
    display: inline-block;
    margin-left: 6px;
    content: "\f107";
    font-family: "FontAwesome";
}

.radar-filters-group.heightened .show-more-filters:after {
    content: "\f106";
}

.header + .impacted-entity .tw-table-cell-layout {
    padding-top: 20px;
}

.impacted-entity .tw-table-cell-layout {
    padding-top: 40px;
    vertical-align: middle;
}

.impacted-entity .description {
    display: flex;
    align-items: center;
    min-width: 115px;
}

.impacted-entity .entity-icon {
    width: 40px;
    display: flex;
    justify-content: center;
}

.impacted-entity-doughnut {
    width: 85px;
    display: inline-block;
}

.dashboard-title {
    display: flex;
    align-items: center;
}

.dashboard-title-text {
    font-family: "Lato-Semibold";
    font-size: 16px;
}

.expandable-section.expanded .expandable-content {
    background-color: white;
    border: 1px solid #D4D4D4;
    border-top: none;
    padding: 15px;
    float: left;
}

.expandable-section.expanded .expandable-content tbody tr.no-data-row td {
    background-color: transparent;
}

.expandable-section .expandable-header {
    background-color: white;
    border: 1px solid #D4D4D4;
    font-family: "Lato-Medium";
    padding: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.expandable-section .expandable-header .header-title-row {
    display: flex;
    align-items: center;
}

.expandable-section .expandable-header .expandable-header-description {
    color: #717171;
    font-family: "Lato-Regular";
    font-size: 14px;
    margin-top: 6px;
}

.expandable-section.expanded .expandable-header {
    background-color: #EFF7FF;
    border: 1px solid var(--color-border-section);
}

.expandable-section .expandable-header:hover {
    background-color: var(--color-table-hover);
}

.expandable-section .expandable-header .expand-row-link {
    font-family: "Lato-Regular";
    font-size: 14px;
    text-decoration: none;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.expandable-section .expandable-header .expand-row-link .expand-row-icon {
    margin-right: 12px;
    margin-top: 3px;
}

.expandable-section .expandable-header .expand-row-link .expand-link-text {
    flex: 0 0 74px;
}

.vm-settings-warning {
    background-color: #FFFAC0;
    margin-top: 6px;
    padding-top: 12px;
    padding-bottom: 13px;
    padding-left: 20px;
    width: 100%;
    font-family: "Lato-Regular";
    font-size: 16px;
}

.expandable-section .expandable-header .table-results {
    color: #717171;
    font-size: 14px;
}

.tw-dashboard .icon {
    font-size: 26px;
    margin-right: 6px;
}

.tw-dashboard .icon.icon-summary-24 {
    font-size: 34px;
}

.tw-dashboard .icon.icon-container {
    font-size: 22px;
}

/* Sidebar logo - start */
.prisma-cloud-icon,
.prisma-cloud-logo-text,
.prisma-cloud-min-logo-text {
    position: absolute;
    transition: all 0.4s ease;
}

.prisma-cloud-icon {
    top: 24px;
    height: 43px;
    left: 16px;
    z-index: 300;
}

.prisma-cloud-logo-text {
    height: 33px;
    top: 33px;
    left: 60px;
    z-index: 200;
}

.prisma-cloud-min-logo-text {
    left: 13px;
    top: 60px;
    width: 37px;
    z-index: 200;
}

.sidebar-closed .prisma-cloud-icon {
    transform: rotate(1turn);
}

hr.left-sidebar-separator {
    margin: 0;
    border-top: 1px solid #525C6A;
}

.sidebar-closed .prisma-cloud-logo-text {
    left: -90px;
}

.sidebar-closed .prisma-cloud-min-logo-text {
    top: 74px;
}

/* Element that covers (hides) the logo text */
.logo-text-cover {
    position: absolute;
    background-color: inherit;
    left: 0;
    height: 70px;
    width: 50px;
    z-index: 250;
    transition: width 0.4s ease;
}

/* Sidebar logo - end */

/* Sidebar header - start */
.sidebar-header:after {
    display: inline-block;
    height: 20px;
    width: 16px;
    right: -16px;
    position: absolute;
    content: url("sidebar-close.svg");
}

.sidebar-closed .sidebar-header:after {
    content: url("sidebar-open.svg");
}
/* Sidebar header - end */

/* Sidebar body - start */
.sidebar-body-wrapper {
    direction: rtl; /* this positions the sidebar scroller on the left side of the element */
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto; /* fallback for browsers that don't support overlay */
    overflow-y: overlay; /* like auto, but scrollbar is not pushing the content aside when it appears */
}

.tw-radar-filters .filters-area::-webkit-scrollbar,
.sidebar-body-wrapper::-webkit-scrollbar {
    width: 8px;
}

.sidebar-body-wrapper::-webkit-scrollbar-track {
    background-color: #1B2028;
}

.sidebar-body-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-scroll-sidebar);
    border-radius: 3px;
    border-left: 1px solid var(--color-scroll-sidebar);
    border-right: 1px solid var(--color-scroll-sidebar);
}

.sidebar-body-wrapper::-webkit-scrollbar-thumb:hover {
    background-color:var(--color-scroll-sidebar);
}

.radar-filters-group tags-input .autocomplete .suggestion-list::-webkit-scrollbar,
.radar-filters-group tags-input .tags::-webkit-scrollbar,
.incident-dialog .details::-webkit-scrollbar,
.dark-scrollbar::-webkit-scrollbar,
.service-description::-webkit-scrollbar {
    width: 8px;
}

.tw-radar-filters .filters-area::-webkit-scrollbar-track {
    background: linear-gradient(#26272A, #2D3134);
    border-radius: 0 0 3px 3px;
}

.dark-scrollbar::-webkit-scrollbar-track,
.service-description::-webkit-scrollbar-track {
    background: #2D3134;
    border-radius: 3px;
}

.radar-filters-group tags-input .autocomplete .suggestion-list::-webkit-scrollbar-track,
.radar-filters-group tags-input .tags::-webkit-scrollbar-track,
.incident-dialog .details::-webkit-scrollbar-track {
    background: #E4E4E4;
    border-radius: 3px;
}

.tw-radar-filters .filters-area::-webkit-scrollbar-thumb {
    background-color: #676A6D;
    border-left: 1px solid #26272A;
    border-right: 1px solid #26272A;
    border-radius: 0 0 3px 3px;
    box-shadow: inset 0 0 3px 0 #111111;
}

.dark-scrollbar::-webkit-scrollbar-thumb,
.service-description::-webkit-scrollbar-thumb {
    background-color: #676A6D;
    border-left: 1px solid #26272A;
    border-right: 1px solid #26272A;
    border-radius: 3px;
    box-shadow: inset 0 0 3px 0 #111111;
}

.radar-filters-group tags-input .autocomplete .suggestion-list::-webkit-scrollbar-thumb,
.radar-filters-group tags-input .tags::-webkit-scrollbar-thumb,
.incident-dialog .details::-webkit-scrollbar-thumb {
    background-color: #CCCCCC;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-radius: 3px;
    box-shadow: inset 0 0 3px 0 #B0B0B0;
}

.radar-filters-group tags-input .autocomplete .suggestion-list::-webkit-scrollbar-thumb:hover,
.radar-filters-group tags-input .tags::-webkit-scrollbar-thumb:hover,
.incident-dialog .details::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
}

.tw-radar-filters .filters-area::-webkit-scrollbar-thumb:hover,
.dark-scrollbar::-webkit-scrollbar-thumb:hover,
.service-description::-webkit-scrollbar-thumb:hover {
    background-color: #7B7E81;
}

.sidebar-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    direction: initial;
}

.sidebar-closed.sidebar-static .sidebar-list {
    height: var(--height-sidebar-title);
}

.sidebar-list a {
    display: block;
    text-decoration: none;
    width: 100%;
    cursor: pointer;
}

.sidebar-list .sidebar-title:hover,
.sidebar-list a:hover .sidebar-sublist-text {
    color: var(--color-sidebar);
    background-color: var(--background-color-sidebar-hover);
}

.sidebar-list.popout .sidebar-title:hover .sidebar-title-text {
    background-color: var(--background-color-sidebar-hover);
}

.sidebar-list a.selected .sidebar-sublist-text,
.sidebar-list .empty-list-title.selected,
.sidebar-list.selected.closed:not(.popout) .sidebar-title,
.sidebar-closed .sidebar-list.selected:not(.popout) .sidebar-title {
    background-color: var(--background-color-sidebar-selected);
    border-left: 4px solid var(--color-highlight-sidebar);
}

.sidebar-list a:not(.empty-list-title) .sidebar-sublist-text {
    text-indent: 15px;
    width: 160px;
}

/* Removing extra indent added by the left border of selected sublist item */
.sidebar-list a.selected:not(.empty-list-title) .sidebar-sublist-text {
    text-indent: 11px;
}

.sidebar-icon {
    line-height: var(--height-sidebar-title);
    text-align: center;
    width: 16px;
    flex: 16px 0 0;
    overflow: hidden;
    font-size: 16px;
    margin-left: 24px;
    margin-right: 17px;
}

/* Removing extra indent added by the left border of selected list's icon */
.sidebar-body:not(.sidebar-closed) .sidebar-list.closed.selected .sidebar-icon,
.sidebar-body:not(.sidebar-closed) .empty-list-title.selected .sidebar-icon {
    margin-left: 20px;
}

/* Removing extra indent added by the left border of selected list's icon */
.sidebar-closed .sidebar-list.selected:not(.popout) .sidebar-icon,
.sidebar-closed .empty-list-title.selected .sidebar-icon {
    margin-left: 20px;
}

.sidebar-title,
.sidebar-title:focus {
    color: var(--color-sidebar);
    font-size: 16px;
    cursor: pointer;
    height: var(--height-sidebar-title);
    display: flex;
    align-items: flex-end;
}

.sidebar-title .sidebar-tour-on-title,
.align-flex-end {
    display: inline-flex;
    align-items: flex-end;
}

.align-flex-start {
    display: inline-flex;
    align-items: flex-start;
}

.sidebar-body:not(.sidebar-closed) .icon-nav-launch {
    height: 100%;
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding-top: 2px;
    margin-left: -8px;
}

.sidebar-closed .icon-nav-launch:before {
    display: none;
}

.icon-nav-launch:hover {
    color: var(--color-highlight-sidebar);
}

/* Sidebar list caret - open state */
.sidebar-body:not(.sidebar-closed) .sidebar-list a.empty-list-title {
    display: flex;
}

.sidebar-body:not(.sidebar-closed) .sidebar-list .sidebar-title-arrow {
    align-self: center;
}

.sidebar-body:not(.sidebar-closed) .sidebar-list .sidebar-title-arrow:after {
    font-family: "FontAwesome";
    font-size: 18px;
    margin-left: 6px;
    align-self: center;
}

.sidebar-body:not(.sidebar-closed) .sidebar-list:not(.empty-list) .sidebar-title-arrow:after {
    content: "\f106";
}

.sidebar-body:not(.sidebar-closed) .sidebar-list .empty-list-title .sidebar-title-arrow:after {
    content: "\f105";
    margin-left: 8px;
}

/* Sidebar list caret - closed state */
.sidebar-body:not(.sidebar-closed) .sidebar-list:not(.empty-list).closed .sidebar-title-arrow:after {
    content: "\f107";
}

.sidebar-title-text {
    display: inline-block;
    font-family: "Lato-Regular";
    overflow: hidden;
    transition: text-indent .3s ease;
    line-height: var(--height-sidebar-title);
    width: 123px;
}

.sidebar-closed .sidebar-title-text {
    text-indent: -80px;
}

.float-left,
.sub-sidebar-list {
    float: left;
}

.allow-deny-toggle.tight {
    margin-right: -33px;
}

.sub-sidebar-list a {
    line-height: 32px;
    height: 32px;
    color: var(--color-sidebar);
    font-size: 14px;
    font-family: "Lato-Regular";
    text-indent: 56px;
    overflow: hidden;
}

.sidebar-closed.sidebar-static .sub-sidebar-list {
    position: absolute;
    width: 0px;
    left: -200px; /* The sub list is hidden out of the window */
    border-radius: 0 3px 3px 0;
}

.sidebar-closed.sidebar-static .popout .sub-sidebar-list {
    width: var(--width-sidebar-popout);
    left: var(--width-sidebar-closed);
    background-color: var(--background-color-sidebar);
}

.sidebar-closed.sidebar-static .popout .sub-sidebar-list a {
    text-indent: 0px;
    line-height: 32px;
    height: 32px;
}

.sidebar-closed.sidebar-static .sidebar-title,
.sidebar-closed.sidebar-static .sidebar-title-text,
.sidebar-static .sidebar-sublist-text {
    transition: none;
}

.sidebar-closed.sidebar-static .sidebar-list:not(.empty-list) .sidebar-title,
.sidebar-closed.sidebar-static .sidebar-list:not(.empty-list) .sidebar-title-text {
    cursor: default;
}

.sidebar-closed.sidebar-static .popout .sidebar-title-text {
    position: absolute;
    text-indent: 6px;
    left: var(--width-sidebar-closed);
    width: var(--width-sidebar-popout);
    color: white;
    background-color: var(--background-color-sidebar);
}

.sidebar-closed .sidebar-list.popout a:not(.empty-list-title) .sidebar-sublist-text {
    text-indent: 23px;
    width: var(--width-sidebar-popout);
    transition: none;
}
/* Removing extra indent added by the left border of selected list's icon */
.sidebar-closed .sidebar-list.popout a.selected:not(.empty-list-title) .sidebar-sublist-text {
    text-indent: 19px;
}

.sidebar-sublist-text {
    display: inline-block;
    overflow: hidden;
    text-indent: 0;
    transition: text-indent .3s ease;
}

.sidebar-closed .sidebar-list a:not(.empty-list-title) .sidebar-sublist-text {
    text-indent: -90px;
    transition: text-indent .3s ease;
}

/* Collapse/expand of sidebar lists */
.sub-sidebar-list.collapsing {
    transition-duration: .3s;
}

.sidebar-closed.sidebar-static .popout .sub-sidebar-list.collapsing {
    transition: none;
}

/* Sidebar body - end */

body {
    background: var(--background-color-main);
    height: 100%;
}

a.no-underline {
    text-decoration: none !important;
}

.line-legend li,
.pie-legend li,
.bar-legend li {
    font-family: "Lato-Regular";
    font-size: 14px;
}

/* Chart legend color indicators */
.line-legend li span,
.pie-legend li span,
.bar-legend li span {
    border-radius: 0;
    width: 12px;
    height: 12px;
    left: 8px;
    top: 6px;
}

.twistlock-ui {
    padding-left: 15px;
    padding-right: 15px;
    color: #333333;
    font-family: "Lato-Light";
    font-size: 16px;
}

.full-view .twistlock-ui {
    padding-left: 0px;
    padding-right: 0px;
}

.stretched-view {
    height: 100%;
    width: 100%;
}

.tw-doughnut-chart .chart-tooltip {
    display: inline-block;
    background-color: black;
    color: white;
    font-size: 12px;
    padding: 5px;
    border-radius: 4px;
}

.tw-doughnut-chart .chart-line {
    stroke: #A3A3A3;
    stroke-width: 1px;
    fill: none;
}

.tw-doughnut-chart .chart-line.disabled {
    stroke: #E4E4E4;
}

.tw-doughnut-chart .chart-doughnut-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: 11px;
    font-family: "Lato-Semibold"
}

.tw-doughnut-chart .chart-label {
    font-size: 12px;
    font-family: "Lato-Regular";
}

.tw-doughnut-chart .chart-label.gray {
    color: #A3A3A3;
}

.twistlock-ui h2 {
    font-size: 28px;
}

.twistlock-ui h3 {
    font-size: 24px;
}

.twistlock-ui .progressbar-border {
    border: none;
}

.twistlock-ui .progress-bar-info {
    background-color: #9FACB5;
}

.twistlock-ui .color-label {
    height: 5px;
    width: 10px;
    display: inline-block;
    margin: 2px;
}

.twistlock-ui .color-picker .color-label {
    height: 16px;
    width: 16px;
    cursor: pointer;
}

.twistlock-ui .color-label-selected {
    border-style: solid;
    border-color: white;
    border-width: 3px;
}

.twistlock-ui input {
    border-color: var(--color-underline);
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 6px 1px;
    box-shadow: none;
    font-size: 16px;
}

.twistlock-ui input[type=color] {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    padding: 0px;
}

.twistlock-ui input:focus,
.selector-dropdown .search-bar:focus-within {
    box-shadow: none;
    border-color: #66AFE9;
}

.twistlock-ui input:focus:read-only {
    border-color: var(--color-underline);
}

.search-radar {
    flex: 0 0 200px;
}

.twistlock-ui .search-radar input.tw-search-box,
.twistlock-ui .tw-smart-input {
    font-family: "Lato-Regular";
    font-size: 14px;
    height: 32px;
    border: 1px solid #E5E5E5;
    border-radius: var(--border-radius-input);
    background-color: white;
    flex-grow: 1;
}

.twistlock-ui .search-radar input.tw-search-box:hover,
.twistlock-ui .search-radar input.tw-search-box:focus {
    border: 1px solid var(--color-highlight-3);
}

.twistlock-ui .tw-radar-filters .filter-search tw-search-box {
    width: 100%;
}

.twistlock-ui .tw-radar-filters .filter-search input.tw-search-box {
    border: none;
    font-family: "Lato-Regular";
    font-size: 14px;
    height: 25px;
    border-radius: 4px;
    background-color: #575757;
    color: white;
}

.search-icon-tag {
    border-radius: 20px;
    background-color: #575757;
    padding-left: 10px;
    padding-top: 4px;
    position: absolute;
    height: 100%;
    width: 70px;
    right: 0;
    color: white;
}

.twistlock-ui .has-error input,
.twistlock-ui .has-error input:focus,
.twistlock-ui .has-error textarea,
.twistlock-ui .has-error textarea:focus {
    box-shadow: none;
    border-color: #FF0000;
}

.twistlock-ui tags-input .tags {
    border: none;
    border-bottom: 1px solid var(--color-underline);
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    font-size: 16px;
    background-color: inherit;
}

.tw-collection-selection {
    border: none;
    border-bottom: 1px solid var(--color-underline);
    border-radius: inherit;
    padding: 6px 1px;
    height: auto;
    line-height: 22px;
}

.twistlock-ui tags-input .tags.focused {
    border-color: #66AFE9;
}

.twistlock-ui tags-input .tags .input {
    height: 32px;
    font: inherit;
    font-size: 16px;
    padding: 8px 16px;
    /* aligning input text with tags */
    margin: -1px;
    width: 100%;
}

.twistlock-ui .radar-filters-group tags-input .tags .input {
    font-size: 14px;
}

.twistlock-ui .tags {
    margin-top: -5px;
}

.log-inspection-regexp,
.waas-tags,
.twistlock-ui tags-input .tags .tag-item,
.twistlock-ui .tw-smart-input .tags .tag {
    height: auto;
    line-height: 22px;
    word-break: break-all;
    max-width: calc(100% - 12px);
    font-family: "Lato-Regular";
    background: var(--background-color-tag);
    border: none;
    border-radius: 2px;
    color: #333333;
    margin: 4px 0px 4px 8px;
    align-items: center;
    white-space: normal;
}

.twistlock-ui .tw-smart-input .tags .tag .not-label {
    color: #717171;
}

.base-layer-tag {
    height: 16px;
    line-height: 16px;
    background: #C6E0FE;
    margin-left: 6px;
    border-radius: 3px;
}

.base-layer-tag .tag-item {
    font-size: 10px;
    color: #333333;
    padding: 0px 6px;
}

.waas-tags {
    padding: 3px 8px;
    margin: 2px;
    line-height: 17px;
    display: inline-block
}

.log-inspection-regexp {
    margin: 0px 2px -2px;
    padding: 0 5px;
    display: inline-block;
}

.twistlock-ui .disabled-section tags-input .tags .tag-item,
.twistlock-ui .disabled-section  tags-input .tags .tag-item.wildcard-tag {
    background: var(--color-disabled);
}

.twistlock-ui tags-input .tags li:first-child.tag-item {
    margin-left: 0px;
}

.twistlock-ui .radar-filters-group.heightened tags-input .tags li:first-child.tag-item {
    margin-left: 8px;
}

/* Placeholder text when the tags list is empty */
.twistlock-ui tags-input .tags ul:empty+.input {
    margin-left: 0;
    padding-left: 0;
}

.twistlock-ui .radar-filters-group tags-input .tags ul:empty+.input {
    padding-left: 8px;
}

.twistlock-ui tags-input .tags .tag-item.selected,
.twistlock-ui .tw-smart-input .tags .tag.selected {
    background: var(--color-highlight-1);
    color: white;
}

.twistlock-ui tags-input .tags .remove-button,
.twistlock-ui tw-tags-autocomplete .tag-list .tag .remove-button,
.twistlock-ui .tw-smart-input .tags .tag .remove-button {
    color: var(--color-primary-button);
    font-family: "Lato-Bold";
    font-size: 16px;
    margin: 0 0 0 8px;
    text-decoration: none;
}

.twistlock-ui tags-input .tags .tag-item.selected .remove-button {
    color: white;
}

.twistlock-ui .disabled-section tags-input .tags .remove-button {
    display: none;
}

.twistlock-ui tags-input .autocomplete .suggestion-item {
    font-family: "Lato-Light";
}

.twistlock-ui tags-input .autocomplete .suggestion-item.selected {
    background: var(--color-highlight-1);
    color: white;
    font-family: "Lato-Regular";
}

.twistlock-ui tags-input .autocomplete .suggestion-item em {
    font-style: normal;
    font-weight: unset;
    font-family: "Lato-Medium";
    background-color: #E7FF00;
}

.twistlock-ui tags-input .autocomplete .suggestion-item.selected em {
    background-color: transparent;
}

/* Override bootstrap for dropdown-menu */
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color: #021745;
    color: white;
}

.twistlock-ui tags-input[disabled] .tags,
.twistlock-ui tags-input[disabled] .tags .input {
    cursor: not-allowed;
    background-color: var(--color-disabled);
}

.twistlock-ui tags-input[disabled].transparent-bg-disabled .tags,
.twistlock-ui tags-input[disabled].transparent-bg-disabled .tags .input {
    background-color: transparent;
}

.twistlock-ui .copy-input {
    padding-right: 76px;
}

.twistlock-ui .autocomplete {
    border-radius: 4px;
}

.twistlock-ui .info {
    font-weight: lighter;
    margin-bottom: 5px;
}

/* Include second level dialog tabs in the styling */
.twistlock-ui .nav-tabs,
.twistlock-ui .modal-content .tab-content .nav-tabs,
.twistlock-ui .tw-dialog .tab-content .nav-tabs {
    border-bottom: 1px solid #C4C4C4;
    height: var(--height-sub-tabs);
    background-color: unset;
}

.twistlock-ui .modal-top-tabs .nav-tabs {
    margin: var(--margin-modal-body);
}

.twistlock-ui .modal-body .modal-top-tabs .nav-tabs {
    margin: var(--margin-modal-body) 0px;
}

.twistlock-ui .modal-body + .modal-top-tabs .nav-tabs {
    margin-top: 0px;
}

.twistlock-ui .nav-tabs .nav-item .nav-link,
.twistlock-ui .modal-content .tab-content .nav-tabs .nav-item .nav-link,
.twistlock-ui .tw-dialog .tab-content .nav-tabs .nav-item .nav-link {
    cursor: pointer;
    user-select: none;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #C4C4C4;
    padding: 11px 16px;
    letter-spacing: 0;
    font-family: "Lato-Regular";
    font-size: 14px;
    color: var(--color-nav-link);
    line-height: 14px;
    height: var(--height-sub-tabs);
}

.twistlock-ui .nav-tabs .nav-item .nav-link,
.twistlock-ui .nav-tabs .nav-item .nav-link:hover,
.twistlock-ui .nav-tabs .nav-item.active .nav-link,
.twistlock-ui .nav-tabs .nav-item .nav-link:disabled {
    background-color: transparent;
}

.twistlock-ui .nav-tabs .nav-item .nav-link:disabled {
    color: #C4C4C4;
}

.twistlock-ui .nav-tabs > .nav-item.disabled {
    background-color: transparent;
}

.twistlock-ui .nav-tabs > .nav-item.disabled > .nav-link,
.twistlock-ui .modal-content .tab-content .nav-tabs > .nav-item.disabled > .nav-link,
.twistlock-ui .tw-dialog .tab-content .nav-tabs > .nav-item.disabled > .nav-link {
    color: var(--color-disabled);
}

.twistlock-ui .nav-tabs .nav-item .nav-link:hover,
.twistlock-ui .modal-content .tab-content .nav-tabs .nav-item .nav-link:hover,
.twistlock-ui .tw-dialog .tab-content .nav-tabs .nav-item .nav-link:hover {
    background-color: unset;
    border: none;
    border-color: transparent;
    color: var(--color-highlight-3);
}

/* Override imported tab focus style */
.nav>li>a:focus {
    background-color: unset;
}

.twistlock-ui .nav-tabs .nav-item.active .nav-link,
.twistlock-ui .modal-content .tab-content .nav-tabs .nav-item.active .nav-link,
.twistlock-ui .tw-dialog .tab-content .nav-tabs .nav-item.active .nav-link {
    padding: 11px 16px 5px;
    border: none;
    border-bottom: 4px solid #333333;
    font-family: "Lato-Bold";
    color: #333333;
}

/* Modals top level tabs styling */
.twistlock-ui .modal-content .nav-tabs,
.twistlock-ui .tw-dialog .nav-tabs {
    border: none;
    background-color: #EEEEEE;
    height: var(--height-modal-top-tabs);
}

.twistlock-ui .modal-content .nav-tabs .nav-item .nav-link,
.twistlock-ui .tw-dialog .nav-tabs .nav-item .nav-link {
    padding: 11px 16px 8px;
    line-height: 20px;
    height: var(--height-modal-top-tabs);
    border: none;
}

.twistlock-ui .modal-content .nav-tabs .nav-item.active .nav-link,
.twistlock-ui .tw-dialog .nav-tabs .nav-item.active .nav-link {
    padding-top: 8px;
    border-top: 3px solid var(--color-highlight-1);
}

/* Covers up irregularrity in rendering, that causes bottom border to show on selected tab in various browser zoom ranges */
.twistlock-ui .nav-tabs .nav-item.active .nav-link:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--background-color-main);
    content: "";
}

.modal-dialog .nav-tabs .nav-item.active .nav-link,
.modal-dialog .nav-tabs .nav-item.active .nav-link:after,
.tw-dialog .nav-tabs .nav-item.active .nav-link,
.tw-dialog .nav-tabs .nav-item.active .nav-link:after {
    background-color: var(--background-color-dialogs);
}

.twistlock-ui .nav-tabs .nav-item:first-child .nav-link,
.twistlock-ui .nav-tabs .nav-item:first-child.active .nav-link {
    margin-left: 0px
}

.twistlock-ui .nav-tabs .fa-lg {
    margin-right: 8px;
    font-size: 18px;
    width: 16px;
    vertical-align: text-bottom;
}

.twistlock-ui .tw-dialog .topology-dialog .nav-tabs,
.twistlock-ui .tw-dialog .topology-dialog .nav-tabs .nav-item .nav-link,
.twistlock-ui .tw-dialog .topology-dialog .tab-content .nav-tabs,
.twistlock-ui .tw-dialog .topology-dialog .tab-content .nav-tabs .nav-item .nav-link {
    color: #AFAFAF;
    border-bottom: 1px solid var(--color-border-gray-table);
}

.twistlock-ui .tw-dialog .topology-dialog .nav-tabs .nav-item.active .nav-link,
.twistlock-ui .tw-dialog .topology-dialog .tab-content .nav-tabs .nav-item.active .nav-link {
    background-color: transparent;
    color: white;
    border-bottom: 3px solid white;
}

/*
Buttons
*/
.twistlock-ui .tw-button {
    border-radius: 4px;
    padding: 0;
    height: 32px;
    letter-spacing: 0;
    font-size: 14px;
    font-family: "Lato-Regular";
}

.twistlock-ui .tw-button .btn-content {
    padding: 8px 12px;
    line-height: 30px;
    align-items: center;
}

.twistlock-ui .tw-button.download-button .btn-content {
    padding: 0;
}

.twistlock-ui .tw-button .btn-icon:before {
    font-size: 16px;
}

.twistlock-ui .tw-button .btn-icon.spinner {
    content: url('../img/spinner.gif');
}

.twistlock-ui .tw-button .btn-icon.icon-plus:before {
    font-size: 12px;
}

.twistlock-ui .tw-button .btn-icon.icon-import:before {
    font-size: 13px;
}

.twistlock-ui .tw-button:not(.icon-left) .btn-icon + .btn-text {
    margin-left: 4px;
}

.twistlock-ui .tw-button[disabled],
.twistlock-ui .tw-button[disabled]:hover {
    cursor: not-allowed;
    pointer-events: none;
}

.emphasis .tw-button .btn-content:before {
    position: absolute;
    display: block;
    content: '';
    border-radius: 50%;
    background-color: #EE1C25;
    animation: heartbeat 1.5s ease-in-out 30 both;
    height: 10px;
    width: 10px;
    margin-left: 22px;
    margin-top: 3px;
}

.twistlock-ui .tw-button.tw-btn-small {
    font-family: "Lato-Semibold";
    font-size: 11px;
    padding: 3px 12px;
    height: 24px;
}

/* Narrow buttons - start */
.twistlock-ui .tw-button.narrow-btn {
    height: 24px;
}

.twistlock-ui .tw-button.narrow-btn .btn-content {
    padding: 1px 12px;
    line-height: 22px;
}
/* Narrow buttons - end */


/* Primary button - start */
.twistlock-ui .tw-button.primary {
    color: white;
    background: var(--color-primary-button);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.twistlock-ui .tw-button.primary.special-save-btn {
    color: white;
    background: var(--background-color-save-button);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.twistlock-ui .tw-button.primary.special-save-btn:hover,
.twistlock-ui .tw-button.primary.special-save-btn:focus {
    color: white;
    background: var(--background-color-save-button);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);

}

.twistlock-ui .tw-button.primary:hover,
.twistlock-ui .tw-button.primary:focus {
    color: white;
    background: var(--color-primary-button);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.twistlock-ui .tw-button.primary[disabled],
.twistlock-ui .tw-button.primary[disabled]:hover,
.twistlock-ui .tw-button.primary[disabled]:focus,
.twistlock-ui .disabled-section.tw-button:not(.light),
.twistlock-ui .disabled-section .tw-button:not(.light):not(.grouped) {
    border: 1px solid #C4C4C4;
    background: #C4C4C4;
    opacity: unset;
    color: white;
    box-shadow: none;
}
/* Primary button - end */

/* Light button - start */
.twistlock-ui .tw-button.light{
    color: #247CBA;
    background: transparent;
}

.twistlock-ui .tw-button.light .btn-icon {
    color: #333333;
    vertical-align: middle;
}

.twistlock-ui .tw-button.light:hover,
.twistlock-ui .tw-button.light:hover .btn-icon {
    background: transparent;
    color: #7BC2FF;
}

.twistlock-ui .tw-button.light:active {
    box-shadow: none;
}

.twistlock-ui .disabled-section.tw-button.light,
.twistlock-ui .disabled-section .tw-button.light,
.twistlock-ui .tw-button.light[disabled],
.twistlock-ui .tw-button.light[disabled]:hover,
.twistlock-ui .tw-button.light[disabled] .btn-icon {
    color: #717171;
}
/* Light button - end */

/* Secondary button - start */
.twistlock-ui .tw-button.secondary {
    color: var(--color-primary-button);
    background: linear-gradient(180deg, #FFFFFF 27.6%, #F0F0F0 100%);
    border: 1px solid #D4D4D4;
}

.twistlock-ui .tw-button.secondary:hover,
.twistlock-ui .tw-button.secondary:focus {
    color:  var(--color-primary-button);
    background: linear-gradient(180deg, #FFFFFF 27.6%, #F0F0F0 100%);
    border: 1px solid #D4D4D4;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.twistlock-ui .tw-button.secondary[disabled],
.twistlock-ui .tw-button.secondary[disabled]:focus,
.twistlock-ui .tw-button.secondary[disabled]:hover {
    background: white;
    border: 1px solid #D4D4D4;
    box-shadow: none;
}
/* Secondary button - end */

/* Monochrome buttons - start */
.twistlock-ui .tw-button.monochrome,
.twistlock-ui button.monochrome {
    background-color: white;
    border-color: white;
    color: #333333;
    font-size: 14px;
    height: 28px;
}

.twistlock-ui .tw-button.monochrome:hover,
.twistlock-ui button.monochrome:hover,
.twistlock-ui .tw-button.monochrome:focus,
.twistlock-ui button.monochrome:focus {
    background-color: white;
    border-color: white;
    color: var(--color-highlight-3);
}

.twistlock-ui .tw-button.monochrome .btn-content,
.twistlock-ui button.monochrome .btn-content {
    padding: 6px 12px;
    line-height: 26px;
}
/* Monochrome buttons - end */

/* Transparent button - start */
.twistlock-ui .tw-button.primary.transparent,
.twistlock-ui button.transparent {
    background-color: transparent;
    border-color: #D4D4D4;
    color: white;
}

.twistlock-ui button.transparent.dark {
    background-color: transparent;
    border-color: #000000;
    color: black;
}

.twistlock-ui .tw-button.primary.transparent:hover,
.twistlock-ui button.transparent:hover {
    border-color: var(--color-highlight-3);
    color: var(--color-highlight-3);
}
/* Transparent button - end */

/* Round button - start */
.twistlock-ui .tw-button.round-btn {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    padding: 0;
    background: white;
    border: 1px solid #D4D4D4;
}

.twistlock-ui .tw-button.round-btn .btn-content {
    padding: 0;
    line-height: 32px;
}
/* Round button - end */

/* Square button - start */
.twistlock-ui .tw-button.tw-square-btn {
    border-radius: 4px;
    height: 32px;
    width: 32px;
}

.twistlock-ui .tw-button.tw-square-btn .btn-content {
    padding: 8px;
}

.twistlock-ui .compact-buttons .tw-button.tw-square-btn {
    height: 18px;
    width: 18px;
    font-size: 10px;
}

.twistlock-ui .compact-buttons .tw-button.tw-square-btn .btn-content {
    padding: 0;
    line-height: 14px;
}

.twistlock-ui .compact-buttons .tw-button.tw-square-btn .icon-plus:before {
    font-size: 10px;
    line-height: 14px;
}
/* Square button - end */

/* Radar buttons - start */
.twistlock-ui .radar-bottom-right-buttons .tw-button.tw-square-btn,
.twistlock-ui .radar-bottom-right-buttons .tw-button.tw-round-btn {
    background: #FFFFFF;
    color: black;
    border: 1px solid #D4D4D4;
}

.twistlock-ui .radar-bottom-right-buttons .tw-button.tw-round-btn {
    height: 32px;
    width: 32px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.twistlock-ui .radar-bottom-right-buttons .tw-button:hover,
.twistlock-ui .radar-bottom-right-buttons .tw-button:focus,
.twistlock-ui .radar-bottom-right-buttons .tw-button:hover .btn-icon,
.twistlock-ui .radar-bottom-right-buttons .tw-button:focus .btn-icon {
    color: #333333;
    background: var(--color-hover-3);
}
/* Radar buttons - end */

/* Grouped buttons */
.twistlock-ui .tw-button.grouped {
    padding: 8px 16px;
    line-height: 30px;
}

.twistlock-ui .tw-button.grouped:not(.active) {
    color: #333333;
    background: linear-gradient(180deg, #FFFFFF 28%, #F0F0F0 100%);
    border: 1px solid #D4D4D4;
}

.twistlock-ui .tw-button.grouped.narrow-btn {
    padding: 1px 12px;
    line-height: 20px;
}

.twistlock-ui .tw-button.grouped.tw-btn-small {
    padding: 1px 12px;
    line-height: 20px;
}

.twistlock-ui .tw-button.grouped:hover {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.twistlock-ui .tw-button.grouped.active {
    color: white;
    background: var(--color-active-primary-button);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.twistlock-ui .disabled-section .tw-button.grouped:not(.active),
.twistlock-ui .tw-button.grouped.disabled,
.twistlock-ui .tw-button.grouped.disabled:hover {
    border: 1px solid #C4C4C4;
    background: #C4C4C4;
    color: white;
    box-shadow: none;
}

.twistlock-ui .disabled-section .tw-button.grouped:not(.active) + .tw-button.grouped:not(.active),
.twistlock-ui .tw-button.grouped.disabled + .tw-button.grouped.disabled {
    border-left: 1px solid white;
}

.twistlock-ui .disabled-section input,
.twistlock-ui .disabled-section textarea {
    color: var(--color-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.table-btn {
    background-color: transparent;
    color: #333333;
    border: none;
    padding: 0;
    text-align: center;
    letter-spacing: 0;
    height: 22px;
    vertical-align: middle;
}

.table-btn:active {
    box-shadow: none;
}

.table-btn.actions-btn {
    color: #333333;
    box-shadow: none;
}

.table-btn .align-text-with-icon {
    vertical-align: text-bottom;
}

.table-btn+.table-btn {
    padding-left: 12px
}

.disabled-section .table-btn,
.disabled-section.table-btn,
.table-btn.disabled,
.table-btn[disabled] {
    color: var(--color-disabled);
    opacity: 1;
}

.gray-table-layout .table-btn[disabled] .tw-default {
    color: #7B7C7D;
}


/* Control display state of table button elements with "tw-default", "tw-hover" classes,
 so that only one of the class types will display in any given moment */
.hover-btn:hover .tw-default,
.table-btn:hover .tw-default,
.collections-group:hover .tw-default,
.table-btn:active .tw-default,
.popover-content .btn:hover .tw-default,
.popover-content .btn:active .tw-default,
.hover-btn .tw-hover,
.table-btn .tw-hover,
.collections-group .tw-hover,
.popover-content .btn .tw-hover,
.table-btn[disabled]:hover .tw-hover,
.table-btn.disabled:hover .tw-hover {
    display: none;
}

.hover-btn .tw-default,
.table-btn .tw-default,
.collections-group .tw-default,
.popover-content .btn .tw-default,
.table-btn[disabled]:hover .tw-default,
.table-btn.disabled:hover .tw-default,
.hover-btn:hover .tw-hover,
.table-btn:hover .tw-hover,
.collections-group:hover .tw-hover,
.popover-content .btn:hover .tw-hover,
.popover-content .btn:active .tw-hover,
.table-btn:active .tw-hover {
    display: inherit;
}

.tw-hover {
    color: var(--color-hover-1);
}

.hover-btn {
    cursor: pointer;
}

.hover-btn+.hover-btn {
    padding-left: 5px
}

.hover-btn:hover .button-text {
    text-decoration: underline;
}

.popover-content .btn:focus,
.popover-content .btn .tw-hover,
.popover-content .action-btn:hover .text {
    color: var(--color-highlight-3);
}

.tw-hover:active {
    color: var(--color-active-click-1);
}

.twistlock-ui .small-title-bar-btn {
    height: 24px;
    width: 24px;
    padding: 0;
}

/* Spacing between buttons in a button group, override bootstrap */
.btn-group .tw-button + .tw-button,
.btn-group .tw-button + .btn-group,
.btn-group .btn-group + .tw-button,
.btn-group .btn-group + .btn-group {
    margin-left: -1px;
}

/* When in a table - text buttons conform to table sizes and alignment */
td.tw-button,
td.btn-group {
    display: table-cell;
}

.tw-effect-colors .btn.tw-button.grouped {
    min-width: var(--width-rule-effects-button);
}

.tw-effect-colors .btn.tw-button.grouped.tw-btn-small {
    min-width: var(--width-rule-effects-button-small);
}

.tw-effect-colors .tw-button.grouped {
    border: 1px solid #D4D4D4;
}

.tw-effect-colors [data-inner-text="disable"].tw-button.grouped.active {
    background: #717171;
    color: white;
}

.tw-effect-colors [data-inner-text="ignore"].tw-button.grouped.active,
.tw-effect-colors [data-inner-text="allow"].tw-button.grouped.active {
    background: linear-gradient(180deg, #81C42E 54.69%, #3EAE15 118.75%);
    color: white;
}

.tw-effect-colors [data-inner-text="alert"].tw-button.grouped.active {
    background: linear-gradient(180deg, #FFE145 66.92%, #FFC74F 107.81%);
    color: #333333;
}

.tw-effect-colors [data-inner-text="prevent"].tw-button.grouped.active {
    background: linear-gradient(180deg, #F69A57 53.45%, #FF7B41 126.56%);
    color: #333333;
}

.tw-effect-colors [data-inner-text="block"].tw-button.grouped.active,
.tw-effect-colors [data-inner-text="ban"].tw-button.grouped.active,
.tw-effect-colors [data-inner-text="fail"].tw-button.grouped.active {
    background: #EE1C25;
    color: white;
}

.input-placeholder-link {
    float: left;
    margin-top: 6px;
}

.bold-link-text {
    font-family: "Lato-Medium";
    font-size: 14px;
    cursor: pointer;
}

a,
a:hover,
a:active,
.bold-link-text,
.bold-link-text:hover,
.bold-link-text:active,
.twistlock-ui tw-tags-autocomplete tags-input .tags .input::placeholder {
    color:  var(--color-primary-button);
}

.copy-to-clipboard-btn {
    position: relative;
    margin-top: -30px;
    float: right;
}

.copy-to-clipboard-btn-relative {
    margin-top: -1px;
    float: none;
}

.auto-overflow > .copy-to-clipboard-btn {
    position: absolute;
    float: none;
    transition: opacity .15s ease-out;
    /* 23px for font-size: 11px */
    height: 2.09em;
    /* 53px for font-size: 11px */
    width: 4.8em;
}

/* center elements that are affected by top, right, bottom, and left properties */
.center-positioned-element,
.auto-overflow > .copy-to-clipboard-btn {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.auto-overflow > .copy-to-clipboard-btn:hover {
    border: 1px solid  var(--color-hover-1);
    background-color: var(--color-hover-1);
    box-shadow: 2px 4px 8px -2px #555555;
}

.auto-overflow.dimmed-text {
    color: #ABABAB;
}

/* Override copy-to-clipboard-btn default top margin */
.voffset3.copy-to-clipboard-btn {
    margin-top: 15px;
}

.inline-buttons-spacing {
    margin-left: 16px;
}

.twistlock-ui .form-control[disabled].port-input {
    background-color: #D5D5D5;
}

.twistlock-ui .form-control.port-input {
    font-size: 14px;
    height: 27px;
}

.twistlock-ui .form-control.nya-bs-select > button {
    height: 32px;
}
/*
End buttons
*/

/*
Nya-bs
*/
.twistlock-ui table.tw-table tbody tr.inline-edit tags-input .tags .input,
.twistlock-ui .nya-bs-select > button {
    font-family: "Lato-Regular";
    font-size: 14px;
    color: #333333;
}

.twistlock-ui .table-top-group .nya-bs-select,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box {
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
}

.twistlock-ui .nya-bs-select > .dropdown-toggle {
    background-color: unset;
    border: none;
    border-bottom: 1px solid #9FACB5;
    border-radius: 0;
    box-shadow: none;
    text-transform: none;
    padding: 5px 25px 5px 1px;
}

.twistlock-ui tw-selector .nya-bs-select > .dropdown-toggle {
    z-index: auto; /* without explicitly setting z-index to auto here,
                      z-index stack ordering does not work as expected,
                       and the selector's clear button is not clickable */
}

.twistlock-ui .table-top-group .nya-bs-select .dropdown-toggle,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box .dropdown-toggle {
    line-height: 16px;
    padding-right: 16px;
}

.twistlock-ui .table-top-group .nya-bs-select.icon-filter .dropdown-toggle {
    padding-left: 8px;
    padding-right: var(--padding-right-dropdown-toggle);
    width: calc(100% -  var(--padding-right-dropdown-toggle));
}

.twistlock-ui .table-top-group .nya-bs-select .caret,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box .caret {
    right: 0px;
    top: var(--padding-right-dropdown-toggle);
}

.twistlock-ui .nya-bs-select > button:hover {
    background-color: unset;
}

.twistlock-ui .nya-bs-select:hover button:not(.disabled) {
    border-bottom-color: var(--color-hover-1);
}

.twistlock-ui .nya-bs-select:active button:not(.disabled) {
    border-bottom-color: var(--color-active-click-1);
}

.twistlock-ui .nya-bs-select.trend-chart-options > button,
.twistlock-ui .nya-bs-select.trend-chart-options > button:hover {
    background-color: unset;
    border-bottom: none;
    font-size: 13px;
}

.twistlock-ui .nya-bs-select:not(.trend-chart-options).open > button,
.twistlock-ui .nya-bs-select:not(.trend-chart-options).open > button:hover,
.twistlock-ui .nya-bs-select.form-control.open > button {
    background-color: unset;
    border: none;
    border-bottom: 1px solid var(--color-highlight-1);
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    text-transform: none;
    color: #333333;
}

.twistlock-ui .nya-bs-select .nya-bs-option {
    font-size: 16px;
}

.twistlock-ui .table-top-group .nya-bs-select:not(.light-selector) .nya-bs-option {
    max-width: 35vw;
}

.twistlock-ui .nya-bs-select.trend-chart-options .nya-bs-option {
    font-size: 13px;
}

.twistlock-ui .trend-chart-options.nya-bs-select .dropdown-toggle {
    padding-right: 10px;
    margin-left: 10px;
}

.twistlock-ui .trend-chart-options.nya-bs-select > button,
.twistlock-ui .trend-chart-options .open>.dropdown-toggle.btn-default:hover {
    color: #9B9B9B;
}

.twistlock-ui .table-top-group .nya-bs-select .dropdown-toggle .special-title,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box.special-title {
    padding-right: var(--padding-right-dropdown-toggle);
}

.nya-bs-select .dropdown-toggle .special-title {
    color: #C4C4C4;
}

.nya-bs-select .filter-option {
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.twistlock-ui .nya-bs-select .nya-bs-option a {
    padding: 5px 10px;
}

.twistlock-ui .nya-bs-select .nya-bs-option a:focus,
.twistlock-ui .nya-bs-select .nya-bs-option a:active,
.twistlock-ui .nya-bs-select .nya-bs-option a.active,
.twistlock-ui .nya-bs-select .nya-bs-option a.selected {
    background-color: var(--color-highlight-1);
    color: white;
}

.twistlock-ui .nya-bs-select .nya-bs-option a:hover {
    background-color: var(--color-hover-2);
    color: #333333;
}

/* When in a table - multi select conform to table alignment */
.twistlock-ui td.nya-bs-select button {
    display: table-cell;
}

.twistlock-ui .nya-bs-select .caret {
    top: var(--top-nya-bs-select-caret);
    right: var(--right-nya-bs-select-caret);
    border: solid #9FACB5;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}

.twistlock-ui .nya-bs-select.trend-chart-options .caret {
    top: 10px;
}

.twistlock-ui .nya-bs-select:hover button:not(.disabled) .caret {
    border-color: var(--color-hover-1);
}

.twistlock-ui .nya-bs-select:active button:not(.disabled) .caret {
    border-color: var(--color-active-click-1);
}

.twistlock-ui .nya-bs-select.open .caret {
    border-color: var(--color-highlight-1);
}

.table-top-group.topology-top-bar div.nya-bs-select .btn.dropdown-toggle {
    color: #333333;
    font-family: "Lato-Medium";
    font-size: 14px;
    border-radius: 3px;
    background-color: white;
    height: 30px;
    display: inline-flex;
}

.table-top-group.topology-top-bar div.nya-bs-select .dropdown-toggle .special-title,
.table-top-group.topology-top-bar div.nya-bs-select .dropdown-toggle .filter-option {
    line-height: 18px;
    padding-left: 0px;
}

.topology-top-bar div.nya-bs-select .btn.dropdown-toggle:hover,
.topology-top-bar div.nya-bs-select.open .btn.dropdown-toggle {
    font-size: 14px;
    border-radius: 3px;
}

.topology-top-bar div.nya-bs-select .btn.dropdown-toggle .caret {
    display: inline-block;
    top: 40%;
    right: 0px;
    content: "\f107";
    font-family: "FontAwesome";
}

.topology-top-bar .nya-bs-select .nya-bs-option {
    font-size: 14px;
}

.tw-collection-dropdown.nya-bs-select .dropdown-menu li a {
    display: flex;
}

.tw-collection-dropdown.nya-bs-select .dropdown-menu li.selected a .check-mark {
    right: var(--padding-right-dropdown-toggle);
}

.tw-collection-dropdown.nya-bs-select .dropdown-menu .collection-title {
    width: calc(100% - (2 * var(--padding-right-dropdown-toggle)));
}

.nya-bs-select.multi-selection {
    max-width: 398px;
}

.nya-bs-option .styled-checkbox {
    margin: 0 8px 0 0;
}

/*
End nya-bs
*/

.twistlock-ui label.dropdown-item {
    font-family: inherit;
}

.twistlock-ui .form-control,
.twistlock-ui tags-input input {
    color: #333333;
    background-color: unset;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.twistlock-ui hr {
    border-top: 1px solid #d2d8dc;
}

.twistlock-ui hr.tight-above {
    margin-top: -6px;
}

.twistlock-ui hr.tight-below {
    margin-bottom: 8px;
}

.twistlock-ui hr.wide-below {
    margin-bottom: 45px;
}

/*
Tables
*/

/* Table top group - start*/

.table-top-group {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.table-style-search tw-search-box input.tw-search-box,
.table-style-search tw-search-box,
.table-top-group .left tw-search-box input.tw-search-box,
.table-top-group .left tw-search-box,
.twistlock-ui .table-top-group .nya-bs-select {
    height: var(--height-table-top-group-filter);
}

.table-style-search tw-search-box .tw-search-box:hover,
.table-style-search tw-search-box .tw-search-box:focus,
.table-top-group .left tw-search-box .tw-search-box:hover,
.table-top-group .left tw-search-box .tw-search-box:focus {
    border: 1px solid var(--color-highlight-3);
}

.twistlock-ui .table-top-group .nya-bs-select > button,
.twistlock-ui table.tw-table tbody tr.inline-edit .nya-bs-select > button,
.twistlock-ui table.tw-table tbody tr.inline-edit .nya-bs-select.open > button,
.twistlock-ui .table-top-group .nya-bs-select.open > button,
.twistlock-ui .table-top-group .nya-bs-select.open > button:hover,
.twistlock-ui .table-top-group .nya-bs-select.form-control.open > button,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box > button,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box.open > button,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box.open > button:hover {
    border-bottom: none;
    font-size: 14px;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .nya-bs-select > button,
.twistlock-ui table.tw-table tbody tr.inline-edit .nya-bs-select.open > button {
    padding-left: 16px;
}

.table-top-group .nya-bs-select:not(.trend-chart-options).open,
.table-top-group .nya-bs-select:not(.trend-chart-options):hover,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box:hover,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box.open,
.table-top-group .nya-bs-select.form-control.open  {
    border: 1px solid var(--color-highlight-3);
}

.table-style-search tw-search-box input.tw-search-box,
.twistlock-ui .table-top-group tw-search-box input.tw-search-box,
.table-top-group .nya-bs-select,
.twistlock-ui table.tw-table tbody tr.inline-edit .nya-bs-select,
.twistlock-ui table.tw-table tbody tr.inline-edit .firewall-port-tags-input,
.twistlock-ui .nya-bs-select.form-control.tw-bordered-selection-box {
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    border-radius: var(--border-radius-input);
    background-color: #FFFFFF;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .firewall-port-tags-input[disabled] {
    background-color: #EEEEEE;
}

/* Specify .dropdown-menu tw-search-box in order to prevent styling dropdown selector's search */
.table-top-group .dropdown-menu tw-search-box input.tw-search-box,
.table-top-group .dropdown-menu .nya-bs-select {
    border: none;
    border-radius: 0px;
}

.table-top-group .dropdown-menu tw-search-box,
.table-top-group .left .dropdown-menu tw-search-box input.tw-search-box {
    margin-right:0px !important;
    border: 0;
    border-bottom: 1px solid var(--color-underline);
}

.table-top-group .dropdown-menu tw-search-box:hover,
.table-top-group .left .dropdown-menu tw-search-box input.tw-search-box:hover {
    border: 0;
    border-bottom: 1px solid #66AFE9;
}

.table-top-group .selector-dropdown .search-bar tw-search-box,
.table-top-group .selector-dropdown .search-bar tw-search-box:hover,
.table-top-group .selector-dropdown .search-bar  tw-search-box input.tw-search-box,
.table-top-group .selector-dropdown .search-bar  tw-search-box input.tw-search-box:hover {
    border: 0;
    border-bottom: 0;
}

.table-top-group .right .tw-button:not(.light):not(.grouped) {
    margin-left: 16px;
}

.table-top-group .right .btn-group .tw-button:not(.grouped) {
    margin-left: 0px;
}

.table-top-group .right .btn-group {
    display: flex;
}

.table-top-group .left tw-search-box,
.table-top-group .left .nya-bs-select,
.table-top-group .left input {
    flex: 0 1 267px;
    max-width: 267px;
}

.table-top-group .left tw-search-box.wide-top-group-input,
.table-top-group .left .nya-bs-select.wide-top-group-input,
.table-top-group .left input.wide-top-group-input,
.table-top-group .left .wide-top-group-input input {
    flex: 0 1 340px;
    max-width: 340px;
}

.table-top-group .left .tw-smart-input-wrapper {
    flex-basis: 820px;
}

.table-top-group .left table-results {
    flex: 1 0 136px;
}
.table-top-group .left .tw-checkbox.checkbox-label {
    flex: none;
}
.table-top-group .left .checkbox-label {
    flex: none;
    white-space: nowrap;
}

/* Table top group - end*/

.twistlock-ui .table-top-group .table-results {
    font-family: "Lato-Regular";
    font-size: 12px;
    line-height: 32px;
}

.topology-dialog .table-top-group .table-results {
    color: white;
}

.twistlock-ui table {
    font-size: 14px;
    color: var(--color-table);
    font-family: "Lato-Regular";
    border: var(--border-table);
    background-color: var(--background-color-table);
    border-collapse: separate;
    border-spacing: 0;
}

.twistlock-ui table thead th,
.host-app-table-title {
    font-family: "Lato-Bold";
    font-size: 14px;
    line-height: 17px;
    cursor: default;
    color: var(--color-table);
    background-color: var(--background-color-table);
    box-sizing: border-box;
    border-bottom: 0px;
    /*Make the element unselectable*/
    user-select: none;
}

.host-app-table-title {
    padding-top: 8px;
    padding-bottom: 8px;
}

.twistlock-ui table thead th:not(.text-align-center) {
    text-align: left;
}

.twistlock-ui table thead th:not(:first-of-type) {
    border-left: var(--border-table);
}

.twistlock-ui table thead {
    color: var(--color-table);
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.twistlock-ui table.tight-bottom {
    margin-bottom: 10px;
}

.twistlock-ui .table-top-group .tw-table-topbar-left {
    display: flex;
    align-items: flex-end;
}

.twistlock-ui table thead th,
.twistlock-ui table tbody td,
.twistlock-ui table tbody tw-td,
.twistlock-ui table tfoot td {
    vertical-align: middle;
    padding: var(--padding-top-bottom-cell) var(--padding-right-left-cell);
}

.twistlock-ui table tbody td,
.twistlock-ui table tfoot td {
    border-left: var(--border-table);
    border-top: var(--border-table);
}

.twistlock-ui table tbody td:first-of-type,
.twistlock-ui table tfoot td:first-of-type {
    border-left:none;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .footer {
    padding-left: 15px;
}

.twistlock-ui table thead th .tw-header-content .tw-header-title {
    display: flex;
    /* This is needed for Safari because it add a default font-weight of bold */
    font-weight: 100;
    height: 16px;
    align-items: flex-end;
    flex-grow: 1;
    overflow-y: hidden;
}

.twistlock-ui table thead th .tw-header-filters {
    display: flex;
    padding-left: 4px;
}

.twistlock-ui table thead .tw-header-filter,
.twistlock-ui .tw-smart-input .icon-filter {
    color: var(--color-filter-icon);
}


.twistlock-ui table thead .tw-header-filter {
    margin-left: 4px;
    height: var(--tw-header-filter-size);
    width: var(--tw-header-filter-size);
    vertical-align: middle;
}

.twistlock-ui .tw-table .tw-header-filters .icon-filter.active,
th[st-dropdown-filter] .icon-filter.active,
th[st-date-filter] .icon-filter.active {
    color: var(--color-highlight-1);
}

.twistlock-ui .tw-table .tw-header-filters .icon-sort:hover,
.twistlock-ui .tw-table .tw-header-filters .icon-filter:hover,
.twistlock-ui .tw-smart-input .icon-filter.clickable:hover,
.twistlock-ui .tw-table .tw-header-filters .icon-filter.active:hover,
th[st-dropdown-filter] .icon-filter:hover,
th[st-date-filter] .icon-filter:hover {
    color: var(--color-highlight-3);
    cursor: pointer;
}

.twistlock-ui .tw-table .tw-header-filters .icon-arrow-down,
th[st-sort].st-sort-descent .tw-header-content .tw-header-filters:after,
.twistlock-ui .tw-table .tw-header-filters .icon-arrow-up,
th[st-sort].st-sort-ascent .tw-header-content .tw-header-filters:after {
    color: var(--color-active-icon);
}

.twistlock-ui .tw-table .tw-header-filters .icon-arrow-down:hover,
.twistlock-ui .tw-table .tw-header-filters .icon-arrow-up:hover {
    color: var(--color-highlight-3);
    cursor: pointer;
}

.twistlock-ui table thead th.has-active-filter {
    border-bottom: 2px solid var(--color-active-icon);
}

/* Audit table - start*/
table.audit-table .top-row td {
    padding-top: 8px;
}

table.audit-table {
    border-collapse:separate;
    color: #232323;
}

table.audit-table .top-row>td:first-child,
table.audit-table .top-row>td:last-child {
    border-bottom: none;
}

table.audit-table .top-row > td:first-child:before,
table.audit-table .top-row > td:last-child:after {
    content : "";
    position: absolute;
    bottom  : 0;
    width   : 80%;
}

table.audit-table .top-row > td:first-child:before {
    left: 20%;
}

table .top-row > td .view-details,
table td .severity-indicator.fa-circle {
    vertical-align: middle;
    display: inline-block;
}

table td .severity-indicator.fa-circle {
    padding-right: 8px;
}

table.audit-table .top-row > td:last-child:after {
    left: 0%
}

.audit-table .bottom-row {
    color: #666666;
    font-size: 13px;
}
/* Audit table - end*/

/* List-table css section - start */
table.list-table {
    border: none;
}

table.list-table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
}
/* List-table css section - end */

/* Gray-table style - start */

.gray-background-table,
.gray-background-table > table tbody td,
.modal-body .gray-background-table > table tbody tr td.transparent-background {
    background-color: #F8F8F8;
}

.gray-background-table .no-select-cell {
    color: #333333 !important;
    background-color: #F8F8F8 !important;
}

/* Gray table style - end */


/* Expanding table - start */
.view-details {
    font-size: 0.8em;
    cursor: pointer;
    user-select: none;
    padding-right: 12px;
}

.view-details.expand-row-icon {
    padding-right: 0px;
    width: 12px;
    padding-left: 4px;
    margin-right: var(--padding-right-left-cell);
}

.twistlock-ui table.expanding-rows-table tr.expanded-row > td,
.twistlock-ui table.expanding-rows-table tr.expanded-content td > .header {
    background: #D3E8FC;
    border-top: 2px solid var(--color-highlight-3);
}
.twistlock-ui table.expanding-rows-table tr.expanded-row > td:first-of-type {
    border-left: 2px solid var(--color-highlight-3);
    padding-left: calc(var(--padding-right-left-cell) - 2px);
}
.twistlock-ui table.expanding-rows-table tr.expanded-row > td:last-of-type {
    border-right: 2px solid var(--color-highlight-3);
}

.twistlock-ui table.expanding-rows-table tr.expanded-content > td,
.twistlock-ui table.expanding-rows-table tw-tr.expanded-content > td {
    padding: var(--padding-expanded-content) var(--padding-expanded-content) 11px;
    border-bottom: 2px solid var(--color-highlight-3);
    border-top: 0px;
}

.twistlock-ui table.expanding-rows-table tr.expanded-content > td:first-of-type,
.twistlock-ui table.expanding-rows-table tw-tr.expanded-content > td:first-of-type {
    border-left: 2px solid var(--color-highlight-3);
}

.twistlock-ui table.expanding-rows-table tr.expanded-content > td:last-of-type,
.twistlock-ui table.expanding-rows-table tw-tr.expanded-content > td:last-of-type {
    border-right: 2px solid var(--color-highlight-3);
}

.host-model-table .bottom-row > td,
.expanding-rows-table .bottom-row > td,
.vulnerability-layer-table .bottom-row > td {
    padding: 0;
    border: none;
}

.twistlock-ui .host-model-table tr.bottom-row > td,
.twistlock-ui .expanding-rows-table tr.bottom-row > td,
.twistlock-ui .vulnerability-layer-table tr.bottom-row > td {
    padding: 0;
    border: none;
}

.twistlock-ui .vulnerability-layer-table tr.top-row:hover,
.twistlock-ui .vulnerability-layer-table tr.top-row:hover td {
    background-color: var(--color-table-hover);
}

.expanding-rows-table .bottom-row > td > div {
    padding-right: 10px;
    overflow-wrap: break-word;
}

.expanding-rows-table .bottom-row .table td:last-of-type {
    word-break: break-all; /* Fallback for browsers other than Chrome */
    word-break: break-word; /* Works on Chrome only */
}

.twistlock-ui table td.no-border-left {
    border-left: 0px;
}

/* Expanding table - end */

.twistlock-ui table tr .in-table-title {
    font-size: 18px;
    font-family: "Lato-Regular";
    padding-bottom: 18px;
    line-height: 22px;
}

.twistlock-ui .compliance-explorer-table .tw-line-chart {
    margin: 0;
}

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

/*
Some tables may have different padding and border, define styling for "no data" row
 */
.twistlock-ui table tbody tr td.no-data {
    padding: 8px 16px !important;
}

/** Tables - end*/

.protection-info .tw-single-value-thermometer {
    font-size: 15px;
    min-width: unset;
}

.cloud-discovery-protection .tw-single-value-thermometer{
    min-width: unset;
}

.tw-single-value-thermometer {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    min-width: 18ch;
}

.limit-size .tw-single-value-thermometer {
    max-width: 130px;
}

.protection-info {
    display: inline-flex;
    flex: 0 0 50%;
    margin-left: 40px;
    max-width: 500px
}

.scan-warning {
    margin-left: 40px;
    font-size: 15px;
    color: white;
    margin-right: 20px;
}

.topology-dialog .topology-dialog-title .protection-info {
    color: white;
}

.lock-image {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.lock-image.large {
    width: 18px;
    height: 18px;
}

.warning-image {
    width: 25px;
    height: 19px;
}

.tw-single-value-thermometer .placeholder {
    height: 8px;
    border-radius: 5px;
    background-color: #E6EAFD;
    flex-grow: 1;
    display: inline-flex;
    margin-left: 2px;
    margin-right: 6px;
}

.protection-info .tw-single-value-thermometer .placeholder {
    height: 13px;
}

.tw-single-value-thermometer .value-bar {
    height: inherit;
    border-radius: inherit;
    width: 0px;
    transition: width .7s ease-out;
    background-color: #333333; /*Default bar color*/
}

.tw-styled-list .tw-table-cell-layout {
    padding: 2px 4px 2px 1px;
}

.tw-risk-factors-list {
    font-size: 14px;
    font-family: "Lato-Medium";
}

.tw-risk-tree {
    font-family: "Lato-Regular";
    font-size: 14px;
}

.tw-risk-tree .item-icon {
    font-size: 14px;
    margin-right: 5px;
}

.tw-risk-tree i {
    font-size: 12px;
    margin-right: 5px;
}

.item-description {
    display: inline-flex;
}

.item-description .item-display-name {
    max-width: 430px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 5px;
}

.item-description .item-display-name.large {
    max-width: 690px;
}

.tw-risk-tree i.enabled {
    color: #42A5ED;
}

.tw-risk-tree .item-data {
    padding-bottom: 5px;
    display: inline-block;
}

.tw-risk-tree .expanded-data {
    margin-left: 27px;
}

.tw-risk-tree .tree-item {
    margin: 0;
    padding: 3px 11px;
    line-height: 20px;
    border-left:1px solid black;
}

.tw-risk-tree .tree-item:last-child {
    border-left:none;
}

.tw-risk-tree .tree-item:last-child:before {
    border-left:1px solid black;
}

.tw-risk-tree .tree-item:before {
    position: relative;
    top: -6px;
    height: 12px;
    width: 20px;
    border-bottom: 1px solid black;
    content: "";
    display: inline-block;
    left: -11px;
}

.disabled-section .tw-risk-tree i,
.disabled-section.tw-risk-tree i,
.tw-risk-tree i.disabled {
    color: var(--color-disabled);
    background-color: transparent;
}

.risk-tree-legend {
    width: 574px;
    font-family: "Lato-Regular";
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #717171;
}

.risk-tree-legend .entry {
    margin-left: 22px;
}

.risk-tree-legend .text {
    font-size: 14px;
    margin-left: 4px;
}

.twistlock-ui table tr td.pagination-row,
.twistlock-ui table.table-palette-secondary tr td.pagination-row {
    padding: 24px;
    border: none;
    background-color: unset;
}

.twistlock-ui .pagination-items-per-page {
    float: right;
    padding-right: 20px;
}

.twistlock-ui .tw-pagination {
    height: 24px;
    font-family: "Lato-Medium";
    font-size: 14px;
}

.twistlock-ui .pagination-orientation {
    font-size: 14px;
    font-family: "Lato-Medium";
}

.twistlock-ui .tw-pagination .pagination-step {
    margin-left: 5px;
    margin-right: 5px;
}

.twistlock-ui .btn-group .tw-pagination-list-btn {
    color: #232323;
    background-color: unset;
    letter-spacing: 0;
    height: 20px;
    min-width: 20px;
    padding: 0;
    margin: 0px 3px 0 3px;
    border: none;
}

/* Pagination navigation buttons */
.twistlock-ui .btn-group .tw-pagination-nav-btn {
    width: 68px;
    height: 20px;
    vertical-align: middle;
    color: #232323;
    background-color: unset;
    letter-spacing: 0;
    padding: 0px;
    border-radius: 0px;
    border: none;
}

.twistlock-ui .tw-table .tw-header-content,
.twistlock-ui table thead .tw-header-content {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.tw-table > tbody.tw-table-fetching {
    border-top: none;
}

.twistlock-ui .btn-group .tw-pagination-list-btn:hover {
    background-color: #E1E1E1;
}

.twistlock-ui .btn-group .tw-pagination-list-btn:active {
    box-shadow: none;
}

.twistlock-ui .btn-group .tw-pagination-list-btn.active {
    color: white;
    background-color: #565656;
    box-shadow: none;
    outline: none;
    margin: 0 3px 0 3px;
}

.twistlock-ui .btn-group .tw-pagination-nav-btn.disabled {
    color: var(--color-disabled);
    opacity: 1;
}

.twistlock-ui .btn-group .tw-pagination-nav-btn:hover {
    background-color: #E1E1E1;
}

.twistlock-ui .btn-group .tw-pagination-nav-btn:active {
    box-shadow: none;
}

.twistlock-ui .btn-group .tw-pagination-nav-btn .pagination-left {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -12%;
    padding-right: 6px;
    margin-left: -3px;
}

.twistlock-ui .btn-group .tw-pagination-nav-btn .pagination-right {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -12%;
    padding-left: 6px;
    margin-right: -3px;
}

.twistlock-ui .btn-group .tw-pagination-nav-btn.placeholder,
.twistlock-ui .btn-group .tw-pagination-nav-btn.placeholder:hover {
    color: transparent;
    border-color: transparent;
    cursor: default;
}

.twistlock-ui table tbody td div.compliance-extra-details,
.twistlock-ui table.table-palette-secondary {
    border: none;
}

.twistlock-ui table.table-palette-secondary.dark {
    background-color: var(--background-color-main);
}

.twistlock-ui table.table-palette-secondary.dark th {
    background-color: var(--color-border-table);
}

.twistlock-ui table.table-palette-secondary.dark tbody td,
.twistlock-ui table.table-palette-secondary.dark tfoot td {
    border-top:1px solid #D4D4D4;
}

.twistlock-ui table.table-palette-secondary td,
.twistlock-ui table.table-palette-secondary thead th {
    border-left: 0;
    border-right: 0;
}

.twistlock-ui table.table-palette-secondary thead th {
    border: none;
}

.twistlock-ui table.table-palette-secondary tr.bottom-row td {
    border-top: none;
}

.twistlock-ui table tr.selected {
    background-color: #9FACB5;
    color: white;
    font-weight: bold;
}

.twistlock-ui table.table-details {
    margin-top: 20px;
}

.twistlock-ui tr.clickable-row:hover,
.twistlock-ui tr.clickable-row:hover td,
.twistlock-ui tr.clickable-row:hover tw-td,
.twistlock-ui tr.table-hover:hover,
.twistlock-ui tr.table-hover:hover td,
.twistlock-ui tr.table-hover:hover tw-td {
    background-color: var(--color-table-hover);
}

/* Workaround for Firefox: table borders are hidden behind table background, when border-collapse is set to "collapse".
   This fixes the issue */
td {
    background-clip: padding-box;
}
/*
End tables
*/

/*
Datepicker
*/

.twistlock-ui .tw-datepicker td .tw-button.light{
    border-radius: 0;
}

.twistlock-ui .tw-datepicker table {
    background-color: white;
}

.twistlock-ui .tw-datepicker ul {
    padding: 15px;
}

.twistlock-ui .tw-datepicker thead {
    background-color: inherit;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: middle;
    font-family: "Lato-Regular";
}

.twistlock-ui .tw-datepicker table thead th,
.twistlock-ui .tw-datepicker table tbody td {
    position: relative;
    vertical-align: middle;
    border: none;
    padding: 0;
}

.twistlock-ui .tw-datepicker table thead th {
    font-size: 14px;
    cursor: default;
    user-select: none;
}

.twistlock-ui .tw-datepicker tr:nth-child(even) {
    background-color: inherit;
}
/*
End datepicker
*/

.text-severity-critical {
    color: #9C0F17;
}

.text-severity-high,
.twistlock-ui .text-danger {
    color: #EE1C25;
}

.deny-svg-label {
    fill: #F7941E;
    stroke: none;
    font-family: "Lato-Semibold";
}

.text-severity-medium {
    color: #F7941E;
}

.audit-svg-label {
    fill: #EADC00;
    stroke: none;
    font-family: "Lato-Semibold";
}

.text-severity-low {
    color: #EADC00;
}

.allowed-svg-label {
    fill: #39B54A;
    stroke: none;
    font-family: "Lato-Semibold";
}

.color-green,
.text-no-severity,
.twistlock-ui .text-success {
    color: #39B54A;
}

.twistlock-ui .text-warning {
    color: #EAB007;
}

.monitor-svg-label {
    fill: #b4b4b4;
    stroke: none;
    font-family: "Lato-Semibold";
}

.text-severity-unimportant,
.twistlock-ui .text-unknown {
    color: #b4b4b4;
}

.tw-badge.purple,
.severity-critical {
    background-color: #9C0F17;
}

.tw-badge.red,
.severity-high {
    background-color: #EE1C25;
}

.tw-badge.orange,
.severity-medium {
    background-color: #F7941E;
}

.tw-badge.yellow,
.severity-low {
    background-color: #EADC00;
}

.tw-badge.green,
.no-severity {
    background-color: #39B54A;
}

.severity-unimportant {
    color: #b4b4b4;
}

.color-black {
    color: black;
}

.twistlock-ui .dropdown-menu.table-dropdown,
.twistlock-ui .tw-smart-input .options .dropdown-menu {
    padding: 10px 0;
}

.twistlock-ui .dropdown-menu.table-dropdown.tw-filters-dropdown {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    width: 312px;
}

.twistlock-ui .dropdown-menu.table-dropdown .dropdown-filter-tags {
    background-color: #959595;
    border-radius: 4px 4px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
}

.twistlock-ui .dropdown-menu.table-dropdown .dropdown-filter-tags .tag {
    height: 20px;
    background-color: var(--background-color-tag);
    border: none;
    border-radius: 4px;
    display: inline-flex;
    font-family: "Lato-Regular";
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
    max-width: 100%;
}

.twistlock-ui .dropdown-menu.table-dropdown .dropdown-filter-tags .tag .filter {
    text-overflow: ellipsis;
    overflow: hidden;
}

.twistlock-ui .dropdown-menu.table-dropdown .dropdown-filter-tags .tag .remove-button {
    font-family: "Lato-Bold";
    color: var(--color-primary-button);
    font-size: 17px;
    line-height: 20px;
    margin-left: 5px;
}

.twistlock-ui .dropdown-menu.table-dropdown .dropdown-filter-tags .no-filters {
    color: white;
    margin-top: 8px;
}
.twistlock-ui .dropdown-menu.table-dropdown .dropdown-filter-tags .no-filters:before {
    margin-right: 10px;
}
.twistlock-ui .dropdown-menu.table-dropdown .tw-filter-dropdown-search {
    margin-top: 5px;
}

.twistlock-ui .dropdown-menu {
    border-color: #D2D8DC;
    font-family: "Lato-Regular";
    font-weight: normal;
    color: #333333;
    padding: 4px 0px;
}

.twistlock-ui tw-selector .dropdown-menu {
    max-width: 100%;
}

.disabled-dropdown-item {
    cursor: default;
}

.disabled-dropdown-item .dropdown-header,
.dropdown-menu > li.disabled-dropdown-item > a {
    color: var(--color-disabled);
    pointer-events: none;
}

/* Disable default browser outlines for pressed buttons */
.twistlock-ui :focus,
a:focus {
    outline: 0 !important;
}

/*
Like fa-lg only that it works on FireFox as well- keeps the height of the button the same of the input group.
Works well with our icons.
*/
.tw-lg {
    font-size: 1.3333333em;
    line-height: 0.8em;
    vertical-align: middle;
}

.tw-md {
    font-size: 1.1em;
    line-height: 1.7em;
    vertical-align: middle;
}

.tw-sm {
    font-size: 0.8em;
    line-height: 0.8em;
    vertical-align: middle;
}

.host-info {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    color: #717171;
}

.tw-table-icon,
.tw-actions-popover-icon {
    font-size: 18px;
    line-height: 0.8em;
    vertical-align: middle;
}

.tw-dialog-controls .tw-table-icon {
    font-size: 16px;
    line-height: 16px;
    vertical-align: baseline;
}

.collections-group .tw-table-icon {
    font-size: 1.5em;
}

.dos-rate-description,
.twistlock-ui input::-webkit-input-placeholder {
    color: var(--color-placeholder);
}

.twistlock-ui input.input-error {
    border-color: #FF0000;
}

.twistlock-ui input.empty-input:not(:focus):not(.input-error) {
    border-color: var(--color-underline);
}

.tw-login {
    position: relative;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: auto;
    background: linear-gradient(#717E86, #49535B);
}

.tw-login-body {
    display: flex;
    flex-direction: column;
    margin-top: 150px;
    font-size: 24px;
}

.tw-login .tw-login-form {
    padding: 0;
    width: 534px;
    flex: 470px 0 0;
    background-color: white;
}

.tw-login .tw-login-form.register {
    flex-basis: 462px;
}

.tw-login .tw-login-form.short-login-form {
    flex-basis: 339px;
}

.tw-login .tw-login-form.saas-login-form {
    flex-basis: 400px;
}

.tw-login .prisma-cloud-full-logo {
    width: 246px;
    margin: 44px auto 48px;
    display: block;
}

.tw-login .tw-login-error-block {
    flex-basis: 58px;
    width: 534px;
    font-family: "Lato-Semibold";
    font-size: 14px;
    margin: auto auto 0; /* position to bottom and center */
    padding: 12px 20px;
}

.tw-login .tw-login-error {
    background-color: #DC5755;
    color: white;
}

.tw-login .icon-TWI-UI-warning {
    font-size: 32px;
}

.tw-login .tw-login-fields {
    padding: 0;
    width: 330px;
    margin: auto;
}

.tw-login input {
    height: 36px;
    font-family: "Lato-Light";
    font-size: 16px;
    margin-top: 25px;
    padding-left: 1px;
    vertical-align: middle;
    line-height: 100%;
    background-color: white;
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.tw-login .tw-button {
    font-family: "Lato-Semibold";
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    margin-top: 50px;
    padding-left: 22px;
    padding-right: 22px;
    text-transform: none;
    border-radius: 4px;
}

.tw-login .login-footer {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: 100%;
    text-align: right;
    font-family: "Lato-Medium";
    font-size: 14px;
    color: white;
}

.tw-login.redirect-only {
    background: var(--background-color-main);
    font-size: 20px;
    font-family: "Lato-Light";
}

.arrow-animation-container {
    width: 76px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.arrow-animation-container:after {
    content: "";
    position: absolute;
    top: 0;
    width: 76px;
    height: 100%;
    background: linear-gradient(to right, var(--background-color-main), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, var(--background-color-main));
}

.moving-arrows {
    animation: moving-arrows 1.4s linear infinite;
}

.moving-arrows > .fa-chevron-up {
    font-size: 24px;
    color: var(--color-highlight-1);
    margin-left: -2px;
    transform: rotate(90deg);
}

/*
This is in order to change the color of the text inputs in the login screen. Chrome's auto complete gives
it a yellowish color
http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
*/
.tw-login input[type=text]:-webkit-autofill,
.tw-login input[type=password]:-webkit-autofill {
    -webkit-box-shadow: none;
}

.tw-password-warning {
    line-height: 18px;
    background-color: #EEF58C;
    color: #333333
}

.tw-password-warning .icon-TWI-UI-warning {
    font-size: 32px;
    color: #DA5858
}

.twistlock-ui.narrow-dialog .modal-dialog {
    width: 700px;
}

.twistlock-ui.instructions-dialog .modal-dialog {
    width: 622px;
    height: 737px;
}

.twistlock-ui.instructions-dialog .modal-body {
    padding: 32px;
}

@media (min-width: 1200px) {
    .twistlock-ui.trust-wide-dialog .modal-dialog,
    .twistlock-ui.extra-wide-dialog .modal-dialog {
        width: 1140px;
    }

    .twistlock-ui.confirm-dialog .modal-dialog {
        width: 500px;
    }

    .twistlock-ui.console-credentials-dialog .modal-dialog {
        width: 721px;
        height: 413px;
    }
}

@media (min-width: 1270px) {
    .twistlock-ui.cve-wide-dialog .modal-dialog,
    .twistlock-ui.policy-wide-dialog .modal-dialog {
        width: 1250px;
    }

    .twistlock-ui.wide-dialog .modal-dialog {
        width: 1200px;
    }
}

@media (min-width: 1450px) {
    .twistlock-ui.trust-wide-dialog .modal-dialog,
    .twistlock-ui.cve-wide-dialog .modal-dialog {
        width: 1400px;
    }
}

@media (min-width: 1680px) {
    twistlock-ui.trust-wide-dialog .modal-dialog,
    .twistlock-ui.extra-wide-dialog .modal-dialog {
        width: 1626px;
    }
}

.twistlock-ui .modal-content {
    font-family: "Lato-Regular";
    background-color: var(--background-color-dialogs);
    border: var(--border-width-modal) solid #CCCCCC;
    border-radius: 0;
    font-size: 14px;
}

.twistlock-ui .modal-content tags-input .tags .input,
.twistlock-ui .modal-content input,
.twistlock-ui .waas-expand-table input {
    font-size: 14px;
}

.twistlock-ui .modal-dialog {
    margin-top: var(--margin-modal-top);
}

.twistlock-ui .modal-body {
    background-color: white;
    padding: var(--margin-modal-body);
}

/*
adding this for the forensics dialog so it will have scroll. temporary solution
until there is a use od tw-dialog and not regular dialog,
see https://github.com/twistlock/twistlock/issues/21821
*/
.twistlock-ui.gray-modal-layout.forensics-modal .scrollable-modal,
.twistlock-ui .scrollable-modal {
    max-height: var(--height-modal-body);
    overflow-y: auto;
}

.twistlock-ui .modal-header,
.twistlock-ui .modal-footer {
    font-family: "Lato-Regular";
    letter-spacing: 0;
    border: none;
    color: #333333;
    align-items: center;
}

.twistlock-ui .modal-footer {
    padding: 16px;
    border-top: 1px solid #E6E6E6;
    clear: both;
    height: var(--height-modal-footer);
    background-color: var(--background-color-table);
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.twistlock-ui .modal-footer .footer-messages {
    margin-right: 16px;
    flex: 1 1 auto;
    overflow: hidden;
}

.twistlock-ui .modal-footer .footer-buttons {
    flex: 0 0 auto;
}

.twistlock-ui .modal-footer .footer-messages .tw-messages .message-content {
    width: 100%;
}

/* aligning the bullet in the center of the auto-overflow message */
.twistlock-ui .modal-footer .footer-messages .tw-messages .message-content .tw-circle-bullet {
    height: 26px;
}

.twistlock-ui .modal-footer .footer-messages .tw-dialog-error .text.auto-overflow {
    line-height: 26px;
}

.modal-footer .btn + .btn,
.modal-footer tw-secondary-button + tw-secondary-button,
.modal-footer tw-secondary-button + tw-primary-button,
.modal-footer tw-primary-button + tw-secondary-button,
.modal-footer tw-primary-button + tw-primary-button,
.modal-footer tw-primary-button + tw-save-button {
    margin-left: 8px;
}

.modal-footer-height {
    line-height: 34px;
}

.twistlock-ui .modal-footer .btn + .btn {
    margin-left: 16px;
}

.twistlock-ui .modal-header {
    background: #FAFAFA;
    padding: 16px;
    display: flex;
    border-bottom: 1px solid #E6E6E6;
    height: var(--height-modal-header);
}

.twistlock-ui .modal-header .secondary-title {
    margin-bottom: 0;
}

.twistlock-ui:not(.gray-modal-layout) .modal-header.remove-padding-top {
    padding-top: 0px;
}

.service-title-wrapper {
    display: flex;
    align-items: center;
    font-size: 24px;
    line-height: 26px;
    width: 100%;
}

.twistlock-ui.gray-modal-layout .tw-dialog-header,
.twistlock-ui.gray-modal-layout .modal-header {
    background-color: var(--background-color-tw-dialog-header);
    color: var(--color-highlight-3);
    padding: 10px 120px 5px 15px;
    font-size: 24px;
    border-bottom: none;
    font-family: "Lato-Semibold";
    text-transform: none;
    height: var(--height-radar-dialog-header);
}

.twistlock-ui.gray-modal-layout .modal-content {
    border: none;
}

.twistlock-ui.gray-modal-layout .tw-dialog-body {
    background-color: var(--background-color-tw-dialog);
    color: white;
    padding-left: 35px;
    margin-bottom: 14px;
    font-family: "Lato-Regular";
}

.twistlock-ui .modal-header h4 {
    font-size: 22px;
    line-height: 26px;
    width: 100%;
}

.twistlock-ui .modal-header .modal-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.twistlock-ui .modal-body .modal-secondary-title {
    font-family: "Lato-Regular";
    font-size: 20px;
}

.twistlock-ui label {
    font-family: "Lato-Light";
    font-weight: lighter;
}

.twistlock-ui .control-label {
    padding-top: 6px;
    font-size: 16px;
    font-family: "Lato-Light";
    text-align: left;
}

.twistlock-ui .modal-body .control-label,
.twistlock-ui table .control-label {
    padding-top: 6px;
    padding-right: 8px;
    font-size: 14px;
    font-family: "Lato-Regular";
}

.twistlock-ui .modal-body .control-label .effect-as-bullet,
.twistlock-ui table .control-label .effect-as-bullet {
    width: 18px;
    height: 18px;
    flex: 18px 0 0;
}

.twistlock-ui .control-label .control-label-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

.twistlock-ui .form-group .tw-checkbox {
    margin-top: 9px;
}

.twistlock-ui .tl-scrollable-border .tw-checkbox {
    margin-top: 0;
}

/* This makes the date picker aligned to the left instead to the right as suggested here:
https://github.com/angular-ui/bootstrap/issues/1012 */
.tw-datepicker {
    position: relative;
}

.tw-dropdown-datepicker,
.table-dropdown .controls {
    margin-right: 20px;
    margin-left: 20px;
}

.tw-datepicker .dropdown-menu {
    left: auto !important;
    right: 0;
}
/*
End datepicker alignment
*/
.tw-toggle {
    display: inline-flex;
    margin-top: 3px;
}

.title-text .tw-toggle {
    margin-top: 0px;
    position: relative;
    top: -3px;
}

.tw-toggle-group-wrapper {
    background-color: #898989;
    text-transform: capitalize;
    letter-spacing: 0;
    font-size: 16px;
    font-family: "Lato-Regular";
    color: white;
    border-radius: 14px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    height: 25px;
    position: relative;
    transition: background-color 0.5s;
    display: inline-block;
    /* calculate the size of the toggle window (the displayed part of the toggle) - considering knob width and margins */
    width: calc(50% + 15px);
    vertical-align: middle;
}

.tw-toggle .tw-toggle-group {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 34px 1fr;
    /* reduce knob width plus margin from the tw-toggle-group size (which is twice the size of a toggle element - tw-toggle-on/off) */
    width: calc(200% - 23px);
    top: 0;
    bottom: 0;
    /* on toggle, the toggle group will move -100% of the tw-toggle-group-wrapper view plus the size of the knob with margin */
    left: calc(-100% + 23px);
    height: 100%;
}

.tw-toggle-group-wrapper.animate .tw-toggle-group {
    transition: 0.5s;
}
.tw-toggle-group-wrapper.checked {
    background-color: #333333;
}
.tw-toggle-group-wrapper.checked .tw-toggle-group {
    left: 0;
}
.tw-toggle .tw-toggle-group .tw-toggle-on {
    margin-left: 7px;
}
.tw-toggle .tw-toggle-group .tw-toggle-off {
    margin-right: 7px;
}
.tw-toggle .tw-toggle-group .knob {
    margin-left: 10px;
    margin-right: 10px;
}

.tw-toggle .knob {
    background-color: white;
    border-radius: 12px;
    width: 15px;
    height: 15px;
    align-self: center;
}

.tw-toggle.disabled {
    background-color: unset;
}

.disabled-section.tw-toggle .knob,
.disabled-section .tw-toggle .knob,
.tw-toggle.disabled .knob {
    background-color: #DBDBDB;
}

.tw-br {
    display: block;
    margin: 10px -10px;
}

.disabled {
    pointer-events: none;
    background-color: var(--color-disabled);
    cursor: not-allowed;
}

.disabled-section {
    pointer-events: none;
}

.disabled-text {
    color: #9FACB5;
    cursor: not-allowed;
}

.disabled-section .information-tooltip {
    pointer-events: auto;
}

.twistlock-ui .information-tooltip {
    cursor: pointer;
}

/*
This is needed to style place holder texts
https://css-tricks.com/snippets/css/style-placeholder-text/
*/
.twistlock-ui ::-webkit-input-placeholder {
    color: #9FACB5;
}

.twistlock-ui :-moz-placeholder { /* Firefox 18- */
    color: #9FACB5;
}

.twistlock-ui ::-moz-placeholder {  /* Firefox 19+ */
    color: #9FACB5;
}

.twistlock-ui :-ms-input-placeholder {
    color: #9FACB5;
}
/*
End place holder text styleing
*/

.tw-checkbox {
    background-color: white;
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #9FACB5;
    text-align: center;
    font-size: 12px;
    padding: 0;
}

.tw-checkbox span {
    line-height: 16px;
    font-size: 12px;
    visibility: hidden;
    color: var(--color-highlight-1);
}

.tw-checkbox.checked span {
    visibility: visible;
}

.tw-checkbox.checked {
    border: 1px solid #9FACB5;
    background-color: white;
}

.disabled-section .tw-checkbox,
.disabled-section.tw-checkbox,
.tw-checkbox.disabled {
    cursor: not-allowed;
    border: 1px solid var(--color-disabled);
    background-color: var(--color-disabled);
    text-align: center;
    font-size: 12px;
}

.twistlock-ui .disabled-section .icon-allowed,
.disabled-section .tw-checkbox span,
.disabled-section.tw-checkbox span,
.tw-checkbox.disabled span {
    color: #898989;
}

.tw-checkbox .icon-checkmark {
    vertical-align: 1px;
}

.risk-msg {
    font-size: 11px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-top: 1px solid;
    padding-top: 5px;
    color: #CCCCCC
}

.checkbox-label {
    margin-bottom: 0;
    cursor: pointer;
}

.dialog-checkboxes {
    line-height: 0.4;
}

.small-text {
    font-size: 16px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14,
.show-password-text,
.remember-auth-method {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-18,
.register-text {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-24 {
    font-size: 24px;
}

.dialog-runtime-environment-links {
    font-size: 14px;
    font-family: 'Lato-Regular';
}

.tooltip.top .tooltip-arrow,
.tooltip.bottom .tooltip-arrow {
    border-top-color: black;
    border-bottom-color: black;
    bottom: 1px;
}

.tooltip-inner {
    word-break: break-word;
    max-width: 350px;
}

.collections-scope-tooltip {
    white-space: pre-line;
}

.collections-scope-tooltip .tooltip-inner {
    text-align: left;
}

.tooltip-inner .tw-risk-factors-list {
    white-space: nowrap;
}

.tooltip.in {
    opacity: 1;
}

.unselectable {
    /*
    Make the element unselectable http://stackoverflow.com/questions/6900124/make-some-text-unselectable-with-css */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    /*
    End unselectable
    */
}

.spinner {
    width: 25px;
    height: 25px;
}

.spinner.small {
    width: 14px;
    height: 14px;
}

.tw-spinner {
    color: #9FACB5;
}

.tw-button .tw-spinner {
    font-size: 1em;
}

.modal-footer .tw-spinner {
    font-size: 24px;
    vertical-align: middle;
}

.please-wait-text {
    font-family: "Lato-Light";
    color: #9FACB5;
}

.license-message {
    width: 100%;
    background-color: #FF4000;
    height: 40px;
    color: white;
    line-height: 40px;
    font-family: "Lato-Regular";
    font-size: 20px;
    text-align: center;
    cursor: default;
}

.license-message a {
    color: white;
    text-decoration: underline;
}

.license-message + div {
    padding-top: 40px;
}

.page-warning,
.license-expiration-warning {
    background-color: #EFF58C;
    color: black;
}

.page-warning {
    padding: 7px var(--padding-side-topbar-menu) 5px 15px;
    height: 35px;
}

.page-warning.gray {
    background-color: #DBDBDB;
}

.unsupported-browser-message {
    width: 100%;
    background-color: #FF4000;
    color: white;
    line-height: 40px;
    font-family: "Lato-Regular";
    font-size: 20px;
    text-align: center;
    cursor: default;
}

.widget-badge {
    margin-right: 3px;
}

.light-text {
    font-family: "Lato-Light";
}

.bold-value {
    font-family: "Lato-Regular";
    font-weight: 500;
}

.bold2-value {
    font-family: "Lato-Medium";
}

.bold3-value {
    font-family: "Lato-Semibold";
}

.bold4-value {
    font-family: "Lato-Bold";
}

.cap-control {
    min-width: 60px;
}

.no-animate * {
    transition: none !important;
}

tw-search-box {
    position: relative;
    display: inline-block;
    width: 100%;
}

.twistlock-ui input.tw-search-box,
.twistlock-ui .tw-tags-filter tags-input .tags input,
.tw-search-box {
    font-family: "Lato-Regular";
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    color: #333333;
    padding: 8px 25px 8px 28px;
}

tw-search-box .fa-lg.tw-search,
.tw-smart-input-field-date .tw-dropdown-datepicker .date-pick input {
    cursor: default;
}

.twistlock-ui input.tw-search-box::placeholder,
.twistlock-ui .tw-smart-input input.input::placeholder,
.twistlock-ui .tw-tags-filter tags-input .tags input::placeholder,
.placeholder {
    color: var(--color-input-placeholder);
}

.twistlock-ui .tw-tags-filter tags-input .tags input {
    padding: 0;
    height: 30px;
}

.nya-bs-select .tw-search-box {
    padding-left: 10px;
    cursor: auto;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-right-8 {
    margin-right: 8px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-12 {
    margin-right: 12px;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-right-16 {
    margin-right: 16px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30,
.label-margin {
    margin-right: 30px;
}

.empty-radar-msg {
    position: absolute;
    top: 230px;
    width: 100%;
    z-index: 1;
}

.tw-search,
.tw-tags-filter .icon-filter {
    color: #717171;
}

.tw-search {
    align-items: center;
    display: flex;
    font-family: "Font Awesome";
    padding: 8px;
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    height: 100%;
    line-height: 10px;
    position: absolute;
    text-align: center;
}

.tw-search.icon-filter,
.nya-bs-select.form-control.icon-filter,
.twistlock-ui .table-top-group .nya-bs-select.icon-filter {
    color: #717171;
    font-size: var(--font-size-icon-filter);
    align-items: center;
}

.nya-bs-select.form-control.icon-filter,
.twistlock-ui .table-top-group .nya-bs-select.icon-filter {
    padding: var(--padding-left-icon-filter);
}

.nya-bs-select.form-control.icon-filter,
.twistlock-ui .table-top-group .nya-bs-select.icon-filter {
    padding-right: 16px;
}

.nya-bs-select .tw-search {
    margin-right: 15px;
}

.twistlock-ui .margin-toggle {
    margin-left: 30px;
}

.alertify-log {
    /*
    Make the element unselectable http://stackoverflow.com/questions/6900124/make-some-text-unselectable-with-css */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    /*
    End unselectable
    */

    cursor: default;
    font-family: "Lato-Medium";
    text-shadow: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.alertify-log:first-letter {
    text-transform: uppercase;
}

g.topButton:hover rect {
    fill-opacity: 0.8;
}

.ellipsis-suffix:after {
    content: '...';
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-top .tw-radio-group,
.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-bottom,
.twistlock-ui tags-input.no-margin-bottom .host {
    margin-bottom: 0;
}

.bottom-margin-3 {
    margin-bottom: 3px;
}

.row-bottom-margin {
    margin-bottom: 6px;
}

.row-bottom-margin-40 {
    margin-bottom: 40px;
}

.secondary-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
    margin-bottom: 10px;
}

.secondary-title.top-of-page {
    margin-top: 0;
}

.table-margin-top.under-secondary-title {
    margin-top: 14px;
}

.paragraph-margin-top.under-secondary-title {
    margin-top: 6px;
}

.secondary-title .title-text {
    font-family: "Lato-Light";
    display: block;
    position: relative;
    font-size: 24px;
    flex: 1 1 58.33333333%;
}

/* Underline of secondary title, table pagination section */
.secondary-title .title-text:after,
.underline:after {
    display: block;
    border-bottom: 1px solid var(--color-underline);
    width: 100%;
    position: absolute;
    bottom: 0;
    content: '';
}

.margin-top-copy-yaml-btn {
    margin-top: -23px;
}

.modal-dialog .secondary-title .title-text:after,
modal-dialog .underline:after {
    border-bottom-color: #d2d8dc;
}

.tw-pagination.underline:after {
    border-bottom-color: #D5D5D1;
}

.secondary-title tw-search-box,
.secondary-title .tw-table-filters,
.secondary-title form {
    flex: 0 1 480px;
    margin-left: 8.33333333%;
}

/*
    cancel previous style for tw-search-box under tw-table-filters
 */
.secondary-title .tw-table-filters tw-search-box {
    flex: auto;
    margin-left: 0px;
}

.secondary-title form {
    display: flex;
    align-items: flex-end;
}

.secondary-title-padding {
    padding-top: 40px;
}

.white-background {
    background-color: white;
}

.tw-autocomplete + ul.dropdown-menu {
    max-height: 150px;
    overflow-y: auto;
    min-width: calc(100% - 30px);
}

.inline-block {
    display: inline-block;
}

.screen-center {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*
 This fixes a bug with the tags-input directive where
 the input placeholder text is cut off if the control
 is initially hidden- (https://github.com/mbenford/ngTagsInput/issues/207)
 See tags-placeholder-fix directive in www/public/js/directives/shared.js for more
*/
.tags-placeholder-fix .tab-content>.tab-pane {
    display: block;
}

.tw-tour {
    width: 500px;
    font-size: 16px;
}

.tw-tour-curtain {
    position: fixed;
    background-color: black;
    opacity: 0.3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.center-curtain-content {
    top: 30%;
    left: 50%;
    position: fixed
}

.tw-tour-dismiss {
    padding: 0 5px;
}

.tw-tour-text {
    padding: 10px;
    white-space: pre-line;
}

.tw-break-long-line,
.flex-item-break-long-line {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.flex-item-break-long-line {
    min-width: 0;
}

.tw-no-text-transform {
    text-transform: none !important
}

.tw-badge {
    display: inline-block;
    min-width: 19px;
    min-height: 19px;
    font-family: "Lato-Semibold";
    font-size: 11px;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
    padding: 2px 8px;
}

.white-border .tw-badge {
    border: solid 1px white;
}

.tw-badge.tw-fixed-circle-badge {
    width: 19px;
    height: 19px;
    padding: 2px 6px;
}

.tw-badge.purple,
.tw-badge.red,
.tw-badge.green,
.tw-badge.light-purple,
.tw-badge.severity-critical,
.tw-badge.severity-high,
.tw-badge.no-severity {
    color: white;
}

.tw-badge.orange,
.tw-badge.yellow,
.tw-badge.severity-medium,
.tw-badge.severity-low {
    color: #333333;
}

.tw-badge.dark-grey {
    color: white;
    background-color: #393D40;
}

.dim-zero.dimmed-badge .tw-badge {
    color: #444444;
    background-color: #777777;
}

.dim-zero.dimmed-badge .tw-badge-text,
.dim-zero.dimmed-badge .tw-badge-text a {
    color: #888888;
}

.defenders-summary .dim-zero.dimmed-badge .tw-badge {
    color: white;
    background-color: #B7B7B7;
}

.defenders-summary .dim-zero.dimmed-badge .tw-badge-text {
    color: #9D9D9D;
}

.tw-badge.light-blue {
    color: white;
    background-color: #00afec;
}

.tw-badge.light-purple {
    background-color: #6100FF;
}

.margin-top-compliance-table-input {
    margin-top: 22px;
}

.tw-modal-left-section {
    padding-right: 40px;
}

.tw-modal-numbering-circle {
    font-family: "Lato-Medium";
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    height: 20px;
    width: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: #636363;
    color: white;
    text-align: center;
    margin-right: 10px;
    padding: 0;
    vertical-align: 6%;
}

.tw-circle-bullet.tw-modal-numbering-circle {
    color: white;
}

.tw-circle-bullet.icon-tw-info-circle {
    font-size: 20px;
}

.tw-bullet-paragraph-indent {
    padding-left: 30px;
    float: left;
    width: 100%;
}

.info-img,
.tw-circle-bullet {
    height: 20px;
    width: 20px;
}

.tw-circle-bullet {
    margin-left: -30px;
    margin-right: 10px;
    float: left;
}

.tw-bullet-paragraph-content {
    font-family: "Lato-Light";
    font-size: 16px;
    float: left;
    width:100%;
}

.twistlock-ui .modal-footer .footer-messages .tw-messages .tw-bullet-paragraph-content {
    float: unset !important;
}

.tw-bullet-paragraph {
    margin-bottom: 4px;
    width: 100%;
    float: left;
}

.paragraph-margin-top.under-paragraph {
    margin-top: 12px;
}

.table-margin-top.under-paragraph {
    margin-top: 20px;
}

.tw-bullet-paragraph-content>.tw-bullet-paragraph {
    margin-top: 30px;
}

.consecutive-paragraphs,
.tw-bullet-paragraph+.tw-bullet-paragraph {
    margin-top: 26px;
}

.tw-bullet-paragraph + .spaced.tw-bullet-paragraph {
    margin-top: 36px;
}

.tw-bullet-paragraph-content>.tw-bullet-paragraph.tight {
    margin-top: 10px;
}

.tw-bullet-paragraph-row {
    margin-bottom: 6px;
    width: 100%;
    float: left;
}

.no-margin-bottom.tw-bullet-paragraph {
    margin-bottom: 0;
}

.align-input-with-bullet-paragraph {
    margin-top: -6px;
}

.align-input-with-subtitle {
    margin-top: 17px;
    margin-bottom: 0;
}

.align-input-with-subtitle.tw-toggle {
    margin-top: 19px;
}

.text-after-icon-margin {
    margin-left: 4px;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-capitalize[st-dropdown-filter] .filter-dropdown-item {
    text-transform: capitalize;
}

.new-line {
    clear: both;
}

.align-narrow-input-to-fullsize-input {
    margin-top: 10px;
}

.align-narrow-input-with-label {
    margin-top: 5px;
}

.tw-enumerable-item .tw-radio-group.align-narrow-input-with-label {
    margin-top: 0px;
}

.under-tab {
    margin-top: 24px;
}

.compliance-extra-details .control-label {
    margin-bottom: 0;
}

.compliance-extra-details {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.table-top-group .left,
.table-top-group .right {
    display: flex;
    align-items: flex-end;
    flex-grow: 1;
}

.table-top-group .left ~ .right {
    flex-grow: 0;
}

.table-top-group .left.align-flex-start {
    align-items: flex-start;
}

.table-top-group .right {
    justify-content: flex-end;
}

.table-top-group .left tw-light-btn {
    margin-right: 8px;
}

.table-top-group .left .control-label {
    margin-right: 16px;
}

.table-top-group .left tw-search-box + .control-label,
.table-top-group .left  .nya-bs-select + .control-label,
.table-top-group .left  tw-light-btn + .control-label {
    margin-left: 20px;
}

.table-top-group .left tw-selector {
    display: inline-flex;
}

.table-top-group .left tw-search-box,
.table-top-group .left .tw-smart-input-wrapper,
.table-top-group .left .nya-bs-select,
.table-top-group .left table-results {
    margin-right: 16px !important;
}

.table-top-group .left .dropdown-menu tw-search-box {
    margin-right: 0px !important;
}

/* Specific icon alignments */
.icon-rule.used,
.icon-allowed-rounded-fill.used {
    color: #3FB34F;
}
.icon-rule.unused,
.icon-allowed-rounded-fill.unused {
    color: #DDDDDD;
}

[tw-compact-error].inline-warning {
    height: 22px;
    font-size: 16px;
}

.tw-thermometer-group {
    display: table;
    text-align: center;
    width: 100%;
}

.tw-thermometer-data-section {
    display: table;
    margin: auto;
    width: 0px;
    transition: width .7s ease-out;
}

.tw-thermometer-placeholder {
    background-color: #E6EAFD;
    height: 8px;
    border-radius: 5px;
    display: table-cell;
}

.tw-thermometer-badge {
    height: 8px;
    display: table-cell;
    min-width: 8px;
}

.tw-thermometer-group .tw-thermometer-badge:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.tw-thermometer-group .tw-thermometer-badge:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.tw-thermometer-value {
    display: table-cell;
    font-family: "Lato-Semibold";
    font-size: 11px;
    min-width: 8px;
}

.tw-table-layout {
    display: table;
}

.tw-table-column-layout {
    display: table-column;
}

.tw-table-row-layout {
    display: table-row;
}

.tw-table-cell-layout {
    display: table-cell;
}

.intelligence-status .tw-table-cell-layout {
    padding-bottom: 12px;
}

.intelligence-status .tw-table-cell-layout+.tw-table-cell-layout+.tw-table-cell-layout {
    padding-left: 20px;
}

.compliance-explorer-graph-title {
    font-family: "Lato-Medium";
    font-size: 26px;
}

.compliance-explorer-overview {
    display: flex;
    justify-content: space-between;
}

.compliance-explorer-overview .topic {
    display: flex;
    flex-direction: column;
}

.compliance-explorer-overview .top-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.compliance-explorer-overview .top-row single-value-doughnut {
    flex: 0 0 132px;
}

.compliance-explorer-overview .top-row .legend {
    flex: 1 1 100%;
    font-size: 18px;
}

.vulnerability-explorer-overview {
    margin-top: 32px;
    margin-bottom: 25px;
}

.vuln-exp-trend-chart {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 390px;
}

.cve-details-box {
    background-color: #FFF6DC;
    padding: 7px;
    font-family: "Lato-Medium";
}

.wide-search-box {
    width: 400px;
}

.flex-basis-460 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 460px;
}

.packages {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 300ms ease-in-out;
}

.packages.expanded.ng-animate {
    overflow: hidden;
}

.packages.expanded {
    max-height: 450px;
    overflow: auto;
}

.page-options-bar.table-top-group {
    padding: 10px;
    border-radius: 3px;
    background-color: white;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    align-items: center;
}

.trends-chart {
    max-width: inherit;
}

.waas-timeline .no-data-chart,
.trends-chart .no-data-chart {
    position: absolute;
    top: 22%;
    left: 20%;
    right: 12%;
    text-align: center;
    font-size: 18px;
    white-space: normal;
}

.waas-timeline .no-data-chart {
    top: 40%;
}

.incidents-trend-chart .trends-chart .no-data-chart {
    font-size: 14px;
}

.trends-chart  .y-label,
.trends-chart  .x-label {
    font-size: 13px;
    font-family: "Lato-Regular";
    color: #9B9B9B;
}

.trends-chart  .x-label {
    text-align: center;
    padding-left: 20px;
}

.trends-chart .legend {
    flex: 0 0 90px;
    margin: 20px 0px 20px 20px;
    font-size: 13px
}

.trends-chart .legend.bottom {
    flex: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 20px;
}

.trends-chart .legend .legend-color-box {
    display: inline-block;
    width: 5px;
    height: 14px;
    margin: 0px 3px 4px 2px;
}

.twistlock-ui .trends-chart .full-width-option.trend-chart-options {
    width: 100%;
}

.twistlock-ui .trends-chart .nya-bs-select.trend-chart-options {
    width: 115px;
}

.vertical-align-middle {
    vertical-align: middle;
}

.vertical-align-top {
    vertical-align: top !important;
}

.tw-line-chart,
.tw-multi-line-chart {
    margin: auto;
}

.tw-line-chart {
    display: flex;
}

.tw-line-chart .chart-background,
.tw-multi-line-chart .chart-background {
    fill: none;
}

.tw-line-chart .axis,
.tw-multi-line-chart .axis {
    font-family: "Lato-Regular";
    fill: #979696;
}

/* Don't display line chart's original drawn axes, nor the axes ticks markings */
.tw-line-chart .axis .domain,
.tw-multi-line-chart .axis .domain,
.tw-line-chart .tick line,
.tw-multi-line-chart .tick line {
    display: none;
}

.width-0-5, .width-1, .width-1-5, .width-2, .width-2-5, .width-3, .width-3-5, .width-4, .width-4-5, .width-5, .width-5-5, .width-6,
.width-6-5, .width-7, .width-7-5, .width-8, .width-8-5, .width-8-2-5, .width-9, .width-9-5, .width-10, .width-10-5, .width-11, .width-11-5, .width-12 {
    float: left;
    position: relative;
    min-height: 1px;
}

.width-offset-0-5 {
    margin-left: 4.16666667%;
}

/* Complements bootstrap's "col-xs-xxx" classes with partial-step increments */
.col-xs-0-5, .col-xs-1-5, .col-xs-2-5, .col-xs-3-5, .col-xs-4-5, .col-xs-5-5,
.col-xs-6-5, .col-xs-7-5, .col-xs-8-5, .col-xs-9-5, .col-xs-10-5, .col-xs-11-5 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.width-12 {
    width: 100%;
}
.width-11 {
    width: 91.66666667%;
}
.width-10 {
    width: 83.33333333%;
}
.width-9 {
    width: 75%;
}
.width-8 {
    width: 66.66666667%;
}
.width-7 {
    width: 58.33333333%;
}
.width-6 {
    width: 50%;
}
.width-5 {
    width: 41.66666667%;
}
.width-4 {
    width: 33.33333333%;
}
.width-3 {
    width: 25%;
}
.width-2 {
    width: 16.66666667%;
}
.width-1 {
    width: 8.33333333%;
}

.width-0-5,
.col-xs-0-5 {
    width: 4.16666667%;
}

.width-1-5,
.col-xs-1-5 {
    width: 12.5%;
}

.width-2-5,
.col-xs-2-5 {
    width: 20.83333333%;
}

.width-3-5,
.col-xs-3-5 {
    width: 29.16666667%;
}

.width-4-5,
.col-xs-4-5 {
    width: 37.5%;
}

.width-5-5,
.col-xs-5-5 {
    width: 45.83333333%;
}

.width-6-5,
.col-xs-6-5 {
    width: 54.16666667%;
}

.width-7-5,
.col-xs-7-5 {
    width: 62.5%;
}

.width-8-5,
.col-xs-8-5 {
    width: 70.83333333%;
}

.width-9-5,
.col-xs-9-5 {
    width: 79.16666667%;
}

.width-10-5,
.col-xs-10-5 {
    width: 87.5%;
}

.width-11-5,
.col-xs-11-5 {
    width: 95.83333333%;
}

.col-xs-offset-1-5 {
    margin-left: 12.5%;
}

.table-top-group .left > tw-selector {
    width: 267px;
}

@media (min-width: 1400px) {
    .tw-col-xxl-12 {
        width: 100%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .table-top-group .left tw-search-box input.tw-search-box,
    .table-top-group tw-search-box,
    .twistlock-ui .table-top-group .nya-bs-select {
        width: 267px;
    }

    .table-top-group .left tw-search-box.wide-top-group-input input.tw-search-box,
    .table-top-group .left tw-search-box.wide-top-group-input {
        width: 340px;
    }

    .table-top-group .left tw-multibox-dropdown input.tw-search-box,
    .table-top-group tw-multibox-dropdown tw-search-box {
        width: 180px;
    }
}

/* change the radar's topbar view */
@media (max-width: 1590px) {
    /* topology topbar selection changes */
    .table-top-group.topology-top-bar .nya-bs-select {
        margin-right: 8px;
    }

    .twistlock-ui .table-top-group.topology-top-bar .nya-bs-select .dropdown-toggle,
    .twistlock-ui .table-top-group.topology-top-bar .nya-bs-select .dropdown-toggle .filter-option {
        padding-right: 8px;
    }

    /* topology topbar filters input changes */
    .table-top-group.topology-top-bar .radar-filters-group {
        flex: 1 0 242px;
        margin-right: 8px;
    }

    .table-top-group.topology-top-bar .radar-filters-group:not(.wide) tags-input {
        width: 242px;
    }

    .table-top-group.topology-top-bar .radar-filters-group tags-input .tags {
        padding-left: 4px;
    }

    .table-top-group.topology-top-bar .tw-button.show-filters-btn .btn-content {
        padding: 4px 8px;
    }

    /* topology topbar search changes */
    .table-top-group.topology-top-bar .search-radar tw-search-box {
        width: 200px;
    }
}

/*
Confirmation Dialog
*/
.modal-header.tw-confirm-delete-dialog-header {
    background-color: #eff58c;
    padding-bottom: 10px;
}


.tw-confirm-dialog-header {
    vertical-align: middle;
}

.tw-confirm-delete-dialog-header .tw-confirmation-dialog-icon {
    color: #333333;
    margin: 0px 8px 2px 9px;
}

.tw-confirm-delete-warning {
    margin-top: 10px;
    font-size: 14px;
    display: flex;
}


.tw-confirm-delete-warning .tw-confirmation-dialog-icon {
    color: #333333;
    font-size: 38px;
    margin-right: 10px;
}

.tw-confirmation-dialog-warning {
    margin-top: 15px;
    font-size: 12px;
    margin-bottom: 20px;
    font-family: "Lato-Semibold";
    display: flex;
}

.tw-confirmation-dialog-warning .tw-confirmation-dialog-icon {
    color: #333333;
    font-size: 32px;
    margin-right: 10px;
}

.tw-dialog-indented {
    margin-left: 46px;
}

/*
Topology
*/
.topology-dialog {
    font-family: "Lato-Regular";
    font-size: 16px;
    overflow: hidden;
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.twistlock-ui.gray-modal-layout .tw-dialog-body a {
    color: var(--color-highlight-3);
    text-decoration: underline;
}

.topology-dialog a {
    color: var(--color-highlight-3);
}

.topology-dialog .header a {
    text-decoration: underline;
}
.topology-dialog .header a:hover {
    color: var(--color-hover-3);
}
.topology-dialog .header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topology-dialog .incident-information a {
    color: white;
}

.topology-dialog .topology-dialog-title {
    background-color: var(--background-color-tw-dialog-header);
    color: var(--color-highlight-3);
    padding: 12px 120px 12px 32px;
    font-size: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    align-items: center;
    width: 100%;
    display: inline-flex;
    font-family: "Lato-Semibold";
    flex-shrink: 0;
    min-height: var(--height-topology-modal-header);
}

.topology-dialog .topology-dialog-title .topology-title-text,
.topology-dialog .topology-dialog-title .incident-information {
    margin-right: 40px;
    height: 36px;
    margin-left: 0px;
}

.selected-risk {
    background-color: #525659;
    padding: 5px 70px 5px 10px;
    min-height: 175px;
}

.serverless-radar-dialog .selected-risk {
    padding: 0px 9px 5px 10px;
}

.twistlock-ui.gray-modal-layout .tw-dialog-header.no-icon,
.topology-dialog .topology-dialog-title.no-icon {
    padding: 12px 120px 12px 30px;
}

.twistlock-ui.gray-modal-layout .tw-dialog-header h4 {
    padding: 0px;
    font-size: 24px;
}

.topology-dialog h5 {
    margin-bottom: 2px;
    margin-top: 2px;
}

.topology-dialog-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 16px;
}

.topology-dialog .topology-dialog-icon {
    width: 34px;
    height: 34px;
    line-height: 34px;
}

.topology-dialog .topology-dialog-details {
    padding: 32px;
    background-color: var(--background-color-tw-dialog);
    height: 100%;
}

.topology-dialog .topology-dialog-details .tw-smart-input,
.topology-dialog .topology-dialog-details .tw-smart-input input,
.topology-dialog .topology-dialog-details .tw-smart-input .options,
.topology-dialog .topology-dialog-details .tw-smart-input .options .list .opt.hint {
    background-color: #515151;
    color: white;
}

.topology-dialog .topology-dialog-details .tw-smart-input:not(.focused) {
    border: 1px solid #515151;
}

.topology-dialog .topology-dialog-details .tw-smart-input-wrapper .icon-help {
    color: #D4D4D4;
}

.topology-dialog .topology-dialog-details .tw-smart-input:hover,
.topology-dialog .topology-dialog-details .tw-smart-input.focused,
.topology-dialog .topology-dialog-details .tw-smart-input .options {
    border: 1px solid var(--color-highlight-3);
}

.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag,
.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag .option-text {
    --background-color-tag: #717171;
    --background-color-tag-blink: #626262;
}

.topology-dialog .topology-dialog-details .tw-smart-input .options {
    max-height: calc(var(--height-topology-modal-body) / 2);
}

.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag,
.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag .option-text {
    color: white;
    font-family: "Lato-Bold";
}

.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag.selected,
.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag.selected .option-text {
    background: #949494;
}

.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag .text,
.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag .not-label {
    color: #D8D8D8;
}

.topology-dialog .topology-dialog-details .tw-smart-input .icon-filter.active,
.topology-dialog .topology-dialog-details .tw-smart-input .tags .tag .remove-button {
    color: var(--color-highlight-3);
}

.topology-dialog .topology-dialog-details .tw-smart-input .options .list .opt:hover {
    background-color: #565656;
}

.topology-dialog .topology-dialog-details .tw-smart-input .options .list .opt.hovered,
.topology-dialog .topology-dialog-details .tw-smart-input .options .list .opt.hovered:hover {
    background-color: #606060;
}

.space-evenly {
    justify-content: space-evenly
}

.justify-content-end {
    justify-content: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.topology-dialog .topology-dialog-details.topology-more-details {
    padding: 30px;
    flex-wrap: wrap;
}

.topology-dialog.user-defined-entity .topology-dialog-details,
.topology-dialog.entity-link-info .topology-dialog-details {
    font-family: "Lato-Semibold";
    padding: 30px;
}

.topology-dialog.undeployed-sites .topology-dialog-details {
    padding: 30px;
    font-size: 16px;
}

.topology-dialog .connection-graph {
    display: flex;
    flex-direction: row;
    height: 75px;
    background-color: #494949;
    padding: 10px 30px;
    align-items: center;
    font-family: "Lato-Semibold";
    justify-content: space-between;
}

.topology-dialog .tw-button.primary.btn-delete-connection {
    background-color: #494949;
    color: white;
    border-color: white;
}

.topology-dialog .tw-button.primary.btn-delete-connection:hover {
    background-color: white;
    border-color: #494949;
    color: #494949;
}

.entity-link-info .entity-link-info-arrow {
    padding: 0px 24px;
    font-size: 35px;
}

.entity-link-name {
    padding-left: 5px;
    font-size: 20px;
}

.flat-tabs {
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 4px;
}

.flat-tabs .tab-label {
    margin-left: 30px;
    cursor: pointer;
}

.flat-tabs .tab-label:hover {
    color: #999999;
    border-bottom: 3px solid;
    border-bottom-color: #999999;
}

.flat-tabs .selected {
    border-bottom: 3px solid #CCCCCC;
}

.topology-dialog .topology-dialog-details .bottom-details {
    flex: none;
    height: 170px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
}

.twistlock-ui table.topology-dialog-table tbody td {
    background: none;
    border: none;
    padding: 0;
    vertical-align: top;
}

.twistlock-ui table.topology-dialog-table,
.twistlock-ui table.topology-dialog-table tbody tr {
    background: none;
}

.topology-dialog .connection-data {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--background-color-tw-dialog);
    font-family: "Lato-Semibold";
    padding: 25px 35px;
}

.topology-dialog .monitored-ports .item-title {
    min-width: 220px;
}

.topology-dialog .monitored-ports .port-list {
    max-width: 500px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.topology-dialog .topology-dialog-details .top-details {
    flex-shrink: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.topology-dialog .topology-dialog-details .service-details {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.topology-dialog .item-content.service-description {
    max-height: 110px;
    overflow-y: auto;
}

.topology-dialog .top-services {
    max-width: 750px;
}

.topology-dialog .cloud-compliance-details {
    min-width: 200px;
    padding-right: 20px;
}

.topology-dialog .service-details .details-item {
    max-width: 500px;
    display: inline-flex;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 10px;
}

.topology-dialog .service-details .monitored-ports .details-item {
    max-width: 600px;
}

.topology-dialog .service-details .details-list {
    max-width: 500px;
    display: inline-flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 10px;
}

.topology-dialog .service-details .details-list.monitored-ports {
    max-width: 600px;
}

.topology-dialog .top-details .details-item {
    max-width: 360px;
    display: inline-flex;
}

.twistlock-ui.gray-modal-layout .tw-dialog-body .control-label,
.topology-dialog .item-title {
    color: #C4C4C4;
    font-family: "Lato-Regular";
}

.details-title {
    color: white;
    font-family: "Lato-Regular";
    min-width: 150px;
}

.topology-dialog .item-title {
    min-width: 150px;
}

.topology-dialog .item-content {
    vertical-align: top;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    margin-right: 5px;
}

.topology-dialog .topology-dialog-table.internet-info {
    flex-shrink: 0;
    padding-right: 15px;
    font-size: 14px;
    border: none;
}

.topology-dialog-table .inner-table {
    table-layout: fixed;
}

.topology-dialog-table .inner-table td {
    word-break: break-all;
    vertical-align: top;
    white-space: normal;
    overflow: hidden;
}

.twistlock-ui table.topology-dialog-table tbody td .inner-table td {
    padding-right: 5px;
}

.twistlock-ui .tw-page-footer {
    text-align: right;
    margin-top: 30px;
    margin-bottom: 30px;
}

.twistlock-ui .tw-page-footer .btn {
    margin-left: 5px;
}

.radar-bottom-right-buttons {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
    right: 32px;
    bottom: 16px;
}

.topology-details-table {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.entity-link-info .header,
.topology-dialog-details .header {
    font-family: "Lato-Semibold";
    font-size: 20px;
    color: var(--color-highlight-3);
}

.color-gray,
.entity-link-info .header.gray,
.topology-dialog-details .header.gray {
    color: #CCCCCC;
}

.topology-details-table .tw-table-cell-layout {
    padding: 5px 5px 0 0;
}

.topology-details-table .tw-table-layout {
    padding-right: 15px;
}

.tw-map-solid-background {
    background-color: var(--background-color-main);
}

.tw-map-gradient-background {
    background: linear-gradient(#F0F8FF, #DDEEFD);
}

.radar-background,
#topology {
    position: relative;
    background:
            linear-gradient(90deg, var(--background-color-main) 10px, transparent 1%) center,
            linear-gradient(var(--background-color-main) 10px, transparent 1%) center, #E4E0E0;
    background-size: 12px 12px;
    top: var(--top-topology-background);
}

.topology-top-bar {
    top: var(--top-topology-topbar);
    position: absolute;
    z-index: var(--z-index-topology-topbar);
    font-size: 14px;
    font-family: "Lato-Semibold";
    right: calc(var(--padding-side-topbar-menu) + 10px);
    display: flex;
    width: calc(100% - (2 * var(--padding-side-topbar-menu)) - 15px);
}

.topology-icon {
    color: #CCCCCC;
    padding-bottom: 10px;
    padding-right: 10px;
}

.scrollable-topology-dialog {
    height: 290px;
}

.unprotected-information,
.incident-information {
    align-items: center;
    display: inline-flex;
    padding: 8px;
    background-color: var(--background-color-incident-information);
    font-size: 16px;
    color: white;
    margin-left: 20px;
    line-height: 16px;
}

.unprotected-information {
    margin-left: 0px;
    margin-right: 20px;
    padding: 4px 8px;
}
.unprotected-information .bold-link-text {
    color: white;
    font-size: 16px
}
.unprotected-information .bold-link-text:hover {
    color: #D4D4D4;
}

.unprotected-information .incident-icon,
.incident-information .incident-icon {
    margin-right: 10px;
    font-size: 16px
}
.unprotected-information .incident-text {
    margin-right: 10px;
}

.incident-information .pointer {
    margin-left: 5px;
}

.incident-radar-unavailable {
    align-items: center;
    justify-content: center;
    top: 40%;
    font-size: 16px;
    font-family: "Lato-Light";
    color: #333333;
}

.incident-radar-unavailable-icon {
    font-size: 22px;
}

.alert-types {
    display: flex;
}

.alert-types div {
    margin-right: 15px;
}

.host-dialog-details {
    display: grid;
    grid-column-gap: 1%;
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}

.topology-dialog .tl-scrollable-container::-webkit-scrollbar {
    width: 4px;
}

.topology-dialog .tl-scrollable-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.topology-dialog .tl-scrollable-container::-webkit-scrollbar-thumb {
    background-color: #717171;
    border-radius: 4px;
}

.topology-dialog .sidebar-body-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #717171;
}
/*
End topology
*/

.twistlock-ui .toggle-inline-with-subtitle {
    margin-top: -42px;
    float: right;
    display: inline;
}

@media (min-width: 1500px) {
    .alerts-settings {
        grid-template-columns: 1fr 1fr;
    }
}

.alert-options-container .tl-scrollable-flexible-container {
    max-height: 600px;
}
.alert-options-rules {
    background-color: white;
    max-height: 110px;
    overflow-y: auto;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 10px;
}
.alert-options-edit-box {
    background-color: #EBEBEB !important;
}
.alert-options-rules-heading {
    font-family: 'Lato-Medium';
}

.uppercase-text {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* This is needed on grid items so that overflow-wrap from parent grid can take effect */
.grid-overflow-wrapper {
    min-width: 0;
}

.incident-dialog {
    font-family: "Lato-Regular";
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #898989;
    border-left: 6px solid #EE1C25;
}

.incident-dialog .details {
    overflow-y: auto;
    word-break: break-word;
    max-height: 100px;
}

.backup-table {
    height: 260px;
}

.incident-overview {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr 1fr;
    grid-template-rows: auto;
}

.incident-visualisation {
    display: grid;
    grid-template-columns: 1000px 1fr;
    grid-gap: 80px;
}

.incidents-popup .incident-visualisation {
    display: block;
}

.incidents-popup .incident-dialog {
    margin-bottom: 10px;
}

/*
Need to set the width explicitly in the CSS so that the svg element width calculated in the JS will be correct,
not depending on angular scope variables
*/
.incident-visualisation #canvas {
    flex-grow: 1;
}

@media (max-width: 1500px) {
    .incident-visualisation {
        grid-template-columns: 1000px;
    }
}

.incident-title .container-name {
    word-break: break-all;
}

.incident-title .icon-crosshair {
    font-size: 20px;
}

.incident-title .icon-server,
.incident-title .icon-container-shaded {
    font-size: 35px;
}

.incident-description {
    background-color: #D51B27;
    color: white;
    padding: 15px;
    font: 14px 'Lato-Medium';
    display: flex;
    border-right: 4px dotted white;
    align-items: center;
}

.incident-description .support-link {
    font-size: 16px;
    color: inherit;
    text-decoration: underline;
}

.incident-title {
    display: flex;
    align-items: center;
    background-color: #B3141E;
    color: white;
    font-family: "Lato-Regular";
    font-size: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 15px;
    border-right: 4px dotted white;
}

.incident-title .icon {
    flex: 50px 0 0;
    font-size: 40px;
}

.twistlock-ui table.tight-pagination td.pagination-row {
    padding-top: 15px;
    padding-bottom: 10px;
}

.incident-title .value {
    font-family: "Lato-Semibold";
}

.incident-info {
    padding: 10px;
    background-color: #666666;
    color: white;
    font-family: "Lato-Regular";
    font-size: 14px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-right: 4px dotted white;
}

.incident-info .icon {
    flex: 40px 0 0;
    font-size: 19px;
    text-align: center;
    line-height: 19px;
}

.incident-info .icon.icon-container-shaded {
    font-size: 15.2px;
}

.incident-info .icon.icon-hashtag {
    font-size: 17px;
}

.incident-info .info-label {
    flex: 140px 0 0;
}

.incident-info .value {
    color: white;
    font-family: "Lato-Semibold";
    text-decoration: underline;
    cursor: pointer;
}

.incident-info .value.removed-entity {
    text-decoration: none;
    color: #CCCCCC;
    pointer-events: none;
}

.incident-info .value.removed-entity:after {
    content: ' (Removed)';
    font-size: 12px;
}

.incident-forensics-button {
    font-family: "Lato-Medium";
    color: white;
    font-size: 14px;
    background-color: #898989;
    text-align: center;
    padding: 6px;
    flex: 158px 0 0;
    margin-left: 12px;
    border: 1px solid white;
    border-radius: 4px;
    line-height: 1.2em;
}

.incident-forensics-button.disabled {
    color: #CA9E9C;
    border-color: #CA9E9C;
    background-color: #BD757A;
}

.incident-forensics-button:hover {
    background-color: #444444;
}

.incident-forensics-button .tw-hover,
.incident-forensics-button .tw-default {
    color: inherit;
    font-size: 36px;
}

.incident-forensics-button:not(:hover) .tw-hover,
.incident-forensics-button:hover .tw-default{
    display: none;
}

.incident-forensics-button .tw-spinner {
    font-size: 26px;
    padding: 5px;
}

.incident-snapshot {
    padding: 15px;
    background-color: #E1DDDD;
    color: #333333;
    font: 16px "Lato-Medium";
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.incident-time {
    display: flex;
    align-items: center;
}

.incident-time .icon {
    flex: 40px 0 0;
    text-align: center;
    font-size: 28px;
}

.forensic-time-ago {
    background-color: #ECEEF0;
    display: inline-flex;
    align-items: center;
}

.forensic-event-card {
    background-color: #ECEEF0;
    overflow-x: hidden;
}

.forensic-event-card-title {
    background-color: #393D40;
    color: white;
    font-family: "Lato-Medium";
    font-size: 24px;
    height: 40px;
    display: flex;
    align-items: center;
}

.tw-help-circle {
    width: 20px;
}

.twistlock-ui tr.selected-row,
.twistlock-ui tr.selected-row td,
.twistlock-ui tr.table-hover.selected-row:hover,
.twistlock-ui tr.table-hover.selected-row:hover td,
.twistlock-ui tr.clickable-row.selected-row:hover,
.twistlock-ui tr.clickable-row.selected-row:hover td,
.selected-row .tw-table-icon,
.selected-row .tw-table-icon .tw-hover {
    background-color: #D3E8FC;
    color: #000000;
    font-family: 'Lato-Semibold';
}

.drag-area {
    cursor: -webkit-grab;
    cursor: grab;
}

.drag-area:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/*
Docker file instructions
*/
section.tw-dockerfile {
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: monospace;
    padding: 10px 20px;
    font-size: 0.75em;
    line-height: 1.35em;
    color: #959595;
}

.tw-instruction {
    list-style: none;
    padding: 0;
}

.highlight-cmd {
    color: var(--color-highlight-2);
}

.tw-overflow-ellipsis {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.tw-ace-editor {
    height: 300px;
}

.tw-ace-editor.ace_editor {
    font-size: 16px;
}

.tw-cmd-bg {
    background: #333333;
}
/*
End docker file instructions
*/

.select-all-item {
    margin-top: 0 !important;
}

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

.white-space-pre,
.table-fixed-column-width td.white-space-pre {
    white-space: pre;
}

.white-space-pre-wrap {
    white-space: pre-wrap;
}

.ws-normal,
td.ws-normal {
    white-space: normal;
}

.tw-status-row-icon {
    margin-right: 8px;
    line-height: 1em;
    align-self: flex-start;
}

.tw-defender-status-row {
    display: flex;
    align-items: center;
}

.radar-zoom-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#topology.basic-radar,
.radar-background.basic-radar {
    top: 0px;
}

.basic-radar.radar-zoom-buttons {
    position: absolute;
    right: 10px;
    bottom: 16px;
}

.radar-filter-line:hover {
    background-color: rgba(0, 0, 255, 0.2) !important;
}

.layer-cve-collapse {
    width: 95%;
    padding-left: 5%;
}

.twistlock-ui table tbody td.non-expandable {
    padding-left: 29px;
    cursor: text;
}

.twistlock-ui table tbody td:not(.non-expandable) .layer-date {
    padding-left: 21px;
}

.layer-date {
    font-size: 12px;
    color: grey;
    display: flex;
    justify-content: space-between;
}

.diff-viewer {
    max-height: 420px;
    overflow-y: auto;
}

.log-added,
.log-removed {
    /* Let the text behave like a <table> element highlighting the entire row */
    display: table;
}

.log-removed {
    background-color: #FFE0E5;
}

.log-added {
    background-color: #DFFFD7;
}

.risk-factor-icon {
    color: #EE1C25;
}

.risk-factor-icon.icon-allowed-rounded {
    color: #39B54A;
}

.twistlock-ui .form-group .filter-dropdown-item .tw-checkbox {
    margin-top: 0;
}

.thin-divider {
    margin-top: 15px;
    margin-bottom: 15px;
    border: none;
}

.auto-overflow-ellipsis,
.twistlock-ui .tw-tags-filter tags-input .tags .tag-item ng-include span[ng-bind],
.twistlock-ui .tw-smart-input .tags .tag .text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.twistlock-ui .modal-body .plain-text-form .control-label {
    padding-top: 0;
}

.form-horizontal.plain-text-form .row {
    margin-bottom: 4px;
}

.twistlock-ui table tbody td.app-firewall-ip img {
    padding-right: 5px;
}

.twistlock-ui table tbody td.app-firewall-ip span {
    font-size: 13px;
    display: inline;
}

.vuln-desc-width-limit {
    max-width: 310px;
}

/* Projects dropdowns */
.nya-bs-select.projects-dropdown div.dropdown-menu > ul {
    width: 100%;
    max-height: 432px;
    overflow-y: auto;
}

.nya-bs-select.projects-dropdown div.dropdown-menu {
    width: 100%;
}
.nya-bs-select.projects-dropdown div.dropdown-menu a {
    display: flex;
    align-items: center;
}
.topology-top-bar .nya-bs-select {
    margin-right: var(--padding-side-topbar-menu);
    max-width: var(--width-topology-selector);
    background: white;
    height: 32px;
}

.nya-bs-select.projects-dropdown div.dropdown-menu .check-mark.align-left {
    /* settings a display inline for all check marks in the dropdown menu */
    visibility: hidden;
    display: inline;
}
.nya-bs-select.projects-dropdown div.dropdown-menu .nya-bs-option.selected .check-mark.align-left {
    /* settings visibility: visible to retain element width */
    visibility: visible;
    position: relative;
    display: inline;
    margin-top: 0px;
    right: 0;
}
.nya-bs-select.projects-dropdown div.dropdown-menu .align-left {
    top: 0px;
    position: relative;
    padding-right: 7px;
    margin-top: 0px;
    right: 0;
}

/* Projects popup list selector */
.tw-project-selector {
    position: absolute;
    left: 232px;
    top: 14px;
    background-color: var(--background-color-sidebar);
    color: var(--color-sidebar);
    box-shadow: 2px 4px 8px -2px #BBBBBB;
    outline: none;
    border-radius: 3px;
}

.tw-project-selector-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.sidebar-closed .tw-project-selector {
    left: 78px;
}

.projects-list-item {
    height: 40px;
    width: 100%;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Lato-Regular";
    padding-left: 20px;
    white-space: nowrap;
}

.projects-list-item:hover {
    background-color: var(--background-color-sidebar-hover);
    color: white;
    cursor: pointer;
}

.projects-list-item:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.projects-list-item:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.projects-list-item:first-child:after {
    content: '';
    position: absolute;
    top: 7px;
    left: -12px;
    display: inline-block;
    border-right: 12px solid var(--background-color-sidebar);
    border-bottom: 12px solid transparent;
    border-top: 12px solid transparent;
}

.projects-list-item:first-child:hover:after {
    border-right: 12px solid var(--background-color-sidebar-hover);
}

.projects-list-item > .check-mark {
    width: 40px;
    text-align: center;
    justify-self: flex-end;
}

div.nya-bs-select.text-capitalize .btn.dropdown-toggle {
    text-transform: capitalize;
}

.hidden-transition {
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}

.visible-transition {
    opacity: 1;
    transition: 1s;
}

.hidden-transition.visible-transition {
    opacity: 1;
    visibility: visible;
}

.user-select-none {
    user-select: none;
}

.icon-forbidden:before {
    margin-right: 3px;
}

.top-150 {
    top: 150px;
}

.tw-dialog-error {
    display: flex;
    align-items: center;
}

.table-fixed-column-width .tw-dialog-error {
    white-space: normal;
}

.tw-dialog-error.inline {
    display: inline-flex;
}

.tw-dialog-error .icon {
    font-size: 1.6em;
    line-height: 1em;
}

.compliance-extra-details .tw-dialog-error .icon {
    font-size: 1.4em;
}

.tw-dialog-error .text {
    font-family: "Lato-Regular";
    text-transform: none;
    margin-bottom: -0.1em;
    text-align: left;
}

.table .tw-dialog-error .text {
    font-size: 14px;
}

.padding-top-3 { padding-top: 3px; }
.padding-top-5 { padding-top: 5px; }
.padding-top-10 { padding-top: 10px; }
.padding-top-16 { padding-top: 16px; }
.padding-top-40 { padding-top: 40px; }

.padding-bottom-10 { padding-bottom: 10px; }
.padding-bottom-105 { padding-bottom: 105px; }

.padding-right-5 { padding-right: 5px; }
.padding-right-10 { padding-right: 10px; }
.padding-right-15 { padding-right: 15px; }
.padding-right-40 { padding-right: 40px; }
.padding-right-45 { padding-right: 45px; }

.padding-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.small-input {
    width: 60px;
}

.margin-left-5 { margin-left: 5px; }
.margin-left-10 { margin-left: 10px; }
.margin-left-15 { margin-left: 15px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-40 { margin-left: 40px; }
.margin-left-70 { margin-left: 70px; }

.margin-left-auto { margin-left: auto; }
.margin-right-auto { margin-right: auto; }

.padding-left-4 { padding-left: 4px; }
.padding-left-8 { padding-left: 8px; }
.padding-left-10 { padding-left: 10px; }
.padding-left-15 { padding-left: 15px; }
.padding-left-20 { padding-left: 20px; }
.padding-left-25 { padding-left: 25px; }
.padding-left-30 { padding-left: 30px; }

.nya-bs-select.form-control.margin-bottom-12,

.margin-bottom-4 { margin-bottom: 4px; }
.margin-bottom-6 { margin-bottom: 6px; }
.margin-bottom-8 { margin-bottom: 8px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-12 { margin-bottom: 12px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-16 { margin-bottom: 16px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-24 { margin-bottom: 24px; }
.margin-bottom-40 { margin-bottom: 40px; }

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flexed-wrapper {
    flex: 1 1 100%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-shrink-auto {
    flex: 0 1 auto;
}

.flex-none {
    flex: none;
}

.flex-align-center {
    align-items: center;
}

.flex-align-baseline {
    align-items: baseline;
}

.table-top-group.flex-align-stretch,
.flex-align-stretch {
    align-items: stretch;
}

.warning-paragraph {
    background-color: #EFF58C;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 13px;
}

.warning-paragraph .icon-TWI-UI-warning {
    font-size: 37px;
    padding-right: 10px;
}
tw-td {
    display: table-cell;
}
.actions-btn:hover,
.actions-btn:focus {
    background-color: transparent;
}
.actions-popover {
    background-color: #333333;
    color: white;
    border-radius: 0;
    padding: 4px 16px;
}
.actions-popover.popover {
    max-width: none;
    border-radius: 4px
}
.actions-popover.popover > .arrow:after {
    border-left-color: #333333;
}
.actions-popover .popover-content {
    display: flex;
    padding: 0;
    font-family: "Lato-Regular";
    height: 61px;
}
.actions-popover .btn {
    background-color: transparent;
    height: 100%;
    width: 100%;
    padding: 6px 8px;
}

.actions-popover .disabled-section,
.actions-popover .disabled-section .text {
    color: var(--color-disabled);
    opacity: 0.5;
}

.actions-popover .btn .text {
    color: #FFFFFF;
    font-size: 14px;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.selector-dropdown .search-bar {
    border-bottom-color: var(--color-underline);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: flex;
}
.selector-dropdown .search-bar tw-search-box {
    flex-grow: 1;
}
.selector-dropdown .search-bar tw-search-box > input {
    border-bottom-width: 0px;
}
.selector-dropdown .search-bar .selector-add-btn {
    margin: 5px 5px 5px 5px;
    text-transform: none;
}

.twistlock-ui tw-selector .selector-item {
    display: flex;
    justify-content: space-between;
}

.clear-selection-icon {
    width: 16px;
    height: 16px;
    align-self: center;
    color: #B4BFC5;
    cursor: pointer;
}

.twistlock-ui tw-selector {
    position: relative;
}

.twistlock-ui tw-selector > .clear-selection-icon {
    position: absolute;
    top: calc(50% - 7px);
    right: calc(var(--right-nya-bs-select-caret) + 19px);
}

.clear-selection-icon:hover {
    color: var(--color-highlight-1);
}

tw-search-box .clear-selection-icon {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 8px;
}

.tw-radar-filters .filter-search tw-search-box .clear-selection-icon {
    bottom: 5px;
    right: 5px;
}

.search-radar tw-search-box .clear-selection-icon {
    right: 8px;
}

.twistlock-ui tw-selector .selector-edit-icon {
    text-align: center;
    align-self: center;
    flex-shrink: 0;
}

.twistlock-ui tw-selector .selector-edit-icon:hover {
    color: #93A0CE;
}

/* display the edit icon only in a dropdown option container */
twistlock-ui tw-selector .dropdown-toggle .selector-edit-icon {
    display: none;
}

td.actions-column,
td.overflow-visible-column {
    overflow: visible;
}

.defender-upgrade-text {
    color: #888888;
}

.display-block {
    display: block;
}

.tw-istio-items-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1.8em;
    margin-top: 10px;
}

.credential-type-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
}

.k8s-list-no-style {
    list-style: none;
    margin: 0;
    padding: 0;
}

.k8s-resource-names-list {
    color: #666666;
}

.topology-dialog .item-content.break-word,
.break-word {
    word-break: break-word;
}

.margin-top-6 {
    margin-top: 6px;
}

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

.margin-top-12 {
    margin-top: 12px;
}

.margin-top-16 {
    margin-top: 16px;
}

.margin-top-24 {
    margin-top: 24px;
}

.margin-top-49 {
    margin-top: 49px;
}

.table-margin-top {
    margin-top: 24px;
}

.paragraph-margin-top {
    margin-top: 16px;
}

.upgrade-required-btn {
    font-size: 0.8em;
    cursor: pointer;
    user-select: none;
}
.text-transform-none,
.tw-messages {
    text-transform: none;
}

.tw-messages .message + .message {
    margin-top: 6px;
}

.tw-messages .tw-bullet-paragraph-content {
    font-family: "Lato-Regular";
}

.align-to-control-label {
    margin-top: 6px;
}

.bold-link-text.align-to-control-label {
    margin-top: 7px;
}

.form-input-box {
    background-color: #F1F1F1;
    padding-top: 15px;
    padding-bottom: 15px;
}

.form-input-box tags-input .tags {
    background-color: unset;
}

.form-horizontal .form-input-box {
    padding-left: 15px;
    padding-right: 15px;
}

.form-group.no-side-margin {
    margin-right: 0px;
    margin-left: 0px;
}

.form-input-box.append-to-table {
    margin-top: -22px;
}

.form-input-box.collapsing {
    transition-duration: 250ms;
}

.form-input-box-title {
    font-family: "Lato-Regular";
    font-size: 22px;
}

.ng-hide-transition.ng-hide-add {
    opacity: 1;
    transition: opacity linear 200ms;
}

.ng-hide-transition.ng-hide-add-active {
    opacity: 0;
}

.ng-hide-transition.ng-hide-remove {
    opacity: 0;
    transition: opacity linear 500ms;
}

.ng-hide-transition.ng-hide-remove-active {
    opacity: 1;
}

.upload-log-message {
    margin-top: -10px;
}

.highlighted-row {
    background-color: #E3EBF9;
}

.highlighted-row .tw-checkbox {
    background-color: #E3EBF9;
}

.highlighted-row.clickable-row:hover .tw-checkbox {
    background-color: var(--color-table-hover);
}

.top-row.clickable-row:hover {
    cursor: default;
}

.grab-handle {
    cursor: pointer;
}

.gu-mirror .grab-handle {
    cursor: move;
}

[disabled] .grab-handle {
    pointer-events: none;
}

/* custom styles for Dragula mirror element
    see: https://github.com/bevacqua/dragula#user-content-css
*/
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    display: table;
    table-layout: fixed;
    font-size: 14px;
    font-family: "Lato-Medium";
    cursor: move;
    padding-left: 0px;
    padding-right: 0px;
}

.gu-mirror td {
    display: table-cell;
    border-top: 1px solid #A5B2B9;
    border-bottom: 1px solid #A5B2B9;
    vertical-align: middle;
    padding: 5px 15px
}

.gu-hide {
    display: none !important;
}

.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.gu-transit {
    opacity: 0;
}

.tw-top-tabs-drawer {
    background-color: white;
    margin-bottom: 16px;
    position: relative;
    padding: 16px;
    display: flex;
    border: 1px solid var(--color-border-section);
    z-index: var(--z-index-tw-top-tabs-drawer);
}

.tw-top-tabs-drawer .show-all-link {
    flex: 0 0 65px;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 0px 8px 8px;
    text-decoration: none;
    font-family: "Lato-Medium";
    display: flex;
}

.tw-top-tabs-drawer.closed {
    height: 66px;
}

.tw-top-tabs-drawer .content,
.tw-top-tabs-drawer .tw-tabset {
    width: 100%;
}

.tw-top-tabs-drawer .tw-tabset .event-category {
    flex: 0 0 110px;
    font-family: "Lato-Bold";
    padding-top: 4px;
    line-height: 20px;
}

.tw-top-tabs-drawer .content .tw-button {
    background: #EAEAEA;
    padding: 4px 8px;
    height: 28px;
    margin-bottom: 8px;
    margin-right: 4px;
    color: #333333;
}

.tw-top-tabs-drawer .content .tw-button:active {
    /* remove default shadow of .btn:active */
    box-shadow: none;
}

.tw-top-tabs-drawer .content .tw-tabset .tw-button.emphasis:after {
    position: relative;
    display: block;
    content: '';
    background: #EB212E;
    border-color: #F7F7F7;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    height: 12px;
    width: 12px;
    bottom: 37px;
    left: calc(100% + 5px);
}

.tw-top-tabs-drawer .content .tw-button:hover {
    background: #E2EFFB;
    border: 1px solid #E2EFFB;
}

.tw-top-tabs-drawer .content .tw-button.selected {
    background: var(--color-active-primary-button);
    border: 1px solid var(--color-active-primary-button);
    color: white;
}

.tw-top-tabs-drawer .content .tw-button .events-count {
    font-family: "Lato-Medium";
    margin-left: 8px;
}

.tw-top-tabs-drawer .content .selected-tab {
    position: absolute;
    top: 16px;
    left: 16px;
}

.tw-top-tabs-drawer .content .selected-tab .tw-button {
    margin: 0px;
}

.tw-top-tabs-drawer:not(.closed) .selected-tab,
.tw-top-tabs-drawer.closed .full-tabsets {
    display: none;
}

.inactive-rule-row {
    color: #B4B4B4;
    background-color: #F6F6F6;
}

.inactive-rule-row .inactive-rule-child {
    color: #B4B4B4;
    cursor: not-allowed;
    pointer-events: none;
}

.code {
    font-family: monospace;
}

.painted-btn {
    border: none;
    padding: 0;
    min-width: 86px;
    font-family: "Lato-Medium";
    font-size: 13px;
    background-color: unset;
}

.painted-btn > .btn-layer-label {
    height: 20px;
    padding-top: 4px;
    border-radius: 4px 4px 0 0;
}

.painted-btn > .btn-layer-base {
    height: 10px;
    position: relative;
    background-color: #E5E5E5;
    border-top: 1px solid white;
}

.btn-group:first-of-type .painted-btn:first-child > .btn-layer-base {
    border-bottom-left-radius: 4px;
}

.btn-group:last-of-type .painted-btn:last-child > .btn-layer-base {
    border-bottom-right-radius: 4px;
}

.painted-btn:not(:last-child) {
    border-right: 1px solid white;
}

.painted-btn > .btn-layer-painted {
    height: 4px;
    background-color: #898989;
}

.painted-btn:hover > .btn-layer-label,
.painted-btn:hover > .btn-layer-base {
    background-color: var(--background-color-button-primary-hover);
    color: white;
    font-family: "Lato-Semibold";
}

.painted-btn.active:not(:hover) > .btn-layer-base,
.painted-btn.tw-active:not(:hover) > .btn-layer-base {
    background-color: var(--color-highlight-1);
}

/* Triangle indicator of current selected button */
.painted-btn.active > .btn-layer-base:after {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 6px);
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
}

.vertical-seperator {
    width: 0;
    height: 40px;
    border-left: 1px solid #CCCCCC;
    display: inline-block;
    margin: 0 12px -22px;
}

.threshold-summary {
    vertical-align: -45%;
    font-size: 14px;
    font-family: "Lato-Regular";
    color: #6E6E6E;
}

.threshold-group-align {
    margin-top: -10px;
}

.filter-threshold .painted-btn {
    min-width: 0;
    width: 56px;
}

.filter-threshold .painted-btn.active:not(:hover) > .btn-layer-base,
.filter-threshold .painted-btn.tw-active:not(:hover) > .btn-layer-base {
    background-color: var(--color-highlight-2);
}

.filter-threshold .painted-btn > .btn-layer-base {
    background-color: #575757;
    border-top: 1px solid #393D40;
}

.filter-threshold .painted-btn:not(:last-child) {
    border-right: 1px solid #393D40;
}

.filter-threshold .painted-btn:hover > .btn-layer-label {
    background-color: #393D40;
    font-family: "Lato-Medium";
}

.filter-threshold .painted-btn:hover > .btn-layer-base {
    background-color: var(--color-hover-2);
}

.filter-threshold .painted-btn.active > .btn-layer-base:after {
    border-bottom: 6px solid #393D40;
}

.filter-threshold .painted-btn:first-child > .btn-layer-base {
    border-bottom-left-radius: 4px;
}

.dialog-header-support-btn {
    margin-right: 10px;
    margin-left: 10px;
    line-height: 1.2em;
}

.table-top-group .nav.nav-tabs {
    width: 100%;
    margin-top: -10px;
}

.table-top-group label {
    margin-bottom: 0px;
    align-self: center;
}

.unknown-icon-circle {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #898989;
    color: white;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lato-Medium";
}

/* animations */
@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    10% {
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    17% {
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    33% {
        transform: scale(0.87);
        animation-timing-function: ease-in;
    }
    45% {
        transform: scale(0.6);
        animation-timing-function: ease-out;
    }
    75% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

@keyframes moving-arrows {
    from {
        transform: translate(-72px, 0);
        animation-timing-function: linear;
    }
    100% {
        transform: translate(6px, 0);
        animation-timing-function: linear;
    }
}

@keyframes ping-ring {
    from {
        width: var(--size-ping-start);
        height: var(--size-ping-start);
        box-shadow: var(--box-shadow-ping-start);
        animation-timing-function: linear;
    }
    100% {
        width: var(--size-ping-end);
        height: var(--size-ping-end);
        box-shadow: var(--box-shadow-ping-end);
        animation-timing-function: linear;
    }
}

@keyframes ping-source {
    from {
        color: var(--color-ping-source-start);
        animation-timing-function: ease-in;
    }
    75% {
        color: var(--color-ping-source-end);
        animation-timing-function: linear;
    }
    100% {
        color: var(--color-ping-source-start);
        animation-timing-function: linear;
    }
}

.effect-allow,
.effect-ignore,
.effect-disable,
.effect-alert,
.effect-prevent,
.effect-ban,
.effect-block {
    height: 22px;
    width: 22px;
    flex: 22px 0 0; /* In case nested under a flex container */
    display: inline-block;
}

.effect-alert.with-text:after,
.effect-prevent.with-text:after,
.effect-ban.with-text:after,
.effect-block.with-text:after {
    display: inline-block;
    font-size: 12px;
    font-family: "Lato-Regular";
    vertical-align: -1px;
    margin-left: 28px;
}
.effect-alert.with-text:after {
    vertical-align: -2px;
}
.effect-allow,
.effect-ignore {
    background-image: url("../img/effect-allow.svg");
}
.disabled-section .effect-allow {
    background-image: url("../img/effect-allow-disabled.svg");
}
.effect-disable {
    background-image: url("../img/effect-disable.svg");
}
.effect-alert {
    background-image: url("../img/effect-alert.svg");
}
.effect-prevent {
    background-image: url("../img/effect-prevent.svg");
}

.green-shield {
    color: #56C568;
}
.effect-ban,
.effect-block {
    background-image: url("../img/effect-block.svg");
}
.effect-alert.with-text:after {
    content: "Alert";
}
.effect-prevent.with-text:after {
    content: "Prevent";
}
.effect-block.with-text:after {
    content: "Block";
}
.effect-ban.with-text:after {
    content: "Ban";
}
.effect-as-bullet {
    margin-right: 6px;
    vertical-align: -5px;
    font-size: 18px;
    line-height: 18px;
}

.region-text {
    font-size: 11px;
    font-family: "Lato-Medium";
}

.unknown .region-text {
    text-anchor: start;
}

.tw-radar-filters .nested-filters-dropdown {
    display: block;
    position: absolute;
    background-color: #393d40;
    color: white;
    width: var(--width-radar-filter);
    box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.3);
    z-index: 1;
    font-size: 13px;
    margin-top: 20px;
    font-family: "Lato-Regular";
    opacity: 1;
    transition: opacity ease-in-out 200ms;
}

.tw-radar-filters .nested-filters-dropdown.ng-enter,
.tw-radar-filters .nested-filters-dropdown.ng-leave.ng-leave-active {
    opacity: 0;
}
.tw-radar-filters .nested-filters-dropdown.ng-leave,
.tw-radar-filters .nested-filters-dropdown.ng-enter.ng-enter-active {
    opacity: 1;
}

.tw-radar-filters .filters-area {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.tw-radar-filters .nested-filters-dropdown:after {
    display: inline-block;
    color: #575757;
    border-bottom: 10px solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    margin-left: 18px;
    content: '';
    position: absolute;
    top: -10px;
}

.tw-radar-filters .toggled-control .filter-options-wrapper {
    transition-duration: .20s;
    max-height: 1000px;
}

.tw-radar-filters .filter-search {
    padding-bottom: 5px;
    padding-top: 5px;
}

.tw-radar-filters .filter-title {
    font-size: 16px;
    color: var(--color-highlight-2);
    font-family: "Lato-Semibold";
    padding-top: 5px;
    display: flex
}

.tw-radar-filters .toggled-control .filter-title .text:hover {
    text-decoration: underline;
}

.tw-radar-filters .toggled-control.closed .filter-title .text:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-highlight-2);
    border-right: 2px solid var(--color-highlight-2);
    margin-left: 2px;
    margin-bottom: 1px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tw-radar-filters .toggled-control .filter-title .text:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-highlight-2);
    border-right: 2px solid var(--color-highlight-2);
    margin-left: 5px;
    margin-bottom: 3px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.tw-radar-filters .nested-title {
    font-size: 14px;
    font-family: "Lato-Semibold";
}

.tw-radar-filters .clear-text {
    background-color: #575757;
    color: #D8D8D8;
    font-size: 14px;
    padding: 10px 15px;
    font-family: "Lato-Medium";
}

.tw-radar-filters .clear-text:hover {
    text-decoration: underline;
}

.twistlock-ui .tw-tags-filter .nested-filters-dropdown {
    left: -20px;
}

.twistlock-ui .tw-tags-filter {
    padding: 0;
    position: relative;
}

.twistlock-ui .tw-tags-filter .tw-radar-filters .filters-area {
    padding-bottom: 5px;
}

.twistlock-ui .tw-tags-filter .icon-filter {
    width: 32px;
    padding-left: 10px;
    font-size: var(--font-size-icon-filter);
    z-index: var(--z-index-tw-tags-icon-filter);
}

.twistlock-ui .tw-tags-filter .icon-filter {
    top: -1px;
}

.twistlock-ui .tw-tags-filter tags-input .host {
    margin-top: 0px;
    margin-bottom: 0px;
}

.twistlock-ui .tw-tags-filter.tw-tags-table-filter tags-input .host {
    padding-left: 12px;
}

.twistlock-ui table.tw-table tr.inline-edit .tw-tags-filter tags-input .tags input.input,
.twistlock-ui table.tw-table tr.inline-edit .tw-tags-filter tags-input .tags .tag-list {
    margin-left: 5px;
}

.twistlock-ui .tw-tags-filter tags-input.has-selected .tags input.input {
    margin-left: 10px;
    width: 100%;
}

.twistlock-ui .tw-tags-filter tags-input .tags {
    min-height: calc(var(--height-table-top-group-filter) - 2px);
    margin-top: 0px;
    margin-left: 8px;
    padding: 0px;
    border: 0;
}

.twistlock-ui .table-top-group .tw-tags-filter tags-input .tags {
    margin-left: calc(var(--padding-left-icon-filter) + var(--font-size-icon-filter) + var(--padding-left-dropdown-toggle));

}

.radar-filters-group {
    margin-right: 15px;
    flex: 1 0 300px;
    display: inline-flex;
    justify-content: flex-end;
}

.twistlock-ui .radar-filters-group tags-input .tags {
    font-family: "Lato-Light";
    font-size: 14px;
    min-height: 32px;
    max-height: 32px;
    border-radius: 3px 0px 0px 3px;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    background-color: white;
    padding: 0px 8px;
    overflow-y: hidden;
    transition: max-height .2s ease-in;
}

.twistlock-ui .radar-filters-group tags-input .tags:hover,
.twistlock-ui .radar-filters-group tags-input .tags.focused {
    border: 1px solid var(--color-highlight-3);
}

.radar-filters-group tags-input .autocomplete .suggestion-list {
    max-height: 300px;
}

.twistlock-ui .radar-filters-group.heightened tags-input .tags {
    max-height: var(--height-full-table-top-group-filter);
    overflow-y: auto;
}

.radar-filters-group.wide tags-input {
    width: 100%;
}

.radar-filters-group tags-input {
    transition: width .2s ease-in .15s;
    width: 305px;
}

.tw-radar-filters .show-filters-btn {
    font-size: 14px;
    border: none;
    background: var(--color-active-primary-button);
    box-shadow: 0px 0px 4px rgba(139, 201, 255, 0.5);
    color: white;
    font-family: "Lato-Medium";
    border-radius: 0px 4px 4px 0px;
    height: 32px;
}

.twistlock-ui .tw-button.show-filters-btn .btn-content {
    line-height: 32px;
    padding: 8px 16px;
}

.tw-radar-filters .show-filters-btn:hover {
    background: var(--color-highlight-3);
    box-shadow: none;
}

.serverless-radar .entity-label {
    font-size: 15px;
    font-family: 'Lato-Regular';
    text-anchor: middle;
    dominant-baseline: central;
}

.sketchy-radar .node-description,
.sketchy-radar .radar-function-entity text,
.sketchy-radar .topology-text-bg {
    display: none;
}

.site-description-bg {
    opacity: 0;
}

.hovered .site-description-bg,
.sketchy-radar .hovered .node-description {
    display: block;
    opacity: 1;
}

.radar-entity {
    user-select: none;
}

.opacity-1.dim-out,
.target.opacity-1.dim-out {
    opacity: 0.3;
}

.scan-progress-minimized {
    --size-ping-start: 3px;
    --size-ping-end: 23px;
    --box-shadow-ping-start: inset 0 0 0px 2px var(--color-highlight-1);
    --box-shadow-ping-end: inset 0 0 6px 0px var(--color-highlight-1);
    --color-ping-source-start: var(--color-highlight-1);
    --color-ping-source-end: #969DA1;
    --time-ping-duration: 1200ms;

    cursor: pointer;
    position: relative;
    z-index: var(--z-index-scan-progress);
}

.scan-progress-minimized.ping-animation:before {
    position: absolute;
    font-family: "Lato-Medium";
    content: "Scanning...";
    color: #787878;
    font-size: 9px;
    bottom: -14px;
    left: -6px;
    cursor: auto;
}

.scan-progress-minimized.scan-has-error:after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f071";
    color: #EE1C25;
    font-size: 13px;
    left: -3px;
    top: -4px;
    pointer-events: none;
}

.scan-progress-minimized > .topbar-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-progress-minimized > .topbar-icon-circle .icon-scan-light-solid {
    font-size: 18px;
    margin-left: -1px;
    margin-top: -1px;
}

.scan-progress-minimized.ping-animation > .topbar-icon-circle .icon-scan-light-solid {
    color: var(--color-highlight-1);
    animation: ping-source var(--time-ping-duration) infinite;
}

.scan-progress-ping {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ping-animation .scan-progress-ping {
    animation: ping-ring var(--time-ping-duration) infinite;
}

.scan-progress-popper {
    position: absolute;
    right: var(--padding-side-topbar-menu);
    top: 90px;
    font-family: "Lato-Medium";
    font-size: 14px;
    background-color: #393D40;
    color: var(--color-highlight-2);
    z-index: var(--z-index-scan-progress);
    box-shadow: 2px 2px 5px -1px #333333;
}

.scan-progress-popper > .scan-progress-popper-body {
    padding: 8px 15px 8px 10px;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scan-progress-close {
    background-color: inherit;
    height: 25px;
    width: 25px;
    font-size: 19px;
    border-radius: 50%;
    right: -11px;
    top: -11px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    cursor: pointer;
}

.scan-progress-popper .close-btn:hover {
    color: #C8DFF9;
}

.scan-progress-popper .tw-single-value-thermometer {
    color: #777777;
    line-height: 1em;
}

.scan-progress-popper .tw-single-value-thermometer > .placeholder {
    height: 4px;
}

.scan-progress-popper .scan-text {
    max-width: 273px;
}

.fade-out-remove.removing {
    opacity: 0.1;
    transition: opacity linear 2s 3s;
}

.full-width {
    width: 100%;
}
.dim-out {
    opacity: 0.4;
}

.serverless-radar-dialog {
    font-family: "Lato-Semibold";
}

.serverless-radar-dialog .topology-dialog-icon {
    width: 33px;
    height: 33px;
}

.serverless-radar-dialog .topology-dialog-title {
    padding-left: 25px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.serverless-radar-dialog .info-table td {
    border: none;
    font-size: 14px;
}
.serverless-radar-dialog .info-table tr,
.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.serverless-radar-dialog .info-table td:first-of-type {
    color: #C8C8C8;
    padding-left: 0;
}
.serverless-radar-dialog .info-table td.value {
    max-width: 180px;
}

.topology-dialog-details .info-topic-header {
    display: inline-block;
    font-size: 20px;
    margin-bottom: 10px;
}

.topology-dialog-details .info-segment {
    margin-bottom: 3px;
    width: 100%;
}

.topology-dialog-details .info-segment .info-segment-header {
    white-space: nowrap;
}

.max-width-180 {
    max-width: 180px;
}

.max-width-130 {
    max-width: 130px;
}

.max-width-230 {
    max-width: 230px;
}

.max-width-300 {
    max-width: 300px;
}

.radar-entity-stats {
    display: flex;
    justify-content: space-around;
    flex-basis: 470px;
    flex-shrink: 0;
}

.radar-entity-stats .radar-entity-stats-col div {
    padding-top: 5px;
}

.radar-entity-stats .header {
    white-space: nowrap;
}

.tw-tags-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--margin-top-tw-tag));
}

.tw-tag {
    background-color: rgba(102, 102, 102, 0.8);
    margin-right: 10px;
    margin-top: var(--margin-top-tw-tag);
    padding: 4px 8px 4px 8px;
    border-radius: 3px;
    overflow-x: hidden;
}

.serverless-not-element {
    margin-right: 5px;
    color: #FF0000;
    min-width: 25px;
}

.tw-tag .tag-key {
    margin-right: 5px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    color: #C8C8C8;
    min-width: 25px;
}

.func-alias-name {
    color: #C8C8C8;
    font-size: 14px;
}

.info-topic .tw-tags-list .tw-tag {
    max-width: 327px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serverless-radar-dialog .service-info {
    max-width: 65%;
}

.serverless-radar-dialog.service-permissions-dialog .service-info {
    max-width: 50%;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.serverless-radar-dialog .func-service-permissions:not(:first-of-type) {
    margin-top: 15px;
}

.serverless-radar-dialog .alias-trigger-label {
    color: #E5FF1A;
    font-size: 12px;
}

.serverless-radar .service-node text {
    text-anchor: start;
}
.serverless-radar-dialog hr {
    border-color: #666666;
}

.serverless-radar .invisible-edge {
    pointer-events: all;
    cursor: pointer;
}

.target,
.opacity-0,
.serverless-radar .invisible-edge.opacity-0 {
    pointer-events: none;
}

.opacity-0-4 {
    opacity: 0.4;
}

.opacity-1,
.target.opacity-1,
.invisible-edge.highlighted-element.opacity-0,
.highlighted-element.opacity-0 {
    opacity: 1;
    pointer-events: all;
}

.trigger-entity.not-match-search,
.opacity-1.not-match-search,
.target.opacity-1.not-match-search {
    opacity: 0.3;
}

.target,
.opacity-0,
.dim-out.opacity-0 {
    opacity: 0;
}

.serverless-radar .radar-entity,
.serverless-radar .edgepath {
    transition: opacity ease-out 0.3s;
}

.serverless-radar .radar-entity .entity-background {
    fill: white;
}

.serverless-radar .radar-entity.all-services-permission .entity-label {
    fill: #FFFFFF
}
.serverless-radar .radar-entity.all-services-permission .entity-background {
    fill: #666666;
}

.serverless-radar .header-content text {
    font-family: 'Lato-Regular';
    font-size: 22px;
}

.tw-timeline {
    border-top: 1px solid #C8C8C8;
    box-shadow: 0 9px 8px -8px #C8C8C8;
}

.tw-timeline > svg {
    min-height: 130px;
}

table.headerless thead {
    display: none;
}

/* Forensics timeline zoom scroller - start */
.timeline-zoom-slider {
    -webkit-appearance: none;
    width: 100%;
    margin: 8px 0;
    position: absolute;
    background: transparent;
    transform: rotate(-90deg);
}
.timeline-zoom-slider:focus {
    outline: none;
}
.timeline-zoom-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: #BCBCBC;
    border-radius: 1.3px;
    border: 0px solid #010101;
}
.timeline-zoom-slider::-webkit-slider-thumb {
    box-shadow: -1px 1px 3px -1px #333333;
    border: 0px solid #000000;
    height: 18px;
    width: 6px;
    border-radius: 2px;
    background: var(--color-highlight-1);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}
.timeline-zoom-slider:focus::-webkit-slider-runnable-track {
    background: #858585;
}
.timeline-zoom-slider::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: #BCBCBC;
    border-radius: 1.3px;
    border: 0px solid #010101;
}
.timeline-zoom-slider::-moz-range-thumb {
    box-shadow: -1px 1px 3px -1px #333333;
    border: 0px solid #000000;
    height: 18px;
    width: 6px;
    border-radius: 2px;
    background: var(--color-highlight-1);
    cursor: pointer;
}
.timeline-zoom-slider::-ms-track {
    width: 100%;
    height: 1px;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
    margin-top: -15px;
    margin-bottom: -15px;
}
.timeline-zoom-slider::-ms-fill-lower {
    background: #BCBCBC;
}
.timeline-zoom-slider::-ms-fill-upper {
    background: #BCBCBC;
}
.timeline-zoom-slider::-ms-thumb {
    border-radius: 10px;
    background: var(--color-highlight-1);
    margin-top: -1px;
}
/* Forensics timeline zoom scroller - end */

.radar-confirm-dialog {
    top: 17%;
}

.radar-confirm-dialog .modal-body {
    padding-top: 35px;
    padding-bottom: 35px;
}

.radar-scan-image {
    width: 44px;
    height: 63px;
}

.radar-connection-delete-image,
.radar-scan-completed-image {
    width: 281px;
    height: 100px;
}

.twistlock-ui table thead th.secondary-header,
.twistlock-ui .tl-scrollable-flexible-container table thead th.secondary-header {
    top: 34px;
    background-color: var(--background-color-main);
    font-size: 12px;
    border-top: 0px;
}

.firewall-port-tags-input input {
    width: 310px;
}

.range-filter-massege .tw-bullet-paragraph-content {
    color: white;
    font-size: 12px;
}
.range-filter-massege .tw-bullet-paragraph {
    padding-top: 10px;
}
.range-filter-massege .tw-circle-bullet {
    height: 15px;
    width: 15px;
    margin-left: -25px;
}
.tw-slider {
    -webkit-appearance: none;
    width: 100%;
    opacity: 0.8;
    cursor: pointer;
}
.tw-slider:focus {
    outline: none;
}
.tw-slider:hover {
    opacity: 1;
}
.twistlock-ui .tw-slider {
    padding: 0;
    border-radius: 5px;
}
.tw-slider::-webkit-slider-thumb {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background: var(--color-highlight-2);
    -webkit-appearance: none;
    margin-top: -4px;
}
.tw-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    width: 100%;
    outline: none;
    height: 5px;
    background-image: linear-gradient(to right, var(--color-highlight-2) 0% var(--selectedRange), #c9c9ca var(--selectedRange) 100%);
    border-radius: 10px;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.tw-slider::-ms-track {
    width: 100%;
    height: 5px;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
    margin-top: -15px;
    margin-bottom: -15px;
}
.tw-slider::-ms-fill-lower {
    background: var(--color-highlight-2);
    border-radius: 10px;
}
.tw-slider::-ms-fill-upper {
    background: #c9c9ca;
    border-radius: 10px;
}
.tw-slider::-ms-thumb {
    border-radius: 10px;
    background: var(--color-highlight-2);
    margin-top: -1px;
}
.tw-slider.disabled-section::-webkit-slider-thumb {
    background: var(--color-tw-slider-disabled);
}
.tw-slider.disabled-section::-webkit-slider-runnable-track {
    background-image: linear-gradient(to right, var(--color-tw-slider-disabled), var(--color-tw-slider-disabled));
}
.tw-slider.disabled-section::-ms-fill-lower {
    background: var(--color-tw-slider-disabled);
}
.tw-slider.disabled-section::-ms-thumb {
    background: var(--color-tw-slider-disabled);
}
.search-match-message {
    color: #393D40;
    font-size: 14px;
    font-family: "Lato-Regular";
    margin-top: 5px;
    margin-left: 10px;
}

.search-match-message.not-found {
    color: red;
}

.firewall-red {
    color: #EE4036;
    font-size: 20px;
    font-family: "Lato-Regular";
}

/*
 Styled checkbox design
*/

.styled-checkbox {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 12px;
    height: 12px;
    margin: 3px 5px 3px 0px;
    user-select: none;
}

/* Hide the browser's default checkbox */
.styled-checkbox input {
    display: none;
}

/* Create a custom checkbox area */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: transparent;
    border: 1px solid #8D8D8D;
    border-radius: 2px;
}

.styled-checkbox[disabled] {
    pointer-events: none;
}

.styled-checkbox[disabled] .checkmark {
    background-color: #8D8D8D;
}

.form-input-box tw-styled-checkbox .styled-checkbox[disabled] .checkmark {
    border-color: #D4D4D4;
    background-color: #D4D4D4;
}

.form-input-box .styled-checkbox[disabled] .checkmark:after {
    border-color: #FFFFFF;
}

.dimensions-selection .styled-checkbox[disabled] .checkmark {
    background-color: #D8D8D8;
    border-color: #D8D8D8;
}

/* Style the checkmark indicator */
.styled-checkbox .checkmark:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--color-highlight-2);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkmark:after {
    display: none;
}

.styled-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.rule-edited {
    color: #A7A7A7;
    padding-left: 8px;
    vertical-align: sub;
    font-size: 12px;
}

.entity-tag {
    display: inline-block;
    background-color: lightgray;
    border-radius: 4px;
    margin-left: 4px;
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 450px;
}

.entity-tag:first-child {
    margin-left: 0px;
}

.tw-tooltip-btn .alert-image {
    width: 100%;
    height: 100%;
}

.twistlock-ui.alert-popover {
    max-width: unset;
    width: 334px;
    border: none;
    margin-top: -20px;
    box-shadow: none;
    padding: 0;
    cursor: default;
    box-shadow: 2px 7px 22px -13px #A5BAD1;
    user-select: text;
    cursor: auto;
}

.twistlock-ui.alert-popover .popover-content {
    padding: 0;
}

.twistlock-ui.alert-popover .arrow {
    border-bottom: none;
    border-top-color: transparent;
}

.twistlock-ui.alert-popover .modal-header {
    background-color: #FFF8AB;
    border: none;
    padding: 15px;
    font-size: 20px;
    border-top: 1px solid #FFF8AB;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.twistlock-ui.alert-popover .modal-body {
    border-bottom: 1px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.radar-filter-option {
    padding-left: 5px;
    word-break: break-all;
}

.settings-scan-grid {
    display: grid;
    grid-template-columns: repeat(2, 400px);
}

.settings-scan-column {
    display: grid;
    grid-template-columns: 145px 55px;
    grid-auto-rows: 50px;
    position: relative;
}

.scan-disabled:after {
    font-family: "Lato-Regular";
    color: #444444;
    font-size: 14px;
    content: "Scan is disabled";
    position: absolute;
    left: 204px;
    margin-top: 4px;
}

.host-dialog-input-indent {
    text-indent: 25px !important;
}

.host-dialog-provider-input-icon {
    margin-top: 5px;
    position: absolute;
}

.twistlock-ui tags-input .tags .tag-item ng-include {
    display: flex;
}

.twistlock-ui tags-input .tags .tag-item.wildcard-tag {
    height: 22px;
}

.twistlock-ui tags-input .tags .tag-item.wildcard-tag.selected {
    background: #6698A3;
}

.twistlock-ui tags-input .tags .tag-item.wildcard-tag span {
    font-size: 28px;
    margin-top: 6px;
}

.twistlock-ui tags-input .tags .tag-item.required-wildcard .remove-button {
    color: #93D0E0;
    cursor: not-allowed;
    display: none;
}

.gray-background-table::-webkit-scrollbar,
.forensic-event-card::-webkit-scrollbar {
    width: 16px;
}

.gray-background-table::-webkit-scrollbar-thumb,
.forensic-event-card::-webkit-scrollbar-thumb {
    background-color: #C2C2C2;
    border-left: 3px solid #F8F8F8;
    border-right: 5px solid #F8F8F8;
    border-radius: 5px 6px 6px 5px;
}

.forensic-event-card::-webkit-scrollbar-thumb {
    border-left: 3px solid #ECEEF0;
    border-right: 5px solid #ECEEF0;
}

.gray-background-table::-webkit-scrollbar-thumb:hover,
.forensic-event-card::-webkit-scrollbar-thumb:hover {
    background-color: #C7CACD;
}

.gray-background-table::-webkit-scrollbar-track {
    background-color: #F8F8F8;
}

.forensic-event-card::-webkit-scrollbar-track {
    background-color: #ECEEF0;
}

.topology-dialog-icon.icon-radar-aws-s3 {
    margin-left: 10px;
    margin-right: 10px;
}

.tl-scrollable-flexible-container.flexible-dialog-height {
    max-height: calc(100% - 40px)
}

.tw-dropdown-separator {
    margin-top: 3px;
    margin-bottom: 3px;
}

.twistlock-ui tw-tags-autocomplete.metadata-tags-autocomplete tags-input {
    width: 134px;
}

.twistlock-ui tw-tags-autocomplete tags-input .tag-list {
    /* tw-tags-autocomplete uses a custom display for selected tags */
    display: none;
}

.twistlock-ui tw-tags-autocomplete tags-input .tags {
    background-color: var(--color-border-table);
    border-radius: 2px;
    border-bottom: 0;
    height: 22px;
}

.twistlock-ui tw-tags-autocomplete tags-input .tags.focused {
    border: 1px solid #A3A3A3;
}

.twistlock-ui tw-tags-autocomplete tags-input .tags .input {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 11px !important;
    font-size: 14px !important;
    height: 100%;
    cursor: pointer;
}

.twistlock-ui tw-tags-autocomplete tags-input .tags .input:hover::placeholder {
    text-decoration: underline;
}

.twistlock-ui tw-tags-autocomplete tags-input .tags.focused .input {
    padding-left: 10px !important;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    height: 22px;
    margin-bottom: 7px;
    margin-right: 5px;
    border-radius: 2px;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag .content {
    display: inline-flex;
    padding-left: 10px;
    overflow: hidden;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag .content .comment-btn {
    margin-right: 6px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #979797;
    background-color: transparent;
    border: none;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag .content .comment-btn.active {
    color: #237BB9;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag .remove-button {
    padding-right: 10px;
    color: var(--color-primary-button);
    font-family: "Lato-Regular";
    margin-left: 5px;
    font-size: 14px;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag .content .comment-popover {
    max-width: none;
    background-color: white;
}

.twistlock-ui tw-tags-autocomplete .tag-list .tag .content .comment-popover .arrow:after {
    border-top-color: white;
}

.comment-popover .comment-text {
    width: 152px;
    height: 55px;
    font-size: 12px;
    color: #333333;
    font-family: "Lato-Regular";
}

.comment-popover p.comment-text {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0px;
    user-select: none;
}

.comment-popover textarea.comment-text {
    resize: none;
    border: none;
}

table.tw-table tbody tr.inline-edit table thead th {
    border-bottom: none;
}

table.tw-table tbody tr.inline-edit table tbody td {
}

.twistlock-ui table.tw-table tbody tr.inline-edit td:first-of-type {
    padding-left: 0;
}
.twistlock-ui table.tw-table tbody tr.inline-edit > td {
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: visible;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .content .item {
    flex: 1 0 240px;
    padding-right: 29px;
    display: flex;
    flex-direction: column;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .content .item.fixed {
    flex-grow: 0;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .content .item .name {
    color: #777777;
    font-size: 12px;
    margin-bottom: 10px;
}

.twistlock-ui table.tw-table tbody tr.inline-edit .header {
    height: 38px;
}

.twistlock-ui table.tw-table tbody tr.inline-edit > td .footer {
    padding-top: 8px;
    padding-bottom: 8px;
}

.twistlock-ui table.tw-table tbody tr.inline-edit > td .footer {
    padding-right: 15px;
}

@keyframes row-highlight {
    0%   {background-color: initial;}
    25%  {background-color: #D3E8FC;}
    50%  {background-color: #D3E8FC;}
    100% {background-color: initial;}
}

.twistlock-ui .cnnf-rules.tw-table tr.highlight {
    animation-name: row-highlight;
    animation-duration: 3s;
    animation-delay: 100ms;
}

table.tw-table tbody tr.inline-edit .tags {
    background-color: inherit;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.twistlock-ui button.plain {
    background-color: transparent;
    text-align: initial;
    padding: 0;
    border: 0;
}
.twistlock-ui .tag-exception-select .nya-bs-select > button,
.twistlock-ui .tag-exception-select .nya-bs-select:not(.trend-chart-options).open > button,
.twistlock-ui .tag-exception-select .nya-bs-select:not(.trend-chart-options).open > button:hover,
.twistlock-ui .tag-exception-select .nya-bs-select.form-control.open > button {
    font-size: 16px;
}

textarea.user-notes.form-control {
    resize: vertical;
    height: 34px;
    min-height: 34px;
    max-height: 100px;
}

.toggled-arrow:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--color-primary-button);
    border-left: 2px solid var(--color-primary-button);
    margin-left: 7px;
    margin-bottom: -2px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.toggled-arrow.closed:after {
    border-top: 2px solid var(--color-primary-button);
    border-right: 2px solid var(--color-primary-button);
    border-bottom: 0;
    border-left: 0;
    margin-left: 5px;
    margin-bottom: 3px;
}

.invalid-input-error {
    font-size: 12px;
    font-family: 'Lato-Regular';
    margin-top: 8px;
    margin-left: 10px;
    color: #FF0000;
}

.collection-links .toggled-arrow {
    flex: 0 0 16px;
}

.min-width-24 {
    min-width: 24px;
}

.twistlock-ui .tw-smart-input-wrapper .icon-help {
    display: inline-block;
    margin-left: 16px;
    cursor: pointer;
}

.twistlock-ui .tw-smart-input-wrapper .tw-smart-input-info {
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.twistlock-ui .tw-smart-input-wrapper .tw-smart-input-info .info-img {
    height: 16px;
    width: 16px;
}

.twistlock-ui .tw-smart-input {
    display: flex;
    position: relative;
    height: auto;
    min-height: var(--height-table-top-group-filter);
    line-height: 17px;
}

.twistlock-ui .tw-smart-input .smart-input-collapsable {
    display: flex;
    width: 100%;
    position: relative; /* positioned to allow sticky element on scroll */
}

.twistlock-ui .tw-smart-input:not(.focused) .smart-input-collapsable.overflow-hidden {
    max-height: var(--height-table-top-group-filter);
    cursor: text;
}

.twistlock-ui .tw-smart-input.focused .smart-input-collapsable {
    max-height: 100%;
}

.twistlock-ui .tw-smart-input.focused.dropdown-open {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.twistlock-ui .tw-smart-input:hover,
.twistlock-ui .tw-smart-input.focused,
.twistlock-ui .tw-smart-input .options {
    border: 1px solid var(--color-highlight-sidebar);
}

.twistlock-ui .tw-smart-input input.input,
.twistlock-ui .table-top-group .left .tw-smart-input input.input {
    padding: 0;
    border: none;
    font-size: 14px;
    flex: 1 0;
    min-width: 254px;
    margin-top: 3px;
    max-width: 100%;
    height: 22px;
}

.twistlock-ui .tw-smart-input .icon-tw-smart-input-clear {
    color: #C4C4C4;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    margin: calc(var(--padding-left-icon-filter) - 1px) 10px;
    top: var(--padding-left-icon-filter);
}

.twistlock-ui .tw-smart-input .tags {
    margin-top: 1px;
    padding-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}

.twistlock-ui .tw-smart-input .tags .tag {
    margin: 4px 4px 0px 0px;
    padding-left: 8px;
    padding-right: 8px;
    max-width: 338px;
    height: 23px;
    display: flex;
    align-items: baseline;
}

.twistlock-ui .tw-smart-input .tags .tag.blink {
    animation: tag-blink 1.25s infinite;
}

@keyframes tag-blink {
    0% {
        background-color: var(--background-color-tag);
    }
    50% {
        background-color: var(--background-color-tag-blink);
    }
    100% {
        background-color: var(--background-color-tag);
    }
}

.twistlock-ui .tw-smart-input .tw-smart-input-filter-count {
    display: flex;
    align-items: baseline;
    height: 100%;
}

.twistlock-ui .tw-smart-input .tw-smart-input-filter-count.active {
    margin-right: var(--padding-left-icon-filter);
    border-right: 1px solid var(--color-border-section);
}

.twistlock-ui .tw-smart-input .icon-filter {
    font-size: 14px;
    width: var(--tw-header-filter-size);
    height: var(--tw-header-filter-size);
    margin: calc(var(--padding-left-icon-filter) - 1px) calc(var(--padding-left-icon-filter) - 2px) calc(var(--padding-left-icon-filter) - 1px) var(--padding-left-icon-filter);
}

.twistlock-ui .tw-smart-input .filters-count {
    font-size: 14px;
    font-family: "Lato-Semibold";
    margin: calc(var(--padding-left-icon-filter) - 1px) calc(var(--padding-left-icon-filter) - 1px) calc(var(--padding-left-icon-filter) - 1px) 0px;
}

.twistlock-ui .tw-smart-input .icon-filter.active,
.twistlock-ui .tw-smart-input .filters-count {
    color: #42A5ED;
}

.twistlock-ui .tw-smart-input .options {
    display: inline-block;
    width: calc(100% + 2px);
    top: calc(100% + 1px);
    left: -1px;
    position: absolute;
    background-color: white;
    z-index: calc(var(--z-index-sidebar-wrapper) - 1);
    border-top: none;
    border-bottom-right-radius: var(--border-radius-input);
    border-bottom-left-radius: var(--border-radius-input);
    max-height: 270px;
    overflow-y: auto;
}

.twistlock-ui .tw-smart-input .options .list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.twistlock-ui .tw-smart-input .options.custom {
    width: auto;
    border: none;
    left: 18px; /* leave enough room for date filter dropdown so it's not hidden by the main left side bar */
    overflow-y: visible;
}

.twistlock-ui .tw-smart-input .options .list .opt.separator {
    border-bottom: 1px solid #D4D4D4;
    margin: 0;
}

.twistlock-ui .tw-smart-input .options .list .opt {
    padding-left: 8px;
    height: 26px;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
}

.twistlock-ui .tw-smart-input .options .list .opt.hint {
    background-color: #FAFAFA;
}

.twistlock-ui .tw-smart-input .options .list .opt .hint-example {
    border: 1px solid #AFAFAF;
    width: 15px;
    height: 15px;
    border-radius: 2px;
    margin-right: 4px;
    margin-left: 4px;
    text-align: center;
    font-size: 16px;
    line-height: normal;
}

.twistlock-ui .tw-smart-input .options .list .opt .hint-example.not {
    line-height: 12px;
}

.twistlock-ui .tw-smart-input .options .list .opt.hovered,
.twistlock-ui .tw-smart-input .options .list .opt.hovered:hover {
    background-color: #E0EDFB;
}

.twistlock-ui .tw-smart-input .options .list .opt:hover {
    background-color: var(--color-hover-3);
}

.twistlock-ui .tw-smart-input .options .dropdown-menu {
    display: block;
}

.twistlock-ui .tw-smart-input .options .date-pick {
    width: 178px;
}

.twistlock-ui .tw-smart-input-wrapper .tw-smart-input-message {
    font-size: 12px;
    font-family: "Lato-Regular";
    margin-top: 2px;
    height: 20px;
    line-height: 20px;
}

.twistlock-ui .tw-smart-input-wrapper .tw-smart-input-message.error {
    color: #EE4036;
}

.twistlock-ui .tw-smart-input-wrapper .tw-smart-input-message.info,
.twistlock-ui .tw-smart-input-wrapper .tw-smart-input-message.warning {
    color: #333333;
}

tw-compact-view > .table-margin-top {
    margin-top: var(--margin-modal-body);
}

.container-dlg-compact-audits > .table-margin-top {
    padding-left: 0;
    padding-right: 0;
}

tw-compact-view > .twistlock-ui {
    display: inline-block;
    margin-top: var(--margin-modal-body);
    padding-right: 0;
    padding-left: 0;
}

.topology-dialog tw-compact-view > .twistlock-ui {
    margin-top: 0px;
}

.topology-dialog tw-compact-view > .twistlock-ui > .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}

.alert-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border-section);
    margin-bottom: 24px;
    border: none;
}

.alert-card-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 10px 24px;
    box-shadow: 0px 0px 12px rgba(156, 156, 156, 0.33);
}

.alert-card-spinner {
    margin: auto;
}

.alert-card-image {
    height: 24px;
    width: auto;
}

.alert-card-content {
    padding: 0px 16px;
}

.alert-card.success .alert-card-wrapper {
    border-bottom: 5px solid var(--color-alert-card-success);
}

.alert-card.success .alert-card-icon {
    color: var(--color-alert-card-success);
}

.alert-card.warning .alert-card-wrapper {
    border-bottom: 5px solid var(--color-alert-card-warning);
}

.clusters-grid-container {
    display: grid;
    grid-gap: 32px;
    padding-left: calc(var(--left-topology-orientation-title) + 1px);
    margin-top: 20px;
    justify-content: left;
    align-content: space-evenly;
}

.clusters-grid-container.large {
    grid-template-columns: repeat(auto-fit, 520px);
    font-size: 22px;
}

.clusters-grid-container.medium {
    grid-template-columns: repeat(auto-fit, 382px);
    font-size: 20px;
}

.clusters-grid-container.small {
    grid-template-columns: repeat(auto-fit, 244px);
    font-size: 18px;
}

.clusters-grid-item {
    display: flex;
    flex-direction: column;
}

.clusters-grid-item .icon-arrow-right {
    color: #EAEAEA;
}

.clusters-grid-item:hover .icon-arrow-right {
    color: #43A5ED;
}

.clusters-radar {
    height: calc(100% - 195px);
    overflow: auto;
    position: relative;
    top: 85px;
}

.back-to-cluster-card {
    position: absolute;
    top: var(--top-back-to-cluster-card);
    width: 200px;
    left: calc(var(--left-topology-orientation-title) + 1px);
    cursor: pointer;
    opacity: 0.9;
}

.waas-sample-card,
.radar-cluster-card {
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 6px;
    box-shadow: 2px 2px 6px rgba(196, 196, 196, 0.18);
    font-family: Lato-Regular;
}

.waas-sample-card {
    margin-bottom: 16px;
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
}

.waas-sample-card .toggle {
    margin-top: -8px;
    margin-right: -15px
}

.waas-sample-card .body {
    padding-top: 12px;
}

.waas-sample-card .body.raw {
    background-color: #EAEAEA;
    font-family: monospace;
    flex-grow: 1;
}

.waas-sample-card.big .body {
    min-height: 200px;
    max-height: 300px;
    overflow: auto;
}

.waas-sample-card.small {
    font-size: 14px; /* by default 'small' class get 12px */
}

.waas-sample-card.small .body {
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
    word-break: break-word; /* to avoid long words from leaving the box confines */
}

.waas-sample-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.radar-cluster-card:hover {
    background-color: #F7fBFF;
    cursor: pointer;
    opacity: 1;
}

.radar-cluster-card:hover.back-to-cluster-card.disabled {
    background-color: white;
    cursor: auto;
    border: 1px solid lightgrey;
}

.waas-sample-card .title,
.radar-cluster-card-title {
    margin-top: 13px;
    position: relative;
    padding-bottom: 7px;
    color: var(--color-primary-button);
    display: flex;
    font-size: 14px;
}

.waas-sample-card .title {
    color: black;
    display: flex;
    justify-content: space-between;
    margin-top: 11px;
    padding-bottom: 12px;
}

.radar-cluster-card-header {
    position: relative;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.large .radar-cluster-card-header {
    margin-top: 13px;
    padding-bottom: 16px;
}

.medium .radar-cluster-card-header {
    margin-top: 11px;
    padding-bottom: 14px;
}

.small .radar-cluster-card-header {
    margin-top: 9px;
    padding-bottom: 12px;
}

.radar-cluster-card-header .icon-arrow-right {
    margin-right: 15px;
}

.radar-cluster-card-header-icon {
    margin-left: 16px;
}

.non-cluster .radar-cluster-card-header-caption {
    margin-left: 16px
}

.radar-cluster-card-header-caption {
    margin-left: 8px;
}

.radar-cluster-card-body {
    margin-bottom: 8px;
    margin-left: 16px;
}

.large .radar-cluster-card-body {
    margin-top: 14px;
}

.medium .radar-cluster-card-body {
    margin-top: 12px;
}

.small .radar-cluster-card-body {
    margin-top: 10px;
}

.radar-cluster-card-metadata {
    display: flex;
    color: #717171;
    font-size: 14px;
    margin-bottom: 8px;
}

.radar-cluster-card-metadata-icon {
    margin-right: 8px;
    color: #D8D8D8;
}

.cluster.search-radar {
    position: absolute;
    right: 0;
}

.radar-cluster-card-title .icon-arrow-left {
    padding-right: 10px;
    padding-left: 15px;
    padding-top: 2px;
}

.waas-sample-card .title.underline:after,
.radar-cluster-card-title.underline:after,
.radar-cluster-card-header.underline:after {
    border-bottom: 1px solid lightgrey;
}

.clusters-grid-item:hover .radar-cluster-card-header.underline:after,
.radar-cluster-card:hover .radar-cluster-card-title.underline:after {
    border-bottom: 1px solid #43A5ED;
}

.radar-cluster-card:hover {
    border: 1px solid  #43A5ED;
}

.radar-cluster-card-name {
    font-size: 16px;
    padding-left: 15px;
    padding-top: 10px;
    padding-right: 10px;
    height: 44px;
    font-family: Lato-Semibold;
}
.waas-sample-card-border,
.radar-cluster-card-border {
    border-top: 5px solid #D3E8FC;
    border-radius: 6px;
}
.radar-cluster-card-border.non-cluster {
    border-top: 5px solid #EAEAEA;
    border-radius: 6px;
}

.clusters-smart-input {
    margin-left: 24px;
    min-width: 500px;
    max-width: calc(100% - 300px);
}

.cluster-radar-title {
    font-size: 16px;
    margin-top: 6px;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs {
    float: left;
    width: 112px;
    height: 100%;
    border: none;
    display: flex;
    flex-direction: column;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item .nav-link,
.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item .nav-link:hover {
    font-size: 16px;
    text-decoration: none;
    padding: 0px;
    text-align: center;
    color: #AFAFAF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item {
    flex: 1 0 0;
    background-color: #2C2C2C;
    margin: 0px;
    border-top: 1px solid var(--background-color-tw-dialog);
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item:first-child {
    border-top: none;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item.active {
    background-color: var(--background-color-tw-dialog);
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item.active .nav-link,
.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item.active .nav-link:hover {
    color: white;
    border: none;
    background-color: var(--background-color-tw-dialog);
    height: 100%;
    padding: 0px;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .nav-tabs .nav-item.active .nav-link:after {
    content: none;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .contect-tabs {
    float: left;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs  {
    height: var(--height-topology-modal-body);
}

.topology-dialog-details tw-compact-view .tl-scrollable-container,
.topology-dialog-details .gray-table-layout.tl-scrollable-container {
    height: 190px;
}

.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .tab-content,
.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .tab-content .tab-pane,
.twistlock-ui .tw-dialog .radar-dialog-vertical-tabs > .topology-dialog-details {
    height: 100%;
}

.icon-help-login {
    font-size: 16px;
    color: #333333;
    margin-left: 16px;
}

.waas-methods-dropdown {
    position: absolute;
    top: 0px;
}

.non-cluster-info {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top: 8px;
    cursor: pointer;
}

.dimensions-selection {
    background-color: #FFFFFF;
    color: #333333;
    z-index: 1;
    font-size: 13px;
    font-family: "Lato-Regular";
    position: absolute;
    width: 240px;
    max-height: 450px;
    padding: 10px 10px 10px 10px;
    opacity: 1;
    transition: opacity ease-in-out 200ms;
    right: 0;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    display: none;
}

.dimensions-selection.show {
    display: block;
}

.waas-timeline {
    position: relative;
    border: 1px solid var(--color-border-section);
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: white;
    height: 200px;
}

.waas-timeline .chart {
    width: 100% !important;
    border-radius: 0 0 5px 5px;
}

.left.waas-smart-input {
    align-items: baseline;
}

.dimensions-selection .select-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
    cursor: pointer;
}

.waas-sample-card label {
    font-family: Lato-Regular;
    color: #717171;
}

.waas-country {
    display: flex;
}

.waas-country span {
    padding-left: 5px;
    padding-top: 3px;
}