/* HTML */

html 
{
    width: 100%;
    height: 100%;
}

*, 
*:before, 
*:after 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML > MAIN */

body 
{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background: var(--bkg-color-base);
    color: var(--font-color-base);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
}

a 
{
    outline: none;
    text-decoration: none;
    color: var(--link-color);
}

a:hover 
{    
    color: var(--active-color);
}

table 
{
    border-collapse: collapse;
}

input,
textarea
{
    resize: none;
    white-space: nowrap;
    padding: var(--padding-base);
    height: var(--input-height-base);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    border: var(--input-border);
    border-radius: var(--border-radius-base);
    color: var(--input-color);
    background-color: var(--input-color-bkg);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
    -webkit-box-shadow: 0 0 0 var(--input-height-inborder) var(--input-color-bkg) inset !important;
}

textarea
{
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
 
input:focus,
textarea:focus,
select:focus,
audio:focus,
video:focus
{
    outline: none;
    border: var(--input-border-focus);
}

input::placeholder
{
    color: var(--input-color-placeholder);
}

input.readonly,
textarea.readonly 
{
    border: none;
}

em
{    
    font-style: normal;    
    font-weight: normal;
    text-transform: uppercase;
    opacity: 0.5;
    font-size: var(--font-size-smaller);
}

dfn 
{
    font-style: normal;
}

/* HTML > TYPOGRAPHY */

b,
strong,
.__bold
{ 
    font-family: var(--font-bold);
}

i,
.__italic
{ 
    font-style: normal;
    font-family: var(--font-italic);
}

.__underline { text-decoration: underline; }
.__strikethr { text-decoration: line-through; }

.__subscript:after
{ 
    content: "2";
    vertical-align: sub;
    line-height: var(--font-size-tiny);
    font-size: var(--font-size-tiny);
}

.__superscript:after
{     
    content: "2";
    vertical-align: super;
    line-height: var(--font-size-tiny);
    font-size: var(--font-size-tiny);
}

.__txtcolors:after
{
    content: " ";
    position: absolute;
    display: block;
    left: 0px;
    bottom: 0px;
    margin: auto;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(101, 84, 192) 25%, rgb(0, 184, 217) 25%, rgb(0, 184, 217) 50%, rgb(255, 153, 31) 50%, rgb(255, 153, 31) 75%, rgb(222, 53, 11) 75%) repeat scroll 0% 0%;
}

q,
blockquote
{
    font-family: var(--font-italic);
}

q:before, q:after,
blockquote:before, blockquote:after
{
    font-family: var(--icon-font);
    font-size: var(--icon-size-tiny);
    color: var(--font-color-light);
}

q:before, blockquote:before { content: "\f10d"; margin-right: var(--margin-close); }
q:after, blockquote:after { content: "\f10e"; margin-left: var(--margin-close); }

pre.notepadlike,
pre.dumpbox,
pre.syntaxlike,
pre.syntaxlike code,
textarea.syntax-edit
{     
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    overflow: auto;    
    overflow-wrap: break-word;
    white-space: pre;
    font-family: monospace;
    padding: var(--padding-base);
    color: var(--input-color);
    background: var(--bkg-color-base);
    border-radius: var(--border-radius-base);
}

pre.syntaxlike
{
    padding: 0px;    
}

pre.dumpbox
{
    border: var(--area-border-base);
}

pre.syntax-show
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    user-select: none;    
}

textarea.syntax-edit
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    padding: 1em;
    color: transparent;
    background: transparent;
    caret-color: var(--input-color);
}

pre.syntax-show,
pre.syntax-show *,
textarea.syntax-edit
{
    tab-size: 4;
}

.limited-content
{
}

.limited-content .show-toggle
{
    display: none;
    font-size: var(--font-size-base);
}

.limited-content .show-toggle:before
{
    padding-right: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-small);
}

.limited-content .inner
{
    position : relative;
    max-height: 152px;
    overflow-y: hidden;
    transition: height 0.25s;
}

.limited-content.overflow .inner:after
{
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0px;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
    width: 100%;
    height: 66%;
}

.limited-content.overflow .show-toggle
{
    display: block;    
}

.limited-content.overflow .show-toggle:before
{
    content: "\f078";
}

.limited-content.expanded .show-toggle
{
    display: block;
    margin-top: var(--margin-base);
}

.limited-content.expanded .show-toggle:before
{
    content: "\f077";
}

.limited-content.tall .inner
{
    max-height: 312px;
}

.limited-content.tall.overflow .inner:after
{
    height: 33%;
}

.amount_positive
{
    color: var(--state-color-success);
}

.amount_positive:before
{
    content: "+";
}

.amount_negative
{
    color: var(--state-color-fail);
}

.amount_negative:before
{
    content: "-";
}

/* LAYOUT */ 

/* LAYOUT > CONTAINER (MAIN) */

#container 
{
    position: relative;
    height: 100vh;
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr auto 99fr;
    grid-template-rows: 99fr 1fr;
    transition: all 1s;
    -webkit-transition: all 1s;
}

/* LAYOUT > HEADER */

#header 
{
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    width: var(--header-width);
    background: var(--header-color-bkg);
    border-right: var(--header-border);
}

/* LAYOUT > LEFT BOX */

aside#leftbox 
{
    grid-column: 2 / span 1;
    grid-row: 1 / span 2;
    width: 0px;    
    overflow: hidden;
    transition: var(--transition-base);
    -webkit-transition: var(--transition-base);
    background: var(--leftbox-color-bkg);
}

aside#leftbox.leftnav-is-open
{
    width: var(--leftbox-width);
}

aside#leftbox div#leftbox_img
{
    display: none;
}

aside#leftbox.leftnav-is-open div#leftbox_img
{
    display: block;
    position: fixed;
    top: 0px;
    z-index: 3;
    width: var(--leftbox-width);
    height: var(--header-height);    
}

/*  LAYOUT > BODY CONTAINER */
             
#bodycontainer 
{
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
    padding: 0px var(--padding-base) var(--margin-base) var(--margin-base);
}

/* LAYOUT > FOOTER */ 

#footer 
{  
    grid-row: 2 / span 1;
    grid-column: 3 / span 1;
    overflow: hidden;    
    display: flex;
    align-items: center;
    height: var(--footer-height);    
}

#foot_content
{
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}

/* LEFT NAVIGATION */

nav#left_navigation
{
    position: fixed;
    width: 0px;
    overflow-y: auto;
    z-index: 3;
    transition: var(--transition-base);
    -webkit-transition: var(--transition-base);        
    top: var(--header-height);    
    max-height: calc(100vh - var(--header-height));
    font-size: var(--font-size-smaller);
}

nav#left_navigation.leftnav-is-open
{
    width: var(--leftbox-width);
}

nav#left_navigation .icon-nav-button
{
    position: fixed;    
    z-index: 2;
    border-radius: 100%;
    transition: var(--transition-base);    
    -webkit-transition: var(--transition-base);    
    left: calc(var(--header-width) - var(--icon-dim-base) / 2);
    top: var(--margin-close);    
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    background: var(--header-color-bkg);
    color: var(--leftbox-nav-color);
}

nav#left_navigation .icon-nav-button:before
{
    content: "\f105";
}

nav#left_navigation.leftnav-is-open .icon-nav-button
{
    transform: rotate(180deg);
    left: calc(var(--header-width) + var(--leftbox-width) - var(--icon-dim-base) / 2);
    background: var(--leftbox-color-bkg);
}

nav#left_navigation.leftnav-is-open .icon-nav-button:before
{
}

nav#left_navigation ul 
{ 
    list-style: none;
    overflow: hidden;
}

nav#left_navigation ul > li 
{ 
    position: relative;
    display: block;
    width: 100%;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    margin: 0px auto var(--header-nav-margin) auto;
    border-radius: var(--border-radius-tiny);
}

nav#left_navigation ul > li > a
{
    display: block;
    width: 100%;
    padding-left: var(--icon-dim-base);
    height: var(--leftbox-nav-dim);
    line-height: var(--leftbox-nav-dim);
    color: var(--leftbox-nav-color);
    border-radius: var(--border-radius-tiny);
}

nav#left_navigation ul > li.w-children > a:after
{
    position: absolute;
    left: 0px;
    content: "\f107";
    transition: var(--transition-base);
    -webkit-transition: var(--transition-base);    
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    padding: 0px var(--padding-base);
    height: var(--leftbox-nav-dim);
    line-height: var(--leftbox-nav-dim);
    color: var(--leftbox-nav-color);    
}

nav#left_navigation ul > li.branch-is-open > a:after
{
    transform: rotate(180deg);
}

nav#left_navigation ul > li > a:hover
{    
    background: var(--active-color);
}

nav#left_navigation ul > li > a:before
{ 
    float: left;
    display: inline-block;
    text-align: center;
    width: var(--leftbox-nav-dim);
    padding-right: var(--padding-base);
    height: var(--leftbox-nav-dim);
    line-height: var(--leftbox-nav-dim);    
}

nav#left_navigation ul > li > ul
{ 
    overflow-y: hidden;
    max-height: 0px;
    transition: var(--transition-base);
    -webkit-transition: var(--transition-base);
    margin-left: var(--leftbox-nav-indent);
}

nav#left_navigation ul > li > ul.branch-is-open
{
    max-height: 100vh;
}

nav#left_navigation ul > li > ul > li.current
{
    background: var(--active-color);
}

nav#left_navigation ul > li > ul > li.w-children.current
{
    background: var(--leftbox-color-bkg);
}

nav#left_navigation ul > li > ul > li.current:before
{
    float: right;    
    content: "";
    width: 0; 
    height: 0; 
    margin-top: var(--margin-close);
    border-top: var(--margin-close) solid transparent;
    border-bottom: var(--margin-close) solid transparent;   
    border-right: var(--margin-close) solid var(--bkg-color-base); 
}

nav#left_navigation ul > li > ul > li.w-children.current:before
{
    border: none;
}

/* HEADER > ELEMENTS */

#head_img 
{ 
    position: fixed;
    top: 0px;    
    display: flex;
    flex-direction: column;
    z-index: 3;
    width: var(--header-width);
}

#head_img > div
{
    margin-left: auto;
    margin-right: auto;
}

#head_home
{
    order: 1;
    width: 100%;    
    cursor: pointer;
    height: var(--header-height);
}

#head_search,
#head_create,
#head_favourites,
#head_notify, 
#head_stopwatch
{
    position: relative;
    width: var(--header-nav-dim);
    height: var(--header-nav-dim);
    margin-bottom: var(--header-nav-margin);
}

#head_search
{
    order: 3;
}

#head_create
{
    order: 4;
}

#head_favourites
{
    order: 5;
}

#head_notify 
{ 
    order: 6;
}

#head_stopwatch
{ 
    order: 7;
}

#head_search > .icon,
#head_create > .icon,
#head_favourites > .icon,
#head_notify > .icon,
#head_stopwatch > .icon
{
    border-radius: 100%;    
    width: var(--header-nav-dim);
    height: var(--header-nav-dim);
    line-height: var(--header-nav-dim);
    background: var(--header-nav-color-bkg);
    color: var(--header-nav-color);    
}

#head_search > .icon.current,
#head_search > .icon:hover,
#head_create > .icon.current,
#head_create > .icon:hover,
#head_favourites > .icon.current,
#head_favourites > .icon:hover,
#head_notify > .icon.current,
#head_notify > .icon:hover,
#head_stopwatch > .icon:hover
{
    background: var(--active-color);
}

#head_notify a.__notify-newcount 
{ 
    position: absolute;
    z-index: 2;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);    
}

#head_img > div#head_lang 
{ 
    order: 8;
    margin-bottom: var(--header-nav-margin);
}

#head_img > div#head_account
{
    order: 9;
    margin-top: var(--margin-base);
}

#head_avatar 
{ 
    display: block;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: 100%; 
    color: var(--negative-color);
    width: var(--icon-dim-larger);
    height: var(--icon-dim-larger);
    line-height: var(--icon-dim-larger);
    font-size: var(--font-size-xl);
}

#head_subscriber
{
    display: none;
}

.__avatar-side-id
{    
    display: block;
    text-align: center;
    font-size: 0px;
    margin-top: var(--header-nav-margin);
}

.__avatar-side-id span#head_level
{
    text-overflow: ellipsis;
    font-size: var(--font-size-smaller);
    font-family: var(--font-bold);
    color: var(--header-nav-color);
    width: var(--header-width);    
}

.__pulse-badge
{
    display: none;
    position: absolute;
    border-radius: 100%;
    width: calc(var(--notify-circle-dim) * 2);
    height: calc(var(--notify-circle-dim) * 2);
    top: calc(50% - var(--notify-circle-dim));
    left: calc(50% - var(--notify-circle-dim));
    border: 12px solid var(--notify-circle-bright);
    opacity: 0.0;
    z-index: 2;
}

.__pulse-badge-fx-trigger
{
    display: block;
    animation: pulsate 1s ease-out;
}

/* HEAD NAVIGATION */

nav#head_navigation
{
    order: 2;
    width: 100%;
    opacity: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: translateX(0px);
    transition: var(--transition-base);
    -webkit-transition: var(--transition-base);        
    font-size: var(--font-size-smaller);    
}

nav#head_navigation.leftnav-is-open
{
    width: 0px;
    opacity: 0;
    -webkit-transform: translateX(var(--header-width));
    transform: translateX(var(--header-width));
}

#head_menu_toggle
{
    display: none;
}

nav#head_navigation ul 
{ 
    list-style: none;
}

nav#head_navigation ul > li
{    
    display: block;
    width: 100%;
    font-size: 0;
    margin-bottom: var(--header-nav-margin);
}

nav#head_navigation ul > li > a
{  
    display: block;
}

nav#head_navigation ul > li > a:before
{ 
    margin: auto;
    text-indent: 1px; /* better centering! */
    text-align: center;
    display: block;
    border-radius: 100%;
    width: var(--header-nav-dim);
    height: var(--header-nav-dim);
    line-height: var(--header-nav-dim);
    background: var(--header-nav-color-bkg);
    color: var(--header-nav-color);
}

nav#head_navigation ul > li > a:hover:before
{ 
    background: var(--active-color);
}

nav#head_navigation ul > li.current > a:before
{
    background: var(--active-color);
}

nav#head_navigation ul > li > ul 
{ 
    position: fixed;    
    left: -1000px;
    display: block;    
    padding: var(--padding-base);
    width: var(--header-nav-sub-width);
    background: var(--header-nav-color-bkg);
    border-top-right-radius: var(--border-radius-base);
    border-bottom-right-radius: var(--border-radius-base);
    box-shadow: var(--header-nav-sub-shadow);
}

nav#head_navigation ul > li:hover > ul 
{     
    margin-top: calc(-1 * var(--padding-base) - var(--header-nav-dim));
    left: var(--header-width);
}

nav#head_navigation ul > li > ul > li
{ 
    position: relative;
    margin-bottom: 0px;
    font-size: var(--font-size-smaller);
    color: var(--header-nav-color);
}

nav#head_navigation ul > li > ul > li.current
{
    background: var(--active-color);
    border-radius: var(--border-radius-tiny);
}

nav#head_navigation ul > li > ul > li > a
{
    position: relative;
    display: block;        
    text-indent: calc(var(--header-nav-dim) + var(--padding-base));
    line-height: var(--header-nav-dim);
    color: var(--header-nav-color);
    border-radius: var(--border-radius-tiny);
}

nav#head_navigation ul > li > ul > li.w-children > a:after
{ 
    position: absolute;
    top: 0px;
    right: 2px;
    content: "\f105";
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    height: var(--leftbox-nav-dim);
    line-height: var(--leftbox-nav-dim);
    color: var(--leftbox-nav-color);    
}


nav#head_navigation ul > li > ul > li > a:before,
nav#head_navigation ul > li > ul > li > ul > li > a:before
{
    position: absolute;
    left: 0px;
    text-indent: 0px;
}

nav#head_navigation ul > li > ul > li > a:hover,
nav#head_navigation ul > li > ul > li > ul > li > a:hover
{
    background: #009fd7;
}

nav#head_navigation ul > li > ul > li:hover > ul,
nav#head_navigation ul > li > ul > li > ul:hover
{ 
    left: calc(var(--header-width) + var(--header-nav-sub-width) - var(--padding-base));
    margin-top: calc(-1 * var(--padding-base) - var(--header-nav-dim));
}

/* NAVIGATION ICONS */

nav#head_navigation ul > li > a:before,
nav#left_navigation ul > li > a:before
{
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);   
}

/* CONTENT */

main#content
{
    width: 100%;
    height: 100%;
}

/* BREADCRUMB */

#breadcrumb 
{ 
    padding: var(--padding-base) 0px;
}

ul.breadcrumb
{
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
}

ul.breadcrumb:before 
{ 
    float: left;    
    content: "\f015";
    text-transform: none;
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);    
    padding-right: var(--padding-base);
}                

ul.breadcrumb li 
{ 
    display: inline-block;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 75vw;
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    padding-right: var(--padding-base);
    /*font-family: var(--font-bold);*/
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}

ul.breadcrumb > li + li:before 
{
    display: inline-block;  
    content: "\f054";
    font-family: var(--icon-font);
    padding-right: var(--padding-base);
}

/* LANGUAGE */

.language_trigger 
{
    display: inline-block;
    border-radius: 100%;    
    font-size: 0px;
    text-align: center;
    padding: 2px 0px;
    width: var(--header-nav-dim);
    height: var(--header-nav-dim);
    line-height: var(--header-nav-dim);
    background: var(--header-nav-color-bkg);
    color: var(--header-nav-color);
}

.language_trigger:hover
{
    background: var(--active-color);
    color: var(--header-nav-color);   
}

.language_trigger:before
{
    font-size: var(--font-size-base);
    font-family: var(--font-bold);
}

.language_trigger.flag_it:before { content: "IT"; }
.language_trigger.flag_en:before { content: "EN"; }
.language_trigger.flag_es:before { content: "ES"; }
.language_trigger.flag_de:before { content: "DE"; }
.language_trigger.flag_ch:before { content: "ZH"; }

.formtoolbar
{
    margin-bottom: 8px;
}

.formtoolbar .language_trigger,
.inlinelanguagebar .language_trigger
{
    padding: 0px;
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    color: var(--font-color-base);
}

.formtoolbar div.skip
{
    display: inline-block;
    vertical-align: top;
}

.formtoolbar div.skip a.skip_button
{
    display: inline-block;
    text-align: center;
    margin: 0px calc(var(--margin-close) / 2);
    padding: 0px var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-pill);
    color: var(--font-color-base);
}

.formtoolbar div.skip a.skip_button .side_icon
{
    height: var(--input-height-base);
    line-height: var(--input-height-base);    
}

.formtoolbar div.skip a.skip_button .side_icon:before
{
    height: var(--input-height-inborder);
    line-height: var(--input-height-inborder);
    color: var(--font-color-base);
}

/* TITLE BAR */

div.titlebar 
{ 
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margin-base);
}

div.titlebar > span.title 
{ 
    display: inline-block;
    letter-spacing: 1px;
    max-width: 75vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--font-size-xl);
    color: var(--icon-color);
}

div.titlebar > span.title em
{
    text-transform: none;
    font-size: var(--font-size-xl);
}

div.titlebar > div.buttonline 
{
    display: flex;
    flex-direction: row;
    height: var(--icon-dim-large);
}

div.titlebar > div.buttonline > div.auxelements
{
    display: inline-block;
}

div.titlebar > div.buttonline > div.auxelements a
{
    margin-left: var(--margin-close);
}

div.titlebar > div.buttonline > div.button 
{ 
    position: relative;
    display: inline-block;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    margin-left: var(--margin-close);
}

div.titlebar > div.buttonline > div.button span.buttoncaption
{
    display: none;
}

div.titlebar > div.buttonline > .icon-titlebar-toggle
{
    visibility: hidden;    
    position: absolute;    
    cursor: pointer;
    z-index: 2;
    top: 0px;
    left: 0px;
    color: var(--negative-color);
    background: var(--overlay-bkg-dark);
    border-radius: var(--border-radius-base);
    transition: var(--transition-left);
    -webkit-transition: var(--transition-left);
}

div.titlebar > div.buttonline > .icon-titlebar-toggle:before
{
    display: inline-block;
    content: "\f104";
    transition: var(--transition-transform);
    -webkit-transition: var(--transition-transform);
}

div.titlebar.__stickytools > div.buttonline 
{
    position: fixed;    
    z-index: 3;
    flex-direction: column;
    height: auto;
    top: var(--icon-dim-large);
    right: calc(-1 * var(--icon-dim-larger));
    width: var(--icon-dim-larger);
    padding: var(--padding-base) 0px;    
    background: var(--overlay-bkg-dark);
    border-radius: var(--border-radius-base);
    transition: var(--transition-base);
    -webkit-transition: var(--transition-base);
}

div.titlebar.__stickytools > div.buttonline > div.button
{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--margin-close);
}

div.titlebar.__stickytools.__stickytools_open > div.buttonline
{
    right: 0px;
}

div.titlebar.__stickytools > div.buttonline > div.button .icon
{
    color: var(--negative-color);
}

div.titlebar.__stickytools > div.buttonline > .icon-titlebar-toggle
{    
    visibility: visible;
    left: calc(-1 * var(--icon-dim-large));
}

div.titlebar.__stickytools.__stickytools_open > div.buttonline > .icon-titlebar-toggle:before
{
    transform: rotate(180deg);
}

/* INLINE BAR */

.inlinebar
{
    margin-bottom: var(--margin-base);
}

/* BUTTON BAR */

a.browse
{
    padding: 0px 4px;
    font-size: var(--font-size-bigger);    
}

div.info_box
{
    position: relative;
    display: inline-block;
}

div.buttonbar
{    
    width: 100%;
    text-align: center;
    margin-top: var(--margin-base);
}

.buttonbar .btn
{
    vertical-align: top;
    margin: 0px var(--margin-close);
}

/* BUTTON BAR > GRID */

div.gridbar
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-base);
}

/* BUTTONS */

a.btn
{
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: var(--btn-width-min);
    height: var(--btn-height-base);
    line-height: var(--btn-height-base);
    padding: 0px var(--btn-padding);
    border-radius: var(--border-radius-base);
    color: var(--btn-color);
    background: var(--btn-color-bkg);    
}

a.btn:hover, 
a.btn:focus
{    
    background: var(--active-color);
}

a.btn.btn-add
{
    
}

a.btn.btn-submit
{
    
}

a.btn.btn-cancel,
a.btn-close
{    
    line-height: var(--btn-height-inborder);
    background: var(--btn-inverted-color-bkg);
    border: var(--btn-inverted-border);
    color: var(--btn-inverted-color);
}

a.btn.btn-cancel:hover,
a.btn-close:hover
{
    background: var(--btn-inverted-color-bkg);
    border: var(--btn-active-border);
    color: var(--active-color);
}

a.btn.btn-browse
{    
    width: 100%;
}

a.btn.btn-browse:before
{
    content: "\f07c";
    vertical-align: top;
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);    
    margin-right: var(--margin-close);
}

a.btn-special
{
    background-color: var(--state-color-success);
}

a.btn.btnspacer
{
    margin-bottom: 16px;
}

/* BUTTONS > OVERLAY */

.btn.btn-overlay
{
    background-color: var(--negative-color);
    color: var(--font-color-base);
}

.btn.btn-overlay:hover
{
    color: var(--negative-color);
}

.btn.btn-overlay.btn-cancel
{
    background-color: transparent;
    color: var(--negative-color);
    border: var(--btn-inverted-border-overlay);
}

.btn.btn-overlay.btn-cancel:hover
{
    background-color: transparent;
}

/* BUTTONS > SKIP BUTTONS */

div.skip a.skip_button
{
    display: inline-block;
    text-align: center;
    margin: 0px calc(var(--margin-close) / 2);
    padding: 0px var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-pill);
    color: var(--font-color-base);
}

div.skip a.skip_button .badge
{
    display: inline-block;
    vertical-align: top;
    border-radius: 100%;    
    margin-top: 7px;
    margin-left: var(--margin-close);
    width: var(--icon-dim-small);
    height: var(--icon-dim-small);
    line-height: var(--icon-dim-small);        
    font-size: var(--font-size-smaller);
    background-color: var(--font-color-light);
    color: var(--negative-color);
}

div.skip a.skip_button.skip_on
{
    color: var(--negative-color);
    background-color: var(--active-color);
    border: var(--input-border-active);    
}

div.skip a.skip_button.skip_on .badge
{
    background-color: var(--negative-color);
    color: var(--active-color);
}

div.skip a.skip_button .side_icon
{
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding-right: var(--padding-base);
}

div.skip a.skip_button .side_icon:before
{
    height: var(--input-height-inborder);
    line-height: var(--input-height-inborder);
    color: var(--font-color-base);
}

div.skip a.skip_button.skip_on .side_icon,
div.skip a.skip_button.skip_on .side_icon:before
{
    color: var(--negative-color);
}

/* FORM */

form 
{
    position: relative;
    width: 100%;
}

form fieldset 
{
    border: none;
}

/* FORM > TABS */

div.tabs_wrapper 
{ 
    position: relative;
    width: 100%;   
}

div.tabs
{ 
}

ul.tabs_ctrl 
{
  position: relative;
  width: 100%;
  display: block;
  border-bottom: var(--tabber-border);
  margin-bottom: var(--margin-base);
}

ul.tabs_ctrl li 
{
  position: relative;
  display: inline-block;  
  margin-bottom: -2px;
  list-style: none;  
  text-align: center;
  min-width: var(--tabber-item-width-min);
}

ul.tabs_ctrl li a
{
    display: block;    
    white-space: nowrap;
    text-transform: uppercase;
    padding: var(--padding-base);
    font-family: var(--font-bold);
    color: var(--font-color-base);    
}

ul.tabs_ctrl li.selected,
ul.tabs_ctrl li:hover 
{
  border-bottom: var(--tabber-border-active);
}

ul.tabs_ctrl li.selected a,
ul.tabs_ctrl li:hover a
{
   color: var(--active-color);
}

/* FORM > SECTIONS */

form div.section 
{
    position: relative;
    overflow: hidden;
    margin-bottom: var(--margin-base);
}

.section-fx 
{ 
    -webkit-transition: var(--transition-height);
    transition: var(--transition-height);
}

/* FORM > SECTIONS > BAR */

form div.section_bar
{
  position: relative;
  width: 100%;  
  font-size: var(--font-size-bigger);  
  height: var(--section-bar-height);
  line-height: var(--section-bar-height);
  padding: 0px var(--padding-base);
  background: var(--section-bar-bkg);
}

form div.section_bar:before 
{
  display: inline-block;
  float: left;
  font-family: var(--icon-font);
  font-size: var(--icon-size-base);
  padding-right: var(--padding-base);
  color: var(--icon-color);
}

form div.section[data-toggle="1"] div.section_bar 
{
    cursor: pointer;
}

form div.section[data-toggle="1"] div.section_bar:after
{
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    content: "\f077";        
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    height: var(--section-bar-height);
    line-height: var(--section-bar-height);
    padding: 0px var(--padding-base);
    color: var(--icon-color);
    transition: var(--transition-transform);
    -webkit-transition: var(--transition-transform);
}

form div.section[data-open="1"] div.section_bar:after
{
    transform: rotate(180deg);
}

/* FORM > SECTIONS > CONTENT */

form div.section_content 
{
    position: relative;
    width: 100%;
    padding-bottom: var(--padding-base);
}

.section_spacer
{
    display: block;
    width: 100%;
    height: var(--margin-base);
}

/* FORM > SECTIONS > SEARCH */

form div#__filter__
{
    margin-bottom: var(--margin-base);
}

form div#__filter__ div.section_content
{
    background-color: var(--area-bkg-inverted);
    padding: 0px var(--padding-base) var(--padding-base) var(--padding-base);
}

/* FORM > SECTIONS > SEARCH DRAWER */

form div#__filterdrawer__
{
    position: fixed;
    overflow: hidden;
    z-index: 9;
    display: grid;
    top: 0px;
    right: 0px;
    height: 100%;
    width: var(--drawer-width-base);
    grid-template-rows: var(--drawer-header-height-small) auto var(--drawer-footer-height);
    background: var(--bkg-color-base);
    box-shadow: var(--shadow-left);
    border-left: var(--area-border-base);        
}

form div#__filterdrawer__ div.section_bar
{
    grid-row: 1 / span 1;
    height: var(--drawer-header-height-small);
    line-height: var(--drawer-header-height-small);
    padding-left: var(--input-label-width);
    font-size: var(--font-size-xl);     
    background-color: var(--bkg-color-base);   
    color: var(--font-color-light);
}

form div#__filterdrawer__ div.section_bar:before
{
    color: var(--font-color-light);
}

form div#__filterdrawer__ div.section_content
{
    grid-row: 2 / span 1;
    position: initial;
    overflow-y: auto;
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);    
}

form div#__filterdrawer__ div.section_content div.buttonbar
{
    position: absolute;
    bottom: 0px;
    top: auto;
    left: 0px;
    margin: 0px;
    height: var(--drawer-footer-height);    
    padding-top: var(--margin-base);
    background: var(--bkg-color-base);
}

.filterdrawerclose
{
    position: absolute;    
    top: var(--padding-base);
    left: var(--padding-base);
    line-height: var(--icon-dim-base);
}

