/*#region transferred from common ui css */
/*#region __MSG_@@extension_id__ */
/**
* @link https://en.wikipedia.org/wiki/ISO/IEC_8859-9
*/
:root {
    --input-border-color: rgb(192 192 192);
    --menu-item-height: 48px;
    /*#region begin from module.css on framework   */
    /* overflow-y: auto; */
    --base-color: hsl(158, 49%, 47%);
    --header-color: hsl(178, 49%, 47%);
    /*#region primary HSL */
    /*#region primary color HSL */
    --primary-color-h: 158;
    --primary-color-s: 59%;
    --primary-color-l: 47%;
    /*#endregion primary color HSL */
    /*#region primary color HSL blue */
    /*     --primary-color-h: 196;
    --primary-color-s: 59%;
    --primary-color-l: 47%; */
    /*#endregion primary color HSL blue */
    /*#endregion primary HSL */
    --lighten: 15%;
    --darken: -15%;
    /*#region primary color */
    --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
    /*#region lighten */
    --primary-color-light: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten)));
    /*#endregion lighten */
    /*#region darken */
    --primary-color-dark: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--darken)));
    /*#endregion primary color */
    --secondary-color: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));
    /*#region complement */
    --primary-color-complement: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));
    /*#endregion complement */
    /*#region shades */
    --primary-color-complement-shade-1: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 5%));
    --primary-color-complement-shade-2: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 10%));
    --primary-color-complement-shade-3: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 15%));
    --primary-color-complement-shade-4: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 20%));
    --primary-color-complement-shade-5: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 25%));
    --primary-color-complement-shade-6: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 30%));
    --primary-color-complement-shade-7: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 35%));
    --primary-color-complement-shade-8: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 40%));
    --primary-color-complement-shade-9: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - 45%));
    /*#endregion shades */
    /*#region tints */
    --primary-color-complement-tint-1: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 5%));
    --primary-color-complement-tint-2: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
    --primary-color-complement-tint-3: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 15%));
    --primary-color-complement-tint-4: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 20%));
    --primary-color-complement-tint-5: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 25%));
    --primary-color-complement-tint-6: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 30%));
    --primary-color-complement-tint-7: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 35%));
    --primary-color-complement-tint-8: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 40%));
    --primary-color-complement-tint-9: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + 45%));
    /*#endregion tints */
    /*#region triad */
    --primary-color-triada-1: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), var(--primary-color-l));
    --primary-color-triada-2: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), var(--primary-color-l));
    /*#endregion triad */
    /*#region analogous */
    --degree: 15;
    --primary-color-analogous-1: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), var(--primary-color-l));
    --primary-color-analogous-2: hsl(calc(var(--primary-color-h) - var(--degree)), var(--primary-color-s), var(--primary-color-l));
    /*#endregion analogous */
    /*#region text colors */
    --text-color: rgb(88, 88, 88);
    --text-color-primary: rgb(88, 88, 88);
    --text-color-primary-light: rgb(128, 128, 128) !important;
    /*#endregion text colors */
    /*#region buttons */
    --degree-button: 60;
    --darken-button: 0%;
    --darken-hover: -5%;
    --darken-active: -15%;
    --button-bg-color: hsl(calc(var(--primary-color-h) + var(--degree-button)), var(--primary-color-s), calc(var(--primary-color-l) + var(--darken-button)));
    --button-hover-bg-color: hsl(calc(var(--primary-color-h) + var(--degree-button)), var(--primary-color-s), calc(var(--primary-color-l) + var(--darken-hover)));
    --button-active-bg-color: hsl(calc(var(--primary-color-h) + var(--degree-button)), var(--primary-color-s), calc(var(--primary-color-l) + var(--darken-active)));
    --button-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 45%));
    --button-border-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + -15%));
    /*#endregion buttons */
    /*#region boxes */
    --pop-border: 1px solid rgba(212, 212, 212, 0.56);
    --pop-box-background-color: rgba(253, 253, 253, 1);
    --pop-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.03);
    --pop-box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
    --drop-box-shadow: 0 5px 6px 1px rgb(0 0 0 / 23%);
    --pop-border-radius: 4px;
    --pop-transition-slow: transform 0.3s ease-out, opacity 0.3s ease-out;
    --pop-item-height: 44px;
    --pop-item-icon-width: 20px;
    --pop-item-icon-padding: 4px 8px;
    --pop-item-hover-bgcolor: hsl(0deg 0% 80%);
    --pop-item-hover-color: rgba(88, 88, 88);
    --pop-right-down-transform-origin: top left;
    --pop-right-down-transform: scale(0);
    --pop-right-down-transform-pop: scale(1);
    --pop-down-transform-origin: top;
    --pop-down-transform: scale(1, 0);
    --pop-up-transform-origin: bottom;
    --pop-up-transform: scale(1, 0);
    --pop-transition: transform 0.3s ease-out, opacity 0.1s ease-out;
    /*#endregion boxes */
    /*#region dialog */
    --lighten-pg: -5%;
    /*#endregion dialog */
    /*#region --degree: 6; */
    --page-header-background-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-pg))) !important;
    --header-background-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + calc(var(--lighten-pg) + 10%))) !important;
    --master-background-color: hsl(calc(var(--primary-color-h) + 0), calc(var(--primary-color-s) + 12%), calc(var(--primary-color-l) + 45%)) !important;
    --master-background-color-light: hsl(calc(var(--primary-color-h) + 0), calc(var(--primary-color-s) + 8%), calc(var(--primary-color-l) + 51%)) !important;
    --dialog-contrast-background-color: hsl(calc(var(--primary-color-h) + 40), var(--primary-color-s), calc(var(--primary-color-l) + 46%)) !important;
    --header-contrast-background-color: hsl(calc(var(--primary-color-h) + 40), var(--primary-color-s), calc(var(--primary-color-l) - 5%)) !important;
    --header-contast-foreground-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-fg))) !important;
    --lighten-fg: 60%;
    --header-foreground-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-fg))) !important;
    --hover-background-color: rgb(0 0 0 / 23%) !important;
    --hover-background-color-light: rgb(0 0 0 / 9%) !important;
    --sbg-degree: 25;
    --sfg-degree: 0;
    --lighten-sbg: 1%;
    --lighten-sfg: 50%;
    --status-foreground-color: hsl(calc(var(--primary-color-h) + var(--sfg-degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-sfg)));
    --status-background-color: hsl(calc(var(--primary-color-h) + var(--sbg-degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-sbg))) !important;
    --icon-highlight-color: rgb(255, 202, 80);
    --input-border-color: gainsboro;
    --input-control-height: 36px;
    /*#endregion --degree: 6; */
    /*#endregion primary color */
    --theme-color-warning: hsl(59, 80%, 80%);
    /*#endregion begin from module.css on framework   */
    --dialog-background-color: white;
}

.flex-control-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.flex-control-box>*+* {
    margin-left: 16px;
}

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

/*#region can-edit-me */
.can-edit-me {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.can-edit-me>div {
    font-style: normal;
    padding: 0.42px 0.8px 0.02px 4.8px !important;
}

.can-edit-me> :is(div, input) {
    min-height: 28px;
    line-height: 22.4px;
    display: flex;
    align-items: center;
}

.can-edit-me>i {
    margin-left: 8px;
}

.can-edit-me>i:before {
    font-size: 11px;
    color: blue;
    cursor: pointer;
}

.can-edit-me>input {
    padding: 2px 4px 2px 4px !important;
    height: auto !important;
    border-color: rgb(236 236 236) !important;
}

.can-edit-me> :is(i#save, input) {
    display: none;
}

.can-edit-me.editor> :is(i#edit, div) {
    display: none;
}

.can-edit-me.editor> :is(i#save, input) {
    display: block;
}

/*#endregion can-edit-me */
*.collapseY {
    transition: height 0.7s ease-in-out;
    overflow-y: hidden;
    --min-height: 1%;
    --max-height: 100%;
    height: var(--max-height);
}

*.collapseY.collapsed {
    height: var(--min-height) !important;
}

*.icon {
}

*.icon.flipX {
    transform: rotateX(180deg);
}

*.icon.hover {
    width: 32px;
    height: 32px;
    border-radius: 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.1s ease-in-out, transform 0.4s ease-in-out;
}

*.icon.hover.smooth {
    border-radius: 2px 2px;
}

*.icon.hover.circle {
    border-radius: 50% 50%;
}

*.icon.hover:hover {
    background-color: hsl(0deg 0% 0% / 4%);
}

*.icon:before {
    color: inherit !important;
}

.spin-text {
    background-position: 4px 50% !important;
    background-repeat: no-repeat;
    padding-left: 24px !important;
    padding-right: 0px;
    position: relative;
}

div.text-spin {
    background-position: 99% 50% !important;
    background-repeat: no-repeat;
    padding-right: 24px !important;
    position: relative;
}

body.modal-events {
}

/*#region group */
body.modal-events {
    /* pointer-events: none; */
    /* cursor: wait !important; */
}

body.modal-events *:not([class~="modal-events"]) {
    pointer-events: none;
    /* cursor: wait !important; */
}

/*#endregion group */
body>#profile-info-pop {
    position: fixed;
    z-index: -1;
    background-color: yellow;
    padding: 8px;
    border-radius: 4px;
}

body>#profile-info-pop.pop {
    z-index: 99000000000000;
}

body.modal-events>*:not([class~="is-modal"]) {
    pointer-events: none;
    /* opacity:0.9 !important; */
    /* filter: blur(0.1rem); */
    filter: brightness(0.85);
    /* -webkit-filter: grayscale(50%);*/
}

/*#region group */
body.modal-events *[class~="is-modal"] {
    pointer-events: auto;
    /* z-index: 1000000000; */
}

body.modal-events *[class~="is-modal"] * {
    pointer-events: auto;
}

/*#endregion group */
body.disabled-progress {
    opacity: 0.7 !important;
    pointer-events: none !important;
    filter: grayscale(20%);
    -webkit-filter: grayscale(20%);
}

dialog.control>div.header>.commands>i.svg>svg {
    width: 16px !important;
    height: 16px !important;
}

dialog.control>div.header>.commands>i.svg>svg {
    width: 16px !important;
    height: 16px !important;
}

dialog.control.smart>div.header>.commands>i.svg>svg {
    width: 12px !important;
    height: 12px !important;
}

dialog.control.snap-right, dialog.control.snap-left {
    --header-background-color: var(--header-contrast-background-color);
    width: 50% !important;
    margin: 0px !important;
    height: 100% !important;
    max-height: unset !important;
}

dialog.control.snap-right {
    inset: 0px 0px 0px auto !important;
}

dialog.control.snap-left {
    inset: 0px auto 0px 0px !important;
}

dialog.control:is(.snap-right, .snap-left)>div.body {
    overflow-y: hidden;
}

dialog.control:is(.fill-screen,.toggle-fill-screen) {
    position: fixed !important;
    z-index: 9999999999999;
    --header-background-color: var(--header-contrast-background-color);
    width: 100% !important;
    margin: 0px !important;
    height: 100% !important;
    max-height: unset !important;
    max-width: unset !important;
    inset: 0px 0px 0px 0px !important;
    border-radius: 0px !important;
}

dialog.control:has(.toggle-fill-screen) > div.header {
    display: none;
}

body:has(dialog.control.fill-screen) {
    overflow: hidden;
}

body:has(dialog.control:not([class~="on"])), body:has(dialog.control.fill-screen.minimized) {
    /* overflow: auto; */
}

dialog.control.loading>div.body, dialog.control>div.body.loading {
    background-position: 42% 45% !important;
}

div.await {
    opacity: 0.7 !important;
    pointer-events: none !important;
    filter: grayscale(70%);
    -webkit-filter: grayscale(70%);
    background-image: url(/graphics/web/ani/loading-white-32.gif) !important;
    background-repeat: no-repeat !important;
    background-blend-mode: screen;
    background-size: 32px;
    background-position: 40% 50% !important;
}

/*#region loading-state */
div[data-loading-state-message] {
    background-image: unset !important;
    opacity: 0.7 !important;
    background-position: 42% 50% !important;
    background-size: 28px;
    line-height: 1.7rem;
    background-repeat: no-repeat;
    pointer-events: none;
    user-select: none;
}

div[data-loading-state-message]:before {
    content: attr(data-loading-state-message);
    font-family: Inter, Roboto, Helvetica, Calibri, Arial, sans-serif !important;
    font-size: 1rem !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 999000000;
    color: hsl(0deg 14.29% 97.25%);
    opacity: 0.9 !important;
    -webkit-filter: none !important;
    filter: none !important;
    padding: 8px 16px 8px 48px;
    padding: 12px 16px 12px 42px;
    background-color: hsl(9 94% 41% / 1);
    border-radius: 16px;
    animation: unset;
    -webkit-animation: unset;
    -o-animation: unset;
    -moz-animation: unset;
    background-image: url(/graphics/web/ani/loading-white-32.gif) !important;
    background-blend-mode: screen;
    background-position: 14px 13px !important;
    background-size: 20px;
    background-repeat: no-repeat;
}

/*#endregion loading-state */
/*#region modal-state */
dialog.control.modal-state>div.body {
    background-image: unset !important;
    opacity: 0.7 !important;
    background-position: 42% 50% !important;
    background-size: 28px;
    line-height: 1.7rem;
    background-repeat: no-repeat;
    pointer-events: none;
    user-select: none;
}

dialog.control.list-view-base.modal-state>div.body>div.master:before, dialog.control:not(.list-view-base,.master-detail-view-base).modal-state>div.body:before, dialog.control:not(.list-view-base).menu-detail-view.modal-state>div.body>.detail:before, dialog.control:not(.list-view-base).master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.modal-state:before, dialog.control:not(.list-view-base).master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body>.detail.modal-state:before {
    content: attr(data-modal-state-message);
    font-family: Inter, Roboto, Helvetica, Calibri, Arial, sans-serif !important;
    font-size: 1rem !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 999000000;
    color: hsl(0deg 14.29% 97.25%);
    opacity: 0.9 !important;
    -webkit-filter: none !important;
    filter: none !important;
    padding: 8px 16px 8px 48px;
    padding: 12px 16px 12px 42px;
    background-color: hsl(250 67% 34% / 1);
    border-radius: 16px;
    animation: unset;
    -webkit-animation: unset;
    -o-animation: unset;
    -moz-animation: unset;
    background-image: url(/graphics/web/ani/loading-white-32.gif) !important;
    background-blend-mode: screen;
    background-position: 14px 12px !important;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: 14px 50% !important;
}

/*#endregion modal-state */
/*#region group */
dialog.control.loading>div.body, dialog.control.processing>div.body, dialog.control>div.body.processing, dialog.control>div.body.loading, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.loading, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.processing {
    background-image: unset !important;
    /* background-image: url(/graphics/web/ani/loading-white-32.gif) !important; */
    /* background-blend-mode: saturation; */
    opacity: 0.7 !important;
    background-position: 42% 50% !important;
    background-size: 28px;
    line-height: 1.7rem;
    background-repeat: no-repeat;
    pointer-events: none;
}

dialog.control.loading>div.body:before, dialog.control.processing>div.body:before, dialog.control>div.body.processing:before, dialog.control>div.body.loading:before, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.loading:before, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.processing:before, dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body>.detail.loading:before {
    content: "Y\00FCkleniyor...";
    font-family: Inter, Roboto, Helvetica, Calibri, Arial, sans-serif !important;
    font-size: 1rem !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 999000000;
    color: #f9f7f7;
    opacity: 0.9 !important;
    -webkit-filter: none !important;
    filter: none !important;
    padding: 8px 16px 8px 48px;
    padding: 8px 16px 8px 28px;
    background-color: hsl(198 59% 29% / 1);
    border-radius: 8px;
    animation: unset;
    -webkit-animation: unset;
    -o-animation: unset;
    -moz-animation: unset;
}

dialog.control.loading>div.body:after, dialog.control.processing>div.body:after, dialog.control>div.body.processing:after, dialog.control>div.body.loading:after, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.loading:after, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.processing:after, dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body>.detail.loading:after {
    content: "" !important;
    background-image: url(/graphics/web/ani/loading-white-32.gif) !important;
    background-blend-mode: saturation;
    /* opacity: 0.7 !important; */
    background-position: 37% 46% !important;
    background-size: 16px;
    background-repeat: no-repeat;
    width: auto;
    height: auto;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    color: white;
    /* transform: translate(-50%, -50%); */
    z-index: 9999000000;
    display: block !important;
}

dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.loading:before, dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail.processing:before {
    position: absolute !important;
}

body.disabled-progress::before {
    content: "Y\00FCkleniyor...";
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 999000000;
    font-size: 120%;
    color: #f9f7f7;
    opacity: 1 !important;
    -webkit-filter: none !important;
    filter: none !important;
    padding: 8px 16px;
    background-color: #391687;
    border-radius: 4px;
}

/*#endregion group */
div.empty-list:after {
    content: "Kay\0131t mevcut de\011fil";
    padding: 16px 32px;
    font-style: italic;
    color: silver;
    white-space: nowrap;
}

dialog#common-ui-pop-notification {
    position: fixed;
    bottom: 0px;
    left: 8px;
    pointer-events: auto !important;
    opacity: 1 !important;
    max-width: 360px;
    min-width: 250px;
    top: auto;
    right: auto;
    overflow: hidden;
    background-color: transparent;
    box-shadow: unset;
    border-radius: unset;
    padding: 0px;
    border: 0px;
    transition: height 0.5s linear;
}

dialog#common-ui-pop-notification * {
    pointer-events: auto !important;
    opacity: 1 !important;
}

dialog#common-ui-pop-notification>div {
    background-color: var(--theme-color-warning);
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-box-shadow);
    padding: 16px;
    margin-bottom: 8px;
    /* transition: transform 0.5s linear; */
    width: inherit;
    overflow-x: clip;
    position: relative;
}

dialog#common-ui-pop-notification>div.error {
    background-color: hsl(0 100% 85% / 1);
}

dialog#common-ui-pop-notification>div>div {
    font-family: 'Roboto';
    font-size: 14px;
    width: inherit;
    text-overflow: ellipsis;
    line-height: 23px;
}

dialog#common-ui-pop-notification>div>i {
    position: absolute;
    right: 0px;
    top: 0px;
    line-height: 16px;
    padding: 4px;
}

dialog#common-ui-pop-notification>div>i:before {
    font-weight: normal;
    font-size: 18px;
    opacity: 0.2;
}

dialog#common-ui-pop-notification>div:hover>i:before {
    opacity: 0.7;
}

dialog#common-ui-pop-notification::backdrop {
    /* width: 0px; */
    /* height: 0px; */
    background-color: transparent;
}

/*#region multi row control */
#multi-row-key-label-control {
    position: relative;
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: center;
}

#multi-row-key-label-control>i {
    position: absolute;
    right: 0px;
    bottom: 16px;
}

#multi-row-key-label-control div.row {
    display: flex;
    margin-bottom: 16px;
    align-items: center;
}

#multi-row-key-label-control div.row>i#delete {
    margin-left: 8px;
    color: coral;
    cursor: pointer;
}

#multi-row-key-label-control div.row>div {
    display: flex;
    align-items: center;
}

#multi-row-key-label-control div.row>div:first-child {
    position: relative;
    flex-grow: 1;
}

#multi-row-key-label-control div.row>div:first-child input {
    width: -webkit-fill-available;
    padding-right: 32px;
}

#multi-row-key-label-control div.row>div:first-child div#commands {
    position: absolute;
    right: 8px;
    display: flex;
}

#multi-row-key-label-control div.row>div:first-child div#commands>i {
    cursor: pointer;
    margin: 0px !important;
    width: auto !important;
    padding: 0px !important;
}

#multi-row-key-label-control div.row>div:nth-child(2) {
    flex-grow: 0;
    position: relative;
    /* display: flex; */
}

#multi-row-key-label-control div.row>div:nth-child(2)>i#drop {
    position: absolute;
    background-color: hsl(0deg 0% 92%);
    color: hsl(0deg 0% 49%);
    display: flex;
    align-items: center;
    padding: 0px 4px;
    border: 1px solid var(--input-border-color);
    border-radius: 0px 4px 4px 0px;
    border-left-width: 0px;
    user-select: none;
    height: 94%;
    height: -webkit-fill-available;
    right: 0px;
}

#multi-row-key-label-control div.row>div:nth-child(2)>i#drop:before {
    transition: transform 0.5s linear;
}

#multi-row-key-label-control div.row>div:nth-child(2)>i#drop.pop:before {
    transform: rotateX(180deg);
}

#multi-row-key-label-control div.row>div:nth-child(2) input {
    width: 140px;
}

#multi-row-key-label-control div.row>div:nth-child(2)>div.options {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: var(--pop-box-background-color);
    top: 36px;
    left: 0px;
    right: 0px;
    border: var(--pop-border);
    border-radius: var(--drop-border-radius);
    box-shadow: var(--pop-box-2-shadow);
    transform-origin: top;
    transform: scale(1, 0);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.3s ease-out;
    max-height: 300px;
    overflow-y: auto;
    z-index: 90000;
}

#multi-row-key-label-control div.row>div:nth-child(2)>div.options.pop {
    transform: scale(1, 1);
    opacity: 1;
}

#multi-row-key-label-control div.row>div:nth-child(2)>div.options>div {
    display: flex;
    justify-content: flex-start;
    width: -webkit-fill-available;
    padding: 8px 16px;
    user-select: none;
    cursor: pointer;
}

#multi-row-key-label-control div.row>div:nth-child(2)>div.options>div:hover {
    background-color: var(--pop-item-hover-bgcolor);
    color: var(--pop-item-hover-color);
}

#multi-row-key-label-control div.row>div+div {
    margin-left: 16px;
}

/*#endregion multi row control */
/*#region editableSelect */
div#editable-select-VydPVON60 {
    --select-border-color: hsl(0deg 0% 86%);
    display: block;
    position: relative;
}

div#editable-select-VydPVON60 #drop-box {
    position: absolute;
    position: fixed;
    background-color: var(--pop-box-background-color);
    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 12%);
    border-radius: var(--drop-border-radius);
    transform-origin: var(--pop-up-transform-origin);
    transform-origin: top;
    opacity: 0;
    transform: var(--pop-up-transform);
    transition: var(--pop-transition);
    max-height: 256px;
    overflow-y: auto;
    z-index: 1;
    margin-left: 1px;
    margin-right: 1px;
    width: -webkit-fill-available;
    user-select: none;
}

div#editable-select-VydPVON60.pop #drop-box {
    opacity: 1;
    transform: scale(1, 1);
}

div#editable-select-VydPVON60 #drop-box>div {
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: center;
    cursor: pointer;
    background-color: white;
    margin: 0px !important;
    user-select: none;
    overflow-x: clip;
    text-overflow: ellipsis;
    flex-wrap: nowrap;
}

div#editable-select-VydPVON60 #drop-box>div.selected {
    background-color: rgb(0 0 0 / 7%);
}

div#editable-select-VydPVON60 #drop-box>div.hidden {
    display: none !important;
}

div#editable-select-VydPVON60 #drop-box>div+div {
    border-top: 1px inset hsl(0deg 0% 0% / 3%);
}

div#editable-select-VydPVON60 #drop-box>div:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

div#editable-select-VydPVON60 #drop-box>div:hover {
    background-color: rgb(0 0 0 / 5%);
}

div#editable-select-VydPVON60 #drop-box>div>div {
    min-height: 36px;
}

div#editable-select-VydPVON60 #drop-box>div>div:first-child {
    max-width: 32px;
    max-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#editable-select-VydPVON60 #drop-box>div>div:first-child:before {
    font-family: 'FontAwesome Solid';
    content: "\f007";
    cursor: pointer;
    opacity: 0.6;
    font-style: normal;
    font-size: 32px;
    color: silver;
    margin: auto;
    display: none;
}

div#editable-select-VydPVON60 #drop-box>div>div:first-child:empty:before {
    display: block;
}

div#editable-select-VydPVON60 #drop-box>div>div:first-child>img {
    height: inherit;
    max-height: inherit;
    width: inherit;
    max-width: inherit;
}

div#editable-select-VydPVON60 #drop-box>div>div:nth-child(2) {
    display: flex;
    align-items: center;
    color: var(--soft-black);
    flex-grow: 2;
    padding-left: 8px;
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
    /* flex-wrap: nowrap; */
}

div#editable-select-VydPVON60 #drop-box>div>div:last-child {
    margin-right: 8px;
}

div#editable-select-VydPVON60 div.input {
    display: flex;
    align-items: stretch;
}

div#editable-select-VydPVON60 div.input.spin:before {
    right: 31px;
    font-size: 16px;
    top: 8px;
}

div#editable-select-VydPVON60 div.input input {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-color: var(--select-border-color) !important;
    padding-right: 32px;
}

div#editable-select-VydPVON60 div.input #clear {
    display: flex;
    align-items: center;
    position: absolute;
    right: 32px;
    height: 100%;
}

div#editable-select-VydPVON60 div.input.spin #clear {
    display: none;
}

div#editable-select-VydPVON60 div.input #clear svg {
    stroke: #edecec;
}

div#editable-select-VydPVON60 div.input #clear svg:hover {
    stroke: red;
}

div#editable-select-VydPVON60 div.input i#drop {
    background-color: hsl(0deg 0% 92%);
    color: hsl(0deg 0% 49%);
    display: flex;
    align-items: center;
    padding: 0px 4px;
    border: 1px solid var(--select-border-color);
    border-radius: 0px 4px 4px 0px;
    border-left-width: 0px;
    user-select: none;
}

div#editable-select-VydPVON60 div.input i#drop:before {
    transition: transform 0.5s linear;
}

div#editable-select-VydPVON60.pop div.input i#drop:before {
    transform: rotate(180deg);
}

/*#endregion editableSelect */
/*#region editable2select */
div#editable-select-VydPVON60-1 {
    --select-border-color: hsl(0deg 0% 86%);
    display: block;
    position: relative;
}

div#editable-select-VydPVON60-1 input {
    width: -webkit-fill-available !important;
}

div#editable-select-VydPVON60-1.spin:before {
    right: 10px;
    font-size: 18px;
    top: 7px;
    color: hsl(240 100% 64% / 1);
}

div#editable-select-VydPVON60-1.spin {
    cursor: wait;
}

div#editable-select-VydPVON60-1.spin input {
    pointer-events: none;
    background-color: hsl(0 0% 95% / 1);
}

/*#endregion editable2select */
/*#region tree-view */
#VJ0_rme_R {
    height: 100%;
}

#VJ0_rme_R .tree-view {
    position: relative;
}

#VJ0_rme_R .tree-view .node {
    display: flex;
    align-items: center;
    position: relative;
    padding: 4px;
}

#VJ0_rme_R .tree-view .node>div.vl {
    width: 1px;
    position: absolute;
    height: 100%;
    border-left: 1px solid rgb(240 240 240);
    left: 11.5px;
    z-index: 0;
    pointer-events: none;
}

#VJ0_rme_R .tree-view .node> :is(.e, i#add, i#blank,i#reload) {
    position: static;
    font-size: 13px;
    z-index: 1;
    padding: 0px;
    background-color: rgb(248 248 248);
    color: gray;
    border-radius: 2px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0px;
    cursor: pointer;
}

#VJ0_rme_R .tree-view .node>.e {
}

#VJ0_rme_R .tree-view .node>.e:before {
    font-family: "FontAwesome Solid";
    content: "\f054";
    position: absolute;
    transform: rotateZ(90deg);
    transition: transform ease-out 0.5s;
    font-size: inherit;
    line-height: unset;
    color: inherit;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

#VJ0_rme_R .tree-view .node>.e.exp:before {
    transform: rotateZ(0deg);
}

#VJ0_rme_R .tree-view .node>.e.inactive {
    opacity: 0;
    pointer-events: none;
}

#VJ0_rme_R .tree-view .node>.t {
    color: rgb(92 92 92);
    cursor: pointer;
    padding: 4px;
    padding-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 10 10 auto;
}

#VJ0_rme_R .tree-view .node>.t.selected {
    background-color: hsl(0deg 0% 0% / 7%);
}

#VJ0_rme_R .tree-view .node>:is(#add,#reload) {
    flex: 0 0;
    font-size: 12px !important;
    opacity: 0;
    transition: opacity 0.2s linear;
    margin-left: 4px;
}

#VJ0_rme_R .tree-view .node>#blank {
    flex: 10 3;
    font-size: 12px !important;
    opacity: 0;
}

#VJ0_rme_R .tree-view .node:hover {
    background-color: hsl(0deg 0% 0% / 1%);
}

#VJ0_rme_R .tree-view .node:hover>:is(#add,#reload) {
    opacity: 1;
}

#VJ0_rme_R .tree-view .node>#add:before {
    font-weight: normal;
}

#VJ0_rme_R .tree-view .node+.c {
    margin-left: 11.5px;
    padding-left: 32px;
    border-left: 1px solid rgb(240 240 240);
}

#VJ0_rme_R .tree-view .node+.c.off {
    display: none;
}

#VJ0_rme_R * {
}

#VJ0_rme_R .tree-view .node.append-root {
    order: -1;
}

#VJ0_rme_R .tree-view .node.append-root>.e {
    border-radius: 4px !important;
    background-color: blue !important;
}

#VJ0_rme_R .tree-view .node.append-root>.e:before {
    content: "\f067";
    transform: rotateZ(0deg);
    color: white;
}

@media (max-width: 640px) {
     #VJ0_rme_R  {
        margin-left:16px;
    }
    #VJ0_rme_R .tree-view .node {
        /* padding: 12px 4px; */
    }

    #VJ0_rme_R .tree-view .node>.t {
        padding: 8px;
    }

    #VJ0_rme_R .tree-view .node> :is(.e, i#add, i#blank,i#reload) {
        font-size: 24px;
    }
     #VJ0_rme_R .tree-view .node>.e {
        margin-right:8px;
    }
    #VJ0_rme_R .tree-view .node>.e:before {
        font-size: 32px;
    }
}

/*#endregion tree-view */
/*#region begin WUP-14Qo0qGi   */
.extension-dialog.avatar-check-list header input {
    transform-origin: center;
    transform-style: flat;
    transform: scale(0);
    margin: 12px;
    position: absolute;
    opacity: 0;
    transition: all 0.1s linear;
}

/*#region newRegion */
.extension-dialog.avatar-check-list header.checked input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

.extension-dialog.avatar-check-list header div:hover>input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

/*#endregion newRegion */
/*#region newRegion */
.extension-dialog.avatar-check-list header.checked input+div {
    transform: scale(0);
    opacity: 0 !important;
}

.extension-dialog.avatar-check-list header div:hover input+div {
    transform: scale(0);
    opacity: 0 !important;
}

/*#endregion newRegion */
.extension-dialog.desktop-view.avatar-check-list header {
    min-width: 250px !important;
}

