html,
body {
    line-height: normal;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Twemoji Country Flags', var(--font-name), sans-serif;
    font-size: 16px;
    background: var(--bg);
    color: var(--content-white-80);
    accent-color: var(--accent-blue-100);
    overflow: hidden;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color-0) var(--scrollbar-color-0);
}
.fs-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: var(--primary-grey-100);
    opacity: 0.8;
    display: block;
    z-index: 1025;
}

.app-aside {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 56px);
    top: 0;
    position: relative;
    background: var(--nav-bar-background-color);
}
.navi-wrap {
  background: var(--nav-bar-background-color);
}
.navbar-brand {
    padding: 0;
    line-height: 56px;
    background: var(--nav-bar-background-color);
}

.navbar-brand img {
    max-height: 56px;
    margin-left: 8px;
}
.navbar-header-additions {
    background-color: var(--nav-bar-background-color);
}
.navbar-collapse {
    background-color: var(--nav-bar-background-color);
    border-bottom: 1px solid #9DA2B31F;
}
.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-nav > .dropdown.org {
    padding: 0;
    border: none;
    border-radius: 0px;
    background: transparent;
}
.navbar-nav > .dropdown.org.active {
    background-color: var(--accent-blue-100);
    color: var(--content-white-100);
}
.navbar-nav > .dropdown.org.active:hover {
    background-color: var(--accent-blue-120);
}
.navbar-nav > .dropdown.org > a {
    padding: 0;
    background: transparent;
    color: var(--content-white-60);
}
.navbar-nav > .dropdown.org > a:hover,
.navbar-nav > .dropdown.org > a:active,
.navbar-nav > .dropdown.org > a:focus {
    background: transparent;
    border: none;
}
.navbar-nav > .dropdown.org:hover {
    color: var(--content-white-100);
}

.navbar-nav > li > .dropdown-menu,
.dropdown.open > .dropdown-menu.user-profile-dropdown {
    color: var(--content-white-40);
    background: var(--primary-grey-60);
    border-radius: 12px;
    border: 1px solid var(--borders-white-8);
}
.navi ul.nav li {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}
.nav-section-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-grey-40);
}
.bg-maraine {
    background: var(--additional-maraine-100);
}
.bg-dark.dk,
.bg-dark .dk {
    background: var(--borders-white-8);
}
.bg-dark .nav > li:hover > a,
.bg-dark .nav > li:focus > a,
.bg-dark .nav > li.active > a {
    background: transparent !important;
}
.nav > li > a:hover,
.nav > li > a:focus {
    border: 0;
    color: var(--content-white-80);
    background: transparent !important;
}
.nav > li:hover > a > .caret,
.nav > li > a:hover > .caret {
    filter: brightness(200%);
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    border: none !important;
}
.bg-dark .nav .open > a {
    background: transparent !important;
}
.dropdown-menu > li > a {
    color: var(--content-white-40);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown.open > .dropdown-menu.user-profile-dropdown > .user-action-section > a:hover {
    background: var(--primary-grey-80) !important;
    color: var(--content-white-100);
}
.app-aside::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.app-aside::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-0);
    border-radius: 16px;
    border: none;
}

.app-aside::-webkit-scrollbar-thumb:horizontal {
    border-bottom: 2px solid var(--scrollbar-thumb-color-0);
}

.app-aside::-webkit-scrollbar-thumb:vertical {
    border-right: 2px solid var(--scrollbar-thumb-color-0);
}

.app-aside::-webkit-scrollbar-track {
    background: transparent;
}

.app-aside::-webkit-scrollbar-corner,
.app-aside::-webkit-resizer {
    background: transparent;
}

.app-content-body {
    background: var(--app-background);
    background-size: cover;
    height: calc(100vh - 56px);
    overflow: auto;
}

.app-content-body::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.app-content-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-0);
    border-radius: 16px;
    border: none;
}

.app-content-body::-webkit-scrollbar-thumb:horizontal {
    border-bottom: 2px solid var(--scrollbar-thumb-color-0);
}

.app-content-body::-webkit-scrollbar-thumb:vertical {
    border-right: 2px solid var(--scrollbar-thumb-color-0);
}

.app-content-body::-webkit-scrollbar-track {
    background: transparent;
}

.app-content-body::-webkit-scrollbar-corner,
.app-content-body::-webkit-resizer {
    background: transparent;
}
.app-body-header {
    background: transparent;
}
.dropdown.open > .dropdown-menu.user-profile-dropdown > .user-action-section {
    border-top: 1px solid var(--borders-white-8);
}