.filterdrawerclose:before
{
    display: block;
    content: "\f054";
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

/* FORM > SECTIONS > ROOT */

form div#__root__ 
{
    display: block;
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

form div#__root___content 
{
    padding: 0px !important;
}

/* FORM > BUTTON BAR > ITEMS */

form > div.buttonbar.bb-items,
div.buttonbar.bb-items-include
{
    display: block;
    margin: 0px;
    width: auto;
    position: fixed;
    background: transparent;
    left: auto;
    z-index: 2;
    bottom: 20px;
    right: 32px;
}

form > div.buttonbar.bb-items .btn,
div.buttonbar.bb-items-include .btn
{
    padding: 0px;
    overflow: hidden;
    font-size: 0px;
    border-radius: 100%;
    width: var(--icon-dim-larger);
    min-width: var(--icon-dim-larger);
    height: var(--icon-dim-larger);
    line-height: var(--icon-dim-larger);
    box-shadow: var(--shadow-base);
    box-sizing: content-box;
    border: 4px solid #FFFFFF;
}

form > div.buttonbar.bb-items .btn:before,
div.buttonbar.bb-items-include .btn:before
{
    display: block;
    width: 100%;
    font-family: var(--icon-font);        
    font-size: var(--icon-size-mid);
    color: var(--negative-color);
}

form > div.buttonbar.bb-items .btn.btn-add:before,
div.buttonbar.bb-items-include .btn.btn-add:before
{
    content: "\f067";
}

form > div.buttonbar.bb-items .btn.btn-pdf:before,
div.buttonbar.bb-items-include .btn.btn-pdf:before
{
    content: "\f1c1";
}

form > div.buttonbar.bb-items .btn.btn-calendar:before,
div.buttonbar.bb-items-include .btn.btn-calendar:before
{
    content: "\f073";
}

/* FORM > INPUTS */

form div.inputwrap 
{ 
    position: relative;
    overflow: hidden; 
}

.inputwrap-fx
{ 
    -webkit-transition: var(--transition-height);
    transition: var(--transition-height);
}

.inputwrap-fx-trigger {  }

form div.inputwrap div.inputwrapinner 
{ 
    position: relative;
    padding-top: var(--padding-base);
}

form div.inputwrap div.inputwrapinner label
{ 
    float: left;
    position: relative;
    text-align: right;    
    letter-spacing: 1px;
    padding-right: var(--icon-dim-base);
    width: var(--input-label-width);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    font-size: var(--font-size-smaller);
}

form div.inputwrapinner.required label:after 
{
    position: absolute;
    display: block;
    content: "\f08d";
    top: 0px;
    right: calc(var(--padding-base) / 2);
    height: calc(var(--input-height-base) / 2);
    line-height: calc(var(--input-height-base) / 2);
    font-family: var(--icon-font);
    font-size: var(--icon-size-small);
}

form div.inputwrap div.inputwrapinner dfn.inputhelper
{
    margin-left: var(--margin-base);
}

form div.inputwrap div.inputwrapinner input,
form div.inputwrap div.inputwrapinner textarea
{
    vertical-align: top;
    width: var(--input-width-base);
}

form div.inputwrap div.inputwrapinner textarea
{
    display: block;
    height: var(--input-height-large);
}

form div.inputwrap div.inputwrapinner textarea.xl
{
    height: var(--input-height-xl);
}

form div.inputwrap div.inputwrapinner input.halfsize 
{
    width: calc(var(--input-width-base) / 2);
}

form div.inputwrap div.inputwrapinner input.rightside 
{
    text-align: right;
}

/* FORM > INPUTS > TEXT , NUMERIC */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]
{
    -moz-appearance: textfield;
}

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
{
    -webkit-appearance:none;
}

/* FORM > INPUTS > RANGE */

input[type=range]
{
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    padding: 0px;
    margin: 0px;    
    border: none;
    cursor: pointer;
    height: var(--padding-base);
    border-radius: var(--border-radius-base);
    background-color: var(--state-color-off);
}

input[type=range]:focus
{
    border: none;
}

input[type=range]::-webkit-slider-thumb
{
    -webkit-appearance: none; 
    appearance: none;        
    cursor: pointer;
    border: none;
    border-radius: 100%;    
    width: var(--icon-dim-small);
    height: var(--icon-dim-small);
    background: var(--icon-color);    
}


input[type=range]::-moz-range-thumb
{
    cursor: pointer;
    border-radius: 100%;        
    border: none;
    width: var(--icon-dim-small);
    height: var(--icon-dim-small);
    background: var(--icon-color);
}

/* FORM > INPUTS > SELECT */

form div.inputwrap div.inputwrapinner .selectbox,
form div.inputwrap div.inputwrapinner .selperiodbox,
form div.inputwrap div.inputwrapinner .limitbox
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    width: var(--input-width-base);
    height: var(--input-height-base);
}

form div.inputwrap div.inputwrapinner .selectbox.ext
{
}

form div.inputwrap div.inputwrapinner .selectbox:after,
form div.inputwrap div.inputwrapinner .selperiodbox:after,
form div.inputwrap div.inputwrapinner .limitbox:after
{
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;    
    text-align: center;
    content: "\f078";
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--icon-color);
}

form div.inputwrap div.inputwrapinner .selectbox input.selectwraptext,
form div.inputwrap div.inputwrapinner .selperiodbox input.selperiodwraptext,
form div.inputwrap div.inputwrapinner .limitbox input.selectwraptext
{
    cursor: pointer;
    width: 100%;
}

/* FORM > INPUTS > SELECT > MULTIPLE */
 
div.multiselect-outer-wrap
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: var(--input-width-base);
}

.multiselectbox,
.multiselectbigbox 
{
    position: relative;    
    cursor: pointer;   
    overflow-y: auto;
    width: 100%;
    height: var(--input-height-mid);
    padding: var(--padding-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-base);
}

.multiselectbigbox 
{ 
    height: var(--input-height-large);
}

.multiselectbox:after,
.multiselectbigbox:after 
{ 
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    content: "\f141";
    padding: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

.multiselectbox > span,
.multiselectbigbox > span 
{
    position: relative;
    display: block;
    float: left;
    text-align: center;
    letter-spacing: 1px;
    margin: 0px var(--margin-close) var(--margin-close) 0px;
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base) !important;
    min-width: var(--input-width-tiny);
    padding: 0px var(--padding-base);    
    font-size: var(--font-size-smaller);
    border-radius: var(--border-radius-base);
    background: var(--btn-color-bkg);
    color: var(--btn-color);
}

.multiselectbox > span > span
.multiselectbigbox > span > span
{
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base) !important;
}

form div.inputwrap div.inputwrapinner .multiselectbox > span > input,
form div.inputwrap div.inputwrapinner .multiselectbigbox > span > input 
{
  display: none !important;
}

.multiselectbox > span .icon,
.multiselectbigbox > span .icon 
{
  float: right;
  cursor: pointer;
  height: var(--icon-dim-small);
  line-height: var(--icon-dim-small);
  color: var(--btn-color);
}

.multiselectbox > span .icon:before,
.multiselectbigbox > span .icon:before
{
    font-size: var(--icon-size-tiny);
}

/* FORM > INPUTS > SELECT > MULTIPLE > TABLES */

div.multiselect-tab-wrap
{
    padding-top: var(--padding-base);
}

table.multiselectwrap td
{
    max-width: 60vw;
    overflow-wrap: break-word;
    padding-bottom: var(--padding-base);
}

table.multiselectwrap td.multiselectgroup
{
    vertical-align: top;
    padding-right: var(--padding-base);
    padding-bottom: var(--padding-base);    
}

table.multiselect
{
    width: 100%;
}

table.multiselect th,
table.multiselect td
{
    text-align: left;
    padding: var(--padding-base) var(--padding-base) var(--padding-base) 0px;
    height: var(--tab-row-height);
}

table.multiselect th 
{     
    text-transform: uppercase;    
    white-space: nowrap;
    font-weight: normal;
    font-family: var(--font-bold);
    border-bottom: var(--tab-head-border);
}

table.multiselect th.multictrl
{
    width: var(--checkbox-dim);
}

table.multiselect th a,
table.multiselect td a
{
    color: var(--font-color-base);
}

table.multiselect td div.multielement
{
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
}

table.multiselect td div.multielement a
{
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

table.multiselect td.multisearchsize,
table.multiselect td.multisearch
{
    position: relative;
    height: var(--input-height-fat);
}

table.multiselect td.multisearch:before
{
    position: absolute;
    content: "\f002";
    top: var(--margin-base);
    left: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--font-color-light);
}

form div.inputwrap div.inputwrapinner table.multiselect td.multisearch input,
table.multiselect td.multisearch input
{
    width: 100%;
    padding-left: var(--icon-side-padding);
}

table.multiselect td.multisearch a.multisearchreset
{
    display: none;
    position: absolute;
    cursor: pointer;
    top: 12px;
    left: 2px;
    width: var(--input-height-inborder);
    height: calc(var(--input-height-inborder) - 4px);
    background: var(--input-color-bkg);
}


/* FORM > INPUTS > SELECT > MULTIPLE > TOGGLE TABLES */

table.multitoggle
{
    width: 50%;
    float: left;
}

/* FORM > INPUTS > SELECT > MULTIPLE > CHECKBOX */

span.multiselect a,
span.multiselect_all a
{
    margin: 0px var(--margin-close);
    color: var(--font-color-base);
}

/* FORM > INPUTS > PASSWORD */

span.pwd_none,
span.pwd_veryweak,
span.pwd_weak,
span.pwd_better,
span.pwd_medium,
span.pwd_strong,
span.pwd_strongest 
{
  display: inline-block;
  position: relative;
  text-align: center;
  width: var(--input-width-base);
  height: var(--input-height-base);
  line-height: var(--input-height-base);
  background-color: var(--input-color-bkg);
  color: var(--input-color-readonly);
  border: var(--input-border);
  border-radius: var(--border-radius-base);
}
span.pwd_none {
  background: #F0F0F0;
  color: #999999;
  border-color: #DDDDDD;
}
span.pwd_veryweak {
  background: #f44100;
  color: #ffffff;
  border-color: #f44100;
}
span.pwd_weak {
  background: #fa5d20;
  color: #ffffff;
  border-color: #fa5d20;
}
span.pwd_better {
  background: #3ecdff;
  color: #ffffff;
  border-color: #3ecdff;
}
span.pwd_medium {
  background: #009fd7;
  color: #ffffff;
  border-color: #009fd7;
}
span.pwd_strong {
  background: #00dbb1;
  color: #ffffff;
  border-color: #00dbb1;
}
span.pwd_strongest {
  background: #00c29c;
  color: #ffffff;
  border-color: #00c29c;
}

a.pwd_masktoggle 
{ 
    display: inline-block;
    position: absolute;
    right: calc(100% - var(--input-label-width) - var(--input-width-base));
    bottom: 0px;
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

/* FORM > INPUTS > ASYNC CHECK */

span.async_check_wrap,
span.pwd_check_wrap
{ 
    position: absolute;
    bottom: 0px;
    right: calc(100% - var(--input-label-width) - var(--input-width-base));
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

span.pwd_check_wrap
{
    right: calc(100% - var(--input-label-width) - var(--input-width-base) + var(--input-height-base));
}

span.async_check_wrap .icon,
span.pwd_check_wrap .icon
{
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

/* FORM > INPUTS > CHECKBOX */

input[type=checkbox]
{
    display: none;    
}

.checkboxwrap,
.checkboxwrap_checked
{
   display: block;
   text-align: center;
   cursor: pointer;
   width: var(--checkbox-dim);
   height: var(--checkbox-dim);
   border: var(--checkbox-border);
   border-radius: var(--checkbox-border-radius);
}

.checkboxwrap_checked 
{ 
    background: var(--checkbox-checked-bkg);
    border-color: var(--checkbox-checked-bkg);
}

.checkboxwrap_checked:before 
{
   display: block;
   text-align: center;
   content: "\f00c";
   font-family: var(--icon-font);
   font-size: var(--checkbox-icon-size);
   width: var(--checkbox-icon-dim);
   height: var(--checkbox-icon-dim);
   line-height: var(--checkbox-icon-dim);
   color: var(--checkbox-checked-color);
}

/* FORM > INPUTS > RADIO BUTTON */

.radiobuttons
{
    display: inline-block;
}

input[type=radio]
{
    display: none;
}

.radio-wrapper 
{
    height: var(--icon-dim-base);    
    line-height: var(--icon-dim-base);
}

.radio-wrapper .label 
{
    display: inline-block;
    vertical-align: top;
    margin-left: var(--margin-close);
    line-height: var(--icon-dim-base);
}

.radio-wrapper .label a
{
    color: var(--font-color-base);
}

.radiowrap,
.radiowrap_checked 
{
    cursor: pointer;
    position: relative;
    display: inline-block;    
    margin-top: 3px;
    border-radius: 100%;    
    width: var(--checkbox-dim);
    height: var(--checkbox-dim);    
    border: var(--checkbox-border);
}

.radiowrap:before,
.radiowrap_checked:before
{  
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 100%;
    width: var(--icon-size-tiny);
    height: var(--icon-size-tiny);    
}

.radiowrap_checked:before { background-color: var(--font-color-base); }

/* FORM > INPUTS > ON-OFF */

.input_yesno_box 
{
    display: block;
    position: relative;    
    overflow: hidden;
    width: var(--input-width-tiny);
    height: var(--input-height-base);
    border-radius: var(--border-radius-base);
    border: var(--input-border);
    background-color: var(--input-color-bkg);
}

.input_yesno_box:focus
{
    border: var(--input-border-focus);
}

.input_yesno_toggle 
{
    position: absolute;
    top: 0px;
    display: inline-block;
    z-index: 2;
    width: calc(var(--input-width-tiny) / 2);
    height: var(--input-height-base);
    background-color: var(--input-color-bkg);    
    border-radius: var(--border-radius-base); 
    transition: left 0.25s ease 0s;
}

.input_yesno_toggle_yes 
{
    left: 0px;    
}
.input_yesno_toggle_no 
{
    left: calc(var(--input-width-tiny) / 2);
    
}
.input_yes,
.input_no 
{
    position: absolute;
    top: 3px;
    display: block;
    font-size: 0px;
    text-align: center;
    z-index: 1;    
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    border-radius: var(--border-radius-base);    
}
.input_yes 
{
    right: 4px;
    background-color: var(--state-color-success);
}
.input_no 
{
    left: 4px;
    background-color: var(--state-color-off);
}

/* FORM > INPUTS > STEPPER */

span.stepper
{
    position: relative;
    display: inline-block;
    width: var(--input-width-base);
    height: var(--input-height-base);
    border: var(--input-border);
    border-radius: var(--border-radius-base);
    background: var(--input-color-bkg);
}

span.stepper[data-focus="1"]
{
    border: var(--input-border-focus);
}

span.stepper.readonly
{
    border: none;
}

span.stepper > input,
form div.inputwrap div.inputwrapinner span.stepper > input 
{
    border: none;
    vertical-align: top;
    width: var(--input-width-base);
    height: var(--input-height-inborder);
    line-height: var(--input-height-inborder);    
}

span.stepper .unithelper 
{
    float: right;
    display: inline-block;
    text-align: center;
    font-style: normal;
    height: var(--input-height-inborder);
    line-height: var(--input-height-inborder);
    padding: 0px var(--padding-base);
    background: var(--input-color-bkg);
    color: var(--input-color-readonly);
    border-radius: var(--border-radius-base);
}

span.numeric_incdec 
{
    float: right;
    display: inline-block;
    vertical-align: top;
    height: var(--input-height-inborder);    
    background: var(--input-color-bkg);
    border-radius: var(--border-radius-base);
}

span.numeric_incdec .icon 
{
    display: inline-block;
    text-align: center;    
    width: var(--icon-dim-large);
    height: var(--input-height-inborder);
    line-height: var(--input-height-inborder);
    font-size: var(--icon-size-tiny);
}

/* FORM > INPUTS > TIME & HOURS */

div.time_box,
div.hours_box
{
    display: inline-block;
    width: var(--input-width-base);
    height: var(--input-height-base);
}

div.time_box span.stepper,
div.hours_box span.stepper
{    
    width: 50%;    
}

/* FORM > INPUTS > POP-UP */                     

div.popup_box 
{
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    width: var(--input-width-base);
    height: var(--input-height-base);
    background-color: var(--input-color-bkg);
    border-radius: var(--border-radius-base);    
}

div.popup_box.popup_box_no_manual
{
    border: var(--input-border);
}

div.popup_box.halfsize
{ 
    display: inline-block;
    vertical-align: top;
    width: calc(var(--input-width-base) / 2);
}

div.popup_box.fullsize
{
    width: 100%;
}

.popup_buttons 
{
    display: inline-block;
    position: absolute;
    top: 1px;
    right: 0px;
    height: var(--input-height-base);
}

div.popup_box.popup_box_no_manual .popup_buttons
{
    top: -1px;
}

.popup_buttons .icon 
{
    display: inline-block;
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

.popup_buttons .icon:after
{
    display: none;
}

.popup_buttons .__timezone
{
    cursor: default;
    letter-spacing: 1px;
    vertical-align: top;
    margin-right: var(--margin-close);
    line-height: var(--input-height-base);
    font-size: var(--font-size-smaller);
    color: var(--input-color-placeholder);
}

.__timezone:before
{
    content: "\f0ac";
    font-family: var(--icon-font);
    margin-right: var(--margin-close);
}

.popup_buttons .colorpreview
{
    display: inline-block;
    margin-top: calc((var(--input-height-base) - var(--icon-dim-base)) / 2);
    margin-right: calc((var(--input-height-base) - var(--icon-dim-base)) / 2);
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    border-radius: var(--border-radius-base);
    border: var(--input-border);
    background: var(--btn-color-bkg);
}

form div.inputwrap div.inputwrapinner div.popup_box input
{
    cursor: pointer;
    width: 100%;
}

form div.inputwrap div.inputwrapinner div.popup_box input.popup_manualtxt 
{ 
    cursor: text;
    padding-right: 104px;
}

/* FORM > INPUTS > DATE-TIME */

form div.daterange
{
    display: inline-block;
    vertical-align: top;
    width: var(--input-width-base);
    height: var(--input-height-base);
}

form div.daterange > span 
{
    display: inline-block;
    width: 50%;
}

form div.daterange > span > div.popup_box 
{
    width: 100%;
}

/* FORM > INPUTS > CALENDAR */

div.inputcalendarwrap 
{ 
    position: relative;
    overflow: hidden;
    margin: 0px;    
    box-sizing: content-box;    
    width: var(--input-width-large);
    font-size: var(--font-size-smaller);
}

div.inputcalendarheader 
{ 
    text-align: center;
    margin-bottom: var(--margin-close);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
}

div.inputcalendarheader a.title 
{ 
    text-transform: uppercase;
    padding: 0px var(--padding-base);
    font-family: var(--font-bold);
    font-size: var(--font-size-base);
    color: var(--font-color-base);
}

div.inputcalendarheader a.title:hover
{
    color: var(--active-color);
}

div.inputcalendarheader .icon_prev { float: left; }
div.inputcalendarheader .icon_next { float: right; }

div.inputcalendarfooter 
{ 
    position: relative;
    text-align: center;
    margin-top: var(--margin-close);    
}

div.inputcalendarfooter a.inputcalendartime 
{ 
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    color: var(--font-color-base);
}                                 

div.inputcalendarwrap div.rapidselector 
{ 
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 0px;
    overflow: hidden;    
    text-align: center;
    background: var(--bkg-color-base);
}

div.inputcalendarwrap div.rapidselector.rapidselector-picker
{
    position: relative;
    z-index: unset;
    height: auto;
}

div.inputcalendarwrap div.rapidtop { top: var(--icon-dim-base); }
div.inputcalendarwrap div.rapidbottom { bottom: var(--icon-dim-base); }

.__rapidselector-fx 
{ 
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.__rapidselector-fx-trigger
{ 
    height: calc(100% - 2 * var(--icon-dim-base) - var(--margin-close)) !important;
}

div.inputcalendarwrap div.rapidselector a 
{ 
    display: inline-block;
    text-align: center;
    width: 33.33%;    
    letter-spacing: 1px;
    padding: var(--padding-base) 0px;
    color: var(--font-color-base);
    border-radius: var(--border-radius-tiny);
} 

div.inputcalendarwrap div.rapidselector a:hover
{
    background: var(--tab-row-bkg-hover);
}

div.inputcalendarwrap div.rapidselector a.selected
{ 
    background: var(--active-color);
    color: var(--negative-color);
}        

div.inputcalendarwrap div.rapidselector div.rapidselector-hours,
div.inputcalendarwrap div.rapidselector div.rapidselector-minutes
{ 
    text-align: left;
    padding-top: var(--padding-base);
}

div.inputcalendarwrap div.rapidselector div.rapidselector-hours a { width: 25%; padding: 4px; }
div.inputcalendarwrap div.rapidselector div.rapidselector-minutes a { width: 12.5%; padding: 3px; }

div.inputcalendarwrap div.rapidselector a.shift_prev,
div.inputcalendarwrap div.rapidselector a.shift_next,
div.inputcalendarwrap div.rapidselector div.shift_content { display: inline-block;
                                                            height: 100%; }

div.inputcalendarwrap div.rapidselector div.shift_content { width: calc(100% - 2 * var(--icon-dim-base)); }

div.inputcalendarwrap div.rapidselector a.shift_prev,
div.inputcalendarwrap div.rapidselector a.shift_next
{ 
    background: none;
    margin-top: 38px;    
    width: var(--icon-dim-base);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

div.inputcalendarwrap div.rapidselector a.shift_prev:hover,
div.inputcalendarwrap div.rapidselector a.shift_next:hover
{ 
    color: var(--active-color);
}

div.inputcalendarwrap div.rapidselector a.shift_prev { float: left; }
div.inputcalendarwrap div.rapidselector a.shift_prev:before { content: "\f053"; }
div.inputcalendarwrap div.rapidselector a.shift_next { float: right; }         
div.inputcalendarwrap div.rapidselector a.shift_next:before { content: "\f054"; }                                               

table.inputcalendar
{
    width: 100%;
}

table.inputcalendar td,
table.inputcalendar th 
{ 
    text-align: center;
    padding: 4px;    
}

table.inputcalendar th 
{ 
    font-weight: normal;
    text-transform: uppercase;
    font-family: var(--font-bold);
    font-size: var(--font-size-tiny);
    border-bottom: var(--tab-head-border);
}

table.inputcalendar td
{ 
    cursor: pointer;
}

table.inputcalendar td:hover
{
    background-color: var(--tab-row-bkg-hover);
}

table.inputcalendar td.nomonthday,
table.inputcalendar td.nomonthday:hover
{ 
    opacity: var(--opacity-disabled);
    background-color: transparent;
}

table.inputcalendar td.period,
table.inputcalendar td.period:hover
{
    background: rgba(0, 159, 215, 0.2);
}

table.inputcalendar td.selected
{ 
    border-radius: var(--border-radius-tiny);
    background: var(--active-color);
    color: var(--negative-color);
}

/* FORM > INPUTS > TIME PICKER */

div.timepickerwrap
{
    position: relative;
    overflow: hidden;
}

div.timepicker_hourswrap,
div.timepicker_minuteswrap,
div.timepicker_setwrap,
div.timepicker_separatorwrap,
div.timepicker_separatortrail
{
    display: inline-block;
    vertical-align: top;
}

div.timepicker_hourswrap .icon,
div.timepicker_minuteswrap .icon
{
    width: 100%;
}

div.timepicker_setwrap
{    
    display: inline-flex;
    height: 80px;
    align-items: center;
    justify-content: center;
    margin-left: var(--margin-close);
}

div.timepicker_setwrap .icon
{  
    font-size: var(--icon-size-mid);
}

div.timepicker_separatorwrap
{
    line-height: 80px;
    margin: 0px var(--margin-close);
}

div.timepicker_separatortrail
{
    margin-left: var(--margin-close);
}

div.timepicker_hourswrap input,
div.timepicker_minuteswrap input
{
    text-align: center;
    width: var(--input-width-wee);   
}

/* FORM > INPUTS > DATE-TIME PICKER */

div.dtpicker-date,
div.dtpicker-time
{
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

div.dtpicker-date
{
    padding-right: var(--margin-base);
    border-right: var(--area-border-base);
}

div.dtpicker-time
{
    position: relative;
    padding-left: var(--margin-base);
}

div.dtpicker-time-header
{
    display: block;
    width: 100%;
    height: 58px;
    margin-bottom: var(--margin-base);
    border-bottom: var(--tab-head-border); 
}

div.dtpicker-time-header .icon,
div.dtpicker-time-header .icon:before
{
    margin: auto;
    height: 100%;
}

div.dtpicker-time-footer
{
    margin-top: var(--margin-base);
    text-align: center;
}

div.dtpicker-time-footer .btn.btn-submit
{
    min-width: unset;
    width: 100%;
}

/* FORM > INPUTS > COLOR PICKER */

.palette-cell
{
    position: relative;
    cursor: pointer;
    margin: 1px;
    width: var(--checkbox-dim);
    height: var(--checkbox-dim);
    border-radius: calc(var(--border-radius-base) / 2);
}

.palette-cell:hover,
.palette-cell.selected
{
    border: 1px solid #FFFFFF;
}

.palette-cell:hover:after,
.palette-cell.selected:after
{
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border: 1px solid #000000;
    border-radius: calc(var(--border-radius-base) / 2);
}

.palette-col
{
    display: inline-block;
}

.palette-row
{
    height: calc(var(--checkbox-dim) + 2px);
    margin-bottom: var(--margin-close);
}

.palette-row .palette-cell
{
    display: inline-block;
}

/* FORM > INPUT > FORMATS */

form div.inputwrapinner div.inputformats div.manualbox 
{  
    width: var(--input-width-base);
    margin-left: var(--input-label-width);
}

form div.inputwrapinner div.inputformatsr div.manualbox span.toplabel 
{ 
    display: block;
}

form div.inputwrapinner div.inputformats div.manualbox .hzmanual
{ 
    display: inline-block;
    width: 33.3%;
    vertical-align: top;
}

form div.inputwrapinner div.inputformats div.manualbox .hzmanual-halfsize 
{ 
    display: inline-block;
    width: 50%;
}

form div.inputwrapinner div.inputformats div.manualbox .hzmanual input
{
    width: 100%;
}

form div.inputwrapinner div.inputformats div.manualbox .hzmanual span.stepper
{
    width: 100%;
}

form div.inputwrapinner div.inputformats div.manualbox .hzmanual span.stepper > input
{
    width: 100%;
}

form div.inputwrapinner div.inputformats div.manualbox .hzmanual span.stepper > span.numeric_incdec
{
    position: absolute;
    right: 8px;
}

/* FORM > INPUT > AUTOCOMPLETE */

.autocomplete-box 
{
    display: none;
    opacity: 0;
    position: absolute;
    z-index: 99;
    width: 500px;    
    text-align: left;    
    outline: none;
    cursor: default;
    overflow-y: auto;
    max-height: calc(var(--select-item-height) * 10);
    min-height: var(--select-item-height);
    background: var(--select-color-bkg);
    border: var(--select-border);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);
    transition: var(--transition-base);
}

.autocomplete-box.show
{
    display: block;
    opacity: 1;
}

.autocomplete-box div.auto-item
{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    height: var(--select-item-height);
    line-height: var(--select-item-height);
    padding: 0px var(--padding-base);    
    color: var(--font-color-base);
}

.autocomplete-box div.auto-item.autocomplete-item-current
{
    background: var(--active-color);
    color: var(--negative-color);
}

.autocomplete-box div.auto-item b
{
    font-weight: normal;
    font-family: var(--font-bold);
}

/* FORM > INPUTS > READONLY */   

.readonly_box
{
    display: inline-block;
    vertical-align: top;
    width: var(--input-width-base);    
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding: 0px var(--padding-base);
    background-color: var(--input-color-bkg);
    border-radius: var(--border-radius-base);
}

.readonly_box.active,
input[type=text].active
{
    cursor: pointer;
}

/* FORM > INPUTS > DYNAMIC TABLE */

.dynamic_wrapper,
.dynamic_table 
{
    position: relative;
    display: inline-block;    
    vertical-align: top;
    width: var(--input-width-base);
}

.dynamic_wrapper .dynamic_table 
{
    display: block;
    width: 100%;
}

.dynamic_table .dt_row 
{
    float: left;
    position: relative;
    display: block;
    width: 100%;
    height: var(--input-height-base);
}

.dynamic_table .dt_row._topspacer
{
    margin-top: var(--margin-close);
} 

.dynamic_table .dt_row .dt_cell 
{
    float: left;
    position: relative;
    display: inline-block;          
    vertical-align: top;
    width: auto;
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

.dynamic_table .dt_row .dt_cell.dt_header
{
    white-space: nowrap; 
    text-transform: uppercase;
    font-family: var(--font-bold);
    border-bottom: var(--tab-head-border);
}

.dynamic_table .dt_row .dt_cell._2_cols
{
    width: 50%;
}

.dynamic_table .dt_row .dt_cell._3_cols
{
    width: 33.33%;
}

.dynamic_table .dt_row .dt_cell._3aux_cols
{
    width: 30%;
}

.dynamic_table .dt_row .dt_cell.dt_cex,
.dynamic_table .dt_row .dt_cell._4_cols
{
    width: 25%;
}

.dynamic_table .dt_row .dt_cell._5_cols
{
    width: 20%;
}

.dynamic_table .dt_row .dt_cell .icon
{
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

form div.inputwrap div.inputwrapinner .dynamic_table .popup_box,
form div.inputwrap div.inputwrapinner .dynamic_table .stepper
{
    width: 100%;
}

form div.inputwrap div.inputwrapinner .dynamic_table .selectbox,
form div.inputwrap div.inputwrapinner .dynamic_table .selperiodbox
{
    width: 100%;
}

form div.inputwrap div.inputwrapinner .dynamic_table input
{
    width: 100%;
}

form div.inputwrap div.inputwrapinner .dynamic_table span.stepper > input 
{
    width: 50%;
}

form div.inputwrap div.inputwrapinner .dynamic_table .dt_row .dt_cell._3_cols span.stepper > input
{
    width: 33%;
}

form div.inputwrap div.inputwrapinner .dynamic_table .dt_row .dt_cell._3aux_cols span.stepper > input
{
    width: 20%;
}

/* FORM > INPUTS > INLINE MODULE */

form div.inputwrap div.inputwrapinner div.module_box
{
    display: inline-block;
    border: 1px solid transparent;
    width: var(--input-width-base);    
    border-radius: var(--border-radius-base);
}

form div.inputwrap div.inputwrapinner div.module_box .icon
{
    display: inline-block;
    margin-right: var(--margin-close);
}

.module_inline_table_wrap
{
    overflow-x: auto;
    width: 100%;
}

.module_inline_table
{
    width: 100%;
}

.module_inline_table th,
.module_inline_table td
{
    min-width: 16px;    
    overflow: hidden;    
    text-align: left;    
    height: var(--tab-row-height);
    padding-right: var(--padding-base);
    padding-bottom: var(--padding-base);
}

.module_inline_table th
{    
    white-space: nowrap;
    font-weight: normal;
    font-family: var(--font-bold);
    text-transform: uppercase;    
    background-color: var(--tab-row-bkg-even);
    border-bottom: var(--tab-head-border);
}

.module_inline_table td
{
    vertical-align: top;
    padding-top: var(--padding-base);
}

.module_inline_table th.col-1 { width: 100%; }
.module_inline_table th.col-2 { width: 50%; }
.module_inline_table th.col-3 { width: 33%; }
.module_inline_table th.col-4 { width: 25%; }
.module_inline_table th.col-5 { width: 20%; }
.module_inline_table th.col-6 { width: 16%; }

.module_inline_table td.col-hidden
{
    width: 0px;
}

.module_inline_table td.col-delete
{
    width: var(--icon-dim-small);
}

.module_inline_table td input,
form div.inputwrap div.inputwrapinner .module_inline_table td input
{
    width: 100%;
}

.module_inline_table td input.prefixed,
form div.inputwrap div.inputwrapinner .module_inline_table td input.prefixed
{
    width: 75%;
}

.module_inline_table td div.prefix,
form div.inputwrap div.inputwrapinner .module_inline_table td div.prefix
{
    display: inline-block;
    width: 25%;
}

.module_inline_table td div.prefix.flag,
form div.inputwrap div.inputwrapinner .module_inline_table td div.prefix.flag
{
    display: flex;
    align-items: center;
    float: left;
}

.module_inline_table td textarea,
form div.inputwrap div.inputwrapinner .module_inline_table td textarea
{
    width: 100%;
    height: var(--input-height-mid);
}

.module_inline_table td span.stepper,
form div.inputwrap div.inputwrapinner .module_inline_table td span.stepper input
{
    width: 100%;
}

form div.inputwrap div.inputwrapinner .module_inline_table td .selectbox,
form div.inputwrap div.inputwrapinner .module_inline_table td div.popup_box
{
    width: 100%;
}

/* FORM > INPUTS > TAGS */

.tags-input-wrapper
{
    position: relative;
    display: inline-block;  
    width: var(--input-width-base);    
}

.tags-input-manual-toggle
{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.tags-input-manual-toggle.off
{
    opacity: 0.5;
}

form div.inputwrap div.inputwrapinner .tags-input-wrapper textarea,
.tags-input-wrapper textarea
{
    width: 100%;
    height: auto;
    min-height: var(--input-height-mid);
    box-sizing: border-box;
}

.tags-input-container
{
    position: relative;
    display: inline-block;        
    cursor: text;
    width: 100%;
    min-height: var(--input-height-mid);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-base);
}

.tags-input-container[data-focus="1"]
{
    border: var(--input-border-focus);
}

.tags-input-container input,
form div.inputwrap div.inputwrapinner .tags-input-container input
{
    border: none;
    outline: none;
    width: 33%;
}

.tags-input-container .tag-edit-cancel
{
    display: inline-block;
    position: absolute;
    z-index: 3;
}

.tags-input-container .tag-item,
.mail_snippet,
.phone_snippet
{
    position: relative;
    display: inline-block;
    cursor: default;
    margin: 2px;
    white-space: nowrap;
    min-height: var(--icon-size-mid);
    line-height: var(--icon-size-mid);
    padding: 0px var(--padding-base);    
    background-color: var(--section-bar-bkg);
    border-radius: var(--border-radius-base);        
}

.tags-input-container .tag-item
{
    margin: var(--margin-close) 0px 2px var(--margin-close);
}

.tags-input-container .tag-item .icon
{
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--margin-close);
    width: var(--icon-dim-small);    
    height: var(--icon-dim-small);
    line-height: var(--icon-dim-small);
    font-size: var(--icon-size-small);
    color: var(--icon-color);
}

.tags-input-container .tag-item.existing
{
    background: var(--btn-color-bkg);
    color: var(--btn-color);
}

.tags-input-container .tag-item.invalid
{
    color: var(--state-color-fail);
    background-color: rgba(241, 96, 87, 0.25)
}

.tags-input-container .tag-item.invalid.existing
{
    color: var(--btn-color);
    background-color: var(--state-color-fail);
}

.tags-input-container .tag-item.invalid .icon
{
    color: var(--state-color-fail);
}

.tags-input-container .tag-item.existing .icon,
.tags-input-container .tag-item.invalid.existing .icon
{
    color: var(--btn-color);
}

.tags-input-container .tag-item.w-val-sep
{
    margin-right: var(--margin-close);
}

.tags-input-container .tag-item.w-val-sep:after
{
    content: attr(data-valsep);
    text-align: center;
    display: block;
    position: absolute;    
    top: 0px;
    right: calc(-2 * var(--margin-close));    
    width: var(--margin-base);
    color: var(--font-color-base);
}

.tags-input-container[data-focus="0"] .tag-item.w-val-sep:last-of-type:after
{
    display: none;
}

.mail_snippet,
.phone_snippet
{
    cursor: pointer;
}

a.mail_snippet:hover,
a.phone_snippet:hover,
.data_table td a.mail_snippet:hover,
.data_table td a.phone_snippet:hover
{
    color: var(--font-color-base);
}

.mail_snippet .icon,
.phone_snippet .icon,
.data_table td .mail_snippet .icon,
.data_table td .phone_snippet .icon
{
    opacity: 0.5;
    display: inline;
    float: none;
    width: var(--icon-dim-small);
    font-size: var(--icon-size-small);    
}

.mail_snippet:hover .icon,
.phone_snippet:hover .icon,
.data_table td .mail_snippet:hover .icon,
.data_table td .phone_snippet:hover .icon
{
    opacity: 1;
}

.mail_snippet .type.icon,
.phone_snippet .type.icon,
.data_table td .mail_snippet .type.icon,
.data_table td .phone_snippet .type.icon
{
    opacity: 0.5;
    margin-left: var(--margin-close);
}

.mail_snippet img,
.phone_snippet img,
.data_table td .mail_snippet img,
.data_table td .phone_snippet img
{
    display: inline-block;
    vertical-align: middle;
}

.phone_snippet em,
.data_table td .phone_snippet em
{
    opacity: 0.5;
    margin-left: var(--margin-close);
}

/* FORM > INPUTS > EDIT AREA */

div.editarea_box
{
    position: relative;
    display: inline-block;        
    width: var(--input-width-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-base);
}

div.editarea_box[data-focus="1"]
{
    border: var(--input-border-focus);
}

div.editarea_wrap
{
    position: relative;
    height: var(--input-height-largest);
}

div.editarea 
{ 
    position: relative;
    outline: none;    
    width: 100%;
    height: var(--input-height-largest);
    padding: var(--padding-base);    
    background-color: var(--input-color-bkg);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-bigger);
}

div.editarea_wrap.small,
div.editarea.small
{
    height: var(--input-height-large);
}

a.block-p {}
div.editarea h1, a.block-h1 { font-size: 28px; font-weight: bold; }
div.editarea h2, a.block-h2 { font-size: 26px; font-weight: bold; }
div.editarea h3, a.block-h3 { font-size: 24px; font-weight: bold; }
div.editarea h4, a.block-h4 { font-size: 22px; font-weight: bold; }
div.editarea h5, a.block-h5 { font-size: 20px; font-weight: bold; }
div.editarea h6, a.block-h6 { font-size: 18px; font-weight: bold; }

/* FORM > INPUTS > EDIT AREA > TOOLBAR */

div.editarea_toolbar
{
   position: relative;
   width: 100%;
   padding: var(--padding-base);
}

div.editarea_toolbar div.editarea_toolbar_section
{
    position: relative;
    display: inline-block;
    padding-right: var(--padding-base);
    margin-right: var(--padding-base);
    border-right: var(--input-border);
}

div.editarea_toolbar div.editarea_toolbar_section:last-child
{
    border-right: none;
}

div.editarea_toolbutton
{    
    vertical-align: top;
    display: inline-block;
    border-radius: var(--border-radius-base);
}

div.editarea_toolbutton a
{
    position: relative;
    display: block;
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    border-radius: var(--border-radius-base);
}

div.editarea_toolbutton a.noicon
{
    text-align: center;
    font-size: var(--font-size-large);
    color: var(--icon-color);
}

div.editarea_toolbutton:hover a.noicon
{
    color: var(--active-color);
}

div.editarea_toolbutton.active a,
div.editarea_toolbutton.active a.noicon
{   
    color: var(--negative-color);
    background: var(--active-color);
}

div.editarea_toolbutton a.select
{
    width: var(--input-width-small);
    color: var(--font-color-base);
}

div.editarea_toolbutton a.select:after
{
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;    
    text-align: center;
    content: "\f078";
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--icon-color);
}

/* FORM > INPUTS > EDIT AREA > TYPOGRAPHY */

div.editarea em
{    
    font-style: italic;
    text-transform: none;
    opacity: unset;
    font-size: unset;
}

div.editarea ul
{         
}

div.editarea ul li,
div.editarea ol li
{
    margin: 0px;
    margin-left: 24px;        
    padding: 0px;
}

/* FORM > INPUTS > EDIT AREA > LINK EDIT */

.link_edit
{
    width: 480px;
}

.link_title
{
    text-transform: uppercase;
    padding: var(--padding-base);
    font-size: var(--font-size-smaller);
    font-family: var(--font-bold);
    border-radius: var(--border-radius-base);
}

.link_edit_form
{
    padding: var(--padding-base);
}

.link_edit_form .link_url,
.link_edit_form .link_label
{
    position: relative;
    margin-bottom: var(--margin-close);
}

.link_edit_form .link_url .icon,
.link_edit_form .link_label .icon
{
    position: absolute;
    top: 3px;
    left: 0px;
    left: var(--padding-base);
    height: var(--input-height-base);
    color: var(--font-color-light);
}

.link_edit_form input
{
    width: 100%;    
    padding-left: calc(var(--input-height-base) + var(--padding-base));
}

/* FORM > INPUTS > EDIT AREA > COLOR EDIT */

.color_edit_box
{
    display: inline-block;    
}

.color_edit_box._color_txt
{    
    margin-right: var(--margin-close);
}

.color_edit_box._color_bkg
{
    margin-left: var(--margin-close);   
}

.color_edit_label
{
    margin-bottom: var(--margin-close);
}

/* FORM > INPUTS > EDIT AREA > EMOJI */

div.editarea img.emoji
{
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: text-top;
}

div.emoji-inline-wrapper
{
    overflow: hidden;
    height: 0px;
    padding-top: var(--margin-close);    
}

div.emoji-inline-wrapper.open
{
    height: auto;
}

div.emoji-category-header
{
    width: 100%;
    position: relative;
}

a.emoji-category-item
{
    display: inline-block;
    width: 11.1%;
    text-align: center;
}

div.emoji-category-selector
{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 11.1%;
    height: 2px;
    background-color: var(--active-color);

    transition: left 0.25s;
}

a.emoji-category-item span
{
    height: 24px;
    filter: grayscale(100%);
}

div.emoji-search input
{
    width: 100%;
    margin-top: var(--margin-close);
}

div.emoji-container
{
    position: relative;
    height: 200px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    margin-top: var(--margin-close);
}

a.emoji-category-title
{
    display: block;
    margin-top: var(--margin-close);
    color: var(--font-color-light);    
}

div.emoji-category-group
{
    margin-top: var(--margin-close);
}

div.emoji-select
{
    margin: 4px;
    cursor: pointer;
}

/* FORM > INPUTS > EDIT AREA > VOICEMESSAGE */

div.voicemessage
{
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--input-height-base);    
    border-radius: var(--border-radius-base);
    background-color: var(--active-color);    
    color: var(--negative-color);
}

div.voicemessage .icon
{    
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--negative-color);
}

div.voicemessage div.info
{
    display: inline-block;    
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--negative-color);
}

div.voicemessage #__audio_record_cancel__
{
    position: absolute;
    top: 0px;
    left: var(--margin-close);
}

div.voicemessage #__audio_record_stop__
{
    position: absolute;
    top: 0px;
    right: var(--margin-close);
}

/* FORM > INPUTS > EDIT AREA > VOICEMESSAGE > UPLOAD PROGRESS */

.progress-upload-media
{
    margin-top: 2px;
    width: 26px;
    height: 26px;
}

.progress-upload-media .back
{
    stroke: var(--active-color);
    stroke-width: 10px;
}

.progress-upload-media .front
{        
    stroke-linecap: round;        
    stroke-width: 10px;
    animation: fill 1s reverse;
    stroke: var(--negative-color);
}

.progress-upload-media .label
{
    font-size: 0px;
    fill: var(--negative-color);
}

/* FORM > INPUTS > NO LABEL STYLE */

form div.__nolabels div.inputwrap div.inputwrapinner label
{
    display: none;
}

form div.__nolabels div.inputwrap div.inputwrapinner input,
form div.__nolabels div.inputwrap div.inputwrapinner textarea
{
    width: 100%;
}

/* MEDIA > PLAYERS */

.audiowrap,
.videowrap
{
    position: relative;
    padding: var(--padding-base);
    background-color: var(--tooltip-bkg-color);
    border-radius: var(--border-radius-base);
    color: var(--negative-color);
}

.videowrap video
{
    width: 100%;
    height: 100%;
}

.videowrap .videoplaytoggle
{
    cursor: pointer;
    opacity: 0.66;
    position: absolute;
    top: calc(50% - (var(--icon-dim-larger) / 2));
    left: calc(50% - (var(--icon-dim-larger) / 2));
    border-radius: 100%;
    width: var(--icon-dim-larger);
    height: var(--icon-dim-larger);    
    background-color: var(--tooltip-bkg-color);
}

.videowrap .videoplaytoggle.icon:before
{
    width: var(--icon-dim-larger);
    height: var(--icon-dim-larger);
    line-height: var(--icon-dim-larger);
    font-size: var(--icon-size-large);
}

.audiowrap .icon,
.videowrap .icon
{
    color: var(--negative-color);
}

.mediaseekwrap
{
    position: relative;
    width: 100%;
    height: 8px;
    outline: none;
    margin-top: var(--margin-base);
    background: var(--state-color-off);
    border-radius: var(--border-radius-base);
}

.__mediaseekbuffer { background: var(--state-color-off); }
.__mediaseekbuffered { background: var(--negative-color); }
.__mediaseekactive { background: var(--active-color); }

.mediaseektooltip
{            
    text-align: center;
    position: absolute;    
    left: 0px;
    top: calc(-1 * (var(--input-height-base) + var(--margin-close)));
    margin-left: calc(-1 * (var(--tooltip-width-tinty) / 2));
    width: var(--tooltip-width-tinty);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--negative-color);
    background-color: var(--tooltip-bkg-color);
    border-radius: var(--border-radius-base);
}

input.mediaseekrange,
form div.inputwrap div.inputwrapinner input.mediaseekrange
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: transparent;
}

