/* roboto-300 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-900 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: local(''),
    url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v30-latin-ext_latin_cyrillic-ext_cyrillic-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
    height: 100%;

    --toolbar-height: 130px;
    --toolbar-default-height: 64px;
    --drawer-width: 90px;
    --content-height: calc(100vh - var(--toolbar-height) - 1px);
    --content-body-height: calc(var(--content-height) - 1px);
    --footer-height: 50px;
    --bottom-bar-height: 80px;
    --card-header-height: 50px;
    --card-min-width: 160px;
    --card-max-width: 300px;
    --facets-tabs-panel-height: 50px;
    --main-min: 420px;
    --main-max: 1000px;

    --positive-color: #90CAA9;
    --negative-color: #EB5757;

    --cm-actions-height: 100px;
    --cm-notes-height: 250px;

    --breadcrumbs-height: 57px;
    --title-height: 65px;

    --tox-color: #333333;
}

/** Theme **/

.light {
    --logo-home: url("/img/light/logo_home.svg?v=2.9.1");
    --search-icon: url("/img/light/search.svg?v=2.9.1");
    --search-icon-alt: url("/img/light/search-alt.svg?v=2.9.1");
    --startree-icon: url("/img/light/startree.svg?v=2.9.1");
    --startree-icon-alt: url("/img/light/startree-alt.svg?v=2.9.1");
    --summary-icon: url("/img/light/summary.svg?v=2.9.1");
    --summary-icon-alt: url("/img/light/summary-alt.svg?v=2.9.1");
    --alerts-icon: url("/img/light/alerts.svg?v=2.9.1");
    --alerts-icon-alt: url("/img/light/alerts-alt.svg?v=2.9.1");
    --cm-icon: url("/img/light/cm.svg?v=2.9.1");
    --cm-icon-alt: url("/img/light/cm-alt.svg?v=2.9.1");
    --chart-skeleton: url("/img/light/graph.svg?v=2.9.1");
    --scale: url("/img/light/scale.svg?v=2.9.1") round;
    --minimize-icon: url("/img/light/minimize.svg?v=2.9.1");
    --expand-icon: url("/img/light/expand.svg?v=2.9.1");
    --inbox-unselected-icon: url("/img/light/inbox-unselected.svg?v=2.9.1");
    --move-icon: url("/img/light/move.svg?v=2.9.1");
    --calibration-icon: url("/img/light/calibration.svg?v=2.9.1");
    --dots-icon: url("/img/light/dots.svg?v=2.9.1");
    --chart-icon: url("/img/light/chart.svg?v=2.9.1");
    --drag-icon: url("/img/light/drag.svg?v=2.9.1");

    --color-primary: #fff;
    --color-primary-t88: rgba(255, 255, 255, 0.88);
    --color-secondary: #f5f6fa;
    --color-secondary-t25: rgba(85, 82, 236, 0.25);
    --color-alternative: #f5f6fa;
    --color-bg-alternative: #F7F6FE;
    --color-main: #5552EC;
    --color-main-50: #F7F6FE;
    --color-main-100: #EEEEFD;
    --color-main-200: #DDDCFB;
    --color-main-800: #7775F0;
    --color-secondary-main: #D8D7FB;
    --color-hover: rgba(0, 0, 0, 0.04);
    --font-color: rgba(0, 0, 0, 0.6);
    --font-color-contrast: #333;
    --header-color: #fff;
    --drawer-color: #EEEEFD;
    --form-color: #EEEEFD;
    --suggester-color: #fff;
    --carousel-color: #fff;
    --carousel-box-shadow: 0 4px 10px rgba(85, 82, 236, 0.12);
    --carousel-backdrop: rgba(255, 255, 255, 0.8);
    --drawer-content-color: #f5f6fa;
    --drawer-border-color: rgba(85, 82, 236, 0.25);
    --input-color: #F7F6FE;
    --input-color-alt: #fff;
    --input-border: 1px solid #F7F6FE;
    --input-icon: rgba(85, 82, 236, 0.25);
    --input-hover: rgba(0, 0, 0, 0.05);
    --line-color: #4E4E4E;
    --arrow-color: rgba(31, 45, 61, 0.3);
    --border-color: rgba(85, 82, 236, 0.25);
    --logo-filter: invert(0);
    --color-input-border: rgba(85, 82, 236, 0.25);
    --color-search-type-hover: rgba(220, 221, 225, 0.35);
    --color-toogle: rgba(0, 0, 0, 0.54);
    --color-toogle-match: rgba(0, 0, 0, 0.12);
    --color-toogle-match-hover: rgba(0, 0, 0, 0.15);
    --color-toogle-selected-hover: rgb(59, 57, 165);
    --color-button-border: #DDDCFB;
    --card-header-color: #fff;
    --login-bg-color: #fff;
    --container-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
    --thumb-shadow: 0 0 0 5px rgba(85, 82, 236, 0.16);
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
    --pulse-bg: rgba(0, 0, 0, 0.11);
    --positive-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95.24%), #90CAA9;
    --negative-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95.24%), #EB5757;

    --primary-border-color: #E7EBFE;
    --primary-border: 1px solid var(--primary-border-color);
    --alternative-border-color: #EEEEFD;

    --cm-string-color: #333333;
    --cm-field-color: #BBBAF7;
    --cm-field-string: #4F4F4F;

    --tox-bg-color: #fff;
    --tox-inner-border-color: #F7F6FE;
    --tox-outer-border-color: #F2F2F2;
    --tox-hover-color: #F7F6FE;

    --card-border-color: #e0e0e0;

    --chip-color: #5552EC;
    --chip-bg-color: #EEEEFD;
}

.dark {
    --logo-home: url("/img/dark/logo_home.svg?v=2.9.1");
    --search-icon: url("/img/dark/search.svg?v=2.9.1");
    --search-icon-alt: url("/img/dark/search-alt.svg?v=2.9.1");
    --startree-icon: url("/img/dark/startree.svg?v=2.9.1");
    --startree-icon-alt: url("/img/dark/startree-alt.svg?v=2.9.1");
    --summary-icon: url("/img/dark/summary.svg?v=2.9.1");
    --summary-icon-alt: url("/img/dark/summary-alt.svg?v=2.9.1");
    --alerts-icon: url("/img/dark/alerts.svg?v=2.9.1");
    --alerts-icon-alt: url("/img/dark/alerts-alt.svg?v=2.9.1");
    --cm-icon: url("/img/dark/cm.svg?v=2.9.1");
    --cm-icon-alt: url("/img/dark/cm-alt.svg?v=2.9.1");
    --chart-skeleton: url("/img/dark/graph.svg?v=2.9.1");
    --scale: url("/img/dark/scale.svg?v=2.9.1") round;
    --minimize-icon: url("/img/dark/minimize.svg?v=2.9.1");
    --expand-icon: url("/img/dark/expand.svg?v=2.9.1");
    --inbox-unselected-icon: url("/img/dark/inbox-unselected.svg?v=2.9.1");
    --move-icon: url("/img/dark/move.svg?v=2.9.1");
    --calibration-icon: url("/img/dark/calibration.svg?v=2.9.1");
    --dots-icon: url("/img/dark/dots.svg?v=2.9.1");
    --chart-icon: url("/img/dark/chart.svg?v=2.9.1");
    --drag-icon: url("/img/dark/drag.svg?v=2.9.1");

    --color-primary: #333333;
    --color-primary-t88: rgba(51, 51, 51, 0.88);
    --color-secondary: #333333;
    --color-secondary-t25: #4f4f4f;
    --color-alternative: #2D2D2D;
    --color-bg-alternative: #4f4f4f;
    --color-main: #BB86FC;
    --color-main-200: #57407C;
    --color-main-800: #BB86FC;
    --color-secondary-main: #634380;
    --color-backdrop: rgba(51, 51, 51, 0.8);
    --color-hover: rgba(255, 255, 255, 0.08);
    --font-color: #fafafa;
    --font-color-contrast: #fff;
    --header-color: #2D2D2D;
    --drawer-color: #4f4f4f;
    --form-color: #2D2D2D;
    --suggester-color: #222;
    --carousel-color: #222;
    --carousel-box-shadow: none;
    --carousel-backdrop: rgba(34, 34, 34, 0.8);
    --drawer-content-color: #383838;
    --drawer-border-color: #383838;
    --input-color: #4f4f4f;
    --input-color-alt: #4f4f4f;
    --input-border: 1px solid #4f4f4f;
    --input-icon: #4f4f4f;
    --input-hover: rgba(255, 255, 255, 0.08);
    --line-color: #4E4E4E;
    --arrow-color: rgba(242, 242, 242, 0.3);
    --border-color: rgba(178, 138, 245, 0.43);
    --logo-filter: invert(1);
    --color-input-border: rgba(187, 134, 252, 0.25);
    --color-search-type-hover: rgba(0, 0, 0, 0.35);
    --color-toogle: #fff;
    --color-toogle-match: rgba(255, 255, 255, 0.12);
    --color-toogle-match-hover: rgba(255, 255, 255, 0.15);
    --color-toogle-selected-hover: rgb(130, 93, 176);
    --color-button-border: #333333;
    --card-header-color: #333333;
    --login-bg-color: #4f4f4f;
    --container-shadow: 0px 0px 3px rgba(255, 255, 255, 0.2);
    --thumb-shadow: 0 0 0 5px rgba(187, 134, 252, 0.16);
    /*--box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);*/
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
    --pulse-bg: rgba(255, 255, 255, 0.13);
    --positive-gradient: linear-gradient(0deg, rgba(56, 56, 56, 0.7) 0%, rgba(56, 56, 56, 0) 95.24%), #90CAA9;
    --negative-gradient: linear-gradient(180deg, rgba(56, 56, 56, 0.7) 0%, rgba(56, 56, 56, 0) 95.24%), #EB5757;

    --primary-border-color: #222;
    --primary-border: 1px solid var(--primary-border-color);
    --alternative-border-color: rgba(255, 255, 255, 0.12);

    --cm-string-color: #fff;
    --cm-field-color: rgba(255, 255, 255, 0.5);
    --cm-field-string: #fff;

    --tox-bg-color: #828282;
    --tox-inner-border-color: #4f4f4f;
    --tox-outer-border-color: #4f4f4f;
    --tox-hover-color: #bdbdbd;

    --card-border-color: #828282;

    --chip-color: #333333;
    --chip-bg-color: #BB86FC;
}

body {
    height: 100%;
    margin: 0;
}

#app {
    height: 100%;
}

/** Common **/

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

.menu-icon {
    min-width: 0 !important;
    margin-right: 8px;
}

.menu-item-danger,
.menu-item-danger .MuiListItemIcon-root {
    color: var(--negative-color) !important;
}

.grow {
    flex: 1;
}

.rotate {
    transform: rotate(180deg)
}

.full {
    width: 100%;
}

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

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-overflow::after {
    content: '';
    display: block;
}

.row {
    display: flex;
    flex-direction: row;
}