h1,
.h1 {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

h2,
.h2 {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}

h3,
.h3 {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

h4,
.h4 {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

h5,
.h5 {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.paragraph {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--content-white-100);
}

.x-small {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
}

.small {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: var(--content-white-100);
}
.small.text-danger {
    color: var(--additional-red-100);
}
.description {
    font-family: var(--font-name);
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 16px;
    color: var(--content-white-100);
}
.img-icon {
    width: 32px;
}
.dk {
    background-color: var(--borders-white-8);
}
.p-x-24 {
    padding: 0 24px;
}
.line {
    height: 1px;
}
.line-dashed {
    border: 1px dashed var(--borders-white-8);
}
.b-b {
    border-bottom: solid 1px var(--borders-white-8);
}
.banner.error {
    background: linear-gradient(92.9deg, #a01b55 30.62%, #dc1b55 98.79%);
    padding: 10px;
}
.popular-label {
    opacity: 1;
    position: absolute;
    top: 5px;
    right: 0px;
    border-radius: 24px 0px 0px 24px;
    background: var(--additional-red-100);
    padding: 6px 13px 6px 11px;
    color: var(--primary-grey-100);
}
.no-border,
.list-group-item.no-border,
.list-group.no-border,
.list-group.no-border .list-group-item {
    border: none;
    border-radius: 0;
}
.label-title {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--text_white);
}
.badge {
    background-color: var(--accent-blue-100);
    color: var(--content-white-100);
    font-weight: normal;
    text-shadow: none;
    font-size: 11px;
    text-transform: lowercase;
    min-height: 16px;
    min-width: 16px;
}
.badge:first-letter {
    text-transform: capitalize;
}
.badge.bg-success {
    background-color: var(--additional-green-100);
}
.badge.bg-warning {
    background-color: var(--additional-orange-100);
    text-transform: lowercase;
    color: var(--primary-grey-100);
}
.badge.bg-error,
.badge.bg-danger {
    background-color: var(--additional-red-100);
    text-transform: lowercase;
    color: var(--content-white-100);
}
.badge.bg-purple {
    background-color: var(--additional-purple-100) !important;
}
.bg-info {
    background: var(--accent-blue-100);
}
.b-light {
    border-color: var(--borders-white-8);
}
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

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

.flex-row-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.text-primary {
    color: var(--accent-blue-100);
}
.text-muted {
    color: var(--content-white-60) !important;
}

.caret {
    content: url('/img/icons/caret.svg');
    height: 16px;
    width: 16px;
    border: 0;
}
.well,
pre {
    background: var(--primary-grey-100);
    border: solid 1px var(--borders-white-8);
    color: var(--content-white-100);
}
pre.activity {
    max-height: 75vh;
}
.arrow.left::after {
    border-right-color: var(--primary-grey-40);
}
.tl-wrap {
    border-color: var(--borders-white-8);
}
.label,
label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--content-white-60);
    text-shadow: none;
}
.labelled-input .input-label {
    background: transparent;
}
.labelled-container .date-view {
    border: none;
}
.toggle input:checked + label,
.toggle input:checked + span {
    border: solid 1px var(--accent-blue-100);
    color: var(--accent-blue-100);
}

.bg-primary {
    background-color: var(--accent-blue-100);
}
.text-white {
    color: var(--content-white-100);
}
.text-blue-120 {
    color: var(--accent-blue-120);
}

.text-green-100 {
    color: var(--additional-green-100);
}
/* loader */
.fond {
    background-color: var(--primary-grey-10);
}
.popover {
    background-color: var(--primary-grey-100);
}
.popover-title {
    background-color: var(--primary-grey-100);
    border-bottom: solid 1px var(--borders-white-8);
}
.panel {
    background-color: var(--secondary-grey-4);
    border: solid 1px var(--borders-white-8);
    border-radius: 10px;
}
.panel.panel-default {
    background: var(--primary-grey-80);
}
.panel.no-border {
    border: none;
    border-radius: 0;
}
.panel.rounded {
    border-radius: 15px;
}
.panel.no-border > .panel-heading {
    border: none;
    background: transparent;
}
.panel-default .panel-heading {
    border: none;
    background-color: var(--primary-grey-80);
}
.panel-default > .panel-heading {
    color: var(--content-white-100);
    border: none;
    border-radius: 10px;
}
.panel-heading.wrapper {
    padding: 15px;
}
.panel > .table-responsive {
    width: 100%;
}

.table-responsive.table-40vh {
    height: 40vh;
}

.panel > .table-responsive.table-rounded {
  padding-left: 16px;
  padding-right: 16px;
}


.panel > .table-responsive.table-rounded>.table>thead:first-child>tr>th:first-of-type {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.panel > .table-responsive.table-rounded>.table>thead:first-child>tr>th:last-of-type {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}


.panel-footer {
    background: transparent;
}
.panel-body > .bg-light {
    background: var(--primary-grey-10);
}
.table-col-actions {
    width: 180px;
}
.wrapper,
.wrapper-lg {
    padding: 0 15px;
}
.wrapper::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.wrapper::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-0);
    border-radius: 16px;
    border: none;
}