input.mediavolumerange,
form div.inputwrap div.inputwrapinner input.mediavolumerange
{        
    width: 50%;
    margin-top: var(--margin-close) !important;
    background: var(--state-color-off);
}

input[type=range].mediaseekrange::-webkit-slider-thumb,
input[type=range].mediavolumerange::-webkit-slider-thumb
{
    background: var(--active-color);
}

input[type=range].mediaseekrange::-moz-range-thumb,
input[type=range].mediavolumerange::-moz-range-thumb
{
    background: var(--active-color);
}

.mediactrl
{        
    text-align: left;
    margin-top: var(--margin-base);
}

.mediactrl *
{
    display: inline-block;
    vertical-align: top;
    margin-right: var(--margin-close);
}

.mediactrl a
{
    cursor: pointer;
}

.mediactrl .timer
{
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-size: var(--font-size-base);
}

.mediactrl .timer span.elapsed
{
    display: inline-block;
    margin: 0px;    
    padding-right: 2px;
}

.mediactrl .timer span.duration
{
    display: inline-block;
    margin: 0px;
    padding-left: 2px;
}

.mediactrl .timer span.duration:before
{
    content: " / ";
}

.mediavolumewrap
{
    margin-top: var(--margin-close);
}

/* MEDIA > EMBED */

embed
{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-base);
}

.embed_fullscreen
{
    z-index: 2;
    position: absolute;
    border-radius: 100%;
    bottom: var(--margin-close);
    left: var(--margin-close);
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    background-color: var(--area-bkg-base);
}

/* FORM > PREVIEWS */

form div.inputwrap div.inputwrapinner .preview 
{
    position: relative;
    width: var(--input-width-base);
    margin-left: var(--input-label-width);
}

/* FORM > PREVIEWS > LIST */

li.preview-list
{
    position: relative;
    display: inline-block;  
    list-style: none;  
    text-align: center;
    letter-spacing: 1px;
    margin: var(--margin-close) var(--margin-close) 0px 0px;
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base) !important;
    min-width: var(--input-width-tiny);    
    font-size: var(--font-size-smaller);
    border-radius: var(--border-radius-base);
    background: var(--btn-color-bkg);
    color: var(--btn-color);
}

li.preview-list .preview-list-inner
{
    display: inline-block;
    padding: 0px var(--padding-base);
}

li.preview-list .preview-list-remove
{
    vertical-align: top;
    display: inline-block;
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base) !important;
    font-size: var(--icon-size-small);
    color: var(--btn-color);
}

/* FORM > PREVIEWS > GRID */

.preview-item
{
    position: relative;
    vertical-align: top;
    display: inline-block;            
    width: var(--preview-width-base);
    height: auto;    
    margin-top: var(--margin-close);
    margin-right: var(--margin-close);
    margin-bottom: var(--margin-close);
}

.preview-item.preview-empty
{
    display: none;
}

.preview-item .preview-fname
{
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - var(--icon-dim-base));
    padding: var(--padding-base) 0px;
    font-size: var(--font-size-smaller);
}

.preview-item .preview-fname span.preview-fsize
{
    display: block;
    color: var(--font-color-light);
}

.preview-item .preview-item-remove
{    
    z-index: 2;
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0px;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
}

.preview-item .preview-inner
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: var(--preview-height-base);
    background-color: var(--area-bkg-base);
    border-radius: var(--border-radius-base);
    background: var(--preview-bkg);
}

.preview-item .preview-inner img
{
    object-fit: cover;
    width: 100%;
    height: var(--preview-height-base);
    border-radius: var(--border-radius-base);
}

.preview-item .preview-inner .__bkgcontain img
{
    object-fit: contain;
}

.preview-item .preview-inner iframe
{
    width: 100%;
    height: var(--preview-height-base);
    border-radius: var(--border-radius-base);
}

.preview-item .audiowrap
{
    width: 90%;
}

.preview-item .videowrap
{
    padding: 0px;
    width: 100%;
    height: var(--preview-height-base);
}

.preview-item .videowrap .mediaseekwrap,
.preview-item .videowrap .mediactrl
{
    display: none;
}

.preview-item .generic,
.preview-item .removed 
{  
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    display: block;
    width: 100%;
    height: var(--preview-height-base);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius-base);
}

.preview-item .generic.icon,
.preview-item .removed.icon 
{ 
    font-size: var(--icon-size-xxl);
    height: var(--preview-height-base);
    line-height: var(--preview-height-base);
    color: var(--negative-color);
}

/* FORM > PREVIEWS > GRID > DRAG & DROP */

.preview-item.preview-drag
{
    cursor: move;
}

/* FORM > PREVIEWS > GRID > INPUT */

form div.inputwrap div.inputwrapinner .preview-item input[type=text]
{
    width: 100%;
    margin-top: var(--margin-close);
}

/* FORM > PROGRESS > CIRCLE */

.progress-circle
{
    width: 90%;
    height: 90%;
}

.progress-circle .back
{
    stroke: var(--progress-bkg-light);
    stroke-width: 10px;
}

.progress-circle .front
{        
    stroke-linecap: round;        
    stroke-width: 10px;
    animation: strokefill 0.1s reverse;
    stroke: var(--active-color);
}

.progress-circle .front.success
{
    stroke: var(--state-color-success);
}

.progress-circle .label
{
    font-family: var(--font-bold);
    font-size: var(--font-size-bigger);
    fill: var(--active-color);
}

.progress-success,
.progress-waiting
{
    display: block;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;        
    margin-left: calc(-1 * var(--icon-dim-xl) / 2);
    margin-top: calc(-1 * var(--icon-dim-xl) / 2);
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-size: var(--icon-size-xl);
    color: var(--state-color-success);        
}

.progress-waiting
{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    animation: spin 2s infinite linear;
}

.progress-waiting:before
{
    content: "\f110";
    font-family: var(--icon-font);    
}

/* FORM > PROGRESS > CIRCLE > ZERO */

.progress-circle.zero .label
{
    fill: var(--state-color-off);
}

/* FORM > PROGRESS > CIRCLE > WIN */

.progress-circle.win .front
{
    stroke: var(--state-color-success);
}

.progress-circle.win .label
{
    fill: var(--state-color-success);
}

/* FORM > PROGRESS > CIRCLE > WARNING */

.progress-circle.warning .front
{
    stroke: var(--state-color-warning);
}

.progress-circle.warning .label
{
    fill: var(--state-color-warning);
}

/* FORM > PROGRESS > CIRCLE > FAILURE */

.progress-circle.fail .front
{
    stroke: var(--state-color-fail);
}

.progress-circle.fail .label
{
    fill: var(--state-color-fail);
}

/* FORM > PROGRESS > CIRCLE > DISABLED */

.progress-circle.disabled .back
{
    opacity: var(--opacity-disabled);
}

.progress-circle.disabled .label
{
    fill: var(--state-color-off);
    opacity: var(--opacity-disabled);
}

/* FORM > DOWNLOAD */

.downloading-box
{
    width: 100%;
    text-align: center;
    font-size: var(--font-size-large);
}

.downloading-box span
{
    display: block;
    margin-bottom: var(--margin-base);
}

.downloading-force
{
    display: inline-block;
    margin: auto;
    font-family: var(--font-bold);
}

/* FORM > UPLOAD */

input[type=file]
{ 
    display: none;
}

div.upload_box  
{ 
    width: 100%;
}

div.upload_dragdrop_msg
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0px var(--padding-base);        
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    border: var(--input-border-drop);    
    border-radius: var(--border-radius-base);
    color: var(--input-color-readonly);    
}

div.upload_dragdrop_msg:before
{
    display: inline-block;
    vertical-align: top;    
    content: "\f382";
    font-size: var(--icon-size-mid);
    margin-right: var(--margin-close);
    font-family: var(--icon-font);
}

/* FORM > UPLOAD > POST */

div.fileupload 
{ 
    position: relative;
    margin-top: 8px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0px 8px;
    border-radius: 4px;
    background: #666666;
    color: #FFFFFF;
}
                     
div.fileupload a.fileuploadbtn 
{ 
    display: inline-block;
    position: absolute;
    top: 2px;
    right: 4px;
    color: #FFFFFF;
}

/* FORM > UPLOAD > AJAX */

div.upload_bar
{
    width: 100%;
}

ul.upload_queue 
{ 
    display: block;
    width: 100%;    
}

ul.upload_queue li 
{ 
    list-style: none;
    position: relative;
    display: inline-block;        
} 

/* FORM > UPLOAD > AJAX > LOADING BROWSE */

div.upload_loading
{ 
    text-align: center;    
    animation: spin 2s infinite linear;
    margin-top: var(--margin-close);
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-family: var(--icon-font);
    font-size: var(--icon-dim-base);
}

div.upload_loading:after
{ 
    content: "\f110";
}

/* FORM > UPLOAD AJAX > SELECT */

div.upload_waitselection 
{ 
    margin: 8px auto;
    font-size: 16px;
    text-align: center;
}    

/* FORM > UPLOAD > DRAG & DROP */

div.upload_layer 
{ 
    z-index: 9;
    display: block;    
    background: rgba(0,0,0,0.75);
    text-align: center;
    /* DEBUG */
    min-height: 360px;
}

div.upload_layer .icon
{
    color: var(--negative-color);
}

.upload_layer_close
{ 
    display: block;
    z-index: 2;
    position: absolute;
    top: var(--padding-base);
    right: var(--margin-base);
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-large);
    color: var(--negative-color);
}

.upload_layer_close:before
{
    font-family: var(--icon-font);
    content: "\f00d";
}

.upload_layer_box
{ 
    position: relative;
    width: 100%;
    height: 100%;    
}
                    
.upload_layer_box .upload_layer_msg
{ 
   text-align: center;
   width: 100%;
   position: absolute;
   top: calc(50% - (var(--font-size-xl) / 2));
   height: var(--font-size-xl);
   line-height: var(--font-size-xl);
   padding: 0px var(--padding-base);      
   font-size: var(--font-size-xl);
   font-family: var(--font-bold);
   color: var(--negative-color);
}

.upload_layer_box .upload_layer_msg div.upload_loading
{
    display: inline-block;
    margin-right: var(--margin-base);
    color: var(--negative-color);
}

.upload_layer_box ul.upload_queue 
{
    overflow-y: scroll;
    height: calc(100% - var(--btn-height-base) - (2 * var(--margin-base)));    
}

.upload_layer_box .upload_layer_buttons
{ 
    text-align: center !important;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: calc(var(--btn-height-base) + (2 * var(--margin-base)));
    padding-top: var(--margin-base);
}

/* FORM > UPLOAD > DRAG & DROP > TARGET CHOICE */

div.upload_layer_choice
{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    margin-top: var(--margin-base);
}

div.upload_layer_choice ul li
{
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    width: var(--preview-width-small);
    margin-right: var(--margin-close);
    margin-bottom: var(--margin-close);    
    color: var(--negative-color);
}

div.upload_layer_choice ul li .icon
{
    display: block;
    width: 100%;
    height: var(--icon-dim-xxl);
    line-height: var(--icon-dim-xxl);
    font-size: var(--icon-size-xl);    
}

/* FORM > ATTACHMENTS */

div.input-attach-drop
{
    display: inline-block;
    width: var(--input-width-base);
}

div.input-attach-drop div.upload_dragdrop_msg
{
    width: 100%;
}

/* FORM > UPLOAD > DRAG & DROP > PREVIEWS */  

div.upload_layer .preview-item .preview-fname
{
    color: var(--negative-color);
}

div.upload_layer .preview-item .preview-inner
{
    background-color: transparent;
}

/* FORM > UPLOAD > DRAG & DROP > PROGRESS */ 

div.upload_layer .progress-circle .label
{
    fill: var(--negative-color);
}

div.upload_layer .progress-circle .back
{
    stroke: var(--negative-color);
}

/* FORM > PREVIEWS > BIG */ 

/*
.preview-item.big
{
    width: 386px;
}

.preview-item.big .imgwrap
{
    height: 386px;
}

.preview-item.big .img
{
    height: 386px;

    background-size: contain;
    background-position: top left;
}

.preview-item.big .icon
{
    position: absolute;    
    top: var(--padding-base);
    right: var(--padding-base);
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 100%;
    background: var(--overlay-bkg-dark);
    z-index: 2;
}
*/

/* FORM > PREVIEWS > INFO */

.preview-info
{
    display: inline-block;
    margin-top: var(--margin-close);
    margin-left: var(--margin-base);
}

.preview-info .title
{
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl);
}

.preview-info .info
{
    margin-top: var(--margin-close);
    color: var(--font-color-light);
}

/* FORM > PREVIEWS > INPUT-LIKE */

span.preview_box 
{  
    position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0px 8px;
    cursor: pointer;
    outline: none;
}

span.preview_box.preview_input
{
    border: var(--input-border);
    border-radius: var(--border-radius-base);
    color: var(--input-color);
    background-color: var(--input-color-bkg);
}

span.preview_box.preview_input:focus
{
    border: var(--input-border-focus);
}

span.preview_box.preview_input .icon_circle
{
    vertical-align: top;
    margin-top: 3px;
    margin-right: var(--margin-close);
}

span.preview_box div.preview-inner
{
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color: var(--input-color);
}

/* FORM > PREVIEWS > AVATAR */

/*
span.preview-avatar { position: relative;
                      display: inline-block;
                      width: 120px;
                      height: 80px;
                      border: 1px solid #E9E9E9;
                      text-align: center;
                      border-radius: 3px;
                      background-size: cover;
                      cursor: pointer; }                              
                        
span.preview-avatar:before { font-size: 48px;
                             line-height: 80px; }

span.preview-avatar img { border-radius: 6px; }
*/

/* FORM > ERRORS */

form div.inputwrap.error-occurred div.inputwrapinner input,
form div.inputwrap.error-occurred div.inputwrapinner textarea,
form div.inputwrap.error-occurred div.inputwrapinner span.preview_box.preview_input,
form div.inputwrap.error-occurred div.inputwrapinner div.popup_box.popup_box_no_manual,
form div.inputwrap.error-occurred div.inputwrapinner div.module_box
{
    border-color: var(--state-color-fail);
}

form div.inputwrap.error-occurred:after
{
    position: absolute;
    display: block;
    z-index: 2;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 1px;
    right: 10%;
    content: attr(data-vld-msg);    
    top: var(--padding-base);    
    padding: 0px var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);    
    font-size: var(--font-size-smaller);
    color: var(--state-color-fail);
}

form div.inputwrap.error-occurred .radiowrap,
form div.inputwrap.error-occurred .radiowrap_checked,
form div.inputwrap.error-occurred .checkboxwrap,
form div.inputwrap.error-occurred .checkboxwrap_checked
{
    border-color: var(--state-color-fail);
}

/* PAGER */

div.data_pager
{
    position: relative;
    width: 100%;
    min-height: var(--input-height-base);
}

div.data_pager.bottom_pager
{
    margin-top: var(--margin-base);
}

/* PAGER > ELEMENTS */

div.data_pager div 
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    margin-bottom: var(--margin-base);
    margin-right: var(--margin-close);
}

div.data_pager div.items,
div.data_pager div.buttons,
div.data_pager div.page,
div.data_pager div.frame
{
}

div.data_pager .hilight
{
    font-family: var(--font-bold);
}