.extension-dialog.desktop-view.avatar-check-list header i {
    display: none;
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }

    100% {
        -webkit-transform: rotate (359 deg);
        transform: rotate(359deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }

    100% {
        -webkit-transform: rotate (359 deg);
        transform: rotate(359deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

.master .menu-items-4yD6hik9i {
    box-sizing: border-box;
    overflow-y: auto !important;
    height: 100% !important;
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
    /* padding-top: 36px; */
    /* position: relative; */
}

.master .menu-items-4yD6hik9i[class~="smart-scroll"]::-webkit-scrollbar {
    width: 3px !important;
    background-color: rgba(0, 0, 0, 0);
}

.master .menu-items-4yD6hik9i:hover[class~="smart-scroll"]::-webkit-scrollbar-thumb {
    background-color: rgb(224 224 224 / 46%);
}

.master .menu-items-4yD6hik9i * {
    user-select: none;
}

.master .menu-items-4yD6hik9i>* {
    cursor: default;
    display: block;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.master .menu-items-4yD6hik9i>*>div {
    padding: 12px 16px 12px 12px;
    color: hsl(0 0% 40% / 1);
    border-right-width: 3px;
    border-bottom: 1px solid rgb(0 0 0 / 3%);
    border-left: 4px solid transparent;
    width: inherit;
    white-space: nowrap;
    font-weight: 500;
    box-sizing: border-box;
    cursor: default;
    overflow-x: hidden;
    height: var(--menu-item-height);
    position: static;
    line-height: normal !important;
    background-clip: unset;
    transition: unset;
    transform: unset;
    box-shadow: unset;
    background-color: unset;
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    flex: 1 0;
}

.master .menu-items-4yD6hik9i>*>i {
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    /* height: -webkit-fill-available; */
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* flex: 0 1 24px; */
    /* width: 24px !important; */
}

.master .menu-items-4yD6hik9i>*>i:before {
    opacity: 0.1;
}

.master .menu-items-4yD6hik9i>*:hover>i:before {
    opacity: 0.7;
}

dialog.control>div.body.master-detail.shrink>.master .menu-items-4yD6hik9i>*>i {
    display: none;
}

div:not([class~="shrink"])>.master .menu-items-4yD6hik9i>*>div {
    text-overflow: ellipsis;
    overflow-x: clip;
}

dialog.control>div.body.master-detail:not([class~="initial"])>.master {
    transition: flex-basis 0.3s linear, min-width 0.3s linear;
    -webkit-transition: flex-basis 0.3s linear, min-width 0.3s linear;
}

/*#region check-box*/
dialog.control div:is(.check-box, .radio-box) {
    padding: 5px 5px 5px 0px !important;
    display: flex;
    flex-direction: row;
    line-height: initial;
    align-items: center;
}

dialog.control div:is(.check-box, .radio-box)[class~="spin"] {
    background-position: 5px 50% !important;
}

dialog.control div.check-box[class~="inline"] {
    display: inline-block;
}

dialog.control div.check-box[class~="text"] {
    white-space: nowrap !important;
    cursor: default;
    width: auto !important;
}

dialog.control div.check-box[class~="text"]:before {
    margin-right: 10px;
}

dialog.control div.radio-box>*:is(div, span) {
    display: inline;
    margin: 0px;
    margin-left: 7px;
    /* padding: 6px; */
    line-height: 0px;
}

dialog.control div:is(.check-box, .radio-box):before {
    font-family: "FontAwesome Solid" !important;
    font-size: 14px;
    color: rgba(0, 0, 0, 0);
    color: rgb(250 0 0);
    border: 1px solid rgb(222, 222, 222);
    border-radius: 3px;
    content: "\f00c";
    padding: 1px !important;
    box-sizing: border-box;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    background-color: white;
    /* box-sizing: content-box; */
    margin-right: 5px;
}

dialog.control div.radio-box:before {
    content: "\f111";
    font-size: 12px;
    padding: 3px !important;
    border-radius: 9px;
}

dialog.control div.radio-box[class~="inline"] {
    display: inline-block;
}

dialog.control div.radio-box[class~="text"]:before {
    margin-right: 5px;
}

dialog.control div[class~="medium"].check-box:before {
    font-size: 13px;
}

dialog.control div[class~="marked"].check-box:not([checked]):after {
    content: "\f00c";
    color: rgba(124, 124, 124, 0.3) !important;
}

dialog.control div[class~="strong"].check-box:before {
    border: 1px solid rgb(192, 192, 192);
}

dialog.control div:is(.check-box, .radio-box)[checked]:before {
    color: rgb(124, 124, 124);
}

dialog.control div:is(.check-box, .radio-box)[disabled]:before {
    cursor: not-allowed;
}

dialog.control div:is(.check-box, .radio-box)[disabled][checked]:before {
    color: rgb(240, 238, 238);
}

/*#region newRegion */
dialog.control div:is(.check-box, .radio-box)[tristate]:before {
    opacity: 0.4;
}

dialog.control div:is(.check-box, .radio-box)[tristate][checked]:before {
    opacity: 0.4;
}

/*#endregion newRegion */
dialog.control div:is(.check-box, .radio-box).positive[checked]:before {
    color: rgb(51, 182, 22);
}

div.can-not-check>div>div.check-box:before {
    display: none;
}

div.can-not-check>div>div.check-box {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/*#endregion check-box*/
dialog.control>div.body.master-detail.shrink>.master+.detail {
    flex-basis: calc(100% - var(--collapse-width)) !important;
    /* display: none; */
    z-index: 10;
    /* flex-basis: 100px !important; */
    /* width: 100px !important; */
    /* position: absolute; */
    /* left: 100px; */
    /* margin-top: 100px !important; */
}

dialog.control>div.body.master-detail.shrink>.master .menu-items-4yD6hik9i>*>div {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

dialog.control>div.body.master-detail>.detail>i {
    position: absolute;
    left: -2px;
    top: 50%;
    z-index: 9910000;
    transform: rotateY(180deg);
    border-radius: 4px 0px 0px 4px;
    background-color: var(--master-background-color);
    padding: 4px;
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    display: none
}

/*#region newRegion */
dialog.control>div.body.master-detail>.detail>i:hover {
    display: block
}

dialog.control>div.body.master-detail>.master:hover+div>i {
    display: block
}

/*#endregion newRegion */
dialog.control.no-master>div.body.master-detail>.detail>i {
    display: none !important;
}

dialog.control>div.body.master-detail>.detail>div {
    z-index: 1;
}

dialog.control>div.body.master-detail>.detail>:is(div[data-shared-container],div[data-protected-container] ) {
    height: 100%;
}

dialog.control>div.body.master-detail.shrink>.master+div>i {
    transform: rotateY(0deg);
    border-radius: 0px 4px 4px 0px;
}

dialog.control>div.body.master-detail>.detail>i:before {
    font-size: 16px;
}

.master .menu-items-4yD6hik9i>*>div.selected, .master .menu-items-4yD6hik9i>*>div.selected ~ i {
    background-color: rgb(255 255 255 / 86%) ;
}

.master .menu-items-4yD6hik9i>*>div.selected ~ i {
    display: flex;
}

.master .menu-items-4yD6hik9i>*>div:hover {
    border-left-color: coral;
}

.master .menu-items-4yD6hik9i>*>div:active {
    background-color: hsl(157 41% 87% / 1);
}

.master .menu-items-4yD6hik9i>*>div:before {
    color: rgba(90, 125, 228, 0.59);
    font-size: 1.2rem;
    margin-right: 20px !important;
    font-weight: normal;
    /* font-family: "Fontawesome Solid" !important; */
    font-family: "Fontawesome Solid";
    width: 20px;
    /* display: block; */
    /* flex: 1 0 20px; */
    flex-basis: 20px;
    display: flex;
}

.master .menu-items-4yD6hik9i>*>div:not([class*="fa-"]):not([class~="icon-match"]):before {
    content: "\f128";
}

.smart-check {
    --height: 22px;
    height: var(--height);
    width: 40px;
    border-radius: 11px;
    box-sizing: border-box;
    line-height: 0px !important;
    background-color: rgb(252 252 252);
    border: 2px solid rgb(220 220 220) !important;
}

.smart-check.spin {
    background-image: none !important;
    position: relative;
    pointer-events: none;
}

.smart-check.spin:before {
    top: 50%;
    font-size: 13px !important;
    right: 2px;
    z-index: 10;
    opacity: 1 !important;
    color: blue !important;
}

.smart-check>div {
    background-color: rgb(253 253 253) !important;
    height: 18px;
    width: 18px;
    border-radius: inherit !important;
    margin: 0px !important;
    box-sizing: border-box !important;
    display: block !important;
    transition: transform 0.1s linear !important;
    box-shadow: 0px 0px 1px 1px gainsboro !important;
    transform: translateX(0px);
}

.smart-check[checked] {
    background-color: rgb(91 250 192);
}

.smart-check[checked]>div {
    transform: translateX(18px);
}

.smart-check.small {
    --height: 18px;
    height: var(--height);
    width: 32px;
    border-radius: calc(var(--height)/2);
}

.smart-check.small>div {
    height: 14px;
    width: 14px;
}

.smart-check.small[checked]>div {
    transform: translateX(14px);
}

/*#region begin contact list dialog   */
div.service-provider {
    --service-row-height: 60px;
    border: 1px solid var(--theme-color-master-light-0);
    border-radius: 4px;
}

.select-account-dialog div.service-provider {
    --service-row-height: 50px;
    border: 0px;
    border-radius: 0px;
    /* background-color: hsl(233deg 100% 96%); */
    /* height: -webkit-fill-available; */
    display: flex;
    flex-direction: column;
    flex: 1 0;
}

div.service-provider>div.h {
    font-weight: 500;
    background-color: var(--primary-color-light);
    color: var(--primary-color-complement-shade-5);
    padding: 8px;
    letter-spacing: 0.15px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.select-account-dialog div.service-provider>div.h {
    padding: 2px 12px;
    letter-spacing: 0.15px;
    border-radius: unset !important;
    margin: 0px !important;
    display: flex;
    justify-content: space-between;
    flex: 0 1;
}

.select-account-dialog div.service-provider>div.h>i {
    cursor: pointer;
    padding: 0px;
}

.select-account-dialog div.service-provider>div.h>i:before {
    font-size: 1rem;
}

div.service-provider>div.accounts {
    min-height: var(--service-row-height);
}

.select-account-dialog div.service-provider>div.accounts>div {
    margin: 0px 0px 1px !important;
    padding: 4px;
    background-color: hsl(231deg 92% 99%);
    width: -webkit-fill-available !important;
}

.select-account-dialog div.service-provider>div.accounts {
    flex: 1 0 auto;
    /* height: auto; */
}

.select-account-dialog div.service-provider>div.accounts div.user-info>div:first-child {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
}

.select-account-dialog div.service-provider>div.accounts div.user-info>div:last-child {
    flex-grow: 2 !important;
    flex-shrink: 0 !important;
}

.select-account-dialog div.service-provider>div.accounts div.user-info>div:last-child>div:first-child {
    align-self: flex-start;
}

.select-account-dialog div.service-provider>div.accounts div.user-info>div:last-child>div:last-child {
    align-self: flex-end;
    padding-bottom: 4px;
}

.select-account-dialog div.service-provider>div.accounts div.user-info div img {
    max-width: 40px !important;
}

div.service-provider>div.accounts>div {
    background-color: var(--primary-color-complement-tint-9);
    margin: 8px !important;
    color: var(--primary-color-complement-shade-6) !important;
    color: black !important;
}

div.service-provider div#service-tools {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    flex: 0 1;
}

div.service-provider div#service-tools>div#add-new {
    color: var(--primary-color-complement-shade-1);
    color: var(--base-text-color);
    color: var(--link-color);
}

div#add-new.spin:before {
    font-size: 16px;
    left: auto;
    right: 10px;
    top: 0px;
}

div.user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
}

div.user-info.spin {
    pointer-events: none;
}

div.user-info+div.user-info {
    margin-top: 8px;
}

div.user-info img {
    max-height: var(--service-row-height);
}

div.user-info i#sign-out {
    margin-left: 8px;
    color: var(--primary-color-complement-tint-3);
    color: darkslategray !important;
}

.body i#sign-out {
    margin-right: 4px;
}

div.user-info>div:nth-child(1) {
    line-height: 0px !important;
    font-size: 0px !important;
}

div.user-info>div:nth-child(2) {
    padding-left: 8px;
    margin-top: 4px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

div.user-info>div:nth-child(2)>div {
    display: flex;
}

div.user-info>div:nth-child(2)>div:nth-child(1) {
    justify-content: space-between;
    max-width: 96%;
}

div.user-info>div:nth-child(2)>div:nth-child(1)>div {
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
    font-size: 0.98em;
    color: var(--primary-color-complement-shade-5) !important;
    flex-grow: 5;
}

div.user-info>div:nth-child(2)>div:nth-child(2) {
    justify-content: flex-end;
}

/*/////////////////////////////////// end contact list dialog  ////////////////////////////////////////////////////////*/
div#A41eQRpQNi {
    border-bottom: 1px solid #f0f0f0;
}

svg.icon {
    stroke: rgb(112 112 112);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/*/////////////////////////////////// end from desktop.css on extensions ///////////////////////////////////*/
/*#region begin from module.css on framework   */
.centered-fixed {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    max-height: 95%;
    max-width: 95%;
}

.top-left-fixed {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    max-height: 95%;
    max-width: 95%;
}

.maximized {
    z-index: 1000008670;
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    transform: unset !important;
}

dialog.control.page-template {
    --list-header-height: 42px;
    --header-height: 39px;
    --footer-height: 30px;
    --menu-item-height: calc(var( --header-height) + -4px) --lighten: -5%;
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100% !important;
    height: 100%;
    max-height: unset;
    max-width: unset;
    box-shadow: none;
    border-radius: 0px !important;
    background-color: var(--primary-color);
    z-index: 10000000 !important;
}

dialog.control.page-template #credential-picker-container {
    z-index: 10000;
    position: fixed;
    top: 25%;
    right: 25%;
}

/*#region group */
#picker-container-EJANop1co {
    z-index: 9090000000;
    position: fixed !important;
    /* top: 30% !important; */
    /* right: 20% !important; */
    top: 50px !important;
    right: 8px !important;
    left: auto;
    display: block;
}

#credential-picker-container-EJANop1co {
    z-index: 9090000000;
    position: fixed !important;
    top: 30% !important;
    right: 20% !important;
    display: block;
}

/*#endregion group */
dialog.control.page-template * {
    font-size: 0.95rem;
}

i.spin-right {
    padding: 0px 8px;
    background: none !important;
    position: relative;
}

i.spin-right:before {
    position: absolute;
    left: 30%;
}

.spin-absolute {
    position: relative;
}

.spin-absolute.spin {
    opacity: 1 !important;
    background: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
}

.spin-absolute.spin:before {
    position: absolute;
    left: unset !important;
    top: unset !important;
    z-index: 99999991000;
    content: "\f1ce" !important;
    content: "\f110" !important;
    color: hsl(173 59% 22% / 1) !important;
    opacity: 1 !important;
}

i.spin-right.spin:before {
    top: 15% !important;
}

/*#region group */
.spin:before {
    font-family: "FontAwesome Solid" !important;
    content: "\f110";
    font-size: 16px;
    position: absolute;
    top: 0px;
    color: #b2b2ff;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    -o-animation: fa-spin 2s infinite linear;
    -moz-animation: fa-spin 2s infinite linear;
    opacity: 1;
}

.spin-bgr.spin:before {
    display: none !important;
}

i.spin:before {
    font-family: "FontAwesome Solid" !important;
    content: "\f110";
    font-size: 16px;
    position: absolute;
    top: 0px;
    color: #b2b2ff;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    -moz-animation: fa-spin 2s infinite linear;
    -o-animation: fa-spin 2s infinite linear;
    opacity: 1 !important;
}

/*#endregion group */
.input2-border {
    border: 1px solid rgb(192 192 192);
    border-radius: 4px;
}

dialog.control.page-template>div.status {
    z-index: 100000;
    height: var(--footer-height) !important;
    position: sticky;
    bottom: 0px;
    right: 0px;
    left: 0px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

dialog.control.page-template>div.status>#signal-box {
    order: 1;
    flex: 0 1 24px;
    background-color: transparent;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.control.page-template>div.status>#signal-box > div {
    background-color: transparent;
    width: 16px;
    height: 16px;
    border-radius: 50% 50%;
}

dialog.control.page-template>div.status>#signal-box > div.fire {
    background-color: #67f385;
}

dialog.control.page-template>div.status>#status-box-left {
    order: 2;
    flex-basis: 70%;
}

dialog.control.page-template>div.status>#status-box-left #progress-bar {
    width: -webkit-fill-available;
    height: 10px;
    border-radius: 2px;
    /* box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 ); */
}

progress[value]::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 5px;
}

progress[value]::-webkit-progress-value {
    background-color: hsl(173 59% 25% / 1);
    border-radius: 5px;
    /* box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 ); */
}

progress[value]::-moz-progress-bar {
    /*#region style rules */
}

dialog.control.page-template>div.status>#status-box-right-1 {
    order: 4;
    flex-basis: auto;
    flex-shrink: 0;
    /* flex-grow: 1; */
    display: flex;
    justify-content: right;
}

dialog.control.page-template>div.status>#status-box-right {
    order: 3;
    flex-basis: auto;
    margin-right: 16px;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

div.table {
    display: table;
    border-spacing: 0px 16px;
    --horizontal-pad: 8px;
    --vertical-pad: 4px;
}

div.table.smart {
    border-spacing: 0px 0px;
}

div.table.smart.fixed {
    table-layout: fixed;
}

div.table>div {
    display: table-row !important;
}

div.table > div.caption {
    font-size: 105%;
    display: table-caption !important;
    font-weight: 500;
    padding-left: var(--horizontal-pad);
    padding-bottom: var(--vertical-pad);
}

div.table>div>div {
    display: table-cell;
    vertical-align: middle;
    padding: var(--vertical-pad) var(--horizontal-pad);
}

div.table>div.table-header>div {
    font-weight: 500;
    background-color: hsl(0deg 0% 0% / 10%);
}

dialog.control.page-template .master-detail-control {
    display: flex;
    flex-direction: row;
    height: 100%;
}

dialog.control.page-template .master-detail-control>.master {
    border-right: 1px solid rgb(0 0 0 / 3%);
}

dialog.control.page-template .master-detail-control>.master .menu-items-control {
    max-width: 220px;
    min-width: 220px;
    width: -webkit-fill-available;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div {
    padding: 12px 16px 12px 16px;
    color: gray;
    border-right-width: 3px;
    border-bottom: 1px solid rgb(0 0 0 / 3%);
    border-left: 5px solid transparent;
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    font-weight: 400;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div.selected {
    background-color: rgb(0 0 0 / 5%);
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div:hover {
    border-left-color: coral;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div:before {
    content: "\f128";
    color: rgba(90, 125, 228, 0.59);
    font-size: 1.2rem;
    margin-right: 16px;
    font-weight: normal;
    font-family: "Fontawesome Solid" !important;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="new-visit"]:before, dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="muayene"]:before, dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="visits"]:before {
    content: "\f0f1";
    color: #7fb8ff;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="new-call"]:before {
    content: "\f095";
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="tetkik"]:before {
    content: "\f1b3";
    color: #28db3e;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="family"]:before {
    content: "\f0c0";
    color: #db7228;
}

/*#region group */
dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="personel"]:before {
    content: "\f0c0";
    color: #fa868b;
    margin-right: 12px;
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="patients"]:before {
    content: "\f0c0";
    color: #fa868b;
    margin-right: 12px;
}

/*#endregion group */
dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="dosya"]:before {
    content: "\f478";
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="kurum"]:before {
    content: "\f47d";
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="google"]:before {
    content: "\f0f0";
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="solver"]:before {
    content: "\f0f0";
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="document"]:before {
    content: "\f15c";
    content: "\f478";
    color: rgb(24, 92, 148);
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="myrecipes"]:before {
    content: "\f572";
    color: rgba(232, 103, 43, 0.99);
}

dialog.control.page-template .master-detail-control>.master .menu-items-control>*>div[class~="dashboard"]:before {
    content: "\f0ca";
    color: rgba(143, 127, 253, 0.99);
}

dialog.control.page-template .master-detail-control>.detail {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: hidden;
    width: 100%;
}

dialog.control.page-template .master-detail-control>.detail .detail-header {
    padding: 8px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 0;
    --lighten: 35%;
    --degree: 15;
    background-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
}

dialog.control.page-template .master-detail-control>.detail .detail-header .status {
    flex-grow: 2;
    display: flex;
    justify-content: flex-end;
    padding: 0px 32px;
}

dialog.control.page-template .master-detail-control>.detail .detail-header .commands {
    display: flex;
    align-items: center;
}

dialog.control.page-template .master-detail-control>.detail .detail-header .commands>svg {
    cursor: pointer;
    --lighten: -10%;
    --degree: 25;
    stroke: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
}

dialog.control.page-template .master-detail-control>.detail .detail-header .controls {
}

dialog.control.page-template .master-detail-control>.detail .detail-header .text {
    all: unset;
    font-weight: 500;
    letter-spacing: 0.23px;
}

dialog.control.page-template .master-detail-control>.detail .detail-body {
    all: unset !important;
    padding: 0px !important;
    box-sizing: border-box;
    flex-grow: 2;
    overflow-y: auto;
    width: 100%;
    max-height: 94% !important;
}

dialog.control.page-template>div.body .contacts-header>div.contacts-controls .account-box {
    display: flex;
    align-items: center;
}

dialog.control.page-template>div.body .contacts-header>div.contacts-controls .account-box>div {
    font-size: 0.87rem;
    padding-left: 4px;
    color: aliceblue;
}

dialog.control.page-template>div.body .contacts-header>div.contacts-controls .account-box img {
    height: 24px;
    display: block;
}

dialog.control.page-template>div.header {
    background-color: var(--page-header-background-color) !important;
    border-radius: unset;
    height: var(--header-height) !important;
    z-index: 10000;
    z-index: 10;
}

dialog.control.page-template>div.body {
    background-color: rgb(255 255 255 / 91%) !important;
    flex-grow: 2;
    padding: 0px;
    margin: 0px;
    margin-top: var(--header-height);
    /* margin-bottom: var(--footer-height); */
}

dialog.control.page-template>div.body.master-detail>.detail {
    overflow-x: hidden;
    height: inherit;
    box-sizing: border-box;
    position: relative;
}

dialog.control.page-template>div.body.master-detail>.detail.loading {
}

/*#region group */
dialog.control.list-view-base>div.body div:is(.processing, .loading) {
    background-image: none !important;
}

dialog.control.list-view-base>div.body>.master.loading {
    background-image: none !important;
}

/*#endregion group */
dialog.control:is(.list-view-base, .page-template)>div.body div:is(.processing, .loading) {
    background-image: none !important;
    pointer-events: none !important;
}

dialog.control:is(.list-view-base, .page-template)>div.body div:is(.processing, .loading):before {
    content: "Y\00FCkleniyor...";
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 999000000;
    font-size: 110%;
    color: #f9f7f7;
    opacity: 1 !important;
    -webkit-filter: none !important;
    filter: none !important;
    padding: 8px 16px 8px 32px;
    background-color: #2caa9c;
    border-radius: 8px;
    background-image: url(/graphics/web/ani/loading-white-32.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 8% 50% !important;
    background-blend-mode: screen;
    background-size: 16px;
    animation: unset !important;
    o-animation: unset !important;
    -moz-animation: unset !important;
    -webkit-animation: unset !important;
}

dialog.control.list-view-base>div.body div.processing:before {
    content: "\0130\015Flem yap\0131l\0131yor...";
}

dialog.control.page-template>.header>.commands>svg#close {
    display: none;
}

/*#region group */
dialog.control.page-template>div.footer {
    all: unset;
    position: sticky !important;
    top: auto !important;
    bottom: 0px;
    border-radius: unset;
    height: var(--footer-height) !important;
    z-index: 10000;
    display: flex;
    align-items: center;
    background-color: var(--page-header-background-color) !important;
    position: fixed;
    height: var(--header-height);
    left: 0px;
    top: 0px;
    right: 0px;
}

/*#endregion group */
dialog.control.page-template>div.footer:empty {
    display: none;
}

dialog.control.page-template>div.footer>div.progress-text {
    font-size: 0.93rem;
    padding: 0px 8px;
    --lighten: 40%;
    --degree: 15;
    color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
}

dialog.control.page-template>div.body .contact-items {
    --border-color: rgb(0 0 0 / 2%);
    display: table;
    table-layout: fixed;
    box-sizing: border-box;
    width: -webkit-fill-available;
    border-spacing: 0px 0px;
    border-bottom: 1px solid var(--border-color);
}

dialog.control.page-template>div.body .contact-items>div {
    display: table-row;
    box-sizing: border-box;
    width: -webkit-fill-available;
    border-spacing: 0px 0px;
}

dialog.control.page-template>div.body .contact-items>div.selected {
    background-color: rgb(0 0 0 / 7%);
}

dialog.control.page-template>div.body .contact-items>div:hover {
    background-color: #00000008;
}

dialog.control.page-template>div.body .contact-items>div.headers {
    background-color: rgb(158 221 215);
    position: sticky;
    top: var(--list-header-height);
}

dialog.control.page-template>div.body .contact-items>div.headers>div {
    position: relative;
    padding-right: 32px;
}

dialog.control.page-template>div.body .contact-items>div.headers>div>i {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

dialog.control.page-template>div.body .contact-items>div>div {
    display: table-cell;
    padding: 4px 8px;
    max-width: 200px;
    vertical-align: middle;
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
}

dialog.control.page-template>div.body .contact-items>div>div:last-child {
    width: auto;
    min-width: 70px;
    text-align: end;
}

dialog.control.page-template>div.body .contact-items>div>div:nth-child(1) {
    width: 32px;
    min-width: 32px;
    padding: 0px;
}

dialog.control.page-template>div.body .contact-items>div>div>img {
    max-height: 32px;
    display: block;
    line-height: 0px;
    font-size: 0px;
    max-width: 32px;
}

dialog.control.page-template>div.body .contact-items>div+div>div {
    border-top: 1px solid var(--border-color);
}

dialog.control.page-template>div.body .contact-items>div>div:nth-child(n+2)+div {
    border-left: 1px solid var(--border-color)
}

dialog.control.page-template>div.body .contacts-control {
    position: relative;
    height: 100%;
    display: flex;
}

dialog.control.page-template>div.body .contacts-control .master {
    overflow-x: hidden;
    overflow-y: auto;
    width: -webkit-fill-available;
}

dialog.control.page-template>div.body .contacts-control .detail {
    width: 0px;
    height: 100%;
    transition: all 0.5s;
}

dialog.control.page-template>div.body .contacts-control .detail.slide-out {
    width: 500px;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control {
    position: static;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border-radius: 0px;
    box-shadow: unset;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control .header {
    --lighten: -10%;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control .header * {
    color: #ffffffd4 !important;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control .header svg {
    stroke: #ffffffd4;
    opacity: 0.6 !important;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control .profile-detail>div {
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control .profile-detail div.notes {
    background-color: rgb(240 248 255 / 47%);
    padding: 8px;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control .profile-more {
    margin-top: 36px !important;
}

dialog.control.page-template>div.body .contacts-control .detail dialog.control.profile-detail {
}

dialog.control.page-template>div.body .contacts-header {
    position: sticky;
    top: 0px;
    right: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    height: var(--list-header-height);
    background-color: rgb(62 212 199);
    padding: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

dialog.control.page-template>div.body .contacts-header>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

dialog.control.page-template>div.body .contacts-header>div.contacts-controls {
    flex-grow: 3;
    justify-content: space-around;
}

dialog.control.page-template>div.body .contacts-header>.contacts-title {
    color: whitesmoke;
    padding-left: 4px;
}

dialog.control.page-template>div.body .contacts-header>.contacts-controls .search {
    display: flex;
    align-items: center;
    position: relative;
}

dialog.control.page-template>div.body .contacts-controls .search input[type="search"] {
    padding: 4px 27px 4px 4px;
    box-sizing: border-box;
    margin: 2px;
}

dialog.control.page-template>div.body .contacts-header>.contacts-controls .search svg#clear {
    position: absolute;
    right: 8px;
    opacity: 0.1 !important;
    cursor: pointer;
    transform: scale(0.8);
}

dialog.control.page-template>div.body .contacts-header>.contacts-controls .search input:focus+svg#clear {
    opacity: 0.7 !important;
}

dialog.control.page-template>div.body .contacts-header>div.contacts-commands {
    flex-grow: 0;
}

dialog.control.page-template>div.body .contacts-header>div.contacts-commands>div {
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
}

dialog.control.page-template>div.body .contacts-header>div:before {
    font-size: 16px;
}

dialog.control.page-template>div.body .contacts-header>.spin {
}

dialog.control.page-template>div.body .contact-items>div>div:last-child>div {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

dialog.control.page-template>div.body .contact-items>div>div:last-child>div>i {
    padding: 0px 4px;
    color: #a4a4dc;
    cursor: pointer;
}

dialog.control.page-template.slider>div.body {
}

dialog.control.page-template.slider>div.body>div.master-detail {
    position: absolute;
    transition: transform 0.7s ease-in-out;
}

dialog.control.page-template.slider>div.body>div.master-detail:first-child {
    transform: translateX(-100%);
}

dialog.control.page-template.slider>div.body>div.master-detail:last-child {
    transform: translateX(0px);
    left: 0px;
    position: absolute;
    width: 100%;
}

dialog.control.form-dialog>div.body {
    padding: 4px 0px;
    padding: 1px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

dialog.control.form-dialog>div.body>.view-base {
    overflow-y: auto;
}

/*#region begin from extension desktop   */
::placeholder {
    color: rgb(230 230 230) !important;
}

.error::placeholder {
    color: red !important;
}

.debug-print, .debug-print div.container, .debug-print div.container-EyZh0atcj {
    flex-direction: column !important;
    width: -webkit-fill-available;
}

.debug-print div.member {
    display: flex;
    flex-wrap: wrap;
}

.debug-print div.member div.key {
    color: black;
    font-weight: 500;
}

.debug-print div.member div.value {
    color: gray;
    margin-left: 8px;
    max-width: 80%;
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
}

/*#region group */
.debug-print div.container {
    margin-left: 16px;
}

.debug-print div.container-EyZh0atcj {
    margin-left: 16px;
}

/*#endregion group */
.debug-print div.container.collapsed, .debug-print div.container-EyZh0atcj.collapsed {
    display: none !important;
}

/*#region group */
.debug-print div.container-EyZh0atcj>div {
    display: flex;
    flex-direction: row;
}

.debug-print div.container>div {
    display: flex;
    flex-direction: row;
}

/*#endregion group */
.debug-print i.fa-chevron-down {
    transform: rotate(0deg);
    transition: transform 0.3s linear;
    margin-right: 4px;
}

.debug-print i.fa-chevron-down:before {
    font-size: 12px;
    cursor: pointer;
}

.debug-print i.fa-chevron-down.collapsed {
    transform: rotate(-90deg);
}

.debug-print i.fa-chevron-down.none {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
}

dialog.control.dialog {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    box-shadow: 0px 2px 4px 1px gainsboro;
    border-radius: 4px;
    width: fit-content;
    transition: height 0.5s ease-in-out;
}

dialog.control.dialog.medium {
    width: 600px;
    height: 600px;
}

dialog.control.dialog.fit {
    width: fit-content;
    height: fit-content;
}

dialog.control.dialog.small {
    width: 400px;
    height: 400px;
}

dialog.control.dialog.large {
    width: 50%;
    height: 50%;
}

dialog.control.static-view {
    position: static !important;
}

dialog.control.fill-parent {
}

dialog.control.static-view.fill-parent {
    width: 100%;
    height: 100%;
    border-radius: 0px;
    box-shadow: none;
}

dialog.control.modal-dialog {
    height: fit-content !important;
    min-height: 10px !important;
    background-color: hsl(233 100% 93% / 1) !important;
}

dialog.control.modal-dialog.warning {
    background-color: white !important;
}

dialog.control.modal-dialog.warning > div.header {
    background-color: var(--theme-color-warning) !important;
}

dialog.control.modal-dialog.warning > div.header > div.text {
    color: var(--text-color) !important;
}

dialog.control.modal-dialog.warning>div.header>.commands>i#close-dialog.svg > svg {
    stroke: var(--text-color) !important;
}

dialog.control.modal-dialog>div.body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 24px;
    padding-top: 20px !important;
    padding-bottom: 16px;
}

dialog.control.modal-dialog>div.body button {
    margin: 0px;
    margin-top: 18px;
}

dialog.control.modal-dialog>div.body button+button {
    margin-left: 16px;
}

dialog.control input[type="checkbox"] {
    width: auto;
    margin: 0px auto;
    transform: scale(1.5);
    accent-color: #299f92;
    /* filter: sepia(100%) brightness(80%) hue-rotate(170deg) saturate(70%) contrast(300%); */
}

select {
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
}

select.spin {
    background-image: url(/graphics/web/ani/flow.gif) !important;
    background-repeat: repeat;
    background-size: 64px;
}

select.spin.freeze {
    pointer-events: none;
}

dialog.control *:not([contenteditable="true"])>div[contenteditable="true"] {
    border: 1px solid gainsboro;
    width: -webkit-fill-available;
    padding: 8px 0px 0px 8px;
    border-radius: 2px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    min-height: 32px;
}

dialog.control [contenteditable="true"]>div[contenteditable]:not([class~="selector"]):not([contenteditable="true"]) {
    padding: 4px 8px 4px 8px !important;
    border-radius: 4px;
    margin: 0px 4px 8px 0px;
    white-space: nowrap;
}

dialog.control [contenteditable="true"]>div[contenteditable="false"]>i:before {
    font-size: 13px;
    margin-left: 8px;
}

dialog.control div[contenteditable="true"]>div[contenteditable="true"] {
    background-color: rgb(0 0 0 / 0%);
    padding-right: 1px !important;
    padding-left: 1px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    white-space: nowrap;
    width: fit-content;
    cursor: default;
}

dialog.control button.smart {
    padding: 4px 8px;
    font-size: 0.89rem !important;
}

dialog.control button:hover {
    background-color: var(--button-hover-bg-color) !important;
    box-shadow: 0px 0px 1px 2px rgb(0 0 0 / 14%);
}

dialog.control .commands button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/*#region begin dialog & panel style 2   */
dialog.control.templates-dialog.dialog.can-not-expand {
    height: 80% !important;
    max-height: unset !important;
}

dialog.control.master-detail-view-base {
    position: relative;
    --master-basis: 25%;
}

dialog.control.master-detail-view-base>div.body> :is(.detail, .batch) dialog.control {
    /* margin-top: 1.21px !important; */
}

dialog.control.master-detail-view-base > div.body {
    display: flex;
}

dialog.control:not([class~="page-template"]).view-base:not([class~="pop-view"]):not([class~="detail-pop"]) {
    overflow-x: hidden;
}

dialog.control.page-template .dialog:not([class~="is-modal"]) {
    background-color: transparent;
    background-color: inherit !important;
    position: static;
    width: 100%;
    border-radius: unset !important;
    box-shadow: unset;
    height: -webkit-fill-available;
}

dialog.control.blue-skin {
    --header-background-color: hsl(200deg 59% 42%);
}

dialog.control.page-template>div.body div.detail dialog.control:not([class~="is-modal"],[class~="full-height-slider"]) {
    background-color: white !important;
    position: static !important;
    width: 100%;
    border-radius: unset !important;
    box-shadow: unset;
    height: -webkit-fill-available;
    overflow-x: hidden;
}

dialog.control:not([class~="page-template"]).view-base:not([class~="pop-view"])>div.body {
    margin: 0px;
    margin-top: 0px !important;
}

dialog.master-detail-view-base:not([class~="pop-view"]) dialog.control.list-view-base:not([class~="pop-view"]) {
    background-color: transparent;
    max-height: 100%;
    max-width: 100%;
}

dialog.master-detail-view-base>div.body, dialog.control.list-view-base>div.body {
    margin: 1px 0px !important;
    /* padding-top: 2px !important; */
    width: 100% !important;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden !important;
}

dialog.control.list-view-base .body .table {
    display: table;
    border-spacing: 0px 0px;
    --cell-border-color: hsl(0deg 0% 0% / 3%);
    --header-row-background-color: hsl(155 19% 90% / 1);
    --snap-row-background-color: hsl(155 19% 95% / 1);
    --snapped-tag-color: hsl(155 19% 85% / 1);
    --snapped-tag-hover-color: hsl(155 19% 75% / 1);
    border-left: 1px solid var(--cell-border-color);
    border-top: 1px solid var(--cell-border-color);
    width: 100%;
    box-sizing: border-box;
}

/*#region duplicate-list-view */
dialog.control.list-view-base.duplicate-list-view .body .table {
    display: flex;
    flex-wrap: wrap;
    border-spacing: 0px 0px;
    --cell-border-color: rgb(0 0 0 / 0.03);
    border-left: 1px solid var(--cell-border-color);
    border-top: 1px solid var(--cell-border-color);
    width: 100%;
    box-sizing: border-box;
}

dialog.control.list-view-base.duplicate-list-view .table>div {
    flex: 1 0 23%;
    display: block !important;
    position: relative;
    margin: 8px !important;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

dialog.control.list-view-base.duplicate-list-view .table>div.list-header {
    display: none !important;
}

dialog.control.list-view-base.duplicate-list-view .table>div>div {
    display: block;
    margin-left: 36px !important;
    border-width: 0px;
}

dialog.control.list-view-base.duplicate-list-view .table>div>div.avatar {
    position: absolute !important;
    padding: 0px;
    height: 32px;
    left: 4px;
    top: 4px;
    /* width: 32px; */
    max-width: 32px !important;
    max-height: 32px;
    width: 32px !important;
    line-height: 0px;
    position: relative;
    align-items: center;
    margin-left: 0px !important;
}

dialog.control.list-view-base.duplicate-list-view .table>div:hover>div.avatar>input {
    z-index: 1;
    transform: scale(1.5);
    opacity: 1;
    top: auto;
}

dialog.control.list-view-base.duplicate-list-view .table>div:hover>div.avatar :is(img, svg) {
    z-index: 0;
    opacity: 0;
}

dialog.control.list-view-base.duplicate-list-view div.table:not([class~='form'])>div:nth-child(even)>div {
    background-color: unset;
}

/*#endregion duplicate-list-view */
dialog.control.list-view-base .body .table.smart-form {
    --cell-border-color: rgb(0 0 0 / 0);
    width: fit-content;
}

dialog.control.list-view-base .body .table.smart-form>div {
}

dialog.control.list-view-base .body .table.smart-form>div:hover {
    background-color: rgb(0 0 0 / 0);
    box-shadow: unset;
}

dialog.control.list-view-base .body .table.smart-form>div>* {
}

dialog.control.list-view-base .body .table.smart-form>div>label {
    display: table-cell;
    white-space: nowrap;
    max-width: 200px;
    overflow-x: clip;
    text-overflow: ellipsis;
    border-right: 1px solid var(--cell-border-color);
    padding: 4px 8px;
    vertical-align: middle;
    box-sizing: content-box;
    text-align: right;
    color: hsl(16 80% 60% / 1);
    font-weight: 500;
    white-space: nowrap;
    /* text-align: right; */
}

dialog.control.list-view-base .body .table.smart-form>div>div {
    background-color: inherit;
}

dialog.control.list-view-base .body .table:focus-visible {
    outline: none;
}

dialog.control.list-view-base .table i {
    line-height: 0px;
}

dialog.control.list-view-base .table i#message.fa-whatsapp {
    color: rgb(23 226 23);
}

dialog.control.list-view-base .table>div {
    display: table-row;
    /* width: inherit; */
    border-spacing: 0px 0px;
    margin: 0px !important;
    cursor: default;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: transform 0.01s linear;
}

dialog.control.list-view-base .table>div.checked {
    background-color: hsl(173deg 59% 49% / 8%);
}

dialog.control.list-view-base .table>div.selected {
    background-color: rgb(0 0 0 / 7%) !important;
}

dialog.control.list-view-base .table>div:hover {
    background-color: rgb(0 0 0 / 3%) !important;
}

dialog.control.list-view-base .table>div.restricted {
    background-color: hsl(0deg 100% 50% / 25%);
}

dialog.control.list-view-base .table>div.high-light {
    background-color: hsl(18deg 100% 50% / 13%) !important;
}

dialog.control.list-view-base .table>div.duplicate {
    background-color: hsl(18deg 100% 50% / 27%) !important;
    opacity: 0.2;
}

dialog.control.list-view-base .table>div.duplicate.dirty {
    opacity: 0.8;
}

dialog.control.list-view-base .table>div>div {
    display: table-cell;
    white-space: nowrap;
    max-width: 200px;
    overflow-x: clip;
    text-overflow: ellipsis;
    border-right: 1px solid var(--cell-border-color);
    padding: 4px 8px;
    vertical-align: middle;
    box-sizing: content-box;
    user-select: none;
}

dialog.control.list-view-base .table>div>div.empty {
    color: hsl(0 0% 90% / 1);
}

dialog.control.list-view-base div#pop-label-container {
    position: fixed;
    z-index: 1000;
    background-color: white;
    background-color: lightgray;
    border-radius: 0px 8px 8px 0px;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    display: none;
}

dialog.control.list-view-base div#pop-label-container.pop {
    display: flex !important;
}

dialog.control.list-view-base div#pop-label-container > div {
    /* line-height: 0px; */
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
}

dialog.control.list-view-base div#pop-label-container > div.fa-trash {
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

dialog.control.list-view-base div#pop-label-container > div.fa-trash:before {
    align-items: center;
}

dialog.control.list-view-base div#pop-label-container input {
    margin: 4px;
    padding: 0px;
    /* line-height: 0px !important; */
    height: auto !important;
    accent-color: dodgerblue;
}

dialog.control.list-view-base .table>div>div.color-label {
    background-color: hsl(0deg 0% 86.27%);
    min-width: 16px;
}

dialog.control.list-view-base .table>div>div.color-label > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.control.list-view-base .table>div>div.color-label > div > i {
    transform: rotateZ(135deg);
    position: absolute;
    font-size: 16px;
    color: var(--snapped-tag-color);
}

dialog.control.list-view-base .table>div>div.color-label > div > i:hover {
    color: var(--snapped-tag-hover-color);
}

dialog.control.list-view-base .table>div>div.row-snap-left {
    --cell-width: 26px;
    max-width: var(--cell-width);
    width: var(--cell-width);
    min-width: var(--cell-width);
    padding-left: 0px;
    padding-right: 0px;
    position: sticky;
    left: 0px;
    background-color: var(--snap-row-background-color);
}

dialog.control.list-view-base .table>div.list-header>div.row-snap-left {
    background-color: inherit;
}

dialog.control.list-view-base .table>div>div[class*="fa-"] {
}

dialog.control.list-view-base .table>div>div[class*="fa-"]:before {
    margin-right: 8px;
}

dialog.control.list-view-base .table>div>div.fa-birthday-cake:before {
    color: coral;
}

dialog.control.list-view-base .table>div.row-detail {
    background-color: yellow;
}

dialog.control.list-view-base .table>div.row-detail>div {
}

dialog.control.list-view-base .table>div>div>div {
    display: inline-flex;
    align-items: center;
    line-height: 0px;
}

dialog.control.list-view-base .table>div>div>div.commands.absolute {
    position: absolute;
    top: 50%;
    right: 8px;
}

dialog.control.list-view-base .table>div>div>div.commands > i {
    cursor: pointer;
}

dialog.control.list-view-base .table>div>div:last-child {
    width: auto;
    max-width: unset;
    width: inherit;
    width: min-content;
    min-width: unset;
}

dialog.control.list-view-base .table>div>div.row-snap-right {
    max-width: 24px;
    width: 24px;
    min-width: 16px;
    padding-left: 0px;
    padding-right: 0px;
    position: sticky;
    right: 0px;
    /* left: auto; */
}

dialog.control.list-view-base .table>div:not(.list-header)>div.row-snap-right {
    background-color: white;
}

dialog.control.list-view-base .table>div>div.row-snap-right > .commands {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

dialog.control.list-view-base .table>div>div.row-snap-right > .commands > i {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

dialog.control.list-view-base .table>div.list-header {
    background-color: var(--header-row-background-color);
    /* position: sticky; */
    /* top: -1px; */
    z-index: 10;
    width: 100%;
    position: relative;
    display: table-header-group !important;
    user-select: none;
    transition: none;
}

dialog.control.list-view-base .table>div.list-header[disabled] {
    opacity: 0.3;
}

dialog.control.list-view-base .table>div.list-header>div>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

dialog.control.list-view-base .table>div.list-header>div>div>div {
    font-weight: 500;
}

dialog.control.list-view-base .table>div.list-header>div>div>div>input {
    transform: scale(1.4);
    height: auto;
    margin: 0px;
}

dialog.control.list-view-base .table>div.list-header>div>div>div>input[indeterminate] {
    opacity: 0.3;
}

dialog.control.list-view-base .table>div.list-header>div>div>i {
    transition: transform 0.3s linear;
    margin-left: 8px;
}

dialog.control.list-view-base .table>div.list-header>div>div>i:before {
    font-size: 24px;
    color: hsl(0deg 0% 0% / 10%);
}

dialog.control.list-view-base .table>div.list-header>div>div:hover>i:before {
    color: hsl(0deg 0% 0% / 40%);
}

dialog.control.list-view-base .table>div.list-header>div>div>i.up {
    transform: rotateX(180deg);
}

dialog.control.list-view-base .table>div>div.avatar {
    padding: 0px;
    height: 32px;
    /* width: 32px; */
    max-width: 32px !important;
    max-height: 32px;
    width: 32px !important;
    line-height: 0px;
    position: relative;
}

dialog.control.list-view-base .table>div.list-header>div.avatar>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
}

dialog.control.list-view-base .table>div>div.avatar>input {
    transform-origin: center;
    transform-style: flat;
    transform: scale(0);
    padding: 0px;
    position: absolute;
    opacity: 0;
    transition: all 0.1s linear;
    top: 13% !important;
    margin: 0px;
    left: 33%;
}

dialog.control.list-view-base .table>div>div.avatar dialog.simple-pop {
    right: auto;
    bottom: auto;
}

/*#region group */
dialog.control.list-view-base .table>div.checked>div.avatar>input {
    z-index: 1;
    transform: scale(1.5);
    opacity: 1;
    top: auto;
}

dialog.control.list-view-base .table>div>div.avatar:hover>input {
    z-index: 1;
    transform: scale(1.5);
    opacity: 1;
    top: auto;
}

/*#endregion group */
dialog.control.list-view-base .table>div.checked>div.avatar> :is(img, svg), dialog.control.list-view-base .table>div>div.avatar:hover> input + :is(img, svg) {
    z-index: 0;
    opacity: 0;
    transform: scale(1);
    width: inherit;
    max-width: inherit;
    min-width: inherit;
}

/* img:not([src]) */
dialog.control.list-view-base .table>div>div>img[src=""] {
    display: none !important;
}

dialog.control.list-view-base .table>div>div> :is(img, svg) {
    max-height: 32px;
    line-height: 0px;
    font-size: 0px;
    border-radius: 2px;
    width: inherit;
    height: inherit;
}

dialog.control.list-view-base .table>div>div>svg {
    fill: silver;
    max-width: 24px;
    max-height: 24px;
    width: 24px;
    height: 24px;
    margin: 4px;
}

dialog.control.list-view-base .table>div> div:has(+ div.commands) {
    border-right-color: transparent;
}

dialog.control.list-view-base .table>div>div.commands {
    text-align: right;
    padding-left: 0px !important;
    padding-right: 0px !important;
    /* width: min-content; */
    /* min-width: unset; */
}

dialog.control.list-view-base .table>div>div.commands > i {
}

dialog.control.list-view-base .table>div>div.commands > div {
    position: relative;
    display: flex;
    /* flex-direction: column; */
    /* width: min-content; */
    justify-content: center;
    line-height: normal;
    align-items: flex-start;
    height: 100%;
}

.simple-pop {
    position: fixed;
    display: none;
    flex-direction: column;
    background-color: white;
    z-index: 9000000;
    justify-content: flex-start;
}

.simple-pop.pop {
    display: flex;
    box-shadow: var(--pop-box-shadow);
    border: var(--pop-border);
    border-radius: var(--pop-border-radius);
}

.simple-pop > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: var(--pop-item-height);
}

.simple-pop > div:hover {
    background-color: var(--pop-item-hover-bgcolor);
    color: var(--pop-item-hover-color);
}

.simple-pop > div + div {
    border-top: 1px solid var(--border-color-darker);
}

.simple-pop > div > i {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: var(--pop-item-icon-padding);
    justify-content: center;
    width: var(--pop-item-icon-width);
    flex-basis: var(--pop-item-icon-width);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
}

.simple-pop > div > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 4px 16px 4px 0px;
    font-weight: normal;
    white-space: nowrap;
}