.row-center {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.blank-row {
    height: 10px;
}

.column {
    display: flex;
    flex-direction: column;
}

.nested {
    padding-left: 42px !important;
}

.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

.centered {
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.paper {
    background-color: var(--color-primary) !important;
}

.divider {
    border-color: var(--primary-border-color) !important;
}

.chip {
    min-width: 40px;
    height: 19px;
    margin-right: 4px !important;
    border-radius: 100px;
    justify-content: center;
    display: inline-flex;
    padding: 0 10px 0 10px;
}

.chip-active {
    background-color: var(--color-bg-alternative);
    color: var(--color-main);
    font-weight: 600 !important;
}

.chip-inactive {
    opacity: 0.5;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: var(--color-main);
    border-radius: 50%;
    display: inline-block;
}

.selected {
    background-color: var(--color-alternative) !important;
}

.select {
    background-color: var(--color-alternative) !important;
    border-radius: 8px !important;
}

.select-input > svg {
    top: calc(50% - 12px);
    right: 7px;
    position: absolute;
    pointer-events: none;
    width: 20px;
}

.select-input > fieldset {
    border: none !important;
}

.select-menu {
    max-height: 250px !important;
}

.text-field {
    border: var(--input-border) !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background-color: var(--input-color) !important;
    width: 100%;
}

.text-field-alt {
    background-color: var(--input-color-alt) !important;
}

.text-field fieldset {
    display: none !important;
}

.text-area {
    min-height: 100px;
    padding: 8px !important;
}

.text-area-disabled {
    resize: none;
}

.text-field:hover {
    background-color: var(--input-hover) !important;
}

.text-field.Mui-error {
    border: 1px solid var(--negative-color) !important;
}

.input {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 42px;
    padding-left: 8px;
}

.input--filled {
    border: none !important;
    background-color: var(--color-bg-alternative) !important;
}

.input-focused {
    border: 2px solid var(--color-main) !important;
}

.input-icon {
    width: 100%;
    height: 42px;
}

.input-icon-root {
    padding: 0 !important;
}

.input-icon-focused > div {
    background-color: var(--color-main);
}

.input-icon-adornment {
    height: 42px;
    width: 42px;
    display: flex;
    justify-content: center;
    background-color: var(--input-icon);
    margin-right: 8px;
}

.input-icon-adornment > button svg {
    color: #fff;
}

.switch-track {
    border-radius: 11px !important;
}

.switch-track:before,
.switch-track:after {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    font-size: 9px;
}

.switch-track:before {
    content: "ON";
    left: 14px;
    color: var(--color-main);
}

.switch-track:after {
    content: "OFF";
    right: 14px;
    color: var(--color-primary);
}

.switch-root {
    padding: 8px !important;
    line-height: 18px !important;
}

.switch-base.Mui-checked + .switch-track {
    background-color: var(--color-main-200) !important;
    opacity: 1 !important;
}

.switch-thumb {
    box-shadow: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 1px;
}

.button-badge > span {
    margin-left: 4px;
    margin-top: -2px;
    position: relative;
    transform: none !important;
}

.primary {
    color: var(--color-main);
}

.secondary-text {
    color: var(--color-toogle) !important;
}

.section {
    margin-top: 24px;
    margin-bottom: 16px;
}

.section h4 {
    display: flex;
    align-items: center;
}

.section h4 svg {
    font-size: 16px;
    margin-left: 4px;
    opacity: 0.5;
    margin-top: 2px;
}

.grayscale {
    filter: grayscale(1);
}

.PnsLogo {
    filter: var(--logo-filter);
}

.PnsLogoWrapper {
/*
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    border-radius: 100%;
    text-align: center;
    padding-top: 35%;
*/
    padding-top: 0%;
}

.PnsLogoHome {
    content: var(--logo-home);
}

.PnsLink {
    cursor: pointer;
}

.PnsIconLink {
    line-height: 12px;
}

.PnsClickable {
    cursor: pointer !important;
}

.PnsChip-sizeExtraSmall {
    height: 18px !important;
}

.PnsLoader {
    z-index: 1202 !important;
    position: absolute !important;
    width: calc(100% - var(--drawer-width));
    top: 0;
}

@media (max-width: 1919px) {
    .PnsLoader {
        width: calc(100% - var(--drawer-width));
    }
}

.PnsLoader-active {
}

.PnsLoader-inactive {
    background-color: var(--color-secondary);
}

/** AppBar **/

.PnsAppBar {
    position: absolute;
    transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, margin 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
    min-height: var(--toolbar-height);
}

.PnsAppBar-buttons {
    margin-top: 39px;
    margin-left: 1%;
    align-self: flex-start;
}

@media (max-width: 1440px) {
    .PnsAppBar-buttons {
        margin-left: 0;
    }
}

.PnsAppBar-border {
    border-bottom: var(--primary-border);
}

.PnsAppBar-color {
    color: var(--font-color) !important;
    background-color: var(--color-primary) !important;
}

.PnsAppBar-secondary-color {
    color: var(--font-color) !important;
    background-color: transparent !important;
}

.PnsAppBar-user-popper {
    z-index: 2;
}

.PnsAppBar-user-avatar {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 10px;
}

.PnsAppBar-user-avatar-badge {
    background-color: #44b700;
    color: #44b700;
    box-shadow: 0 0 0 2px #fff;
}

.PnsAppBar-user-avatar-badge::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: ripple 1.2s infinite ease-in-out;
    content: "";
}

@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

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

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

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

.PnsAppBar-user-avatar-dropdown {
    margin-left: -8px !important;
}

.PnsAppBar-user-avatar-dropdown-icon {
    font-size: 30px !important;
}

.PnsAppbar-user-menu-action {
    margin-top: 10px !important;
    border-radius: 100px !important;
}

/** Scroll page **/

.PnsScrollPage {
    height: calc(100vh - var(--toolbar-default-height) - var(--footer-height));
    overflow-y: scroll;
}

/** Login **/

.PnsLogin {
    height: calc(100vh - var(--footer-height));
    overflow-y: scroll;
    background-color: var(--color-secondary);
}

.PnsLoginContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.PnsLoginButton {
    margin-top: 16px !important;
    width: 250px;
}

.PnsLoginMessageAnchor {
    top: 0 !important;
    transform: none !important;
}

.PnsLoginMessageRoot {
    left: 0 !important;
    right: 0 !important;
}

.PnsLoginMessage {
    width: 100%;
    border-radius: 0 !important;
    background-color: var(--login-bg-color) !important;
    color: var(--font-color) !important;
    box-shadow: none !important;
}

/** Tabs **/

.PnsTabs {
    width: 100%;
    --pns-tab-min-width: calc(100% / 3);
    background-color: var(--color-primary);
}

.PnsTabs-container {
    width: 100% !important;
}

.PnsTabs-indicator {
    width: var(--pns-tab-min-width) !important;
}

.PnsTab {
    min-width: var(--pns-tab-min-width) !important;
    min-height: 48px !important;
}

.PnsTab-wrapper {
    display: flex !important;
}

.PnsTab-wrapper-start {
    flex-direction: row !important;
}

.PnsTab-wrapper-start svg {
    margin-right: 5px;
}

.PnsTab-wrapper-end {
    flex-direction: row-reverse !important;
}

.PnsTab-wrapper svg {
    margin-bottom: 0 !important;
    width: 17px;
}

/** Dialog **/

.PnsDialogPopper {
    width: calc(100% - 64px) !important;
}

.PnsDialog {
    border-radius: 10px !important;
}

.PnsDialog-nomax {
    max-width: none !important;
    width: unset !important;
}

.PnsDialog > .MuiDialogContent-root {
    padding: 8px 24px 24px 24px !important
}

.PnsDialog > .MuiDialogActions-root {
    padding: 16px 24px !important;
    height: 80px;
    border-top: 1px solid var(--alternative-border-color);
    color: var(--font-color);
}

.MuiDialogActions-spacing > :not(:first-child) {
    margin-left: 8px;
}

.PnsDialog > .MuiDialogTitle-root {
    height: 64px;
    border-bottom: 1px solid var(--alternative-border-color);
    color: var(--font-color);
}

.PnsDialog > .MuiDialogTitle-root > p {
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
}

.PnsDialog .MuiDataGrid-root .MuiDataGrid-columnsContainer,
.PnsDialog .MuiDataGrid-root .MuiDataGrid-columnHeaders {
    border-bottom: 1px solid var(--alternative-border-color) !important;
}

.PnsDialogContentText {
    margin-top: 16px !important;
    margin-bottom: 12px !important;
}

.PnsDialogContentNoPadding {
    padding: 0 !important;
}

/** Home **/

.PnsHome {
    background-color: var(--color-primary) !important;
    overflow-y: auto;
}

.PnsHomeLogo {
    text-align: left;
    padding: 8px;
}

.PnsHomeContainer {
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.PnsHome-closed {
    padding-top: 150px;
}

.PnsHomeHelpBtn {
    text-transform: inherit !important;
    border-radius: 4px !important;
    margin-left: 8px !important;
    margin-top: 8px !important;
}

.PnsHomeSearchBox {
    position: relative;
}

.PnsHomeTutorialsImg {
    margin-top: -104px;
    margin-left: -32px;
}

.PnsHomeTutorials {
    padding: 8px;
}

.PnsHomeTutorials-close-btn {
    float: right;
}

/** Toolbar **/

.PnsToolbar {
    padding-right: 24px;
    padding-left: 24px;
    min-height: var(--toolbar-height) !important;
}

.PnsToolbar-search {
    align-self: flex-start;
    margin-top: 10px;
    width: 100%;
}

/** Drawer **/

.PnsDrawerGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.PnsDrawerGrid > div {
    text-align: center;
    padding: 4px;
}

.PnsDrawer-paper {
    width: var(--drawer-width) !important;
    border-right: none !important;
    border-left: none !important;
    background-color: var(--drawer-color) !important;
}

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

.PnsDrawer-content > a {
    width: 100%;
    height: 75px;
    text-decoration: none;
    margin-bottom: 5px;
}

.PnsDrawer-divider {
    border-color: var(--drawer-color) !important;
    height: 2px !important;
}

.PnsDrawer-toolbar {
    min-height: var(--toolbar-height) !important;
}

/** Drawer card **/

.PnsDrawerCard {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 12px !important;
    position: relative;
}

.PnsDrawerCard > span:first-of-type {
    width: 20px;
    height: 20px;
}

.PnsDrawerCard-active {
    background-color: var(--color-primary);
    border-left: 5px solid var(--color-main) !important;
    border-right: 2px solid var(--drawer-color);
}

.PnsDrawerCard-active h6 {
    color: var(--color-main) !important;
}

.PnsDrawerCard-active > span {
    margin-left: -5px;
}

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

.PnsDrawerCard-title > h6 {
    font-size: 12px !important;
    color: var(--font-color);
    margin-top: 8px;
    line-height: 1em;
}

.PnsDrawerCard-isBeta {
    position: absolute;
    font-weight: normal;
    font-size: 10px;
    background: var(--color-primary);
    color: var(--font-color);
    opacity: 0.9;
    border-radius: 10px;
    text-align: center;
    line-height: 12px;
    margin-top: 5px;
    padding: 0 4px;
}

.PnsDrawerCard-isBeta--active {
    color: var(--color-main);
}

.PnsDrawerCard-badge {
    transform: none !important;
    right: -20px !important;
    top: -10px !important;
}

.PnsDrawerCard-badge-active {
    background-color: var(--color-secondary) !important;
    color: var(--color-main) !important;
    border: 1px solid var(--color-main) !important;
}

/** Icons **/

.PnsSearchIcon {
    content: var(--search-icon);
}

.PnsSearchIcon-alt {
    content: var(--search-icon-alt);
}

.PnsStartreeIcon {
    content: var(--startree-icon);
}

.PnsStartreeIcon-alt {
    content: var(--startree-icon-alt);
}

.PnsSummaryIcon {
    content: var(--summary-icon);
}

.PnsSummaryIcon-alt {
    content: var(--summary-icon-alt);
}

.PnsAlertsIcon {
    content: var(--alerts-icon);
}

.PnsAlertsIcon-alt {
    content: var(--alerts-icon-alt);
}

.PnsCmIcon {
    content: var(--cm-icon);
}

.PnsCmIcon-alt {
    content: var(--cm-icon-alt);
}

.PnsExpandIcon {
    content: var(--expand-icon);
}

.PnsInboxUnselectedIcon {
    content: var(--inbox-unselected-icon);
    width: 100%;
}

.PnsMoveIcon {
    content: var(--move-icon);
    width: 100%;
}

.PnsCalibrationIcon {
    content: var(--calibration-icon);
    width: 100%;
}

.PnsDotsIcon {
    content: var(--dots-icon);
    width: 100%;
}

.PnsChartIcon {
    content: var(--chart-icon);
    width: 100%;
}

.PnsMinimizeIcon {
    content: var(--minimize-icon);
}

/** Panel **/

.PnsPanel {
    height: calc(var(--content-body-height) - 48px);
    overflow-y: auto;
}

.PnsPanelHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.PnsPanelHeader > svg {
    margin-right: 5px;
}

.PnsPanelHeader > p {
    font-weight: 500;
}

.PnsPanelContent {
    display: flex;
    flex-direction: column;
}

.PnsPanelContentItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--font-color) !important;
    padding-left: 2px;
    padding-top: 2px;
}

.PnsPanelContentItem > svg {
    color: var(--font-color);
    margin-right: 5px;
}

.PnsPanelContentItem > span {
    cursor: pointer;
}

.PnsPanelContentItem > span:hover {
    text-decoration: underline;
}

.PnsPanelSlider {
    margin-left: 17px !important;
    width: calc(100% - 34px) !important;
    margin-bottom: 4px !important;
}

.PnsPanelSlider-root {
    height: 2px !important;
}

.MuiSlider-markLabel {
    top: 25px !important;
}