div.data_pager div.buttons .icon
{
    display: inline-block;
    border-radius: 100%;
    margin: 0px calc(var(--margin-close) / 2);
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

div.data_pager div.buttons a.pgnumber
{
    vertical-align: top;    
    display: inline-block;        
    text-align: center;
    border-radius: 100%;
    margin: 0px calc(var(--margin-close) / 2);
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

div.data_pager div.buttons a.pgnumber:hover
{
    color: var(--negative-color);
    background-color: var(--active-color);
}

div.data_pager div.buttons a.pgnumber.current
{
    cursor: default;
    color: var(--negative-color);
    background-color: var(--icon-color);
}

/* PAGER > INPUTS */

div.data_pager div input
{
    display: inline-block;
    width: var(--input-width-small);
}

div.data_pager div.page input,
div.data_pager div.gopage input,
div.data_pager div.frame input
{
    width: var(--input-width-wee);
}

/* PAGER > INPUTS > SELECT */

.as_select
{
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0px;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding-left: var(--padding-base);
    padding-right: 32px;
    border-radius: var(--border-radius-base);
    border: var(--input-border);
    background-color: var(--input-color-bkg);
    color: var(--input-color);
}

.as_select:hover
{
    color: var(--input-color);
}

.as_select:focus,
.as_select[data-focus="1"]
{
    border: var(--input-border-focus);
}

.as_select:after
{
    display: block;
    position: absolute;
    text-align: center;
    width: var(--btn-height-base);
    height: var(--btn-height-base);
    line-height: var(--btn-height-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

.as_select:after 
{
    top: 0px;
    right: 0px;        
    content: "\f078";
}

/* PAGER > SEARCH */

div.data_pager div.search input.searchbox 
{
    width: var(--input-width-mid);
    padding-left: var(--input-height-base);
}
div.data_pager div.search:before 
{
    position: absolute;
    content: "\f002";
    top: 0px;
    left: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--font-color-light);
}

div.data_pager div.search .searchreset
{
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    height: calc(var(--input-height-inborder) - 2px);
    background: var(--input-color-bkg);    
}

/* PAGER > INLINE VIEW MODES */

div.data_pager div.inlineviewsbar
{
    text-align: center;
    border-radius: 100%;
    width: var(--input-height-base);
    height: var(--input-height-base);
    background: var(--input-color-bkg);
    border: var(--input-border);    
}

div.data_pager div.inlineviewsbar.currentview,
div.data_pager div.inlineviewsbar:hover
{ 
    background-color: var(--active-color);
    border: var(--input-border-active);
}

div.data_pager div.inlineviewsbar.currentview a,
div.data_pager div.inlineviewsbar:hover a
{ 
    display: block;    
    color: var(--negative-color);
}

div.data_pager div.inlineviewsbar a.icon
{    
    width: 100%;
    text-align: center;
    padding: 2px 0px;
    height: var(--input-height-base);
}

/* PAGER > INLINE FILTER */

div.data_pager div.inlinefilterbar a.filtertag,
div.data_pager div.inlinefilterbar a.filterswitch 
{
    display: inline-block;    
    text-align: center;
    min-width: var(--input-width-tiny);
    margin: 0px calc(var(--margin-close) / 2);
    padding: 0px var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--font-color-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-pill);
}

div.data_pager div.inlinefilterbar a.filtertag.currentfilter,
div.data_pager div.inlinefilterbar a.filterswitch.currentfilter,
div.data_pager div.inlinefilterbar a.filtertag:hover,
div.data_pager div.inlinefilterbar a.filterswitch:hover
{
    border: var(--input-border-active);
    background-color: var(--active-color);
    color: var(--negative-color);
}

/* PAGER > INLINE LANGUAGE */

div.data_pager div.inlinelanguagebar
{
}

/* PAGER > TAG CAROUSEL */

div.data_pager div.tagcarousel-wrap 
{ 
    display: inline-block;
    height: var(--input-height-base);
}

div.data_pager div.tagcarousel-wrap .icon
{
    display: inline-block;
    width: var(--icon-dim-small);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

div.data_pager div.tagcarousel-wrap span.tagcarousel 
{     
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 512px;
    margin: 0px var(--margin-close);
    height: var(--input-height-base);
}

/* TABLES > DATA */

.data_table_wrap
{    
    overflow-x: auto;
    width: calc(100vw - var(--header-width) - (2 * var(--margin-base)) - var(--padding-base));
}

body.popup .data_table_wrap,
body.mtpopup .data_table_wrap
{
    width: 100%;
}

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

.data_table thead 
{     
    position: relative;    
    z-index: 2;
    transition: top 0.25s;
}

.data_table tbody
{
}

.data_table th div,
.data_table td
{
    min-width: 16px;    
    overflow: hidden;    
    text-align: left;    
    height: var(--tab-row-height);
    padding: var(--padding-base);
}

.data_table td
{
    max-width: 20vw;
    overflow-wrap: break-word;
}

.data_table th div a,
.data_table td a
{
    color: var(--font-color-base);
}

.data_table th div a:hover,
.data_table td a:hover
{
    color: var(--active-color);
}

.data_table th
{    
    white-space: nowrap;
    font-weight: normal;
    font-family: var(--font-bold);
}

.data_table th div
{ 
    text-transform: uppercase;    
    background-color: var(--tab-row-bkg-even);
    border-bottom: var(--tab-head-border);
}

.data_table th .icon,
.data_table td .icon
{
    float: left;
    color: var(--icon-color);
}

.data_table tr
{
    border-bottom: var(--tab-row-border);
}

.data_table tr:nth-child(even)
{
    background-color: var(--tab-row-bkg-even);
}

.data_table tr:nth-child(odd)
{
    background-color: var(--tab-row-bkg-odd);
}

.data_table tr:hover
{
    background-color: var(--tab-row-bkg-hover);
}

.data_table tfoot tr,
.data_table tr.total
{ 
    border-top: var(--tab-head-border);
    border-bottom: none;
}

.data_table tfoot td,
.data_table tr.total td
{ 
    text-transform: uppercase;
    background-color: var(--tab-row-bkg-even);
    font-family: var(--font-bold);
}  

.data_table tr.row-click,
.data_table td.cell-click
{ 
    cursor: pointer;
}

.data_table td.cell-click:hover
{
    color: #009FD7;
}

.data_table td.cell-edit
{
    cursor: cell;
}

.data_table th.right,
.data_table th.right div 
{
    text-align: right;
}

.data_table td.right
{
    text-align: right;
    white-space: nowrap;
}

.data_table td.nowrap
{
    white-space: nowrap;
}

.data_table td.data_total
{
}

.data_table td.data_caption
{
    width: 25%;
    text-align: right;
}

/* TABLES > DATA > SORT */

.data_table th a.sort_neutral:after,
.data_table th a.sort_asc:after,
.data_table th a.sort_desc:after
{    
    display: inline-block;
    margin-left: 4px;
    font-family: var(--icon-font);
}

.data_table th a.sort_neutral:after 
{ 
    content: "\f0dc";
    opacity: var(--opacity-disabled);
}

.data_table th a.sort_asc:after 
{ 
    content: "\f0de";
}

.data_table th a.sort_desc:after 
{ 
    content: "\f0dd";
}

/* TABLES > SELECTION */

.select_table tr
{ 
    cursor: pointer;
}

/* TABLES > SPREADSHEET > WRAPPER */

div.spreadsheet_wrapper
{
    position: relative;
    height: auto;
    width: calc(100vw - var(--header-width) - (2 * var(--margin-base)) - var(--padding-base));    
}

div.spreadsheet_wrapper.fullscreen
{
    width: 100%;
}

div.spreadsheet_overlaplike
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

/* TABLES > SPREADSHEET > LAYOUT */

div.spreadsheet_table_wrap
{
    position: relative;
    overflow: auto;
    width: 100%;
    height: auto;
    border: var(--grid-border-base);
}

table.spreadsheet_table 
{
    width: 100%;
}

table.spreadsheet_table th,
table.spreadsheet_table td
{
    font-weight: normal;
    min-width: var(--grid-width-base);
    max-width: var(--grid-width-base);
    height: var(--grid-height-base);
}

table.spreadsheet_table td
{    
    padding: 0px var(--padding-base);
    border: var(--grid-border-base);
}

table.spreadsheet_table th,
table.spreadsheet_table td.row_calc
{
    padding: 0px;
    background: var(--grid-bkg-base);
}

table.spreadsheet_table th.center,
table.spreadsheet_table td.center
{
    text-align: center;
}

table.spreadsheet_table th.right,
table.spreadsheet_table td.right
{
    text-align: right;
}

table.spreadsheet_table th span.cell,
table.spreadsheet_table td.row_calc span.cell,
table.spreadsheet_table tfoot td span.cell,
table.spreadsheet_table tr.footlike td span.cell
{
    display: block;
    width: 100%;    
    text-align: left; 
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: uppercase;    
    text-overflow: ellipsis;    
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);
    padding: 0px var(--padding-base);
    height: var(--grid-height-base);
    line-height: var(--grid-height-base);  
}

table.spreadsheet_table td.data_title
{
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: uppercase;    
    text-overflow: ellipsis;    
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);
    border-left: var(--grid-border-base);
    border-right: var(--grid-border-base);
    border-bottom:  var(--grid-border-strong);
}

table.spreadsheet_table th.data_icon,
table.spreadsheet_table td.data_icon
{
    min-width: calc(2* var(--icon-dim-base));
    max-width: calc(2* var(--icon-dim-base));
}

/* SPREADSHEET TABLE > HEADER */

table.spreadsheet_table th.col_title
{
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 2;
    border-left: var(--grid-border-base);
    border-right: var(--grid-border-base);
}

table.spreadsheet_table th.col_title.w_extra
{
    top: var(--grid-height-base);
}

table.spreadsheet_table th.col_title span.cell
{
    border-bottom:  var(--grid-border-strong);
}

table.spreadsheet_table th.top_left_corner
{
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 3;
}

table.spreadsheet_table th.top_left_corner span.cell
{
    border-bottom: var(--grid-border-strong);
    border-right: var(--grid-border-strong);
}

table.spreadsheet_table th.top_left_corner.w_extra span.cell
{
    height: calc(var(--grid-height-base) * 2);
    line-height: calc(var(--grid-height-base) * 2);
}

table.spreadsheet_table th.top_right_corner
{
    position: sticky;
    top: 0px;
    right: 0px;
    z-index: 3;
    border-right: var(--grid-border-base);
    background: var(--grid-bkg-calc);
}

table.spreadsheet_table th.top_right_corner span.cell
{
    border-bottom: var(--grid-border-strong);
    border-left: var(--grid-border-strong);
}

table.spreadsheet_table th.top_right_corner.w_extra span.cell
{
    height: calc(var(--grid-height-base) * 2);
    line-height: calc(var(--grid-height-base) * 2);
}

table.spreadsheet_table th.top_right_corner._1_2
{
    right: var(--grid-width-base);
}

table.spreadsheet_table th.top_right_corner._2_2
{
    right: 0px;
}

/* SPREADSHEET TABLE > LEFT COLUMN */

table.spreadsheet_table th.row_title
{
    min-width: 242px;
    max-width: 242px;
    position: sticky;
    left: 0px;
    z-index: 2;
    border-top: var(--grid-border-base);
    border-bottom: var(--grid-border-base);
}

table.spreadsheet_table th.row_title span.cell
{
    border-right: var(--grid-border-strong);
}

table.spreadsheet_table th.row_title.sub span.cell
{
    font-family: var(--font-base);
}

/* SPREADSHEET TABLE > RIGHT COLUMN */

table.spreadsheet_table td.row_calc
{
    position: sticky;
    right: 0px;
    z-index: 2;
    border-top: var(--grid-border-base);
    border-bottom: var(--grid-border-base);
    background: var(--grid-bkg-calc);
}

table.spreadsheet_table td.row_calc span.cell
{
    border-left: var(--grid-border-strong);
}

table.spreadsheet_table td.row_calc._1_2
{
    right: var(--grid-width-base);
}

table.spreadsheet_table td.row_calc._2_2
{
    right: 0px;   
}

/* SPREADSHEET TABLE > FOOTER */

table.spreadsheet_table tfoot td,
table.spreadsheet_table tr.footlike td,
table.spreadsheet_table tr.footlike th
{
    position: sticky;
    bottom: 0px;
    z-index: 2;
    padding: 0px;
    background: var(--grid-bkg-calc);
}

table.spreadsheet_table tfoot td span.cell,
table.spreadsheet_table tr.footlike th span.cell,
table.spreadsheet_table tr.footlike td span.cell
{
    border-top: var(--grid-border-strong);
    /*font-weight: bold;*/
}

table.spreadsheet_table tfoot td.bottom_left_corner,
table.spreadsheet_table tr.footlike th.bottom_left_corner
{
    left: 0px;
    z-index: 3;
}

table.spreadsheet_table tfoot td.bottom_left_corner span.cell,
table.spreadsheet_table tr.footlike th.bottom_left_corner span.cell
{
    border-right: var(--grid-border-strong);
}

table.spreadsheet_table tfoot td.bottom_right_corner,
table.spreadsheet_table tr.footlike td.bottom_right_corner
{
    right: 0px;
    z-index: 3;
}

table.spreadsheet_table tfoot td.bottom_right_corner._1_2,
table.spreadsheet_table tr.footlike td.bottom_right_corner._1_2
{
    right: var(--grid-width-base);
}

table.spreadsheet_table tfoot td.bottom_right_corner._2_2,
table.spreadsheet_table tr.footlike td.bottom_right_corner._2_2
{
    right: 0px;
}

table.spreadsheet_table tfoot td.bottom_right_corner span.cell,
table.spreadsheet_table tr.footlike td.bottom_right_corner span.cell
{
    border-left: var(--grid-border-strong);
}

/* SPREADSHEET TABLE > CORNER SWITCH */

table.spreadsheet_table th.top_left_corner span.cell a
{
    display: inline-block;
    text-align: center;
    font-family: var(--font-base);
    min-width: var(--input-width-tiny);
    margin: 0px calc(var(--margin-close) / 2);
    padding: 0px var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    color: var(--font-color-base);
    background-color: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-pill);
}

table.spreadsheet_table th.top_left_corner span.cell a.mult_current,
table.spreadsheet_table th.top_left_corner span.cell a:hover
{
    border: var(--input-border-active);
    background-color: var(--active-color);
    color: var(--negative-color);
}

/* SPREADSHEET TABLE > ICONS */

table.spreadsheet_table td .icon
{
    margin: auto;
}

table.spreadsheet_table td .icon.inverted 
{ 
    color: var(--negative-color);
}

/* TREE > DATA */

div.tree_branch 
{    
    position: relative;
    overflow: hidden;
    margin: 0px 0px 0px var(--tree-indent-base);
}

.tree_branch-fx 
{ 
    -webkit-transition: height 0.25s;
    transition: height 0.25s;
}

._tree_branch_async_close 
{ 
    height: 0px;
}

div.tree_inner 
{
    position: relative;
    padding: 0px;
    margin: 0px;
}

div.tree_branch .icon 
{
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    margin-right: 0px;
    background-color: transparent;
}

div.tree_node 
{
    display: block;
    position: relative;
    white-space: nowrap;
    height: var(--tree-indent-base);
    font-size: var(--font-size-bigger);
}

div.tree_node .icon 
{
    background-color: transparent;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    margin-right: var(--margin-close);
}

div.tree_node .side_icon
{
    float: left !important;
}

div.tree_node .side_icon:before
{
    top: -2px;
    border-radius: 100%;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);    
    color: var(--icon-color);
}

div.tree_node .icon_circle
{
    float: left;
}

div.tree_node .icon_circle:before
{
    top: 0px;
}

div.tree_node a
{
    position: relative;
    display: block;
    float: left !important;
    color: var(--font-color-base);
}

div.tree_node a.tree_ctrl_leaf,
div.tree_node a.tree_ctrl_collapse,
div.tree_node a.tree_ctrl_expand,
div.tree_node a.tree_ctrl_loading 
{
    display: inline-block;
    overflow: hidden;
    text-align: center;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);    
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);    
}

a.tree_ctrl_leaf:before
{ 
    content: "";
}

a.tree_ctrl_collapse:before,
a.tree_ctrl_expand:before
{ 
    content: "\f0da";    
}

a.tree_ctrl_collapse,
a.tree_ctrl_expand
{
    transition: var(--transition-base);    
}

a.tree_ctrl_collapse
{ 
    transform: rotate(90deg);
}

div.tree_node .checkboxwrap,
div.tree_node .checkboxwrap_checked
{
    float: left !important;
    margin-right: 4px;
}

div.tree_node span.right 
{ 
    display: inline-block; 
    vertical-align: top;
    text-indent: 0px;    
    margin-left: var(--margin-close);
}

/* KANBAN */

div.kanban_box 
{ 
    display: flex;
    flex-wrap: wrap;
    width: 100%; 
}

/* KANBAN > GROUP */

div.kanban_group 
{ 
    position: relative;
    vertical-align: top;
    margin: 0px calc(var(--margin-close) / 2) var(--margin-close) calc(var(--margin-close) / 2);
    width: calc(50% - var(--margin-close));    
    padding-top: 36px;
    padding-right: var(--padding-base);
    padding-left: var(--padding-base);
    padding-bottom: var(--padding-base);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

div.kanban_group:before 
{ 
    position: absolute;
    left: 0px;
    top: 0px;
    padding: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

div.kanban_group.no_title
{
    padding-top: var(--padding-base);
}

div.kanban_last
{ 
    width: 100%;
}

div.kanban_group h2 
{ 
    position: absolute;
    top: 0px;
    left: 30px; 
    font-weight: normal;
    font-size: var(--font-size-bigger);
    padding: var(--padding-base);
}

div.kanban_group h2:after 
{ 
    content: '\A';
    white-space: pre;
}

/* KANBAN > GROUP > ITEM */

div.kanban_item 
{ 
    position: relative;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;    
    width: calc(50% - var(--margin-close));
    height: var(--kanban-height-base);
    margin: 0px calc(var(--margin-close) / 2) var(--margin-close) calc(var(--margin-close) / 2);    
    background: var(--bkg-color-base);
    border-radius: var(--border-radius-base);
    border: var(--area-border-base);
}                 

div.kanban_last div.kanban_item
{ 
    width: calc(25% - var(--margin-close));
}

div.kanban_item.expand
{
    cursor: pointer;    
}

div.kanban_item.expand:after
{
    content: "\f06e";
    position: absolute;
    top: var(--padding-base);
    right: var(--padding-base);
    font-family: var(--icon-font);
    color: var(--font-color-light);
}

div.kanban_item.expand:hover
{
    border: var(--input-border-focus);
}

div.kanban_item h3 
{     
    text-transform: none;
    display: block;
    font-weight: normal;
    letter-spacing: 1px;
    padding: var(--padding-base);
    font-family: var(--font-base);
    font-size: var(--font-size-smaller);
    color: var(--icon-color);
}

div.kanban_item span.value
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--icon-dim-base);
    max-height: var(--kanban-height-value);
    padding: var(--padding-base);
}

div.kanban_item span.actions
{
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: var(--padding-base);
}

div.kanban_item span.actions .icon
{
    display: inline-block;
}

div.kanban_item span.auxinfo
{
    display: block;
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}

div.kanban_item .expand
{
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 8px;
}

/* KANBAN > GROUP > FULL */                     

div.kanban_full 
{
    display: flex;    
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: 0px 0px 16px 0px;
}

div.kanban_full:last-child
{
    margin-bottom: 0px;
}

div.kanban_full div.kanban_item.kanban_1
{
    width: calc(100% - var(--margin-close));
}

div.kanban_full div.kanban_item.kanban_3
{ 
    width: calc(33.3% - var(--margin-close));
}

div.kanban_full div.kanban_item.kanban_4
{ 
    width: calc(25% - var(--margin-close));
}

div.kanban_full div.kanban_item.kanban_5
{ 
    width: calc(20% - var(--margin-close));
}

div.kanban_full div.kanban_item.kanban_6
{ 
    width: calc(16.6% - var(--margin-close));
}

div.kanban_full div.kanban_item.kanban_8
{ 
    width: calc(12.5% - var(--margin-close));
}

/* KANBAN > CUSTOM */

div.kanban_item small
{
    position: absolute;
    right: var(--padding-base);
    font-size: var(--font-size-base);
}

div.kanban_item.kanban_hilight
{    
    font-size: var(--font-size-bigger);
    color: var(--active-color);
}

div.kanban_item.kanban_indicator
{
    font-size: var(--font-size-bigger);
    color: var(--negative-color);
    background-color: var(--state-color-success);
}

div.kanban_item.kanban_indicator.kanban-alert
{
    background-color: var(--state-color-fail);
}

div.kanban_item.kanban_moredetails
{    
    cursor: pointer;
    color: var(--negative-color);   
    background-color: var(--active-color);
}

div.kanban_item.kanban_indicator h3,
div.kanban_item.kanban_moredetails h3
{
    opacity: 0.75;
    color: var(--negative-color);
}

div.kanban_item.kanban_moredetails .icon
{
    color: var(--negative-color);
}

/* DATA GRID > BOX */

.data_grid_box
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-close);
}

/* DATA GRID - ITEMS */

.data_grid_item 
{ 
    grid-column: auto;
    position: relative;
    display: inline-block;    
    text-align: center;
    min-width: var(--area-width-min);
    padding: var(--padding-base);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

.data_grid_item.data_grid_active
{
    cursor: pointer;
}

.data_grid_badge
{
    position: absolute;
    top: var(--padding-base);
    right: var(--padding-base);
    color: var(--font-color-light);
}

.data_grid_badge:hover
{
    color: var(--font-color-light);   
}
            
.data_grid_back 
{ 
    display: block;
    width: 100%;
    cursor: pointer;
    height: var(--area-box-height);
}

.data_grid_back.icon:before
{ 
    font-size: var(--icon-dim-xl);
    line-height: var(--area-box-height);
}      

.data_grid_back .audiowrap,
.data_grid_back .videowrap
{
    margin: auto;
    width: 90%;
    height: var(--area-box-height);
}

.data_grid_back img
{
    object-fit: cover;
    object-position: center;
    margin: auto;
    width: 90%;
    height: var(--area-box-height);
    border-radius: var(--border-radius-base);    
}

.data_grid_back img.__bkgcontain
{
    object-fit: contain;
}

.data_grid_back .videowrap .mediaseekwrap,
.data_grid_back .videowrap .mediactrl
{
    display: none;
}

.data_grid_avatar 
{ 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;    
}     

.data_grid_avatar span 
{ 
    display: block;    
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: none;
    margin: auto;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-size: var(--icon-size-large);
    color: var(--negative-color);
}               

.data_grid_avatar span.__avatar-side-id
{
    width: 100%;
    height: 16px;
    line-height: 16px;
    margin-top: var(--margin-close);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--font-color-base);
}

.data_grid_item.data_grid_active:hover .data_grid_title, 
.data_grid_item.data_grid_active:hover .data_grid_back,
.data_grid_item.data_grid_activeselect .data_grid_title, 
.data_grid_item.data_grid_activeselect .data_grid_back
{
    color: var(--active-color);
}

.data_grid_info 
{ 
    display: block;  
    margin-top: var(--margin-close);
    line-height: var(--font-size-base);
    color: var(--font-color-light);    
}

.data_grid_info .hint_aux_info
{    
    vertical-align: middle;
    letter-spacing: 1px;
    margin-left: var(--margin-base);
    font-size: var(--font-size-tiny);    
}
                 
.data_grid_status
{ 
    margin-top: var(--margin-close);
}

.data_grid_ctrl
{ 
    display: none;
    position: absolute;
    border-radius: 100%;
    text-align: center;
    width: var(--input-height-base);
    height: var(--input-height-base);
    background-color: var(--area-bkg-base);
}