dialog.simple-pop {
    position: fixed;
    display: none;
    flex-direction: column;
    background-color: white;
    justify-content: flex-start;
    left: auto;
    right: 0px;
    padding: 0px;
    bottom: auto;
    /* top: auto; */
    /* bottom: 0px; */
    /* transform: translateY(-100px); */
    box-shadow: var(--pop-box-shadow);
    border: var(--pop-border);
    border-radius: var(--pop-border-radius);
}

dialog.simple-pop::backdrop {
    background-color: hsl(0deg 0% 0% / 1%);
}

dialog.simple-pop[open] , dialog.simple-pop.pop {
    display: flex;
}

dialog.control.list-view-base .table>div>div.commands > div > i {
    /* width: auto; */
    display: block;
    /* height: -webkit-fill-available; */
    line-height: normal;
}

dialog.control.list-view-base .table>div>div.commands > div > div.simple-pop {
    --size: 28px;
    /* left: 0px; */
    transform: translate(24px,0px);
}

dialog.control.list-view-base .table>div>div.commands > div > div.simple-pop.pop {
}

dialog.control.list-view-base .table>div>div.commands > div > div > i {
    line-height: normal;
    cursor: pointer;
    max-height: var(--size);
    height: var(--size);
    width: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.control.list-view-base .table>div>div.commands > div > div > i:before {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: var(--size);
    height: var(--size);
    width: var(--size);
}

dialog.control.list-view-base .table>div~div>div {
    border-bottom: 1px solid var(--cell-border-color);
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table {
    display: flex;
    flex-wrap: wrap;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table>div.list-header {
    display: none !important;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table>div {
    display: block !important;
    width: 23%;
    margin: 1% !important;
    border: 1px solid red;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table>div>div {
    display: block !important;
    width: -webkit-fill-available;
    max-width: unset;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table>div>div.avatar {
    float: left;
    clear: right;
    height: 64px;
    max-height: 64px;
    width: 64px !important;
    max-width: 64px !important;
    padding-right: 8px !important;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table>div>div.avatar>svg {
    fill: silver;
    height: 60px;
    max-height: 64px;
    width: 60px !important;
    max-width: 64px !important;
    margin: 2px;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table:not([class~='form'])>div:nth-child(even)>div {
    background-color: unset;
}

dialog.dup-card-view>div.body>div.master>div.view-port div.table>div>div:empty {
    display: none !important;
}

dialog.control.master-detail-view-base>.header {
    z-index: 70 !important;
}

dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body {
    z-index: 100;
    z-index: 50;
}

dialog.control.master-detail-view-base>div.body {
    width: 100%;
    position: relative;
    z-index: 60;
    overflow-x: hidden;
    /* position: static; */
    padding-top: 1px !important;
}

dialog.control.master-detail-view-base.fixed-detail>div.body {
    display: flex;
    overflow-y: hidden !important;
    z-index: 00;
}

/* patch what is this for, disabled all */
dialog.control.master-detail-view-base.slide-over>div.body>.master {
    flex-basis: 100% !important;
}

dialog.control.master-detail-view-base.slide-over>div.body>.detail {
    display: flex;
    flex-direction: column;
    position: absolute !important;
    top: 0px !important;
    right: 0px;
    bottom: 0px;
    /* left:calc(100% - var(--master-basis)) !important; */
    left: 100% !important;
    width: auto !important;
    height: auto;
    transform: unset !important;
    transition: left 0.5s ease-in-out !important;
    opacity: 1 !important;
    background-color: white;
    border-left: 1px solid white !important;
}

dialog.control.master-detail-view-base.slide-partial>div.body>.detail {
    width: initial !important;
}

dialog.control.master-detail-view-base.slide-fill>div.body>.master {
    /* overflow-y: hidden !important; */
    /* height: 100%; */
}

dialog.control.master-detail-view-base.slide-fill>div.body>.detail {
    width: initial !important;
    flex-basis: 0px;
}

dialog.control.master-detail-view-base.slide-fill>div.body>.detail > h1 {
    display: none;
    margin: 0px;
}

dialog.control.master-detail-view-base.slide-over:is(.toggle-detail,.fixed-detail)>div.body>.detail {
    opacity: 1;
    transform: scale(1, 1);
}

dialog.control.master-detail-view-base.slide-over:is(.toggle-detail,.fixed-detail).slide-fill>div.body>.detail {
    left: 0px !important;
}

dialog.control.master-detail-view-base.slide-over:is(.toggle-detail,.fixed-detail):not([class~="detail-fill-height"])>div.body>.detail {
    left: var(--master-basis) !important;
}

dialog.control.master-detail-view-base.slide-over>div.body {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: hidden;
    padding: 0px !important;
}

dialog.control.master-detail-view-base.slide-partial>div.body>div {
    transition: flex-basis 0.5s linear, width 0.5s linear, opacity 0.5s linear;
    overflow-x: auto;
    transform: none;
    flex-basis: 100%;
    opacity: 1;
    padding-top: 1px;
    z-index: 90;
}

dialog.control.master-detail-view-base.slide-partial>div.body>.master {
    /* width: 100%; */
    overflow-x: auto;
}

dialog.control.master-detail-view-base.slide-partial>div.body>.detail {
    flex-basis: 0px;
    width: 0px;
    opacity: 0;
}

dialog.control.master-detail-view-base.slide-partial>div.body>.parent {
    flex-basis: 0px;
    width: 0px;
    opacity: 0;
}

dialog.control.master-detail-view-base.slide-partial.slide-parent>div.body>.parent {
    flex-basis: 30%;
    width: auto;
    opacity: 1;
    margin-top: 2px !important;
    /* background-color: hsl(0deg 0% 0% / 3%); */
}

/*#region master-detail-view-base v1002 */
.v1002 dialog.control.master-detail-view-base {
}

.v1002 dialog.control.master-detail-view-base>div.body {
    position: relative;
}

.v1002 dialog.control.master-detail-view-base>div.body>.master {
    position: absolute;
    z-index: 100;
    /* transform: translateX(0%); */
    /* left: 250px; */
    width: 250px;
    width: 100%;
}

.v1002 dialog.control.master-detail-view-base>div.body>.detail {
    position: absolute !important;
    z-index: 100;
    /* transform: translateX(var(--expand-width)); */
    /* transition: transform 1s linear; */
    right: 0px;
    bottom: 0px;
    top: 0px;
    width: auto !important;
    left: 100%;
    background-color: white;
    /* z-index: 999999999; */
}

.v1002 dialog.control.master-detail-view-base:is(.toggle-detail,.fixed-detail)>div.body>.detail {
    left: 250px;
}

.v1002 dialog.control.master-detail-view-base>div.body>.detail * {
    color: red !important;
}

/*#region body section */
dialog.control.master-detail-view-base.v1002>div.body>section {
    /* flex-basis: 60% !important; */
    /* border-left: 1px solid hsl(0deg 0% 0% / 3%); */
    position: absolute;
    /* left: 50%; */
    transform: translateX(100%);
    transform: translateX(60%);
    /* left: 0%; */
    /* left: 100%; */
    width: 100%;
    height: auto;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 100;
    background-color: white;
    transition: transform 1s linear;
}

dialog.control.master-detail-view-base.v1002>div.body>section {
    /* background:  hsl(270deg 50% 50% / 30%); */
}

dialog.control.master-detail-view-base.v1002>div.body:has(section) {
    position: relative;
    /* color:red; */
}

/*#endregion body section */
/*#endregion master-detail-view-base v1002 */
dialog.control.master-detail-view-base>div.body>.batch {
    flex-basis: 0px !important;
    width: 0px;
    opacity: 1 !important;
    border-left: 1px solid hsl(0deg 0% 100%);
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    height: auto;
    padding-top: 2px !important;
    transition: flex-basis 0.5s linear, width 0.5s linear !important;
}

dialog.control.master-detail-view-base.slide-child>div.body>.detail {
    width: calc((100% - var(--master-basis))/2) !important;
}

dialog.control.master-detail-view-base.slide-child>div.body>.batch {
    flex-basis: calc(100% - var(--master-basis)) !important;
    width: calc((100% - var(--master-basis))/2) !important;
    opacity: 1 !important;
    z-index: 90;
    & dialog.control {
        & div.header {
            min-height: calc(var(--collapsed-height) - 2px);
            height: calc(var(--collapsed-height) - 2px);
        }
    }

    ; box-shadow: -2px 0px 4px 1px gainsboro !important;
}

dialog.control.master-detail-view-base.slide-child>div.body>.batch:empty {
    background-color: hsl(0deg 0% 0% / 1%);
}

dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body {
    height: 100%;
}

dialog.control.master-detail-view-base.tree-detail-view>div.body {
    --master-basis: 40%;
}

dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail):not(.detail-fill-height)>div.body>.master {
    opacity: 1;
    flex-basis: var(--master-basis) !important;
    overflow-x: hidden;
    /* width: 100%; */
    flex-grow: unset;
    padding-top: 1px !important;
}

dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body>.detail {
    flex-basis: calc(100% - var(--master-basis));
    /* flex-basis: calc((100% - var(--master-basis))/2) !important; */
    opacity: 1;
    /* width: auto; */
    overflow-y: hidden;
    overflow-y: auto;
    flex-grow: unset;
    border-left: 1px solid #00000008;
    z-index: 100;
}

dialog.control.master-detail-view-base.slide-partial:is(.toggle-detail,.fixed-detail)>div.body>.detail>div.dialog.control {
    position: static !important;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0px;
    box-shadow: none;
    margin-top: 1px !important;
}

dialog.control.master-detail-view-base.slide-partial.toggle-detail>div.body>.detail>div.dialog.control>* {
}

dialog.control.master-detail-view-base .body .dashboard-panel {
    display: flex;
}

dialog.control.master-detail-view-base .body .dashboard-panel>div {
    flex-basis: 50%;
    padding: 8px;
}

dialog.control.master-detail-view-base .body .dashboard-panel>div+div {
    border-left: 1px solid gainsboro;
}

dialog.control.master-detail-view-base .body .dashboard-panel>div .section {
    margin-bottom: 16px;
}

dialog.control.master-detail-view-base .body .dashboard-panel>div .section>h3 {
    margin: 0px;
    margin-bottom: 8px;
    color: navy;
    background-color: aliceblue;
    padding: 8px;
    border-radius: 8px;
}

dialog.control.master-detail-view-base .body .dashboard-panel>div .section #extension-contact-services-container>i {
    font-size: 1.5rem;
    cursor: pointer;
}

dialog.control.master-detail-view-base .body .dashboard-panel>div .section>div {
    background-color: hsl(208deg 93% 99%);
    padding: 8px;
}

dialog.control.list-view-base>div.body .master.spin {
    /* background: none !important; */
    background-image: url(/graphics/web/ani/loading-16.gif) !important;
    background-image: url(/graphics/web/ani/loading-white-32.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-blend-mode: darken;
}

dialog.control.list-view-base>div.body .master.spin::before {
    font-size: 48px;
    opacity: 1;
    color: blue;
    top: 50%;
    left: 50%;
    display: none !important;
}

dialog.control.master-detail-view-base>div.body>.master, dialog.control.list-view-base>div.body>.master {
    /* flex-basis: 100% !important; */
    overflow-y: auto !important;
    height: 100% !important;
    height: -webkit-fill-available !important;
    overflow-x: auto !important;
    flex-basis: var(--expand-width);
    /* display: flex; */
    flex-direction: column;
}

dialog.control.list-view-base>div.body .master::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

dialog.control.list-view-base>div.body .master>div.view-port {
    /* height: 100%; */
    overflow-x: visible;
    overflow-y: visible;
    width: -webkit-fill-available !important;
    /* width: 100% !important; */
}

div.scroll-wrapper {
    overflow-y: auto !important;
    height: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior: none;
}

div.scroll-wrapper>div.infinite-wrapper {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: -webkit-fill-available !important;
}

dialog.control.list-view-base.slide-partial.toggle-detail>div.body .master>div.view-port {
    width: 100% !important;
}

dialog.control.list-view-base>div.body>div.master>div.view-port>div.table {
    width: 100%;
}

dialog.control.list-view-base>div.body .table.eof-report>div:last-child:not([data-item-row])::after {
    content: "Kay\0131t mevcut de\011fil";
    position: absolute;
    padding: 16px 32px;
    font-style: italic;
    color: silver;
    left: 0px;
    top: 24px;
    right: 0px;
    white-space: nowrap;
}

dialog.control.view-base>div.body {
    padding: 0px;
}

dialog.control.options-container>div.body {
}

dialog.control.options-container>div.body>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px;
}

dialog.control.options-container>div.body>div>input {
    flex-grow: 0;
    flex-basis: 32px;
    transform: scale(1.5);
}

dialog.control.options-container>div.body>div>div {
    flex-grow: 1;
}

dialog.control.options-container {
}

dialog.control.options-container>div.body {
    flex-grow: 2;
}

dialog.control.options-container>div.body div[data-client-key] {
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    overflow-x: clip;
    text-overflow: ellipsis;
    width: -webkit-fill-available;
    flex-wrap: nowrap;
    padding: 0px 8px;
    /* line-height: 16px; */
}

dialog.control.options-container>div.body div[data-client-key]:hover {
    background-color: hsl(0deg 0% 0% / 7%);
}

dialog.control.options-container>div.body div+div[data-client-key] {
    border-top: 1px solid hsl(0deg 0% 0% / 3%);
}

dialog.control.options-container>div.body div[data-client-key]>div {
    white-space: nowrap;
    border: 0px !important;
}

dialog.control.options-container>div.body div[data-client-key]>div:first-child {
    flex-basis: 24px;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 36px;
}

dialog.control.options-container>div.body div[data-client-key]>div:first-child input {
    transform: scale(1.5);
    height: auto;
}

dialog.control.options-container>div.body div[data-client-key]>div:last-child {
    padding-left: 0px;
    overflow-x: clip;
    text-overflow: ellipsis;
}

dialog.control.select-account-dialog {
    min-width: 300px;
    min-height: 200px !important;
}

dialog.control.select-account-dialog>div.body {
    padding: 0px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

dialog.control.page-template.progress>.header {
    background: linear-gradient(90deg, #ff0000, #ffffff, #ff0000);
    background-repeat: no-repeat;
    background-size: 500% 3px;
    background-position-y: 0px !important;
    -webkit-animation: slidingLine 1s ease infinite;
    -moz-animation: slidingLine 1s ease infinite;
    -o-animation: slidingLine 1s ease infinite;
    animation: slidingLine 1s ease infinite;
}

dialog.control.page-template.progress>div.body {
    background: none;
    background-size: 0px 0px;
}

/*#region group */
dialog.control>div.header span {
    color: var(--header-foreground-color);
}

dialog.control>div.header div {
    color: var(--header-foreground-color);
}
dialog.control>div.header > div {
    z-index: 90;
}
/*#endregion group */
dialog.control>div.header div.hyper-link:hover {
    color: hsl(179deg 74% 92%);
}

dialog.control>div.header>.commands>i[class*="fa-"].disabled {
    pointer-events: none !important;
    opacity: 0.1 !important;
}

dialog.control>div.header>.commands>.collapse {
    transition: transform 1s linear 0s;
    font-size: 25px !important;
    padding: 0px !important;
}

dialog.control.collapsed {
    z-index: 1000001944;
    height: 0px !important;
    overflow-y: hidden;
    height: var(--collapsed-height);
    min-height: var(--collapsed-height);
}

dialog.control.collapsed.smart {
    height: var(--collapsed-height-smart) !important;
    min-height: var(--collapsed-height-smart) !important;
}

dialog.control.menu-detail-view .master-detail>.detail {
    /* flex-grow: 1; */
}

/*#region --- */
dialog.control.menu-detail-view.menu-top {
    /* height: 100%; */
}

dialog.control.menu-detail-view.menu-top .master-detail {
    flex-direction: column;
    --expand-width: auto;
}

dialog.control.menu-detail-view.menu-top .master-detail>.parent {
    padding: 0px;
}

dialog.control.menu-detail-view.menu-top .master-detail>.master {
    display: flex;
    flex-direction: row;
    background-color: unset;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 1 10%;
    /* flex-basis: auto !important; */
    flex: 0 0 auto;
    flex: 0 0 auto !important;
    height: auto !important;
}

dialog.control.menu-detail-view.menu-top .master-detail>.master .menu-items-4yD6hik9i {
    display: flex;
    width: 100%;
    border-bottom: 1px solid rgb(0 0 0 / 3%);
    overflow-x: auto;
    height: fit-content;
    flex-direction: row;
}

dialog.control.menu-detail-view.menu-top .master-detail>.master .menu-items-4yD6hik9i::-webkit-scrollbar {
    height: 10px !important;
}

dialog.control.menu-detail-view.menu-top .master-detail>.master .menu-items-4yD6hik9i>*>div {
    border-left: 0px;
    border-bottom: 4px solid transparent;
}

dialog.control.menu-detail-view.menu-top .master-detail>.master .menu-items-4yD6hik9i>*>div.selected {
    background-color: rgb(0 0 0 / 3%);
}

dialog.control.menu-detail-view.menu-top .master-detail>.master .menu-items-4yD6hik9i>*>div:hover {
    border-bottom-color: coral;
}

dialog.control.menu-detail-view.menu-top .master-detail>.detail {
    flex-basis: auto !important;
    flex-shrink: 1 !important;
    /* height: -webkit-fill-available; */
    overflow-y: auto;
    flex: 5 1 auto !important;
    height: 100% !important;
}

/*#endregion --- */
dialog.control.master-detail-view-base.menu-detail-view {
    --collapse-width: 50px;
    --expand-width: 250px;
}

dialog.control.master-detail-view-base.menu-detail-view>div.body>.master {
    overflow-y: hidden !important;
    height: 100% !important;
}
dialog.control.master-detail-view-base.menu-detail-view.menu-top>div.body>.master {
    overflow-y: visible !important;
    height: min-content !important;
}
dialog.control.master-detail-view-base.slide-over.menu-detail-view>div.body>.master {
    width: var(--expand-width) !important;
    max-width: var(--expand-width) !important;
    flex-basis: var(--expand-width) !important;
    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
    padding: 0px;
}

dialog.control.master-detail-view-base.menu-detail-view.no-master>div.body>.master {
    flex-basis: 0px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    width: 0px !important;
    max-width: 0px !important;
    transition: none !important;
}

dialog.control.master-detail-view-base.menu-detail-view>div.body>.detail {
    flex-grow: 4;
    flex-shrink: 0;
    margin: 2px 0px 0px 2px;
    width: calc(100% - var(--expand-width)) !important;
    /* max-width: calc(100% - var(--expand-width)) !important; */
    flex-basis: calc(100% - var(--expand-width));
    overflow-x: hidden;
    /* margin-top: 100px !important; */
    /* display: none; */
    z-index: 100;
    /* margin-top: 100px !important; */
}

dialog.control.master-detail-view-base.menu-detail-view>div.body>.detail > div#menu-navigator {
    justify-content: space-between;
    flex: 1 1 auto;
    align-items: flex-end;
    padding-bottom: 14px;
    padding-top: 4px;
    display: none;
}

@media (max-width: 640px) {
    dialog.control.master-detail-view-base.menu-detail-view>div.body>.detail > div#menu-navigator {
        display: flex;
    }
}

dialog.control.master-detail-view-base.menu-detail-view.no-master>div.body>.detail {
    flex-basis: 100% !important;
    width: 100% !important;
    border-left: 1px solid var(--border-color-darkest) !important
}

dialog.control.master-detail-view-base.menu-detail-view>div.body.shrink>.master {
    width: var(--collapse-width) !important;
    /* max-width: var(--collapse-width) !important; */
    flex-basis: var(--collapse-width) !important;
    min-width: var(--collapse-width) !important;
    overflow-x: hidden;
    /* overflow-y: visible !important; */
    /* display: flex; */
    /* flex-direction: column; */
    /* resize: vertical; */
    /* overflow: auto !important; */
}

dialog.control.master-detail-view-base.menu-detail-view:not([class~="initial"])>div.body>div {
    transition: flex-basis 0.3s linear, width 0.3s linear;
    -webkit-transition: flex-basis 0.3s linear, width 0.3s linear;
}

dialog.control>div.body.master-detail:not([class~="initial"]) {
    transition: flex-basis 0.3s linear, min-width 0.3s linear;
}

dialog.control>div.header {
 
}

dialog.control .header-pop-colors {
    --lighten: -10% !important;
    --degree: 30 !important;
    --saturate: 1% !important;
    --header-background-color: hsl(calc(var(--primary-color-h) + var(--degree)), calc(var(--primary-color-s) + var(--saturate)), calc(var(--primary-color-l) + var(--lighten))) !important;
    --header-foreground-color: hsl(0deg 0% 17% / 96%) !important;
    --plighten: 60% !important;
    --pdegree: 1 !important;
    --psaturate: 1% !important;
    --pop-background-color: hsl(calc(var(--primary-color-h) + var(--pdegree)), calc(var(--primary-color-s) + var(--psaturate)), calc(var(--primary-color-l) + var(--plighten))) !important;
    background-color: var(--pop-background-color) !important;
}

dialog.control .header-pop-colors dialog.control>.header {
    background-color: var(--header-background-color);
    /* background-color: var(--header-background-color) !important;   */
}

dialog.control .header-pop-colors dialog.control>.header * {
    color: hsl(0 0% 89% / 1) !important;
    /* color: hsl(0 0% 60% / 1) !important; */
}

dialog.control.smart>div.header {
    height: var(--collapsed-height-smart) !important;
    min-height: var(--collapsed-height-smart) !important;
}

dialog.control.smart>div.body {
    margin: 0px !important;
}

dialog.control>div .header>div>div.guest>i {
    padding: 2px 4px;
    margin-left: 4px;
    opacity: 0.85 !important;
    cursor: default;
    border-radius: 50% 50%;
}

dialog.control>div .header>div>div.guest>div {
    display: flex;
    align-items: center;
    padding: 0px 0px;
    justify-content: flex-end;
}

dialog.control>div .header>div>div.guest>div.tool-group {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 26%);
    border-image: initial;
    border-radius: 4px;
    justify-content: center;
}

dialog.control>div .header>div>div.guest>div.tool-group>div {
    /* white-space: nowrap; */
}

dialog.control>div.header div.guest div.tool-box span.block-formatter {
    display: flex;
    position: relative;
    align-items: center;
}

dialog.control>div.header div.trait-scale-down {
    position: fixed;
    /* top: 36px; */
    /* left: 0px !important; */
    z-index: 1000;
    cursor: default;
    max-height: 500px;
    min-height: 200px !important;
    height: auto !important;
    overflow-y: auto;
    overflow: visible !important;
    box-shadow: var(--drop-box-shadow);
    display: flex;
    flex-direction: column;
    max-width: 400px;
    min-width: 300px !important;
    container-type: inline-size;
    /*#region patch */
    border-radius: 7px;
    top: 0px;
    left: 36px !important;
    bottom: auto;
    /*#endregion patch */
    right: auto;
    display: flex;
    flex-direction: column;
    /* height: 100% !important; */
    width: auto;
}

dialog.control>div.header div.trait-drop-control div.trait-scale-down {
    /*
//BOOKMARK pop-container 
*/
    transform-origin: top left;
    transform-style: flat;
    transform: scale(0);
    opacity: 0;
    /* transition: transform 0.1s linear; */
}

dialog.control>div.header div.trait-drop-control.pop div.trait-scale-down {
    /* 
    //BOOKMARK pop-container 
*/
    transform: scale(1);
    opacity: 1;
    overflow-x: hidden;
}

/*
//BOOKMARK pop-container 
*/
dialog.control>div.header div.trait-drop-control div.trait-scale-down > div.trait-list-items {
    width: 100%;
}

/*
//BOOKMARK trait-list-items.container  pop-container 
*/
/*#region ea6ac2d4-ed6a-4928-b080-1e07ef600e07 */
div.trait-list-items.container {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: var(--pop-box-background-color);
    box-shadow: var(--pop-box-shadow);
    box-shadow: 0 5px 6px 3px rgb(0 0 0 / 23%);
    border-radius: var(--pop-border-radius);
    transform-origin: var(--pop-right-down-transform-origin);
    transform: var(--pop-right-down-transform);
    transition: var(--pop-transition);
    max-width: 500px;
    min-width: 360px;
    max-height: 500px;
    min-height: 200px;
    z-index: 1000;
    opacity: 0;
    z-index: -1;
    /* width: auto; */
    width: 100%;
    /* width: -webkit-fill-available; */
    overflow-y: auto;
    overflow-x: visible;
    height: -webkit-fill-available;
    /* right: auto; */
    /* width: auto; */
}

div.trait-list-items.container.pop {
    transform: var(--pop-right-down-transform-pop);
    opacity: 1;
    z-index: 90000000;
}

div.trait-list-items.container > div.wrapper {
    position: fixed;
    /* display: flex; */
    flex-direction: column;
    /* max-width: 400px; */
    /* max-height: 200px; */
    width: -webkit-fill-available;
    width: 100%;
    z-index: 1000;
    overflow: visible !important;
    white-space: nowrap;
    /* min-width: 500px; */
}

div.trait-list-items.container.pop > div.wrapper {
    overflow-y: auto !important;
    height: 100%;
}

/*#endregion ea6ac2d4-ed6a-4928-b080-1e07ef600e07 */
/*#region account-select-dialog */
dialog.control.account-select-dialog {
    & div.account-list {
        position: relative;
        >div {
            display: flex;
            line-height: 0px;
            font-size: 0px;
            padding: 0px;
            cursor: pointer;
            >div {
                padding: 1px 8px;
                & * {
                    font-size: 0.88rem;
                    color: var(--text-color);
                }
            }
        }

        >div+div {
            border-top: 1px solid var(--border-color-dark);
        }

        >div img {
            max-height: 48px;
            border-radius: 1px;
            line-height: 0px;
            font-size: 0px;
        }
    }
}

@media (max-width: 640px) {
    dialog.control.account-select-dialog {
        min-height:400px !important;
        height: 400px !important;
    }
}

/*#endregion account-select-dialog */
dialog.control>div.header div.trait-scale-down .account-list {
    position: relative;
}

dialog.control>div.header div.trait-scale-down .account-list>div {
    display: flex;
    line-height: 0px;
    font-size: 0px;
    padding: 0px;
    cursor: pointer;
}

dialog.control>div.header div.trait-scale-down .account-list>div+div {
    border-top: 1px solid var(--border-color-dark);
}

dialog.control>div.header div.trait-scale-down .account-list>div img {
    max-height: 48px;
    border-radius: 1px;
    line-height: 0px;
    font-size: 0px;
}

dialog.control>div.header div.trait-scale-down .account-list>div>div {
    padding: 1px 8px;
}

dialog.control>div.header div.trait-scale-down .account-list>div>div * {
    font-size: 0.88rem;
    color: var(--text-color-lighter);
}

dialog.control>div.header div.trait-scale-down.snap-right {
    right: 0px;
    left: auto !important;
}

.narrow-container {
    container-type: inline-size;
}

/* 
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
https://developer.mozilla.org/en-US/docs/Web/CSS/length

*/
@container (max-width: 600px) {
    dialog.control>div.header {
        /* background-color:red !important; */ }

    div.trait-drop-control>div.button>div {
        display: none;
    }
}

@container (max-width: 450px) {
    dialog.control .header .tool-group {
        display: none !important;
    }
}

dialog.control>div .header>div>div.guest div.trait-scale-down>div.dialog.control {
    z-index: 1000004994;
    position: static !important;
    width: 100% !important;
    height: inherit !important;
    transform: none !important;
    border-radius: inherit;
    /* width: auto !important; */
    max-width: unset;
}

dialog.control>div .header>div>div.guest div.trait-scale-down.snap-left {
    left: auto;
    transform-origin: top right;
}

dialog.control>div .header>div>div.guest>div:last-child div.trait-scale-down {
    left: auto;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div:first-child {
    height: 100%;
    flex-grow: 5;
    flex-shrink: 0;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div:first-child>div {
    display: flex;
    align-items: center;
    padding: 4px 0px;
    white-space: nowrap;
    border-bottom: 1px inset rgb(255 255 255 / 25%);
    justify-content: flex-start;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div:first-child>div>div:first-child {
    width: 32px;
    padding: 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div:first-child>div>div:first-child input {
    margin: 0px;
    padding: 0px;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div:first-child>div>div:last-child {
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div.tool-box {
    position: sticky;
    bottom: 0px;
    z-index: 10;
    background-color: hsl(173deg 59% 61%);
    padding: 8px;
    justify-content: space-between;
    left: 0px;
    right: 0px;
    display: flex;
    flex-grow: 0;
    flex-shrink: 1;
    align-items: center;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div[data-item-row]>div:first-child {
    width: 32px;
    display: flex;
    justify-content: center;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div>div>div:first-child input[type="checkbox"] {
    transform: scale(1.5);
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down-x>div>div:last-child {
    margin-left: 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

dialog.control>div .header>div>div.guest>div.tool-box .trait-scale-down>div.checked {
    background-color: rgb(0 0 0 / 0.15) !important;
}

dialog.control>div .header>div>div.guest>div.tool-box>div {
    display: flex;
    cursor: default;
    margin: 0px 8px;
}

dialog.control>div .header>div>div.guest>div.tool-box>div:empty {
    display: none;
}

dialog.control>div .header>div>div.guest>div.tool-box>div#toggle-filter-groups {
}

dialog.control>div .header>div>div.guest>div.tool-box>div#toggle-filter-groups>div {
    position: relative;
    margin: 0px 16px;
}

dialog.control>div .header>div>div.guest>div.tool-box>div#toggle-filter-groups>div>div:first-child {
    padding-right: 20px;
}

dialog.control>div .header>div>div.guest>div.tool-box>div#toggle-filter-groups>div>div:first-child:after {
    right: 0px;
    color: inherit;
    font-size: 16px;
    position: absolute;
    transition: all 0.5s linear;
}

dialog.control>div .header>div>div.guest>div.tool-box>i {
    color: rgb(255 255 255 / 74%) !important;
    opacity: 1;
    /* width: 24px; */
    /* padding: 4px; */
    font-size: 14px;
    display: flex;
    border-radius: 4px;
    justify-content: center;
    margin: 0px 0px;
    --lighten: 20%;
    /* background-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important; */
}

dialog.control>div.header div.guest div.tool-box span.block-formatter>input {
    width: 200px;
    transition: width 0.3s ease-in-out;
}

dialog.control.narrow> .header div.guest div.tool-box span.block-formatter>input {
    width: 160px;
}

dialog.control:not([class~="narrow"])>.h>div.guest div.tool-box span.block-formatter>input:focus {
    width: 300px;
}

dialog.control.narrow>div.header> :is(.commands, .guest)>*[class*="fa-"] {
    margin-left: 0px !important;
}

dialog.control.narrow>div .header>div>div.guest.protected {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

dialog.control.narrow>div.header>div>div.seperator {
    display: none;
}

dialog.control>div.header div.guest div.tool-box span.block-formatter>i {
    position: absolute;
    right: 8px;
    background-color: transparent !important;
    color: black !important;
}

dialog.control>div.header div.guest div.tool-box span.block-formatter>i#reset {
    right: 38px;
}

dialog.control>div.header div.guest div.tool-box span.block-formatter>i#regexp {
    height: 20px; 
    right: 10px;
    width: 14px;
    background-color: #33c7b5 !important;
    opacity: 1 !important;
    margin: 0px 0px;
    line-height: 0px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: white !important; 
}

dialog.control>div.header div.guest div.tool-box span.block-formatter>i#regexp.checked {
    background-color: hsl(173deg 59% 33%) !important;
}

/*#region group */
dialog.control>div.header div.guest div.tool-box span.block-formatter>i:active {
    box-shadow: none;
}

dialog.control>div.header div.guest div.tool-box span.block-formatter>i:hover {
    box-shadow: none;
}

/*#endregion group */
dialog.control>div .header>div>div.guest>div.tool-box i.drop-parent {
    position: relative;
}

dialog.control>div .header>div>div.guest>div.tool-box i.drop-parent>div {
    position: absolute;
    z-index: 1000;
    min-width: 200px;
    left: 0px;
    top: 32px;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 2px 3px 1px #80808045;
    transform-origin: top;
    transform: scale(1, 0);
    opacity: 0;
    transition: opacity 0.3s linear, transform 0.3s linear;
}

dialog.control>div .header>div>div.guest>div.tool-box i.drop-parent>div>i {
    background-color: transparent !important;
    position: absolute;
    right: 0px;
    padding: 2px;
}

div.trait-drop-control {
    /*
//BOOKMARK trait-drop-control pop-container 
*/
    --lighten: 32% !important;
    --degree: -15 !important;
    --background-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
    position: relative !important;
}

/*#region new trait-drop-control cascade menu */
/*
//BOOKFLAG new style pop-container
*/
div.trait-drop-control div.menu-item {
}

div.trait-drop-control div.menu-item > div.container {
}

div.trait-drop-control div.menu-item > div.container > div.wrapper {
}

/*#endregion new trait-drop-control cascade menu */
div.trait-drop-control>div.button {
    cursor: default;
    padding: 8px 12px;
    position: relative;
    display: flex;
    min-width: 26px;
}

dialog.control.can-not-insert>div.header div.trait-drop-control:not([class~="sink-exception"])>div.button.fa-add {
    display: none !important;
}

div.trait-drop-control>div.button.fa-whatsapp:before {
    color: inherit;
}

div.trait-drop-control>div.button:before {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 1px;
    width: 24px;
    height: 24px;
    /* margin-right: 4px !important; */
    /* content: "\e17b" !important; */
}

div.trait-drop-control>div.button:hover:before {
    /* background-color: var(--hover-background-color); */
    /* border-radius: 50% 50%; */
    /* color: white; */
}

div.trait-drop-control>div.button>div.overlay {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 9px;
    background-color: #fdf900fa;
    /* background-color: transparent; */
    color: #594e4e !important;
    width: 16px;
    height: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% 50%;
    line-height: 0px;
    box-shadow: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

div.trait-drop-control>div.button.button-text {
    cursor: default;
    padding: 8px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    position: relative;
    white-space: nowrap;
    overflow-x: clip;
    /* flex-shrink: 1; */
    flex-grow: 1;
}

div.trait-drop-control>div.button>div {
    white-space: nowrap;
    font-size: 0.88rem;
    width: auto;
    margin-left: 4px;
}

/*#region hidden-scroll */
 

dialog.control > div.header > div.hidden-scroll {
     
}

 

dialog.control > div.header > div > i.scroller.left {
  
}
dialog.control > div.header > div > i.scroller.right {
     order: 0;
     right: 0px;
}
 
  
 /*#region scroll-state */
 
 dialog.control > div.header  {
              /* display: flex; */
              /* justify-content: space-between; */
              /* align-items: center; */
              background-color: var(--header-background-color) !important;
              border-top-left-radius: inherit;
              border-top-right-radius: inherit;
              height: var(--collapsed-height);
              min-height: var(--collapsed-height);
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              /* overflow-x: scroll !important; */
              /* overflow-y:hidden !important; */
              overflow-x: visible !important;
              overflow-y: visible !important;
              width: -webkit-fill-available;
              /* flex: 10 0; */
    }
dialog.control > div.header > div.text {
        
     }
dialog.control > div.header > div.commands {
          padding: 0px 0px 0px 0px !important;
          display: flex;
          align-items: center;
          flex: 0 0;
          justify-content: end;
     }

dialog.control > div.header > div.protected.commands {
          flex: 0 0 auto;
          padding-left: 8px !important;
     }
dialog.control > div.header > div.scroll-box {
     container-type: scroll-state;
     /* container-type: inline-size; */
     container-name: overflow-container;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     /* background-color: var(--header-background-color) !important; */
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     order: 10;
     flex: 2 12 auto;
     overflow-y: hidden !important;
     overflow-x: hidden !important;
     position: relative;
     margin: 0px 0px;
    }
dialog.control > div.header > div.scroll-box > div,
dialog.control > div.header > div.scroll-box > div > div.tool-group{
    display: flex;
    flex-direction: row;
    /* flex-wrap: nowrap; */
    /* white-space: nowrap; */
    flex: 0 1;
    /* flex: 1 0; */
    justify-content: end;
}
dialog.control > div.header > div.scroll-box::-webkit-scrollbar ,
dialog.control > div.header::-webkit-scrollbar {
        width: 0px !important;
        height: 6px !important;
    }
 
 dialog.control > div.header > div >  i.scroller {
      /* visibility:hidden; */
      display: none;
      position: absolute;
      z-index: 100;
      background-color: hsl(173 59% 44% / 1);
      opacity: 1 !important;
      color: white !important;
      padding: 0px 8px;
      height: 100%;
      flex: 1 0;
  }
 dialog.control > div.header {
         position:relative;
     }

dialog.control>div.header  i {
    padding: 4px;
    opacity: 0.45 !important;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

@container overflow-container scroll-state(scrollable: inline-start ) {
    
    
    
    dialog.control > div.header > div > i.scroller.left {
        z-index:110;
        /* visibility:visible; */
        display: flex;
    }
    
 
    
    
    dialog.control > div.header > div.protected.commands { 
        
        z-index:100; 
        height:100%;
    }
}
@container overflow-container scroll-state(scrollable: inline-end ) {
    
     
    
    dialog.control > div.header > div > i.scroller.right {
        z-index:110;
        /* visibility:visible; */
        display: flex;
    }
     
    
    dialog.control > div.header > div.protected.commands { 
        
        z-index:100; 
        height:100%;
    }
}
 
 /*#endregion scroll-state */
 







@media (max-width: 3072px) {
    /* min-width: 3072px 920px; */ div.trait-drop-control>div.button {
        max-width: 28px;
        width: 28px;
    }

    div.trait-drop-control>div.button>div {
        display: none !important;
    }

    .button {
        max-width: 28px !important;
        width: 32px !important;
    }

    .round-button {
        width: 32px;
    }

    dialog.control>div.header> :is(.commands, .guest) > *[class*="fa-"]:not([class*="scroller"]) {
        width: 32px;
    }
}

@media (max-width: 1600px) {
    /*  1920px 2048px 2560px */
  dialog.control>div.header>div.hidden-scroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
    }
    
dialog.control > div.header > div.smart-scroll.hidden-scroll::-webkit-scrollbar {
        width: 0px !important;
        height: 3px !important;
    }
}

@media (min-width: 1600px) {
    
    /* min-width: 3072px 920px; */ 
    
      dialog.control > div.header > div > i.scroller {
     /* visibility:hidden; */
}

  

   

    dialog.control > div.header > div.hidden-scroll {
      
    }
}

/*#endregion hidden-scroll */
@media (min-width: 3072px) {
    /* min-width: 3072px 920px; */
}

div.trait-drop-control>div.button.button-text:before {
    margin-right: 4px;
    /* border: 1px solid; */
    /* border-radius: 50% 50%; */
}

div.trait-drop-control>div.button-text:after {
    transition: all 0.5s linear;
}

div.trait-drop-control.pop>div.button-text:after {
    transform: rotateX(180deg);
}

div.trait-drop-control>.button.disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

div.trait-drop-control>.button.on {
    color: var(--icon-highlight-color) !important;
}

@-webkit-keyframes color-signal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

@keyframes color-signal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

div.trait-drop-control.signal>.button.on {
    animation: color-signal 1.5s infinite ;
    -webkit-animation: color-signal 1s infinite ;
}

div.trait-drop-control>div.button.fa-star:before {
    color: inherit;
    /* display: flex !important; */
}

div.trait-drop-control>.button:hover {
    /* background-color: var(--hover-background-color); */
    /* background-color: unset; */
}

div.trait-drop-control.pop>.button {
    /* background-color: var(--hover-background-color); */
}

div.trait-drop-control>.button::after {
    right: auto;
    left: 16px;
    top: 0px;
    color: inherit;
    font-size: 10px;
    position: absolute;
    filter: invert(10%);
    opacity: 0.7;
    z-index: 10;
}

.trait-scale-down {
    position: absolute;
    z-index: 1000;
    cursor: default;
    height: 400px;
    overflow-y: auto;
    box-shadow: var(--drop-box-shadow);
    display: flex;
    flex-direction: column;
    transform-origin: top;
    transform: scale(1, 0);
    opacity: 0;
    transition: opacity 0.3s linear, transform 0.3s linear;
    border-radius: var(--drop-border-radius);
}

div.trait-scale-down>h3 {
    margin: 5px 8px;
    font-weight: 400;
    color: var(--text-color);
    user-select: none;
}

div.trait-scale-down>i#close {
    position: absolute;
    right: 0px;
    top: 2px;
    opacity: 0.5 !important;
    cursor: default;
    padding: 8px;
    line-height: 0.86rem;
    opacity: 0.3 !important;
    font-size: 1rem !important;
    z-index: 100000;
    /* display: none; */
}

div.trait-scale-down>i#close>svg {
    width: 14px;
    height: 14px;
    stroke: rgb(235 13 13);
    stroke-width: 2.3px;
}

div.trait-scale-down>i#close:hover {
    opacity: 1 !important;
}

div.trait-scale-down>i#close:before {
}

/*#region group */
[class~="pop"]>.trait-scale-down {
    transform: scale(1, 1);
    opacity: 1;
}

.trait-scale-down.pop {
    transform: scale(1, 1);
    opacity: 1;
}

/*#endregion group */
.trait-list-items {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 96px;
}

div.trait-drop-control:has(div > .trait-list-items:empty) {
    /* display: none !important; */
}

.trait-list-items:hover[class~="smart-scroll"]::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 17%);
    visibility: visible;
    border-radius: inherit;
}

.trait-list-items div.menu-item {
    /*
//BOOKMARK row pop-container 
*/
    display: flex;
    align-items: center;
    padding: 8px 0px;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start;
    user-select: none;
    cursor: default;
    width: inherit;
    /* border-radius: inherit; */
    position: relative;
    height: 44px;
    padding: 0px;
    /* width: 100%; */
    overflow-x: hidden;
    /* overflow-x: visible; */
}

.trait-list-items div.menu-item.state-processing {
    background-image: url(/graphics/web/ani/loading-16.gif) !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px;
    pointer-events: none;
    background-position-y: 50%;
    background-position-x: 8px;
}

.trait-list-items>div.hidden {
    display: none;
}

.trait-list-items div.menu-item>div[class*="-fa"]:after {
    position: absolute;
    right: 0px;
    margin: 0px 8px;
}

.trait-list-items div.menu-item.new-group {
    border-color: hsl(0deg 0% 0% / 15%);
    border-width: 2px;
}

.trait-list-items div.menu-item +div {
    border-top: 1px inset hsl(0deg 0% 0% / 5%);
}

.trait-list-items div.menu-item:hover {
    background-color: rgb(0 0 0 / 18%);
}

.trait-list-items>div.checked {
    background-color: rgb(0 0 0 / 16%);
    color: white !important;
}

.trait-list-items>div.fa-check {
    background-color: rgb(0 0 0 / 8%);
}

.trait-list-items>div.fa-check:before {
    position: absolute;
    color: black;
    top: 0px;
    left: 4px;
    font-size: 0.8rem;
}

.trait-list-items div.menu-item > div {
    /* patch */
    color: hsl(0deg 0% 40%) !important;
}

.trait-list-items div.menu-item>div:first-child {
    /*
//BOOKMARK cell row pop-container 
*/
    width: 32px;
    flex-basis: 32px;
    padding: 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
}

.trait-list-items div.menu-item>div:first-child.fa-question:before {
    color: transparent;
}

.trait-list-items div.menu-item i {
    /* width: 32px; */
    flex-basis: 24px;
    padding: 0px 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    height: -webkit-fill-available;
}

.trait-list-items div.menu-item>i.inactive {
    /* visibility: hidden !important; */
    pointer-events: none;
    display: none;
}

.trait-list-items div.menu-item>i:hover {
    background-color: hsl(0deg 0% 0% / 15%);
}

div.common-pop-box {
    position: fixed !important;
    background-color: var(--pop-box-background-color);
    box-shadow: var(--drop-box-shadow);
    border: var(--pop-border);
    border-radius: var(--pop-border-radius);
    transform-origin: var(--pop-right-down-transform-origin);
    transform: var(--pop-right-down-transform);
    transition: var(--pop-transition);
    max-width: 512px;
    max-height: 50%;
    overflow-y: auto;
    z-index: 1000;
    min-width: 180px;
    min-height: 80px;
    opacity: 0;
    top: 0px;
    right: 0px;
    z-index: -1;
    width: fit-content;
    overflow-x: hidden;
}

div.common-pop-box.pop-left {
    transform-origin: top right;
}

div.common-pop-box>div {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    height: 42px;
    cursor: pointer;
    white-space: nowrap;
}

div.common-pop-box>div:hover {
    background-color: var(--pop-item-hover-bgcolor) !important;
    color: var(--pop-item-hover-color) !important;
}

div.common-pop-box>div>i {
    font-size: 16px !important;
    /* width: 24px !important; */
    /* height: 24px !important; */
    flex: 0 0 32px;
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: unset !important;
    background-color: unset !important;
    padding: unset !important;
}

div.common-pop-box>div>i:before {
}

div.common-pop-box>div>div {
    display: block;
    flex: 1 1;
    white-space: nowrap;
}

div.common-pop-box>div:hover>div {
    color: var(--pop-item-hover-color) !important;
}

div.common-pop-box.pop {
    transform: var(--pop-right-down-transform-pop);
    opacity: 1;
    z-index: 90000000;
}

.trait-list-items div.menu-item>div input {
    margin: 0px !important;
    padding: 0px !important;
    transform: scale(1.31) !important;
}

.trait-list-items div.menu-item>div div#condition {
}

.trait-list-items div.menu-item>div div#condition[checked] {
    color: hsl(358.95deg 88% 64%);
}

.trait-list-items div.menu-item.checked>div:last-child {
    color: inherit !important;
}

.trait-list-items div.menu-item>div#text {
    padding-right: 16px;
    flex-grow: 1;
    overflow-x: clip;
    text-overflow: ellipsis;
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    color: inherit;
    color: hsl(0deg 0% 40%);
}

.trait-list-items div.menu-item>div#handlers {
    flex-grow: 2;
    display: flex;
    justify-content: flex-end;
    padding-right: 4px;
    /* min-width: 24px; */
    /* position: relative; */
}