.wrapper::-webkit-scrollbar-thumb:horizontal {
    border-bottom: 2px solid var(--scrollbar-thumb-color-0);
}

.wrapper::-webkit-scrollbar-thumb:vertical {
    border-right: 2px solid var(--scrollbar-thumb-color-0);
}

.wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.wrapper::-webkit-scrollbar-corner,
.wrapper::-webkit-resizer {
    background: transparent;
}
.avatar-list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.avatar-list li {
    margin-right: 13px;
}
.avatar-item img {
    height: 56px;
    width: 56px;
    background: var(--primary-grey-100);
}
.table > thead > tr > th {
    border: none;
    background: var(--secondary-grey-10);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.table > tbody + tbody {
    border: none;
}
.table > tbody > tr:hover {
    background: var(--primary-grey-8);
}

.table-striped > tbody > tr:nth-of-type(1) > td {
  border-top: 0;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
  background: unset;
}
.table-striped > tbody > tr:nth-child(2n + 1) > td,
.table-striped > tbody > tr:nth-child(2n + 1) > th {
    background: unset;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: none;
}
.table-striped > tbody > tr:nth-of-type(2n + 1):hover {
    background: var(--primary-grey-8);
}
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: solid 1px var(--borders-white-8);
}
.ntable th,
.table div.text-center {
    color: var(--content-white-80);
}
.smart-table.table > tbody > tr > td {
    font-size: 14px;
}
.b-t {
    border-top: solid 1px var(--borders-white-8);
}

.btn-circle {
    width: 34px;
    height: 34px;
    padding: 0;
}

.ellipsis-1l {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ellipsis-2l {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ellipsis-3l {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hdivider {
    height: 1px;
    width: 100%;
    border-top: 0;
    border-bottom: 1px solid var(--borders-white-8);
}

.btn-greyed {
    background: var(--secondary-grey-4);
    border: solid 1px var(--borders-white-8);
    border-radius: 32px;
    color: var(--primary-grey-20) !important;
    padding-right: 24px;
    padding-left: 24px;
}

.vdivider {
    height: 100%;
    width: 1px;
    border-left: 1px solid var(--borders-white-8);
}

.dot-pulse {
    position: relative;
    left: -9999px;
    width: 8px;
    height: 8px;
    border-radius: calc(8px / 2);
    background-color: var(--accent-blue-120);
    color: var(--accent-blue-120);
    box-shadow: 9999px 0 0 calc(8px * -0.5) var(--accent-blue-120);
    animation: dot-pulse-0 1.5s infinite linear;
    animation-delay: 0.25s;
}

.dot-pulse::before,
.dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: calc(8px / 2);
    background-color: var(--accent-blue-120);
    color: var(--accent-blue-120);
}

.dot-pulse::before {
    box-shadow: calc(9999px - 8px * 1.5) 0 0 calc(8px * -0.5) var(--accent-blue-120);
    animation: dot-pulse-before 1.5s infinite linear;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: calc(9999px + 8px * 1.5) 0 0 calc(8px * -0.5) var(--accent-blue-120);
    animation: dot-pulse-after 1.5s infinite linear;
    animation-delay: 0.5s;
}

@keyframes dot-pulse-before {
    0% {
        box-shadow: calc(9999px - 8px * 1.5) 0 0 calc(8px * -0.5) var(--accent-blue-120);
    }
    30% {
        box-shadow: calc(9999px - 8px * 1.5) 0 0 calc(8px * 0.2) var(--accent-blue-120);
    }
    60%,
    100% {
        box-shadow: calc(9999px - 8px * 1.5) 0 0 calc(8px * -0.5) var(--accent-blue-120);
    }
}

@keyframes dot-pulse-0 {
    0% {
        box-shadow: 9999px 0 0 calc(8px * -0.5) var(--accent-blue-120);
    }
    30% {
        box-shadow: 9999px 0 0 calc(8px * 0.2) var(--accent-blue-120);
    }
    60%,
    100% {
        box-shadow: 9999px 0 0 calc(8px * -0.5) var(--accent-blue-120);
    }
}

@keyframes dot-pulse-after {
    0% {
        box-shadow: calc(9999px + 8px * 1.5) 0 0 calc(8px * -0.5) var(--accent-blue-120);
    }
    30% {
        box-shadow: calc(9999px + 8px * 1.5) 0 0 calc(8px * 0.2) var(--accent-blue-120);
    }
    60%,
    100% {
        box-shadow: calc(9999px + 8px * 1.5) 0 0 calc(8px * -0.5) var(--accent-blue-120);
    }
}