.data_grid_ctrl .icon,
.data_grid_ctrl .icon:before
{
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

.data_grid_ctrl
{
    top: calc(var(--padding-base) / 2);
    right: calc(var(--padding-base) / 2);
}

/* DATA GRID > SELECT */

.data_grid_item div.list_check
{
    display: none;
    position: absolute;
    left: var(--padding-base);
    top: var(--padding-base);
}

.data_grid_item.__activeselect div.list_check
{
    display: block;    
}

/* DATA GRID > ITEMS > HOVER */

.data_grid_item:hover .data_grid_ctrl
{
    display: block;
}

/* DATA GRID - SHARE */

.data_grid_back.gmail
{
    background-image: url(../img/gmail.png);
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.whatsapp
{
    background-image: url(../img/whatsapp.png);
    background-size: 72px;
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.telegram
{
    background-image: url(../img/telegram.png);
    background-size: 132px;
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.wechat
{
    background-image: url(../img/wechat.png);
    background-size: 64px;
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.facebook
{
    background-image: url(../img/facebook.png);
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.instagram
{
    background-image: url(../img/instagram.png);
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.twitter
{
    background-image: url(../img/twitter-x.png);
    background-size: 82px;
    background-repeat: no-repeat;
    background-position: center;
}

.data_grid_back.tiktok
{
    background-image: url(../img/tiktok.png);
    background-size: 82px;
    background-repeat: no-repeat;
    background-position: center;
}

/* CHARTS */

.chart-row
{
    display: block;
    vertical-align: top;
}

.chart
{
    width: 100%;   
    height: 400px;
}

/* CHARTS > LEGEND */

.chart-legend,
.chart-split
{
    display: inline-block;
    vertical-align: top;
}

.chart-split
{
    margin-right: 64px;
}

/* CHARTS > LEGEND > TABLE */

.legend_table td,
.legend_table th
{
    overflow: hidden;    
    text-align: left;    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    height: var(--tab-row-height);
    padding: 0 var(--padding-base);
}

.legend_table th
{        
    font-weight: normal;
    font-family: var(--font-bold);
    text-transform: uppercase;    
}

.legend_table tfoot td
{ 
    text-transform: uppercase;
    background-color: var(--tab-row-bkg-even);
    font-family: var(--font-bold);
}  

.legendstatus
{
    display: inline-block;
    vertical-align: top;    
    margin-top: 2px;
    width: var(--icon-dim-small);
    height: var(--icon-dim-small);
    border-radius: var(--border-radius-pill);
}

.legend-1 { background: var(--chart-color-1); }
.legend-2 { background: var(--chart-color-2); }
.legend-3 { background: var(--chart-color-3); }
.legend-4 { background: var(--chart-color-4); }
.legend-5 { background: var(--chart-color-5); }
.legend-6 { background: var(--chart-color-6); }
.legend-7 { background: var(--chart-color-7); }
.legend-8 { background: var(--chart-color-8); }
.legend-other { background: var(--chart-color-other); }

/* CHARTS > TYPES > PIE */

.chart-pie
{
    width: 360px;
    height: 360px;
}

/* WIDGET > GRID */

.widget-box-container
{
    display: grid;    
    grid-auto-flow: row dense;
    grid-gap: var(--margin-close);
    padding: var(--padding-base);
    background: var(--area-bkg-base);
    border-radius: var(--border-radius-base);
}

.widget-box-container.layout-3
{
    grid-template-columns: 1fr 1fr 1fr;
}

.widget-box-container.layout-2
{
    grid-template-columns: 1fr 1fr;
}

.widget-box-container.layout-1
{
    grid-template-columns: 1fr;   
}

/* WIDGET > GRID > LAYOUT */

.widget-box
{ 
    grid-column: auto;
    grid-column: span 1;
    grid-row: span 1;
    position: relative;
    display: inline-block;    
    text-align: center;
    width: 100%;
    padding: var(--padding-base);
    background: var(--bkg-color-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

.widget-box-container.layout-2 .widget-box.wide
{
    grid-column: span 1;
}

.widget-box-container.layout-2 .widget-box.full
{
    grid-column: span 2;
}

.widget-box-container.layout-3 .widget-box.wide
{
    grid-column: span 2;
}

.widget-box-container.layout-3 .widget-box.full
{
    grid-column: span 3;
}

/* WIDGET > GRID > WIDGET-BOX */

.widget-title
{
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--font-size-bigger);
    border-bottom: 1px solid #666666;
    padding-top: 4px;
    padding-bottom: 8px;    
}

.widget-title span
{
    display: block;
    width: 75%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.widget-actions
{
    position: absolute;
    top: var(--padding-base);
    right: var(--padding-base);
}

.widget-act-element
{
    display: inline-block;
    margin-left: var(--margin-close);
}

.widget-goto
{
    position: absolute;
    top: var(--padding-base);
    right: calc(5 * var(--padding-base));
}

.widget-refresh-info
{
    text-align: left;
    margin-top: var(--margin-base);
}

.widget-refresh-info .side_icon
{
   font-size: var(--font-size-smaller);
   color: var(--font-color-light);
}

.widget-refresh-info .side_icon:before
{   
   font-size: var(--icon-size-small);
   color: var(--font-color-light); 
}

.widget-content
{
    vertical-align: top;
    padding-top: var(--padding-base);
}

.widget-row
{
    display: block;
    width: 100%;
    vertical-align: top;
}

.widget-split-2,
.widget-split-3,
.widget-split-4
{
    display: inline-block;    
    vertical-align: top;    
}

.widget-split-2 { width: 50%; }
.widget-split-3 { width: 33.3%; }
.widget-split-4 { width: 25%; }

.widget-left
{
    text-align: left;
}

.widget-info-title
{
    text-align: left;
    letter-spacing: 1px;
    font-size: var(--font-size-smaller);    
    margin-top: var(--margin-close);
}

.widget-info-guide
{
    display: inline;
    vertical-align: top;
    margin-left: var(--margin-base);    
}

.widget-info-content
{
    text-align: left;
    padding: var(--padding-base) calc(var(--padding-base) / 2);
}

.widget-info-content .user_snippet,
.widget-info-content .pillstatus 
{
    margin-right: var(--margin-close);
}

.widget-info-content ul li
{
    display: block;
    width: 100%;
    overflow: hidden;    
    padding: var(--padding-base) 0px;
    border-bottom: var(--area-border-base);
}

.widget-info-content ul li.__active
{
    cursor: pointer;
}

.widget-info-content ul li:hover
{
    background-color: var(--tab-row-bkg-odd);
}

.widget-info-data
{
    white-space: nowrap;
    text-align: left;
    padding: var(--padding-base) calc(var(--padding-base) / 2);
    font-family: var(--font-bold);
    font-size: var(--font-size-bigger);
}

.widget-info-data em
{
    opacity: 0.75;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
}

.widget-info-data .poststatus,
{
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    margin-right: var(--margin-close);
    width: var(--icon-dim-small);
    height: var(--icon-dim-small);    
}

.widget-info-data .pillstatus
{    
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    margin-right: var(--margin-close);    
    font-family: var(--font-base);
}

.widget-info-data.xl
{
    font-size: var(--font-size-xl);
}

.widget-placeholder,
.widget-placeholder:hover
{
    display: inline-block;
    margin-top: var(--margin-close);
    color: var(--font-color-light);
}

.widget-info-data.win
{
    color: var(--state-color-success);
}

.widget-info-data.warning
{
    color: var(--state-color-warning);
}

.widget-info-data.fail
{
    color: var(--state-color-fail);
}

.widget-center
{
    text-align: center;
}

.widget-info-icon
{
    margin-top: var(--margin-base);
}

.widget-info-icon .icon
{
    margin: auto;
}

.widget-chart,
.widget-chart-tall
{
    margin-top: var(--margin-base);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 112px;
}

.widget-chart-tall
{
    height: 224px;
}

.widget-chart-pie,
.widget-chart-doughnut
{
    width: 112px;
    height: 112px;
}

.widget-chart-tall-pie,
.widget-chart-tall-doughnut
{
    width: 224px;
    height: 224px;
}

.widget-chart .progress-circle
{
    width: 112px;
    height: 112px;
}

.widget-chart-pie-placeholder
{
    display: block;
    width: 112px;
    height: 112px;
    margin-top: var(--margin-base);
    margin-left: auto;
    margin-right: auto;
    border-radius: 100%;
    background: var(--progress-bkg-light);
    opacity: var(--opacity-disabled);
}

.widget-chart-legend,
.widget-chart-split
{
    display: inline-block;
    vertical-align: top;
}

.widget-chart-split
{
    margin-left: var(--margin-base);
    margin-right: 48px;
}

.widget-chart-legend
{
    margin-top: var(--margin-base);
}

.widget-chart-legend .legend_table td
{
   max-width: 15vw;
}

.widget-calendar-header
{
    position: relative;
    display: inline-block;
    text-transform: uppercase;    
    text-align: center;
    padding-left: var(--icon-dim-larger);
    padding-right: var(--icon-dim-larger);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    font-family: var(--font-bold);
}

.widget-calendar-header > a
{
    color: var(--icon-color);
}

.widget-calendar-header > a:hover
{
    color: var(--active-color);
}

.widget-calendar-header > a.icon
{
    position: absolute;
    top: 0px;
    margin: 0px;
    display: block;
    width: var(--icon-dim-small);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

.widget-calendar-header > a.icon:first-child 
{
    left: 0px;
}

.widget-calendar-header > a.icon:last-child 
{
    right: 0px;
}

/* PREVIEW GRID */

.data_preview_container
{
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-close);
}

.data_preview_item 
{ 
    grid-column: auto;
    position: relative;
    display: inline-block;        
}

/* PREVIEW GRID > DATA */

.data_preview
{ 
    display: block;
    position: relative;  
}

.data_preview_show
{
    cursor: pointer;
}

.data_preview_title
{    
    max-width: 20vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-bottom: var(--padding-base);
}

.data_preview_box
{
    position: relative;    
    display: flex;
    align-items: center;
    justify-content: center;    
    width: 100%;
    height: var(--area-preview-height);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

.data_preview_box .data_preview_back 
{ 
    position: relative;
    width: 100%;
    height: 100%;    
}

.data_preview_box .data_preview_back.icon:before 
{ 
    display: block;
    position: absolute;
    top: calc(50% - var(--icon-dim-xxl) / 2);
    left: calc(50% - var(--icon-dim-xxl) / 2);
    width: var(--icon-dim-xxl);
    height: var(--icon-dim-xxl);
    line-height: var(--icon-dim-xxl);
    font-size: var(--icon-size-xxl);
}

.data_preview_box img
{ 
    object-fit: cover;
    width: 100%;
    height: var(--area-preview-height);
    border-radius: var(--border-radius-base);
}

.data_preview_box .audiowrap
{
    margin: auto;
    width: 90%;
}

.data_preview_box .videowrap
{
    width: 100%;
    height: var(--area-preview-height);
}

.data_preview_box .videowrap .mediaseekwrap,
.data_preview_box .videowrap .mediactrl
{
    display: none;
}

.data_preview_info
{
    display: none;
    position: absolute;
    top: var(--padding-base);
    left: var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding: 0px var(--padding-base);
    background-color: var(--area-bkg-base);
    border-radius: var(--border-radius-base);
}

.data_preview_info .hint_aux_info
{
    display: none;
}

.data_preview_ctrl,
.data_preview_dwnl
{ 
    display: none;
    position: absolute;       
}

.data_preview_ctrl .icon,
.data_preview_dwnl .icon
{
    border-radius: 100%;
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    background-color: var(--area-bkg-base);
}

.data_preview_ctrl
{
    top: var(--padding-base);
    right: var(--padding-base);
}

.data_preview_dwnl
{ 
    top: var(--padding-base);
    right: calc(var(--input-height-base) + var(--padding-base) + var(--margin-close));
}

.data_preview_box:hover .data_preview_info,
.data_preview_box:hover .data_preview_ctrl,
.data_preview_box:hover .data_preview_dwnl
{
    display: block;
}

/* PREVIEW GRID > SELECT */

.data_preview_item div.list_check
{
    display: none;
    position: absolute;
    left: var(--padding-base);
    top: calc(var(--padding-big) + var(--padding-base));
}

.data_preview_item.__activeselect div.list_check
{
    display: block;    
}

/* SHARINGS PREVIEW */

/*
.share_preview_container
{
    margin-bottom: var(--margin-base);
}

.share_preview_container .preview-item,
.share_preview_container .preview-item .generic.icon, 
.share_preview_container .preview-item .removed.icon,
.share_preview_container .preview-item img
{
    width: var(--preview-width-xs);  
    height: var(--preview-height-xs);
    line-height: var(--preview-height-xs);
}
*/

/* CALENDAR > HEADER */

.calendar_header 
{
    position: relative;
    width: 100%;
    padding: var(--padding-base) 0px;
    margin-bottom: var(--margin-base);
    border-bottom: var(--tabber-border);
}

.calendar_header div.calendar_title 
{
    position: relative;
    display: inline-block;
    text-transform: uppercase;    
    text-align: center;
    padding-left: var(--icon-dim-larger);
    padding-right: var(--icon-dim-larger);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    font-family: var(--font-bold);
    font-size: var(--font-size-large);
}

.calendar_header div.calendar_title > a
{
    color: var(--icon-color);
}

.calendar_header div.calendar_title > a:hover
{
    color: var(--active-color);
}

.calendar_header div.calendar_title > a.icon
{
    position: absolute;
    top: 0px;
    margin: 0px;
    display: block;
    width: var(--icon-dim-small);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
}

.calendar_header div.calendar_title > a.icon:first-child 
{
    left: 0px;
}

.calendar_header div.calendar_title > a.icon:last-child 
{
    right: 0px;
}

.calendar_header div.calendar_modeswitch
{
    display: inline-block;
    vertical-align: top;
    margin-left: var(--margin-base);
}

.calendar_header div.calendar_modeswitch .as_select
{
    width: auto;
}

.calendar_header a.modeswitch 
{
    display: inline-block;
    text-align: center;
    margin-left: var(--margin-close);    
    padding: 0px var(--padding-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    border-radius: var(--border-radius-pill);    
    color: var(--font-color-base);
    background: var(--input-color-bkg);
    border: var(--input-border);
}

.calendar_header a.modeswitch:before
{
    display: none;
}

.calendar_header a.modeswitch:hover,
.calendar_header a.modeswitch.modecurrent
{ 
    border: var(--input-border-active);
    background-color: var(--active-color);
    color: var(--negative-color);
}

/* CALENDAR > LIST */

div.calendar_list 
{
    position: relative;
    width: 100%;
}

div.calendar_list:hover .icon:before,
div.calendar_list:hover .side_icon:before
{
    color: var(--icon-color);
}

div.calendar_list > div
{
    position: relative;
    width: 100%;    
    vertical-align: top;
    margin-bottom: var(--margin-base);
    padding-bottom: var(--padding-base);    
    border-bottom: var(--area-border-base);
}

div.calendar_list > div:last-child
{
    border-bottom: none;
}

div.calendar_list div.list_title
{    
    text-transform: uppercase;
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);    
    border-bottom: var(--area-border-base);
}

div.calendar_list div.avatar
{
    width: auto;
    margin-bottom: 0px;
}

div.calendar_list div.active
{
    cursor: pointer;
}

/* CALENDAR > MONTH */

table.calendar_month 
{
    width: 100%;
}

table.calendar_month th
{
    text-transform: uppercase;
    font-weight: normal;
    font-family: var(--font-bold);
    padding: var(--padding-base);
    font-size: var(--font-size-smaller);    
    border-bottom: var(--tabber-border);    
}

table.calendar_month td 
{
    position: relative;
    width: 14.28571429%;
    vertical-align: top;
    height: var(--area-calendar-height);    
    padding: var(--padding-base);
    border: var(--area-border-base);
}

table.calendar_month td a.go_day
{
    float: left;
    border-radius: 100%;
    text-align: center;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    color: var(--font-color-base);
}

table.calendar_month td a.go_day:hover
{
    color: var(--negative-color);
    background: var(--active-color);
}

table.calendar_month td.no_day 
{
    opacity: var(--opacity-disabled);
}

table.calendar_month td.current_day 
{
    background: var(--tab-row-bkg-hover);
}

/* CALENDAR > MONTH > DATA*/

.hours_month
{
    width: 100%;    
    float: left;
    text-align: center;
    font-size: var(--font-size-large);    
}

/* CALENDAR > YEAR */

div.calendar_year_grid
{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-base);
    margin-bottom: var(--margin-base);
}

div.calendar_year_month
{
    grid-row: auto;
    grid-column: auto;
}

/* CALENDAR > YEAR > COMPACT */

table.calendar_compact 
{
    width: 100%;
}

table.calendar_compact th
{
    text-transform: uppercase;    
    text-align: center;
    font-weight: normal;
    padding: var(--padding-base);
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);
    border-bottom: var(--tabber-border);
}

table.calendar_compact td 
{
    position: relative;
    text-align: center;
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    border: var(--area-border-base);
}

table.calendar_compact td a
{
    color: var(--font-color-base);
}

table.calendar_compact td.compact_header
{
    border: none;
}

table.calendar_compact table.month_header
{
    width: 100%;
}

table.calendar_compact table.month_header td
{
    border: none;
    text-align: center;
}

table.calendar_compact table.month_header td a
{
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--font-color-base);
}

table.calendar_compact table.month_header td a:hover
{
    color: var(--active-color);
}

table.calendar_compact td.no_day 
{
    opacity: var(--opacity-disabled);
}

table.calendar_compact td.current_day 
{
    background: var(--tab-row-bkg-hover);
}

/* CALENDAR > EVENTS */

.day_newevent,
.all_newevent
{
    display: none !important;    
}

.week_newevent
{
    display: none !important;
    position: absolute;
    top: 0px;
    right: 0px;  
}

.calendar_list:hover .week_newevent
{
    display: block !important;
}

.month_newevent
{
    display: none !important;
    position: absolute;
    right: var(--padding-base);
    bottom: var(--padding-base);
}

table.calendar_month td:hover .month_newevent
{
    display: block !important;
}

table.calendar_compact td.event_year,
table.calendar_compact td.event_year a
{
    background: var(--active-color);
    color: var(--negative-color);
}

/* CALENDAR > TOTALS */

.calendar_totals
{
    text-transform: uppercase;
    font-family: var(--font-bold);
    border-top: var(--tabber-border);
}

.calendar_totals .calendar_total_entry
{
    padding: var(--padding-base) 0px 0px var(--padding-base);
}

/* GRID */

div.gridloader 
{  
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    background: var(--overlay-bkg-dark);
    color: var(--negative-color);
    font-size: var(--font-size-xl);      
}

div.gridbox 
{
    position: relative;
    width: calc(100vw - 32px);
    height: calc(100vh - 236px);
}

table.grid
{
    border-color: var(--grid-border-color);
    background: var(--grid-bkg-base);
}

table.grid th 
{
    border: none;
    text-transform: uppercase;
    font-weight: normal;
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);
}

/* GRID > CORNERS */

table.grid div.box_corner
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-smaller);
    border-color: var(--grid-border-color);
}

/* GRID > TOTALS */

table.grid div.box_head_trail
{
    text-align: center;
    border-color: var(--grid-border-color);
}

table.grid div.box_foot_caption
{
    text-align: center;
    border-color: var(--grid-border-color);
}

table.grid div.box_foot_calc
{
    border-color: var(--grid-border-color);
}

/* GRID > INNER TABLES */

table.grid table th
{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 4px;
}

table.grid table th.rowspannedcolumn
{
    text-align: left;
    text-indent: var(--margin-base);
}

table.grid .box_col_head
{
    border-bottom: var(--grid-border-strong);
}

table.grid .box_row_side
{
    border-right: var(--grid-border-strong);
}

table.grid .box_foot_caption,
table.grid .box_head_trail
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;    
    text-transform: uppercase;
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);
    background-color: var(--grid-bkg-calc);
}

table.grid table.grid_col_header th
{
    border-color: var(--grid-border-color);
}
table.grid table.grid_row_sider th
{
    border-color: var(--grid-border-color);
}
table.grid table.grid_row_trailer td
{
}
table.grid table td
{  
    text-align: center;
    border-color: var(--grid-border-color);
}
table.grid table td.cellblurred
{
   background-color: var(--grid-bkg-warning);
}
table.grid table td.celldisabled
{
   background-color: var(--grid-bkg-calc);
}

/* GRID > CORNER > SWITCH */

table.grid div.box_corner a
{
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: var(--input-width-tiny);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding: 0px var(--padding-base);
    margin: 0px calc(var(--margin-close) / 2);
    background: var(--input-color-bkg);
    border: var(--input-border);
    border-radius: var(--border-radius-pill);
    color: var(--font-color-base);        
}

table.grid div.box_corner a.mult_current
{
    border: var(--input-border-active);
    background-color: var(--active-color);
    color: var(--negative-color);
}

table.grid div.box_corner a.icon
{
    border: none;
    background-color: transparent;
}

/* GRID > INPUTS > TOGGLE */

table.grid table td span 
{
    text-align: center;
}

table.grid table td span.grid_status_0:before
{
    content: "";
}

table.grid table td span.grid_status_1:before 
{
    content: "\f00c";
    color: var(--icon-color);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);    
}

/* GRID > INPUTS > NUMERIC */

table.grid input 
{
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    padding: 0px var(--padding-base);
    background-color: var(--grid-bkg-base);
}

table.grid input.celldisabled 
{
    display: none;
}

table.grid input.readonly 
{
    color: var(--input-color-readonly);
}

table.grid table td.cellblurred input 
{
    background-color: var(--grid-bkg-warning);
    color: var(--negative-color);
}

/* GRID > INPUTS > DATE-TIME */

table.grid table td div.calendarwrap
{ 
   position: relative; 
   width: 100%;
   height: 100%;
}

table.grid table td div.calendarwrap input
{
    cursor: pointer; 
}                                       

table.grid table td a.icon
{ 
    position:absolute;
    right: 2px; 
    top: 3px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 14px;
    color: #666666;
}

table.grid table td a.__clear-hide { visibility: hidden; }

/* SYSTEM SURFER */

.syssurfbox h1
{
    font-weight: normal;
    text-transform: uppercase;    
    white-space: nowrap;    
    font-family: var(--font-bold);
    font-size: var(--font-size-base);
    padding: calc(var(--padding-base) / 2) var(--padding-base);
    border-bottom: var(--tab-head-border);
}

ul.syssurf
{
    width: 100%;
    list-style-image: none;
    list-style-type: none;
}

ul.syssurf li 
{ 
    position: relative;
    width: 100%;
    text-align: left;   
    padding: calc(var(--padding-base) / 2) var(--padding-base);
}

ul.syssurf li.active
{
    cursor: pointer;
}

/* LOG WALL */

ul.log-wall 
{ 
    margin: 0px auto;   
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    width: 100%; 
}

/* LOG WALL > ITEM */
            
ul.log-wall li 
{ 
    position: relative;    
    width: 100%;    
    padding: var(--padding-base);
    border-bottom: var(--area-border-base);
}

ul.log-wall li.active
{
    cursor: pointer;
}

/* LOG WALL > ITEM > AVATAR */

ul.log-wall li div.log-avatar 
{
    display: inline-block;
    float: left;
}    
                    
ul.log-wall li span.log-avatar 
{ 
    display: inline-block;
    float: left;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);    
    font-size: var(--font-size-bigger);
    color: var(--negative-color);
}

ul.log-wall li div.log-avatar span.__avatar-side-id
{
    display: none;
}

ul.log-wall li span.log-avatar .icon
{ 
    display: inline-block;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    color: var(--negative-color);
}

ul.log-wall li span.log-avatar .icon:hover
{
    color: var(--negative-color);
}

/* LOG WALL > ITEM > TITLE */
 
ul.log-wall li div.log-title 
{ 
    vertical-align: top;
    letter-spacing: 1px;
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
    font-size: var(--font-size-large);
}

ul.log-wall li div.log-title.active
{
    cursor: pointer;
}

/* LOG WALL > ITEM > DESCRIPTION */

ul.log-wall li div.log-desc 
{ 
    margin-top: var(--margin-close);
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
}

ul.log-wall li div.log-desc.active
{
    cursor: pointer;
}

/* LOG WALL > ITEM > INFO */

ul.log-wall li div.log-info 
{ 
    letter-spacing: 1px;
    font-size: var(--font-size-smaller);
    margin-top: var(--margin-close);
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));    
}

span.log-infoelement
{
    display: inline-block;
    margin-right: var(--margin-base);
    line-height: var(--icon-dim-base);
    color: var(--font-color-light);
}

span.log-infoelement .icon
{
    display: inline-block;
    vertical-align: top;
    margin-right: var(--margin-close);
    color: var(--font-color-light);
}

span.log-infoelement.actions .icon
{
    color: var(--icon-color);
}

span.log-infoelement.download .icon
{
    margin-right: 0px;
    color: var(--icon-color);
}

/* LOG WALL > ITEM > FAVOURITE */

ul.log-wall li div.log-favourite-info 
{ 
    letter-spacing: 1px;
    font-size: var(--font-size-smaller);
    margin-top: var(--margin-close);
    margin-left: var(--icon-side-padding); 
}

/* LOG WALL > TAG */

ul.log-wall li span.log-infoelement span.tag
{
    display: inline-block;
    border-radius: var(--border-radius-pill);
    padding: 0px var(--padding-base);
    font-size: var(--font-size-smaller);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
}

/* LOG WALL > SELECT */

ul.log-wall li div.list_check
{
    display: none;
    position: absolute;    
    left: var(--margin-close);
    top: var(--margin-close); 
}

ul.log-wall li div.list_check .checkboxwrap,
ul.log-wall li div.list_check .checkboxwrap_checked
{
   border-radius: 100%;        
   width: var(--icon-dim-large);
   height: var(--icon-dim-large);
   background-color: var(--tab-row-bkg-even);
}

ul.log-wall li div.list_check .checkboxwrap_checked 
{ 
    background-color: var(--checkbox-checked-bkg);
}

ul.log-wall li div.list_check .checkboxwrap_checked:before 
{
   position: absolute;
   top: 0px;
   left: 0px;
   width: var(--icon-dim-large);
   height: var(--icon-dim-large);
   line-height: var(--icon-dim-large);
   font-size: var(--icon-size-base);
}

ul.log-wall li.__activeselect div.list_check
{
    display: block;    
}

ul.log-wall li.__selected
{
    background-color: var(--tab-row-bkg-odd);
}

/* TICKET WALL */

ul.ticket-wall 
{ 
    padding: 0px;
    list-style-image: none;
    list-style-type: none;    
    overflow-wrap: break-word;
    width: calc(100vw - var(--header-width) - var(--icon-dim-xl) - var(--margin-base));
}

/* TICKET WALL > POST */
            
ul.ticket-wall li 
{ 
    position: relative;
    width: 100%;
    text-align: left;
    padding: var(--margin-base) 0px;
    border-bottom: var(--area-border-base);
}

/* TICKET WALL > POST > AVATAR */
                    
ul.ticket-wall li span.ticket-avatar 
{ 
    display: inline-block;
    float: left;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: 100%;        
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-size: var(--font-size-xxl);
    color: var(--negative-color);
}      

ul.ticket-wall li div.ticket-avatar span.__avatar-side-id
{
    display: none;
}

/* TICKET WALL > POST > TITLE */
 
ul.ticket-wall li div.ticket-title 
{ 
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl);
}

ul.ticket-wall li div.ticket-title a
{
    color: var(--font-color-base);
}

ul.ticket-wall li div.ticket-title a.__notify-newpost
{
    vertical-align: middle;
    margin-left: 8px;
}

/* TICKET WALL > POST > SUB-TITLE */
                                    
ul.ticket-wall li div.ticket-sub 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));    
    font-size: var(--font-size-smaller);
}

span.ticket-infoelement
{
    display: inline-block;
}

span.ticket-infoelement:after
{
    content: "\f111";
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-tiny);
    color: var(--font-color-light);
}

span.ticket-infoelement:last-child:after
{
    display: none;
}

span.ticket-infoelement .icon
{
    display: inline-block;
    vertical-align: bottom;
    height: var(--icon-dim-small);
    line-height: var(--icon-dim-small);
    font-size: var(--icon-size-small);
}

span.ticket-infoelement .side_icon
{
    display: inline-block;
    color: var(--font-color-light);
}

ul.ticket-wall li div.ticket-sub span.tag
{ 
    display: inline-block;
    margin: 0px calc(var(--margin-close) / 2);
    border-radius: var(--border-radius-pill);
    padding: 2px var(--padding-base);
    font-size: var(--font-size-smaller);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
}

/* TICKET WALL > POST > DESCRIPTION */

ul.ticket-wall li div.ticket-desc 
{     
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    margin-top: var(--margin-base);
    font-size: var(--font-size-large);
}

ul.ticket-wall li div.ticket-desc img.emoji
{
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: text-top;
}
                                                             
/* TICKET WALL > POST > INFO */

ul.ticket-wall li div.ticket-info 
{     
    letter-spacing: 1px;
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    margin-top: var(--margin-base);    
    font-size: var(--font-size-smaller);    
    color: var(--font-color-light);
}

/* TICKET WALL > POST > DISCUSSION */   

ul.ticket-wall div.ticket-discussion 
{ 
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));        
}                               

div.ticket-comments-wrap
{
    position: relative;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
}

a.ticket-comments 
{ 
    position: relative;
    display: block;
}    

a.ticket-comments .icon
{ 
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-large);
}

a.ticket-comments span.ticket-comments-value 
{ 
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;    
    text-align: center;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    color: var(--negative-color);
}                               

div.ticket-comments-wrap.tiny
{
    display: inline-block;
    vertical-align: top;
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
}

div.ticket-comments-wrap.tiny a.__notify-newcount
{
    top: calc(-1 * var(--margin-base));
}

div.ticket-comments-wrap.tiny a.ticket-comments
{    
    margin-top: calc(-1 * var(--padding-base) / 2);
}

div.ticket-comments-wrap.tiny a.ticket-comments .icon
{ 
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
}

div.ticket-comments-wrap.tiny a.ticket-comments span.ticket-comments-value 
{ 
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
}

/* TICKET WALL > POST > ATTACHMENTS */

ul.ticket-wall div.ticket-attachments
{ 
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-top: var(--margin-base);
    margin-left: var(--margin-close);
} 

.ticket-attach-wrap
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
}

.ticket-attach-wrap .icon
{
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-mid);
}

.ticket-attach-count
{
    position: absolute;
    display: block;
    text-align: center;
    border-radius: 100%;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);
    font-size: var(--font-size-smaller);
    background-color: var(--notify-circle-color);
    color: var(--negative-color);
}

.ticket-attach-wrap:hover .icon
{
    color: var(--active-color);
}

.ticket-attach-wrap:hover .ticket-attach-count
{
    background-color: var(--active-color);
}

/* TICKET WALL > POST > REACTIONS */   

ul.ticket-wall div.ticket-reactions
{ 
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-top: var(--margin-base);
    margin-left: var(--margin-close);
}         

ul.ticket-wall span.ticket-reactions-wrap
{
    display: inline-block;
}

a.ticket-reactions-item
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: var(--margin-close);    
}

a.ticket-reactions-item .icon
{
    display: block;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);    
}

a.ticket-reactions-item .icon:before
{
    font-size: var(--icon-size-mid);
}

a.ticket-reactions-item span.ticket-reactions-item-value
{ 
    position: absolute;
    display: block;
    text-align: center;
    border-radius: 100%;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);
    font-size: var(--font-size-smaller);
    background-color: var(--notify-circle-color);
    color: var(--negative-color);
}  

a.ticket-user-react,
a.ticket-cta-react,
a.ticket-cta-reply
{
    position: relative;
    display: inline-block;   
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding: 0px var(--margin-base) 0px 38px;
    color: var(--font-color-base);    
    border-radius: var(--border-radius-pill);
    border: var(--area-border-base);
    background-color: var(--area-bkg-base);
}

a.ticket-user-react .icon,
a.ticket-cta-react .icon,
a.ticket-cta-reply .icon
{
    position: absolute;
    top: -1px;
    left: var(--padding-base);    
    line-height: var(--input-height-inborder);
}

a.ticket-user-react,
a.ticket-cta-react:hover,
a.ticket-cta-reply:hover
{
    color: var(--negative-color);
    background-color: var(--active-color);
    border: var(--input-border-active);
}

a.ticket-user-react .icon,
a.ticket-cta-react:hover .icon,
a.ticket-cta-reply:hover .icon
{
    color: var(--negative-color);
}

/* TICKET WALL > POST > ACTION MENU */

ul.ticket-wall div.ticket-actions,
ul.ticket-wall div.ticket-favourite
{
    display: inline-block;
    position: relative;   
    padding-top: calc(var(--padding-base) / 2);
    margin-top: var(--margin-base);
    margin-left: var(--margin-close);
}

/* TICKET WALL > FOLLOWERS > INFO */

div.ticket-follower-box 
{ 
    display: inline-block;
    cursor: pointer;
}

div.ticket-follower-box .user_snippet
{
    margin-right: calc(var(--margin-close) / 2);
}

div.ticket-read-box
{
    display: inline-block;
    cursor: pointer;
}

/* TICKET WALL > FOLLOWERS > STATUS */

div.ticket-follower-access 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-close);    
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}

div.ticket-follower-status.icon.status_follower
{ 
    position: absolute;
    background: transparent;
    bottom: 0px;
    right: 0px;
    font-size: var(--icon-size-small);
}

.status_follower_stored:before { content: "\f00c"; color: #999999; }
.status_follower_seen:before, 
.status_follower_read:before { content: "\f00c\f00c"; letter-spacing: -8px; margin-left: -12px; } 
.status_follower_read:before { color: var(--active-color); }

/* TICKET WALL > SELECT */

ul.ticket-wall li div.list_check
{
    display: none;
    position: absolute;    
    left: 0px;
    top: var(--margin-base);    
}

ul.ticket-wall li div.list_check .checkboxwrap,
ul.ticket-wall li div.list_check .checkboxwrap_checked
{
   border-radius: 100%;        
   width: var(--icon-dim-xl);
   height: var(--icon-dim-xl);
   background-color: var(--tab-row-bkg-even);
}

ul.ticket-wall li div.list_check .checkboxwrap_checked 
{ 
    background-color: var(--checkbox-checked-bkg);
}

ul.ticket-wall li div.list_check .checkboxwrap_checked:before 
{
   width: var(--icon-dim-xl);
   height: var(--icon-dim-xl);
   line-height: var(--icon-dim-xl);
   font-size: var(--icon-size-large);
}

ul.ticket-wall li.__activeselect div.list_check
{
    display: block;    
}

ul.ticket-wall li.__selected
{
    background-color: var(--tab-row-bkg-odd);
}

/* TICKETS > DASHBOARD */

div.ticket-box 
{ 
    position: relative;
    text-align: left;
    overflow-wrap: break-word;
    width: calc(100vw - var(--header-width) - var(--icon-dim-xl) - var(--margin-base));
    padding-top: var(--margin-base);
}

/* TICKETS > DASHBOARD > AVATAR */

div.ticket-avatar
{
    float: left;
    display: inline-block;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
}

span.ticket-avatar 
{ 
    display: inline-block;
    text-align: center;    
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    color: var(--negative-color);
    /*font-family: var(--font-bold);*/
    font-size: var(--font-size-xxl);
}      

/* TICKETS > DASHBOARD > TITLE */

div.ticket-title 
{     
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl);
}

div.ticket-title span.ticket-title-separator:before
{
    content: "\f111";
    vertical-align: top;
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-tiny);
    line-height: var(--font-size-xl);
    color: var(--font-color-light);
}

/* TICKETS > DASHBOARD > SUB-TITLE */

div.ticket-sub 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));    
    font-size: var(--font-size-smaller);
}

div.ticket-sub span.tag
{ 
    display: inline-block;
    margin: 0px calc(var(--margin-close) / 2);
    border-radius: var(--border-radius-pill);
    padding: 2px var(--padding-base);
    font-size: var(--font-size-smaller);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    color: var(--font-color-light);
}

/* TICKETS > DASHBOARD > DESCRIPTION */

div.ticket-desc 
{ 
    margin-top: var(--margin-base); 
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-large);
}

div.ticket-desc img.emoji
{
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: text-top;
}

/* TICKETS > DASHBOARD > ATTACHMENTS */

div.ticket-attach
{ 
    margin-top: var(--margin-base); 
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
}

/* TICKETS > DASHBOARD > INFO */

div.ticket-info 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-base); 
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    color: var(--font-color-light);
    font-size: var(--font-size-smaller);
}

/* TICKETS > DASHBOARD > REACTIONS */

div.ticket-reactions
{ 
    display: inline-block;
    vertical-align: top;
    margin-top: var(--margin-base); 
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
}                  

/* TICKETS > DASHBOARD > ACTIONS & FAVOURITES */

div.ticket-actions,
div.ticket-favourite
{
    display: inline-block;
    padding-top: calc(var(--padding-base) / 2);
    margin-top: var(--margin-base);
    margin-left: var(--margin-base);
}

/* TICKETS > DASHBOARD > COMMENTS */        

div.ticket-pager-comments
{     
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    margin-top: var(--margin-base);    
    padding: var(--padding-base) 0px;
    font-size: var(--font-size-large);
    color: var(--font-color-light);
}

div.ticket-pager-comments .side_icon,
div.ticket-pager-comments .side_icon:before
{
    color: var(--active-color);
}

div.ticket-addnew 
{ 
    position: relative;
    vertical-align: top;    
    margin-top: var(--margin-base);
    padding-bottom: calc(var(--icon-dim-xl) - var(--margin-base));
}              

div.ticket-addnew div.ticket-write 
{ 
    position: relative;
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
}

div.ticket-write input,
div.ticket-write textarea,
div.ticket-write .editarea_box
{ 
    width: 100%;
}

div.ticket-write div.buttonbar
{
    text-align: left;
}

/* TICKETS > DASHBOARD > COMMENTS > POST */

div.ticket-comment
{
    position: relative;
    text-align: left;
    overflow-wrap: break-word;
    width: calc(100vw - var(--header-width) - var(--icon-dim-xl) + var(--margin-base));
    margin-top: var(--margin-base);
    padding-bottom: var(--margin-base);
    border-bottom: var(--area-border-base);    
}

.search-fx
{
    transition: background-color 3s;
}

.search-fx-hilight
{
    background-color: #FFBBBB !important;

}

div.ticket-comment-title 
{ 
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);    
}

/* TICKETS > DASHBOARD > COMMENTS > REPLY */

div.ticket-reply
{ 
    display: inline-block;
    vertical-align: top;
    margin-top: var(--margin-base); 
    margin-left: var(--margin-base);
} 

div.ticket-repliesbox
{
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
}

div.ticket-repliesbox .ticket-replies
{    
    height: auto;
    margin-top: var(--margin-base);
    font-size: var(--font-size-large);
    color: var(--active-color);    
}

div.ticket-repliesbox .ticket-replies:before
{
    color: var(--active-color);
}

div.ticket-repliesbox .ticket-reply-last
{
    margin-left: var(--margin-base);
    font-size: var(--font-size-base);
    color: var(--font-color-base);
}

div.ticket-repliesbox .ticket-replies-separator
{
    margin-top: var(--margin-base);
    border-bottom: var(--area-border-base);
}

/* TICKETS > DASHBOARD > BACK */ 

div.ticket-back 
{           
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));    
    padding: var(--margin-base) 0px;
    font-size: var(--font-size-bigger);
}

div.ticket-back a,
div.ticket-back a:before
{
    color: var(--link-color);
}

/* NOTICES WALL */

ul.notice-wall 
{ 
    margin: 0px auto;   
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    width: 100%; 
}

/* NOTICE WALL > ITEM */
            
ul.notice-wall li 
{ 
    position: relative;    
    width: 100%;    
    padding: var(--padding-base);
    border-bottom: var(--area-border-base);
}

ul.notice-wall li:hover
{
    background-color: var(--tab-row-bkg-hover);
}

ul.notice-wall li.notice-click
{
    cursor: pointer;
}

ul.notice-wall li.not-read
{
    font-family: var(--font-bold);
}

/* NOTICE WALL > ITEM > AVATAR */

ul.notice-wall li div.notice-avatar 
{
    display: inline-block;
    float: left;
}    
                    
ul.notice-wall li span.notice-avatar 
{ 
    display: inline-block;
    float: left;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);    
    font-family: var(--font-bold);
    font-size: var(--font-size-larger);
    color: var(--negative-color);
}

ul.notice-wall li span.notice-avatar:before
{
    font-family: var(--icon-font);
    font-size: var(--font-size-large);
    color: var(--icon-color);
}      

ul.notice-wall li div.notice-avatar span.__avatar-side-id
{
    display: none;
}

/* NOTICE WALL > ITEM > TITLE */
 
ul.notice-wall li div.notice-title 
{ 
    vertical-align: top;
    letter-spacing: 1px;
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
    font-size: var(--font-size-large);
}

/* NOTICE WALL > ITEM > DESCRIPTION */

ul.notice-wall li div.notice-desc 
{ 
    margin-top: var(--margin-close);
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
}
                                                             
/* NOTICE WALL > ITEM > INFO */

ul.notice-wall li div.notice-info 
{ 
    letter-spacing: 1px;
    font-size: var(--font-size-smaller);
    margin-top: var(--margin-close);
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
    color: var(--font-color-light);
}

ul.notice-wall li div.notice-info.side_icon:before
{
    color: var(--font-color-light);
}

/* NOTICE WALL > ITEM > READ & REMOVE */

ul.notice-wall li div.notice-read,
ul.notice-wall li div.notice-remove
{
    position: absolute;
    top: var(--padding-base);
}

ul.notice-wall li div.notice-read
{
    right: calc(var(--icon-dim-base) + var(--padding-base));
}