div.trait-tool-box {
    z-index: 10;
    background-color: hsl(0deg 0% 0% / 4%);
    padding: 4px 8px;
    padding-right: 28px;
    justify-content: space-between;
    display: flex;
    flex-grow: 0;
    flex-shrink: 1;
    align-items: center;
    height: 32px;
}

div.trait-tool-box>div {
    display: flex;
    position: relative;
    align-items: center;
    /* flex-grow: 1; */
    height: 36px;
    /* flex-shrink: 1; */
    width: 170px;
}

div.trait-tool-box>div#tools-box:empty {
    width: 0px;
}

div.trait-tool-box>div>input {
    padding: 2px 24px 2px 8px !important;
    font-size: inherit !important;
    height: 32px !important;
}

div.trait-tool-box>div>i.fa-trash {
    position: absolute;
    right: -8px;
    font-size: 8px !important;
    /* opacity: 0.45 !important; */
}

div.trait-tool-box>div>i.fa-trash:before {
    font-size: 14px !important;
    opacity: 0.65 !important;
}

div.trait-tool-box.no-overflow {
    /* padding: 0px 8px; */
    /* padding-right: 32px; */
    /* height: 40px; */
    display: flex;
    justify-content: space-between;
}

div.trait-tool-box.no-overflow>div {
    /* margin-right: 24px; */
}

div.trait-tool-box>div#tools-box {
    flex: 0 1;
}

div.trait-tool-box.no-overflow>div:first-child {
    flex: 1 1;
}

div.trait-tool-box.no-overflow>div:first-child>input {
    display: none;
}

div.trait-tool-box.no-overflow>div:first-child>i#clear {
    display: none;
}

div.trait-tool-box i.button {
    padding: 2px !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    margin-left: 8px;
}

.trait-list-items div.menu-item>div div#condition, div.trait-tool-box i.toggle-button {
    border: 1px solid hsl(0deg 0% 88%);
    background-color: hsl(0deg 0% 93% / 33%);
    color: hsl(0deg 0% 0% / 12%);
    margin-left: 8px;
    border-radius: 4px;
    line-height: 0.81rem;
    font-size: 0.69rem;
    padding: 4px !important;
    margin: 4px;
    box-sizing: border-box;
    box-shadow: 0 0 1px hsl(180deg 25% 25% / 70%);
    opacity: 1 !important;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

div.trait-tool-box.no-overflow i.toggle-button {
    user-select: none;
    right: 0px;
}

.trait-list-items div.menu-item>div div#condition.on, div.trait-tool-box i.toggle-button.on {
    background-color: hsl(105deg 100% 50%);
    background-color: unset;
    box-shadow: 0 0 2px hsl(180deg 25% 25% / 50%);
    color: hsl(0deg 0% 0% / 70%);
    color: hsl(244 88% 64% / 1);
}

div.trait-tool-box i.button.fa-check {
    /* margin-right: 20px; */
}

div.trait-tool-box i.button:before {
    font-size: 20px !important;
}

div.trait-tool-box i.button:hover {
    background-color: unset !important;
}

div.trait-tool-box i.button:hover:before {
}

dialog.control>div .header>div>div.guest>div.tool-box i.drop-parent.pop>div {
    transform: scale(1, 1);
    opacity: 1;
}

dialog.control>div .header>div>div.guest>div.tool-box i.drop-parent>div>div {
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 4px;
}

dialog.control>div .header>div>div.guest>div.tool-box i.drop-parent>div>div>div {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

dialog.control>div .header>div>div.guest>div.tool-box>i:hover {
    --lighten: 21%;
    /* box-shadow: 0px 0px 2px 1px hsl(0deg 0% 56% / 28%); */
}

dialog.control>div .header>div>div.guest>div.tool-box>i:hover:before {
    background-color: var(--hover-background-color);
    margin: 0px !important;
    border-radius: 50% 50%;
}

dialog.control>div .header>div>div.guest>div.tool-box i.checked {
    --lighten: 15%;
    box-shadow: inset 0px 0px 3px 1px hsl(0deg 0% 56% / 28%);
    color: rgb(237 235 235 / 74%) !important;
}

dialog.control>div .header>div>div.guest>div.tool-box i:before {
    color: inherit !important;
    font-size: inherit;
}

dialog.control>div .header>div>div.guest>div.tool-box i#search:before {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 1px;
    width: 28px !important;
    height: 28px !important;
}

dialog.control>div .header>div>div.guest>div.tool-box input:not([type=checkbox]) {
    padding: 4px 8px;
    background-color: hsl(158deg 59% 142%);
    color: gray !important;
    line-height: 9px !important;
    height: 32px;
    margin: 4px 8px 4px 0px;
    box-sizing: border-box;
    width: auto;
}

dialog.control>div .header>div>div.guest>div.tool-box input[type="checkbox"] {
    transform: scale(1.25);
}

dialog.control.page-template> .header>div>div.guest {
    display: flex;
    margin-right: 8px;
    order: 90 !important;
    /* flex-grow: 2; */
    flex: 2 2;
    justify-content: flex-end;
}

dialog.control.page-template>div.header>div.seperator {
    order: 70;
}

dialog.control.page-template>div .header>div>div.guest:empty+div.seperator {
    background-color: transparent;
}

dialog.control.page-template>.header>div>div.commands {
    flex-grow: 5;
    justify-content: flex-end;
}

/*#region group */
dialog.control.page-template .header div.guest div.user-info>div:nth-child(2)>div:nth-child(1) {
    max-width: 300px;
    justify-content: space-between;
    width: 100%;
}

dialog.control.page-template .header div.guest div.user-info>div:nth-child(2)>div:nth-child(1)>div {
    max-width: 300px;
    justify-content: space-between;
    width: 100%;
}

/*#endregion group */
dialog.control>div.header i:before {
    color: inherit !important;
}

dialog.control>div.header i.fa-whatsapp:before {
    font-size: 18px;
}

.round-button[disabled] {
    pointer-events: none;
    opacity: 0.5;
    /* visibility: hidden; */
}

dialog.control>div.header {
    z-index: 100;
    /* height: fit-content !important; */
}

dialog.control>div.header>.commands>i {
    padding: unset !important;
    margin-left: 4px;
    /* opacity: 0.85; */
    /* cursor: default; */
    /* font-size: 21px !important; */
    border-radius: 50% 50%;
    /* border-radius: unset; */
    color: white;
}

dialog.control>div.header>.commands>i.svg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px !important;
}

dialog.control>div.header>.commands>i.svg>svg {
    height: 12px;
    width: 12px;
    /* margin: 8px; */
    stroke: var(--header-foreground-color);
}

dialog.control>div.header>.commands>svg {
    padding: 0px 8px;
    opacity: 0.25 !important;
    cursor: default;
    stroke: rgb(112 112 112);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

dialog.control>div.header i.close:before {
    font-family: fontello;
    content: '\e800';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: normal;
}

dialog.control.smart>.header {
    height: 36px;
}

/*#region group */
dialog.control.smart .round-button {
    width: 24px !important;
    height: 24px !important;
    max-width: 36px;
    max-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: 2px;
}

dialog.control.smart>.header>.commands>i[class*="fa-"] {
    width: 24px !important;
    height: 24px !important;
    max-width: 36px;
    max-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: 2px;
}

/*#endregion group */
dialog.control.smart>.header>.commands>i[class*="fa-"]:before {
    margin: 0px !important;
}

.button:hover:before {
    background-color: var(--hover-background-color);
}

.button.hover-light:hover:before {
    background-color: var(--hover-background-color-light);
    /* box-shadow: 0 0 7px 3px #dcdcdc7d; */
}

dialog.control>div.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    border-top: 1px solid gainsboro;
    background-color: rgb(0 0 0 / 3%);
    color: var(--base-text-color);
}

dialog.control>div.footer button#close {
    order: 1;
}

dialog.control>div.footer button#save {
    order: 100;
}

dialog.control>div.footer div:has(.smart-check) {
    order: 5;
    flex: 2 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    align-items: center;
}

dialog.control>div.footer label+.smart-check {
    margin-right: 16px;
}

dialog.control>div.footer:empty {
    display: none;
    padding: 0px !important;
}

dialog.control>div.footer input {
    padding: 8px;
    border-radius: 4px;
    outline: none;
    border: 1px solid rgb(192 192 192);
    font-size: 1.1rem;
    padding: 4px 8px !important;
    margin: 2px;
}

/*#region group */
dialog.control>div.status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    border-top: 1px solid gainsboro;
    /* background-color: rgb(0 0 0 / 3%); */
    background-color: var(--status-background-color) !important;
    color: var(--status-foreground-color) !important;
}

/*#endregion group */
dialog.control>div.status * {
    font-size: 0.85rem;
}

dialog.control>div.status>* {
    color: inherit;
    margin-left: 8px;
}

dialog.control.smart>div.status {
    padding: 2px 8px;
}

/*#region group */
dialog.control.smart>div.status {
    font-size: 0.80rem !important;
}

dialog.control.smart>div.status * {
    font-size: 0.80rem !important;
}

/*#endregion group */
dialog.extension-dialog:not([class~="page-template"])>div.status:empty, dialog.control:not([class~="page-template"])>div.status:empty {
    display: none;
    padding: 0px !important;
}

dialog.control>div.footer>.controls {
    display: flex;
    width: -webkit-fill-available;
    align-items: center;
    justify-content: space-between;
}

dialog.control>div.footer>.controls.clear.add input {
    margin-right: -36px;
    padding-right: 38px;
}

dialog.control>div.footer>.controls i.clear {
    color: rgb(192 192 192 / 10%);
    position: absolute;
    right: 10px;
    z-index: 10;
}

dialog.control>div.footer>.controls svg.clear {
    position: absolute;
    right: 36px;
    z-index: 10;
    stroke: rgb(0 0 0 / 5%);
}

dialog.control>div.footer>.controls input:hover+svg.clear {
    stroke: rgb(0 0 0 / 25%);
}

dialog.control>div.footer>.controls svg.add {
    margin: 0px 4px;
    stroke: rgb(116 116 116);
}

/*#region group */
dialog.control>div.footer>.controls i.clear:hover {
    color: rgb(192 192 192 / 50%);
}

dialog.control>div.footer>.controls input:hover+i {
    color: rgb(192 192 192 / 50%);
}

/*#endregion group */
.disabled-gray {
    pointer-events: none !important;
    /* filter: grayscale(60%); */
    /* -webkit-filter: grayscale(60%); */
    cursor: progress;
    user-select: none;
    opacity: 0.7;
}

body.ayanoglu-modal>.is-modal~div {
    pointer-events: none !important;
    filter: grayscale(60%);
    -webkit-filter: grayscale(60%);
}

body.ayanoglu-modal>.is-modal+div * {
    pointer-events: none !important;
}

/*
https://css-tricks.com/custom-scrollbars-in-webkit/
*/
[class~="smart-scroll"]::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: inherit;
    border-top-right-radius: inherit;
    background-color: rgba(0, 0, 0, 0);
}

[class~="smart-scroll"].thin::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: inherit;
    border-top-right-radius: inherit;
    background-color: rgba(0, 0, 0, 0);
}

/*#region debugging scroll bar */
.blue[class~="smart-scroll"]::-webkit-scrollbar {
    background-color: blue;
}

.red[class~="smart-scroll"]::-webkit-scrollbar {
    background-color: red;
}

.yellow[class~="smart-scroll"]::-webkit-scrollbar {
    background-color: #f6f106;
}

.green[class~="smart-scroll"]::-webkit-scrollbar {
    background-color: green;
}

/*#endregion debugging scroll bar */
[class~="visible"]::-webkit-scrollbar {
    background-color: rgba(192, 183, 183, 0.1);
}

[class~="smart-scroll"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 5px;
    visibility: hidden;
}

*:hover[class~="smart-scroll"]::-webkit-scrollbar-thumb {
    background-color: rgb(224, 224, 224);
    visibility: visible;
    border-radius: inherit;
}

[class~="smart-scroll"]::-webkit-scrollbar-track-piece {
    border-radius: inherit;
    background-color: rgba(0, 0, 0, 0);
}

*:hover[class~="smart-scroll"]::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

[class~="smart-scroll"]::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(191, 46, 46, 0);
}

*:hover[class~="smart-scroll"]::-webkit-scrollbar-track {
    border-radius: 25px;
    background-color: transparent;
}

[class~="smart-scroll"]::-webkit-scrollbar-corner {
    background: transparent;
}

/*#region group */
body.ayanoglu-modal dialog[class~="control"]:not([class~="master-detail-view-base"]):not([class~="pinned"]) {
    /*patch*/
}

body.ayanoglu-modal dialog[class~="control"]:not([class~="master-detail-view-base"]):not([class~="pinned"]) * {
    /*patch*/
}

/*#endregion group */
/*/////////////////////////////////// end dialog & panel style  ////////////////////////////////////////////////////////*/
dialog.control.avatar-check-list header input {
    transform-origin: center;
    transform-style: flat;
    transform: scale(0);
    margin: 12px;
    position: absolute;
    opacity: 0;
    transition: all 0.1s linear;
}

/*#region group */
dialog.control.avatar-check-list div[data-client-key].checked input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

dialog.control.avatar-check-list div[data-client-key] div:hover>input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

/*#endregion group */
dialog.control.avatar-check-list div[data-client-key].checked input+div, dialog.control.avatar-check-list div[data-client-key] div:hover input+div {
    transform: scale(0);
    opacity: 0 !important;
}

