@import url('palette.css');
@import url('typography.css');
@import url('mainlayout/mainlayout.css');
@import url('views/index.css');
@import url('twopanes/index.css');
@import url('search.css');
@import url('dialog/index.css');
@import url('buttons/index.css');
@import url('contextmenu.css');
@import url('cellwrapper.css');
@import url('headercontent.css');
@import url('wizard.css');
@import url('tour.css');
@import url('zoomist.css');

@font-face {
    font-family: Manrope;
    src: url('/fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url('/fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body, :host {
    font-family: 'Manrope', serif;
    font-style: normal;
}

.font-Inter {
    font-family: 'Inter', serif;
    font-style: normal;
}

.font-Manrope {
    font-family: 'Manrope', serif;
    font-style: normal;
}

.pointer {
    cursor: pointer;
}


.unselected {
    user-select: none;
}

.icon-not-draggable {
    pointer-events: none;
}

.select_transaction_span {
    width: 211px;
    font-family: 'Inter', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;
    text-align: center;
    letter-spacing: -0.02em;

    /* Gray/500 */

    color: #667085;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y {
    overflow-y: auto;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.little-circle-8x {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.little-circle-12x {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.pivot-input-text {
    font-family: 'Inter', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--pivot-gray-800);
}

.select-tag-selected {
    background-color: var(--pivot-primary-25);
    border: 1px solid var(--pivot-primary-500);
}

.select-tag-unselected {
    background-color: var(--pivot-white);
    border: 1px solid var(--pivot-primary-50);
}

.pivot-search-field-caption {
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: var(--pivot-primary-700);
}

.pivot-search-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
}

.pivot-vr {
    height: 100%;
    border-right: 1px solid var(--pivot-primary-50);
}

.pivot-ui-line-vr {
    height: 100%;
    border-right: 1px solid var(--pivot-ui-line);
}

.pivot-ui-line-hr {
    width: 100%;
    border-top: 1px solid var(--pivot-ui-line);
}

.pivot-hr {
    width: 100%;
    border-bottom: 1px solid var(--pivot-primary-50);
}

.pivot-primary-400-hr {
    width: 100%;
    border-bottom: 1px solid var(--pivot-primary-400);
}


.pivot-hr-2x {
    width: 100%;
    border-bottom: 2px solid var(--pivot-primary-50);
}

.pivot-hr-neutral {
    width: 100%;
    border-bottom: 1px solid var(--pivot-neutral-2);
}

.pivot-br {
    border-right: 1px solid var(--pivot-primary-50);
}

.gap4x {
    gap: 4px;
}

.gap6x {
    gap: 6px;
}

.gap8x {
    gap: 8px;
}

.gap10x {
    gap: 10px;
}

.gap12x {
    gap: 12px;
}

.gap14x {
    gap: 14px;
}

.gap16x {
    gap: 16px;
}

.gap18x {
    gap: 18px;
}

.gap20x {
    gap: 20px;
}

.gap22x {
    gap: 22px;
}

.gap24x {
    gap: 24px;
}

.gap32x {
    gap: 32px;
}

.gap96x {
    gap: 96px;
}

.pad7x {
    padding: 7px;
}

.pad8x {
    padding: 8px;
}

.pad12x {
    padding: 12px;
}

.pad14x {
    padding: 14px;
}

.pad16x {
    padding: 16px;
}

.pad24x {
    padding: 24px;
}

.pad32x {
    padding: 32px;
}

.pad3216x {
    padding: 32px 16px;
}

.padding-16-24 {
    padding: 16px 24px;
}

.padding-24-16 {
    padding: 24px 16px;
}

.padding-32-24 {
    padding: 32px 24px;
}

.padding-32-24-16 {
    padding: 32px 24px 16px 24px;
}

.none-padding {
    padding: 0;
}

.border-radius-1000 {
    border-radius: 1000px;
}

.border-radius-8 {
    border-radius: 8px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-16 {
    border-radius: 16px;
}

.border-ui-line {
    border: 1px solid var(--pivot-ui-line);
}

.dialog-title {
    font-family: 'Inter', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;

    letter-spacing: -0.02em;
    color: var(--pivot-primary-900);
}

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

.grid-title-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
}

.grid-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--pivot-primary-900);
}

.pivot-high-light {
    color: var(--pivot-accent-400) !important;
}

.pivot-high-light-bg {
    border-radius: 10px;
    border: 1px solid var(--pivot-primary-25);
    background-color : var(--pivot-primary-50) !important;
}

.space-between-layout {
    width: 100%;
    justify-content: space-between;
}


.error_message_box {
    background-color: var(--pivot-error-25);
    padding: var(--lumo-space-m);
    border-radius: var(--lumo-border-radius-m);
    /*margin-top: var(--lumo-space-m);*/
    /*margin-bottom: var(--lumo-space-s);*/
    color: var(--pivot-error-700);
}

.error_message_box_header {
    font-size: 16px;

    display: block;
}

.error_message_box_description {
    font-size: 14px;
    display: block;
}


.vertical-default-view {
    background: var(--pivot-white);
    padding: 32px;
    gap: 16px;
}

.pivot-title {
    font-family: 'Manrope', serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: var(--pivot-gray-800);
}

.anchor-button {
    font-size: 16px;
    font-family: Manrope, serif;
    text-decoration: none;
    box-sizing: border-box;
    padding: 10px 16px;
    background: var(--pivot-primary-500);
    border: 1px solid var(--pivot-primary-50);
    border-radius: 10px;
    font-weight: 500;
    line-height: 22px;
    color: var(--pivot-white);
    height: 44px;
    margin: 0;
}

a.anchor-button:hover {
    text-decoration: none;
    cursor: default;
}

.icon-wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
    width: 52px;
    height: 44px;
    background: var(--pivot-primary-500);
    border: 1px solid var(--pivot-primary-50);
    border-radius: 8px;
}