ul.notice-wall li div.notice-remove
{
    right: var(--padding-base);
}

/* NOTICE WALL > SELECT */

ul.notice-wall li div.list_check
{
    display: none;
    position: absolute;    
    left: var(--margin-close);
    top: var(--margin-close); 
}

ul.notice-wall li div.list_check .checkboxwrap,
ul.notice-wall li div.list_check .checkboxwrap_checked
{
   border-radius: 100%;        
   width: var(--icon-dim-large);
   height: var(--icon-dim-large);
   background-color: var(--tab-row-bkg-even);
}

ul.notice-wall li div.list_check .checkboxwrap_checked 
{ 
    background-color: var(--checkbox-checked-bkg);
}

ul.notice-wall li div.list_check .checkboxwrap_checked:before 
{
   position: absolute;
   top: 0px;
   left: 0px;
   width: var(--icon-dim-large);
   height: var(--icon-dim-large);
   line-height: var(--icon-dim-large);
   font-size: var(--icon-size-base);
}

ul.notice-wall li.__activeselect div.list_check
{
    display: block;    
}

ul.notice-wall li.__selected
{
    background-color: var(--tab-row-bkg-odd);
}

/* NOTIFIES */

div.notify-item 
{ 
    position: relative;
    padding: var(--padding-base);
    border-bottom: var(--area-border-base);
}

div.notify-item:hover
{
    background-color: var(--tab-row-bkg-hover);
}

div.notify-item.not-read 
{ 
    font-family: var(--font-bold);
}                  
                  
div.notify-click 
{ 
    cursor: pointer;
}

/* NOTIFIES > AVATAR */

div.notify-item span.notify-avatar 
{ 
    display: inline-block;
    float: left;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);    
    font-size: var(--font-size-bigger);
    color: var(--negative-color);
}      

div.notify-item span.notify-avatar:before
{
    font-family: var(--icon-font);
    font-size: var(--font-size-large);
    color: var(--icon-color);
}

div.notify-item div.notify-avatar span.__avatar-side-id
{
    display: none;
}

/* NOTIFIES > TITLE */

div.notify-item div.notify-title
{ 
    vertical-align: top;
    letter-spacing: 1px;
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
    font-size: var(--font-size-large);
}

/* NOTIFIES > INFO */

div.notify-item div.notify-desc 
{ 
    margin-top: var(--margin-close);
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
}
                                                             
div.notify-item div.notify-info 
{ 
    position: relative;
    letter-spacing: 1px;
    margin-top: var(--margin-close);
    margin-left: calc(var(--icon-dim-large) + var(--margin-base));
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}              

div.notify-item div.notify-info.side_icon,
div.notify-item div.notify-info.side_icon:before 
{ 
    color: var(--font-color-light);
}                                   

/* NOTIFIES > STATUS  & REMOVE */

div.notify-item div.notify-read,
div.notify-item div.notify-remove
{
    position: absolute;
    top: var(--padding-base);    
}

div.notify-item div.notify-read
{
    right: var(--icon-dim-small);
}

div.notify-item div.notify-remove
{   
    right: 0px;        
}

div.notify-item div.notify-read .icon,
div.notify-item div.notify-read .icon:before,
div.notify-item div.notify-remove .icon,
div.notify-item div.notify-remove .icon:before
{
    vertical-align: top;
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    line-height: var(--icon-dim-small);
    font-size: var(--icon-size-small);    
}

/* NOTIFIES > MORE NOTICES */

a.notify-more
{ 
    display: block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: var(--padding-base);
    color: var(--font-color-base);
    font-size: var(--font-size-smaller);
    font-family: var(--font-bold);
}

/* POST WALL */

ul.post-wall 
{ 
    margin: 0px auto;   
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    width: 100%; 
}

/* POST WALL > POST */
            
ul.post-wall li 
{ 
    position: relative;
    width: 100%;
    padding: var(--margin-base) 0px;
    border-bottom: var(--area-border-base);
}

/* POST WALL > POST > AVATAR */
              
ul.post-wall li div.post-avatar 
{ 
    float: left;
    display: inline-block;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
}

ul.post-wall li span.post-avatar
{ 
    float: left;
    display: inline-block;    
    text-align: center;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--state-color-off);
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-size: var(--font-size-xxl);
    color: var(--negative-color);
}

ul.post-wall li span.post-avatar.__bkgcontain
{
    background-size: contain;
}

ul.post-wall li span.post-avatar.icon
{
    cursor: pointer;
    background: var(--area-bkg-base);
}

ul.post-wall li span.post-avatar::before
{
    font-family: var(--icon-font);
    font-size: var(--font-size-xxl);
    color: var(--icon-color);
}          

ul.post-wall li div.post-avatar span.__avatar-side-id
{
    display: none;
}

/* POST WALL > POST > TITLE */
 
ul.post-wall li div.post-title 
{     
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl);    
}

ul.post-wall li div.post-title a
{
    color: var(--font-color-base);
}

ul.post-wall li div.post-title a.__notify-newpost
{
    vertical-align: middle;
    margin-left: var(--margin-close);
}

ul.post-wall li div.post-title span.post-title-separator:before
{
    content: "\f111";
    vertical-align: top;
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-tiny);
    line-height: var(--font-size-xl);
    color: var(--font-color-light);
}

/* POST WALL > POST > SUB-TITLE */
                                    
ul.post-wall li div.post-sub 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-smaller);
}

ul.post-wall li div.post-sub span.tag
{ 
    display: inline-block;
    margin: 0px calc(var(--margin-close) / 2);
    border-radius: var(--border-radius-pill);
    padding: 2px var(--padding-base);
    font-size: var(--font-size-smaller);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    color: var(--font-color-base);
}

span.post-infoelement
{
    display: inline-block;
}

span.post-infoelement:after
{
    content: "\f111";
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-tiny);
    color: var(--font-color-light);
}

span.post-infoelement:last-child:after
{
    display: none;
}

span.post-infoelement .icon
{
    display: inline-block;
    vertical-align: bottom;
    overflow: visible;
    height: var(--icon-dim-small);
    line-height: var(--icon-dim-small);
}

span.post-infoelement .side_icon
{
    display: inline-block;
    color: var(--font-color-light);
}

/* POST WALL > POST > DESCRIPTION */

ul.post-wall li div.post-desc 
{ 
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-large);
}
                                                             
/* POST WALL > POST > INFO */

ul.post-wall li div.post-info 
{ 
    letter-spacing: 1px;
    line-height: var(--icon-dim-base);
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}

ul.post-wall li div.post-info .side_icon
{
    display: inline-block;
    margin-right: var(--margin-base);
}

ul.post-wall li div.post-info .side_icon:hover:before
{
    color: var(--icon-color);
}

/* POST WALL > POST > BADGE */

.post-badge-wrap
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
}

.post-badge-wrap .icon
{
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-mid);
}

.post-badge-count
{
    position: absolute;
    display: block;
    text-align: center;
    border-radius: 100%;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);
    font-size: var(--font-size-smaller);
    background-color: var(--notify-circle-color);
    color: var(--negative-color);
}

/* POST WALL > POST > ACTIONS */

ul.post-wall li div.post-actions
{     
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
}

span.post-actelement
{
    display: inline-block;
    vertical-align: top;
    margin-right: var(--margin-close);
}

span.post-actelement .icon
{
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-mid);
}

span.post-actelement .side_icon
{
    letter-spacing: 1px;
    line-height: var(--icon-dim-large);   
    font-size: var(--font-size-smaller);
}

span.post-actelement .side_icon:before,
span.post-actelement .side_icon:hover:before
{
    vertical-align: top;
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-mid);
    color: var(--icon-color);
}

span.post-actelement .pillstatus
{
    line-height: var(--icon-dim-large);
}

/* POST WALL > TAGS */

div.post-tags-count
{ 
    position: relative;
    float: left;    
}

div.post-tags-count .icon
{ 
    font-size: var(--icon-size-mid);    
}

div.post-tags-count.-no-tag .icon,
div.post-tags-count-tree.-no-tag .icon
{ 
    color: var(--icon-color);
}

span.post-tags-value 
{ 
    display: block;
    text-align: center;
    position: absolute;    
    top: 0px;
    left: 0px;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-size: var(--font-size-smaller);
    color: var(--negative-color);
}

/* POST WALL > TAGS > TREE */

div.post-tags-count-tree
{
    display: inline-block;
    float: left;
}

div.post-tags-count-tree .icon
{
    font-size: 20px;
}

div.post-tags-count-tree span.post-tags-value
{
    top: 0px;
}

/* POST WALL > ATTACHMENTS */

.post-attach-wrap
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
}

.post-attach-wrap .icon
{
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    font-size: var(--icon-size-mid);
}

.post-attach-count
{   
    position: absolute;
    display: block;
    text-align: center;
    border-radius: 100%;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);
    font-size: var(--font-size-smaller);
    background-color: var(--notify-circle-color);
    color: var(--negative-color);
}

/* POST WALL > SELECT */

ul.post-wall li div.list_check
{
    display: none;
    position: absolute;
    left: 0px;
    top: var(--margin-base);
}

ul.post-wall li div.list_check .checkboxwrap,
ul.post-wall li div.list_check .checkboxwrap_checked
{
   border-radius: 100%;        
   width: var(--icon-dim-xl);
   height: var(--icon-dim-xl);
   background-color: var(--tab-row-bkg-even);
}

ul.post-wall li div.list_check .checkboxwrap_checked 
{ 
    background-color: var(--checkbox-checked-bkg);
}

ul.post-wall li div.list_check .checkboxwrap_checked:before 
{
   width: var(--icon-dim-xl);
   height: var(--icon-dim-xl);
   line-height: var(--icon-dim-xl);
   font-size: var(--icon-size-large);
}

ul.post-wall li.__activeselect div.list_check
{
    display: block;    
}

ul.post-wall li.__selected
{
    background-color: var(--tab-row-bkg-odd);
}

/* POST WALL > DRAG & DROP */

ul.post-wall.post-dragdrop li 
{
    cursor: move;
    padding-left: var(--padding-base);
    margin-bottom: var(--margin-close);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

ul.post-wall.post-dragdrop li.__drag_chosen,
ul.post-wall.post-dragdrop li.__drag_ghost,
ul.post-wall.post-dragdrop li.__drag_drag
{
    border-color: var(--active-color);
}

ul.post-wall.post-dragdrop li div.post-title
{
    margin-right: calc(2 * var(--margin-base));
    width: calc(85vw - (2 * var(--margin-base)));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* POST WALL > DRAG & DROP > SELECT */

ul.post-wall.post-dragdrop li div.list_check
{
    position: absolute;
    left: auto;
    top: var(--padding-base);
    right: var(--padding-base);
}

ul.post-wall.post-dragdrop li div.list_check .checkboxwrap,
ul.post-wall.post-dragdrop li div.list_check .checkboxwrap_checked
{
   width: var(--checkbox-dim);
   height: var(--checkbox-dim);
   border-radius: var(--checkbox-border-radius);
}

ul.post-wall.post-dragdrop li div.list_check .checkboxwrap_checked:before 
{
   font-size: var(--checkbox-icon-size);
   width: var(--checkbox-icon-dim);
   height: var(--checkbox-icon-dim);
   line-height: var(--checkbox-icon-dim);   
}

/* POST GRID */

div.post-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-close);    
}

div.post-grid-item
{
    grid-column: auto;
    position: relative;
    display: inline-block;    
    text-align: center;
    min-width: var(--area-width-min);
    padding: var(--padding-base);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

/* POST GRID > AVATAR */

div.post-grid-item div.post-avatar 
{ 
    float: none;
    margin: auto;
    display: block;
    width: var(--icon-dim-xxl);
    height: var(--icon-dim-xxl);
}

div.post-grid-item span.post-avatar 
{ 
    margin: auto;
    display: block;    
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--state-color-off);
    border-radius: var(--border-radius-base);     
    width: var(--icon-dim-xxl);
    height: var(--icon-dim-xxl);
    line-height: var(--icon-dim-xxl);
}

div.post-grid-item span.post-avatar.__bkgcontain
{
    background-size: contain;
}

div.post-grid-item span.post-avatar.icon
{
    cursor: pointer;    
    background: var(--area-bkg-base);
}

div.post-grid-item span.post-avatar::before
{
    font-family: var(--icon-font);
    font-size: var(--icon-size-xl);
    color: var(--icon-color);
}          

div.post-grid-item div.post-avatar span.__avatar-side-id
{
    display: none;
}

/* POST GRID > TITLE */
 
div.post-grid-item div.post-title 
{     
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--margin-close);
   font-family: var(--font-base);
   font-size: var(--font-size-base);
}

div.post-grid-item div.post-title a
{
    color: var(--font-color-base);
}

/*
div.post-grid-item div.post-subtitle 
{
    display: block;
    letter-spacing: 1px;
    margin-top: var(--margin-close);
    color: var(--font-color-light);
    font-size: var(--font-size-smaller);
}

div.post-grid-item div.post-subtitle .aux_sub
{    
    font-size: var(--font-size-tiny);
    margin-left: var(--margin-close);
}
*/

/* POST GRID > SUB-ELEMENT */
                                    
div.post-grid-item div.post-sub 
{ 
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--margin-base);
}

/* POST GRID > INFO */

/*
div.post-grid-item div.post-info
{
    display: none;
    position: absolute;
    top: var(--padding-base);
    right: var(--padding-base);
}

div.post-grid-item:hover div.post-info
{
    display: block;
}
*/

/* POST GRID > ACTIONS */

div.post-grid-item div.post-actions
{
    display: none;
    position: absolute;    
    right: 0px;
    top: calc(var(--margin-close) / 2);
}

div.post-grid-item:hover div.post-actions
{
    display: block;
}

/* POST GRID  > SELECT */

div.post-grid-item div.list_check
{
    position: absolute;
    top: var(--padding-base);
    left: var(--padding-base);
}

/* POST GRID > DRAG & DROP */

div.post-grid.post-dragdrop div.post-grid-item
{    
    cursor: move;
}

div.post-grid.post-dragdrop div.post-grid-item.__drag_chosen,
div.post-grid.post-dragdrop div.post-grid-item.__drag_ghost,
div.post-grid.post-dragdrop div.post-grid-item.__drag_drag
{
    border-color: var(--active-color);
}

/* POST > DASHBOARD */

div.post-box 
{ 
    position: relative;
    text-align: left;
    overflow-wrap: break-word;
    width: calc(100vw - var(--header-width) - var(--icon-dim-xl) - var(--margin-base));
    padding-top: var(--margin-base);
}

/* POST > DASHBOARD > AVATAR */

div.post-avatar 
{ 
    float: left;
    display: inline-block;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
}

span.post-avatar
{ 
    float: left;
    display: inline-block;    
    text-align: center;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--state-color-off);    
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-size: var(--font-size-xxl);
    color: var(--negative-color);
}

span.post-avatar.__bkgcontain
{
    background-size: contain;
}

span.post-avatar.icon
{
    cursor: pointer;
    background: var(--area-bkg-base);
}

span.post-avatar::before
{
    font-family: var(--icon-font);
    font-size: var(--font-size-xxl);
    color: var(--icon-color);
}          

/* POST > DASHBOARD > TITLE */
 
div.post-title 
{     
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl);    
}

div.post-title span.post-title-separator:before
{
    content: "\f111";
    vertical-align: top;
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-tiny);
    line-height: var(--font-size-xl);
    color: var(--font-color-light);
}

/* POST > DASHBOARD > SUB-TITLE */
                                    
div.post-sub 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-smaller);
}

div.post-sub span.tag
{ 
    display: inline-block;
    margin: 0px calc(var(--margin-close) / 2);
    border-radius: var(--border-radius-pill);
    padding: 2px var(--padding-base);
    font-size: var(--font-size-smaller);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    color: var(--font-color-base);
}

/* POST > DASHBOARD> DESCRIPTION */

div.post-desc 
{ 
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-large);
}

/* POST > DASHBOARD > INFO */

div.post-info 
{ 
    letter-spacing: 1px;
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}

div.post-info .side_icon
{
    display: inline-block;
    margin-right: var(--margin-base);
}

div.post-info .side_icon:hover:before
{
    color: var(--icon-color);
}

/* POST > DASHBOARD > ACTIONS */

div.post-actions
{     
    margin-top: var(--margin-base);
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
}

/* POST SNIPPET */

.post-snippet .icon,
.doc-snippet .icon
{
    display: inline-block;
    margin-right: var(--margin-close);
}

.post-snippet .label,
.doc-snippet .label
{
    display: inline-block;
    vertical-align: top;
    line-height: var(--icon-dim-base);
}

/* WEB SERVICES */

span.http-req
{
    display: inline-block;
    width: 64px;
    text-align: center;
}

span.http-url
{
    
}

span.http-method
{
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0px 8px;
    font-weight: 900;
    font-size: 10px;
    border-radius: 4px;
    color: #FFFFFF;
}

