:root {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /*#region Revox (revoxMaster) */
    --theme-color-master-dark-0: rgb(88, 88, 88);
    --theme-color-master: rgb(98, 98, 98);
    --theme-color-master-light-0: rgb(230, 230, 230);
    --theme-color-master-light-1: rgb(240, 240, 240);
    --theme-color-master-light-2: rgb(250, 250, 250);
    /*#endregion Revox (revoxMaster) */
    /*#region Revox (complete) */
    --theme-color-complete-active: rgb(60, 147, 206);
    --theme-color-complete-light: rgb(109, 192, 249);
    /*#endregion Revox (complete) */
    /*#region Revox (success) */
    /*#endregion Revox (success) */
    /*#region Revox (info) */
    --theme-color-info: rgb(59, 71, 82);
    --theme-color-info-lighter: rgb(216, 218, 220);
    /*#endregion Revox (info) */
    /*#region Revox (danger) */
    --theme-color-danger-lighter: rgb(253, 221, 221);
    /*#endregion Revox (danger) */
    /*#region Revox (warning) */
    --theme-color-warning: hsl(45deg 94% 93%);
    --theme-color-warning-lighter: hsl(45deg 94% 93%);
    /*#endregion Revox (warning) */
    /*#region Revox (white) */
    --theme-color-white: rgb(255, 255, 255);
    /*#endregion Revox (white) */
    /*#region Revox (menu) */
    /*#endregion Revox (menu) */
    /*#region Steel Blue (steelBlue) */
    /*#region Steel Blue (steelBlue) shades-tints-tones */
    --theme-color-primary: rgb(70, 130, 180);
    --theme-color-primary-light-3: rgb(181, 205, 225);
    --theme-color-primary-light-4: rgb(218, 230, 240);
    --theme-color-primary-darker: rgb(42, 78, 108);
    --theme-color-primary-dark: rgb(58, 109, 150);
    --theme-color-primary-active: rgb(58, 109, 150);
    --theme-color-primary: rgb(70, 130, 180);
    --theme-color-primary-light: rgb(107, 155, 195);
    --theme-color-primary-hover: rgb(107, 155, 195);
    --theme-color-primary-lighter: rgb(218, 230, 240);
    /*#endregion Steel Blue (steelBlue) */
    /*****************************************/
    --fixed-header-height: 50px;
    --header-height: var(--fixed-header-height);
    --header-color: var(--theme-color-primary-darker);
    --text-color: var(--theme-color-master);
    --text-color-light: var(--theme-color-master-light-0);
    --text-color-account: var(--theme-color-primary-lighter);
    --text-color-title: var(--theme-color-primary-lighter);
    --base-text-color: var(--text-color);
    --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 4px 4px 1px rgb(0 0 0 / 12%);
    --pop-border-radius: 3px 3px 3px 3px;
    --pop-transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    --pop-item-hover-bgcolor: rgba(128, 128, 128, 1);
    --drop-border-radius: 0px 0px 5px 5px;
    --gray-background-color: rgb(253, 253, 253);
    --gray-border-color: rgb(234, 234, 234);
    --control-border-color: rgba(233, 233, 233, 1);
    --control-border-radius: 5px;
    --control-font-size: inherit;
    --black-a30: rgba(0, 0, 0, 0.3);
    --black-a08: rgba(0, 0, 0, 0.08);
    --color-border-faint: var(--black-a08);
    --elevation-lined: 0px 0px 0px 1px var(--color-border-faint);
    --color-shadow: var(--black-a30);
    --elevation-raised: var(--elevation-lined), 0px 4px 4px var(--color-shadow);
    --pop-box-2-shadow: var(--elevation-raised);
    /*****************************************/
    --button-face-color: rgb(251, 251, 251);
    --button-background-color: rgb(249, 249, 249);
    --button-background-color-hover: rgb(252 252 252 / 1);
    --button-background-color-active: rgb(247, 247, 247);
    --button-padding: 4px 16px 4px 16px;
    /*****************************************/
    --base-font-size: inherit;
    --form-label-color: #9397fa;
    /*****************************************/
    --button-face-color: var(--theme-color-primary);
    --button-face-color-light: var(--theme-color-primary-light-3);
    --button-text-color: var(--theme-color-master-light-2);
    --button-face-color-hover: var(--theme-color-primary-hover);
    --button-face-color-active: var(--theme-color-primary-active);
    --button-border: 1px solid lightgray;
    /*****************************************/
    --link-color: blue;
    --soft-black: rgb(96 96 96 / 1);
    --pop-item-padding: 4px 16px 4px 8px;
    --pop-item-separator-border-top: 1px solid var(--control-border-color);
    --pop-item-separator-border-bottom: 1px solid var(--control-border-color);
    --pop-item-separator-border-top-width: 0px !important;
    --header-background-color: rgb(255, 255, 255) --dialog-border: 1px solid rgb(240, 240, 240);
    --dialog-border-radius: 4px;
    /*#region from index-v3 */
    /*#region color map */
    --primary-h: 210;
    --primary-s: 100%;
    --primary-l: 50%;
    --primary-color: hsl(var(--primary-h), var(--primary-s) var(--primary-l) / 1);
    --analog-degree: 180 !important;
    --analog-color: hsl(calc(var(--primary-h) + var(--analog-degree)) var(--primary-s) var(--primary-l) / 1);
    --base-color: var(--primary-color);
    /*#endregion color map */
    /*#region default scheme */
    /* --var : hsl( calc(var(--primary-h ) + 0) calc(var(--primary-s) + 0%) calc(var( --primary-l) + 0%) / 1 ); */
    --button-background-color: hsl(calc(var(--primary-h) + 1) calc(var(--primary-s) - 80%) calc(var(--primary-l) + 45%) / 1);
    --button-bg-color: var(--button-background-color) --button-hover-background-color: hsl(calc(var(--primary-h) + 1) calc(var(--primary-s) - 80%) calc(var(--primary-l) + 48%) / 1);
    --button-active-background-color: hsl(calc(var(--primary-h) + 1) calc(var(--primary-s) - 120%) calc(var(--primary-l) + 40%) / 1);
    --button-disabled-background-color: hsl(calc(var(--primary-h) + 1) calc(var(--primary-s) - 80%) calc(var(--primary-l) + 45%) / 1);
    --button-disabled-color: hsl(0 0% 50% / 1);
    --button-disabled-border-color: hsl(0 0% 80% / 0.9);
    /*#endregion default scheme */
    /* list-style: devanagari; */
    --text-color-light: hsl(0deg 0% 48%);
    --text-color: hsl(0deg 0% 18%);
    --border-color: hsl(0 0% 99% / 1);
    --border-color-dark: hsl(0 0% 97% / 1);
    --border-color-darker: hsl(0 0% 95% / 1);
    --border-color-darkest: hsl(0 0% 90% / 1);
    --nav-header-color: hsl(210 40% 50% / 1);
    --input-border-color: hsl(0 0% 90% / 1) !important;
    --icon-color: gainsboro;
    --anchor-color: skyblue;
    --tool-box-icon-color: gainsboro;
    --header-height: 48px;
    --background-color: white;
    --tool-bar-background-color: hsl(60 100% 90% / 1);
    --tool-bar-hover-background-color: hsl(60 60% 90% / 1);
    --tool-bar-border-color: hsl(60 40% 90% / 1);
    /*#region --header-height: 48px; */
    --footer-height: 30px;
    --figure-width: 250px;
    --figure-height: 166px;
    --body-width: 920px;
    --article-width: 600px;
    --v-space: 24px;
    --scroll-bar-width: 5px;
    --logo-color: hsl(216deg 42% 60%);
    /*#endregion from index-v3 */
    /*#region heading */
    --heading-font-family: Georgia;
    --heading-font-family: "Times New Roman";
    --heading-font-family: roboto-flex;
    /*#endregion heading */
}