dialog.control.desktop-view.avatar-check-list header {
    min-width: 250px !important;
}

dialog.control.desktop-view.avatar-check-list header i {
    display: none;
}

dialog.control.contact-editor-dialog {
    height: 600px;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child {
    border-width: 0px;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child.pop {
    transform: scaleY(1);
    opacity: 1;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child>div {
    padding: 8px 16px 8px 8px;
    margin: 0px;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child>div:hover {
    background-color: rgb(0 0 0 / 0.03)
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child>div~div {
    border-top: 1px solid gainsboro;
}

dialog.control.contact-editor-dialog .body #connected-account .user-info * {
    font-size: 97%;
    user-select: none;
    cursor: default;
}

dialog.control.contact-editor-dialog .body #connected-account .user-info img {
    height: 24px
}

dialog.control.contact-editor-dialog .body #connected-account div.user-info>div:nth-child(2)>div:nth-child(1) {
    max-width: 100% !important;
}

dialog.control.contact-editor-dialog .body #connected-account .user-info .name-holder {
}

/*/////////////////////////////////// end WUP-14Qo0qGi  ////////////////////////////////////////////////////////*/
dialog.control .header i.build {
    font-size: 20px;
}

dialog.control.hover-dialog .header {
    background-color: rgb(0 0 0 / 0%) !important;
    justify-content: flex-end !important;
    position: absolute;
    right: 0px;
}

/*#region group */
dialog.control.hover-dialog .header i.collapse {
    display: none;
}

dialog.control.hover-dialog .header>div {
    display: none;
}

/*#endregion group */
dialog.control.hover-dialog .header i {
    padding: 2px !important;
    font-size: 18px;
    z-index: 10;
}

dialog.control.hover-dialog .body {
    height: min-content !important;
    width: -webkit-fill-available;
    padding: 0px !important;
    margin: 0px !important;
    min-height: unset;
    overflow-y: auto !important;
}

dialog.control.hover-dialog .body>div {
    white-space: break-spaces;
    max-width: 300px !important;
    padding: 8px 18px 8px 16px !important;
    color: gray;
    font-size: 0.89rem !important;
}

/****
service on header
*/
dialog.control .header div.guest div.user-info {
    padding: 0px 4px !important;
}

dialog.control .body div.user-info.spin:before {
    font-size: 21px;
}

dialog.control .header div.guest div.user-info>div {
    margin-right: 4px;
}

dialog.control .header div.guest div.user-info>i {
    color: #a0e9e1;
    opacity: 0.75;
    line-height: 0px;
    cursor: pointer;
    order: 5;
}

dialog.control .header div.guest div.user-info>i:before {
    color: inherit !important;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2)>div:nth-child(1) {
    display: flex;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2)>div:nth-child(2) {
    display: none;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2)>i {
    margin-left: 0px !important;
    padding-left: 4px;
    padding-right: 4px;
    color: inherit !important;
}

dialog.control.contact-list-dialog>.header {
    background-color: var(--primary-color-complement-tint-8) !important;
}

dialog.control.contact-list-dialog .list-items {
    --row-height: 32px;
    display: table;
    width: 100%;
    transition: none !important;
}

dialog.control.contact-list-dialog .list-items>div.sink {
    display: none;
}

dialog.control.contact-list-dialog .list-items>div {
    display: table-row;
}

dialog.control.contact-list-dialog .list-items>div.columns {
    background-color: rgb(244 244 244) !important;
    position: sticky;
    top: 0px;
    z-index: 10;
}

dialog.control.contact-list-dialog .list-items>div[data-control-client-key] {
    cursor: pointer;
}

dialog.control.contact-list-dialog .list-items>div>div {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 4px 0px 4px !important;
    color: rgb(128, 128, 128);
    height: var(--row-height);
    width: auto;
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
}

dialog.control.contact-list-dialog .list-items>div>div:first-child {
    width: 32px;
    padding: 0px;
}

dialog.control.contact-list-dialog .list-items>div>div.service-hub {
    width: 20px;
    position: relative;
}

dialog.control.contact-list-dialog .list-items>div>div.service-hub>div#expander {
    position: relative;
    padding-left: 8px;
}

dialog.control.contact-list-dialog .list-items>div>div.service-hub>div#expander>div {
}

dialog.control.contact-list-dialog .list-items>div>div.service-hub>div#expander.pop>div {
    opacity: 1;
    transform: scale(1, 1);
}

dialog.control.contact-list-dialog .list-items>div>div.service-hub>div#expander>div>div {
}

dialog.control.contact-list-dialog .list-items>div>div.service-hub>div#expander>div>div:hover {
}

dialog.control.contact-list-dialog .list-items>div>div:first-child img {
    height: var(--row-height);
    transform-origin: center;
    transform-style: flat;
    transform: scale(1);
    transition: all 0.1s linear;
}

dialog.control.contact-list-dialog .list-items>div>div:first-child input {
    transform-origin: center;
    transform-style: flat;
    transform: scale(0);
    margin: 12px;
    position: absolute;
    opacity: 0;
    transition: all 0.1s linear;
}

/*#region group */
dialog.control.contact-list-dialog .list-items>div.checked>div:first-child input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

dialog.control.contact-list-dialog .list-items>div>div:first-child:hover input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

/*#endregion group */
dialog.control.contact-list-dialog .list-items>div.checked>div:first-child img, dialog.control.contact-list-dialog .list-items>div>div:first-child:hover img {
    transform: scale(0);
    opacity: 0;
}

dialog.control.contact-list-dialog .list-items>div:nth-child(odd) {
    background-color: #f0f8ff75;
}

dialog.control.contact-list-dialog {
    transform-origin: top left;
    transform-style: flat;
    transform: scale(1);
    max-width: 400px;
    /*#region patch */
    height: 90% !important;
    right: 0px;
}

dialog.control.contact-list-dialog>div.body {
    padding: 0px !important;
}

dialog.control.contact-list-dialog>div.body .service-items {
    padding: 0px !important;
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: white;
}

dialog.control.contact-list-dialog>div.body .service-items #add-service {
    padding: 8px;
}

dialog.control.contact-list-dialog>div.body .select-account-dialog {
    width: -webkit-fill-available !important;
}

dialog.control.contact-list-dialog.check-in {
    transform: scale(0);
    left: 200px !important;
    top: 20px !important;
    transition: all 0.5s ease-in-out !important;
}

dialog.control.form-view-base .body {
    padding: 0px;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

dialog.control.form-view-base .body #form-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    flex: 2 0;
    /* display: block; */
    position: relative;
}

dialog.control.form-view-base .body #form-container:has(div.column) {
    display: flex;
    flex-direction: row;
}

dialog.control.form-view-base .body #form-container>div.column+div {
    border-left: 1px solid var(--border-color-dark);
}

dialog.control.form-view-base .body #form-container>div.column>.form-view {
    /* width: 100%; */
}

dialog.control.form-view-base .body #form-container>div.column>.form-view div[data-row] {
    margin-left: 2px !important;
    margin-right: 2px !important;
    margin-bottom: 20px !important;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: -webkit-fill-available;
}

dialog.control.form-view-base .body #form-container>div.column>.form-view div[data-row] div.label {
    display: flex;
    justify-content: flex-start;
}

dialog.control.form-view-base .body #form-container>div.column>.form-view div[data-row] div.control {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: auto;
}

dialog.control.form-view-base .body #form-container>div.column>.form-view div[data-row] div.control> :is(input) {
    width: -webkit-fill-available !important;
}

/*#region form-view-base-all */
/*#region form-view-base-flex */
dialog.control.form-view-base .body .form-view > * {
    margin-right: 4% !important;
    margin-left: 4% !important;
}

dialog.control.form-view-base .body .form-view {
    --container-width: 92%;
    --container-width: calc(100% - 8%);
    --label-cell-width: 120px;
    --control-cell-width: calc(var(--container-width) - var(--label-cell-width));
    --row-height: 40px;
    --input-height: 100px;
    --input-width: 70%;
    --group-body-border-color: 1px solid hsl(0deg 0% 0% / 6%);
    --group-body-background-color: hsl(calc(var(--primary-color-h) + var(--degree)), calc(var(--primary-color-s) + (-6%)), calc(var(--primary-color-l) + 52%));
    --group-header-background-color: hsl(calc(var(--primary-color-h) + var(--degree)), var(--primary-color-s), calc(var(--primary-color-l) + 49%));
    display: flex;
    width: var(--container-width);
    margin: 16px 4% !important;
    flex-direction: column;
    /* flex-grow: 1; */
    height: fit-content;
}

dialog.control.form-view-base .body .form-view div[data-row] {
    display: table;
    table-layout: fixed;
    border-spacing: 16px 16px;
    width: fit-content;
    max-width: var(--container-width);
    width: var(--container-width);
}

/*#endregion form-view-base-flex */
/*#region form-view-base-table */
dialog.control.form-view-base .body .form-view.table {
    display: table;
    table-layout: fixed !important;
    border-spacing: 16px 16px;
}

dialog.control.form-view-base .body .form-view.table div[data-row] {
    display: table-row !important;
}

dialog.control.form-view-base .body .form-view input {
    /* color:red; */
    width: auto;
    width: inherit;
}

dialog.control.form-view-base .body .form-view data {
    min-width: 300px !important;
    width: inherit;
    display: flex;
    align-items: center;
    position: relative;
}

dialog.control.form-view-base .body .form-view data:after {
    position: absolute;
    right: -16px;
}

/*#region variants */
.labels-top .form-view {
    display: flex !important;
    flex-direction: column !important;
    border-spacing: unset !important;
    width: -webkit-fill-available !important;
}

.labels-top .form-view>div {
    display: flex !important;
    flex-direction: column !important;
    width: -webkit-fill-available !important;
    max-width: unset !important;
}

.labels-top .form-view>div>div {
    display: flex !important;
    width: -webkit-fill-available !important;
    height: auto !important;
}

/*#endregion variants */
/*#endregion form-view-base-table */
/*#region form-view-base-grid */
dialog.control.form-view-base .body .form-view.grid-view {
    display: grid !important;
    grid-template-columns: 50% 50%;
}

/*#endregion form-view-base-grid */
/*#endregion form-view-base-all */
div.form-view-base.wide-content .body .form-view {
    --label-cell-width: 15%;
    --input-width: 100%;
    margin: 0px !important;
}

div.form-view-base.wide-content .body .form-view div[data-row] {
    border-spacing: 0px 16px !important;
    margin: 0px 8px !important;
}

div.form-view-base.wide-content .body .form-view div[data-row] div.label {
    padding-right: 16px;
}

dialog.control.form-view-base .body .form-view div.editable-select {
    width: min-content;
    position: relative;
    min-width: 300px;
    height: 36px;
}

dialog.control.form-view-base .body .form-view div.editable-select input {
    position: absolute;
    width: -webkit-fill-available !important;
    box-sizing: border-box;
    height: -webkit-fill-available;
    margin-right: 20px;
    border-right-color: transparent !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

dialog.control.form-view-base .body .form-view div.editable-select select {
    width: -webkit-fill-available !important;
    box-sizing: border-box;
    height: -webkit-fill-available;
}

dialog.control.form-view-base .select-array-items {
    position: relative;
    min-height: inherit;
}

dialog.control.form-view-base .select-array-items>div {
    display: flex;
    flex-wrap: wrap;
    min-height: 42px;
    width: var(--input-width);
    position: relative;
}

dialog.control.form-view-base .select-array-items>div>i {
    position: absolute;
    right: 4px;
    color: mediumspringgreen;
}

dialog.control.form-view-base .select-array-items>div>div {
    background-color: #0000001a;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

dialog.control.form-view-base .select-array-items>div>div>i {
    padding: 0px 0px 0px 8px;
    cursor: default;
}

dialog.control.form-view-base .select-array-items>div>div>i>svg {
    width: 10px;
    height: 10px;
    stroke: red;
    opacity: 0.1;
}

dialog.control.form-view-base .select-array-items>div>div:hover>i>svg {
    opacity: 1;
}

dialog.control.form-view-base .select-options-drop {
    position: relative;
}

dialog.control.form-view-base .select-options-drop>.selected {
    border: 1px solid rgb(0 0 0 / 5%);
    display: flex;
    min-height: 40px;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box !important;
    padding: 0px 22px 0px 0px !important;
    z-index: 10;
    position: relative;
    width: inherit;
}

dialog.control.form-view-base .select-options-drop>.selected i {
    position: absolute;
    right: 0px;
    padding: 0px 4px;
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    background-color: rgb(0 0 0 / 5%);
}

dialog.control.form-view-base .select-options-drop>.selected i.clean {
    background-color: transparent;
    right: 22px;
    padding: 0px 8px;
    opacity: 0.3;
    cursor: default;
    display: none;
    z-index: 0;
}

dialog.control.form-view-base .select-options-drop>.selected>input:not(:placeholder-shown)+i.clean {
    display: flex;
}

dialog.control.form-view-base .select-options-drop>.selected i:before {
    color: rgb(0 0 0 / 42%);
    transition: transform 0.5s linear;
}

dialog.control.form-view-base .select-options-drop>.selected i.up:before {
    transform: rotate(180deg);
}

dialog.control.form-view-base .select-options-drop>.selected>input {
    position: absolute;
    z-index: 0;
    margin: 0px;
    opacity: 0;
    border-color: rgb(0 0 0 / 0%) !important;
    width: -webkit-fill-available;
    display: flex;
    margin-right: 22px;
}

dialog.control.form-view-base .select-options-drop>.selected>input:focus {
    z-index: 20;
    opacity: 1;
}

dialog.control.form-view-base .select-options-drop>.selected>div {
    z-index: 10;
}

dialog.control.form-view-base .select-options-drop>.selected>input:focus+div {
    opacity: 0;
}

dialog.control.form-view-base .select-options-drop>.options {
    position: absolute;
    background-color: var(--pop-box-background-color);
    box-shadow: var(--drop-box-shadow);
    border-radius: var(--drop-border-radius);
    transform-origin: var(--pop-up-transform-origin);
    opacity: 0;
    transform-origin: top;
    transform: var(--pop-up-transform);
    transition: var(--pop-transition);
    width: 100%;
    max-height: 256px;
    overflow-y: auto;
    z-index: 1000;
}

dialog.control.form-view-base .select-options-drop>.options.pop {
    opacity: 1;
    transform: scale(1, 1);
}

dialog.control.form-view-base .select-options-drop>.options-parent {
    box-sizing: border-box;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div {
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: center;
    cursor: pointer;
    background-color: white;
    margin: 0px !important;
    user-select: none;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

dialog.control.form-view-base .select-options-drop>.options-parent:not([class~="selected"])>div:hover {
    background-color: rgb(0 0 0 / 5%);
}

dialog.control.form-view-base .select-options-drop>.options-parent>div+div {
    border-top: 1px solid rgb(0 0 0 / 5%);
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>div {
    min-height: 36px;
    display: flex;
    align-items: center;
}

dialog.control.form-view-base .select-options-drop>.options>div>div {
    display: none;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.text {
    display: flex;
    align-items: center;
    color: var(--soft-black);
    flex-grow: 2;
    padding-left: 8px;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.closer {
    margin-right: 8px;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.closer svg {
    stroke: #edecec;
}

dialog.control.form-view-base .select-options-drop>.options-parent:hover>div>.closer svg {
    stroke: #f6a6a6;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.avatar {
    max-width: 32px;
    max-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.avatar:before {
    font-size: 32px;
    color: silver;
    margin: auto;
    display: none;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.avatar:empty:before {
    display: block;
}

dialog.control.form-view-base .select-options-drop>.options-parent>div>.avatar>img {
    height: inherit;
    max-height: inherit;
    width: inherit;
    max-width: inherit;
}

dialog.control.form-view-base .body .form-view :is(h3, div) {
    box-sizing: border-box;
    /* flex: 1 0; */
}

dialog.control.form-view-base .body div.commands {
    position: static;
    bottom: 0px;
    top: auto;
    /* background-color: hsl(180 23% 93% / 1); */
    display: flex;
    /* width: -webkit-fill-available; */
    right: 0px;
    left: 0px;
    padding: 8px;
    justify-content: space-between;
    z-index: 10;
    width: 99.99%;
    box-sizing: border-box;
    align-items: center;
}

dialog.control.form-view-base .body .form-view>div>div>div.field-commands {
    display: flex;
    /* margin-left: 16px; */
    /* width: -webkit-fill-available; */
    justify-content: flex-end;
    width: inherit;
}

dialog.control.form-view-base .body .form-view>div>div>div.field-commands>div {
    color: blue;
    margin-left: 16px;
    cursor: pointer;
    display: inline-block;
    font-size: 0.87rem;
}

div.menu-detail-view dialog.control.form-view-base div.commands button#close {
    display: none !important;
}

div.menu-detail-view dialog.control.form-view-base div.commands>div:nth-child(2) :is(input, div) {
    display: none !important;
}

dialog.control.form-view-base .body .form-view div[data-row]>div input[type="text"] {
    width: -webkit-fill-available;
    width: inherit;
}

input[type="datetime-local"], input[type="datetime"] {
    width: auto !important;
}

dialog.control.form-view-base .body .form-view div[data-row]>div select {
    width: auto;
}

/*#region error-box */
div.error-box {
    overflow-y: hidden;
    box-sizing: content-box;
    /* padding: 0px 4px 0px 0px; */
    background-color: var(--theme-color-danger-lighter);
    border-radius: 4px;
    transform-origin: top;
    transform-style: flat;
    transition: height 0.5s linear, transform 0.5s ease-in-out, margin 0.5s ease-in-out;
    /* height: 0px !important; */
    transform: scale(1, 0);
    margin: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 9999999999999999;
}

div.error-box>i {
    margin-right: 8px;
    position: absolute;
    right: 0px;
    top: 0px;
}

div.error-box>i:before {
    font-size: 14px;
    opacity: 0.1;
}

div.error-box:hover>i:before {
    opacity: 0.7;
}

div.error-box>div {
    font-size: 0.89rem;
    padding: 8px;
    color: rgb(120 120 120);
}

div.error-box.pop {
    transform: scale(1, 1);
    /* z-index: 999991000; */
    /* height: var(--row-height) !important; */
}

div.error-box:empty {
}

/*#endregion error-box */
dialog.control.form-view-base .body .form-view textarea {
    height: var(--input-height);
    /* width: var(--input-width); */
    width: -webkit-fill-available;
    transition: height 0.3s linear;
}

dialog.control.form-view-base .body .form-view textarea:focus {
    /* height: calc(var(--input-height) * 2); */
    background-color: hsl(180deg 63% 64% / 3%);
}

dialog.control .form-view div[data-row]>div {
    display: table-cell;
    vertical-align: middle;
    line-height: var(--row-height);
    position: relative;
    height: var(--row-height);
    white-space: nowrap;
}

dialog.control .form-view.table>div>div {
    background-color: unset !important;
    box-shadow: unset !important;
}

dialog.control .form-view.table>div:hover {
    box-shadow: unset !important;
    background-color: unset !important;
}

dialog.control.form-view-base .body .form-view .input-expand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

dialog.control.form-view-base .body .form-view .input-expand input[type="text"] {
    width: -webkit-fill-available !important;
}

dialog.control.form-view-base .body .form-view .input-expand:after {
    position: absolute;
    right: 8px;
    color: gray;
    cursor: pointer;
    font-family: "FontAwesome Solid";
    content: "\f142";
    font-size: 21px;
    font-size: inherit;
    line-height: unset;
    font-style: normal;
}

dialog.control.form-view-base .body .form-view div[data-row] .label {
    color: coral;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

dialog.control.form-view-base .body .form-view div[data-row] div.label {
    color: coral;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
    /* white-space: unset; */
    /* line-height: calc(var(--row-height)/2); */
    vertical-align: top;
}

dialog.control.form-view-base .body .form-view div[data-row] span.label {
    margin-right: 8px
}

dialog.control.form-view-base .body .form-view div[data-row]>div.label {
    width: var(--label-cell-width);
}

/*#region control */
dialog.control.form-view-base .body .form-view div[data-row]>div.control {
    width: var(--control-cell-width);
    /* overflow-x: auto; */
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control > dialog.control {
    min-height: 400px !important;
    max-height: unset;
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control:has(>dialog.control) {
    min-height: 400px !important;
    max-height: unset;
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control div#rows {
    display: flex;
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control div#rows>div {
    flex-grow: 1;
    margin-right: 16px !important;
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control div#rows>div>div {
    width: 100%;
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control div#rows>div>div input {
    width: inherit;
}

dialog.control.form-view-base .body .form-view div[data-row]>div.control div#rows>div>div:first-child {
    color: coral;
    margin-bottom: 4px;
}

/*#endregion control */
/*#region group */
dialog.control.form-view-base .body .form-view>div[data-row-group] {
    border-spacing: 8px 8px;
    display: flex;
    justify-content: space-between;
    margin: 16px 0px;
}

dialog.control.form-view-base .body .form-view>div[data-group] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 0px;
    /* flex: 0 1 0; */
    height: auto;
    /* transform: scale(1, 1); */
    transition: transform 0.5s linear, opacity 0.5s linear, height 0.5s linear;
    /* opacity: 1; */
    /* transform-origin: top; */
}

dialog.control.form-view-base .body .form-view>h3+div[data-group] {
    border: 1px solid hsl(0deg 0% 0% / 6%);
    border-top-color: transparent;
    overflow-y: hidden;
    height: 0%;
}

dialog.control.form-view-base .body .form-view>h3.expand+div[data-group] {
    /* transform: scale(1, 0); */
    /* opacity: 0; */
    /* height: var(--height) !important; */
    /* margin: 0px 16px; */
    /* width: 80%; */
    flex: 2 0 auto;
    height: auto !important;
    flex: 0 1 auto;
}

dialog.control.form-view-base .body .form-view>h3.expand.on-load+div:is(.group-summary, [data-group]) {
    transition: unset;
}

dialog.control.form-view-base .body .form-view>div:is(.group-summary, [data-group]) {
    background-color: var(--group-body-background-color) !important;
    transition: opacity 0.5s linear, height 0.5s linear;
}

dialog.control.form-view-base .body .form-view>div.group-summary {
    opacity: 1;
    height: 40px;
    align-items: center;
    display: flex;
    margin-bottom: 8px;
    padding: 8px 16px !important;
    border: 1px solid var(--group-body-border-color);
    border-top-color: transparent;
}

dialog.control.form-view-base .body .form-view>div.group-summary:empty {
    display: none;
}

dialog.control.form-view-base .body .form-view>h3.expand+div+div.group-summary {
    opacity: 0;
    height: 0px;
}

dialog.control.form-view-base .body .form-view>div.group-summary * {
    color: hsl(0deg 0% 75%);
    font-style: oblique;
}

dialog.control.form-view-base .body .form-view>div.group-summary>div {
    display: block;
    align-items: center;
    overflow-x: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
}

dialog.control.form-view-base .body .form-view>div.group-summary>div+div {
}

dialog.control.form-view-base .body .form-view>div.group-summary>div+div:before {
    content: ",";
    margin-right: 4px;
    margin-left: 2px;
}

dialog.control.form-view-base .body .form-view>div.group-summary>div>b {
    margin-right: 4px;
    font-weight: 400;
    color: #0606f86e;
    color: hsl(246deg 32% 70%);
}

dialog.control.form-view-base .body .form-view>div.group-summary>div>b:after {
    content: ":";
}

/*#endregion group */
dialog.control.form-view-base .body .form-view>div[data-group]>div.flex-axis {
    /* height:var(--height); */
    width: 100%;
    display: flex;
    height: fit-content !important;
    margin: 8px 0px;
    flex-direction: column;
    padding-bottom: 32px;
}

dialog.control.form-view-base .body .form-view>h3 {
    /* width: -webkit-fill-available; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: hsl(0deg 0% 0% / 7%);
    padding: 8px 8px 8px 16px;
    border-radius: 4px 4px 0px 0px;
    margin: 16px 0px 0px;
    /* width: 80%; */
    /* margin-left: 10%; */
    color: var(--text-color);
    font-weight: 500;
    position: relative;
    background-color: var(--group-header-background-color) !important;
}

dialog.control.form-view-base .body .form-view>h3>i {
    /* position: absolute; */
    top: 4px;
    right: 8px;
    font-size: 16px;
    transform: rotateX(180deg);
    cursor: pointer;
    transition: transform 0.3s linear;
    padding: 0px;
}

dialog.control.form-view-base .body .form-view>h3.expand>i {
    transform: rotateX(360deg);
}

dialog.control.form-view-base .body .form-view>div[data-row-group]>div {
    /* width: 100%; */
    /* width: -webkit-fill-available; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
}

dialog.control.form-view-base .body .form-view>div.data-group>div>div.label {
    text-align: left;
    margin-bottom: 4px;
}

dialog.control.form-view-base .body .form-view>div.data-group>div>div:nth-child(2) {
    text-align: left;
}

dialog.control.form-view-base .body .form-view>div>div.adjust-vertical-align {
    vertical-align: top;
}

dialog.control.form-view-base .body .form-view>div.table-in-cell>div.adjust-vertical-align {
    padding-top: 6px;
}

dialog.control.form-view-base .body .form-view>div.table-in-cell>div.adjust-vertical-align>div {
    border: 1px solid gainsboro;
    border-radius: 8px;
    padding: 16px;
    width: fit-content;
    width: -webkit-fill-available;
}

dialog.control.form-view-base .body .form-view>div.table-in-cell>div.adjust-vertical-align>div>div {
}

dialog.control.form-view-base .body .form-view>div.table-in-cell>div.adjust-vertical-align>div>div>div {
}

dialog.control.form-view-base .body .form-view>div.table-in-cell>div.adjust-vertical-align>div>div>div.label {
    color: hsl(16deg 100% 70%);
    padding-bottom: 4px;
    text-align: left;
}

dialog.control.form-view-base .body .form-view>div.table-in-cell>div.adjust-vertical-align>div>div>div.control {
    margin-bottom: 16px;
}

.health-services .master-detail {
    display: flex;
    height: 100%;
}

.health-services .master-detail>div {
    padding: 8px 0px;
    margin: 0px !important;
}

.health-services .master-detail>.master {
    flex-grow: 1;
    background-color: hsl(158deg 73% 93%);
    color: rgb(64 64 64);
}

.health-services .master-detail>.detail {
    flex-grow: 4;
    padding: 8px 16px;
}

.health-services .master-detail>.detail .detail-header {
    display: flex;
    justify-content: space-between;
    background-color: #d5ede5;
    margin-left: -16px;
    padding-left: 16px;
    padding-right: 8px;
}

.health-services .body .master-detail>.detail .detail-header .text {
    font-weight: 500;
    font-size: 1.03rem;
    padding-bottom: 4px;
    padding-top: 4px;
}

.health-services .body .master-detail>.detail .detail-header .box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.health-services .body .master-detail>.detail .detail-header .box i {
    cursor: pointer;
    margin-left: 16px;
    color: rgb(80 93 255);
}

.health-services .body .master-detail>.detail .detail-header .box i:before {
    font-size: 17px;
}

.health-services .body .master-detail>.detail .header {
    font-weight: 500;
    font-size: 1.01rem;
    border-bottom: 1px solid rgb(139 210 184 / 22%);
    padding-bottom: 4px;
    padding-top: 4px;
}

.health-services .body .master-detail>.detail .container {
    display: flex;
    flex-direction: column;
}

.health-services .body .master-detail>.detail .container:empty {
    display: block;
}

.health-services .body .master-detail>.master>.menu-items {
    user-select: none;
}

.health-services .body .master-detail>.master>.menu-items>div {
    padding: 12px 16px 12px 32px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.health-services .body .master-detail>.master>.menu-items>div+div {
    border-top: 1px solid rgb(0 0 0 / 0.03);
}

.health-services .body .master-detail>.master>.menu-items>div.selected {
    background-color: rgb(0 0 0 / 3%);
}

.health-services .body .master-detail>.master>.menu-items>div:hover {
    background-color: hsl(0deg 0% 0% / 25%);
    color: white;
}

/*/////////////////////////////////// end from extension desktop  ////////////////////////////////////////////////////////*/
/*#endregion from module.css on framework */
div.EkDRKlGYj {
    position: static !important;
    box-shadow: unset !important;
    width: -webkit-fill-available !important;
}

dialog.control.view-base .form-container div.EkDRKlGYj>.header {
    background-color: #feffff !important;
    border-radius: 4px !important;
}

dialog.control.view-base .form-container div.EkDRKlGYj>div.body {
    padding: 0px !important;
    margin: 0px !important;
    padding-top: 16px !important;
}

dialog.control.view-base .form-container button {
    color: white !important;
}

dialog.control.view-base {
    /* border-radius: 1px !important; */
    background-color: white !important;
}

dialog.control.view-base.detail-pop {
    width: 60% !important;
    position: fixed !important;
    right: 0px !important;
    left: auto !important;
    bottom: 0px !important;
}

dialog.control.view-base.detail-pop.left {
    left: 0px !important;
    right: auto !important;
}

dialog.control.view-base.detail-pop.contrast {
    --header-background-color: var(--header-contrast-background-color);
}

dialog.control.contrast>.header {
    background-color: var( --header-contrast-background-color ) !important;
}

dialog.control.contrast>.header * {
    color: var(--header-contast-foreground-color);
}

dialog.control.contrast>.header div.trait-drop-control>.button.on {
    color: var(--icon-highlight-color);
}

dialog.control.view-base.color-contrast>.header {
    background-color: var(--header-background-color) !important;
}

dialog.control.view-base.color-contrast>.header * {
    color: var(--header-foreground-color);
}

dialog.control.view-base>div.sub-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow-y: hidden;
    height: 0px;
    transition: height 0.5s linear;
    --lighten: 40%;
    background-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
}

dialog.control.view-base>div.sub-header.pop {
    height: 40px;
    min-height: 40px;
}

dialog.control.view-base>div.sub-header>div {
    display: flex;
    padding: 8px;
}

dialog.control.view-base>div.sub-header>div#filters-report {
    justify-content: center;
    display: flex;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group {
    display: flex;
    align-items: center;
    margin-right: 16px;
    position: relative;
    background-color: hsl(0deg 0% 0% / 5%);
    padding: 0px 0px 0px 8px;
    border-radius: 6px;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group>div#items {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    border-radius: inherit;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group>i {
    padding-left: 8px;
    padding-right: 8px;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group>div#items>div[data-client-key] {
    margin-left: 8px;
    display: flex;
    --lighten: 4%;
    background-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
    padding: 0px 8px;
    height: 26px;
    border-radius: inherit;
    color: white;
    align-items: center;
    position: relative;
}

dialog.control.view-base>div.sub-header>div#filters-report div:is(.and, .or)+div {
    margin-left: 48px !important;
}

dialog.control.view-base>div.sub-header>div#filters-report div.and+div {
    margin-left: 42px !important;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group:is(.and, .or)+div {
    margin-left: 32px !important;
}

dialog.control.view-base>div.sub-header>div#filters-report div+div:is(.and, .or):before {
    content: "veya";
    position: absolute;
    left: -30px;
    color: rgb(96 96 96 / 1);
    font-size: 0.81rem;
    background-color: yellow;
    line-height: 1.23rem;
    padding: 0px 4px;
    border-radius: 4px;
}

dialog.control.view-base>div.sub-header>div#filters-report>div:is(.and, .or):before {
    background-color: hsl(60 92% 50% / 1) !important;
}

dialog.control.view-base>div.sub-header>div#filters-report div+div:is(.and, .or):before {
    left: -42px !important;
}

dialog.control.view-base>div.sub-header>div#filters-report div+div.and:before {
    content: "ve";
    left: -31px !important;
}

dialog.control.view-base>div.sub-header>div#filters-report div+div.or:before {
    content: "veya";
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-name {
    color: var(--base-text-color);
    margin: 0px 8px !important;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group>div#items>div>i {
    margin-left: 8px;
    --lighten: -15%;
    color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
    display: flex;
    align-items: center;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group>div#items>div>i:before {
    line-height: 0px;
}

dialog.control.view-base>div.sub-header>div#filters-report>div#filter-group>div#items>div>div {
    font-size: 95% !important;
    white-space: nowrap;
}

/*#region listview column editor */
dialog.control#E1nLCX92Je {
    position: fixed !important;
    --drag-color: hsl(0deg 0% 0% / 44%);
}

dialog.control#E1nLCX92Je div.columns-list {
    display: table !important;
    flex-direction: column;
    display: flex !important;
    table-layout: fixed;
}

dialog.control#E1nLCX92Je div.columns-list>div {
    display: table-row;
    display: flex;
    flex-direction: row;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

dialog.control#E1nLCX92Je div.columns-list>div.drop-target {
    opacity: 0.9;
    background-color: hsl(0 0% 90% / 1);
}

dialog.control#E1nLCX92Je div.columns-list>div.drag-up {
    border-top-color: var(--drag-color) !important;
}

dialog.control#E1nLCX92Je div.columns-list>div.drag-down {
    border-bottom-color: var(--drag-color) !important;
}

dialog.control#E1nLCX92Je div.columns-list>div>* {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

dialog.control#E1nLCX92Je div.columns-list>div>div {
    white-space: nowrap;
    flex: 1 0 auto;
    padding: 4px 4px;
}

dialog.control#E1nLCX92Je div.columns-list>div>i {
    flex: 0 1 16px;
    justify-content: center;
    color: gray;
}

dialog.control#E1nLCX92Je div.columns-list>div>div:first-child {
    width: 20%;
    line-height: 0px;
    flex: 0 0 24px;
}

dialog.control#E1nLCX92Je div.columns-list>div>div input {
    /* margin: 0px !important; */
    /* line-height: 0px !important; */
}

dialog.control#E1nLCX92Je div.columns-list>div:hover {
    background-color: hsl(0deg 0% 0% / 3%);
}

dialog.control#E1nLCX92Je div.columns-list>div>div>div {
    padding: 0px 4px;
}

dialog.control#E1nLCX92Je div.columns-list>div>div>div>input {
    width: auto;
    transform: scale(1.5);
    height: auto;
}

/*#endregion listview column editor */
/*#region group */
div.EkDRKlGYj.can-not-close>.header>.commands>i#close {
    display: none;
}

div.EkDRKlGYj.list-view-base>.header>.commands>i#close {
    display: none;
}

/*#endregion group */
div.EkDRKlGYj .table {
    display: table;
}

div.EkDRKlGYj .table>div {
}

div.EkDRKlGYj .table>div>div {
    display: table-cell;
}

div.EkDRKlGYj.list-view-base .table i {
    line-height: 0px;
}

div.EkDRKlGYj.list-view-base .table i#message.fa-whatsapp {
    color: rgb(23 226 23);
}

div.EkDRKlGYj.list-view-base {
    max-height: 100%;
    max-width: 100%;
}

div.EkDRKlGYj.list-view-base>div.body {
    padding: 0px;
    width: 100%;
}

div.EkDRKlGYj.list-view-base>div.body>div {
    display: none;
}