span.http-get { background-color: #56b371; /* #249c47;*/ }
span.http-post { background-color: #ffb400; }
span.http-put { background-color: #4199f1; /*#097bed;*/ }
span.http-delete { background-color: #f16057; }

/* WIZARD */

div#steplist 
{ 
    float: left;
    width: 20%;
    position: sticky !important;
    top: var(--padding-base);
    padding: var(--padding-base);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

div#steplist .caption 
{ 
    font-size: var(--font-size-xl);    
}               

div#steplist ol 
{ 
    padding: 0px;    
    list-style-position: inside;
    margin-top: var(--margin-base);
}                        

div#steplist ol li 
{ 
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: var(--font-size-smaller);
    padding: calc(var(--padding-base) / 2) var(--padding-base);
    border-radius: var(--border-radius-base);
}                  

div#steplist ol li.step_on 
{ 
    background: var(--active-color);
    color: var(--negative-color);
}

div#steps_current,
div#steps_control 
{ 
    float: right;
    width: 78%;
}

div#steps_current { padding-bottom: 64px; }

.steplist-buttons
{
    margin-top: var(--margin-base);
}

/* FILE BROWSER */

.save_as_box
{
    margin-bottom: var(--margin-base);
}

.save_as_box input
{
    width: 100%;
}

.save_as_box input.halfsize,
.save_as_box .readonly_box.halfsize
{
    width: 50%;
}

/* RATING */

.rating-h-spacer
{
    margin-left: var(--margin-close);
}

/* STAR RATING */

.star-rating 
{ 
    letter-spacing: 2px;
    white-space: nowrap;
}

.star-rating span:before
{ 
    display: inline-block;
    content: "\f005";
    font-family: var(--icon-font);
    font-size: var(--icon-size-small);
    color: var(--state-color-off);
}

.star-rating span.star-rating-on:before
{     
    color: var(--state-color-warning);
}

/* DRAG & DROP > LIST */

ul.dragdrop
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

li.dragdrop
{
    cursor: move;
    position: relative;
    display: block;
    padding: var(--padding-base);
    margin-bottom: var(--margin-close);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

div.dragdrop-inline-wrap
{
    display: inline-block;
    margin-right: 8px;
    vertical-align: top;
}

/* DRAG & DROP > GRID */

div.dragdrop_grid_box
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-close);
}

/* DRAG & DROP > TREE */

ul.dragdrop_tree_root
{
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.dragdrop_tree
{
  padding-left: 24px;
  list-style: none;
}

li.dragdrop_tree a
{
  display: inline-block;
  white-space: nowrap;
  font-size: 14px;
  color: #666666;
  margin-bottom: 12px;
  cursor: move;
}

li.dragdrop_tree a.side_icon:before
{
    width: 24px;
    height: 24px;
    border-radius: 100%;
}

.tree_wrap_dragdrop a.tree_ctrl_dragdrop:before
{
  width: 24px;
  height: 17px;
  display: inline-block;
  font-family: var(--icon-font);
  font-size: 20px;
  content: ""; 
}

.tree_wrap_dragdrop:hover a.tree_ctrl_dragdrop:before
{
  content: "\f0dc"; 
}

/* USERS > WALL */

/* USERS > SNIPPET */
  
span.user_snippet 
{ 
    position: relative;
    display: inline-block;
    white-space: nowrap;
    height: var(--icon-dim-base);
}

span.user_snippet span.all,
span.user_snippet span.noone
{
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

span.user_snippet span.all:before
{
    content: "\f500";
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-size: var(--icon-size-base);
    font-family: var(--icon-font);    
    color: var(--icon-color);    
}

span.user_snippet span.noone:before
{
    content: "\f007";
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-size: var(--icon-size-base);
    font-family: var(--icon-font);    
    color: var(--font-color-light);    
}

span.user_snippet span.nick
{     
    /*display: inline-block;*/
    white-space: nowrap; 
    margin-left: 6px;
    color: var(--font-color-base);
}     

span.user_snippet span.nick.light
{
    color: var(--font-color-light);
}

span.user_snippet span.status
{
    vertical-align: top;
}     

/* USERS > SNIPPET > WITH INFO */

span.user_snippet.w_info
{
    width: 100%;
    height: auto;
}

span.user_snippet.w_info
{
    white-space: normal;
}

span.user_snippet.w_info span.nick
{
    white-space: normal;
    display: inline-block;
    width: calc(100% - var(--icon-dim-base) - var(--padding-base));
}

span.user_snippet.w_info span.nick.afterstatus
{
    width: 80%;
}

/* USERS > SNIPPET > AUX INFO */

span.user_snippet span.datainfo
{ 
    display: block;
    letter-spacing: 1px;    
    margin-left: var(--icon-side-padding);
    font-size: var(--font-size-smaller);
}   

span.user_snippet span.datainfo .infoelement
{
    display: inline-block;
    margin-top: var(--margin-close);
}

span.user_snippet span.datainfo .infoelement:after
{
    content: "\f111";
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-tiny);
    color: var(--font-color-light);
}

span.user_snippet span.datainfo .infoelement:last-child:after
{
    display: none;
}

span.user_snippet span.datainfo .infoelement.lowlight
{
    color: var(--font-color-light);
}

span.user_snippet span.datainfo .infoelement .pillstatus 
{
    margin-right: 0px;
}

span.user_snippet span.timeinfo
{ 
    display: block;    
    letter-spacing: 1px;
    margin-left: var(--icon-side-padding);
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
}   

span.user_snippet span.timeinfo.spaced
{ 
    margin-top: var(--margin-close);
}

/* USERS > SNIPPET > AVATAR */

span.user_snippet div.avatar
{
    display: inline-block;
    vertical-align: top;
    height: var(--icon-dim-base);
}

span.user_snippet span.avatar 
{ 
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 100%;
    letter-spacing: 1px;
    padding-left: 2px;
    background-size: cover;
    background-position: center;
    background-color: var(--state-color-off);
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
    line-height: var(--icon-dim-base);
    font-size: var(--font-size-tiny);
    color: var(--negative-color);
}      

/* USERS > SNIPPET > ICON */

span.user_snippet div.inner_icon
{
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    text-align: center;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
}

span.user_snippet div.inner_icon span
{
    font-size: var(--icon-size-base);
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

/* USERS > SNIPPET > ACCOUNT */

span.user_snippet.user_account
{ 
    display: block;
    height: 100px;
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    color: var(--negative-color);
}

span.user_snippet.user_account.active
{
    cursor: pointer;
}

span.user_snippet.user_account div.avatar
{
    display: inline-block;
    float: left;    
    width: var(--icon-dim-xl);
    height:  var(--icon-dim-xl);
}

span.user_snippet.user_account span.avatar
{ 
    display: block;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: calc(var(--icon-dim-xl) - 4px);
    border: var(--btn-inverted-border-overlay);
    font-size: var(--font-size-xl);
}

span.user_snippet.user_account span.nick
{
    display: block;
    letter-spacing: 1px;
    width: calc(100% - var(--icon-dim-xl) - var(--margin-base));
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    font-family: var(--font-bold);
    font-size: var(--font-size-large);
    color: var(--negative-color);
}

span.user_snippet.user_account span.sub
{
    display: block;
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    margin-top: var(--margin-close);
    /*color: var(--font-color-light);*/
}

span.user_snippet.user_account span.lv
{
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-left: calc(var(--icon-dim-xl) + var(--margin-base));
    margin-top: var(--margin-close);
    font-size: var(--font-size-smaller);
}

q.user_info_phrase
{
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--margin-base);
    border-bottom: var(--area-border-base);
    /*
    background-color: var(--area-bkg-base);    
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
    */
}

.user_info_actions
{
    margin-top: var(--margin-close);
}


/* USERS > SNIPPET > GRID */

div.user_snippet_container
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    grid-gap: var(--margin-close);
}

div.user_snippet_item
{
    grid-column: auto;
    display: inline-block;
    height: auto;
    text-align: center;    
    
    /*
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    border: var(--area-border-base);
    background: var(--area-bkg-base);    
    */
}

/* USERS > SNIPPET > HOVER */

.popitselect a[data-focus="1"] span.user_snippet span.nick,
.popitselect a[data-focus="1"] span.user_snippet div.inner_icon span,
.popitmenu a[data-focus="1"] span.user_snippet span.nick,
.popitmenu a[data-focus="1"] span.user_snippet div.inner_icon span
{
    color: var(--negative-color);
}

/* USERS > MENTION */

.user_mention_edit
{
    white-space: nowrap;
    
    color: var(--active-color);
    /*white-space:pre-wrap;*/
    
    /*display: inline;*/

}

.user_mention_edit:before
{
    content: "@";
}

/* USERS > MENTION > AVATAR */

a.user_mention div.avatar
{
    display: inline-block;
    height: 24px;
}

a.user_mention span.avatar 
{ 
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    font-style: normal;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}      

/* USERS > ACCOUNT */

div.user_info_box
{ 
    width: 100%;
    position: relative;    
}

/* USERS > ACCOUNT > BANNER */

div.account_info_banner
{
    position: relative;     
    width: 100%;
    height: var(--area-preview-height-small);
    
    border-radius: var(--border-radius-base);
}

/* USERS > ACCOUNT > AVATAR */

div.account_info_avatar 
{ 
    display: block;    
    width: var(--icon-dim-xxl);
    height: var(--icon-dim-xxl);
}

div.user_info_box div.account_info_avatar
{
    position: absolute;
    left: 16px;
    top: 80px;
}

div.account_info_avatar span 
{ 
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: none;
    border-radius: 100%;
    text-align: center;
    width: var(--icon-dim-xxl);
    height: var(--icon-dim-xxl);
    line-height: var(--icon-dim-xxl);
    font-size: var(--font-size-xxl);
    color: var(--negative-color);
    border: var(--btn-inverted-border-overlay);
}               

div.account_info_avatar span.__avatar-side-id
{
    display: none;
}

div.account_info_avatar span:before
{ 
    font-size: 64px;
}

div.account_info_drop
{
    padding: var(--padding-big);
    border: var(--input-border-drop);
}

div.account_info_drop_msg
{

}

div.account_info_drop_msg
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--margin-base);
    color: var(--input-color-readonly);   
}

div.account_info_drop_msg:before
{
    display: inline-block;
    vertical-align: top;    
    content: "\f382";
    font-size: var(--icon-size-mid);
    margin-right: var(--margin-close);
    font-family: var(--icon-font);
}

div.account_info_drop div.account_info_avatar
{
    margin: auto;
}

/* USERS > ACCOUNT > INFO */

div.account_info_nick,
div.account_info_sub,
div.account_info_lv,
div.account_info_data
{    
    margin-left: 164px;
    margin-top: var(--margin-close);    
}

div.account_info_nick
{
    letter-spacing: 1px;
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);
}

div.account_info_sub
{
    color: var(--font-color-light);
}

div.account_info_lv
{
    text-transform: uppercase;
    letter-spacing: 1px;
}

div.account_info_data
{
    margin-top: var(--margin-base);    
}

/* DOCUMENTS > WALL */

ul.doc-wall 
{ 
    margin: 0px auto;   
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    width: 100%; 
}

/* DOCUMENTS WALL > ITEM */
            
ul.doc-wall li 
{ 
    position: relative;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%;
    text-align: left;
    border-bottom: 2px solid #E6E6E6;
}

/* NAVIGATION LAYOUT */

.navlayout-grid
{
    position: relative;
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: var(--margin-base);
}

.navlayout-head,
.navlayout-left,
.navlayout-right,
.navlayout-foot
{
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: var(--margin-base);
    font-size: var(--font-size-bigger);
    background: var(--area-bkg-base);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

.navlayout-head
{
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    
}

.navlayout-left
{
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;

}

.navlayout-right
{
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;   

}

.navlayout-foot
{
    grid-column: 1 / span 2;
    grid-row: 3 / span 1;

}

/* PROGRESS BAR */          

div.prog_wrap 
{ 
    position: relative;
    width: 100%;    
    padding: 0px;
    border-radius: var(--border-radius-base);
    height: var(--input-height-base);
    background-color: var(--progress-bkg-light);
}

div.prog_value 
{ 
    margin: 0px;
    height: var(--input-height-base);
    border-radius: var(--border-radius-base);
    background: var(--state-color-success);
} 

div.prog_caption 
{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    line-height: var(--input-height-base);    
    font-family: var(--font-bold);
    font-size: var(--font-size-large);
}      

div.prog_value.crossed-half div.prog_caption
{
    color: var(--negative-color);
}

/* PROMPT BOX */

.promptbox 
{
  z-index: 4;
  position: fixed;
  top: 50%;
  left: 50%;  
  width: var(--prompt-width);
  margin-left: calc(var(--prompt-width) / -2);
  margin-top: calc(var(--prompt-height) / -2);
  background: var(--prompt-bkg);
  border-radius: var(--border-radius-base);
  border: var(--prompt-border);
  box-shadow: var(--shadow-base);  
}
.promptbox-fx 
{
  opacity: 0;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.promptbox-fx-trigger
{
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#promptheader 
{
  width: 100%;  
  text-align: left;
  cursor: move;
  text-transform: uppercase;
  padding: var(--padding-base);
  font-size: var(--font-size-smaller);
  font-family: var(--font-bold);
  border-radius: var(--border-radius-base);
}
#promptclose
{
  position: absolute;
  top: calc(var(--padding-base) / 2);
  right: var(--padding-base);

}
#promptclose:before
{
  content: "\f00d";
  font-family: var(--icon-font);
  font-size: var(--icon-size-base);
  color: var(--icon-color);
}

.prompt_content
{
  display: inline-block;
  width: 100%;  
  text-align: center;
  margin-top: var(--margin-base);
  padding: var(--padding-base);
  font-size: var(--font-size-large);
}

.prompt_content > input,
.prompt_content > textarea
{ 
    width: calc(100% - (2 * var(--margin-base)));
    margin-top: var(--margin-base);
}

.prompt_content > textarea
{
    height: var(--input-height-large);
}

.promptbody.prompt .prompt_content .msg,
.promptbody.text .prompt_content .msg
{
    width: 100%;
    text-align: left;
    margin-left: var(--margin-base);
}

.promptbox div.buttonbar
{
    padding: var(--padding-base) 0px var(--padding-big) 0px;
    /*
    position: absolute;
    bottom: var(--margin-base);
    */
}

/* TOOLTIPS */

.tooltip-content
{
    display: none !important;
}

/* TOOLTIPS > GENERIC */

.tooltip 
{
  position: absolute;
  display: block;  
  text-align: center;  
  z-index: 99;
  opacity: 0;
  min-width: var(--tooltip-width-base);
  max-width: calc(4 * var(--tooltip-width-base));
  min-height: var(--tooltip-height-base);
  padding: var(--padding-base);
  color: var(--negative-color);
  background-color: var(--tooltip-bkg-color);
  border-radius: var(--border-radius-base);
}

.tooltip-top 
{
  margin-top: -2px;
  margin-left: 0px;
}

.tooltip-bottom 
{
  margin-top: 48px;
  margin-left: 0px;
}

.tooltip-right 
{
  margin-top: -2px;
  margin-left: 48px;
}

/* TOOLTIPS > GENERIC > FX */

.tooltip-fx 
{
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
.tooltip-fx-trigger 
{
    opacity: 1;  
}

/* TOOLTIPS > INPUTS */

.__skipjs__inputtooltip
{

}

.inputtooltip 
{
    position: fixed;
    z-index: 11;
    bottom: 0px;
    left: 0px;
    width: 70%;
    left: 15%;
    text-align: center;
    letter-spacing: 1px;    
    margin-bottom: var(--margin-close);
    padding: var(--padding-base) calc(var(--icon-dim-base) + var(--padding-base));
    border-radius: var(--border-radius-base);
    color: var(--negative-color);
    background-color: #000000;
}

.inputtooltip:before
{  
    position: absolute;
    content: "\f05a";
    top: var(--padding-base);
    left: var(--padding-base);    
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
}

/* TOOLTIPS > INPUTS > FX */

.inputtooltip-fx
{
    /*
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s;
    transition: opacity 0.3s ease-in-out, transform 0.3s;
    */
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.inputtooltip-fx-trigger
{
    opacity: 0.8;
    transform: scale(1);
}

/* POP-IT > MENUS & SELECTS */

.popitmenu,
.popitselect {
  box-sizing: content-box;
  text-align: left;  
  min-width: 292px;
  max-height: 460px;  
  z-index: 99;
  opacity: 0;
  padding: var(--padding-base);
  background-color: var(--select-color-bkg);
  border-radius: var(--border-radius-base);  
  border: var(--select-border);
  box-shadow: var(--shadow-base);  
}

.popitmenu-itemswrap,
.popitselect-itemswrap
{
    max-height: 460px;
    max-width: 460px;
    min-width: 292px;
    overflow-y: auto;
    overflow-x: hidden;
}

.popitmenu a,
.popitselect a,
a.popit-like
{
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0px;
  height: var(--select-item-height);
  line-height: var(--select-item-height);
  color: var(--font-color-base) !important;
  border-radius: var(--border-radius-tiny);
}

.popitmenu a[data-focus="1"],
.popitselect a[data-focus="1"],
a.popit-like:hover,
a.popit-like[data-focus="1"]
{
  background-color: var(--active-color) !important;
  color: var(--negative-color) !important;
}

.popitmenu a.side_icon:before,
.popitselect a.side_icon:before,
a.side_icon.popit-like:before
{
    height: var(--select-item-height);
    line-height: var(--select-item-height);   
}

.popitmenu a[data-focus="1"].side_icon:before,
.popitselect a[data-focus="1"].side_icon:before,
a:hover.side_icon.popit-like:before,
a[data-focus="1"].side_icon.popit-like:before
{
    color: var(--negative-color);
}

/* POP-IT > MENUS & SELECTS > FX */

.popitmenu-fx
{
    -webkit-transition: opacity 0.3s ease-in-out, height 0.3s;
    transition: opacity 0.3s ease-in-out, height 0.3s;
}

.popitmenu-fx-trigger
{
    opacity: 1;
}

.popitselect-fx
{
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.popitselect-fx-trigger
{
    opacity: 1;
}

/* POP-IT > MENUS & SELECTS > ELEMENTS */

.popitmenu a .icon_circle,
.popitselect a .icon_circle,
a.popit-like .icon_circle
{
    vertical-align: top;
    margin-top: 3px;
    margin-right: var(--margin-close);
}

.popitmenu input,
.popitselect input
{
    margin-left: 28px;
    margin-bottom: 4px;
    width: calc(100% - 54px);
}

/* POP-IT > MORE ITEMS */

.popit-more-icon
{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: var(--margin-close);
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);
}

.popit-more-icon:before
{
    content: "\f141";
    font-size: var(--icon-size-base);
    font-family: var(--icon-font);    
}
/*
.popitmenu a.popit-more,
.popitselect a.popit-more
{
    display: inline-block;
    vertical-align: top;
    margin-left: var(--icon-side-padding);    
    height: var(--select-item-height);    
    color: var(--link-color) !important;
}

.popitmenu a.popit-more:before,
.popitselect a.popit-more:before
{
    color: var(--link-color) !important;
}

.popitmenu a.popit-more:hover,
.popitselect a.popit-more:hover
{
    background-color: var(--select-color-bkg) !important;
}
*/

/* POP-IT > SEARCH */

.popit-search
{
    position: relative;
}

.popit-search:before
{
    position: absolute;
    content: "\f002";
    top: var(--padding-base);
    left: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--font-color-light);
}

.popit-search input
{
    width: 100%;
    margin-left: 0px;
    padding-left: var(--icon-side-padding);
}

.popit-search a.popit-search-reset
{
    position: absolute;
    cursor: pointer;
    top: 1px;
    left: 1px;
    width: var(--input-height-inborder);
    height: var(--input-height-inborder);
    background: var(--input-color-bkg);    
}

.popit-search a.popit-search-reset:hover
{
    background-color: var(--input-color-bkg) !important;
    color: var(--icon-color) !important;
}

/* POP-IT > COUNTRY INFO */

.popitmenu a .country-info,
.popitselect a .country-info,
.country-info
{
}

.popitmenu a .country-info em,
.popitselect a .country-info em,
.country-info em
{
    display: inline-block;
    text-align: center;
    width: 24px;
    opacity: 0.75;
    margin-right: var(--margin-close);
}

.popitmenu a .country-info img,
.popitselect a .country-info img,
.country-info img
{
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--margin-close);
}

/* POP-IT > BALOONS */

.popitbaloon
{
    box-sizing: content-box;
    text-align: left;
    opacity: 0;
    z-index: 99;
    padding: var(--padding-base);
    background-color: var(--select-color-bkg);
    border-radius: var(--border-radius-base);  
    border: var(--select-border);
    box-shadow: var(--shadow-base);  
}

.popitbaloon-fx 
{
    -webkit-transition: opacity 0.3s ease-in-out, height 0.3s;
    transition: opacity 0.3s ease-in-out, height 0.3s;
}

.popitbaloon-fx-trigger
{
    opacity: 1;
}

/* POP-IT > BALOONS > WRAPPERS */

div.popitbaloon-asyncwrap,
div.popitbaloon-expandwrap
{
    width: 408px;
}

div.qrcodebaloon-asyncwrap
{
    width: 240px;
}

img.qrcode
{
    display: block;
    width: 240px;
    height: 240px;
}

div.qrdownload
{
    display: flex;
    justify-content: center;
    padding-top: var(--padding-base);
    font-size: var(--font-size-large);    
}

div.popitbaloon-expandwrap .title
{
    position: relative;
    width: 100%;  
    text-align: left;  
    text-transform: uppercase;    
    font-size: var(--font-size-smaller);
    font-family: var(--font-bold);    
}

div.popitbaloon-expandwrap .copy
{
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: visible;
}

div.popitbaloon-expandwrap .content
{
    overflow-wrap: break-word;
    margin-top: var(--margin-close);
}

div.popitaccount-asyncwrap
{
    width: 408px;
    height: 328px;
    overflow: auto;
}

div.popitfilepreview-asyncwrap
{
    width: 408px;
    height: 320px;
    overflow: hidden;
}

/* POP-IT > BALOONS > FILE PREVIEW */

.popit-preview-title
{
    width: 92%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: var(--margin-close);
    font-family: var(--font-bold);
}

.popit-preview-open
{
    position: absolute;
    top: var(--padding-base);
    right: var(--padding-base);
}

.popit-preview-box
{
    position: relative;    
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    
    gap: 16px;    
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: var(--margin-base);    
}

.popit-preview-item
{
    position: relative;
    width: 30%;
    height: 112px;
}

.popit-preview-item.popit-preview-active
{
    cursor: pointer;
}

.popit-preview-item img
{
    width: 100%;
    height: 112px;
    object-fit: cover;
    border-radius: var(--border-radius-base);
}

.popit-preview-item .audiowrap,
.popit-preview-item .videowrap
{
    width: 100%;
    height: 112px;
    padding: 0px;
}

.popit-preview-item .mediaseekwrap,
.popit-preview-item .mediactrl .timer,
.popit-preview-item .mediactrl .mediavolumewrap,
.popit-preview-item .videowrap .mediactrl
{
    display: none;
}

.popit-preview-item .audiowrap .mediactrl
{
    text-align: center;
    margin-top: 0px;
}

.popit-preview-item .audiowrap .mediactrl .icon
{
    margin-right: 0px;
    width: var(--icon-dim-large);
    height: 112px;
    line-height: 112px;
    font-size: var(--icon-size-large);
}

.popit-preview-item .generic.icon
{
    width: 100%;
    height: 112px;
    line-height: 112px;
    font-size: var(--icon-size-xl);
}

/* POP-IT > NOTIFIES > WRAPPERS */

div.popitnotify-asyncwrap { width: 214px;
                            height: 100vw;
                            overflow-x: hidden; }

/* POP-IT > INLINE > FRAME */

.popitframe
{
    position: fixed;
    left: 50%;
    top: 50%;  
    margin-left: -320px;
    margin-top: -260px;
    width: 640px;
    height: 520px;
    overflow-y: auto;
    box-sizing: content-box;
    text-align: left;
    padding: 4px;
    background: #FFFFFF;
    border-radius: 4px;  
    border: 1px solid #BBBBBB;
    box-shadow: 0px 0px 16px 0px #BBBBBB;
    /*opacity: 0;*/
    z-index: 8;
}

.popitframe.txtlike
{
    margin-left: -320px;
    margin-top: -64px;
    width: 640px;
    height: 128px;
}

.popitframe.xl
{
    margin-left: -430px;
    margin-top: -266px;
    width: 860px;
    height: 532px;
}

/* POP-IT > INLINE > FORM */

.inlineprompt-form
{
    /*position: relative;*/
    min-width: 292px;
    overflow-y: auto;
}

.inlineprompt-form .buttonbar
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: var(--padding-base);
}

.inlineprompt-form.__nobuttons .buttonbar
{
    display: none;
}

.inlineprompt-form .editarea_box
{
    width: 100%;
}

.inlineprompt-form div.editarea_wrap,
.inlineprompt-form div.editarea
{
    height: var(--input-height-xl);
}

.inlineprompt-form .tags-input-container
{
    width: 100%;
    height: var(--input-height-xl);
}

.popitbaloon .inlineprompt-form
{
    width: var(--prompt-width);
    padding-bottom: calc(var(--btn-height-base) + var(--margin-base));
}

.popitbaloon .inlineprompt-form input
{
    width: 100%;
}

/* POP-IT > INLINE > BOX */

.inlineprompt-title
{
    width: 100%;
    text-align: left;    
    text-transform: uppercase;
    padding: 0px 0px var(--padding-base) 0px;
    font-size: var(--font-size-smaller);
    font-family: var(--font-bold);
    border-radius: var(--border-radius-base);
}

.inlineprompt-close
{
    position: absolute;
    top: 2px;
    right: 2px;
}

.inlineprompt-box
{
    min-width: var(--prompt-width);
}

.inlineprompt-txt input,
.inlineprompt-txt textarea,
.inlineprompt-txt span.stepper
{
    width: 100%;
}

.inlineprompt-txt textarea
{
    height: var(--input-height-mid);
}

.inlineprompt-opt
{
    margin-top: var(--margin-base);
}

.inlineprompt-opt .checkboxwrap, 
.inlineprompt-opt .checkboxwrap_checked
{
    display: inline-block;
    vertical-align: top;
    
}

.inlineprompt-opt .label-opt
{
    margin-left: var(--margin-close);
    color: var(--font-color-base);
}

/* POP-IT > INLINE > PASSWORD GENERATOR */

.inlineprompt-pwdgen
{
    margin-top: var(--margin-base);
}

.inlineprompt-pwdgen .popup_box
{
    width: 100%;
    /*height: var(--input-height-fat);*/
}

.inlineprompt-pwdgen .popup_box input
{
    width: 100%; 
    /*
    height: var(--input-height-fat);
    padding: 0px var(--margin-base);
    */
}

/*
.inlineprompt-pwdgen .popup_box .popup_buttons .icon
{
    height: var(--input-height-fat);
    line-height: var(--input-height-fat);
}
*/

.inlineprompt-pwdopt
{
    margin-top: var(--margin-close);
    height: var(--input-height-base);
}

.inlineprompt-pwdopt label
{
    display: inline-block;
    vertical-align: top;
    text-align: right;
    letter-spacing: 1px;
    width: 50%;
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    padding-right: var(--margin-base);
    font-size: var(--font-size-smaller);
}

.inlineprompt-pwdopt .opt
{
    display: inline-block;
    width: 50%;
    position: relative;
}

.inlineprompt-pwdopt .opt span.stepper
{
    width: 100%;
}

.inlineprompt-pwdopt .opt span.stepper > input
{
    width: 50%;
}

/* POP-IT > CLOSE */

.popitclose
{ 
    position: absolute;
    top: 4px;
    right: 4px;
}

/* STOPWATCH */

.stopwatch
{
    touch-action: none;
    cursor: move;
    z-index: 99;
    width: 164px;
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    background-color: var(--active-color);    
}

.stopwatch:before
{
    content: "\f2f2";
    opacity: 0.5;
    display: block;
    text-align: center;
    padding-top: var(--padding-base);
    padding-bottom: var(--margin-base);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-large);
    color: var(--negative-color);
}

.stopwatch-docked
{
    opacity: 0;
    transform: translateX(-150%);
}

.stopwatch-running .icon
{
    animation: bkgblinker 1s linear infinite;
}

.stopwatch-fx
{
    transition: all 0.5s 0s;
}

.stopwatchdock
{
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: var(--padding-base);
}

.stopwatch .icon
{
    display: inline-block;    
    color: var(--negative-color);
}

.stopwatch .timer-box
{
    display: block;
    margin: auto;
    width: 92px;
    height: 92px;
    line-height: 92px;
    border-radius: 100%;
    text-align: center;
    font-family: monospace;
    font-size: var(--font-size-large);
    background-color: var(--negative-color);
}

.stopwatch .controls
{
    margin: auto;
    text-align: center;
    margin-top: var(--margin-base);
}

.stopwatch .controls .icon
{
    cursor: pointer;
}

.stopwatch ul.items
{
    list-style: none;
    margin-top: var(--margin-close);
    background-color: var(--negative-color);
    border-radius: var(--border-radius-base);
}

.stopwatch ul.items li
{
    font-family: monospace;
    font-size: var(--font-size-large);
    padding: calc(var(--padding-base) / 2) var(--padding-base);
}

.stopwatch ul.items li .icon
{
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: var(--icon-color);
}

/* DRAWER */

.__drawer-fx 
{ 
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}
.__drawer-fx-trigger 
{ 
    width: 0px !important;
    border: none !important;
    box-shadow: none !important;
}

.drawerclose
{
    position: absolute;    
    display: block;    
    text-align: center;    
    top: 12px;
    right: var(--padding-base);
}

a.drawerclose:before 
{
    display: block;    
    content: "\f053";    
    font-family: var(--icon-font);    
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

/* DRAWER > APPLICATION SEARCH */

div#__drawerappsearch__
{
    position: fixed;
    z-index: 9;
    overflow: hidden;    
    height: 100%;
    top: 0px;
    left: var(--header-width);
    width: var(--drawer-width-base);
    background: var(--bkg-color-base);
    box-shadow: var(--shadow-right);
    border-left: var(--area-border-base);    
}

.drawerappsearch-header,
.drawerdashboardsearch-header
{
    position: relative;
    width: 100%;
}

.drawerappsearch-header h1,
.drawerdashboardsearch-header h1
{
    white-space: nowrap;
    overflow: hidden;
    font-weight: normal;
    letter-spacing: 1px;
    font-size: var(--font-size-xl);
    padding: calc(var(--padding-base) / 2) var(--padding-base);
    margin-left: var(--margin-close);
    color: var(--font-color-light);
}

.drawerappsearch-input,
.drawerdashboardsearch-input
{
    position: relative;
    margin: 0px var(--margin-base);
    height: var(--input-height-bigger);
    line-height: var(--input-height-bigger);
}

.drawerappsearch-input:before,
.drawerdashboardsearch-input:before
{
    position: absolute;
    content: "\f002";
    top: 0px;
    left: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-mid);
    color: var(--font-color-light);
}

.drawerappsearch-input input,
.drawerdashboardsearch-input input
{
    width: 100%;
    height: var(--input-height-bigger);
    font-size: var(--font-size-bigger); 
    padding-left: var(--input-height-bigger);
}

.drawerappsearch-input .searchreset,
.drawerdashboardsearch-input .searchreset
{
    position: absolute;
    top: 1px;
    left: 2px;
    display: block;
    width: calc(var(--input-height-bigger) - 2px);
    height: calc(var(--input-height-bigger) - 2px);
    line-height: calc(var(--input-height-bigger) - 2px);
    background: var(--input-color-bkg);        
}

.drawerappsearch-input .searchreset:before,
.drawerdashboardsearch-input .searchreset:before
{
    font-size: var(--icon-size-mid);
}

.drawerappsearch-result,
.drawerdashboardsearch-result
{
    overflow-y: auto;
    height: calc(100% - (2 * var(--input-height-bigger)) - var(--margin-base) - var(--margin-close));
    margin: var(--margin-close) var(--margin-base) 0px var(--margin-base);
}

/* DRAWER > APPLICATION SEARCH > RESULT */

.searchdata
{
    margin: var(--margin-close) 0px;
}

.searchdata h2
{
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;    
    height: var(--select-item-height);
    line-height: var(--select-item-height);
    font-size: var(--font-size-smaller);
    color: var(--font-color-light);
    border-bottom: var(--area-border-base);    
}

.searchdata h2.side_icon
{
    padding: 0px 0px 0px var(--icon-side-padding);
}

.searchdata h2.side_icon:before
{
    line-height: var(--select-item-height);
    height: var(--select-item-height);
    color: var(--font-color-light);
}

.searchdata .searchitem
{
    width: 100%;
    overflow: hidden;    
    padding: calc(var(--padding-base) / 2) 0px;
}

.searchdata .searchitem:hover
{
    background-color: var(--tab-row-bkg-odd);
}

.searchmsg,
.searchempty
{
    text-align: center;
    margin: 25% var(--margin-base);
    font-size: var(--font-size-large);
    color: var(--font-color-light);
}

.searchwrap
{
    cursor: pointer;
}

.searchwrap img.emoji
{
    display: inline-block;
    vertical-align: text-top;
    width: var(--icon-dim-small);
    height: var(--icon-dim-small);
}

/* DRAWER > DASHBOARD SEARCH */

div#__drawerdashboardsearch__
{
    position: fixed;
    overflow: hidden;
    z-index: 9;
    top: 0px;
    right: 0px;
    height: 100%;
    width: var(--drawer-width-base);    
    background: var(--bkg-color-base);
    box-shadow: var(--shadow-left);
    border-left: var(--area-border-base);
}

.drawerdashboardsearch-header .drawerclose
{
    right: auto;
    left: var(--padding-base);
}

.drawerdashboardsearch-header .drawerclose:before
{
    content: "\f054"; 
}

.drawerdashboardsearch-header h1
{
    margin-left: var(--icon-dim-base);
}

.drawerdashboardsearch-input
{
    margin-left: calc(var(--icon-dim-base) + var(--margin-close));
}

/* DRAWER > APPLICATION CREATE */

div#__drawerappcreate__
{
    position: fixed;
    z-index: 9;
    overflow: hidden;        
    height: 100%;
    top: 0px;
    width: 30%;
    left: var(--header-width);
    background: var(--bkg-color-base);
    box-shadow: var(--shadow-right);
    border-left: var(--area-border-base);    
}

.drawerappcreate-header h1
{
    font-weight: normal;
    letter-spacing: 1px;
    font-size: var(--font-size-xl);
    padding: calc(var(--padding-base) / 2) var(--padding-base);
    margin-left: var(--margin-close);
    color: var(--font-color-light);
}

ul.drawerappcreate-entries
{
    margin: 0px var(--margin-base) var(--margin-base) var(--margin-base);
}

ul.drawerappcreate-entries li
{
    list-style: none;      
    white-space: nowrap;
    overflow: hidden;
    padding: calc(var(--padding-base) / 2) var(--padding-base);
    border-radius: var(--border-radius-base);
}

ul.drawerappcreate-entries li:hover
{
    background: var(--active-color);    
}

ul.drawerappcreate-entries li a
{
    font-size: var(--font-size-bigger);
}

ul.drawerappcreate-entries li:hover a,
ul.drawerappcreate-entries li:hover a:before
{
    color: var(--negative-color);
}

/* DRAWER > NOTIFY AREA > LAYOUT */

.drawerappnotices
{
    position: fixed;
    z-index: 9;
    top: 0px;
    left: var(--header-width);
    width: 40%;
    height: 100%;
    overflow: hidden;
    background: var(--bkg-color-base);
    border-right: var(--area-border-base);
    box-shadow: var(--shadow-right);
}

.drawerappnotices-header
{
    position: relative;
    width: 100%;
    height: var(--drawer-header-height);
}

.drawerappnotices-footer
{
    position: relative;
    width: 100%;    
    height: var(--drawer-footer-height);
}

.drawerappnotices-asyncwrap
{
    width: 100%;        
    overflow-y: auto;
    padding: var(--padding-base) 0px;
    height: calc(100% - var(--drawer-header-height) - var(--drawer-footer-height));
}

/* DRAWER > NOTIFY AREA > HEADER */

.drawerappnotices-header h1
{
    font-weight: normal;
    letter-spacing: 1px;
    font-size: var(--font-size-xl);
    padding: calc(var(--padding-base) / 2) var(--padding-base);
    color: var(--font-color-light);
}

.drawerappnotices-header a.side_icon
{
    margin-left: var(--padding-base);
    /*letter-spacing: 1px;*/
    text-transform: uppercase;
    font-family: var(--font-bold);
    font-size: var(--font-size-smaller);
    /*color: var(--font-color-light);*/
}

/* DRAWER > NOTIFY AREA > FOOTER */

/*
.drawerappnotices-footer a
{
    height: 48px;
    line-height: 48px;
    text-transform: uppercase;
    font-weight: bold;
    color: #333333;
}

.drawerappnotices-footer a:before
{
    height: 48px;
    line-height: 48px;
}
*/

/* SLIDER */

.swipeslider-container
{
    position: relative;
    width: 100%;
    
    /*border: 1px solid #FF0000;*/
}

.swipeslider-box
{
    position: relative;
    overflow: hidden;
    margin: auto;
    width: calc(100% - 64px);
    height: 100%;

   /*  border: 1px solid #0000FF;*/
}

.swipeslider-item
{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    transition: all 0.5s;
}

.slide-btn
{
    position: absolute;
    top: 43%;
    display: block;
    z-index: 99;    
    font-size: 40px;    
}

.slide-btn.prev
{
    left: 0px;
}

.slide-btn.next
{
    right: 0px;
}

/* SLIDER > INPUTS */

.slide-inputwrap
{
    position: relative;
}

/* MESSAGES */

.noitemfound,
.accessdenied
{
    text-align: center;
    padding: var(--padding-big);
    font-size: var(--font-size-large);
    color: var(--font-color-light);
}

.badge-placeholder:before
{
    display: block;
    opacity: var(--opacity-disabled);
    padding-bottom: var(--padding-big);
    font-family: var(--icon-font);
    font-size: calc(var(--icon-size-xl) * 2);
}

/* MESSAGES > CONSTRAINTS */

div.constraints-title
{
    letter-spacing: 1px;
    margin-bottom: var(--margin-base);
    font-family: var(--font-bold);
    font-size: var(--font-size-bigger);
}

ul.constraints-list
{
    margin-left: var(--margin-base);
}

ul.constraints-list > li 
{ 
    letter-spacing: 1px;
    font-size: var(--font-size-bigger);
    margin-bottom: var(--margin-close);
}


/* MESSAGES > INLINE */

.inlinemsg
{
  width: 400px;
  height: 24px;
  line-height: 24px;
  padding-left: 32px;
  margin-left: -400px;
  margin-top: -28px;
  text-align: left;
  border-radius: 4px;
  font-size: 12px;
  border-radius: 4px;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  z-index: 200;
}

.inlinemsg:before 
{
    display: block;
    position: absolute;
    left: 4px;
    width: 24px;
    height: 24px;
    font-family: var(--icon-font);
    text-align: center;
    font-size: 16px;
    content: "\f05a";
}

.inlinemsg-fx 
{
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.inlinemsg-fx-trigger
{
    opacity: 1;
}

/* MESSAGES > INFO / HELPERS */

.infomsg
{
    position: fixed;
    z-index: 11;
    left: 0px;
    width: 70%;
    left: 15%;
    text-align: center;
    letter-spacing: 1px;
    bottom: -100%;
    padding: var(--padding-base) calc(var(--icon-dim-base) + var(--padding-base));
    border-radius: var(--border-radius-base);
    color: var(--negative-color);
    background-color: rgba(0, 0, 0, 0.66);
}

.infomsg:before 
{
    display: block;
    position: absolute;
    content: "\f05a";
    left: var(--padding-base);
    top: var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);    
}

.infomsg a.cancel
{ 
    position: absolute;
    right: 0px;    
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--font-size-tiny);
    color: var(--negative-color);
}

.infomsg a.cancel:after
{
    content: "\f2f9";
    padding: 0px var(--padding-base);
    font-family: var(--icon-font);
    font-size: var(--icon-size-small);
}

.infomsg-fx 
{
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.infomsg-fx-trigger 
{
    bottom: var(--margin-close);
}

body.popup .infomsg-fx-trigger,
body.mtpopup .infomsg-fx-trigger
{
    bottom: var(--dialog-footer-height);
}

/* MESSAGES > STATIC */

.staticmsg,
.loginmsg 
{
    position: fixed;
    z-index: 10;
    top: 0px;
    left: 15%;
    width: 70%;    
}

.staticmsg .messagebox,
.loginmsg .messagebox 
{
    width: 100%;
    margin-top: var(--margin-close);
}

.messagebox,
.hintbox 
{
    position: relative;
    display: block;
    text-align: center;
    letter-spacing: 1px;    
    font-size: var(--font-size-bigger);
    padding: var(--padding-base) var(--icon-dim-large);
    background: #333333;
    color: var(--negative-color);
    border-radius: var(--border-radius-base);
}

.messagebox:before,
.hintbox:before
{
    position: absolute;
    display: block;
    content: "\f05a";
    left: var(--margin-close);
    top: var(--margin-close);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
}

.hintbox 
{
    margin-top: var(--margin-base);
    background: var(--state-color-success);
}

.hintbox.hintwarning
{
    background: var(--state-color-warning);
}

.hintbox.hintwarning:before
{
    content: "\f071";
}

/* MESSAGES > ALERTS */ 

.alertmsg
{
    position: fixed;
    z-index: 200;    
    left: 0px;
    width: 70%;
    left: 15%;
    top: -100%;
    opacity: 0;
    background: #333333;
    text-align:  center;
    letter-spacing: 1px;
    font-size: var(--font-size-bigger);
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    color: var(--negative-color);
}
.alertmsg:before 
{
    position: absolute;
    display: block;
    content: "\f05a";
    left: var(--margin-close);
    top: var(--margin-close);
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);   
}
.alertmsg-fx 
{
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.alertmsg-fx-trigger 
{
    top: calc(var(--margin-base) / 2);
    opacity: 1;
}

/* MESSAGES > TYPES */

.alertsuccess { background: var(--state-color-success); }
.alertsuccess:before { content: "\f058"; }
.alertwarning { background: var(--state-color-warning); }
.alertwarning:before { content: "\f071"; }
.alerterror { background: var(--state-color-fail); }
.alerterror:before { content: "\f06a"; }

/* MESSAGES > BUTTONS */

.alertclose 
{
    position: absolute;
    right: var(--margin-close);
    top: var(--margin-close);    
}

.alertclose:after 
{
    content: "\f00d";
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--negative-color);
}

/* MESSAGES > CALL-TO-ACTION */

div.cta-box
{
    margin: var(--margin-base) 0px;
}

/* MESSAGES > PWA */

.alertpwa a.install,
.alertpwa a.dismiss
{
    display: block;    
    margin-top: var(--margin-base);
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
}

.alertpwa a.install
{
    text-transform: uppercase;
    background-color: var(--active-color);
    color: var(--negative-color);
}

.alertpwa a.dismiss
{
    border: var(--btn-inverted-border);
    color: var(--negative-color);
}

/* GO-TOP */

a.go-top 
{
    position: fixed;
    z-index: 2;
    display: block;
    overflow: hidden;
    text-align: center;    
    right: calc(-1 * var(--icon-dim-large));
    bottom: var(--icon-dim-large);
    width: var(--icon-dim-large);
    height: var(--icon-dim-large);
    line-height: var(--icon-dim-large);
    background: var(--overlay-bkg-dark);
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    color: var(--negative-color);
    border-radius: var(--border-radius-base);
}

a.go-top:before 
{
    content: "\f106";
    font-family: var(--icon-font);
    font-size: var(--icon-size-large);
}

a.go-top-show
{
    right: 0px;
}

/* LOADING > PAGE */

div.loading_page,
div.loading_pageprog
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: var(--negative-color);
}
div.loading_page:after 
{
    content: "\f110";
    position: absolute;
    display: block;    
    top: calc(50% - var(--icon-size-xl) / 2);
    left: calc(50% - var(--icon-size-xl) / 2);    
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    font-family: var(--icon-font);
    font-size: var(--icon-size-xl);    
    -webkit-animation: spin 2s infinite linear; 
    animation: spin 2s infinite linear;
}

/* LOADING > PAGE > MESSAGE */

div.loading_msg
{
    width: 100%;    
    text-align: center;    
    letter-spacing: 1px;
    padding-bottom: calc(var(--padding-big) * 4);
    font-size: var(--font-size-xl);
}

div.loading_pageprog div.loading_msg
{
    padding-bottom: var(--padding-big);
}

/* LOADING > PAGE > PROGRESS BAR */

div.loading_progress div.prog_wrap 
{ 
    position: relative;
    margin: 0px auto;
    text-align: center;
    width: 50%;
    height: var(--input-height-base);
    background-color: var(--progress-bkg-dark);
    border-radius: var(--border-radius-base);
}

div.loading_progress div.prog_value 
{
    position: absolute;
    left: 0px;
    top: 0px;
    height: var(--input-height-base);    
    border-radius: var(--border-radius-base);
    background-color: var(--state-color-success);
    z-index: 1;
}

div.loading_progress div.prog_caption
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    letter-spacing: 1px;
    line-height: var(--input-height-base);
    font-size: var(--font-size-large);
    z-index: 2;
}