/*#region @font-face */
@font-face {
    font-family: 'Inter';
    src: url('/common/styles/fonts/Inter-VariableFont_slnt,wght.ttf');
    src: local('Inter'), local('Inter'), url('/common/styles/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'FontAwesome Solid';
    src: url('/common/styles/fonts/faws/fa-solid-900.eot');
    src: url('/common/styles/fonts/faws/fa-solid-900.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/common/styles/fonts/faws/fa-solid-900.woff2') format('woff2'), url('/common/styles/fonts/faws/fa-solid-900.woff') format('woff'), url('/common/styles/fonts/faws/fa-solid-900.ttf') format('truetype'), url('/common/styles/fonts/faws/fa-solid-900.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome Brands';
    src: url('/common/styles/fonts/faws/fa-brands-400.eot');
    src: url('/common/styles/fonts/faws/fa-brands-400.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/common/styles/fonts/faws/fa-brands-400.woff2') format('woff2'), url('/common/styles/fonts/faws/fa-brands-400.woff') format('woff'), url('/common/styles/fonts/faws/fa-brands-400.ttf') format('truetype'), url('/common/styles/fonts/faws/fa-brands-400.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lucida';
    src: url('/common/styles/fonts/lcg.ttf');
    src: local('lucida'), local('lucida'), url('/common/styles/fonts/lcg.ttf') format('truetype');
}

@font-face {
    font-family: 'Ace Crikey';
    src: url('/common/styles/fonts/ace.ttf');
    src: local('Ace Crikey'), local('Ace Crikey'), url('/common/styles/ace.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-flex';
    src: url('/common/styles/fonts/RobotoFlex-Variable.ttf');
    src: local('roboto-flex'), local('roboto-flex'), url('/common/styles/fonts/RobotoFlex-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'minion';
    src: url('/common/styles/fonts/MinionPro-Regular.otf');
    src: local('minion'), local('minion'), url('/common/styles/MinionPro-Regular.otf') format('truetype');
}

@font-face {
    font-family: 'pecita';
    src: url('/common/styles/fonts/Pecita.otf');
    src: local('pecita'), local('pecita'), url('/common/styles/pecita.otf') format('truetype');
}

@font-face {
    font-family: 'noto-sans';
    src: url('/common/styles/fonts/noto-sans/NotoSans-Regular.ttf');
    src: local('noto-sans'), local('pecita'), url('/common/styles/fonts/noto-sans/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'kanit';
    src: url('/common/styles/fonts/Kanit/Kanit-Regular.ttf');
    src: local('kanit'), local('pecita'), url('/common/styles/fonts/Kanit/Kanit-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'FontAwesome';
    src: url('/common/styles/fonts/faws/fontawesome-webfont.eot?v=4.7.0');
    src: url('/common/styles/fonts/faws/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/common/styles/fonts/faws/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/common/styles/fonts/faws/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/common/styles/fonts/faws/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/common/styles/fonts/faws/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome Regular';
    src: url('/common/styles/fonts/faws/fa-regular-400.eot');
    src: url('/common/styles/fonts/faws/fa-regular-400.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/common/styles/fonts/faws/fa-regular-400.woff2') format('woff2'), url('/common/styles/fonts/faws/fa-regular-400.woff') format('woff'), url('/common/styles/fonts/faws/fa-regular-400.ttf') format('truetype'), url('/common/styles/fonts/faws/fa-regular-400.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fontellov0';
    src: url('/common/styles/fonts/fontello/v0/fontello.eot?68012377');
    src: url('/common/styles/fonts/fontello/v0/fontello.eot?68012377#iefix') format('embedded-opentype'), url('/common/styles/fonts/fontello/v0/fontello.woff2?68012377') format('woff2'), url('/common/styles/fonts/fontello/v0/fontello.woff?68012377') format('woff'), url('/common/styles/fonts/fontello/v0/fontello.ttf?68012377') format('truetype'), url('/common/styles/fonts/fontello/v0/fontello.svg?68012377#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fontello';
    src: url('/common/styles/fonts/fontello/fontello.eot?17917003');
    src: url('/common/styles/fonts/fontello/fontello.eot?17917003#iefix') format('embedded-opentype'), url('/common/styles/fonts/fontello/fontello.woff2?17917003') format('woff2'), url('/common/styles/fonts/fontello/fontello.woff?17917003') format('woff'), url('/common/styles/fonts/fontello/fontello.ttf?17917003') format('truetype'), url('/common/styles/fonts/fontello/fontello.svg?17917003#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*#endregion @font-face */
/*#region fontello */
.fontello-icon-cancel:before {
    font-family: fontellov0;
    content: '\e800';
    font-size: 14px;
    font-style: normal;
    /* position: absolute; */
}

.fontello-icon-cancel-1:before {
    content: '\e801';
}

.fontello-icon-minus-squared:before {
    content: '\e802';
}

.fontello-icon-plus:before {
    content: '\e803';
}

.fontello-icon-cancel-n1-1:before {
    content: '\e800';
}

.fontello-icon-cancel-n1:before {
    content: '\e801';
}

.fontello-icon-cancel-n2:before {
    content: '\e802';
}

.fontello-icon-minus1:before {
    content: '\e803';
}

.fontello-icon-minus-squared1:before {
    content: '\e804';
}

.fontello-icon-plus-n2:before {
    content: '\e805';
}

.icon-plus-1:before {
    content: '\e806';
}

/*#endregion fontello */
/*#region flaticon */
@font-face {
    font-family: "Flaticon";
    src: url("/common/styles/fonts/flaticon/flaticon.eot");
    src: url("/common/styles/fonts/flaticon/flaticon.eot#iefix") format("embedded-opentype"), url("/common/styles/fonts/flaticon/flaticon.woff") format("woff"), url("/common/styles/fonts/flaticon/flaticon.ttf") format("truetype"), url("/common/styles/fonts/flaticon/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
    margin-left: 20px;
}

.flaticon-accesibility:before {
    content: "\e000";
}

.flaticon-adhesive:before {
    content: "\e001";
}

.flaticon-ambulance3:before {
    content: "\e002";
}

.flaticon-bandaged:before {
    content: "\e003";
}

.flaticon-blood1:before {
    content: "\e004";
}

.flaticon-broken8:before {
    content: "\e005";
}

.flaticon-clock8:before {
    content: "\e006";
}

.flaticon-emergency2:before {
    content: "\e007";
}

.flaticon-emergency3:before {
    content: "\e008";
}

.flaticon-first16:before {
    content: "\e009";
}

.flaticon-garbage1:before {
    content: "\e00a";
}

.flaticon-health:before {
    content: "\e00b";
}

.flaticon-healthy1:before {
    content: "\e00c";
}

.flaticon-healthy2:before {
    content: "\e00d";
}

.flaticon-heart27:before {
    content: "\e00e";
}

.flaticon-hospital1:before {
    content: "\e00f";
}

.flaticon-hospital2:before {
    content: "\e010";
}

.flaticon-hospital3:before {
    content: "\e011";
}

.flaticon-injured:before {
    content: "\e012";
}

.flaticon-ladder:before {
    content: "\e013";
}

.flaticon-man85:before {
    content: "\e014";
}

.flaticon-man87:before {
    content: "\e015";
}

.flaticon-man88:before {
    content: "\e016";
}

.flaticon-medical10:before {
    content: "\e017";
}

.flaticon-medical7:before {
    content: "\e018";
}

.flaticon-medicine1:before {
    content: "\e019";
}

.flaticon-medicine2:before {
    content: "\e01a";
}

.flaticon-medicine3:before {
    content: "\e01b";
}

.flaticon-medicine6:before {
    content: "\e01c";
}

.flaticon-medicines:before {
    content: "\e01d";
}

.flaticon-nurses:before {
    content: "\e01e";
}

.flaticon-operating:before {
    content: "\e01f";
}

.flaticon-oxygen:before {
    content: "\e020";
}

.flaticon-patient:before {
    content: "\e021";
}

.flaticon-pharmacy3:before {
    content: "\e022";
}

.flaticon-pills:before {
    content: "\e023";
}

.flaticon-prohibition1:before {
    content: "\e024";
}

.flaticon-radioactive3:before {
    content: "\e025";
}

.flaticon-radiography:before {
    content: "\e026";
}

.flaticon-recycle2:before {
    content: "\e027";
}

.flaticon-recycle:before {
    content: "\e028";
}

.flaticon-screen8:before {
    content: "\e029";
}

.flaticon-soda3:before {
    content: "\e02a";
}

.flaticon-staircase1:before {
    content: "\e02b";
}

.flaticon-stairs3:before {
    content: "\e02c";
}

.flaticon-stethoscope1:before {
    content: "\e02d";
}

.flaticon-syringe:before {
    content: "\e02e";
}

.flaticon-task:before {
    content: "\e02f";
}

.flaticon-teeth:before {
    content: "\e030";
}

.flaticon-telescope1:before {
    content: "\e031";
}

.flaticon-test4:before {
    content: "\e032";
}

.flaticon-test5:before {
    content: "\e033";
}

.flaticon-thermometer25:before {
    content: "\e034";
}

.flaticon-two25:before {
    content: "\e035";
}

.flaticon-warning12:before {
    content: "\e036";
}

.flaticon-woman52:before {
    content: "\e037";
}

/*#endregion flaticon */
/*#region FontAwesome */
/*#endregion FontAwesome */
/*#region newRegion */
/*#region font samples */
/* font: 0.99rem/1.7rem 'Open Sans', helvetica, arial; */
/* font: 400 0.99rem/1.7rem 'fira sans','Open Sans', helvetica, arial; */
/* font: 400 0.96rem/1.7rem verdana, helvetica, arial; */
/* font: 400 0.96rem/1.7rem Inter; */
/* font: 400 0.96rem/1.7rem  sans-serif; */
/* font: 400 0.96rem/1.7rem Inter,sans-serif; */
/* letter-spacing: -0.1px; */
/* font-family: Roboto, Helvetica, Calibri, Arial, sans-serif; */
/* font-size: 15px; */
/*#endregion font samples */
/*#region old font */
/* font-size: 0.99rem; */
/* font-family: 'Open Sans', helvetica, arial; */
/* line-height: 1.7rem; */
/* color: var(--text-color); */
/*#endregion old font */
body * {
    font-family: roboto-flex, Inter, Roboto, Helvetica, Calibri, Arial, sans-serif;
    font-size: 0.98rem;
    line-height: 1.7rem;
    color: hsl(0deg 0% 40%);
}

body > i#design-switch-button {
    position: fixed;
    bottom: 0px;
    left: 0px;
    cursor: pointer;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999999 !important;
    width: 24px;
    height: 24px;
    line-height: 0px;
    &:before {
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    body > i#design-switch-button {
        display:none;
    }
}

dialog.control > i#sizer {
    position: absolute;
    z-index: 100;
    /* top: 50%; */
    transform: rotateZ(135deg);
    /* font-size: 1.3rem; */
    background-color: transparent;
    padding: 0px;
    border-radius: 50% 50%;
    color: white;
    cursor: pointer;
    left: auto;
    top: auto;
    bottom: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0px;
    margin: 0px;
}

i#cursor {
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: rotateZ(270deg);
    font-size: 1.3rem;
    background-color: hsl(0deg 0% 0% / 52%);
    padding: 4px;
    border-radius: 50% 50%;
    color: white;
    cursor: pointer;
    left: 8px;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

i#cursor:before {
    /* line-height: 0px; */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

i#cursor.next {
    transform: rotateZ(90deg);
    right: 8px;
    left: auto;
}

/*#region spin */
.spin-back {
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-blend-mode: darken;
}

.spin-back.top {
    background-position: 50% 1% !important;
}

.spin-back.bottom , .spin-back.end {
    background-position: 99% 50% !important;
}

.spin-back:after {
    opacity: 0 !important;
}

.spin-back.spin {
    background-image: url(/graphics/web/ani/processing.gif) !important;
}

.spin-back.medium.spin {
    background-image: url(/graphics/web/ani/ajax-spinner-med.gif) !important;
}

.spin-back.small.spin {
    background-image: url(/graphics/web/ani/loading-16.gif) !important;
}

.spin-back.circle.spin {
    background-image: url(/graphics/web/ani/loadingCircle.gif) !important;
}

.spin-back.spin:before {
    opacity: 0 !important;
    position: static;
}

.spin-flow.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.1 !important;
    z-index: 1 !important;
    cursor: progress;
}

.spin-flow {
    background-image: unset !important;
    position: relative;
}

.spin-flow.spin:before {
    display: none;
}

i:empty.spin-back {
    min-width: 16px;
    min-height: 16px;
    /* display: block; */
    background-size: contain;
}

/*#endregion spin */
div.modal-progress {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 1px;
    height: 1px;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3);
}

div.modal-progress[class~="on"] {
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
}

div.modal-progress img {
    position: absolute;
    width: 1px;
    height: 1px;
    top: -1px;
    left: -1px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, width 0.9s ease-in-out, height 0.9s ease-in-out;
}

div.modal-progress[class~="on"] img {
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    opacity: 0.8;
}

/*#region smart-scroll */
/*
https://css-tricks.com/custom-scrollbars-in-webkit/
*/
[class~="smart-scroll"]::-webkit-scrollbar {
    width: 7px !important;
    height: 10px !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~="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: rgb(244, 244, 244);
}

[class~="smart-scroll"]::-webkit-scrollbar-corner {
    background: transparent;
}

/*#endregion smart-scroll */
/*#region animation */
.fa-spin {
    -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;
}

@-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 (359 deg);
        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 (359 deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

@-webkit-keyframes fa-spin-ccw {
    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 (-359 deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

@keyframes fa-spin-ccw {
    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 (-359 deg);
        transform-origin: center center 0px;
        transform-box: border-box;
        transform-style: flat;
    }
}

/*#endregion animation */
/*#region html controls */
input:not([type=button]), textarea {
    font-family: Roboto, Helvetica, Calibri, Arial, sans-serif;
    font-size: inherit;
    outline: unset;
    line-height: initial !important;
    /* padding-top: 5px !important; */
    /* padding-bottom: 5px !important; */
}

input {
    outline: unset;
}

textarea:disabled, input:not([type]):disabled, input[type="color"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="email"]:disabled, input[type="month"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="text"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="week"]:disabled {
    background-color: rgb(250, 250, 250);
    cursor: not-allowed;
    box-shadow: none;
}

textarea:required, input:required {
    /* color: red !important; */
    border-color: rgba(255, 0, 0, 0.25) !important;
}

select {
    outline: none;
    font-size: inherit !important;
    font-family: inherit !important;
    border-radius: 3px;
    padding: 3px;
}

option {
    font-weight: normal;
    display: block;
    white-space: pre;
    padding: 2px 2px 2px;
}

select.spin, input[type=text].spin {
    background-image: url(/graphics/web/loading-16.gif);
    background-repeat: no-repeat;
    background-position: right 50% !important;
    background-origin: content-box !important;
}

select.spin {
    padding-right: 16px !important;
}

div[contenteditable=true] {
    border: 1px solid transparent;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 4px;
    color: rgb(128, 128, 255);
    color: rgb(64, 64, 64);
    outline: unset;
    background-color: white;
}

div[contenteditable=true]:focus, div.contenteditable, select, div.input-like, input:not([type=button]), textarea {
    border-radius: 6px;
    border: 1px solid var(--control-border-color);
    color: rgb(128, 128, 255);
    color: rgb(64, 64, 64);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
    outline: unset;
    background-color: rgb(255, 255, 255);
    background-color: rgba(254, 254, 254, 1);
}

input:focus, textarea:focus {
    border-color: rgba(153, 164, 249, 0.4);
    color: rgb(128, 128, 255);
    background-color: rgb(255, 255, 255);
    /* box-shadow: inset 0px 1px 2px #dcdcdc42; */
}

/*#endregion html controls */
/*#region placeholder */
/*
https://css-tricks.com/almanac/selectors/p/placeholder/
*/
::-webkit-input-placeholder {
    /* WebKit browsers */
    font-style: italic !important;
    font-size: inherit;
    color: rgba(192, 192, 192, 1);
    color: rgb(224, 224, 224);
    background-color: transparent;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-style: italic !important;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-style: italic !important;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-style: italic !important;
}

input:required::-webkit-input-placeholder {
    color: red;
    opacity: 0.3;
}

/*#endregion placeholder */
/*#region context menu */
.context-menu, .context-menu-off {
    position: absolute !important;
    color: rgb(51, 51, 51);
    background-color: rgb(254, 254, 254);
    border-style: solid !important;
    border-width: 1px !important;
    border-color: rgb(214, 214, 214) !important;
    border-radius: 2px !important;
    display: none;
    box-shadow: 1px 2px 1px 1px rgba(52, 52, 52, 0.6) !important;
}

.context-menu {
    display: block;
}

.context-menu>div {
    padding: 6px 9px 6px 24px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: rgb(51, 51, 51);
    cursor: pointer;
    border-width: 0px;
    border-color: inherit;
    min-width: 120px;
    background-image: none;
}

.context-menu>div.checked {
    background-image: url(/graphics/web/icon/tick-16-gray.png);
    background-position: 4px 50%;
    background-repeat: no-repeat;
}

.context-menu>div.separator {
    background-color: rgb(210, 210, 210);
    padding: 0px;
    height: 1px;
    cursor: default;
}

.context-menu>div.label {
    cursor: default;
}

.context-menu>div:first-child {
    border-radius: 2px 2px 0px 0px;
}

.context-menu>div:last-child {
    border-radius: 0px 0px 2px 2px;
}

.context-menu>div:hover {
    background-color: rgb(237, 237, 237);
}

.context-menu>div.label:hover {
    background-color: inherit;
}

/*#endregion context menu */
/*#endregion newRegion */
/*#region debug styles */
dialog.debug-dialog {
    width: 50%;
    height: 70%;
    border: var(--pop-border);
    outline: none;
    border-radius: 5px;
    box-shadow: var(--pop-box-shadow);
    display: flex;
    flex-direction: column;
    padding: 0px;
}

dialog.debug-dialog.max {
    width: 100%;
    height: 100%;
    margin: 0px;
    inset: 0px !important;
    max-width: 100%;
    max-height: 100%;
}

dialog.debug-dialog * {
    font-size: 1rem;
}

dialog.debug-dialog i {
    background-size: cover;
    left: -18px !important;
    top: 4px !important;
}

dialog.debug-dialog>* {
    padding: 4px 8px;
}

dialog.debug-dialog>main {
    flex: 2 0;
    overflow: auto;
}

dialog.debug-dialog> :is(header, footer) {
    padding: 4px 8px 4px 8px;
    flex: 0 1;
}

dialog.debug-dialog> :is(header, footer):empty {
    display: none;
}

dialog.debug-dialog>header {
    border-bottom: 1px solid gainsboro;
    position: sticky;
    top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

dialog.debug-dialog>header > nav {
    display: flex;
}

dialog.debug-dialog>header h1 {
    margin: 0px;
}

dialog.debug-dialog>header i#closer {
    margin-left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px !important;
    cursor: pointer;
}

dialog.debug-dialog>header i#closer svg {
    width: 16px !important;
    height: 16px !important;
}

div.debug {
    border-spacing: 0px 0px;
    /* width: 100%; */
    /* border: 1px solid; */
    margin-left: 7px;
    display: block;
}

div.debug * {
    font-size: inherit;
}

div.debug>div {
    padding: 1px;
    vertical-align: top;
    /* border-left: 1px dotted rgb(132, 130, 132); */
    position: relative;
    display: block;
    padding-left: 5px;
    /* padding-bottom: 3px; */
    /* position:relative; */
    white-space: nowrap;
}

div.debug>div:last-child {
    border-left-color: transparent;
}

div.debug>div>div.c {
    display: block;
    border-left: 1px dotted rgb(132, 130, 132);
    margin-left: 20px;
}

div.debug>div>div {
    display: inline-block;
    vertical-align: top;
    /* width: auto; */
}

div.debug>div>div:first-child+div {
    white-space: pre-line;
    width: auto;
    /* box-sizing: border-box; */
    /* padding-right: 10px; */
}

div.debug div>div.tip {
    display: none;
    position: absolute;
}

div.debug div>div:first-child:hover~div.tip:not(:empty), div.debug div>div.tip:not(:empty):hover {
    opacity: 0.9;
    padding: 5px 9px 5px 9px;
    display: block;
    z-index: 100;
    left: 0px;
    top: -22px;
    margin: 0px;
    text-decoration: none;
    line-height: 15px;
    color: rgb(253, 252, 252);
    border: 1px solid rgb(229, 229, 229);
    background-color: rgb(71, 65, 65);
    min-width: 100px;
    max-width: 500px;
    white-space: pre-line;
    font-size: 13px;
    font-family: sans-serif, tahoma, geneva, arial;
    font-weight: normal;
    border-radius: 3px;
    -moz-box-shadow: 1px 1px 3px rgb(235, 226, 226);
    box-shadow: 1px 1px 3px rgb(235, 226, 226);
    box-shadow: 1px 1px 3px rgb(235, 226, 226);
    /*#region For IE 8 */
    /*
                                            										 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=0, Color='#000000')";
                                            										 */
    /*#endregion For IE 8 */
    /*#region For IE 5.5 - 7 */
    /*
                                            										 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=0, Color='#000000');
                                            										 */
    /*#endregion For IE 5.5 - 7 */
}

div.debug div>i {
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-image: url(/graphics/web/tree/dots.gif);
    left: -14px;
    top: 3px;
    padding: 10px;
    /* border: 1px solid; */
    cursor: pointer;
}

div.debug div>i.blank {
    background-image: url(/graphics/web/tree/dots.gif);
    left: -17px;
    top: 0px;
}

div.debug div>i.expanded {
    background-image: url(/graphics/web/tree/minus.gif);
}

div.debug>div:first-child i.expanded {
    background-image: url(/graphics/web/tree/beginminus.gif);
}

div.debug>div:last-child i.expanded {
    background-image: url(/graphics/web/tree/lastminus.gif);
}

div.debug div>i.collapsed {
    background-image: url(/graphics/web/tree/plus.gif);
    /* top: 1px; */
}

div.debug>div:first-child i.collapsed {
    background-image: url(/graphics/web/tree/beginplus.gif);
}

div.debug>div:last-child i.collapsed {
    background-image: url(/graphics/web/tree/lastplus.gif);
}

div.debug span {
}

div.debug .o, div.debug .a, div.debug .f, div.debug .n, div.debug .e, div.debug .nil {
    font-weight: bold;
}

div.debug .o {
    color: rgba(0, 0, 255, 1);
}

div.debug .a {
    color: rgb(0, 0, 255);
}

div.debug .f {
    color: rgba(255, 0, 0, 1);
}

div.debug .n {
    color: rgb(128, 64, 64);
}

div.debug .e {
    color: rgb(128, 64, 64);
}

div.debug .nil {
    color: rgb(128, 128, 128);
}

/*#endregion debug styles */
/*#region data-tool-tip */
*.pop-after {
    --tool-tip-x: 0px;
    --tool-tip-y: -38px;
}

[data-tool-tip], .pop-after {
    --offsetX: 0px;
    --offsetY: 0px;
    position: relative;
}

[data-tool-tip]:after, .pop-after:after {
    position: absolute;
    z-index: 1000 !important;
    background-color: yellow;
    padding: 8px 8px;
    border-radius: 4px;
    color: var(--text-color-light) !important;
    font-style: normal;
    pointer-events: none;
    transform: translate(var(--tool-tip-x), var(--tool-tip-y));
    transition: opacity 0.1s linear;
    opacity: 0;
    z-index: -1;
    font-weight: normal;
    line-height: initial;
    font-size: 0.85rem;
    white-space: nowrap;
    top: var(--offsetY);
    left: var(--offsetX);
    pointer-events: none;
}

.pop-after.pop:after {
    z-index: 100;
    opacity: 1 !important;
    top: var(--offsetY) !important;
    left: var(--offsetX) !important;
}

*.pop-after[data-message]:after {
    content: attr(data-message);
}

*[data-tool-tip]:after {
    content: attr(data-tool-tip);
}

*[data-tool-tip]:hover:after {
    z-index: 99999999999 !important;
}

*.top-margin[data-tool-tip]:hover:after {
    transform: translateY(32px);
}

*.right-margin[data-tool-tip]:hover:after {
    transform: translateY(32px) !important;
    transform: translateX(-60px);
}

/*#endregion data-tool-tip */
/*#region  body.design-mode */
body {
    & *[data-template-section] {
        > section[data-module-key] {
            &:before {
                display:none;
            }
        }
    }

    > div.module-overlay {
        position: fixed;
        right: 0px;
        top: 0px;
        color: rgb(84, 83, 101);
        background-color: rgba(255, 255, 255, 1);
        padding: 2px;
        line-height: 1px;
        /* display: flex; */
        display: none;
        flex-direction: row;
        justify-content: flex-end;
        border: 1px solid rgb(255, 187, 179);
        opacity: 0;
        z-index: -1;
        box-sizing: border-box;
        width: 100%;
    }

    &.design-mode {
        > div.module-overlay {
            display: flex;
            opacity: 0.5;
            z-index: 1000;
            > .text {
                margin: auto;
                font-size: 1rem;
                font-weight: 500;
            }

            & i.control {
                position: absolute;
                cursor: pointer;
                top: 0px;
                right: 0px;
            }

            & :has(i.control:hover) {
                opacity: 1;
                /* background-color:hsl(0deg 100% 70% / 10%); */
            }

            & i.control:before {
                font-size: 1.2rem;
                color: rgb(171, 156, 239);
            }
        }

        & *[data-template-section] {
            min-height: 32px !important;
            opacity: 0.5 !important;
            /* box-shadow: 0px 0px 2px 1px red !important; */
            &:empty {
                min-height: 30px;
            }

            > section[data-module-key] {
                position: relative;
                box-shadow: 0px 0px 1px 1px blue !important;
                &:before {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    z-index: 100;
                    cursor: pointer;
                    color: red;
                    width: 20px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}

/*#endregion  body.design-mode  */
body > dialog#Eyx_JWee2 {
    top: 0px;
    z-index: 9999999999999;
    background-color: yellow;
    padding: 8px;
    font-size: 14px;
    border-radius: 0px 0px 4px 4px;
    transform: translate(0px, -100%);
    transition: transform 0.3s linear;
    margin: 0px;
    /* position: fixed; */
    /* left: 50%; */
    margin: 0px auto;
}

body > dialog#Eyx_JWee2.slide-down {
    transform: translate(0px, 0%);
}

dialog#MD4kkfo9_U1g {
    border-radius: 25px;
    padding: 20px;
    user-select: none;
}

dialog#MD4kkfo9_U1g::backdrop {
    background-color: hsl(0deg 0% 0% / 25%) !important;
}

dialog#MD4kkfo9_U1g.spin:before {
    top: 20px;
    font-size: 36px;
    color: #9292b7;
    -webkit-animation: fa-spin 3s infinite linear;
    -o-animation: fa-spin 3s infinite linear;
    -moz-animation: fa-spin 3s infinite linear;
    animation: fa-spin 3s infinite linear;
}

dialog#MD4kkfo9_U1g > div {
    margin-left: 48px !important;
    color: var(--text-color-light);
    user-select: none;
}

.pop-c {
    position: relative;
    > div {
        position: fixed;
        /* position: absolute; */
        display: flex;
        right: 0px;
        padding-right: 4px;
        border: 1px;
        transform: translateX(150%);
        transform-origin: right;
        transition: transform 0.5s linear;
        > div {
            /* background-color:yellow; */ margin-left: 4px;
        }

        ; background-color: white;
    }
}

.pop-c.pop {
    > div {
        transform: translateX(-10px) ;
    }
}

/*# sourceMappingURL=/common/styles/web/index.css */