div.EkDRKlGYj.list-view-base>div.body>div.show {
    display: block;
}

div.EkDRKlGYj.list-view-base .table {
    border-spacing: 0px 0px;
    --cell-border-color: rgb(0 0 0 / 0.03);
    border-left: 1px solid var(--cell-border-color);
    border-top: 1px solid var(--cell-border-color);
    table-layout: fixed;
}

div.EkDRKlGYj.list-view-base.field-set .table {
    border-width: 0px;
}

div.EkDRKlGYj.list-view-base .table>div.list-header {
    background-color: rgb(217 229 224);
    position: sticky;
    top: 0px;
}

div.EkDRKlGYj.list-view-base .table>div.list-header>div {
    font-weight: 500;
}

div.EkDRKlGYj.list-view-base .table>div {
    display: table-row;
}

div.EkDRKlGYj.list-view-base .table>div.eof {
    padding: 8px 8px 4px 8px;
    display: block;
    font-style: italic;
    color: gray;
}

div.EkDRKlGYj.list-view-base .table>div[data-client-key]+div.eof {
    display: none;
}

div.EkDRKlGYj.list-view-base .table>div>div {
    white-space: nowrap;
    max-width: 200px;
    width: 30%;
    overflow-x: clip;
    text-overflow: ellipsis;
    border-right: 1px solid var(--cell-border-color);
    padding: 8px;
}

div.EkDRKlGYj.list-view-base .table>div>div:last-child {
    text-align: right;
}

div.EkDRKlGYj.list-view-base .table>div+div>div {
    border-bottom: 1px solid var(--cell-border-color);
}

div.EkDRKlGYj.list-view-base .table>div>fieldset {
    margin-bottom: 16px;
    border: 1px solid gainsboro;
    border-radius: 4px;
    margin-top: 8px;
    padding: 16px;
    position: relative;
    background-color: rgb(255 255 255 / 90%);
}

div.EkDRKlGYj.list-view-base .table>div>fieldset>legend {
    background-color: inherit;
    border-radius: 8px;
    padding: 8px;
}

div.EkDRKlGYj.list-view-base .table>div>fieldset i.fa-edit {
    position: absolute;
    top: -14px;
    right: 2px;
    cursor: pointer;
}

div.EkDRKlGYj.list-view-base .table>div>fieldset i.fa-edit:before {
    font-size: 16px;
    color: #fdb296;
    font-weight: normal;
}

div.EkDRKlGYj.list-view-base .table>div>fieldset>.date {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
}

div.EkDRKlGYj.list-view-base .table>div>fieldset>div.text {
}

dialog.control.view-base .form-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background: rgb(255 255 255 / 75%);
    padding: 16px;
    height: 100%;
}

dialog.control.view-base .form-container.horizontal {
    flex-direction: row;
}

@media only screen and (max-width: 800px) {
    dialog.control.view-base .form-container.horizontal {
        flex-wrap: nowrap;
        flex-direction: column;
    }
}

dialog.control.view-base .form-container.horizontal>div.flex-grid:nth-child(1) {
    padding-right: 5%;
    flex-basis: 45%;
}

dialog.control.view-base .form-container.horizontal>div:nth-child(2) {
    flex-basis: 50%;
}

dialog.control.view-base .form-container div.commands {
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 32px;
    align-items: flex-start;
}

dialog.control.view-base .form-container #treathments #treathment-items {
    margin-bottom: 16px;
}

dialog.control.view-base .form-container #treathments #treathment-items>fieldset ol {
    padding-left: 16px;
    list-style: auto;
}

dialog.control.view-base .form-container #treathments #treathment-items>fieldset ol>li {
    color: grey;
}

dialog.control.view-base .form-container #treathments #treathment-items>div.item-editor {
    margin: 16px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

dialog.control.view-base .form-container #treathments #treathment-items>div.item-editor>div {
    margin-right: 8px;
    background-color: aliceblue;
}

dialog.control.view-base .form-container #treathments #treathment-items>div.item-editor>i {
    cursor: pointer;
    margin: 8px 8px;
}

dialog.control.view-base .form-container #treathments #treathment-items>div.item-editor>i:before {
    color: coral;
}

dialog.control.view-base .form-container #treathments #treathment-items>fieldset>div {
    color: #808081;
    font-size: 0.96rem;
}

dialog.control.view-base .form-container #treathments #treathment-items>fieldset+fieldset {
    margin-top: 16px;
}

dialog.control.view-base .form-container>div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

dialog.control.view-base .form-container>div>div {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    margin-bottom: 8px;
}

dialog.control.view-base .form-container>div>div.row {
    flex-direction: row;
    align-items: center;
}

dialog.control.view-base .form-container>div>div.row>div {
    margin-right: 32px;
}

dialog.control.view-base .form-container>div>div>div {
}

/*#region group */
dialog.control.view-base .form-container>div>div.row>label {
    color: #57a1df;
    margin-bottom: 8px;
}

dialog.control.view-base .form-container>div>div>*:first-child {
    color: #57a1df;
    margin-bottom: 8px;
}

/*#endregion group */
dialog.control.view-base .form-container>div>div.row>label, dialog.control.view-base .form-container>div>div.row>*:first-child {
    margin: 0px;
    margin-right: 8px;
}

dialog.control.view-base .form-container>div div[contenteditable="true"] {
    /* line-height: 21px !important;
   padding: 4px;
background-color: white;
display: flex;
min-height: 36px;
align-items: center;
flex-wrap: wrap; */
}

dialog.control.view-base .form-container>div input, dialog.control.view-base .form-container .flex-grid textarea, dialog.control.view-base .form-container>div *:not([contenteditable="true"])>div[contenteditable="true"] {
    box-sizing: border-box;
    width: 100%;
}

dialog.control.view-base .form-container>div textarea {
    height: 120px;
    line-height: 23px;
    box-sizing: border-box;
    width: 100%;
}

dialog.control {
    --collapsed-height: 40px;
    --collapsed-height-smart: 32px;
    --common-sub-header-bg-color: hsl(188deg 63% 91%);
    flex-direction: column;
    background-color: var(--dialog-background-color);
    border: 0px;
    display: none;
    padding: 0px;
    outline: none;
    --stack-index: 0;
    overflow: initial;
}

dialog.margin-vertical {
    margin-top: 1%;
    margin-bottom: 1%;
}

dialog.control .body .editor-form {
    padding: 8px;
    border-radius: 4px;
}

dialog.control .body .editor-form>div {
    margin-bottom: 32px;
}

dialog.control .body .editor-form>div>div:first-child {
    color: blue;
    margin-bottom: 8px;
    font-weight: 500;
}

dialog.control .body .editor-form>div.commands {
    display: flex;
    justify-content: flex-end;
}

dialog.control.google-contact-groups .base-table {
    table-layout: fixed;
    user-select: none;
}

dialog.control.google-contact-groups .base-table>div>div {
    padding: 8px !important;
}

dialog.control.google-contact-groups .base-table>div>div:first-child {
    width: 16px;
}

dialog.control.google-contact-groups .base-table>div>div:first-child input {
    transform: scale(1.5)
}

dialog.extension-dialog {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000000035;
    box-shadow: 0px 2px 4px 1px gainsboro;
    border-radius: 4px;
    width: fit-content;
    transition: height 0.5s ease-in-out;
}

dialog.control.is-modal {
    box-shadow: 0px 2px 8px 1px hsl(0deg 0% 47%);
    max-height: 100%;
    height: 95%;
    /* height: -webkit-fill-available; */
    position: fixed;
    scroll-behavior: smooth;
}

body:has(dialog.control.is-modal) {
    /* overflow-y:hidden; */
    /* margin-right:5px; */
    /* scroll-behavior:smooth; */
}

dialog.control.is-modal.fit-height-content {
    /* height: fit-content !important; */
    height: fit-content;
}

dialog.control.is-modal.body-fix > div.body {
    margin: 0px !important;
    padding: 8px !important;
}

dialog.control.about-fill {
    width: 95%;
    height: 95%;
    z-index: 2147483647;
    max-height: unset;
    max-width: unset;
}

dialog.control.container-snap {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

dialog.control.asistant-dialog .body .header {
    font-weight: 600;
    color: coral;
    margin-bottom: 8px !important;
}

dialog.control.asistant-dialog div.body>div.body {
    padding: 16px !important;
}

dialog.control.asistant-dialog .body .body ul {
    list-style: disc;
}

dialog.control.asistant-dialog .body .body ul>li {
    margin: 16px;
}

dialog.control *:is(textarea, input, select) {
    border-radius: 4px;
    outline: none;
    border: 1px solid rgb(192 192 192);
    font-size: 1rem;
    font-weight: 400;
    box-sizing: border-box;
    font-family: 'Roboto';
    width: -webkit-fill-available;
    color: gray;
}

@keyframes signal-background-red {
    0% {
        background-color: hsl(0deg 100% 50% / 0%);
    }

    25% {
        background-color: hsl(0deg 100% 50% / 20%);
    }

    50% {
        background-color: hsl(0deg 100% 50% / 50%);
    }

    75% {
        background-color: hsl(0deg 100% 50% / 20%);
    }

    100% {
        background-color: hsl(0deg 100% 50% / 0%);
    }
}

dialog.control *:is(textarea, input, select).notify-focus {
    animation-name: signal-background-red;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    animation-direction: alternate;
}

dialog.control *:is(textarea, input, select,data) {
    padding: 8px;
    border-radius: 4px;
    outline: none;
    border: 1px solid var(--input-border-color);
    font-size: 1rem;
    font-weight: 400;
    box-sizing: border-box;
    font-family: 'Roboto';
    color: gray;
}

dialog.control *:is( input, select,data) {
    height: 36px;
}

dialog.control select {
    padding: 4px 8px;
}

dialog.control input[indeterminate] {
    opacity: 0.3;
    /* filter: grayscale(1); */
    /* box-sizing: border-box; */
    /* padding: 0; */
}

dialog.control *:not([contenteditable="true"])>div[contenteditable="true"] {
    /* border: 1px solid gainsboro; */
    width: -webkit-fill-available;
    padding: 8px 0px 0px 8px;
    border-radius: 2px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    min-height: 32px;
    height: -webkit-fill-available;
    border: 1px solid var(--border-color-dark);
}

div[contenteditable="true"].spin:before {
    top: 0px;
    left: 98%;
    font-size: 12px;
}

dialog.control [contenteditable="true"]:empty {
    padding: 8px !important;
}

dialog.control [contenteditable="true"]>div[contenteditable]:not([class~="selector"]) {
    padding: 4px 8px 4px 8px !important;
    border-radius: 4px;
    margin: 0px 4px 8px 0px;
    white-space: nowrap;
}

dialog.control [contenteditable="true"]>div[contenteditable="false"] {
    background-color: rgb(201 227 250);
    display: flex;
}

dialog.control [contenteditable="true"]>div[contenteditable="false"]>div {
}

dialog.control [contenteditable="true"]>div[contenteditable="false"]>i {
}

dialog.control [contenteditable="true"]>div[contenteditable="false"]>i:before {
    font-size: 13px;
    margin-left: 8px;
}

dialog.control div[contenteditable="true"]>div[contenteditable="true"] {
    background-color: transparent;
    padding-right: 1px !important;
    padding-left: 1px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    white-space: nowrap;
}

dialog.control div[contenteditable]>div>div>span {
    background-color: yellow;
}

dialog.control div[contenteditable]>.selector {
    background-color: #fdffbd;
    position: fixed;
    border-radius: 0px 0px 4px 4px;
    display: none;
    max-width: 200px;
    min-width: 100px;
}

dialog.control div[contenteditable]>.selector.pop {
    display: block;
}

dialog.control div[contenteditable]>.selector>div {
    padding: 4px 8px 4px 8px;
    cursor: default;
    font-size: 0.97rem !important;
    white-space: nowrap;
    width: inherit;
    overflow-x: clip;
    text-overflow: ellipsis;
}

dialog.control div[contenteditable]>.selector>div.selected {
    background-color: rgb(0 0 0 / 7%);
}

.button.upload-file>input[type=file] {
    display: block;
    opacity: 0 !important;
    padding: 0px !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border-radius: inherit;
    margin: 0px;
}

dialog.control .button.upload-file {
    position: relative;
    margin: 0px;
}

dialog.control .button.upload-file input[type="file"] {
    display: block;
    opacity: 0 !important;
    padding: 0px !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border-radius: inherit;
    margin: 0px;
}

dialog.control button {
    outline: unset;
    font-family: Roboto;
    font-size: 1.01rem;
    font-weight: 400;
    color: var(--button-color);
    background-color: var(--button-bg-color);
    /* background-color: var(--button-background-color); */
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    padding: 4px 16px 4px 16px;
    line-height: 1.4rem;
    box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 10%);
    white-space: nowrap;
}

dialog.control button.icon {
    padding: 4px 8px;
}

dialog.control dialog.form-view-base button#close {
    display: none;
}

dialog.control button.spin {
    position: relative;
    color: transparent;
}

dialog.control button.spin:before {
    font-size: 16px;
}

dialog.control button.spin-back {
    /* font-size: 16px; */
    background-size: 24px;
    background-blend-mode: multiply;
}

dialog.control button.light {
    background-color: var(--brand-color-complemantery-tint-9) !important;
    color: rgb(81 81 81);
    border-color: var(--brand-color-complemantery-tint-8);
    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 11%);
}

dialog.control button:active {
    background-color: var(--button-active-bg-color) !important;
    box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 14%);
}

dialog.control button~button {
    margin-left: 16px;
}

dialog.extension-dialog>div.footer input[type="text"] {
    width: -webkit-fill-available;
}

div.table-set {
    display: table;
    border-spacing: 0px 0px;
    box-sizing: border-box;
}

div.table-set>div {
    display: table-row;
}

div.table-set>div>div {
    display: table-cell;
    vertical-align: top;
    padding-right: 8px;
    max-height: 100px;
    overflow-y: clip;
}

dialog.control dialog.control {
    position: static;
}

dialog.control dialog.control {
}

dialog.control dialog.control:not([class~="is-modal"],[class~="full-height-slider"],[class~="toggle-fill-screen"]) {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0px !important;
    box-shadow: unset !important;
    background-color: white !important;
}

dialog.control>div.body.master-detail>.detail>dialog.control {
    border-radius: 0px;
    box-shadow: none;
}

.definition.inline {
    font-size: 0.86rem !important;
    color: rgb(127 130 155);
}

/*#region begin dialog & panel style   */
dialog.templates-dialog {
    max-width: 400px !important;
    width: 400px !important;
    height: 700px;
    max-height: 400px;
}

dialog.control .body dialog.templates-dialog {
    border: 1px solid rgb(0 0 0 / 16%);
}

dialog.template-editor-dialog {
    width: 600px;
    height: 500px;
}

dialog.template-editor-dialog textarea {
    line-height: 1.8rem;
    width: 100%;
    height: 100%;
}

dialog.templates-dialog>* {
    padding: 0px !important;
}

dialog.templates-dialog[data-control-collapsed]>*:not([class="b"]) {
    padding: 0px !important;
    overflow-y: hidden !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

dialog.templates-dialog>div.body {
    margin: 4px;
    padding: 0px !important;
    border-top: 1px solid gainsboro;
    flex-grow: 2;
}

dialog.templates-dialog .message-list {
    margin: 0px 2px !important;
    padding: 0px !important;
    user-select: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: none !important;
}

dialog.templates-dialog .message-list:empty {
    padding: 16px !important;
}

dialog.templates-dialog .spin .message-list:empty:before {
    content: "Y\00FCkleniyor...";
    color: coral;
}

dialog.templates-dialog .message-list:empty:before {
    content: "Kay\0131t mevcut de\011Fil.";
    color: silver;
}

dialog.templates-dialog .message-list>div {
    width: -webkit-fill-available;
    position: relative;
    /* padding-bottom: 12px; */
    padding: 0px;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
}

dialog.templates-dialog .message-list>div:nth-child(odd) {
    background-color: hsl(0deg 0% 0% / 5%);
}

dialog.templates-dialog .message-list>div.selected {
    background-color: rgb(0 0 0 / 16%);
}

dialog.templates-dialog .message-list>div.editing {
    background-color: rgb(245 0 0 / 7%) !important;
}

dialog.templates-dialog .message-list>div>div {
    padding: 4px 16px 4px 4px;
    margin: 0px;
    margin-right: 16px;
    /* padding: 0px; */
    line-height: 1.34rem;
    font-size: 0.89rem;
    cursor: pointer;
    max-height: 64px;
    min-height: 48px;
    overflow-y: clip;
    text-overflow: ellipsis;
    width: -webkit-fill-available;
}

dialog.templates-dialog .message-list>div>div b {
    font-weight: bold;
}

dialog.templates-dialog .message-list>div>i {
    padding: 8px;
    position: absolute;
    cursor: pointer;
    color: #a4a2a2;
    font-size: 16px;
}

dialog.templates-dialog .message-list>div>i:before {
    color: inherit !important;
    /* font-size: 16px !important; */
}

dialog.templates-dialog .message-list>div>i.fa-star {
    right: -6px;
    top: -8px !important;
    bottom: auto;
}

dialog.templates-dialog .message-list>div>i.fa-edit {
    right: -6px;
    top: auto;
    bottom: -5px !important;
}

dialog.templates-dialog .message-list>div:hover {
    background-color: rgb(0 0 0 / 3%);
}

dialog.templates-dialog>.header>div {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

dialog.templates-dialog>div.footer>.controls input {
}

dialog.templates-dialog>div.footer>.controls i {
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}

dialog.simple-list-editor-dialog>div.body {
    margin: 0px !important;
}

dialog.simple-list-editor-dialog>div.footer>.controls input {
}

dialog.simple-list-editor-dialog>div.footer>.controls i {
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}

dialog.templates-dialog>div.footer>.controls i.clear {
    right: 43px !important;
}

dialog.templates-dialog>div.footer>.controls i.add {
}

dialog.control.on.extension-dialog.settings-dialog>div.body {
    width: 350px;
}

dialog.control .body .settings {
    margin-top: 8px;
    border-spacing: 0px 8px;
}

dialog.control .body .settings textarea {
    height: 150px !important;
}

dialog.control .body .settings>div>div {
    padding: 4px;
}

dialog.control .body .settings>div>div:last-child>div:last-child {
    font-size: 90%;
    font-style: italic;
    color: gray;
    margin-top: 4px;
}

dialog.control.templates-dialog.extension-dialog.can-not-expand {
    height: 80% !important;
    max-height: unset !important;
}

dialog.control * {
    font-family: 'Roboto', sans-serif;
    /* font-family: roboto-flex, Inter, Roboto, Helvetica, Calibri, Arial, sans-serif; */
    /* font-family: Lucida; */
    /* font-family: 'Ace Crikey'; */
    /* font-family: 'minion'; */
    /* font-family: pecita; */
    /* font-family: Helvetica; */
}

fieldset.tab-view {
    border: 1px solid hsl(0 0% 93% / 1);
    border-radius: 6px;
}

fieldset.tab-view>legend {
    padding: 0px 6px;
}

fieldset.tab-view>legend button {
    background-color: hsl(0 0% 95% / 1) !important;
    border: 1px solid hsl(0 0% 70% / 1) !important;
    color: hsl(0 0% 48% / 1) !important;
}

fieldset.tab-view>legend button:hover {
    background-color: hsl(0 0% 88% / 1) !important;
}

fieldset.tab-view>legend button.active {
    background-color: hsl(0 0% 99% / 1) !important;
    color: hsl(0 0% 68% / 1) !important;
    pointer-events: none;
}

fieldset.tab-view>section {
}

fieldset.tab-view>section div.table {
    width: 100%;
}

dialog.control>div.body div {
    line-height: 1.4rem;
}

dialog.control>div.body :is(p,ol,ul) {
    margin-bottom: 16px !important;
}

dialog.control>div.body div b {
    /* color: red; */
}

dialog.control>div.body {
    padding: 0px;
    margin: 8px;
    margin-right: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: inherit;
    position: relative;
}

dialog.control>div.body.pop-after {
    --tool-tip-y: 0px;
    --tool-tip-x: 50%;
}

dialog.control>div.body.pop-after:after {
    font-size: 1rem;
}

dialog.control.flex-body>div.body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

dialog.control[class~="pop-view"]>div.body {
    margin: 0px;
}

dialog.control div.dialog.control>div.body {
    margin: 2px;
    /* background-color: gray; */
    height: 100%;
}

dialog.control.push_pin>div.body {
    margin: 4px;
}

dialog.control:before {
    content: "";
    background-color: transparent;
    cursor: w-resize;
    position: absolute;
    right: 0px;
    height: 100%;
    width: 0px;
    display: none;
}

dialog.control:after {
    content: "";
    height: 0px;
    background-color: transparent;
    cursor: n-resize;
    display: none;
}

.pad-2 {
    padding: 2px;
}

.pad-4 {
    padding: 4px;
}

.pad-8 {
    padding: 8px;
}

.pad-16 {
    padding: 16px;
}

.v-pad-2 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.v-pad-4 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.v-pad-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.v-pad-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

dialog.control.open_in_new {
    height: 90%;
    margin-top: 5%;
    margin-bottom: 5%;
}

dialog.control.open_in_new .body {
    padding: 0px !important;
}

dialog.control.open_in_new .body h2.pop {
    height: 300px;
}

dialog.control.can-not-expand {
}

dialog.control.labels-dialog.can-not-expand {
    height: 80%;
}

/*#region group */
dialog.extension-dialog.can-not-expand>div.body {
    overflow-y: auto;
    flex-grow: 2;
}

dialog.control.can-not-expand>div.body {
    overflow-y: auto;
    flex-grow: 2;
}

/*#endregion group */
dialog.control.on {
    display: flex;
}


dialog.control.minimized {
    --max-width: 300px;
    --max-height: 35px;
    top: auto !important;
    bottom: 0px !important;
    left: calc(var(--stack-index) * calc(var(--max-width) + 4px)) !important;
    overflow: hidden !important;
    margin: 0px;
    position: fixed !important;
    box-shadow: 0px 2px 4px 1px hsl(0deg 0% 80%);
    border-radius: 4px !important;
}

dialog.control.minimized>div.header>i#expander { 
    display:none;
}

dialog.control.minimized, dialog.control.minimized>* {
    max-width: var(--max-width) !important;
    max-height: var(--max-height) !important;
    height: var(--max-height) !important;
    width: var(--max-width) !important;
    min-height: unset !important;
    overflow: hidden !important;
}

dialog.control.minimized>.header {
    position: static !important;
    border-radius: inherit !important;
}

dialog.control.minimized>.header i#close-dialog , dialog.control.minimized>.header i#expander {
    pointer-events: none;
}

dialog.control.minimized>.header>div:not(:is(.text, .protected)) {
    display: none !important;
}

dialog.control.minimized>.header>div:is(.protected) {
    flex: 3 0;
}

dialog.control.minimized>div:not(:is(.header)) {
    display: none !important;
}

@-webkit-keyframes slidingLine {
    0% {
        background-position: 100% 0%
    }

    100% {
        background-position: 0% 0%
    }
}

@keyframes slidingLine {
    0% {
        background-position: 100% 0%
    }

    100% {
        background-position: 0% 0%
    }
}

dialog.control.progress>.header {
    background: linear-gradient(90deg, hsl(210deg 100% 50% / 80%), #ffffff, hsl(210deg 100% 50% / 80%));
    background-repeat: no-repeat;
    background-size: 500% 5px;
    background-position-y: 100% !important;
    -webkit-animation: slidingLine 1s ease infinite;
    -moz-animation: slidingLine 1s ease infinite;
    -o-animation: slidingLine 1s ease infinite;
    animation: slidingLine 1s ease infinite;
}

dialog.control.gradient-header {
    background: linear-gradient(180deg, var(--brand-color-tint-5) 0px, var(--brand-color-tint-5) 45px, rgb(255 255 255) 30px);
}

dialog.control.gradient-header>.header {
    background-color: rgb(0 0 0 / 0%) !important;
}

dialog.control>div.header>div>.commands {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 4px 0px 0px !important;
    order: 50;
    flex: 2 1;
    height: 100%;
}

dialog.control>div.header>div> div:empty { 
    flex: 0 10 0px !important;
}

dialog.control>div.header > div> div:has( > *:empty) { 
     flex: 0 10 0px !important;
}

dialog.control>div.header>div>.commands.protected {
    flex: 0 1;
    order: 1000;
}

/*#region PATCH 906220535 */
/*#region group */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: unset !important;
    max-height: 28px;
    height: 28px;
    margin: 2px 2px;
    max-width: unset;
    width: auto !important;
}

/* dialog.control>div.header> :is(.commands, .guest)>*[class*="fa-"]
{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: unset !important;
    max-height: 28px;
    height: 28px;
    margin: 2px 4px;
    max-width: unset;
    width: 28px !important; 
} */
.button:before {
    height: 28px !important;
    width: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease-in-out;
}

.button[class~="ccw-45"][class*="fa-"]:before {
    transform: rotateZ(-45deg) !important;
}

.button[class~="ccw-0"][class*="fa-"]:before {
    transform: rotateZ(0deg) !important;
}

.button.smooth:hover:before {
    border-radius: 2px !important;
}

/*#endregion group */
dialog.control>div.header> :is(.commands, .guest)>*[class*="fa-"][class~="can-toggle"]:not([class~="on"]) {
    /* color: var(--header-foreground-color); */
    opacity: 0.7 !important;
}

dialog.control>div.header> :is(.commands, .guest)>*[class*="fa-"][class~="on"] {
    color: var(--icon-highlight-color);
    opacity: 1 !important;
}

.round-button>svg.icon {
    height: 10px !important;
    width: 10px !important;
}

dialog.control.page-template>div.header .round-button {
}

dialog.control.page-template>div.header>.commands>i[class*="fa-"] {
    width: 32px;
    height: 32px;
    color: var(--header-foreground-color);
}

/*#region group */
.round-button:before {
    font-size: 14px !important;
    margin: 0px !important;
    border-radius: 50% 50%;
}

dialog.control>div.header>.commands>i[class*="fa-"]:not([class*="scroller"]):before {
    font-size: 14px !important;
    margin: 0px !important;
    border-radius: 50% 50%;
}

/*#endregion group */
.round-button[class*="-fa"]:after {
    font-size: 10px !important;
    right: 0px !important;
    top: -4px !important;
    color: rgb(0 0 0 / 46%) !important;
}

dialog.control>div.header>.commands>i.collapse {
    transition: transform 1s linear 0s;
    font-size: 32px;
    padding: 0px;
}

dialog.control>div.header i.push_pin {
    transform: rotate(45deg);
}

dialog.control.push_pin>.header i.push_pin {
    transform: rotate(0deg);
}

dialog.control.push_pin {
    z-index: 1000000640;
    cursor: default;
    min-width: 10px;
    width: -webkit-fill-available !important;
    position: relative;
    inset: unset !important;
    min-height: fit-content !important;
    box-shadow: none;
}

dialog.control.push_pin>.header>div {
    padding: 4px 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    flex-grow: 10;
    flex-shrink: 0;
}

dialog.control.collapsed-mark {
    overflow-y: hidden;
    bottom: auto;
}

dialog.control.collapsed-mark>.header i.collapse {
    transform: rotateX(180deg);
}

dialog.control.collapsed>.header i.collapse {
    transform: rotateX(180deg);
}

dialog.control.collapsed>div.body {
    /*for pinned state*/
    height: 0px !important;
}

dialog.control.collapsed>div.footer {
    height: 0px;
    min-height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-y: hidden;
    opacity: 0;
}

dialog.control>div.body>h1 {
    background-color: navy;
    background-color: rgb(121 120 151);
    padding: 8px 8px;
    font-weight: 500;
    letter-spacing: 0.03rem;
    color: white;
    margin-bottom: 2px !important;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    z-index: 10000000;
}

dialog.control>div.body>div {
    transform-style: flat;
    transition: all 0.5s linear;
    }

dialog.control>div.body>h1.fold+div {
    transform: scale(1, 0);
    opacity: 0;
}

dialog.control>div.body>div>* {
}

dialog.control>div.body>h1.fold+div>* {
    height: 0px;
    overflow-y: hidden;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

dialog.control.push_pin>.header {
    padding-right: 14px;
}

dialog.control>div.header>div#back {
    padding: 0px 8px;
    font-size: 20px;
    cursor: pointer;
    color: var(--header-foreground-color);
}

dialog.control>div.header>div#back:hover {
    color: hsl(0deg 0% 100% / 80%);
}

dialog.control>div.header > div.text {
    font-weight: 400;
    letter-spacing: 0.03rem;
    overflow-x: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    letter-spacing: 0.05rem;
    font-size: 1.01rem;
    flex: inherit !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 0;
    display:flex;
    order: 1;
    padding: 0px 8px 0px 8px;
    height: 100%;
    user-select: none;
}
dialog.control>div.header>div.text > div {
    padding: 0px 0px 0px 8px !important;
    z-index: 0;
}
dialog.control>div.header>div {
    /* flex-wrap: wrap; */
}

dialog.control>div .header>div>div.guest {
    font-weight: 400;
    font-size: 1.01rem;
    display: flex;
    order: 30 !important;
    position: relative;
    justify-content: flex-end;
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
    flex: 1 4;
}

dialog.control>div .header>div>div.guest.search {
    order: 20 !important;
    /* flex: 4 1; */
}

dialog.control.master-detail-view-base.tree-detail-view.slide-over>div .header>div>div.guest {
    order: 2 !important;
    flex-basis: 24% !important;
}

dialog.control>div.header>div:not([class~="fa-"][class~="separator"]):empty {
    display: none;
}

dialog.control>div.header>div#back {
    display: block;
}

dialog.control>div.header>i#expander {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 4px 8px 4px 12px;
    color: hsl(0 0% 100% / 1);
    font-size: 1.8rem;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    overflow: visible;
    background-color: hsl(0deg 0% 0% / 0%);
    transition: all 0.7s linear;
}


@media (min-width: 640px) {
  dialog.control>div.header>i#expander:before{ 
    font-size: 24px;
}
}

dialog.control>div.header>i#expander:active {
    background-color: hsl(0deg 0% 100% / 51%);
}

dialog.control>div.header>div.seperator {
    width: 1px;
    height: 54%;
    background-color: var(--header-foreground-color);
    order: 3;
    opacity: 0.5;
    margin: 0px 8px;
}

dialog.control>div .header>div>div.guest:empty+div.seperator {
    background-color: transparent;
}

dialog.control>div .header>div>div.guest.protected {
    justify-content: flex-start;
    flex-grow: 0;
    margin-right: 16px;
    /* border-right: 1px solid  white; */
    order: 50;
}

dialog.control>div .header>div>div.guest.protected.preslot {
    justify-content: flex-end;
    order: 10 !important;
    /* flex-grow: 10 !important; */
    display: flex;
    width: max-content;
    align-items: center;
    flex: 10 1;
}

dialog.control.fixed-detail>div .header>div>div.guest.protected.preslot {
    justify-content: flex-start;
}

dialog.control>div.header i {
    padding: 4px;
    opacity: 0.45 !important;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.control>div.header i:hover {
    opacity: 1 !important;
}

/*#region group */
dialog.control>div.header .commands i[class*=" icon-"]:before {
    font-size: 21px;
}

dialog.control>div.header .commands i[class^="icon-"]:before {
    font-size: 21px;
}

/*#endregion group */
dialog.control.push_pin>.header i {
    opacity: 0.45 !important;
    font-size: 18px;
}

dialog.extension-dialog>.header i:hover {
    opacity: 1;
}

dialog.extension-dialog>div.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px;
    border-top: 1px solid gainsboro;
    background-color: rgb(0 0 0 / 3%);
}

dialog.extension-dialog>div.footer:empty {
    display: none;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

dialog.extension-dialog>div.footer>.controls {
    display: flex;
    width: -webkit-fill-available;
    align-items: center;
    justify-content: space-between;
}

dialog.extension-dialog>div.footer>.controls.clear.add input {
    margin-right: -36px;
    padding-right: 38px;
}

dialog.extension-dialog>div.footer>.controls i.clear {
    color: rgb(192 192 192 / 10%);
    position: absolute;
    right: 10px;
    z-index: 10;
}

dialog.extension-dialog>div.footer>.controls svg.clear {
    position: absolute;
    right: 36px;
    z-index: 10;
    stroke: rgb(0 0 0 / 5%);
}

dialog.extension-dialog>div.footer>.controls input:hover+svg.clear {
    stroke: rgb(0 0 0 / 25%);
}

dialog.extension-dialog>div.footer>.controls svg.add {
    margin: 0px 4px;
    stroke: rgb(116 116 116);
}

/*#region group */
dialog.extension-dialog>div.footer>.controls i.clear:hover {
    color: rgb(192 192 192 / 50%);
}

dialog.extension-dialog>div.footer>.controls input:hover+i {
    color: rgb(192 192 192 / 50%);
}

/*#endregion group */
body.ayanoglu-modal * {
    pointer-events: none !important;
    opacity: 0.9 !important;
}

/*#region group */
body.ayanoglu-modal dialog[class~="control"]:not([class~="pinned"]) {
    pointer-events: auto !important;
    opacity: 1 !important;
}

body.ayanoglu-modal dialog[class~="control"]:not([class~="pinned"]) * {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/*#endregion group */
body.ayanoglu-modal dialog[class~="control"]~* {
    pointer-events: none;
    opacity: 0.9 !important;
}

.modal-dialog {
    height: fit-content !important;
    min-height: 10px !important;
    background-color: var(--brand-color-complemantery-tint-9) !important;
}

.modal-dialog .header div {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.modal-dialog .body {
    height: auto !important;
    min-height: 10px !important;
    padding-top: 8px !important;
}

.modal-dialog .body input {
    padding: 8px 8px 8px 8px;
}

.modal-dialog .body button {
    margin-left: 16px;
    padding: 4px 16px 4px 16px;
}

.confirm-dialog .body .text {
    padding: 8px 8px 16px 8px;
    font-size: 0.98rem;
    width: 100%;
    box-sizing: border-box;
    order: 3;
}

.confirm-dialog .header {
    background-color: var(--brand-color-tint-0) !important;
    color: var(--brand-color-shade-9);
}

.confirm-dialog .header div {
    font-size: 1.03rem !important;
}

.confirm-dialog .body .commands {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
    padding: 0px 8px;
    order: 5;
    > div {
        cursor: pointer;
        color: blue;
    }
}

.confirm-dialog .body .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
    padding: 0px 8px;
    order: 10;
}

.confirm-dialog .body .buttons button {
    margin-left: 8px;
    margin-right: 8px;
    padding: 4px 16px 4px 16px;
    font-size: 0.97rem;
}

.prompt-dialog .body button {
    margin-left: 0px;
}

.prompt-dialog .body textarea {
    height: 180px;
    width: -webkit-fill-available;
}

/*/////////////////////////////////// end dialog & panel style  ////////////////////////////////////////////////////////*/
div.pop-notification {
    background-color: #B2EBF2;
    bottom: 8px;
    left: 8px;
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-box-shadow);
    padding: 16px;
    z-index: 1000000;
    position: fixed;
    transition: transform 0.3s linear;
    transform: translateY(300px);
}

div#VJ0EpjkXo {
    z-index: 1000000;
    position: fixed;
    bottom: 0px;
    left: 8px;
    pointer-events: auto !important;
    opacity: 1 !important;
    max-width: 300px;
}