/* LOADING > SMALL */

.loadingsmall 
{
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);    
}

.loadingsmall:after,
a.tree_ctrl_loading:before 
{
    content: "\f110";
    display: inline-block;
    font-family: var(--icon-font);
    font-size: var(--icon-dim-base);
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

/* LOADING > SMALL > ERROR */

.loadingerror 
{
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);    
}

.loadingerror:before 
{
    content: "\f06a";
    display: inline-block;
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);    
    color: var(--state-color-fail);
}

/* LOADING > OBJECTS */

div.loading_layer 
{ 
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: wait;
    background: var(--overlay-bkg-bright);    
    border-radius: var(--border-radius-pill);
}

div.loading_layer div.spinner
{
    margin-bottom: 128px;
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
}

div.loading_layer div.spinner:before
{
    content: "\f110";
    display: block;
    font-family: var(--icon-font);
    font-size: var(--icon-size-xl);
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

div.loading_layer.loading_input
{
    display: block;
    border-radius: var(--border-radius-base);
}

div.loading_layer.loading_input div.spinner
{
    margin-bottom: 0px;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);    
}

div.loading_layer.loading_input div.spinner:before
{
    content: "\f110";
    margin-top: calc(var(--padding-base) / 2);
    font-size: var(--icon-dim-base);
}

/* I-FRAME > MODAL BACKGROUND */

#modalback 
{ 
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;    
    z-index: 10; 
    background: var(--overlay-bkg-dark);
}

/* DIALOG > I-FRAME */
             
.popupframe 
{ 
    display: block;
    position: fixed;
    width: 92%;
    height: 92%;    
    left: 4%;
    top: 4%;
    border: none;    
    z-index: 11;
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
    border-radius: var(--border-radius-base);    
}
                    
.popupframe-fx
{ 
    -webkit-transition: transform 0.4s;
    transition: transform 0.4s;      
}
                    
.popupframe-fx-trigger 
{     
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;    
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: translateZ(0);    
    transform: translateZ(0);    
}     

/* DIALOG > LAYOUT */

body.popup
{
}

#dialog_container 
{ 
    position: relative;
    width: 100%;    
    height: auto;
    display: grid;
    align-items: stretch;
    grid-template-rows: var(--dialog-header-height) auto var(--dialog-footer-height);    
}

#dialog_header
{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 4;
    display: block;    
    width: 100%;
    height: var(--dialog-header-height);
    background: var(--bkg-color-base);
}

#dialog_bodycontainer
{
    grid-row: 2 / span 1;
    padding: var(--padding-base);
}

#dialog_footer
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: block;
    width: 100%;    
    z-index: 2;   
    height: var(--dialog-footer-height);
    background: var(--bkg-color-base);    
}

/* DIALOG > LAYOUT > HEADER */

#dialogheader 
{ 
    padding: 0px var(--padding-base);
    height: var(--dialog-header-height);
    line-height: var(--dialog-header-height);
}

#dialogclose 
{ 
   position: absolute;
   top: 0px;
   right: 0px;
   padding: var(--padding-base);
}
               
#dialogclose:before 
{     
    content: "\f00d";    
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

/* DIALOG > LAYOUT > FOOTER */

#dialogfooter
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--dialog-footer-height);
}

#dialogfooter div.buttonbar
{
    width: 100%;    
    text-align: center;
}

/* DIALOG > CONTENTS */

.dialog-center 
{ 
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
         
.dialog-center pre.dumpbox
{
    width: 97vw;
    height:100%;
}

.dialog-center iframe
{
    border: none;
    width: 100%;
    height: 70vh;
}

/* FULLSCREEN > I-FRAME */

.fullscreenframe 
{ 
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 12;
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);    
}    

.fullscreenframe-fx 
{ 
    -webkit-transition: transform 0.4s 0s;
    transition: transform 0.4s 0s;
}
                    
.fullscreenframe-fx-trigger 
{ 
    -webkit-transform: translateX(0);
    transform: translateX(0);
}    

/* HTML > FULLSCREEN */

body.fullscreen
{ 
    background: var(--bkg-color-base);
    color: var(--font-color-base);
}

/* FULLSCREEN  > LAYOUT */

#fullscreen_container 
{ 
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: stretch;
    grid-template-rows: var(--dialog-header-height) auto var(--dialog-footer-height);
    grid-template-columns: 100%;
}

#fullscreen_header
{
    position: fixed;
    top: 0px;
    width: 100%;
    /*grid-row: 1 / span 1;*/
    height: var(--dialog-header-height);
    background: var(--bkg-color-base);
}

#fullscreen_bodycontainer
{
    grid-row: 2 / span 1;
    padding: 0px var(--padding-base) var(--dialog-footer-height) var(--padding-base);
    
    /*
    padding: 0px var(--padding-base);
    height: calc(100vh - var(--dialog-footer-height));
    */
}

#fullscreen_content
{
    display: block;
    width: 100%;
    height: 100%;
}

#fullscreen_footer
{
    position: fixed;
    bottom: 0px;
    width: 100%;
    /*grid-row: 3 / span 1;*/
    height: var(--dialog-footer-height);
    background: var(--bkg-color-base);
}

/* FULLSCREEN > HEADER */

#fullscreenheader 
{ 
    padding: 0px var(--padding-base);
    height: var(--dialog-header-height);
    line-height: var(--dialog-header-height);
}

/* OVERLAY > I-FRAME */

.overlayframe 
{ 
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 12;
}     

/* OVERLAY > HTML */

body.overlay
{ 
    overflow: hidden;
    background: transparent;
    color: var(--negative-color);
}

body.overlay a { color: var(--negative-color); }
body.overlay a:hover { /*color: #FFFFFF;*/ }

/* OVERLAY > LAYOUT */

#overlay_container 
{ 
    position: relative;
    width: 100%;
    display: grid;
    align-items: stretch;
    grid-template-rows: var(--overlay-header-height) auto var(--overlay-footer-height);
}

#overlay_header
{
    position: fixed;
    top: 0px;
    z-index: 2;
    display: block;
    width: 100%;
    height: var(--overlay-header-height);    
}

#overlay_bodycontainer
{
    grid-row: 2 / span 1;    
    width: 100%;
    height: calc(100vh - var(--overlay-header-height) - var(--overlay-footer-height));
    padding: var(--padding-base);
}

#overlay_content 
{ 
    width: 100%;
    height: 100%;
}

#overlay_footer
{
    position: fixed;
    bottom: 0px;
    z-index: 2;   
    display: block;
    width: 100%;
    height: var(--overlay-footer-height);    
}

div#overlayfooter .buttonbar
{
    margin-top: var(--margin-close);
}

div#overlayfooter .buttonbar .btn
{
    color: var(--btn-inverted-color);
    border: var(--btn-inverted-border-overlay);
}

/* OVERLAY > INLINE BAR */

div.overlaybar 
{ 
    position: relative;
    padding: 0px var(--padding-base);
    height: var(--overlay-header-height);
    line-height: var(--overlay-header-height);
    font-size: var(--font-size-large);    
}
                    
div.overlaybar div.info 
{ 
    float: left;
    width: 33%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.overlaybar.overlaybarhead div.info
{
    width: 92%;
}

div.overlaybar div.close
{
    position: absolute;
    left: 50%;
    margin-left: calc(-1 * var(--btn-width-min) / 2);
}

div.overlaybar div.close .btn
{
    color: var(--btn-inverted-color);
    border: var(--btn-inverted-border-overlay);
}

/*
div.overlaybar div.items 
{ 
    display: block;
    position: absolute;
    width: 200px;    
    left: 50%;
    margin-left: -100px;
    text-align: center;
    height: var(--overlay-header-height);
    line-height: var(--overlay-header-height);    
}
*/

div.overlaybar div.buttons 
{ 
    float: right;
}

div.overlaybar div.buttons a
{
    margin-left: var(--margin-close);
    height: var(--overlay-header-height);
    line-height: var(--overlay-header-height);
}

div.overlaybar div.toolbar 
{ 
    display: block;    
    position: absolute;
    width: 50%; 
    left: 25%;
    text-align: center;
    height: var(--overlay-header-height);
    line-height: var(--overlay-header-height);    
}

#overlayclose:before 
{ 
    content: "\f00d";
    width: var(--icon-dim-large);
    height: var(--overlay-header-height);
    line-height: var(--overlay-header-height);
    font-family: var(--icon-font);    
    font-size: var(--icon-size-large);    
}

/* OVERLAY > CONTENTS */
         
.overlay-center 
{ 
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.overlay-message
{
    text-align: center;
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);
    padding: var(--padding-base);
    color: var(--negative-color);
}

.overlay-message .icon.overlay
{
    margin: var(--margin-base) auto;
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-size: var(--icon-size-xl);    
}

/* OVERLAY > CONTENTS > NAVIGATION */

div.overlay-nav-prev,
div.overlay-nav-next 
{ 
    display: block;
    position: absolute;
    top: calc(50% - (var(--icon-dim-large) / 2));    
}                    

div.overlay-nav-prev { left: 0px; }
div.overlay-nav-next { right: 0px; }   

/* OVERLAY > CONTENTS > EDITORS */

.overlay-center textarea
{ 
    width: 100%;
    height: 100%;
}

/* OVERLAY > CONTENTS > DOCUMENTS */

.overlay-center iframe,
.overlay-center embed
{ 
    width: 96vw;
    height: 100%;
    border: none;
}

/* OVERLAY > CONTENTS > TEXT */

.overlay-center pre.notepadlike,
.overlay-center pre.syntaxlike,
.overlay-center pre.syntaxlike code,
.overlay-center textarea.syntax-edit
{
    width: 96vw;    
    height: 100%;
}

/* OVERLAY > CONTENTS > IMAGES */

.imgeditor
{
    position: relative;
    width: 95%;
    height: 100%;
}

.imgeditor .canvasbox
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*
.imgeditor .canvasbox img
{

}
*/

.imgeditor.tbar-undocked .canvasbox
{
}

.imgeditor.tbar-bottom .canvasbox
{
}

.imgeditor.tbar-top .canvasbox
{
}

.imgeditor.tbar-left .canvasbox
{
}

.imgeditor.tbar-right .canvasbox
{
}

/* OVERLAY > CONTENTS > IMAGES > TOOLBAR */

.imgtoolbar
{
    position: relative;
}

.imgtoolbar a
{    
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/*
.__toggle-fx-trigger
{     
    opacity: 0 !important;
    width: 0px !important;
    height: 0px !important;
    line-height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    float: left !important;
    z-index: -99 !important;
}

.__overlap-fx
{ 
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.__overlap-fx-trigger
{ 
    opacity: 0 !important;
    z-index: -99 !important;
}
*/

.imgtoolbarbox
{
    position: fixed;
    /*display: none;*/
    opacity: 0;
    width: 100vw;
    left: 0px;
    bottom: -64px;
    /*top: -56px;*/
    height: 48px;
    /*padding: 8px;*/
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.__imgtoolbarbox-fx
{ 
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

div.__imgtoolbarbox-show
{
    bottom: 40px;
    opacity: 0.5;   
}

.imgtoolbarbox .label
{
    margin: 0px var(--margin-base);
}



/*
.imgeditor .zoomctrl
{
    margin: auto;
    text-align: center;
    width: 264px;
    height: 80px;
    padding: var(--padding-base);
}

.imgeditor .zoomctrl .icon,
.imgeditor .zoomctrl .icon
{
    font-size: var(--icon-size-mid);    
}

.imgeditor .zoomctrl .zoomin,
.imgeditor .zoomctrl .zoomout,
.imgeditor .zoomctrl .zoomreset
{
    display: inline-block;
    vertical-align: top;
}

.imgeditor .zoomctrl .zoomin
{
    float: right;
}

.imgeditor .zoomctrl .zoomout
{
    float: left;
}

.imgeditor .zoomctrl .zoomreset
{
    font-size: var(--font-size-large);
}

.zoomimg .zoomctrl .zoomrange
{
    display: block;
    width: 100%;
    margin-top: var(--margin-base);
}

input[type=range].zoomrange::-webkit-slider-thumb
{
    background: var(--input-color-bkg);
}

input[type=range].zoomrange::-moz-range-thumb
{
    background: var(--input-color-bkg);
}
*/

/* OVERLAY > CONTENTS > IMAGES > CROPPER */

div.crop-back
{
    background: #000000;
    opacity: 0.5;
}

div.crop-rect
{
    /*border: 1px dashed #FFFFFF;*/
    /*border: 1px solid #FFFFFF;     */
    box-sizing: border-box;  
}

div.crop-rect.crop-rect-ready
{
    cursor: move;
}

span.crop-line,
span.crop-middle
{
    display: block;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
}

span.crop-line
{
    z-index: 2;   
}

span.crop-line.line-n 
{
    cursor: ns-resize;
    width: 100%;
    height: 6px;
    left: 0;
    top: 0px;
    border-top: 1px solid #FFFFFF;
}

span.crop-line.line-e 
{
    cursor: ew-resize;
    width: 6px;
    height: 100%;
    right: 0px;
    top: 0;
    border-right: 1px solid #FFFFFF;
}

span.crop-line.line-s
{
    cursor: ns-resize;
    width: 100%;
    height: 6px;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #FFFFFF;
}

span.crop-line.line-w 
{
    cursor: ew-resize;
    width: 6px;
    height: 100%;
    left: 0px;
    top: 0;
    border-left: 1px solid #FFFFFF;
}


span.crop-middle.middle-n 
{
    width: 100%;
    height: 33%;
    left: 0;
    top: 0px;
    border-bottom: 1px dashed #FFFFFF;
}

span.crop-middle.middle-e 
{
    width: 33%;
    height: 100%;
    right: 0px;
    top: 0;
    border-left: 1px dashed #FFFFFF;
}

span.crop-middle.middle-s
{
    width: 100%;
    height: 33%;
    left: 0;
    bottom: 0px;
    border-top: 1px dashed #FFFFFF;
}

span.crop-middle.middle-w 
{
    width: 33%;
    height: 100%;
    left: 0px;
    top: 0;
    border-right: 1px dashed #FFFFFF;
}

span.crop-point
{
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    box-sizing: border-box;
    border-radius: 100%;
    background-color: #FFFFFF;
}

span.crop-point.point-n
{
    cursor: ns-resize;
    top: -4px;
    left: calc(50% - 4px);
}

span.crop-point.point-e
{
    cursor: ew-resize;
    top: calc(50% - 4px);
    right: -4px;
}

span.crop-point.point-s
{
    cursor: ns-resize;
    bottom: -4px;
    left: calc(50% - 4px);
}

span.crop-point.point-w
{
    cursor: ew-resize;
    top: calc(50% - 4px);
    left: -4px;
}

span.crop-point.point-ne
{
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}

span.crop-point.point-se
{
    bottom: -4px;
    right: -4px;
    cursor: nwse-resize;
}

span.crop-point.point-sw
{
    bottom: -4px;
    left: -4px;
    cursor: nesw-resize;
}

span.crop-point.point-nw
{
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

div.crop-static span.crop-point
{
    display: none;
}

/* OVERLAY > CONTENTS > AUDIO */

.overlay-center .audiowrap
{ 
    width: 512px;
} 

/* OVERLAY > CONTENTS > VIDEO */

.overlay-center .videowrap
{
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.overlay-center video
{ 
    width: auto;
    height: auto;    
    max-width: 100%;
    max-height: 80%;
}

/* OVERLAY > ITEMS */

.overlay-item-box
{
    position: relative;    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.overlay-item
{
    position: relative;
}

.overlay-caption
{
    padding: var(--padding-base) 0px;
}

.overlay-inneritem
{
    position: relative;
    width: 31vw;
    height: 31vw;
}

.overlay-inneritem-ctrl,
.overlay-inneritem-dwnl
{ 
    display: none;
    position: absolute;       
    width: var(--input-height-base);
    height: var(--input-height-base);
}

.overlay-inneritem-ctrl .icon,
.overlay-inneritem-dwnl .icon
{
    border-radius: 100%;
    width: var(--input-height-base);
    height: var(--input-height-base);
    line-height: var(--input-height-base);
    background-color: var(--negative-color);
    color: var(--icon-color);
}

.overlay-inneritem-ctrl
{
    top: var(--padding-base);
    right: var(--padding-base);
}

.overlay-inneritem-dwnl
{ 
    top: var(--padding-base);
    right: calc(var(--input-height-base) + var(--padding-base) + var(--margin-close));
}

.overlay-inneritem:hover .overlay-inneritem-ctrl,
.overlay-inneritem:hover .overlay-inneritem-dwnl
{
    display: block;
}

.overlay-inneritem .overlay-nopreview
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.overlay-inneritem .overlay-nopreview .icon
{
    width: var(--icon-dim-xxl);
    height: var(--icon-dim-xxl);
    line-height: var(--icon-dim-xxl);
    font-size: var(--icon-size-xxl);
}

/* OVERLAY > ITEMS > IMAGES */

.overlay-inneritem img 
{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-inneritem img.__imgactive
{
    cursor: pointer;
}

/* OVERLAY > ITEMS > VIDEO */

.overlay-inneritem .videowrap
{
    width: 100%;
    height: 100%;
}

.overlay-inneritem video
{ 
    width: 100%;
    height: 80%;
}

/* OVERLAY > ITEMS > DOCUMENTS */

.overlay-inneritem iframe,
.overlay-inneritem embed
{
    width: 100%;
    height: 100%;
}

.overlay-inneritem pre.notepadlike,
.overlay-inneritem pre.syntaxlike
{
    width: 100%;
    height: 100%;
}


/* LOGIN 
   RECOVERY 
   OFF-LINE 
   NO-CONNECTION
   ACCESS DENIED */

body.login_view,
body.recovery_view,
body.offline_view,
body.denied_view,
body.a2hs_view,
body.noconnect_view,
body.share_view
{
   letter-spacing: 1px;
   background-image: linear-gradient(var(--active-color), var(--header-color-bkg)); 
}

/* SHARE > LAYOUT */

#sharecontainer
{
    width: 100%;
    height: 100%;
}

#shareheader,
#sharefooter
{
    padding: 0px var(--padding-base);
    height: var(--overlay-header-height);
    line-height: var(--overlay-header-height);
    font-size: var(--font-size-large);
    color: var(--negative-color);
    text-align: center;
}

#sharefooter .info,
#sharefooter .download
{
    padding: 0px var(--padding-base);
}

#sharefooter .info
{
    float: left;
}

#sharefooter .download
{
    float: right;    
}

#sharefooter .download a
{
    color: var(--negative-color);
    line-height: var(--overlay-header-height);
}

.share_content
{
    position: relative;
    width: 100%;
    height: calc(100% - 2 * (var(--overlay-header-height)));
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.share_content img
{
    object-fit: cover;
    max-width: 96%;
    height: 100%;
    border-radius: var(--border-radius-base);
}

.share_content embed,
.share_content pre
{
    max-width: 96%;
    height: 100%;
}

/* LOGIN > LAYOUT */

#loginwrapper,
#recoverywrapper,
#offlinewrapper,
#deniedwrapper,
#a2hswrapper,
#noconnectwrapper,
#sharewrapper
{
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

#logincontainer,
#recoverycontainer
{
   width: var(--login-box-width);
   border-radius: var(--border-radius-pill);
   background: var(--bkg-color-base);
   box-shadow: var(--login-box-shadow);
}

#loginheader > span,
#recoveryheader > span, 
#offlineheader > span,
#deniedheader > span,
#a2hsheader > span,
#noconnectheader > span
{
    display: none;
}

#offlinecontainer h1,
#deniedcontainer h1,
#a2hscontainer h1,
#noconnectcontainer h1
{
    font-weight: normal;
    text-align: center;
    font-family: var(--font-bold);
    color: var(--negative-color);    
    margin-top: var(--margin-base);
    padding: var(--padding-big);
}

#offlinecontainer h2,
#deniedcontainer h2,
#a2hscontainer h2,
#noconnectcontainer h2
{
    font-weight: normal;
    text-align: center;
    font-family: var(--font-bold);
    color: var(--negative-color);        
}

#noconnectcontainer div.retry
{
    margin: auto;
    text-align: center;    
    margin-top: var(--margin-base);
}

#noconnectcontainer div.retry a
{
    text-transform: uppercase;
    padding: var(--padding-base) var(--padding-big);
    border-radius: var(--border-radius-base);
    background: var(--bkg-color-base);
    font-family: var(--font-bold);
    font-size: var(--font-size-bigger);
}

/* CONTENT */

/*    
div#recoverybodycontainer,
main#recoverycontent
{
    width: 100%;
}

#recoveryheader #head_img 
{
    display: none;   
}
*/

/* LOGIN > FORM */

form.loginform
{
    width: 100%;
    margin: var(--margin-base) auto 0px auto;
    padding: var(--login-form-padding) var(--login-form-padding) calc(3 * var(--login-form-padding)) var(--login-form-padding);    
}

form.recoveryform
{
    width: 100%;
    margin: var(--margin-base) auto 0px auto;
    padding: var(--login-form-padding);       
}

form.loginform div.section,
form.recoveryform div.section
{
    background: transparent;
    overflow: visible;
    margin-bottom: 0px;
}

form.loginform div.inputwrap div.inputwrapinner,
form.recoveryform div.inputwrap div.inputwrapinner
{
    padding-top: 0px;
    padding-bottom: 16px;
}

form.loginform div.inputwrap div.inputwrapinner label,
form.recoveryform div.inputwrap div.inputwrapinner label
{
    display: none;
}

/*
form.recoveryform div.inputwrap div.inputwrapinner label
{
    display: block;
    width: 100%;
    text-align: left;
}
*/

form.loginform div.inputwrap div.inputwrapinner > input,
form.recoveryform div.inputwrap div.inputwrapinner > input
{
    width: 100%;
    height: var(--input-height-fat);
    padding: calc(2 * var(--padding-base));
    font-size: var(--font-size-large);
}


form.loginform div.inputwrap div.inputwrapinner#__usr_inner__:before,
form.loginform div.inputwrap div.inputwrapinner#__pwd_inner__:before,
form.recoveryform div.inputwrap div.inputwrapinner#__usr_inner__:before,
form.recoveryform div.inputwrap div.inputwrapinner#__pwd_inner__:before
{
    
    text-align: center;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;    
    width: var(--input-height-fat);
    height: var(--input-height-fat);
    line-height: var(--input-height-fat);
    font-family: var(--icon-font);        
    font-size: var(--icon-size-mid);
    color: var(--input-color-placeholder);
}

form.loginform div.inputwrap div.inputwrapinner#__usr_inner__:before,
form.recoveryform div.inputwrap div.inputwrapinner#__usr_inner__:before
{
    content: "\f007";
}

form.loginform div.inputwrap div.inputwrapinner#__pwd_inner__:before,
form.recoveryform div.inputwrap div.inputwrapinner#__pwd_inner__:before
{
    content: "\f023";
}

form.loginform div.inputwrap div.inputwrapinner#__usr_inner__ > input,
form.loginform div.inputwrap div.inputwrapinner#__pwd_inner__ > input,
form.recoveryform div.inputwrap div.inputwrapinner#__usr_inner__ > input,
form.recoveryform div.inputwrap div.inputwrapinner#__pwd_inner__ > input
{
    padding-left: var(--input-height-fat);
}

form.loginform div.inputwrap div.inputwrapinner .checkboxwrap,
form.loginform div.inputwrap div.inputwrapinner .checkboxwrap_checked,
form.recoveryform div.inputwrap div.inputwrapinner .checkboxwrap,
form.recoveryform div.inputwrap div.inputwrapinner .checkboxwrap_checked
{
    display: inline-block;    
    vertical-align: top;
}

form.loginform div.inputwrap div.inputwrapinner > dfn,
form.recoveryform div.inputwrap div.inputwrapinner > dfn
{
    vertical-align: top;
    line-height: var(--checkbox-dim);
    margin-left: var(--margin-close);
}

form.loginform a.pwd_masktoggle,
form.recoveryform a.pwd_masktoggle
{
    top: 0px;
    bottom: auto;
    right: 0px;
    width: var(--input-height-fat);
    height: var(--input-height-fat);
    line-height: var(--input-height-fat);
    font-size: var(--icon-size-mid);
}

form.loginform div.buttonbar
{ 
    margin: 0px;
    padding: 0px;
}

form.loginform div.buttonbar a.btn,
form.recoveryform div.buttonbar a.btn
{ 
    width: 100%;
    height: var(--input-height-fat);
    line-height: var(--input-height-fat);
    font-size: var(--font-size-large);        
}

form.loginform div.buttonbar a.btn.btn-submit,
form.recoveryform div.buttonbar a.btn.btn-submit
{
    margin: 0px;
    background-color: var(--active-color);
}

form.recoveryform div.buttonbar a.btn,
form.recoveryform div.buttonbar a.btn.btn-submit
{
    width: calc(50% - 8px);
    margin: 0px 4px;
}

form.recoveryform div.buttonbar a.btn.btn-submit
{
    background-color: var(--btn-color-bkg);
}

a.login_back 
{
    position: absolute;
    bottom: -104px;
    left: 0px;
    color: var(--font-color-base);
}

a.login_recovery 
{
    position: absolute;
    bottom: -104px;
    right: 0px;    
    color: var(--font-color-base);
}

/* LOGIN > ACCESS */

span.login_access_snippet 
{ 
    position: relative;
    display: block;
    height: 80px;
    margin-bottom: 16px;
    padding: 8px;
    vertical-align: top;
    white-space: nowrap;
    background: #015E7F;
    border-radius: 4px;
}

span.login_access_snippet.login_access_change,
span.login_access_snippet.login_access_select
{
    cursor: pointer;
}

span.login_access_snippet.login_access_change:after
{
    position: absolute;
    display: block;
    right: 8px;
    top: 28px;    
    font-size: 28px;
    content: "\f078";
    color: #FFFFFF;
    font-family: var(--icon-font);
}

span.login_access_snippet span.nick
{ 
    display: block;  
    margin-left: 80px;
    white-space: nowrap; 
    font-size: 28px;
    color: #FFFFFF;
}                  

span.login_access_snippet span.user
{
    display: block;
    margin-left: 80px;
    color: #FFFFFF;
}        

span.login_access_snippet a.remove
{
    position: absolute;
    display: block;
    right: 8px;
    top: 24px;
}

span.login_access_snippet a.remove:before
{    
    color: #FFFFFF;
    font-family: var(--icon-font);
}

/* USERS > SNIPPET > NEW USER */

span.login_access_snippet span.newuser
{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 64px;
    height: 64px;   
    line-height: 64px;
    border-radius: 100%;
    background-color: #666666;
}

span.login_access_snippet span.newuser:before
{
    font-size: 32px;
    color: #333333;
}

/* USERS > SNIPPET > AVATAR */

span.login_access_snippet div.avatar
{
    position: absolute;
    top: 8px;
    left: 8px;
    height: 64px;    
}

span.login_access_snippet span.avatar 
{ 
    display: inline-block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: #FFFFFF;
    font-style: normal;
    font-size: 22px;
    font-weight: bold;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}      
       
       /*            
span.login_access_snippet span.avatar:before 
{ 
    display: inline-block;
    border: 2px solid #DDDDDD;
    padding: 5px 5px 5px 4px;
    border-radius: 100%;
    font-size: 18px;
}
*/

/* INSTALL > LAYOUT */

body.install_view #container
{
    grid-template-columns: auto;
    grid-template-rows: 99fr 1fr;
}

body.install_view #bodycontainer
{
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    padding: 0px var(--padding-base);
}

body.install_view #footer
{
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
}

.install_gpl
{    
    width: 100%;
    height: calc(var(--area-preview-height) * 2);
    border: var(--area-border-base);
    border-radius: var(--border-radius-base);
}

/* AUX */

.__hgtz
{
    display: block;
    height: 0px;
}

.__hidden
{
    display: none !important;
}

.__noscroll
{ 
    overflow: hidden;
}

.__sticky,
.__sticky tr th,
.__sticky tr th div
{
    position: sticky !important;
    top: 0px;
    z-index: 2;
}

.__pullleft
{
    float: left;
}

.__pullright
{
    float: right;
}

.__vspacer
{
    display: block;
    margin: 0px;
    padding: 0px;
    height: var(--margin-base);
}

.__target
{ 
    position: absolute;
    padding-top: 70px;
    margin-top: -70px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

.__disabled 
{
    opacity: var(--opacity-disabled);
    cursor: default;
}

.__unlinked,
.__unlinked:hover
{
    color: var(--font-color-base);
}

.__linkactive
{
    cursor: pointer !important;
}

.__desktoponly
{
}

.__mobileonly
{
    display: none !important;
}

.__blink
{
    animation: blinker 1s linear infinite;
}

.__toggle-fx
{ 
    -webkit-transition: width 0.25s, height 0.25s;
    transition: width 0.25s, height 0.25s;
}

.__toggle-fx-trigger
{     
    opacity: 0 !important;
    width: 0px !important;
    height: 0px !important;
    line-height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    float: left !important;
    z-index: -99 !important;
}

.__overlap-fx
{ 
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.__overlap-fx-trigger
{ 
    opacity: 0 !important;
    z-index: -99 !important;
}

a.__notify-newcount 
{ 
    position: absolute;
    z-index: 2;    
    display: block;
    border-radius: 100%;
    text-align: center;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);
    font-size: var(--font-size-smaller);
    background: var(--notify-circle-bright);
    color: var(--negative-color) !important;
}

a.__notify-newpost 
{ 
    display: inline-block;
    text-indent: 0px !important;
    text-align: center;    
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--font-base);
    padding: 0px var(--padding-base);    
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);    
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-smaller);
    background: var(--notify-circle-bright);
    color: var(--negative-color) !important;
}

a.__notify-hide
{ 
    display: none;
}

a.__sticker_count
{ 
    display: inline-block;
    vertical-align: top;
    text-align: center;
    border-radius: 100%;
    z-index: 2;
    margin-top: 4px;
    margin-left: var(--margin-close);
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);    
    font-size: var(--font-size-smaller);
    background-color: var(--notify-circle-color);
    color: var(--negative-color) !important;
}

a.__sticker_filter
{
    background: #FF686E;
}

a.__sticker_tb
{
    position: absolute;
    top: var(--notify-circle-pos);
    right: var(--notify-circle-pos);
    background-color: var(--notify-circle-bright);
}

.__badge_count
{
    text-align: center;
    border-radius: 100%;
    width: var(--notify-circle-dim);
    height: var(--notify-circle-dim);
    line-height: var(--notify-circle-dim);
    font-size: var(--font-size-smaller);
    background-color: var(--notify-circle-color);
    color: var(--negative-color);
}

.__badge_count_bottom
{
    display: block;
    margin: var(--margin-base) auto 0 auto;    
}

.__badge_count_left
{
    display: inline-block;
    /*margin-right: var(--margin-close);*/
}

.__alt_text_empty 
{ 
    opacity: 0.5;
    font-family: var(--font-italic);
}

.__locked
{        
    border-radius: 100%;    
    color: var(--state-color-fail) !important;    
}

a#__pwa_install__
{
    position: fixed;
    bottom: var(--margin-close);
    left: var(--margin-base);
    color: var(--active-color);
}