.vertical-pane {
    background: var(--pivot-primary-25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
}

.flex-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

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

.flex-100 {
    flex: 1 0 0;
}

.pivot-badge-22 {
    box-sizing: border-box;
    padding: 2px 8px;
    mix-blend-mode: multiply;
    border-radius: 16px;
    font-family: Manrope, serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
}

.white-icon-wrapper-12 {
    padding: 12px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid var(--pivot-primary-50);
}

.common-custom-icon-button {
    display: flex;
    padding: 9px 15px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--pivot-primary-50);
    background: var(--pivot-white);
}

.common-custom-icon-button-span {
    color: var(--pivot-gray-800);
    text-align: center;

    /* Text md/medium */
    font-family: Manrope, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.icon-number:after {
    content: attr(value);
    font-size: 12px;
    color: var(--pivot-white);
    background: var(--pivot-success-600);
    border-radius: 50%;
    padding: 0 5px;
    position: relative;
    left: 14px;
    top: -42px;
    opacity: 0.9;
}




.cell-focus {
    border: 1.5px solid var(--pivot-primary-500);
}

.success-cell-focus {
    border: 3px solid var(--pivot-success-600) !important;
}

.confirm-dialog-layout {
    display: flex;
    width: 720px !important;
    padding: 36px 32px;
    flex-direction: column;
    gap: 24px;
    border-radius: 16px;
    background: var(--pivot-gray-25);
}

.common-operation-layout {
    display: flex;
    /*padding: 24px 24px 16px 24px;*/
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
    background-color: #FFFFFF;
}

.common-operation-fields-layout {
    display: flex;
    padding: 24px 24px 16px 24px;
    align-items: center;
    align-self: stretch;
    gap: 32px;
    width: 100%;
    background-color: #FFFFFF;
}

.pivot-tab-sheet {
    /*display: flex;*/
    /*width: 386px;*/
    padding: 4px;
    /*align-items: center;*/
    gap: 8px;
    border-radius: 10px;
    background: #F2F4F7;
}

.pivot-tabs {
    display: flex;
    width: 386px;
    padding: 4px;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    /*background: #F2F4F7;*/
}

.pivot-tab {
    display: flex;
    padding: 8px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 10px;
    color: #667085;
    cursor: pointer;
}

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

.pivot-tab-selected {
    color: var(--pivot-white);
    background-color: var(--pivot-primary-300);
}

.pivot-tab-span {
    font-family: Manrope, serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    user-select: none;
}

.max-width-120 {
    max-width: 120px;
}

.cursor-text {
    cursor: text;
}

.padding-top-16 {
    padding-top: 16px;
}

.padding-top-24 {
    padding-top: 24px;
}

.padding-left-16 {
    padding-left: 16px;
}

.padding-left-24 {
    padding-left: 24px;
}

.padding-left-32 {
    padding-left: 32px;
}

.padding-left-60 {
    padding-left: 60px;
}

.padding-right-16 {
    padding-right: 16px;
}

.padding-right-24 {
    padding-right: 24px;
}


.padding-right-32 {
    padding-right: 32px;
}

.padding-2-8 {
    padding: 2px 8px;
}

.padding-12-16 {
    padding: 12px 16px;
}

.margin-top-16 {
    margin-top: 16px;
}

.margin-top-32 {
    margin-top: 32px;
}

.margin-top-24 {
    margin-top: 24px;
}

.margin-top-n24 {
    margin-top: -24px;
}

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

.margin-left-36 {
    margin-top: 36px;
}

.margin-right-16 {
    margin-right: 16px;
}

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

.margin-right-10 {
    margin-right: 10px;
}

.margin-top-48 {
    margin-top: 48px;
}

.margin-bottom-16 {
    margin-bottom: 16px;
}

.margin-bottom-24 {
    margin-bottom: 24px;
}

.width-180 {
    width: 180px !important;
}

.padding-bottom-7 {
    padding-bottom: 7px;
}

.black-icon {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(5672%) hue-rotate(10deg) brightness(111%) contrast(103%);
}

.filter-icon-color {
    filter: brightness(0) saturate(100%) invert(30%) sepia(19%) saturate(1531%) hue-rotate(189deg) brightness(102%) contrast(96%);
}
/*#F8FAFB*/
.filter-icon-selected-color {
    filter: brightness(0) saturate(100%) invert(100%) sepia(19%) saturate(705%) hue-rotate(176deg) brightness(101%) contrast(97%);
}

/*accent 600 */
.filter-icon-focus-color {
    filter: brightness(0) saturate(100%) invert(31%) sepia(69%) saturate(3949%) hue-rotate(7deg) brightness(87%) contrast(82%);
}

.filter-icon-menu {
    filter: brightness(0) saturate(100%) invert(99%) sepia(22%) saturate(181%) hue-rotate(172deg) brightness(99%) contrast(98%)
}

.filter-icon-white-color {
    filter: brightness(0) saturate(100%) invert(98%) sepia(2%) saturate(268%) hue-rotate(149deg) brightness(117%) contrast(100%);
}

.filter-icon-purple-color {
    filter: brightness(0) saturate(100%) invert(22%) sepia(63%) saturate(3737%) hue-rotate(252deg) brightness(82%) contrast(99%);
}


.margin-auto{
    margin: auto;
}

.country-icon {
    width: 24px;
    height: 24px;
}

.success-dialog-title {
    font-family: Inter, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24.2px;
    letter-spacing: -0.02em;
    color: var(--pivot-gray-800);
}

.success-dialog-subtitle {
    font-family: Manrope, serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--pivot-gray-500);
}