div#VJ0EpjkXo * {
    pointer-events: auto !important;
    opacity: 1 !important;
}

div#VJ0EpjkXo>div {
    background-color: #B2EBF2;
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-box-shadow);
    padding: 16px;
    margin-bottom: 8px;
    transition: transform 0.5s linear;
    width: inherit;
    overflow-x: clip;
    position: relative;
}

div#VJ0EpjkXo>div>div {
    font-family: 'Roboto';
    font-size: 14px;
    width: inherit;
    text-overflow: ellipsis;
    line-height: 23px;
}

div#VJ0EpjkXo>div>i {
    position: absolute;
    right: 0px;
    top: 0px;
    line-height: 16px;
    padding: 4px;
}

div#VJ0EpjkXo>div>i:before {
    font-weight: normal;
    font-size: 18px;
    opacity: 0.2;
}

div#VJ0EpjkXo>div:hover>i:before {
    opacity: 0.7;
}

.centered {
    margin: 10%;
    z-index: 1000003363;
    width: -webkit-fill-available !important;
    top: auto !important;
    bottom: auto;
    right: auto;
    left: auto !important;
    box-sizing: border-box;
    height: 80%;
}

.centered.large {
    margin: 10%;
}

i.material-icons.actions {
    color: var(--brand-color);
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 50%;
    padding: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    border-image: initial;
    margin-right: 16px;
    font-size: 20px;
}

dialog.control .contact-form {
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 100%;
}

dialog.control.min-controls {
    border-top-right-radius: 1px !important;
    border-top-left-radius: 1px !important;
}

.extension-dialog.contact-editor-dialog {
    height: 600px;
}

dialog.control.contact-editor-dialog .body {
    flex-grow: 2;
}

dialog.control.contact-editor-dialog .body #connected-account {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: default;
    justify-content: space-around;
}

dialog.control.contact-editor-dialog .body #connected-account>div {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0px !important;
    position: relative;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child {
    flex-direction: row;
    align-items: center;
    border: 1px solid rgb(233 233 233);
    border-radius: 4px;
    padding: 4px 8px;
    width: -webkit-fill-available;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div.user-info {
    width: -webkit-fill-available;
    justify-content: space-between;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child {
    border-width: 0px;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div.user-info>div:nth-child(2) {
    flex-grow: 4;
    align-items: flex-start;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:first-child:after {
    margin-left: 8px;
    margin-top: 4px;
    font-size: 16px;
    color: rgb(192 192 192);
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child {
    position: absolute;
    transform-origin: top;
    transform-style: flat;
    transform: scaleY(0);
    background-color: white;
    top: 36px;
    border-radius: var(--drop-border-radius);
    box-shadow: var(--pop-box-shadow);
    background-color: var(--pop-box-background-color);
    opacity: 0;
    transition: var(--pop-transition);
    left: 0px;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child.pop {
    transform: scaleY(1);
    opacity: 1;
    z-index: 1000;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child>div {
    padding: 8px 16px 8px 8px;
    margin: 0px;
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child>div:hover {
    background-color: rgb(0 0 0 / 0.03)
}

dialog.control.contact-editor-dialog .body #connected-account>div:first-child>div:last-child>div~div {
    border-top: 1px solid gainsboro;
}

dialog.control.contact-editor-dialog .body #connected-account .user-info * {
    font-size: 97%;
    user-select: none;
    cursor: default;
}

dialog.control.contact-editor-dialog .body #connected-account .user-info img {
    height: 24px
}

dialog.control.contact-editor-dialog .body #connected-account div.user-info>div:nth-child(2)>div:nth-child(1) {
    max-width: 100% !important;
}

dialog.control.contact-editor-dialog .body #connected-account .user-info .name-holder {
}

dialog.control.contact-editor-dialog .body #connected-account div.user-info>div:nth-child(2) {
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min-content;
    margin: 0px;
}

dialog.control.min-controls .body {
}

dialog.control.min-controls .header {
    background-color: var(--brand-color-tint-7) !important;
}

dialog.control.min-controls .header i {
}

dialog.control.min-controls .header div {
}

dialog.control.min-controls .header i, dialog.control.min-controls .header div {
}

dialog.control.min-controls .header i.collapse {
    display: none;
}

dialog.control .contact-form>div+div {
    display: flex;
    flex-direction: column;
    margin-top: 16px !important;
}

dialog.control .contact-form>div.command-row {
    flex-grow: 0;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 8px !important;
    margin-top: 16px !important;
}

dialog.control .contact-form>div>div:first-child {
    margin-bottom: 8px !important;
    font-weight: 500;
    font-size: 1.01rem !important;
    color: #a1a1e1;
}

/*#region group */
dialog.control .contact-form input {
    height: 100%;
    width: 100%;
    box-sizing: border-box !important;
}

dialog.control .contact-form textarea {
    height: 100%;
    width: 100%;
    box-sizing: border-box !important;
}

/*#endregion group */
dialog.control.simple-list-editor-dialog.collapsed {
    min-height: var(--collapsed-height) !important;
    max-height: var(--collapsed-height) !important;
    height: var(--collapsed-height) !important;
}

dialog.control.simple-list-editor-dialog>div.body {
    padding: 0px !important;
    flex-grow: 2;
}

dialog.control.simple-list-editor-dialog .list-items {
    display: block !important;
    max-height: 400px;
    padding: 0px !important;
    width: -webkit-fill-available;
}

dialog.control.simple-list-editor-dialog .list-items>div {
    display: flex;
    align-items: center;
    padding-left: 0px;
    width: 100%;
    border-bottom: 1px solid hsl(0deg 0% 0% / 5%) !important;
}

dialog.control.simple-list-editor-dialog .list-items>div.invisible {
    visibility: hidden;
    width: 0px !important;
    height: 0px !important;
    border-width: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

dialog.control.simple-list-editor-dialog .list-items>div:hover {
    background-color: #fafafa;
}

dialog.control.simple-list-editor-dialog .list-items>div>div {
    padding: 0px 8px;
    font-size: 0.99rem !important;
    border: 0px !important;
    display: flex;
    align-items: center;
}

dialog.control.simple-list-editor-dialog .list-items>div>div:last-child {
    width: -webkit-fill-available;
    border-left-color: transparent;
}

dialog.control.simple-list-editor-dialog .list-items>div>div>input {
    transform: scale(1.4);
    margin: 4px 8px;
}

.extension-dialog .header i.build {
    font-size: 20px;
}

/*#region begin for controls on desktop.js */
.E1X16X6mi {
}

.E1X16X6mi .body {
}

.E1X16X6mi .body>div>div {
    margin: 16px;
}

.E1X16X6mi button {
    font-size: 0.89rem !important;
    padding: 4px 8px !important;
    line-height: 1rem !important;
}

/*#endregion for controls on desktop.js */
.admin-tools-dialog .body .controls button {
    margin: 8px;
}

.admin-tools-dialog .body .controls {
    display: flex;
    flex-direction: row;
}

.admin-tools-dialog .body .table {
    display: table;
}

.admin-tools-dialog .body .table>div {
    display: table-row;
}

.admin-tools-dialog .body .table>div:hover {
    background-color: rgb(0 0 0 / 3%);
}

.admin-tools-dialog .body .table>div>div {
    display: table-cell;
    padding: 4px !important;
    vertical-align: middle;
}

/*#region group */
.fa-sign-out:before {
    content: "\f2f5";
}

.sign-out-fa:after {
    content: "\f2f5";
}

/*#endregion group */
.header[class^="fa-"] {
    color: var(--header-button-color);
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgb(0 0 0 / 0%);
    border-radius: 50%;
    padding: 4px;
    margin-right: 16px;
    font-size: 20px;
}

.header[class^="fa-"]:hover {
    box-shadow: 1px 1px 4px 2px #dcdcdc;
    background-color: rgb(220 220 220 / 22%);
    border: 1px solid rgb(0 0 0 / 6%);
}

.header[class^="fa-"]:active {
    box-shadow: 1px 1px 2px 1px #dcdcdc;
    background-color: rgb(0 0 0 / 4%);
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }

    100% {
        -webkit-transform: rotate (359 deg);
        transform: rotate(359deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }

    100% {
        -webkit-transform: rotate (359 deg);
        transform: rotate(359deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

.header.fa-google:before {
    font-family: "FontAwesome Brands" !important;
    content: "\f1a0";
    font-size: 21px;
    opacity: 0.7;
    line-height: unset;
}

dialog.control.google-dialog>.header {
    background-color: var(--brand-color-complemantery-tint-9) !important;
}

dialog.control.google-dialog .body>div:first-child {
    padding: 8px;
}

dialog.control .body .service-items {
    max-width: 400px;
    padding: 16px !important;
}

dialog.control .body .service-items:empty {
    display: none;
}

dialog.control .service-items>div>div #toggle {
    height: 100px;
    position: relative;
}

dialog.control .service-items>div>div #toggle.spin+div button {
    pointer-events: none;
    opacity: 0.5;
}

dialog.control .spin {
    opacity: 0.5 !important;
}

[class~="gaenjeiacglggodkkcdfmlcbhcdehdma"].spin {
    position: relative;
}

[class~="gaenjeiacglggodkkcdfmlcbhcdehdma"].spin:before, #VyAJvK6Sj.spin:before, dialog.control .spin:before {
    font-family: "FontAwesome Solid" !important;
    content: "\f110";
    content: "\f1ce";
    font-size: 27px;
    position: absolute;
    color: #b2b2ff;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    o--animation: fa-spin 2s infinite linear;
    -moz-animation: fa-spin 2s infinite linear;
    right: 4px;
}

dialog.control .spin-bgr {
    min-width: 16px;
    min-height: 16px;
    display: block;
}

dialog.control.spin-bgr.freeze.spin * {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.7 !important;
}

dialog.control.spin-bgr.spin {
    background-image: url(/graphics/web/ani/loading-16.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-blend-mode: multiply;
}

dialog.control.spin-bgr.spin.right {
    background-position-x: right !important;
}

dialog.control.spin-bgr.spin:before {
    opacity: 0 !important;
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
}

dialog.control.spin-before {
}

dialog.control .spin-img {
    width: 16px;
}

dialog.control .spin-img.spin:before {
    position: static;
    opacity: 0 !important;
    animation: none;
    -webkit-animation: none;
    -o-animation: none;
    -moz-animation: none;
    font-size: inherit !important;
}

dialog.control .spin.icon-center:before {
    left: 50%;
    top: 50%;
}

dialog.control .spin-text {
    background-image: none !important;
    position: relative;
    padding-left: 20px !important;
}

dialog.control .spin-text.spin:before {
    top: auto;
    right: auto;
    left: 0px;
}

dialog.control>div.body.spin {
    background-image: url(/graphics/web/ani/loading-16.gif) !important;
    background-image: url(/graphics/web/ani/flow.gif) !important;
    background-size: 32px;
    background-repeat: repeat !important;
    background-image: none !important;
}

dialog.control>div.body.spin-back.spin {
    background-image: url(/graphics/web/ani/loading-16.gif) !important;
    background-size: 32px;
    background-repeat: no-repeat !important;
}

dialog.control>div.body.spin-flow.spin {
    background-image: none !important;
}

dialog.control>div.body.spin:before {
    left: 50%;
    top: 50%;
    font-size: 32px;
    color: hsl(240deg 100% 71%);
    display: none;
}

/*#region group */
dialog.control div.flow-progress:after {
    content: "";
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background-repeat: repeat !important;
    background-image: url(/graphics/web/ani/flow.gif) !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
    cursor: progress;
}

dialog.control>div.body.spin:after {
    content: "";
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background-repeat: repeat !important;
    background-image: url(/graphics/web/ani/flow.gif) !important;
    width: 100% !important;
    height: 100% !important;
    /* opacity: 0.3 !important; */
    z-index: 1 !important;
    cursor: progress;
}

/*#endregion group */
dialog.control .service-items>div.service-connector>div>#toggle>div {
    padding: 0px;
    height: 100px;
    margin: 0px;
    z-index: 10;
    opacity: 1;
    transition: height 0.1s linear, opacity 0.1s linear;
    position: absolute;
}

dialog.control .service-items>div.service-connector>div>#toggle>#user-info {
    display: flex;
    width: -webkit-fill-available;
    height: 0px !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

dialog.control .service-items>div.service-connector>div>#toggle>#user-info:after {
    display: none;
}

dialog.control .service-items>div.service-connector>div>#toggle>#details {
    display: flex;
    width: -webkit-fill-available;
    line-height: 1.5rem;
}

dialog.control .service-items>div.service-connector.signed>div>div>#details {
    height: 0px !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

dialog.control .service-items>div.service-connector.signed>div>#toggle>#user-info {
    height: 100px !important;
    opacity: 1 !important;
}

dialog.control .service-items>div>div>div>#user-info>div+div {
    padding-left: 16px;
}

dialog.control .service-items div.service-connector.signed #user-info .sign-out-fa:after {
    display: none;
}

/****
service on header
*/
dialog.control .body div.user-info.spin:before {
    font-size: 21px;
}

dialog.control .header div.guest .spin:before {
    /* display: none !important; */
    opacity: 0;
}

/*#region group */
dialog.control .header div.guest div.user-info .controls {
    display: none;
}

dialog.control .header div.guest div.user-info #details {
    display: none;
}

/*#endregion group */
dialog.control .header div.guest div.user-info .fa-sign-out:before {
    display: block;
    color: blue;
}

dialog.control .header div.guest div.user-info>div:nth-child(2)>div:nth-child(1)>div {
    overflow-x: clip;
    text-overflow: ellipsis;
    max-width: 70px;
    white-space: nowrap;
    margin-left: 4px;
    display: flex;
    align-items: center;
}

dialog.control .header div.guest div.user-info>div:nth-child(2)>div:nth-child(1)>i {
    padding: 0px;
    margin: 0px;
}

dialog.control .header div.guest div.user-info {
    order: 5;
    margin-left: 8px;
}

dialog.control .header div.guest div.user-info * {
    font-size: 0.93rem;
    font-weight: 400;
    color: inherit !important;
}

/*#region group */
dialog.control .header div.guest div.user-info {
    display: flex !important;
    align-items: center !important;
    width: fit-content;
    justify-content: flex-end;
    flex: 0 3;
}

dialog.control .header div.guest div.user-info>div {
    display: flex !important;
    align-items: center !important;
    width: fit-content;
}

/*#endregion group */
dialog.control .header div.guest div.user-info>div {
    margin-right: 4px;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2) {
    padding-left: 2px !important;
    margin-left: 0px !important;
    flex-direction: row;
    margin-top: 0px;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2)>div:nth-child(1) {
    display: flex;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2)>div:nth-child(2) {
    display: none;
}

dialog.control .header div.guest>div.user-info>div:nth-child(2)>i {
    margin-left: 0px !important;
    padding-left: 4px;
    padding-right: 4px;
    color: inherit !important;
}

dialog.control .header div.guest div.user-info div img {
    max-width: 23px;
    border-radius: 4px;
}

dialog.control .header div.guest div.service-connector.signed #user-info img {
    height: 20px;
}

dialog.control .service-items div.controls {
    padding: 8px 4px 8px 4px;
}

dialog.control .service-items div.controls #contact-works {
    display: none;
}

dialog.control .service-items>div.service-connector.signed div.controls #contact-works {
    display: inline-block;
}

dialog.control .body .controls button {
    background-color: var(--button-bg-color) !important;
    color: var(--button-color) !important;
    font-size: 1.01rem;
    border-radius: 8px;
    padding: 8px 16px 8px 16px;
    line-height: 1.3rem;
    border: 1px solid var(--brand-color-complemantery-tint-7);
    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 7%);
}

dialog.control .body .controls button:hover {
    background-color: var(--button-hover-bg-color) !important;
}

dialog.control .body .controls button:active {
    background-color: var(--button-active-bg-color) !important;
    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 7%);
}

dialog.extension-dialog.contact-list-dialog>.header {
    background-color: var(--brand-color-complemantery-tint-8) !important;
}

dialog.extension-dialog.contact-list-dialog .list-items {
    --row-height: 32px;
    display: table;
    width: 100%;
    transition: none !important;
}

dialog.extension-dialog.contact-list-dialog .list-items>div.sink {
    display: none;
}

dialog.extension-dialog.contact-list-dialog .list-items>div {
    display: table-row;
}

dialog.extension-dialog.contact-list-dialog .list-items>div.columns {
    background-color: rgb(244 244 244) !important;
    position: sticky;
    top: 0px;
    z-index: 10;
}

dialog.extension-dialog.contact-list-dialog .list-items>div[data-control-client-key] {
    cursor: pointer;
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 4px 0px 4px !important;
    color: rgb(128, 128, 128);
    height: var(--row-height);
    width: auto;
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div:first-child {
    width: 32px;
    padding: 0px;
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div.service-hub {
    width: 20px;
    position: relative;
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div.service-hub>div#expander {
    position: relative;
    padding-left: 8px;
}

dialog.control div.pop-menu-container {
    position: fixed;
    z-index: 10;
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-box-shadow);
    background-color: var(--pop-box-background-color);
    opacity: 0;
    transform-origin: top;
    transform: var(--pop-up-transform);
    transition: var(--pop-transition);
}

dialog.control div.pop-menu-container.pop {
    opacity: 1;
    transform: scale(1, 1);
}

dialog.control div.pop-menu-container>div {
    padding: 4px 12px;
    font-size: 0.97rem;
    min-width: 96px;
    margin: 0px;
}

dialog.control div.pop-menu-container.no-cursor>div {
    cursor: default;
}

dialog.control div.pop-menu-container>div+div[data-client-key] {
    border-top: 1px solid rgb(0 0 0 / 3%);
}

dialog.control div.pop-menu-container>div:hover {
    background-color: hsl(0deg 0% 97%);
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div.service-hub>div#expander>div {
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div.service-hub>div#expander.pop>div {
    opacity: 1;
    transform: scale(1, 1);
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div.service-hub>div#expander>div>div {
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div.service-hub>div#expander>div>div:hover {
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div:first-child img {
    height: var(--row-height);
    transform-origin: center;
    transform-style: flat;
    transform: scale(1);
    transition: all 0.1s linear;
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div:first-child input {
    transform-origin: center;
    transform-style: flat;
    transform: scale(0);
    margin: 12px;
    position: absolute;
    opacity: 0;
    transition: all 0.1s linear;
}

/*#region group */
dialog.extension-dialog.contact-list-dialog .list-items>div.checked>div:first-child input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

dialog.extension-dialog.contact-list-dialog .list-items>div>div:first-child:hover input {
    z-index: 10;
    transform: scale(1.5);
    opacity: 1;
}

/*#endregion group */
dialog.extension-dialog.contact-list-dialog .list-items>div.checked>div:first-child img, dialog.extension-dialog.contact-list-dialog .list-items>div>div:first-child:hover img {
    transform: scale(0);
    opacity: 0;
}

dialog.extension-dialog.contact-list-dialog .list-items>div:nth-child(odd) {
    background-color: #f0f8ff75;
}

dialog.extension-dialog.contact-list-dialog {
    height: 90% !important;
    right: 0px;
}

dialog.extension-dialog.contact-list-dialog {
    transform-origin: top left;
    transform-style: flat;
    transform: scale(1);
    max-width: 400px;
}

dialog.extension-dialog.contact-list-dialog>div.body {
    padding: 0px !important;
}

dialog.extension-dialog.contact-list-dialog>div.body .service-items {
    padding: 0px !important;
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: white;
}

dialog.extension-dialog.contact-list-dialog>div.body .service-items #add-service {
    padding: 8px;
}

dialog.extension-dialog.contact-list-dialog>div.body .select-account-dialog {
    width: -webkit-fill-available !important;
}

dialog.extension-dialog.contact-list-dialog.check-in {
    transform: scale(0);
    left: 200px !important;
    top: 20px !important;
    transition: all 0.5s ease-in-out !important;
}

dialog.control .tool-box {
    font-weight: 400;
    color: blue;
}

dialog.control .body .base-table {
    display: table;
    border-spacing: 0px 0px;
    width: 100%;
}

dialog.control .body .base-table>div {
    display: table-row;
}

dialog.control .body .base-table>div.header {
    background-color: rgb(219 220 220) !important;
    position: sticky;
    top: 0px;
    z-index: 100;
}

dialog.control .body .base-table.alternate>div>div {
    border-top: 1px solid gainsboro;
}

dialog.control .body .base-table.alternate>div:not([data-control-client-key]) {
    background-color: aliceblue;
}

dialog.control .body .base-table>div>div {
    display: table-cell;
    padding: 8px 16px;
}

dialog.control.sync-dialog .body {
    padding: 0px !important;
}

dialog.control.sync-dialog .body .list-items {
    display: block;
}

dialog.control.sync-dialog .body .list-items>div {
    display: table;
    table-layout: fixed;
    width: 100%;
}

dialog.control.sync-dialog .body .list-items>div>div {
    display: table-cell;
    width: -webkit-fill-available;
}

dialog.control.sync-dialog .body .list-items>div>div.index {
    width: 48px;
    text-align: center;
    box-sizing: border-box;
}

dialog.control.sync-dialog .body .list-items #expander {
    position: absolute;
    transition: all 0.1s linear;
    right: 8px;
}

dialog.control.sync-dialog .body .list-items #expander.expanded {
    transform: rotateX(180deg);
}

dialog.control .hyper-link {
    color: var(--theme-color-complete-active);
    cursor: pointer;
}

dialog.control .hyper-link[disabled] {
    opacity: 0.5;
}

dialog.control .hyper-link:hover {
    color: var(--theme-color-complete-light);
}

.popped-win {
    transform-origin: top left;
    transform-style: flat;
    /* transform: scale(0); */
    /* transition: all 0.5s ease-in-out !important; */
}

.popped-win.out {
    transform: scale(1) translate(20%, 10%);
    left: unset !important;
    top: unset !important;
    transition: all 0.5s ease-in-out !important;
}

.common-settings-dialog {
    --service-row-height: 48px;
    width: 70% !important;
    height: 80% !important;
}

.common-settings-dialog .header {
    background-color: #8bd2b8 !important;
}

.common-settings-dialog .body {
    padding: 0px !important;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.common-settings-dialog .body>.detail {
    border-left: 2px solid hsl(0deg 0% 0% / 12%) !important;
    padding-left: 0px !important;
}

.common-settings-dialog .accounts>div {
    margin: 16px 0px;
}

.common-settings-dialog .user-info {
    border-radius: 4px;
    border: 1px solid gainsboro;
}

dialog.control .master-detail {
    display: flex;
    height: 100%;
}

dialog.control .master-detail>div {
    padding: 0px;
    margin: 0px !important;
}

dialog.control .master-detail>.master {
    background-color: var(--master-background-color);
    color: rgb(64 64 64);
}

dialog.control .master-detail>.detail .detail-header {
    display: flex;
    justify-content: space-between;
    background-color: #d5ede5;
    margin-left: -16px;
    padding-left: 16px;
    padding-right: 8px;
    border-radius: unset;
}

dialog.control .body .master-detail>.detail .detail-header .text {
    font-weight: 500;
    font-size: 1.03rem;
    padding-bottom: 4px;
    padding-top: 4px;
}

dialog.control .body .master-detail>.detail .detail-header .box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

dialog.control .body .master-detail>.detail .detail-header .box i {
    cursor: pointer;
    margin-left: 16px;
    color: rgb(80 93 255);
}

dialog.control .body .master-detail>.detail .detail-header .box i:before {
    font-size: 17px;
}

dialog.control.minimized .body .master-detail>.detail .header {
    font-weight: 500;
    font-size: 1.01rem;
    border-bottom: 1px solid rgb(139 210 184 / 22%);
    padding-bottom: 4px;
    padding-top: 4px;
}

dialog.control .body .master-detail>.detail .container {
    display: flex;
    flex-direction: column;
}

dialog.control .body .dash-board {
    display: flex;
    flex-direction: row;
    flex-grow: 5;
}

dialog.control .body .dash-board>div {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

dialog.control .body .dash-board>div:nth-child(n+2) {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgb(0 0 0 / 3%);
}

dialog.control .body .dash-board>div>section {
    background: rgb(255 255 255 / 96%);
    margin-bottom: 16px;
    padding: 8px;
}

dialog.control .body .dash-board>div>section>h3 {
    font-weight: 500;
    color: orangered;
    margin: 0px;
    font-size: 0.99rem;
}

dialog.control .body .dash-board>div>section>div.more {
    margin: 4px 4px;
    text-align: right;
    font-size: 0.93rem;
    color: rgb(157 156 195);
}

dialog.control .body .master-detail>.detail .container:empty {
    display: block;
}

dialog.control .body .master-detail>.master>.menu-items {
    user-select: none;
}

dialog.control .body .master-detail>.master>.menu-items>div {
    padding: 12px 16px 12px 32px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

dialog.control .body .master-detail>.master>.menu-items>div+div {
    border-top: 1px solid rgb(0 0 0 / 0.03);
}

dialog.control .body .master-detail>.master>.menu-items>div.selected {
    background-color: rgb(0 0 0 / 3%);
}

dialog.control .body .master-detail>.master>.menu-items>div:hover {
    background-color: hsl(0deg 0% 0% / 25%);
    color: white;
}

#k_s418YT_Hzj {
    background-color: rgb(255 255 135);
    position: fixed;
    display: flex;
    top: 50px;
    right: 50px;
    z-index: 0;
    width: fit-content;
    opacity: 0;
    padding: 2px;
    border-radius: 50%;
    border-top-left-radius: 50%;
    transition: all 0.1s linear;
}

/*#region this is pop menu */
div#k_s418YT_Hzj>div {
    background-color: aliceblue;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 22px;
    opacity: 0;
    transform-origin: var(--pop-up-transform-origin);
    transform: var(--pop-up-transform);
    transition: var(--pop-transition);
}

div#k_s418YT_Hzj>div.pop {
    opacity: 1;
    transform: scale(1, 1);
}

div#k_s418YT_Hzj>div>div {
    white-space: nowrap;
    padding: 8px 16px;
    cursor: default;
}

div#k_s418YT_Hzj>div>div:hover {
    background-color: rgb(0 0 0 / 1%);
}

.high-light {
    background-color: hsl(60deg 100% 50% / 10%);
}

dialog.control.health-services {
    background-color: hsl(214deg 41% 98%) !important;
}

dialog.control.health-services>.header {
    background-color: rgb(0 0 0 / 5%) !important;
}

dialog.control.health-services>.header .guest {
    flex-grow: 0.2 !important;
}

dialog.control.health-services>.header .guest .user-info .name-holder {
    overflow-x: visible !important;
}

dialog.control.health-services>.header .guest .user-info>div:nth-child(2)>div:nth-child(1) {
    justify-content: space-between;
    max-width: unset;
}

.health-services .visit-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background: rgb(255 255 255 / 75%);
}

@media only screen and (max-width: 800px) {
    .health-services .visit-form {
        flex-wrap: nowrap;
        flex-direction: column;
    }
}

.health-services .visit-form.collapsable.show {
    height: 478px;
    height: 100%;
}

.health-services .visit-form>div:nth-child(1) {
    padding-right: 5%;
    flex-basis: 45%;
}

.health-services .visit-form>div:nth-child(2) {
    flex-basis: 50%;
}

.health-services .visit-form>div.commands {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    align-items: flex-start;
}

.health-services .visit-form #treathments #treathment-items {
    margin-bottom: 16px;
}

.health-services .visit-form #treathments #treathment-items>fieldset ol {
    padding-left: 16px;
    list-style: auto;
}

.health-services .visit-form #treathments #treathment-items>fieldset ol>li {
    color: grey;
}

.health-services .visit-form #treathments #treathment-items>div.item-editor {
    margin: 16px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.health-services .visit-form #treathments #treathment-items>div.item-editor>div {
    margin-right: 8px;
    background-color: aliceblue;
}

.health-services .visit-form #treathments #treathment-items>div.item-editor>i {
    cursor: pointer;
    margin: 8px 8px;
}

.health-services .visit-form #treathments #treathment-items>div.item-editor>i:before {
    color: coral;
}

.health-services .visit-form #treathments #treathment-items>fieldset>div {
    color: #808081;
    font-size: 0.96rem;
}

.health-services .visit-form #treathments #treathment-items>fieldset+fieldset {
    margin-top: 16px;
}

.health-services .visit-items {
    display: table;
    table-layout: fixed;
    width: 100%;
    background-color: #ffffffcf;
}

.health-services .visit-items.slide-in {
    display: none;
}

.health-services fieldset {
    border-radius: 4px;
    border: 1px solid gainsboro;
    padding: 8px 16px;
}

.health-services fieldset>legend {
    color: rgb(118 118 249);
    padding: 0px 8px;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.health-services fieldset>legend>div {
    margin-right: 8px;
}

.health-services fieldset>legend>i {
    flex-grow: 1;
    margin-left: 8px;
    color: coral;
    cursor: pointer;
}

.health-services .visit-items>div {
    display: table-row;
}

.health-services .visit-items>div:nth-child(n+2) {
    cursor: pointer;
}

.health-services .visit-items>div:first-child>div {
    background-color: rgb(0 0 0 / 19%);
    color: white;
}

.health-services .visit-items>div:nth-child(odd) {
    background-color: rgb(0 0 0 / 1%);
}

.health-services .visit-items>div>div {
    display: table-cell;
    padding: 4px 8px;
    color: rgb(128 128 128 / 1);
}

.health-services .visit-items:empty {
    display: block;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 4px;
}

.health-services .visit-items:empty:before, .health-services .conversation-items:empty:before, dialog.control .body .master-detail>.detail .container:empty:before {
    color: silver;
    font-style: italic;
}

.health-services .flex-grid {
    display: flex;
    flex-direction: column;
}

.health-services .flex-grid>div {
    margin-top: 8px;
    margin-bottom: 8px;
}

.health-services .flex-grid>div>div {
}

.health-services .flex-grid>div>div:first-child {
    color: #57a1df;
    margin-bottom: 8px;
}

.health-services .flex-grid div[contenteditable="true"] {
    /* line-height: 21px !important;
     padding: 4px;
  background-color: white;
  display: flex;
  min-height: 36px;
  align-items: center;
  flex-wrap: wrap; */
}

.health-services .flex-grid input, .health-services .flex-grid textarea, .health-services .flex-grid *:not([contenteditable="true"])>div[contenteditable="true"] {
    box-sizing: border-box;
    width: 100%;
}

.health-services .flex-grid textarea {
    height: 120px;
    line-height: 23px;
}

.health-services .master-detail>.master {
    flex-grow: unset;
    flex-basis: 20%;
    background-color: rgb(248 249 255);
    background-color: rgb(255 255 255 / 64%);
    color: rgb(64 64 64);
}

@media only screen and (max-width: 600px) {
    dialog.control .body .master-detail {
        width: max-content;
    }

    dialog.control .master-detail>.master {
        /* display: none; */
    }

    dialog.control .master-detail>.detail {
        flex-basis: 100%;
    }
}

.health-services {
    padding: 0px !important;
}

.health-services .master-detail>.detail {
    flex-grow: unset;
    flex-basis: 80%;
}

dialog.control .master-detail>.detail {
    display: flex;
    flex-direction: column;
    flex-grow: 4;
    padding: 0px;
    padding-left: 2px;
    margin-left: 0px;
    /* padding-top: 1px; */
}

dialog.control .master-detail>.detail>div[data-protected-container] {
    height: 100%;
}

dialog.control .master-detail>.detail i#reload {
    position: absolute;
    z-index: 110000;
    color: white;
    top: 8px;
    right: 8px;
    cursor: pointer;
}

dialog.control .master-detail>.detail>.header {
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    background: rgb(255 255 255 / 96%);
    padding-right: 8px;
}

dialog.control .master-detail>.detail>.header>.text {
    padding-left: 0px;
    color: coral;
    display: flex;
    justify-content: space-between;
    background: rgb(255 255 255 / 96%);
}

dialog.control .master-detail>.detail>.header>i {
}

dialog.control .master-detail>.detail>.header>i:before {
    color: gray;
    font-weight: normal;
    font-size: 16px;
}

.health-services .master-detail>.detail>.header .user-info {
}

/*#region group */
.health-services .master-detail>.detail>.header #contact-services {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.health-services .master-detail>.detail>.header #contact-groups {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

/*#endregion group */
.health-services .master-detail>.detail>.header #contact-services>div {
    font-weight: 400;
}

.health-services .master-detail>.detail>.header #contact-groups.spin:before {
    left: 8px;
    font-size: 21px;
    top: 8px;
}

.health-services .master-detail>.detail>.header #contact-groups:after {
    margin-left: 8px;
    font-size: 16px;
}

.health-services .master-detail>.detail>.header #contact-groups>div {
    color: hsl(240deg 93% 34%);
    margin-left: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgb(219 226 255 / 30%);
    white-space: nowrap;
    font-weight: 400;
}

.health-services .master-detail>.detail>.header .user-info img {
    height: 36px;
    max-height: 36px;
    border-radius: 4px;
}

.health-services .master-detail>.detail>.header .user-info .name-holder {
    overflow-x: visible;
}

.health-services .conversation-items {
}

.health-services .conversation-items>.item {
    margin-bottom: 16px;
    border: 1px solid gainsboro;
    border-radius: 4px;
    margin-top: 8px;
    padding: 16px;
    position: relative;
    background-color: rgb(255 255 255 / 90%);
}

.health-services .conversation-items>.item>legend {
    background-color: rgb(255 255 255 / 90%);
    padding: 4px;
}

.health-services .list-container>div.eof {
    font-style: italic;
    color: darkgrey;
    background: rgb(255 255 255 / 96%);
    padding: 4px 0px !important;
    border-radius: 4px;
    display: block;
}

.health-services .list-container>.item+div.eof {
    display: none;
}

.health-services .conversation-items>.item i.fa-edit {
    position: absolute;
    top: -14px;
    right: 2px;
    cursor: pointer;
}

.health-services .conversation-items>.item i.fa-edit:before {
    font-size: 16px;
    color: #fdb296;
    font-weight: normal;
}

.health-services .conversation-items>.item>.date {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
}

.health-services .conversation-items>.item>div.text {
}

/*#region group */
.extension-dialog .collapsable {
    height: 0px;
    transition: all 0.5s linear;
    overflow-y: hidden;
    padding: 16px;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0 !important;
    margin-bottom: 0px;
    border-radius: 8px;
}