.PnsPanelSlider-thumb {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px !important;
    width: 35px !important;
    background-color: var(--color-primary) !important;
    border: 2px solid var(--color-main);
    border-radius: 100px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.PnsPanelSlider-thumb:after {
    content: none !important;
}

.PnsPanelSlider-valueLabel {
    background-color: transparent !important;
    color: inherit !important;
    top: 17px !important;
    padding: 0 !important;
}

.PnsPanelSlider-valueLabel::before {
    display: none;
}

.PnsPanelSlider-mark-label {
    top: unset !important;
    bottom: 22px;
    color: #828282 !important;
    font-weight: 700 !important;
}

.PnsPanelSlider .MuiSlider-rail,
.PnsPanelSlider .MuiSlider-track {
    width: 100%;
    height: 8px;
    position: absolute;
    top: 11px;
}

.PnsPanelRadioGroup > label {
    margin-left: 8px !important;
}

.PnsPanelRadioGroup > label > span {
    padding: 4px !important;
}

.PnsPanelRadio {
    color: var(--color-main) !important;
}

/** View **/

.PnsView {
    margin-left: var(--drawer-width);
    background: var(--color-primary);
    height: 100%;
}

.PnsView > .PnsContent-scroll {
    height: var(--content-height);
    overflow-y: scroll;
    background-color: var(--color-primary);
}

.PnsView > .PnsContent-inbox,
.PnsView > .PnsContent-inbox > .PnsContent-main,
.PnsView > .PnsContent-inbox > .PnsContent-main > .PnsContent-main,
.PnsView > .PnsContent-simple > .PnsContent-scroll {
    height: calc(var(--content-height) - 50px);
}

.PnsViewTabs > .PnsContent-inbox,
.PnsViewTabs > .PnsContent-inbox > .PnsContent-main,
.PnsViewTabs > .PnsContent-inbox > .PnsContent-main > .PnsContent-main,
.PnsViewTabs > .PnsContent-simple > .PnsContent-scroll {
    height: calc(var(--content-height) - 100px);
}

.PnsViewTabs > .PnsTabs {
    border-bottom: var(--primary-border);
}

/** Content **/

.PnsContent {
    height: var(--content-height);
    display: grid;
    position: relative;
    background-color: var(--color-primary);
}

.PnsContentCard {
}

.PnsContentCustomizationContainer {
    cursor: grab;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    box-shadow: var(--container-shadow);
    border-radius: 4px;
    align-items: stretch;
    justify-content: center;
    background: var(--color-primary);
}

.PnsContentBareCustomizationContainer {
    display: flex;
    flex-direction: row;
    padding-bottom: 6px;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid var(--primary-border-color);
}

.PnsContentBareCustomizationContainer::after {
    content: var(--drag-icon);
    margin-right: 5px;
    margin-top: 3px;
}

.PnsContentCustomizationContainerPriority {
    width: 39px;
    background-color: var(--color-main-100);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-shrink: 0;
}

.PnsContentCustomizationContainerBarePriority {
    width: 28px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    align-items: flex-start;
    justify-content: center;
    display: flex;
}

.PnsContentCustomizationBareList {
    cursor: grab;
    padding: 0 0 10px 0 !important;
}

.PnsContentCustomizationContainerText {
    margin-left: 16px !important;
    align-items: center;
    justify-content: center;
    display: flex;
    line-height: 22px;
    padding: 13px 0 15px 0;
}

.PnsContentBareCustomizationContainerText {
    margin-left: 8px !important;
    align-items: center;
    justify-content: center;
    display: flex;
}

.PnsContentCustomizationContainerIcon {
    width: 56px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.PnsContent-search {
    grid-template-areas: "calibration main .";
}

.PnsContent-search-hidden {
    grid-template-areas: "main .";
}

.PnsContent-search-6 {
    grid-template-columns: 48px minmax(var(--main-min), var(--main-max)) minmax(620px, 100%);
}

.PnsContent-search-6__open {
    grid-template-columns: 230px minmax(var(--main-min), var(--main-max)) minmax(600px, 100%);
}

.PnsContent-search-6__hidden {
    grid-template-columns: minmax(var(--main-min), var(--main-max)) minmax(620px, 100%);
}

.PnsContent-search-8 {
    grid-template-columns: 48px minmax(var(--main-min), var(--main-max)) minmax(840px, 100%);
}

.PnsContent-search-8__open {
    grid-template-columns: 230px minmax(var(--main-min), var(--main-max)) minmax(720px, 100%);
}

.PnsContent-search-8__hidden {
    grid-template-columns: minmax(var(--main-min), var(--main-max)) minmax(840px, 100%);
}

.PnsContent-search-10 {
    grid-template-columns: 48px minmax(var(--main-min), var(--main-max)) minmax(1000px, 100%);
}

.PnsContent-search-10__open {
    grid-template-columns: 230px minmax(var(--main-min), var(--main-max)) minmax(970px, 100%);
}

.PnsContent-search-10__hidden {
    grid-template-columns: minmax(var(--main-min), var(--main-max)) minmax(1000px, 100%);
}

.PnsContent-search-12 {
    grid-template-columns: 48px minmax(var(--main-min), var(--main-max)) minmax(1240px, 100%);
}

.PnsContent-search-12__open {
    grid-template-columns: 230px minmax(var(--main-min), var(--main-max)) minmax(1210px, 100%);
}

.PnsContent-search-12__hidden {
    grid-template-columns: minmax(var(--main-min), var(--main-max)) minmax(1240px, 100%);
}

.PnsContent-calibration {
    transition: width 1s;
    grid-area: calibration;
}

.PnsContent-calibration-open {
    display: none;
}

.PnsContent-calibration-open .PnsPanelContent,
.PnsContent-calibration-open .PnsContent-calibration-header {
    padding: 0 8px;
}

.PnsContent-calibration-closed {
    display: block;
    padding: 0 8px;
}

.PnsContent-search-open .PnsContent-calibration-closed {
    display: none;
}

.PnsContent-search-open .PnsContent-calibration-open {
    display: block;
}

.PnsContent-calibration-header {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #808080;
}

.PnsContent-calibration-header > h5 {
    margin-right: 8px;
    font-weight: 700;
}

.PnsContent-calibration-dots {
    margin-top: calc((var(--content-body-height) - 48px - 30px) / 2);
    text-align: center;
}

.PnsContent-calibration-dots > span {
    width: 6px;
}

.PnsContent-calibration-header span.PnsCalibrationIcon {
    width: 24px;
    height: 24px;
}

.PnsContent-inbox-menu {
    grid-area: menu;
    height: 50px;
    border-bottom: var(--primary-border);
    padding: 0 12px 0 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.PnsContent-inbox-menu-divider {
    margin-right: 5px !important;
    margin-left: 5px !important;
    height: 30px !important;
}

.PnsContent-inbox-menu-input {
    border-radius: 4px;
    background-color: var(--input-color);
    padding-right: 4px;
    padding-left: 4px;
    border: var(--input-border);
}

.PnsContent-inbox-main {
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

.PnsContent-inbox-unselected {
    background-color: var(--primary-border-color);
    padding: 8% 5% 0 5%;
    min-height: 100%;
    text-align: center;
}

.PnsContent-inbox-fab {
    position: fixed !important;
    bottom: 16px;
    right: 16px;
}

.PnsContent-inbox {
    grid-template-columns: 540px 1fr;
    grid-template-areas: "menu menu" "main .";
}

.PnsContent-menu-input {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.PnsContent-menu-input-chip {
    margin: 2px 8px 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.PnsContent-menu-input input {
    margin-left: 4px;
}

.PnsContent-menu-list {
    height: 300px;
    overflow-y: scroll;
}

.PnsContent-menu-list > div {
    height: 33px !important;
}

.PnsContent-popper-paper {
    width: 288px;
}

.PnsContent-main {
    min-width: var(--main-min);
    max-width: var(--main-max);
    grid-area: main;
    height: var(--content-height);
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

.PnsContent-facets {
    height: calc(var(--content-height) - var(--facets-tabs-panel-height));
    display: grid;
}

.PnsContent-facets-6 {
    grid-template-columns: repeat(3, minmax(var(--card-min-width), 1fr));
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". . ." ". . .";
}

.PnsContent-facets-8 {
    grid-template-columns: repeat(4, minmax(var(--card-min-width), 1fr));
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". . . ." ". . . .";
}

.PnsContent-facets-10 {
    grid-template-columns: repeat(5, minmax(var(--card-min-width), 1fr));
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". . . . ." ". . . . .";
}

.PnsContent-facets-12 {
    grid-template-columns: repeat(6, minmax(var(--card-min-width), 1fr));
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". . . . . ." ". . . . . .";
}

.PnsContentMain {
    border-right: var(--primary-border);
    border-left: var(--primary-border);
}

.PnsContentList {
    border-right: var(--primary-border);
}

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

.PnsDndList-disabled {
    opacity: 0.5;
    overflow-y: hidden !important;
}

.PnsWorkspace {
    position: relative;
    border-top: var(--primary-border);
    margin-top: -1px;
}

/** Facet tabs **/

.PnsFacetsTabsPanel {
    display: flex;
    background-color: var(--color-primary);
    border-right: var(--primary-border);
}

.PnsFacetsTabs {
    width: 100%;
}

.PnsFacetsTabs .MuiTabs-flexContainer {
    height: 48px !important;
}

.PnsFacetsTabs .MuiTabs-flexContainer button {
    padding: 0 10px !important;
}

.PnsFacetsTabs .MuiTabs-flexContainer button:not(.PnsFacetsTabRoot) {
    border-radius: unset !important;
    border: none !important;
    background-color: transparent !important;
}

.PnsFacetsTabs .MuiTabs-flexContainer button .PnsFacetTab-title {
    white-space: nowrap !important;
    display: inline-block;
    width: calc(100% - 10px);
    overflow: hidden;
    text-align: left;
}

.PnsFacetsTabs .MuiTabs-flexContainer button .PnsFacetTab-title:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    background: linear-gradient(to right, transparent, var(--color-bg-alternative));
    content: "";
}

.PnsFacetsTabs .MuiTabs-flexContainer button.Mui-selected .PnsFacetTab-title:after {
    background: linear-gradient(to right, transparent, var(--color-primary));
}

.PnsFacetsTabRoot {
    background-color: var(--color-bg-alternative) !important;
    border-right: 1px solid var(--primary-border-color) !important;
    flex: 1;
    min-width: 30px !important;
    max-width: 240px !important;
    flex-direction: row !important;
    cursor: pointer !important;
}

.PnsFacetsTabRoot__active {
    min-width: 240px !important;
    background-color: var(--header-color) !important;
}

.PnsFacetsTabRoot__active .PnsFacetTab-title {
    color: var(--color-main) !important;
}

.PnsFacetsTabRoot__active .PnsFacetTab-title:after {
    width: 100px !important;
}

.PnsFacetsTabRoot__active.PnsFacetsTabRoot__paging .PnsFacetTab-paging {
    display: block;
}

.PnsFacetTab-paging {
    position: relative;
    display: none;
    margin-left: 5px;
}

.PnsFacetsTabs-reorderBtn {
    margin-left: auto !important;
    width: 48px;
    height: 48px;
    border-radius: initial !important;
}

.PnsFacetTab-icon {
    background: var(--color-bg-alternative);
    border: 1px solid var(--color-bg-alternative);
    color: var(--color-main);
    border-radius: 4px;
    z-index: 1;
    padding: 0 3px;
    margin: 1px;
}

.PnsFacetTab-icon__active {
    border: 1px solid var(--color-main);
    background: var(--color-main);
    color: var(--color-primary);
}

.PnsFacetTab-icon:hover {
    border: 1px solid var(--color-main);
}

/** Facet source group **/

.PnsFacetGroup {
}

.PnsFacetGroup-divider {
    margin-bottom: 10px !important;
}

.PnsFacetGroup-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.PnsFacetGroup-group li {
    padding-left: 8px !important;
}

.PnsFacetGroup-root > .MuiTreeItem-content .MuiTreeItem-label:hover,
.PnsFacetGroup-root > .MuiTreeItem-content .MuiTreeItem-label {
    background-color: transparent !important;
}

.PnsFacetGroup-label {
    padding-left: 0 !important;
}

.PnsFacetGroup-menu .PnsMcatsDocs,
.PnsFacetGroup-label .PnsMcatsDocs {
    background-color: var(--color-main) !important;
    color: var(--color-secondary) !important;
}

.PnsFacetGroup-menu .PnsMcatsLabel,
.PnsFacetGroup-label .PnsMcatsLabel {
    font-weight: 500;
}

.PnsFacetGroup-icon {
    position: absolute !important;
    z-index: 2;
    margin-left: 2px;
    background: var(--color-bg-alternative) !important;
    border-radius: 6px !important;
}

.PnsFacetGroup-icon:hover {
    background: var(--color-main) !important;
}

.PnsFacetGroup-icon:hover svg {
    color: var(--color-primary) !important;
}

/** Facet source dialog **/

.PnsFacetGroup-layout {
    display: flex;
    flex-direction: column;
    height: 500px;
    width: 550px;
    overflow-y: hidden;
    position: relative;
}

.PnsFacetGroup-dialog-content {
    padding: 8px 0 24px 0;
}

.PnsFacetGroup-dialog-no-padding {
    padding: 8px 0;
    overflow-x: hidden;
    flex: 1 1 auto;
    overflow-y: auto;
}

.PnsFacetGroup-dialog-no-padding .PnsDialogContentText,
.PnsFacetGroup-dialog-content .PnsDialogContentText {
    padding: 0 24px;
}

.PnsFacetGroup-groups {
    width: calc(550px + 48px);
}

.PnsFacetGroup-groups .input-icon {
    padding: 0 24px;
}

.PnsFacetGroup-groups .DataTable {
    margin-top: 16px;
    height: 432px;
}

.PnsFacetGroup-groups .DataTable-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.PnsFacetGroup-groups .MuiTypography-body1 {
    font-weight: 700 !important;
}

.PnsFacetGroup-form {
    width: 100%;
    padding: 8px 0 8px 0 !important;
}

.PnsFacetGroup-name {
    font-weight: 600 !important;
    padding: 16px 16px 0 16px;
}

.PnsFacetGroup-name-divider {
    height: 2px !important;
    background-color: var(--color-main) !important;
    margin: 0 16px !important;
}

.PnsFacetGroup-detail {
    display: grid;
    grid-template-columns: 253px 287px;
    gap: 10px;
    height: 100%;
}

.PnsFacetGroup-detail > div {
    display: flex;
    flex-direction: column;
    height: 500px;
    position: relative;
}

.PnsFacetGroup-detail-sources {
    width: 100%;
}

.PnsFacetGroup-sources,
.PnsFacetGroup-suggestions {
    height: calc(500px - 42px - 30px - 16px);
    margin: 8px 0 8px 0 !important;
    z-index: 1;
}

.PnsFacetGroup-toogle-sm {
    width: 100%;
    padding: 4px 8px 4px 8px !important;
}

.PnsFacetGroup-toogle-sm > span {
    font-size: 12px;
}

.PnsFacetGroup-toogle-sm > svg {
    height: 20px;
    width: 20px;
}

.PnsFacetGroup-toogle-match {
    color: var(--color-main) !important;
}

.PnsFacetGroup-toogle-selected {
    color: var(--color-primary) !important;
    background-color: var(--color-main) !important;
}

.PnsFacetGroup-toogle-selected:hover {
    background-color: var(--color-toogle-selected-hover) !important;
}

.PnsFacetGroup-toogle-small {
    height: 2px !important;
}

.PnsFacetGroup-drop {
    background-color: var(--color-bg-alternative);
    border: 1px dashed #BDBDBD;
    height: 100%;
}

.PnsFacetGroup-drop > div {
    height: calc(500px - 70px);
    overflow-y: auto;
}

.PnsFacetGroup-drop-empty {
    height: calc(500px - 70px);
    text-align: center;
}

.PnsFacetGroup-drop-bar {
    padding: 8px 16px 16px 16px;
}

.PnsFacetGroup-drop-bar .simplebar-content {
    height: 100%;
}

.PnsFacetGroup-drop-empty > p {
    position: absolute;
    top: 50%;
    left: 85px;
    font-size: 15px;
}

.PnsFacetGroup-drag {
    display: flex;
    flex-direction: row;
    height: 34px;
    width: 100%;
    box-shadow: var(--container-shadow);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
}

.PnsFacetGroup-drag-li {
    margin-bottom: 8px;
}

.PnsFacetGroup-dialog {
    height: 40px;
    display: flex;
    flex-direction: row;
    padding: 0 24px !important;
    align-items: center;
    background-color: var(--negative-color);
}

.PnsFacetGroup-dialog-overlay {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: -1;
    transition: height 0.25s ease-out;
    overflow: hidden;
    width: 100%;
}

.PnsFacetGroup-dialog-overlay__active {
    z-index: 2;
    transition: height 0.25s ease-in;
    background: var(--carousel-backdrop);
    backdrop-filter: saturate(180%) blur(10px);
}

/** Footer **/

.PnsFooter {
    position: fixed;
    height: var(--footer-height);
    background-color: var(--login-bg-color);
    color: var(--font-color);
    bottom: 0;
    width: 100%;
}

.PnsFooter-content {
    height: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
}

.PnsFooter-links {
    display: flex;
    justify-self: end;
}

.PnsFooter-build {
    display: flex;
    justify-self: start;
}

.PnsFooterDivider.MuiDivider-root {
    margin-right: 10px;
    margin-left: 10px;
}

.PnsFooterDrawer {
    text-align: center;
    margin-bottom: 10px;
}

.PnsFooterDrawer > p {
    font-size: 10px !important;
    line-height: 13px;
}

.PnsFooterDrawer > p.MuiTypography-body2 {
    color: #BDBDBD;
}

.PnsFooterDrawer > p.MuiTypography-body1 > span.subtitle {
    color: #BDBDBD;
}

/** Card **/

.PnsCard-root {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--color-primary) !important;
    border-bottom: 1px solid var(--primary-border-color);
    border-right: 1px solid var(--primary-border-color);
}

.PnsCard-transparent {
    background-color: transparent !important;
}

.PnsCardMenuHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.PnsCardMenuPopper {
    z-index: 1201;
}

.PnsCardButton {
    color: #B2B2B2;
}

.PnsCardHeader {
    background-color: var(--card-header-color);
}

.PnsCardHeader-root {
    padding: 13px 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: var(--card-header-height);
}

.PnsCardHeader-content {
}

.PnsCardHeader-action {
    margin-right: 0 !important;
    margin-top: -2px !important;
}

.PnsCardHeader-title {
    align-items: center;
    display: flex;
    cursor: pointer;
}

.PnsCardHeader-filter {
    padding-top: 0 !important;
    padding-bottom: 2px !important;
}

.PnsCardHeader-icon {
    margin-right: 4px;
}

.PnsCardContent {
    overflow-y: scroll;
    height: calc(100% - var(--card-header-height));
}

.PnsCardContent-root {
    padding: 0 !important;
}

.PnsCardContent-root:last-child {
    padding-bottom: 0 !important;
}

.PnsCardActions-root {
    padding: 4px 12px !important;
}

.PnsCardListItem-icon {
    min-width: 0 !important;
    margin-right: 4px;
}

/** Search **/

.PnsSearch-mcatAccess {
    z-index: 1000;
    padding: 3px;
}

.PnsSearch-mcatAccess-paper {
    position: relative;
    top: 13px;
}

.PnsSearch-mcatAccess-bubbleArrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid var(--color-primary);
    top: -12px;
    left: 58px;
}

.PnsSearch-mcatAccess-item {
    padding: 3px 12px 5px 12px;
    color: var(--cm-string-color);
}

.PnsSearch-mcatAccess-item .MuiButton-root {
    height: 25px;
}

.PnsSearch-mcatAccess-mcat {
    margin-right: 42px;
}

.PnsSearchSuggestionText-disabled {
    color: #bdbdbd;
    padding-right: 5px;
}

.PnsSearchSuggestionsListRow-button {
    height: 15px;
    font-size: 10px !important;
}

.PnsSearch-container {
    z-index: 1;
    min-width: min-content;
    position: relative;
    padding: 8px;
}

.PnsSearch-container-row {
    display: flex;
    flex-direction: row;
}

.PnsSearch-open {
    background-color: var(--suggester-color) !important;
    box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.PnsSearch {
    display: flex;
    align-items: center;
    border-radius: 8px;
    flex-grow: 1;
    border: var(--input-border);
    background-color: var(--input-color) !important;
    padding: 5px 0;
}

/** Search suggestions */

.PnsSearchSuggestionsWrapper {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: content-box;
    box-shadow: 0 9px 8px -3px rgba(64, 60, 67, 0.24), 8px 8px 8px -7px rgba(64, 60, 67, 0.24), -8px 0 8px -7px rgba(64, 60, 67, 0.24);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--suggester-color);
    z-index: 2;
}

.PnsSearchSuggestions {
    padding: 10px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow-x: auto;
    background-color: var(--suggester-color);
}

.PnsSearchSuggestionsTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

.PnsSearchSuggestionsTitle > p {
    white-space: nowrap;
    font-weight: 500 !important;
}

.PnsSearchSuggestionsSeparator {
    width: 100%;
    margin-left: 10px !important;
    flex-shrink: unset !important;
}

.PnsSearchSuggestionsList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
}

.PnsSearchSuggestionsListItem {
    padding: 10px;
}

.PnsSearchSuggestionsListRow {
    padding-left: 8px !important;
    padding-right: 12px !important;
    border-radius: 4px !important;
}

.PnsSearchSuggestionsListRowContainer:hover {
    border-radius: 4px;
}

.PnsSearchSuggestionsListRowContainer:hover .MuiListItem-secondaryAction {
    padding-right: 140px !important;
}

.PnsSearchSuggestionsListSegment {
    cursor: pointer;
}

.PnsSearchSuggestionsListButton {
    min-width: 0 !important;
    padding: 0 4px 0 4px !important;
    font-size: 12px !important;
}

.PnsSearchSuggestionsListButton:hover {
    color: var(--color-main) !important;
}

.PnsSearchSuggestionsListArrow {
    font-size: 12px !important;
    margin-right: 8px;
    color: var(--arrow-color);
}

.PnsSearchSuggestionsListTail {
    min-height: 1px;
    min-width: 100px;
}

.PnsSearchSuggestionsListIcon {
    font-size: 12px !important;
    margin-right: 8px;
}

.PnsSearchSuggestionsSelected {
    opacity: 0.5;
}

.PnsSearchButtons {
    display: flex;
    align-self: flex-start;
    margin-left: 3px;
}

.PnsSearchButtons > button {
    margin-right: 3px;
}

.PnsSearchGroup {
    margin-left: 8px;
    margin-right: 8px;
}

.PnsSearchPhrase-root {
    margin-left: 0 !important;
}

.PnsSearch-icon {
    color: var(--font-color);
}

.PnsSearch-divider {
    height: 28px !important;
}

.PnsSearch-input {
    margin-left: 8px;
    flex: 1;
    display: block !important;
}

.PnsSearch-input > input {
    color: var(--font-color);
}

.PnsSearch-input > textarea {
    color: var(--font-color);
    resize: none;
}

.PnsSearch-button {
    border-radius: 8px !important;
    box-shadow: none !important;
    width: 34px;
    height: 34px;
    min-width: unset !important;
}

.MuiButtonBase-root.PnsSearch-button-resize {
    background-color: var(--color-primary);
}

.MuiButtonBase-root.PnsSearch-button-help {
    background-color: var(--color-primary);
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.PnsSearch-bar-button {
    border-radius: 8px !important;
    height: 46px;
    flex-shrink: 0;
    margin-left: 5px !important;
}

.PnsSearch-box {
    flex-grow: 1;
}

.PnsSearch-buttons {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.PnsSearch-buttons-lang-date {
    display: flex;
}

.PnsSearch-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.MuiToggleButtonGroup-root:focus {
    outline: none;
}

.PnsSearchLanguages {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 8px;
    border: var(--input-border);
    background-color: var(--input-color);
}

.PnsSearchToogle-grouped {
    margin: 4px !important;
    border: none !important;
}

.PnsSearchToogle-grouped:not(:first-child),
.PnsSearchToogle-grouped:first-child {
    border-radius: 4px !important;
}

.PnsSearchToogle-match-label {
    color: var(--color-main) !important;
}

.PnsSearchToogle-match-selected {
    color: var(--color-primary) !important;
    background-color: var(--color-main) !important;
}

.PnsSearchToogle-match-selected:hover {
    background-color: var(--color-toogle-selected-hover) !important;
}

.PnsSearchToogle-group-small {
    width: 100%;
    padding: 0 12px 0 12px !important;
}

.PnsSearchToogle-small {
    height: 32px !important;
}

.PnsSearchToogleTooltip {
    font-size: 13px !important;
}

.PnsSearchRange {
    height: 42px;
    border-radius: 8px !important;
    border: var(--input-border) !important;
    background-color: var(--input-color) !important;
    margin-right: 8px !important;
}

.PnsSearchRangeDates {
    text-align: left !important;
}

.PnsSearchRangeEndDates {
    font-size: 12px !important;
    line-height: 16px !important;
    color: #828282;
}

.PnsSearchPrecision {
    display: flex;
    height: 42px;
    border: 1px solid var(--color-main);
    border-radius: 4px;
    background-color: var(--input-color);
    align-items: center;
    padding: 5px 15px;
    margin-right: 8px;
}

.PnsSearchPrecision .delimiter {
    width: 16px;
    text-align: center;
}

.PnsSearchRange:hover {
    background-color: var(--input-hover) !important;
}

.PnsSearchRange-label {
    font-weight: 400 !important;
    text-transform: none !important;
}

.PnsSearchRangeMenu {
    width: 260px;
}

.PnsSearchRangeMenu-button:hover {
    color: var(--color-main);
}

.PnsSearchRangeMenu-icon {
    margin-right: 4px;
}

/* Noise Reduction */

.PnsNoiseReduction {
    width: 230px;
    height: 42px;
    border-radius: 8px !important;
    border: var(--input-border) !important;
    background-color: var(--input-color) !important;
    text-transform: none !important;
    font-weight: normal !important;
}

.endIcon--no-margin {
    margin-right: -10px !important;
    margin-left: 0 !important;
}

.PnsNoiseReduction-select-menu-btn {
    margin-right: 55px;
    position: relative;
}

@media (min-width: 1441px) {
    .PnsNoiseReduction {
        width: 255px !important;
    }

    .PnsNoiseReduction-select-menu-btn {
        margin-right: 80px !important;
    }
}

.PnsNoiseReduction-selected-count {
    background-color: var(--color-main) !important;
    color: var(--color-primary) !important;
    font-weight: bold;
    width: 34px;
    height: 22px;
    line-height: 20px;
    position: absolute;
    right: 30px;
}

.PnsNoiseReduction-items {
    max-height: 330px;
    overflow: auto;
}

.PnsNoiseReduction-help-item {
    outline: none !important; /* hide focus outline in Safari */
    padding: 10px 18px !important;
}

.NoiseReductionMenu-item--checked {
    text-decoration: line-through;
    color: #BDBDBD;
}

.PnsNoiseReduction-selection-item {
    padding: 4px 18px !important;
}

.PnsNoiseReduction-selection-btn {
    text-transform: none !important;
}

.PnsNoiseReduction-action-item {
    padding: 18px 16px 20px 16px !important;
}

.NoiseReductionMenu-itemTextRoot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.NoiseReductionMenu-checkbox {
    padding: 2px 0 !important;
}

/** Search Hits **/

.PnsSearchHits > div:first-of-type {
    border-right: var(--primary-border);
}

.PnsSearchHits {
}

.PnsSearchHits-grid {
    display: grid;
    grid-template-areas:
    'icon num'
    'icon desc';
    justify-content: center;
    align-items: center;
}

.PnsSearchHits-icon {
    grid-area: icon;
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.PnsSearchHits-num {
    grid-area: num;
    font-weight: 500 !important;
    font-size: 18px !important;
}

.PnsSearchHits-desc {
    grid-area: desc;
    font-size: 10px !important;
    color: var(--font-color);
    line-height: 14px !important;
}

/** Search Results **/

.PnsSearchResult {
    position: relative !important;
}

.PnsSearchResult-header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.PnsSearchResult-header .PnsTabs {
    --pns-tab-min-width: 28%;
}

.PnsSearchResult-header-actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: 10px;
}

.PnsSearchResult-header-actions > * {
    width: 80px;
    text-align: center;
    cursor: pointer;
}

.PnsSearchResult-wrapper {
    margin-top: -4px;
    min-height: var(--content-body-height);
}

.PnsSearchResult-li-box {
    margin-left: 8px;
}

.PnsSearchResult-li-text {
    width: 100%;
}

.PnsSearchResult-li-text > a {
    font-weight: 500;
}

.PnsSearchResult-li-header,
.PnsSearchResult-li-footer {
    width: 100%;
    display: flex;
    align-items: center;
}

.PnsSearchResult-li-time {
    font-weight: 700;
    font-size: 13px;
}

.PnsSearchResult-li-date {
    font-weight: 400;
}

.PnsSearchResult-li-icon {
    margin-right: 4px;
}

.PnsSearchResult-li-divider {
    margin-right: 2px;
    margin-left: 2px;
}

.PnsSearchResult-li-divider,
.PnsSearchResult-li-time,
.PnsSearchResult-li-date {
    color: #999999;
}

.PnsSearchResult-li-expanded {
    padding-left: 0 !important;
}

.PnsSearchResult-li {
    display: grid !important;
    grid-template-columns: 11px 1fr;
    grid-auto-rows: auto;
    grid-column-gap: 10px;
    grid-template-areas: "sentiment ." "sentiment ." "sentiment .";
}

.PnsSearchResult-li-sentiment {
    grid-area: sentiment;
    height: 100%;
    background: var(--scale);
    background-size: cover;
}

.PnsSearchResult-li-sentiment-wrapper {
    position: relative;
    height: 100%;
}

.PnsSearchResult-li-sentiment-pos {
    width: 8px;
    border-radius: 20px 20px 0 0;
    background: var(--positive-gradient);
    position: absolute;
    bottom: calc(50% + 1px);
    left: 50%;
    transform: translateX(-50%);
}

.PnsSearchResult-li-sentiment-neg {
    width: 8px;
    border-radius: 0 0 20px 20px;
    background: var(--negative-gradient);
    position: absolute;
    top: calc(50% + 1px);
    left: 50%;
    transform: translateX(-50%);
}

.PnsSearchResult-li-sentiment-neu {
    width: 8px;
    height: 100%;
}

.PnsSearchResult-sentiment-neutooltip {
    border: transparent !important;
}

.PnsSearchResult-sentiment-neuarrow {
    border: transparent !important;
}

.PnsSearchResult-sentiment-ptooltip {
    background-color: var(--positive-color) !important;
    border: transparent !important;
}

.PnsSearchResult-sentiment-parrow {
    color: var(--positive-color) !important;
    border: transparent !important;
}

.PnsSearchResult-sentiment-ntooltip {
    background-color: var(--negative-color) !important;
    border: transparent !important;
}

.PnsSearchResult-sentiment-narrow {
    color: var(--negative-color) !important;
    border: transparent !important;
}

.PnsSearchResultTopFab {
    position: absolute !important;
    bottom: 8px;
    right: 16px;
    z-index: 1;
}

.PnsSearchResultTopFab-root {
    background-color: #d5d5d5;
    opacity: 0.3;
}

.PnsSearchResultTopFab-root:hover {
    background-color: #d5d5d5;
    opacity: 1;
}

.PnsSearchResultInfo {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.PnsSearchResultInfo-reason {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PnsSearchResultChartDialogContent {
    padding: 0 !important;
}

@media (min-width: 1440px) {
    .MuiDialog-paperWidthMd {
        max-width: 75vw !important;
    }
}

.PnsSearchResultChartDialogChart {
    height: 70vh !important;
    padding-top: 20px;
}

.PnsSearchResultChartTabs {
    overflow: inherit !important;
    width: 100%;
}

.PnsSearchResultChartTabs-indicator {
    width: 25% !important;
}

.PnsSearchResultChartTab {
    min-width: 25% !important;
}

.PnsSearchResultChart {
    position: relative;
    height: 200px;
    padding-top: 20px;
    background-color: var(--color-primary) !important;
}

.PnsSearchResultChartLoading {
    height: 200px !important;
    animation: MuiSkeleton-keyframes-pulse 1.5s ease-in-out 0.5s infinite;
    width: 100%;
    background: var(--pulse-bg) var(--chart-skeleton) no-repeat center;
    background-size: contain;
}

.PnsSearchResultChartActions {
    position: absolute;
    top: 8px;
    right: 16px;
}

.PnsSearchResultPagination {
    padding-bottom: 8px !important;
}

.PnsSearchResultPagination-icon {
    padding-right: 2px;
}

.PnsSearchResultPagination-info {
    margin-right: 16px;
    margin-left: 16px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

/** Startree studio **/

.PnsStartreeRf {
    margin-left: var(--drawer-width);
    width: calc(100% - var(--drawer-width));
    height: var(--content-height);
    overflow: hidden;
}

.PnsStartree {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: content-box;
    background-color: var(--color-primary);
}

.PnsStartree .g6-component-toolbar {
    width: 36px;
    top: 100px;
    right: 32px;
    left: unset !important;
    background-color: var(--color-main-50);
    border: none !important;
}

.PnsStartreePanel {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: var(--drawer-width);
    border-right: var(--primary-border);
    height: 100%;
    width: 240px;
    background-color: var(--color-primary);
}

.PnsStartreePanel > ul {
    height: 100%;
    overflow-y: auto;
}

.PnsStartreePanelSubheader {
    background-color: var(--color-bg-alternative) !important;
}

.PnsStartreePanelSubheader > div,
.PnsStartreePanelSubheader > li {
    padding: 10px 0 10px 0;
}

.PnsStartreeToolbarPanel {
    position: absolute;
    top: 100px;
    right: 32px;
}

.PnsStartreeToolbar {
    background-color: var(--color-bg-alternative);
    border-radius: 6px;
    padding: 12px 6px 12px 6px;
    display: flex;
    flex-direction: column;
}

.PnsStartreeToolbar > button:not(:last-child) {
    margin-bottom: 6px;
}

.PnsStartreeToolbar > button.MuiToggleButton-root {
    padding: 4px !important;
    border: none !important;
    color: var(--color-main);
}

.PnsStartreeZoom {
    margin-top: 20px;
    background-color: var(--color-bg-alternative);
    border-radius: 6px;
    padding: 16px 6px 16px 6px;
    height: 100px;
}

.PnsStartreeTooltip {
    background-color: var(--input-color) !important;
    color: var(--color-main) !important;
    box-shadow: var(--box-shadow);
}

.PnsStartreeSearchPanel {
    position: absolute;
    bottom: 0;
    margin-left: var(--drawer-width);
    width: calc(100% - var(--drawer-width));
}

.PnsStartreeSearchPanel-full {
    position: fixed;
    margin-left: 0 !important;
    width: 100% !important;
    z-index: 100000;
}

.PnsStartreeSearchWrapper {
    padding: 20px;
    overflow-y: hidden;
    transition: height 0.4s linear;
}

.PnsStartreeSearchWrapper.expanded {
    min-height: 40px;
    border-top: var(--primary-border);
    background-color: var(--color-primary);
    opacity: 0.95;
}

.PnsStartreeSearch {
    display: flex;
    align-items: center;
    border-radius: 4px;
    box-shadow: var(--box-shadow);
    min-width: 350px;
    background-color: var(--input-color);
    padding: 4px;
}

.PnsStartreeSearchIcon {
    margin-left: 8px;
    margin-right: 8px;
}

.PnsStartreeSearchSuggestions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    margin-top: 20px;
}

.PnsStartreeSearchSuggestionButton {
    cursor: pointer;
    color: var(--color-main);
}

.PnsStartreeSearchArea {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px;
}

.PnsStartreeSearch-chip {
    margin: 2px 8px 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.PnsStartreeSearch-input {
    flex: 1;
    font-size: 14px;
    height: 30px;
    box-sizing: border-box;
    width: 0;
    min-width: 150px;
    border: 0;
    outline: 0;
}

.PnsStartreeLoader {
    position: absolute;
    top: 50%;
    left: 50%;
}

/** Relevance **/

.PnsRelevanceTooltip {
    line-height: 1em !important;
}

/** Mcats **/

.PnsMcatsRow {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.PnsGroupsRow {
    padding-left: 20px !important;
    padding-right: 12px !important;
}

.PnsMcatsRowContainer:hover .MuiListItem-secondaryAction {
    padding-right: 122px !important;
}

.PnsMcatsBtn {
    min-width: 0 !important;
    padding: 0 4px 0 4px !important;
    font-size: 10px !important;
}

.PnsMcatsDocs {
    min-width: 40px;
    margin-right: 4px !important;
    background-color: var(--color-bg-alternative) !important;
    border-radius: 16px;
    justify-content: center;
    display: inline-flex;
}

/** Search Manager **/

.PnsSearchManagerFull {
    background-color: var(--color-secondary);
    min-height: calc(100vh - 64px);
}

.PnsSearchManagerFull-li {
    margin-left: 10px;
}

.PnsSearchManagerTitle {
    margin-left: 10px !important;
}

.PnsSearchManagerDate {
    margin-right: 10px !important;
}

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

.PnsSearchManager-actual {
    background-color: var(--color-secondary);
    height: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.PnsSearchManager-query {
    font-weight: 500 !important;
    margin-right: 4px !important;
}

.PnsSearchManager-date {
    font-weight: 500 !important;
    margin-right: 8px !important;
}

/** Search Balancer **/

.PnsSearchBalancer {
    height: 50px;
}

.PnsSearchBalancer-slider {
    margin-top: 0 !important;
}

/** Scrolling [Safari, Chrome] **/

.PnsFixedList {
    height: 100%;
}

.PnsScrollbar-container {
    width: 100%;
}

.PnsDrawer > ::-webkit-scrollbar,
.PnsFixedList::-webkit-scrollbar,
.PnsLogin::-webkit-scrollbar,
.PnsScrollPage::-webkit-scrollbar,
.PnsCardContent::-webkit-scrollbar,
.PnsContent-main::-webkit-scrollbar,
.PnsContent-scroll::-webkit-scrollbar,
.PnsSummary::-webkit-scrollbar {
    width: 0; /* remove scrollbar space */
    height: 0;
    background: transparent; /* optional: just make scrollbar invisible */
}

/** Scrolling [FF, IE] **/
.PnsFixedList,
.PnsDrawer,
.PnsLogin,
.PnsScrollPage,
.PnsCardContent,
.PnsContent-main,
.PnsContent-scroll,
.PnsSummary {
    scrollbar-width: none;
}

/** Progress **/

.PnsAlertSaveButton .PnsProgressButton {
    min-width: 150px !important;
}

.PnsAlertSaveButton {
    margin: 8px;
    width: 150px;
}

.PnsProgressButton-wrapper {
    position: relative;
}

.PnsProgressIconButton-wrapper {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.PnsProgressButton-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
}

/** Material **/

.MuiAlert-root {
    font-size: 15px !important;
    width: 500px;
    border-radius: 10px !important;
    padding-right: 28px !important;
}

.MuiAlert-icon {
    color: #fff !important;
    font-size: 30px !important;
    margin-right: 8px !important;
}

.MuiAlert-action {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.MuiAlert-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 27px;
}

.PnsAlert-Message-text2 {
    color: #828282;
    font-size: 14px;
    margin-top: 4px;
}

.MuiAlert-standardSuccess {
    color: #219653 !important;
    background: linear-gradient(90deg, #27AE60 63px, #EFF7EE 63px) !important;
}

.MuiAlert-standardSuccess .MuiIconButton-root {
    color: #27AE60;
}

.MuiAlert-standardWarning {
    color: #F2994A !important;
    background: linear-gradient(90deg, #F2994A 63px, #FCEADA 63px) !important;
}

.MuiAlert-standardWarning .MuiIconButton-root {
    color: #F2994A;
}

.MuiAlert-standardError {
    color: #EB5757 !important;
    background: linear-gradient(90deg, #EB5757 63px, #FCE7E7 63px) !important;
}

.MuiAlert-standardError .MuiIconButton-root {
    color: #EB5757;
}

.MuiAlert-standardInfo {
    color: #5552EC !important;
    background: linear-gradient(90deg, #7775F0 63px, #EEEEFD 63px) !important;
}

.MuiAlert-standardInfo .MuiIconButton-root {
    color: #5552EC;
}

/** Material List **/

.MuiList-root {
    outline: none !important; /* hide focus outline in Safari */
}

.MuiListItemSecondaryAction-full {
    right: 0 !important;
    height: 100% !important;
    display: flex;
    align-items: center;
}

.MuiListItemSecondaryAction-hidden {
    visibility: hidden;
}

.MuiListItem-tight {
    height: 25px;
}

.MuiListItem-container {
    display: block !important;
}

.MuiListItem-container .MuiListItem-actions:hover {
    background-color: unset !important;
}

.MuiListItem-container:hover {
    background-color: var(--color-hover);
}

.MuiTreeItem-content .MuiListItem-container:hover {
    background-color: unset;
}

.MuiListItem-container:hover .MuiListItemSecondaryAction-hidden {
    visibility: inherit;
}

/** Data Grid **/

.MuiDataGrid-root {
    border: none !important;
    border-radius: unset !important;
}

.MuiDataGrid-columnSeparator {
    display: none !important;
}

.MuiDataGrid-root .MuiDataGrid-cell {
    border-bottom: none !important;
}

.MuiDataGrid-root .MuiDataGrid-colCell,
.MuiDataGrid-root .MuiDataGrid-cell:focus,
.MuiDataGrid-root .MuiDataGrid-columnHeader {
    outline: none !important;
}

.MuiDataGrid-root .MuiDataGrid-colCell,
.MuiDataGrid-root .MuiDataGrid-cell,
.MuiDataGrid-root .MuiDataGrid-columnHeader {
    padding: 0 24px !important;
}

.MuiDataGrid-cell:focus-within {
    outline: none !important;
}

.MuiDataGrid-root .MuiDataGrid-overlay {
    background-color: var(--color-primary) !important;
}

.MuiDataGrid-root .MuiDataGrid-columnsContainer,
.MuiDataGrid-root .MuiDataGrid-columnHeaders {
    border-bottom: none !important;
    background-color: var(--color-bg-alternative);
    z-index: 1;
}

.MuiDataGrid-row {
    border-bottom: 1px solid #eeeefd;
}

.dark .MuiDataGrid-row {
    border-color: #222;
}

.MuiDataGrid-root .MuiDataGrid-columnsContainer {
    position: sticky !important;
}

.MuiDataGrid-colCellTitle,
.MuiDataGrid-columnHeader {
    font-weight: 600 !important;
}

/** Table **/

.DataTable {
    width: 100%;
}

.DataTable > div {
    height: 100% !important;
}

.DataTablePagination {
    display: flex;
}

.DataTable-reverse-actions {
    flex-direction: row-reverse !important;
}

.DataTable-reverse-actions > div {
    padding-right: 16px;
}

.DataTable-alt .MuiDataGrid-root .MuiDataGrid-columnsContainer,
.DataTable-alt .MuiDataGrid-root .MuiDataGrid-columnHeaders {
    background-color: var(--color-bg-alternative) !important;
    color: #828282;
}

.dark .DataTable-alt .MuiDataGrid-root .MuiDataGrid-columnsContainer,
.dark .DataTable-alt .MuiDataGrid-root .MuiDataGrid-columnHeaders {
    color: #bdbdbd !important;
}

.DataTable-alt .MuiDataGrid-root .MuiDataGrid-row:hover {
    background-color: var(--color-bg-alternative) !important;
}

.DataTable-border .MuiDataGrid-columnsContainer,
.DataTable-border .MuiDataGrid-columnHeaders {
    border-bottom: var(--primary-border) !important;
}

.DataTable-border .MuiDataGrid-root .MuiDataGrid-cell {
    border-bottom: 1px solid var(--primary-border-color) !important;
}

/** Pns History **/

.PnsQueriesSearch {
    max-width: 270px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    flex-grow: 1;
    height: 40px;
    border: var(--input-border);
    background-color: var(--input-color) !important;
    padding-left: 8px;
}

.PnsQueriesSearch-input {
    margin-left: 8px;
    flex: 1;
}

/** Error Pages **/

.PnsErrorPage {
    height: calc(100% - var(--footer-height));
}

/** Modal **/

.PnsModal {
    position: absolute;
    background-color: var(--color-primary);
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.PnsModalTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.PnsModalIcon {
    margin-right: 8px;
}

.PnsContentModal {
    position: absolute;
    background-color: var(--color-primary);
    z-index: 2;
    top: calc(var(--toolbar-height) - 2px);
    left: var(--drawer-width);
    right: 0;
    bottom: 0;
}

.PnsBottomModal {
    position: absolute;
    background-color: var(--drawer-color);
    z-index: 2;
    left: var(--drawer-width);
    right: 0;
    bottom: 0;
}

@media (max-width: 1919px) {
    .PnsContentModal,
    .PnsBottomModal {
        left: 0;
    }
}

/** Smart summaries **/

.PnsSummaryWrapper {
}

.PnsView > .PnsContent-inbox > .PnsSummaryWrapper > .PnsSummary {
    height: calc(var(--content-height) - 50px);
}

.PnsSummary {
    height: var(--content-height);
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    padding: 40px 60px;
}

.PnsSummaryPage {
    max-width: 750px;
    padding-right: 120px;
}

.PnsSummarModal {
    height: calc(var(--content-height) - 62px);
}

.PnsSummaryTitle {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 48px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2em !important;
}

.PnsSummarySubheader {
    display: flex;
    flex-direction: row;
}

.PnsSummarySubheaderDivider {
    font-weight: 400;
    color: #999999 !important;
    margin-left: 8px;
    margin-right: 8px;
}

.PnsSummarySubheader > a,
.PnsSummarySubheader > p {
    font-weight: 600 !important;
}

.PnsSummaryContent {
    padding-top: 32px;
}

.PnsSummaryContent > p {
    font-size: 18px !important;
    line-height: 30px !important;
    color: var(--font-color) !important;
}

.PnsSummaryAvatar {
    width: 20px !important;
    height: 20px !important;
    float: left;
    margin-right: 4px !important;
    padding: 0 !important;
}

.PnsSummaryAvatar-ready {
    background-color: var(--color-alternative) !important;
}

.PnsSummaryAvatarIcon {
    width: 13px !important;
    height: 13px !important;
}

.PnsSummaryAvatarIcon-wip {
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/** Help **/

.PnsHelp {
    display: flex !important;
    padding: 0 32px 24px 32px !important;
}

.PnsHelp div {
    min-width: 600px;
}

.PnsHelp h6 {
    font-weight: 600;
}

.PnsHelp div:first-child {
    margin: 0 16px 0 0;
}

.PnsHelpTable > tr {
    vertical-align: baseline;
}

@media (max-width: 1279px) {
    .PnsHelp {
        flex-direction: column;
    }

    .PnsHelp div:first-child {
        margin: 0 0 16px 0;
    }
}

/** Form **/

.PnsForm {
}

.PnsForm > div:not(:last-child) {
    margin-bottom: 10px;
}

.PnsFormGroup-row {
    display: flex !important;
    flex-direction: row !important;
}

.PnsFormElement > label,
.PnsFormGroup > label,
.PnsFormGroupItem > label {
    margin-left: 0 !important;
}

.PnsFormGroup > div:not(:last-child) {
    margin-right: 10px;
}

.PnsFormGroupItem {
    flex: 1;
    padding-right: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--form-color);
    border-radius: 4px;
}

.PnsFormGroup-odd {
    background-color: var(--form-color);
    border-radius: 4px;
}

.PnsFormGroup-start {
    align-items: flex-start;
}

.PnsFormLabel {
    font-weight: 500 !important;
    opacity: 0.8 !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

.PnsFormControlLabel {
    margin-left: -9px !important;
}

.PnsFormInput-sm {
    width: 100px !important;
    height: 30px;
    flex-grow: initial !important;
}

.PnsFormElement-lg {
    width: 900px;
}

.PnsFormElement-md {
    width: calc(900px / 2);
}

.PnsFormTabs {
    min-height: 42px !important;
}

.PnsFormTabs > div {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.PnsFormTab {
    background-color: var(--form-color) !important;
    min-height: 40px !important;
}

.PnsFormTab-indicator {
    display: none !important;
}

.PnsFormTab.Mui-selected {
    background-color: var(--color-main) !important;
    color: #fff !important;
}

.PnsFormTabContent {
    min-height: 40px;
    background-color: var(--form-color);
    border-radius: 0 0 4px 4px !important;
}

.PnsFormAutocomplete > div.Mui-disabled {
    color: var(--font-color) !important;
}

/** Alert **/

.PnsAlertModalTitle {
    display: flex;
    justify-content: space-between;
}

.PnsSearchAlert-subheader {
    background-color: var(--color-primary);
    display: flex;
    height: 30px;
    align-items: center;
    color: #828282 !important;
}

.PnsSearchAlert-subheader .MuiChip-root {
    background-color: #f2f2f2;
    color: #828282;
}

.PnsContent-inbox-main .PnsSearchAlert-subheader {
    padding-left: 10px;
}

.PnsSearchAlert-subheader > button.Mui-disabled {
    color: var(--color-main);
}

.PnsSearchAlert-subheader > * {
    margin-right: 5px;
    padding: 0 !important;
}

.PnsSearchAlert-li {
    display: flex !important;
    flex-direction: row;
    padding-right: 16px !important;
    padding-left: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.PnsSearchAlert-li.selected {
    background-color: var(--color-bg-alternative) !important;
}

.PnsSearchAlert-li-container .MuiListItemIcon-root {
    min-width: 24px;
}

.PnsSearchAlert-li-content {
    padding-left: 5px;
}

.PnsSearchAlert-li-icon {
    padding: 5px !important;
    margin-right: 8px !important;
    margin-right: 0 !important;
    color: #bdbdbd !important;
}

.PnsSearchAlert-li.selected .PnsSearchAlert-li-icon.Mui-checked,
.PnsSearchAlert-li-icon.Mui-checked,
.PnsContent-inbox-menu-icon.Mui-checked {
    color: var(--color-main) !important;
}

.PnsContent-inbox-menu-icon {
    padding: 10px !important;
}

.PnsSearchAlert-li-time {
    opacity: 0.6;
    min-width: 70px;
    text-align: right;
    align-self: flex-start;
}

.PnsSearchAlert-li-container:hover .PnsSearchAlert-li-time {
    visibility: hidden;
    min-width: 145px;
}

.PnsSearchAlert-li-button {
    background-color: var(--color-alternative) !important;
    text-transform: none !important;
    font-size: 10px !important;
    margin-left: 10px !important;
    min-width: unset !important;
}

.PnsSearchAlert-li-icon-button {
    padding: 3px !important;
}

.PnsSearchAlert-li-button .MuiSvgIcon-root {
    font-size: 18px !important;
}

.PnsSearchAlert-btn-container {
    z-index: 1;
}

.PnsSearchAlert-btn-title {
    padding-left: 8px !important;
    background-color: var(--color-primary);
}

.PnsSearchAlertSettings {
    padding-bottom: var(--bottom-bar-height);
}

/** Case manager **/

.PnsCmNew {
    position: absolute !important;
    right: 56px;
    bottom: 56px;
    z-index: 1;
}

.PnsCmNew-icon {
    margin-right: 5px;
}

.PnsCmSection {
    margin: 24px 24px 10px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

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

.PnsCmSection-icon {
    width: 37px;
    height: 37px;
    background-color: var(--color-bg-alternative);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.PnsCmSection-actions {
    display: flex;
    align-items: center;
}

.PnsCmSection-icon .MuiSvgIcon-root {
    width: 14px;
    height: 14px;
}

.PnsCmCarousel-container {
    padding: 24px 24px;
}

.PnsCmCarousel-container .slick-next::before,
.PnsCmCarousel-container .slick-prev::before {
    color: var(--color-main);
}

.PnsCmCarousel-container .slick-next.slick-disabled,
.PnsCmCarousel-container .slick-prev.slick-disabled {
    display: none !important;
}

.PnsCmCarousel-container .slick-next,
.PnsCmCarousel-container .slick-prev {
    height: calc(100% - 52px);
}

.PnsCmCarousel-container .slick-prev {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    left: -22px;
}

.PnsCmCarousel-container .slick-next {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    right: -22px;
}

.PnsCmCarousel-container .slick-list {
    padding: 20px 0;
    margin: -20px 0;
}

.PnsCmCarousel-container .slick-slider-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.PnsCmCarousel-container .slick-slider-dots-offset-15 {
    bottom: -15px;
}

.PnsCmCarousel-container .slick-slider-dots > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.PnsCmCarousel-container .slick-slider-dots > ul > li {
    margin: 0 4px;
}

.PnsCmCarousel-container .slick-slider-dots > ul > li.slick-active > button {
    background: var(--color-main);
    color: var(--color-main);
}

.PnsCmCarousel-container .slick-slider-dots > ul > li > button {
    background: var(--color-main-200);
    color: var(--color-main-200);
    height: 4px;
    width: 35px;
    overflow: hidden;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.PnsCmCarouselItem {
    background: var(--carousel-color);
    padding: 16px;
    height: 160px;
    box-sizing: border-box;
    box-shadow: var(--carousel-box-shadow);
    border-radius: 6px;
    margin: 10px;
}

.PnsCmCarouselItem-loading {
    padding: 16px;
    height: 160px;
    border-radius: 6px;
    margin: 10px;
}

.PnsCmCarouselItem-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.PnsCmCarouselItem-header > span {
    opacity: 0.5;
}

.PnsCmCarouselItem-title {
    word-break: break-all;
    margin-top: 8px;
    font-weight: 600;
}

.PnsCmCarouselItem-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 56px /* fallback */
}

.PnsCmCarouselItem-actions {
    margin-top: 5px;
}

.PnsCmCarouselItem-tooltip {
    background-color: var(--color-main) !important;
    border: transparent !important;
}

.PnsCmCarouselItem-arrow {
    color: var(--color-main) !important;
    border: transparent !important;
}

.PnsCmCarouselItem-actions > a,
.PnsCmCarouselItem-actions > button {
    background-color: var(--color-primary);
    margin-right: 8px;
    border: 2px solid var(--color-main-200);
    width: 36px;
    height: 36px;
}

.PnsCmCarouselItem-actions > a:hover,
.PnsCmCarouselItem-actions > button:hover {
    background-color: var(--color-primary);
    border: 2px solid var(--color-main);
}

.PnsCmCarouselItem-actions > button:last-of-type {
    margin-right: 0;
}

.PnsCmCarousel-container .slick-slide > div {
    transform: scale(1.0);
    transition: transform .65s, -webkit-transform .65s;
}

.PnsCmCarousel-container:not(.PnsCmCarousel-container--no-zoom) .slick-slide:hover > div {
    transform: scale(1.1);
    transition: transform .65s, -webkit-transform .65s;
}

.PnsCmCarousel-container .slick-slide:hover .PnsCmCarouselItem-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.PnsCmCarousel-container .slick-slide:hover .PnsCmCarouselItem-backdrop {
    display: block;
}

.PnsCaseItemIcon {
    min-width: unset !important;
}

.PnsCmCarouselItem-backdrop {
    display: none;
    width: calc(100% - 20px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--carousel-backdrop);
    backdrop-filter: saturate(180%) blur(10px);
    border-radius: 6px;
    margin-left: 10px;
}

.PnsCmCarouselItem-actions {
    display: none;
    width: calc(100% - 20px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    margin-left: 10px;
}

.PnsCmTable-chip {
    font-size: 12px;
    border-radius: 40px;
    padding: 0 5px 0 5px;
}

.PnsCmTable-chip-odd {
    background-color: var(--color-secondary);
    color: var(--color-main);
    border: 1px solid var(--color-main);
}

.PnsCmTable-chip-even {
    background-color: var(--color-main);
    color: var(--color-secondary);
    border: 1px solid var(--color-main);
}

.SourceGroupsList .MuiDataGrid-row,
.CaseManagerList .MuiDataGrid-row,
.AlertSettingsDataGrid .MuiDataGrid-row {
    cursor: pointer;
}

/** Bottom bar **/

.PnsBottomBar {
    bottom: 0;
    top: auto !important;
    left: var(--drawer-width) !important;
    width: unset !important;
    height: var(--bottom-bar-height);
    background-color: var(--color-alternative) !important;
    padding: 17px 23px;
    border-top: var(--primary-border);
}

@media (max-width: 1919px) {
    .PnsBottomBar {
        left: var(--drawer-width) !important;
    }
}

/** CM **/

.CodeMirror {
    background-color: var(--input-color);
    line-height: 2em;
}

.CodeMirror,
.CodeMirror-scroll {
    max-height: 50vh;
}

.cm-s-default .cm-string {
    color: var(--cm-string-color);
    font-weight: 500;
}

.cm-s-default .cm-string.CodeMirror-selectedtext {
    color: #fff !important;
}

.cm-s-default .cm-bracket {
    color: var(--color-main);
    font-weight: 500;
}

.CodeMirror, .cm-s-default .cm-field {
    color: var(--cm-field-color);
}

.cm-s-default .cm-field.CodeMirror-selectedtext {
    color: var(--color-bg-alternative);
}

.cm-s-default .cm-operator {
    color: var(--color-main);
    background-color: var(--alternative-border-color);
    padding: 4px 7px;
    border-radius: 4px;
    display: inline;
    font-weight: 500;
}

.cm-s-default .cm-operator.CodeMirror-selectedtext {
    background-color: var(--color-primary);
}

.cm-s-default .cm-operator + .cm-operator {
    padding-left: 0;
    margin-left: -7px;
}

.cm-s-default .cm-field + .cm-string,
.cm-s-default .cm-field + .cm-string + .cm-string.CodeMirror-selectedtext,
.cm-s-default .cm-field + .cm-string + .cm-string.CodeMirror-selectedtext + .cm-string,
.cm-s-default .cm-field + .cm-string.CodeMirror-selectedtext + .cm-string,
.cm-s-default .cm-field + .CodeMirror-selectedtext + .cm-string,
.cm-s-default .cm-field + .CodeMirror-selectedtext + .cm-string.CodeMirror-selectedtext + .cm-string {
    color: var(--cm-field-string);
    font-weight: 400;
}

.cm-s-read {
    color: #828282;
}

.cm-s-read .cm-string {
    color: var(--color-main);
    font-weight: 500;
}

/* Case Dialog */

.SavedQueryNameField {
    margin-bottom: 24px !important;
}

.MostRecentCasesLabel {
    font-weight: 500 !important;
    opacity: 0.8 !important;
    margin-bottom: 12px !important;
}

.CasesList {
    min-height: 190px;
    max-height: 190px !important;
    overflow: auto;
}

.CasesList--lg {
    max-height: 40vh !important;
}

.CasesListItem {
    cursor: pointer;
    border: 1px solid #5552EC40;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 5px 8px !important;
}

.CasesListItem--selected {
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-main) !important;
}

.CaseCheckbox {
    color: var(--color-main-800) !important;
    padding: 0 !important;
    margin-right: 8px !important;
}

.CaseCheckbox.Mui-checked:not(.Mui-disabled) {
    color: var(--color-primary) !important;
}

.CaseCheckbox.Mui-disabled {
    color: #ebebeb !important;
}

.CreateCaseToggleBtn {
    flex-shrink: 0;
    margin-left: 12px !important;
}

.NewCaseNameInput {
    margin-top: 14px;
}

.PnsContextMenu {
    z-index: 1;
}

.AddToCaseDialogArticleLike {
    margin-bottom: 0 !important;
}

.PnsFilterInput .MuiInputBase-inputTypeSearch {
    margin-right: 8px;
}

/* Case */

.PnsCase {
    grid-template-rows: min-content min-content 1fr;
}

.PnsCase .MuiIconButton-root {
    color: #828282;
}

.PnsCase .MuiTable-root {
    padding-bottom: var(--cm-actions-height);
}

.PnsCase-withNote .MuiTable-root {
    padding-bottom: calc(var(--cm-actions-height) + var(--cm-notes-height));
}

.PnsCase-breadcrumbs {
    height: var(--breadcrumbs-height);
}

.PnsCase-table {
    max-height: calc(var(--content-height) - var(--breadcrumbs-height) - var(--title-height));
}

.PnsCase-table-btn {
    background: var(--color-bg-alternative) !important;
    border-radius: 6px !important;
}

.PnsCase-table-btn:hover {
    background: var(--color-main) !important;
}

.PnsCase-table-btn:hover svg {
    color: var(--color-primary) !important;
}

.PnsCase-showNote {
    position: fixed !important;
    bottom: 115px;
    right: 44px;
}

.PnsCase .MuiBreadcrumbs-root {
    font-size: 15px;
    margin: 24px 26px 12px 26px;
}

.PnsCase .PnsPageTitleContainer {
    margin: 19px 26px 18px 26px;
}

.PnsCase .MuiBreadcrumbs-root span {
    color: #828282;
}

.PnsCase .MuiTabs-flexContainer {
    border-bottom: 2px solid #e5e5e5;
}

.PnsCase .MuiTabs-scroller {
    height: min-content;
}

.tox .tox-menu {
    background-color: var(--tox-bg-color) !important;
}

.tox .tox-collection__item {
    color: var(--tox-color) !important;
}

.tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--tox-hover-color) !important;
}

.tox .tox-collection--list .tox-collection__item--enabled {
    background-color: var(--color-toogle-match-hover) !important;
}

.PnsCaseNote {
    padding: 14px 42px 0 49px !important;
    flex-grow: 1;
}

.PnsCaseNote .tox {
    border-radius: 4px;
    border-color: var(--tox-outer-border-color);
}

.PnsCaseNote .tox .tox-tbtn,
.PnsCaseNote .tox .tox-tbtn:hover,
.PnsCaseNote .tox .tox-tbtn:active,
.PnsCaseNote .tox .tox-tbtn:focus {
    color: var(--tox-color) !important;
}

.PnsCaseNote .tox .tox-tbtn:hover,
.PnsCaseNote .tox .tox-tbtn--enabled {
    background: var(--tox-hover-color);
}

.PnsCaseNote .tox .tox-tbtn__select-chevron svg,
.PnsCaseNote .tox .tox-tbtn svg,
.PnsCaseNote .tox .tox-tbtn__select-chevron:hover svg,
.PnsCaseNote .tox .tox-tbtn:hover svg,
.PnsCaseNote .tox .tox-tbtn__select-chevron:active svg,
.PnsCaseNote .tox .tox-tbtn:active svg,
.PnsCaseNote .tox .tox-tbtn__select-chevron:focus svg,
.PnsCaseNote .tox .tox-tbtn:focus svg {
    fill: var(--tox-color) !important;
}

.PnsCaseNote .tox .tox-tbtn--disabled svg,
.PnsCaseNote .tox .tox-tbtn--disabled:hover svg,
.PnsCaseNote .tox .tox-tbtn:disabled svg,
.PnsCaseNote .tox .tox-tbtn:disabled:hover svg {
    fill: #999999 !important;
}

.PnsCaseNote .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
    border-right-color: var(--tox-inner-border-color);
}

.PnsCaseNote .tox .tox-edit-area__iframe {
    background-color: var(--color-bg-alternative);
}

.PnsCaseNote .tox-toolbar__primary {
    background: none !important;
    border-bottom: 1px solid var(--tox-inner-border-color);
    background-color: var(--tox-bg-color) !important;
}

.PnsCaseNote .tox .tox-toolbar-overlord {
    background: none;
}

.PnsCaseNote .tox-toolbar__group:nth-child(4)::before {
    content: '';
    height: 100%;
    border-left: 1px solid var(--tox-inner-border-color);
    padding-right: 4px;
}

.PnsCaseNote .tox-toolbar__group:nth-child(4) {
    margin-left: auto;
}

.PnsCase-actions {
    padding: 30px 42px 31px 49px;
    width: 100%;
    height: var(--cm-actions-height);
    position: absolute;
    bottom: 0;
    backdrop-filter: blur(3px);
    background-color: var(--color-primary-t88);
}

.PnsCase-editor {
    position: absolute;
    width: 100%;
    height: var(--cm-notes-height);
    bottom: var(--cm-actions-height);
    backdrop-filter: blur(3px);
    background-color: var(--color-primary-t88);
}

.PnsCase-editor-fullscreen {
    backdrop-filter: none;
}

.PnsCase-editor .Windowed-icon {
    display: block !important;
}

.PnsCase-editor .Fullscreen-icon {
    display: none !important;
}

.PnsCase-editor-fullscreen .Windowed-icon {
    display: none !important;
}

.PnsCase-editor-fullscreen .Fullscreen-icon {
    display: block !important;
}

.PnsCmItemsTable .MuiTableCell-root {
    padding: 8px 0 8px 0;
    border: none;
}

.PnsCmItemsTable .CodeMirror-line {
    padding: 0 !important;
}

.PnsCmItemsTable .MuiTableCell-paddingNone {
    padding: 0;
}

.PnsCmItemsTable .MuiTableCell-root:first-child {
    width: 1%;
}

.PnsCmItemsTable .MuiTableCell-root:not(:last-child) {
    padding-right: 10px;
}

.PnsCase-qa-cell {
    padding-left: 17px !important;
    width: 1%;
}

.PnsCase-qa-cell .MuiSvgIcon-root {
    vertical-align: middle;
}

.PnsCmItemsTable .MuiTableRow-head {
    height: 30px;
}

.PnsCmItemsTable .MuiTableCell-head {
    white-space: nowrap;
}

.PnsCmItemsTable .MuiTableSortLabel-root {
    color: inherit !important;
}

.PnsCmItemsTable .MuiTableHead-root .MuiTableRow-root:first-child .MuiTableCell-head {
    background-color: var(--color-bg-alternative);
    color: #828282 !important;
    font-weight: 700;
    font-size: 13px;
}

.dark .PnsCase .MuiTableHead-root .MuiTableRow-root:first-child .MuiTableCell-head {
    color: #bdbdbd !important;
}

.MuiDataGrid-columnHeaderTitle {
    color: #828282 !important;
    font-weight: 700;
    font-size: 13px;
}

.dark .MuiDataGrid-columnHeaderTitle {
    color: #bdbdbd !important;
}

.PnsCase .MuiTableSortLabel-root {
    color: #828282 !important;
}

.dark .PnsCase .MuiTableSortLabel-root {
    color: #bdbdbd !important;
}

.PnsCmItemsTable .MuiTableCell-head .MuiSvgIcon-root {
    vertical-align: middle;
}

.PnsCmItemsTable .MuiTableHead-root .MuiTableCell-root:first-child {
    text-align: right;
}

.PnsCmItemsTable .MuiTableHead-root .MuiTableCell-root:last-child {
    padding-right: 26px;
}

.PnsCmItemsTable .MuiTableBody-root .MuiTableRow-root .MuiTableCell-root:first-child {
    padding-left: 11px;
}

.PnsCm .PnsCmItemsTable .MuiTableBody-root .MuiTableRow-root .MuiTableCell-root:first-child {
    padding-left: 24px;
}

.PnsCm .PnsCmItemsTable .MuiTableBody-root .MuiTableRow-root .MuiTableCell-root:last-child,
.PnsCm .PnsCmItemsTable .MuiTableHead-root .MuiTableCell-root:last-child {
    padding-right: 47px;
}

/*.dark .PnsCase .MuiTableBody-root .MuiTableRow-root .MuiTableCell-root:first-child {*/
/*    border-color: #000;*/
/*}*/

.PnsCase-itemAction {
    margin-right: 10px !important;
}

.PnsCmItemsTable .MuiTableBody-root .MuiTableRow-root .MuiTableCell-root:last-child {
    padding-right: 15px;
}

.PnsCase-collapsible-row .MuiTableCell-root {
    border-bottom: 1px solid #eeeefd;
}

.dark .PnsCase-collapsible-row .MuiTableCell-root {
    border-color: #222;
}

.PnsCase-item .MuiTableCell-root:first-child {
    padding: 8px 8px 8px 0;
    line-height: 0;
}

.PnsCmItemsTable .MuiTable-root {
    border-collapse: separate;
}

.PnsCase-item,
.PnsCase-collapsible-row {
    cursor: pointer;
}

.PnsCase-item-hover,
.PnsCase-collapsible-row-hover {
    pointer-events: auto;
    background-color: var(--color-hover);
}

.PnsCmItemsTable .CodeMirror,
.PnsCmItemsTable .CodeMirror-scroll {
    max-height: unset;
    background: none;
}

.PnsCmItemsTable .CodeMirror-lines {
    cursor: pointer;
}

.PnsCase-collapsible {
    margin: 0 0 14px 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.PnsCase-collapsible-search {
    margin-left: 0 !important;
}

.PnsCase-collapsible .PnsSearchResult-li-time,
.PnsCase-collapsible .PnsSearchResult-li-date,
.PnsCase-collapsible .PnsSearchResult-li-divider {
    color: var(--cm-string-color);
}

.PnsCase-collapsible .PnsSearchResult-li-text .MuiTypography-root {
    color: #828282;
}

.dark .PnsCase-collapsible .PnsSearchResult-li-text .MuiTypography-root {
    color: #e0e0e0;
}

.no-vertical-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.PnsCase-menu {
    z-index: 1
}

.PnsCase-menu .MuiSvgIcon-root {
    font-size: 16px !important;
}

/** Query **/

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

.PnsQueryBody {
    width: 700px;
    font-family: monospace !important;
}

/** List **/

.PnsList-li {
    display: flex !important;
    flex-direction: row;
    padding: 8px 16px 8px 12px !important;
}

.PnsList-li.selected {
    background-color: var(--color-bg-alternative) !important;
}

.PnsList-li .MuiListItemIcon-root {
    min-width: 24px !important;
}

.PnsList-li-content {
    padding-left: 5px;
}

.PnsList-li-icon {
    padding: 5px !important;
    margin-right: 8px !important;
    margin-right: 0 !important;
    color: #bdbdbd !important;
}

.PnsList-li.selected .PnsList-li-icon.Mui-checked,
.PnsList-li-icon.Mui-checked {
    color: var(--color-main) !important;
}

.PnsIconButton {
    border-radius: 50% !important;
    min-width: unset !important;
}

.PnsPageTitle {
    font-size: 18px !important;
    line-height: 22px !important;
    letter-spacing: -0.3px !important;
    margin-right: 10px !important;
}

.PnsPageTitleContainer,
.PnsInputActionContainer {
    display: flex;
    align-items: center;
}

.PnsPageTitleContainer > *,
.PnsInputActionContainer > * {
    margin-right: 16px !important;
}

.PnsPageTitleContainer .MuiButtonBase-root,
.PnsInputActionContainer .MuiButtonBase-root {
    padding: 6px !important;
}

.PnsPageTitleContainer .MuiSvgIcon-root,
.PnsInputActionContainer .MuiSvgIcon-root {
    width: 16px;
    height: 16px;
}

.PnsCalibrationContent {
    height: var(--content-height);
    background-color: var(--color-primary);
}

.PnsCalibrationActions {
    display: flex;
    justify-content: space-evenly;
    padding: 22px 0;
    position: sticky;
    bottom: 0;
    backdrop-filter: blur(3px);
    background-color: var(--color-primary-t88);
    border-top: 1px var(--primary-border-color) solid;
}

.PnsCalibrationOverallPanel {
    padding: 7px 6px 13px 7px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-alternative);
    border-radius: 6px;
    margin-top: 10px;
    margin-bottom: 13px;
}

.PnsCalibrationOverallActionsPanel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0 18px 0;
    color: #828282;
}

.PnsCalibrationButton {
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 1px 3px !important;
    min-width: 55px !important;
    text-transform: none !important;
    font-weight: 400;
}

.PnsCalibrationButton.MuiButton-outlinedPrimary {
    background-color: var(--color-primary);
}

.PnsCalibrationApplyButton {
    margin-top: 7px !important;
}

.PnsCalibrationApply {
    padding-left: 5px;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
}

/* Packages & Workspaces Settings */

.PnsPackageSettingsDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
}

.PnsPackageSettingsDialog .PnsPackageSettings-DialogContent {
    padding: 0 !important;
}

.PnsBoxesListing {
    padding: 20px 59px 20px 106px;
}

.PnsPackageListing {
    background-color: var(--color-bg-alternative);
}

.PnsBoxesListing-BackBtn {
    margin-left: -14px !important;
    margin-bottom: 16px !important;
}

.PnsPackageCard {
    display: flex;
    flex-direction: column;
    border-radius: 10px !important;
    box-shadow: none !important;
    width: 180px;
    max-width: 190px;
    height: 228px;
    padding: 0 8px !important;
    border: 2px solid var(--color-main);
}

.PnsPackageCard--disabled {
    border: 1px solid var(--card-border-color);
}

.PnsPackageCard:not(.PnsPackageCard--disabled) {
    cursor: pointer;
}

.PnsPackageCard .MuiCardContent-root {
    position: relative;
    border-radius: 10px;
    background-color: var(--color-bg-alternative);
    text-align: center;
    padding: 8px 12px !important;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.PnsPackageCard--disabled .MuiCardContent-root {
    background-color: var(--tox-outer-border-color);
}

.PnsPackageCard-description:after {
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 16px;
    background: linear-gradient(to bottom, transparent, var(--color-bg-alternative));
    content: "";
}

.PnsPackageCard .MuiCardHeader-root {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.PnsPackageCard .MuiCardHeader-content {
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.PnsPackageCard .MuiCardHeader-title {
    color: var(--color-main);
    font-weight: 600;
    text-align: center;
}

.PnsPackageCard--disabled .MuiCardHeader-title {
    color: #BDBDBD;
}

.PnsWorkspaceCard {
    position: relative;
    height: 212px;
}

.WorkspaceCard-deleteBtn {
    visibility: hidden;
    position: absolute !important;
    z-index: 1;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    color: var(--color-primary) !important;
    background-color: var(--color-main) !important;
    border-radius: 50%;
}

.PnsWorkspaceCard-wrapper {
    position: relative;
}

.PnsWorkspaceCard-wrapper:hover .WorkspaceCard-deleteBtn {
    visibility: visible !important;
}

.WorkspaceCard-deleteBtn svg {
    width: 16px;
    height: 16px;
}

.PnsWorkspaceCard--new {
    border: 2px solid var(--color-main-200);
}

.PnsWorkspaceCard--new .MuiCardHeader-title {
    color: var(--color-main-200);
}

.PnsWorkspaceCard--editing {
    width: 210px;
    cursor: auto !important;
}

.PnsWorkspaceCard--editing .MuiCardHeader-title {
    text-align: left;
}

.PnsWorkspaceCard .MuiCardContent-root {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.PnsPackageSettings-EditWorkspace {
    height: 100%;
}

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

.PnsPackageSettings-AvailableWorkspaceItems {
    height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

.PnsPackageSettings-content {
    height: 100%;
    min-height: 300px;
    padding: 26px 24px 36px 106px;
}

.PnsPackageSettings-content-title {
    color: #828282;
}

.PnsModalTitle-mainTitle {
    color: var(--font-color-contrast) !important;
}

.PnsModalTitle-subTitle {
    color: #828282;
}

.PnsPackageSettings-FacetsPanel {
    width: 290px;
    padding-top: 24px !important;
}

.PnsPackageSettings-WorkspaceArea {
    width: 100%;
    height: 100%;
    align-content: flex-start;
    background-color: var(--color-bg-alternative);
    border: 1px dashed #bdbdbd;
    border-radius: 6px;
    padding: 8px 21px 24px 9px;
}

.PnsPackageSettings-ListArea {
    width: 100%;
    height: 100%;
    align-content: flex-start;
}

.PnsPackageSettings-PageSeparator {
    color: #bdbdbd;
    font-weight: 500;
}

.PnsPackageSettings-PageSeparator:before,
.PnsPackageSettings-PageSeparator:after {
    border-top-color: #bdbdbd !important;
}

.PnsPackageSettings-EditWorkspace {
    margin-top: 0 !important;
}

.EditWorkspaceCard-workspaceName {
    color: var(--color-main);
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.ListingContent-boxes {
    display: flex;
    gap: 40px;
    padding: 0 24px;
}

.PackageCard-toggleBtn {
    margin-right: 0 !important;
    margin-left: -8px !important;
}

.EditableWorkspaceName-renameWorkspaceBtn {
    border-radius: 50%;
    margin-left: 12px !important;
    background-color: var(--color-main) !important;
    color: var(--color-primary) !important;
    width: 28px;
    height: 28px;
}

.EditableWorkspaceName-renameWorkspaceBtn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 1919px) {
    .PnsBoxesListing {
        padding: 20px 32px;
    }

    .ListingContent-boxes {
        gap: 20px;
    }

    .PnsDetailHeader {
        background-color: var(--color-bg-alternative);
        padding: 10px 32px 10px 55px;
    }

    .PnsBoxesListing-BackBtn {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .PnsPackageHeader {
        margin-top: 16px;
        margin-left: 70px;
    }

    .PnsPackageHeader-name {
        font-weight: 700;
        font-size: 18px;
        line-height: 22px;
    }

    .PnsPackageHeader-facets {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #828282;
    }

    .PnsPackageSettings-content {
        padding: 0 24px 0 70px;
    }
}

.CodeMirror-selected, input::selection {
    background-color: var(--color-main) !important;
    color: #fff;
}

/* Startree Finder */

.StartreeFinderPage {
    height: calc(100% - 265px);
}

.StartreeFinderPage-breadcrumbs {
    display: flex;
    align-items: center;
    height: 65px;
    color: #828282;
}

.StartreeFinder {
    display: flex;
    border: var(--primary-border);
    border-left: none;
    font-size: 13px;
    overflow: auto;
    height: 100%;
}

.StartreeFinderCol {
    border: var(--primary-border);
    border-top: none;
    border-bottom: none;
    overflow: auto;
    min-width: 320px;
}

.StartreeFinderColList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.StartreeFinderColItem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: pointer;
    height: 38px;
}

.StartreeFinder:first-child,
.StartreeFinderCol:first-child .StartreeFinderColItem {
    padding-left: 32px;
}

.StartreeFinderColItem-content {
    display: flex;
    align-items: center;
    width: 285px;
}

.StartreeFinderColItem-dotBtn:hover {
    background-color: transparent !important;
}

.StartreeFinderColItem-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-right: 2px;
    flex-shrink: 0;
}

.StartreeFinderColItem-content--inner {
    width: 260px;
}

.StartreeFinderColItem-content--inner .StartreeFinderColItem-dotBtn {
    margin-left: auto;
}

.StartreeFinderColItem-arrow {
    width: 0;
    height: 0;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #BDBDBD;
    border-style: solid;
}

.StartreeFinderColItem--selected .StartreeFinderColItem-arrow {
    border-color: transparent transparent transparent #fff;
}

.StartreeFinderColItem--selected {
    position: sticky;
    top: 0;
    bottom: 0;
    background-color: var(--color-main);
    color: var(--color-primary) !important;
    z-index: 1;
}

.StartreeFinderColItem--selectedHack {
    position: static !important;
}

.StartreeFinderColItem--inner:hover:not(.StartreeFinderColItem--selected) {
    background-color: var(--color-bg-alternative);
}

.dark .StartreeFinderColItem--selected {
    background-color: var(--color-main-800);
}

.StartreeFinderColItem--opened {
    background-color: var(--color-main);
}

.StartreeFinderColItemText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.StartreeFinderColItem--opened .StartreeFinderColItemText {
    color: #fff;
}

.light .StartreeFinderChildrenCount {
    --color-children-count-bg: var(--color-main-100);
}

.dark .StartreeFinderChildrenCount {
    --color-children-count-bg: #4F4F4F;
}

.StartreeFinderChildrenCount {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 16px;
    font-size: 12px;
    background-color: var(--color-children-count-bg);
    color: var(--color-main);
    border-radius: 16px;
    margin-left: 6px;
}

.StartreeFinderColItem--selected .StartreeFinderChildrenCount {
    background-color: var(--color-primary);
    color: var(--color-main);
}

.StartreeFinderColItem--selected .StartreeFinderColItem-menuIcon {
    fill: #fff;
}

.StartreeFinderColItem-menu {
    padding: 0 !important;
    margin-right: 6px !important;
    color: #BDBDBD !important;
}

.StartreeFinderColItem-menu:disabled {
    cursor: not-allowed !important;
    opacity: .3;
}

.StartreeFinderColItem-menu:hover {
    background-color: transparent !important;
}

.StartreeFinderColItem-menuOps {
    height: 32px;
}

.light .StartreeFinderAlterPathPopup {
    --color-finder-alter-popup-bg: #fff;
    --border-finder-alter-popup-bg: none;
}

.dark .StartreeFinderAlterPathPopup {
    --color-finder-alter-popup-bg: #2D2D2D;
    --border-finder-alter-popup-bg: 1px solid #4F4F4F;
}

.StartreeFinderAlterPathPopup {
    border: var(--border-finder-alter-popup-bg);
    background-color: var(--color-finder-alter-popup-bg);
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.2));
    border-radius: 10px;
}

.StartreeFinderAlterPathPopup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-alternative);
    color: var(--font-color-contrast);
    font-size: 14px;
    font-weight: bold;
    height: 42px;
    border-radius: 10px 10px 0 0;
    padding: 0 4px 0 16px;
}

.dark .StartreeFinderAlterPathPopup-header {
    background-color: #000;
    color: #828282;
}

.PnsStartreeFinderSearchPanel {
    position: absolute;
    bottom: 0;
    width: calc(100% - var(--drawer-width));
    max-height: 80vh;
}

.StartreeViewSwitch button {
    width: 34px;
    height: 34px;
    background-color: var(--color-main-50);
    border: none;
}

.dark .StartreeViewSwitch {
    background-color: #464646;
}

.StartreeViewSwitch button.Mui-selected {
    background-color: var(--color-main);
    color: var(--color-primary);
}

.StartreeViewSwitch-Icon {
    width: 100%;
    height: 100%;
}

.PnsStartree-ViewSwitchWrapper {
    position: absolute;
    top: 20px;
    right: 32px;
    z-index: 1;
}

.dark .StartreeFinderColItem--selected .StartreeFinderChildrenCount {
    background-color: #fff !important;
}

.dark .StartreeFinderColItem--selected .StartreeFinderColItemText {
    color: #fff;
}

.StartreeFinderPage-startreeIcon {
    width: 36px !important;
    height: 36px !important;
    fill: var(--color-main) !important;
}

/* Tutorial */

.PnsTutorialDialog .MuiDialog-paper {
    max-width: 100%;
    width: 80%;
    border-radius: 25px;
}

.PnsTutorialDialog-title {
    display: flex;
    justify-content: flex-end;
}

.PnsTutorial-title {
    font-size: 40px;
    font-weight: 900;
    line-height: 42px;
}

.PnsTutorial-subtitle {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #828282;
    padding: 11px 0;
}

.PnsTutorial-chips {
    flex-wrap: wrap;
}

.PnsTutorialChip {
    margin: 0 10px 15px 0 !important;
    color: var(--chip-color) !important;
    background-color: var(--chip-bg-color) !important;
    font-weight: 700;
}

.PnsTutorial-videos {
    padding-top: 4px !important;
}

.PnsTutorialVideo {
    justify-content: space-between !important;
    border-radius: 10px;
    margin-bottom: 30px;
}

.PnsTutorialVideo:nth-child(3n+1) {
    background-color: var(--color-main);
}

.PnsTutorialVideo:nth-child(3n+1) .PnsTutorialVideo-title {
    color: var(--color-primary);
}

.PnsTutorialVideo:nth-child(3n+1) .PnsTutorialVideo-position {
    color: var(--color-main);
}

.PnsTutorialVideo:nth-child(3n+2) {
    background-color: var(--cm-string-color);
}

.PnsTutorialVideo:nth-child(3n+2) .PnsTutorialVideo-title {
    color: var(--color-primary);
}

.PnsTutorialVideo:nth-child(3n+2) .PnsTutorialVideo-position {
    color: var(--cm-string-color);
}

.PnsTutorialVideo:nth-child(3n+3) {
    background-color: var(--color-main-200);
}

.PnsTutorialVideo:nth-child(3n+3) .PnsTutorialVideo-title {
    color: var(--color-main);
}

.PnsTutorialVideo:nth-child(3n+3) .PnsTutorialVideo-position {
    color: var(--color-main);
}

.PnsTutorialVideo-title {
    align-self: center;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    padding-left: 8%;
    width: 350px;
}

.PnsTutorialVideo-video {
    display: flex;
    align-self: flex-end;
    padding-top: 78px;
    padding: 78px 8% 0 8%;
    z-index: 1;
}

.PnsTutorialVideo-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    overflow: hidden;
}

.PnsTutorialVideo svg {
    position: absolute;
    right: 0;
    top: -5%;
    height: 110%;
}

.PnsTutorialVideo:nth-child(3n+1) svg {
    fill: var(--color-primary);
}

.PnsTutorialVideo:nth-child(3n+2) svg {
    fill: var(--color-primary);
}

.PnsTutorialVideo:nth-child(3n+3) svg {
    fill: var(--color-main);
}

.PnsTutorialVideo-position {
    position: absolute;
    width: 53px;
    height: 53px;
    line-height: 53px;
    border-radius: 50%;
    background-color: var(--color-primary);
    text-align: center;
    top: calc(50% - 25px);
    left: -26px;
    font-size: 22px;
    font-weight: 900;
}