.filter-highlight {
    border: 1.5px solid var(--pivot-primary-500) !important;
}

.point-component-highlight {
    border: 2px solid var(--pivot-accent-500) !important;
}

.badge-accent{
    color: var(--pivot-accent-600);
    background-color: var(--pivot-accent-25);
}

.badge-primary {
    background-color: #F8F9FC;
    color: #363F72;
}

.badge-success {
    background-color: var(--pivot-success-700);
    color: var(--pivot-success-25);
}

.opacity-05 {
    opacity: 0.5;
}

.pivot-text-label{
    margin-top: 9px;
    width: 110px;
    font-size: 14px;
    font-family: var(--lumo-secondary-text-color);

    /*color: var(--lumo-primary-text-color);*/
}

.cursor-default {
    cursor: default !important;
}

.pre-wrap {
    white-space: pre-wrap;
}


.vaadin-icon-slotted {
    padding: 0.25em;
    box-sizing: border-box !important;
    color: var(--lumo-contrast-60pct);
}


.blue_link {
    font-size: 14px;
    color: var(--pivot-primary-400)
}

.primary-50-border {
    border: 1px solid var(--pivot-primary-50);
}

.ui-line-border {
    border: 1px solid var(--pivot-ui-line);
}

.card_detail_bottom_border {
    border-bottom: 1px solid var(--pivot-primary-50);
}

    .card_detail_right_border {
        border-right: 1px solid var(--pivot-ui-line);
    }


.relative_position {
    position : relative;
    width: 100%;
}

.embed_image_button {
  position: absolute;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.flex_flow_column {
  flex-flow : column;
}

.flex_flow_wrap {
  flex-flow : wrap;
}

.item_selected {
    border: 2px solid var(--pivot-accent-500) !important;
}

.border_2x {
    border: 2px solid var(--pivot-white);
}

.border_error_600 {
    border: 1px solid var(--pivot-error-600) !important;
}

.border_view_image {
    border: 5px solid var(--pivot-gray-600);
}

.origin_underline {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.filter_condition {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    border: 1px solid var(--pivot-ui-line);
    background: var(--pivot-primary-25);
}

.visible_animation {
    opacity:0;
    margin-right:0;
    transition:opacity 0.3s linear;
}

.visible_animation.visible_show {
  opacity: 1;
}

vaadin-checkbox-group[theme~="toggle-button"] > vaadin-checkbox[checked]::part(checkbox),
vaadin-checkbox[theme~="toggle-button"][checked]::part(checkbox) {
    background-color: var(--pivot-accent-500) !important;
}

.width_full {
  width : 100%;
}

.pivot-upload-icon-button {
    height: fit-content;
    background-color: #FFF;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}