.health-services .conversation-items>div.editor {
    height: 0px;
    transition: all 0.5s linear;
    overflow-y: hidden;
    padding: 16px;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0 !important;
    margin-bottom: 0px;
    border-radius: 8px;
}

/*#endregion group */
.health-services .conversation-items>.editor {
    display: flex;
    flex-direction: column;
}

.health-services .conversation-items>.editor>div:not([class~="commands"]) {
    height: 100%;
    display: flex;
    align-items: center;
}

.health-services .conversation-items>.editor>div:not([class~="commands"])>label {
    margin-right: 8px;
    color: blue;
    white-space: nowrap;
}

.health-services .conversation-items>.editor>div:not([class~="commands"])>label+* {
    margin-right: 24px;
}

/*#region group */
.extension-dialog .collapsable.show {
    height: 500px;
    padding-top: 16px;
    padding-bottom: 16px;
    opacity: 1 !important;
    margin-bottom: 32px;
}

.health-services .conversation-items>.editor.show {
    height: 500px;
    padding-top: 16px;
    padding-bottom: 16px;
    opacity: 1 !important;
    margin-bottom: 32px;
}

/*#endregion group */
.health-services .master-detail>.detail input {
    width: -webkit-fill-available !important;
}

.health-services .conversation-items>.editor textarea {
    width: 100%;
    height: -webkit-fill-available;
}

.health-services .conversation-items>.editor>.commands {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    align-items: baseline;
}

.health-services .commands button {
    padding-left: 32px !important;
    padding-right: 32px !important;
    white-space: nowrap;
}

.health-services .commands button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.health-services .commands button.spin:before {
    left: 8px !important;
    top: 7px !important;
    font-size: 16px !important;
    color: white;
}

div#V1K5FmQvi {
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

button#VyAJvK6Sj {
    padding-left: 32px;
    padding-right: 32px;
    background-color: coral;
}

div#WyAJvK6Sj {
    min-width: 50px;
}

div#WyAJvK6Sj>* {
    margin-left: 8px;
    white-space: nowrap;
    cursor: pointer;
}

#WyAJvK6Sj>div {
    color: blue;
}

#WyAJvK6Sj>i {
    color: #3bf141;
}

#VyAJvK6Sj.spin:before {
    left: 8px !important;
    top: 8px !important;
    font-size: 17px !important;
    color: white !important;
}

/*#region begin section control                                                        */
dialog.control.dash-board-view {
}

dialog.control.dash-board-view>div.body>div.flex-grid {
    margin-bottom: 32px !important;
    display: flex;
    width: -webkit-fill-available;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
}

dialog.control.dash-board-view>div.body>div.flex-grid>div {
    display: flex;
    flex-direction: column !important;
    width: -webkit-fill-available;
    /* width: auto; */
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 1% 2%;
    flex-basis: 46%;
}

dialog.control.dash-board-view>div.body>div.flex-grid>div:first-child {
    /* flex-basis: auto; */
}

dialog.control.dash-board-view>div.body>div.flex-grid>div:empty {
    flex-basis: 0%;
    /* flex-grow: 0; */
    /* width: auto; */
    /* flex-shrink: 1; */
}

dialog.control.dash-board-view>div.body>div.flex-grid>div:empty+div {
    flex-basis: auto;
    /* flex-grow: 0; */
    /* width: auto; */
    /* flex-shrink: 1; */
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell {
    --base-background-color: hsl(180deg 47% 97%);
    --base-h: 110deg;
    --base-s: 77%;
    --base-l: 97%;
    --base-background-color: hsl(var(--base-h) var(--base-s) var(--base-l));
    --lum: -4%;
    --base-border-color: hsl(var(--base-h) var(--base-s) calc(var(--base-l) + var(--lum)));
    --h-lum: 6%;
    --base-button-hover-bg-color: hsl(var(--base-h) var(--base-s) calc(var(--base-l) + var(--h-lum)));
    --base-editor-bg-color: hsl(var(--base-h) calc(var(--base-s) + 0%) calc(var(--base-l) + 3%));
    margin: unset;
    margin-bottom: 32px;
    /* flex-basis: unset; */
    overflow-x: clip;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    width: 100%;
}

.drop-target.drag-up {
    border-top-color: red !important;
    border-bottom-color: transparent !important;
}

.drop-target.drag-down {
    border-bottom-color: red !important;
    border-top-color: transparent !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#rows>div>input {
    padding-right: 32px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#rows>div>i#delete {
    color: red;
    opacity: 0.1;
    z-index: 1;
    cursor: default;
    padding: 4px 0px 4px 8px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#rows>div>div {
    width: -webkit-fill-available;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#rows>div {
    margin-bottom: 8px;
    align-items: center;
    margin-right: 24px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#date-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#date-row div {
    margin-right: 8px;
    color: darkslategray;
    font-weight: 500;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#rows {
    position: relative;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div#rows>i {
    position: absolute;
    right: 16px;
    bottom: 23px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#services-section {
    display: flex;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#services-section>div {
    display: flex;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div {
    margin: 0px 16px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor {
    background-color: var(--base-editor-bg-color);
    max-height: 0px;
    opacity: 0;
    overflow-y: hidden;
    transition: opacity 0.7s linear, max-height 0.7s ease-in-out;
    border-radius: inherit;
    border: 1px solid var(--base-border-color);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor.pop {
    opacity: 1;
    max-height: 500px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content div#editor>div {
    padding: 8px 16px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content {
    border: 1px solid var(--base-border-color);
    background-color: var(--base-background-color);
    border-radius: 9px;
    position: relative;
    /* display: block; */
    min-height: 24px;
    padding: 8px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content #services-section i {
    font-size: 20px;
    cursor: pointer;
    margin-right: 8px;
    height: 20px;
    width: 20px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content #services-section i.disabled {
    pointer-events: none;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content #services-section i.disabled:before {
    cursor: not-allowed;
    opacity: 0.3;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content #services-section i>div {
    position: absolute;
    right: -8px;
    top: -10px;
    font-size: 12px;
    color: coral;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content #services-section i.fa-star {
    color: #e1e0d8;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content #services-section i.fa-star:before {
    color: inherit;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content i#add-editor {
    position: absolute;
    right: -24px;
    bottom: 7px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head {
    display: flex;
    justify-content: space-between;
    padding: 0px;
    font-weight: normal;
    border-radius: 2px 2px 0px 0px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#text {
    padding: 8px 12px 8px 0px;
    color: rgb(115, 115, 115);
    font-weight: 600;
    letter-spacing: 0.01rem;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot {
    padding: 8px 4px 8px 0px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i {
    font-style: normal;
    position: relative;
    justify-content: flex-end;
    align-items: flex-start;
    border-radius: 4px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i:hover {
    color: hsl(0deg 2% 90% / 0%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i:hover:before {
    color: hsl(0deg 2% 20% / 62%);
    border-radius: inherit;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i > div.pop-menu {
    position: fixed;
    transform-origin: top;
    transition: transform 0.3s linear;
    transform: scaleY(0);
    z-index: 10;
    background-color: white;
    margin-right: 32px;
    box-shadow: var(--drop-box-shadow);
    border-radius: var(--pop-border-radius);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i > div.pop-menu.pop {
    transform: scaleY(1);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i > div.pop-menu > div {
    padding: 12px 16px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i > div.pop-menu > div + div {
    border-top: 1px solid hsl(0deg 0% 0% / 3%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#head>div#slot > i > div.pop-menu > div:hover {
    background-color: hsl(0deg 0% 0% / 3%);
}

dialog.control.dash-board-view>div.body:has(div.pop-menu) {
    z-index: 110 !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell input[type="datetime-local"] {
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row {
    display: flex;
    justify-content: flex-end;
    padding: 0px !important;
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#bottom-bar.command-row {
    margin-top: 8px;
    border-top: 1px solid var(--base-border-color);
    border-top-color: rgb(0 0 0 / 4%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row.space-between {
    justify-content: space-between;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button {
    /* background-color: transparent !important; */
    /* color: black !important; */
    box-shadow: none;
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-color: rgb(0 0 0 / 4%) !important;
    border-radius: 0px;
    color: hsl(171deg 2% 61%) !important;
    background-color: transparent !important;
    /* box-shadow: 1px 1px 1px hsl(0deg 0% 77% / 100%); */
    justify-content: center;
    display: flex;
    align-items: center;
    user-select: none;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#bottom-bar.command-row {
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#section-commands.command-row {
    margin-top: 8px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#bottom-bar.command-row button {
    background-color: hsl(0deg 0% 99% / 100%) !important;
    box-shadow: inset 0px 0px 1px 1px hsl(0deg 0% 99% / 100%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#bottom-bar.command-row button:hover {
    box-shadow: inset 0px 0px 3px 1px hsl(0deg 0% 97% / 100%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#section-commands.command-row button {
    border-width: 0px !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button+button {
    border-right-width: 0px !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button:hover {
    background-color: hsl(0deg 0% 98% / 100%) !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button:active {
    background-color: hsl(0deg 0% 100% / 48%) !important;
    box-shadow: inset 0px 0px 1px 1px hsl(180deg 22% 93% / 48%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button[disabled] {
    pointer-events: none;
    opacity: 0.5 !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button.wait {
    color: transparent !important;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div.command-row button.wait:before {
    font-family: "FontAwesome Solid" !important;
    content: "\f110";
    content: "\f1ce";
    font-size: 27px;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #b2b2ff;
    -webkit-animation: fa-spin 2s infinite linear;
    -o-animation: fa-spin 2s infinite linear;
    -moz-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    visibility: visible;
    font-size: 24px;
    inset: auto;
    color: rgb(203, 236, 231);
    opacity: 1 !important;
}

/*#region view */
dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view {
    padding: 8px 16px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view>div {
    position: relative;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view>div>i {
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    color: rgb(0 0 0 / 50%);
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view>div:hover>i {
    opacity: 1;
    ; }

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view>div+div {
    margin-top: 16px;
}

dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view div.date {
    font-weight: 500;
    color: hsl(135deg 79% 39%);
}

dialog.control.dash-board-view>div.body>div.flex-grid dialog.control.dash-board-view>div.body>div.flex-grid div.grid-cell div#content>div#view div.items {
    color: hsl(93deg 59% 29%);
}

/*#endregion section control                                                          */
div#Nk1jOgOLs {
    min-height: 100px;
}

div.fieldset-tabs {
}

div.fieldset-tabs fieldset {
    border-radius: 4px;
    border: 1px solid gainsboro;
    padding: 8px 16px;
    margin: 16px;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    position: relative;
}

div.fieldset-tabs fieldset>i {
    position: absolute;
    right: 8px;
    top: -8px;
    cursor: pointer;
    font-size: 20px !important;
    color: gray;
}

div.fieldset-tabs>fieldset>div.body.spin+i {
    display: none;
}

div.fieldset-tabs fieldset>legend {
    padding: 0px 8px;
    /* text-align: left; */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

div.fieldset-tabs fieldset>legend>div {
    border: 1px solid gainsboro;
    padding: 4px 16px;
    border-radius: 4px 4px 0px 0px;
    margin-right: 8px;
    margin-top: 8px;
    background-color: hsl(0deg 0% 96%);
    color: darkslategray;
    cursor: pointer;
    white-space: nowrap;
}

div.fieldset-tabs fieldset>legend>div.selected {
    background-color: hsl(0deg 0% 80%);
}

div.fieldset-tabs>fieldset>div.body {
    padding: 8px;
    position: relative;
}

div.fieldset-tabs>fieldset>div.body.spin:before {
    right: -8px;
    top: -16px;
    color: navy;
}

/*#region group */
div.fieldset-tabs>fieldset>div.body.spin:before {
    font-size: 20px !important;
}

div.fieldset-tabs fieldset>i {
    font-size: 20px !important;
}

/*#endregion group */
div.fieldset-tabs>fieldset>div.body>div {
}

div.fieldset-tabs>fieldset>div.body>div>button {
    margin-right: 16px;
    padding: 4px 16px 4px 16px;
    border-radius: 4px;
    line-height: 1.3rem;
}

html.prayer-win {
    transform-box: fill-box;
    overflow: hidden !important;
    transform: translate(-30px, -350px);
    width: 325px;
    height: 226px;
}

html.prayer-win>body {
    height: inherit;
    padding: 0px;
}

/*#region group */
div#main {
    /*#region conversation-panel-wrapper */
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
}

div#side {
    /*#region conversation-panel-wrapper */
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
}

/*#endregion group */
div#main {
    border-width: 0px;
    border-color: pink;
}

div#side {
    border-color: red;
}

div[data-testid] {
    border-width: 0px;
    border-style: dashed;
    border-color: transparent;
}

div[data-testid="drawer-left"] {
    border-color: blue;
}

div[data-testid="drawer-middle"] {
    border-color: yellow;
}

div[data-testid="drawer-right"] {
    border-color: red;
}

#app.hide div[data-testid="drawer-left"] {
    transition: none !important;
}

#app.hide div[data-testid="drawer-middle"] {
    flex: 0 0 100% !important;
    transition: none !important;
}

#app.hide div[data-testid="drawer-right"] {
    flex: 0 0 0% !important;
    transition: none !important;
}

#app.hide>div:nth-child(1)>div>div:nth-child(4) {
    flex: 0 0 70% !important;
    transition: none !important;
}

#app.hide>div>div>div:nth-child(3) {
    flex: 0 0 30% !important;
}

#app.hide>div>div>div:nth-child(4) {
    flex: 0 0 70% !important;
}

#Mk_9y_i34 {
    --size: 48px;
    z-index: 1000004985;
    position: fixed;
    top: 50%;
    right: 0px;
    width: var(--size);
    transform: translateX(var(--size));
    transition: all 0.3s linear;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-left: 8px;
    margin-top: 20px;
}

#Mk_9y_i34 * {
    font-family: 'Roboto', sans-serif;
    font-size: 0.97rem;
}

#Mk_9y_i34.expanded {
    width: calc(var(--size) + 92px);
}

/*#region group */
#Mk_9y_i34.pinned {
    transform: translateX(0px);
}

#Mk_9y_i34:hover {
    transform: translateX(0px);
}

/*#endregion group */
#Mk_9y_i34:before {
    font-family: "FontAwesome Solid" !important;
    content: "\f0c9";
    position: absolute;
    left: -14px;
    top: 50%;
    font-size: 16px;
    background-color: rgb(255 232 80);
    padding: 4px;
    line-height: 16px;
    border-bottom-left-radius: inherit;
    border-top-left-radius: inherit;
    opacity: 1;
}

#Mk_9y_i34>div {
    border: 1px solid rgb(0 0 0 / 6%);
    display: flex;
    align-items: center;
    overflow-x: clip;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: rgb(255 232 80);
    cursor: pointer;
}

#Mk_9y_i34>div>* {
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}

#Mk_9y_i34>div>i {
    min-width: var(--size);
    width: var(--size);
    /* border: 1px solid; */
}

#Mk_9y_i34>div>i:before {
    color: black;
}

#Mk_9y_i34>i.switch {
    position: absolute;
    top: -20px;
    font-size: 16px;
}

#Mk_9y_i34>i.switch:before {
    font-size: 16px;
    background-color: transparent;
    color: rgb(106 181 247);
    transition: transform 0.4s linear;
    position: absolute;
}

#Mk_9y_i34>i.switch.pin {
    left: 8px;
}

#Mk_9y_i34>i.switch.expander {
    right: 16px;
}

#Mk_9y_i34.pinned .switch.pin:before {
    transform: rotate(-45deg)
}

#Mk_9y_i34>div:nth-of-type(1) {
    border-top-left-radius: inherit;
}

#Mk_9y_i34>div:last-child {
    border-bottom-left-radius: inherit;
}

#Mk_9y_i34.expanded {
    width: calc(var(--size) + 92px);
}

/*#region group */
#Mk_9y_i34.pinned {
    transform: translateX(0px);
}

#Mk_9y_i34:hover {
    transform: translateX(0px);
}

/*#endregion group */
#Mk_9y_i34:before {
    font-family: "FontAwesome Solid" !important;
    content: "\f0c9";
    position: absolute;
    left: -14px;
    top: 50%;
    font-size: 16px;
    background-color: rgb(255 232 80);
    padding: 4px;
    line-height: 16px;
    border-bottom-left-radius: inherit;
    border-top-left-radius: inherit;
    opacity: 1;
}

#Mk_9y_i34>div {
    border: 1px solid rgb(0 0 0 / 6%);
    display: flex;
    align-items: center;
    overflow-x: clip;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: rgb(255 232 80);
    cursor: pointer;
}

#Mk_9y_i34>div>* {
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}

#Mk_9y_i34>div>i {
    min-width: var(--size);
    width: var(--size);
}

#Mk_9y_i34>div>i:before {
    color: black;
}

#Mk_9y_i34>i.switch {
    position: absolute;
    top: -20px;
    font-size: 16px;
}

#Mk_9y_i34>i.switch:before {
    font-size: 16px;
    background-color: transparent;
    color: rgb(106 181 247);
    transition: transform 0.4s linear;
    position: absolute;
}

#Mk_9y_i34>i.switch.pin {
    left: 8px;
}

#Mk_9y_i34>i.switch.expander {
    right: 16px;
}

#Mk_9y_i34.pinned .switch.pin:before {
    transform: rotate(-45deg)
}

#Mk_9y_i34>div:nth-of-type(1) {
    border-top-left-radius: inherit;
}

#Mk_9y_i34>div:last-child {
    border-bottom-left-radius: inherit;
}

div.rich-icon {
    position: relative;
    display: inline-block;
    align-items: center;
}

div.rich-icon>* {
    margin-right: 16px;
}

div.rich-icon i {
    cursor: pointer;
    position: relative;
    /* width: 20px; */
    height: 32px;
    font-size: 16px;
}

div.rich-icon i.disabled {
    pointer-events: none;
}

div.rich-icon i.disabled:before {
    cursor: not-allowed;
    opacity: 0.3;
}

div.rich-icon i>div {
    position: absolute;
    right: -12px;
    top: -6px;
    font-size: 12px;
    color: coral;
}

div.rich-icon i.fa-star {
    color: #e1e0d8;
}

div.rich-icon i.fa-star:before {
    color: inherit;
}

dialog.control.events-dialog>div.body {
    margin: 0px !important;
}

div.events-interface {
    max-width: inherit;
    min-width: 256px;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    flex: 1 0;
}

div.events-interface * {
    font-size: 0.89rem !important;
}

div.events-interface div#calendar-tools {
    background-color: hsl(0deg 0% 98% / 90%) !important;
    padding: 0px;
    display: flex;
    justify-content: end;
    align-items: center;
    border-top: 1px solid hsl(0deg 0% 95% / 90%) !important;
}

div.events-interface div#calendar-tools>i {
    border-left: 1px solid hsl(0deg 0% 0% / 16%);
    padding: 2px 8px !important;
    cursor: pointer;
}

div.events-interface div#calendar-events {
    opacity: 1 !important;
    background: unset !important;
    background-color: white !important;
    overflow-y: auto;
    overflow-x: hidden;
    /* flex-grow: 2; */
    /* height: -webkit-fill-available; */
    position: relative;
    flex: 1 1;
}

div.events-interface div#calendar-events:empty:before {
    display: block !important;
    font-size: 36px !important;
    font-family: "FontAwesome Solid" !important;
    content: "\f1ce";
    position: absolute !important;
    left: 45%;
    top: 15%;
    color: silver;
    -webkit-animation: fa-spin 2s infinite linear;
    -o-animation: fa-spin 2s infinite linear;
    -moz-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    /* transform: translate(-50%, -50%); */
}

div.events-interface div#calendar-events>div {
    padding: 4px 8px !important;
}

div.events-interface div#calendar-events>div.eof {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0px;
    height: auto !important;
    right: 0px;
    top: 0px;
    left: 0px;
    user-select: none;
    color: silver !important;
    font-style: italic;
    letter-spacing: 0.3px;
}

div.events-interface div#calendar-events>div:hover {
    background-color: hsl(0deg 0% 0% / 1%) !important;
}

div.events-interface div#calendar-events>div+div {
    border-top: 1px solid hsl(0deg 0% 0% / 3%);
}

div.events-interface div#calendar-events>div>div.summary {
    color: blue !important;
    cursor: pointer;
}

div.events-interface div#calendar-events>div>div.description {
}

div.drop-select-container {
    position: relative;
    width: fit-content;
    display: flex;
    flex-direction: column;
}

div.drop-select-container>div.horizontal-wrapper {
    display: flex;
    align-items: stretch;
}

div.drop-select-container>div.horizontal-wrapper>div.vertical-wrapper {
    flex-grow: 2;
    width: 220px;
    position: relative;
    z-index: 100;
}

div.drop-select-container>div.horizontal-wrapper>i#drop-command {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-left-width: 0px;
    background-color: hsl(0deg 0% 0% / 3%);
    display: flex;
    align-items: center;
    padding: 0px 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

div.drop-select-container>div.horizontal-wrapper>i#drop-command:before {
}

div.drop-select-container.pop>div.horizontal-wrapper>i#drop-command:before {
}

div.drop-select-container>div.horizontal-wrapper> :is(i#add-command) {
    position: absolute;
    right: 23px;
    z-index: 100;
    display: flex;
    align-items: center;
    height: -webkit-fill-available;
    padding: 0px 8px;
    color: hsl(120deg 94% 47%);
}

div.drop-select-container.persisted>div.horizontal-wrapper> :is(i#add-command, i#drop-command) {
    display: none;
}

div.drop-select-container>div.horizontal-wrapper>div.vertical-wrapper>div#value-holder {
    height: var(--input-control-height);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    line-height: normal;
    border-radius: 4px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-color: var(--input-border-color) !important;
}

div.drop-select-container.persisted>div.horizontal-wrapper>div.vertical-wrapper>div#value-holder {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

div#value-holder[contenteditable] {
    border: 1px solid gainsboro;
    padding: 8px !important;
}

div#value-holder:not([contenteditable]) {
    /* border: 0px !important; */
    padding: 0px !important;
    /* height: inherit !important; */
    align-items: stretch !important;
}

div.drop-select-container>div.horizontal-wrapper>div.vertical-wrapper>div.drop-down-mkUa32y {
    position: absolute;
    min-height: 32px;
    width: auto;
    top: auto;
    right: 0px;
    border: var(--pop-border);
    box-shadow: var(--drop-box-shadow);
    left: 0px;
    right: 0px;
    border-radius: var(--drop-border-radius);
    transition: var(--pop-transition);
    transform: var(--pop-down-transform);
    transform-origin: var(--pop-down-transform-origin);
    z-index: 1099900;
    background-color: var(--pop-box-background-color);
    overflow-y: auto;
    max-height: 300px;
    background-image: none;
}

div.drop-select-container.pop>div.horizontal-wrapper>div.vertical-wrapper>div.drop-down-mkUa32y {
    transform: scale(1, 1);
}

div.drop-select-container>div.horizontal-wrapper>div.vertical-wrapper>div.drop-down-mkUa32y::before {
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
}

div.drop-select-container>div.horizontal-wrapper>div.vertical-wrapper>div.drop-down-mkUa32y::-webkit-scrollbar {
    width: 3px !important;
    background-color: rgba(0, 0, 0, 0);
}

div.drop-down-mkUa32y>div#scroll-wrapper {
}

div.drop-down-mkUa32y div#list-items {
    display: flex;
    flex-direction: column;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div {
    display: flex;
    align-items: center;
    overflow-x: clip;
    text-overflow: ellipsis;
    cursor: default;
    height: var(--input-control-height);
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items)>div.selected {
    background-color: rgb(0 0 0 / 5%);
}

div.drop-down-mkUa32y div#list-items div.eof {
    padding: 4px 8px;
    color: silver;
    font-style: italic;
}

div.drop-select-container div#value-holder>div {
    width: -webkit-fill-available;
    border: 1px solid gainsboro;
    align-items: stretch !important;
    border-width: 0px !important;
    border-top-left-radius: inherit !important;
    border-bottom-left-radius: inherit !important;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div+div {
    border-top: 0.3px solid hsl(0deg 0% 0% / 3%);
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div>div {
    font-size: 0.80rem;
    color: hsl(0deg 0% 24%);
    display: flex;
    /* align-items: stretch; */
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div> :is(i#check-out, i#info-command) {
    flex-grow: 0;
    padding: 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: silver;
    height: 35px;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div> :is(i#check-out) {
    border-style: solid;
    border-color: inherit;
    border-width: 0px;
    border-left-width: 1px;
    background-color: hsl(0deg 0% 0% / 3%);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div>i#info-command {
    color: hsl(189deg 94% 47%);
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder[readonly]) div>i#check-out {
    display: none !important;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div>div.avatar {
    align-items: stretch;
}

div.drop-select-container div.drop-down-mkUa32y div#list-items>div>div.avatar {
    height: inherit;
}

div.drop-select-container div#value-holder>div>* {
    height: calc(var(--input-control-height) - 1px) !important;
}

div.drop-select-container div#value-holder>div>div.avatar {
    border-top-left-radius: inherit !important;
    border-bottom-left-radius: inherit !important;
}

div.drop-select-container div#value-holder>div>div.avatar>img {
    border-top-left-radius: inherit !important;
    border-bottom-left-radius: inherit !important;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div>div.avatar>img {
    height: inherit;
    width: inherit;
    border-radius: 1px;
}

div.drop-select-container :is(div.drop-down-mkUa32y div#list-items, div#value-holder)>div>div.avatar+div {
    padding: 0px 8px;
    overflow-x: clip;
    text-overflow: ellipsis;
    flex-grow: 1;
    align-items: center;
    /* line-height: normal; */
    /* display: flex; */
}

div.icon-match {
    --lighten: 15%;
    --icon-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten)));
}

div.icon-match:before {
    content: "\f128";
    color: rgb(250 123 85);
}

div.icon-match:is([class*="Beta"], [class*="beta"]):after {
    content: "\03b2";
    font-size: 1rem;
    font-weight: bold;
    color: hsl(0deg 96% 51%) !important;
    position: absolute;
    left: 3px;
    top: 3px;
}

div.icon-match:is([class*="admin"], [class*="Admin"]):after {
    font-family: "Fontawesome Solid" !important;
    content: "\f023";
    font-size: 0.5rem;
    font-weight: bold;
    color: hsl(230deg 96% 51%) !important;
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
}

div.icon-match:is([class~="new-visit"], [class~="muayene"], [class~="visits"]):before {
    content: "\f0f1";
    color: #7fb8ff;
}

div.icon-match:is([class*="announce"], [class*="message"], [class*="chat"]):before {
    content: "\f0e0";
    color: #ff7fe3;
}

div.icon-match[class~="new-call"]:before {
    content: "\f095";
}

div.icon-match:is([class*="duplicate"], [class*="clone"]):before {
    content: "\f24d";
    color: rgb(247 180 160);
}

div.icon-match:is([class*="settings"], [class*="registry"]):before {
    content: "\f013";
    color: #29db3e;
}

div.icon-match[class~="tetkik"]:before {
    content: "\f1b3";
    color: #28db3e;
}

div.icon-match:is([class~="relations"], [class~="family"]):before {
    content: "\f0c0";
    content: "\e068";
    content: "\f500";
    color: #283edb;
}

div.icon-match[class~="comments"]:before {
    content: "\f086";
    content: "\f27a";
    color: #978e86;
}

div.icon-match[class~="debugger"]:before {
    content: "\f15c";
    color: #f13030;
}

div.icon-match[class~="personal"]:before {
    content: "\f0c0";
    content: "\f007";
    color: #fa868b;
}

div.icon-match[class*="profession"]:before {
    content: "\f508";
    color: #fa868b;
}

div.icon-match[class*="ontact"]:before {
    content: "\f2b9";
    color: #62c904;
}

div.icon-match[class*="export"]:before {
    content: "\f093";
    color: #62c904;
}

div.icon-match[class~="patients"]:before {
    content: "\f728";
    color: #fa868b;
}

div.icon-match[class~="dosya"]:before {
    content: "\f478";
}

div.icon-match[class~="kurum"]:before {
    content: "\f47d";
}

div.icon-match[class~="google"]:before {
    content: "\f0f0";
}

div.icon-match[class~="solver"]:before {
    content: "\f0f0";
}

div.icon-match:is([class*="article"], [class*="document"]):before {
    content: "\f15c";
    content: "\f478";
    color: rgb(24, 92, 148);
}

div.icon-match:is([class*="batch"], [class*="Batch"]):before {
    content: "\f0e7";
    color: rgb(131 140 136 / 99%);
}

div.icon-match:is([class*="uplicate"], [class*="clone"]):before {
    content: "\f24d";
    color: rgba(332, 103, 43, 0.99);
}

div.icon-match:is([class~="myrecipes"], [class~="treathments"]):before {
    content: "\f572";
    color: rgba(232, 103, 43, 0.99);
}

div.icon-match[class~="oldVisits"]:before {
    content: "\f470";
    color: #f13030;
}

div.icon-match[class~="conversations"]:before {
    content: "\f0ae";
    color: #f13030;
}

div.icon-match[class~="dashboard"]:before {
    content: "\f0ca";
    color: rgba(143, 127, 253, 0.99);
}

div.icon-match:is([class*="company"], [class*="companies"], [class*="organization"]):before {
    color: rgba(164, 171, 245, 0.99);
    content: "\f1ad";
}

div.icon-match:is([class*="tools"], [class*="Tools"]):before {
    color: rgba(255, 0, 0, 0.99);
    content: "\f0ad";
}

div.icon-match[class~="admintools"]:before {
    content: "\f0ad" !important;
    color: rgba(143, 127, 253, 0.99);
}

div.icon-match[class*="admin"]:before {
    color: rgba(255, 0, 0, 0.99);
    content: "\f085";
}

div.icon-match[class*="healthFile"]:before {
    color: rgb(248 81 81 / 99%);
    content: "\f478";
}

div.icon-match:is([class*="groups"], [class*="group"]):before {
    --lighten: 5%;
    --h-dif: -160;
    color: hsl(calc(var(--primary-color-h) + var(--h-dif)), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten))) !important;
    content: "\f500" !important;
}

div.icon-match[class*="import"]:before {
    content: "\f019" !important;
    color: #676ef2;
}

/*#region test 1 */
dialog#VkPS7hfrn {
    z-index: 9999999999;
    /* position: fixed !important; */
    top: -120px !important;
    left: 50% !important;
    padding: 8px 16px;
    border-radius: 0px 0px 8px 8px;
    font-size: 0.89rem;
    transition: top 0.93s linear;
    margin: 0px !important;
    display: flex;
}

dialog#VkPS7hfrn>div+div {
    margin-left: 16px;
}

dialog#VkPS7hfrn.error {
    background-color: rgb(255 73 0);
    color: white;
}

dialog#VkPS7hfrn.status {
    background-color: hsl(0deg 100% 83%);
    color: black;
}

dialog#VkPS7hfrn.pop {
    top: 0px !important;
}

div#progress-mask {
    width: 819.84px;
    height: 500.96px;
    position: fixed;
    background-color: #00000030;
    z-index: 9999999999;
    left: 482px;
    top: 160px;
}

/*#region print */
@media print {
    /*#region print  */
    dialog.control.master-detail-view-base>.header, dialog.control>div.body.master-detail:not([class~="initial"])>.master {
        display: none;
    }

    dialog.control.page-template>div.body {
        margin-top: 0px;
    }
}

/*#endregion print */
/*#region desktop*/
/*#endregion desktop */
/*#region admin dialog */
div#admin-tool-box-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 0px;
    top: 50%;
    z-index: 2147483649;
}

div#admin-tool-box-container>i {
    height: 32px;
    width: 32px;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/*#endregion admin dialog */
#media-list-view {
    display: flex;
    flex-direction: column;
    padding: 0px;
    height: 100%;
    box-sizing: border-box;
    /* overflow-y: auto; */
}

#media-list-view * {
}

#media-list-view>h2 {
    display: flex;
    /* flex-grow: 0; */
    flex: 0 1;
}

#media-list-view div#results * {
}

#media-list-view div#results>div {
    --x-count: 5;
    --box-offset: 8px;
    --width: calc((100% - (calc(var(--box-offset) * 2) * var(--x-count)))/var(--x-count));
    width: 5.6%;
    border: 1px solid hsl(350deg 5% 86%);
    overflow: clip;
    overflow-clip-margin: content-box;
    box-sizing: border-box;
    width: var(--width);
    height: 200px;
    margin: var(--box-offset) !important;
    padding: var(--box-offset) !important;
}

#media-list-view div#results>div>img {
    /* max-width: 128px; */
    /* max-height: 128px; */
    width: auto;
    height: auto;
}

#media-list-view div#results {
    display: flex;
    flex-wrap: wrap;
    /* display: flex; */
    /* flex-direction: column; */
    margin: 2px;
    /* height: 100%; */
    overflow-y: auto;
    flex-grow: 1;
    flex: 10 0;
    /* width: 600px; */
    /* border: 1px  dashed red; */
}

#media-list-view nav#footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px;
    /* filter: drop-shadow(2px 2px 5px black); */
    border-top: 1px solid hsl(0deg 0% 0% / 8%);
    flex-grow: 0;
    flex: 0 1;
}

#media-list-view nav#footer i {
    color: blue;
    cursor: pointer;
    font-size: 24px;
    filter: drop-shadow(1px 1px 5px gray);
}

#media-list-view nav#footer i#more {
}

#media-list-view nav#footer i#reset {
}

/*#region newRegion */
div#flex-box-4kF0WKayye {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 200px;
    --cell-margin: 0.5%;
    --column-count: 5;
}

div#flex-box-4kF0WKayye>div {
    flex: 0 0 calc((100% - (2 * var(--column-count) * var(--cell-margin)))/ var(--column-count));
    min-height: 120px;
    margin: var(--cell-margin);
    border: 1px solid hsl(0deg 0% 90%);
    padding: 8px;
    border-radius: 4px;
    background-color: hsl(0deg 0% 99.5%);
    position: relative;
    box-sizing: border-box;
}

div#flex-box-4kF0WKayye>div.sys-module {
    border-color: red;
}

div#flex-box-4kF0WKayye>div>div.name {
    font-weight: 500;
    font-size: 110%;
    color: hsl(240deg 70% 60%);
    margin-bottom: 8px;
}

div#flex-box-4kF0WKayye>div>div.commands {
    position: absolute;
    display: flex;
    right: 8px;
    bottom: 4px;
}

div#flex-box-4kF0WKayye>div>div.commands>i {
    margin-left: 8px;
    cursor: pointer;
    color: silver;
}

div#flex-box-4kF0WKayye>div>div.desc {
}

/*#endregion newReg

/*#region sub-list-view */
dialog.control.sub-list-view {
    border: 1px solid;
    border-color: hsl(0deg 0% 0% / 7%) !important;
}

dialog.control.list-view-base.sub-list-view > .status {
    display: none !important;
}

dialog.control.list-view-base.sub-list-view .master .table-wrapper .table .list-header {
    display: none !important;
}

/*#endregion sub-list-view */