/* HTML */

html
{
    font-size: var(--font-size-base);
}

body
{
    margin: 0px;    
    font-size: 100%;
    text-align: left;
    font-family: var(--font-base);
    color: var(--font-color-base);
    background: var(--bkg-color);
}

form
{
    position: relative;
}

form fieldset 
{
    border: none;
    padding: 0px;
}

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

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

dfn 
{
    font-style: normal;
}

dfn a,
dfn a:link, 
dfn a:active, 
dfn a:visited
{
    color: var(--font-color-base);
}

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

table
{ 
    border-collapse: collapse;
}

hr
{ 
    height: 0px;
    border: 0;
    border-top: 1px solid var(--state-color-off);
}

input:focus,
textarea:focus,
select:focus
{
    outline: none;
}

img
{
    border: none;
    outline: none;
}

button
{
    outline: none;
}

/* HTML > TYPOGRAPHY */

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

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

.__italic { font-style: italic !important;  }
.__underline { text-decoration: underline !important; }
.__strikethr { text-decoration: line-through !important; }

.__subscript:after
{ 
    content: "2";
    vertical-align: sub;
    line-height: 8px;
    font-size: 60%;
}

.__superscript:after
{     
    content: "2";
    vertical-align: super;
    line-height: 8px;
    font-size: 60%;
}

.__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%;
}

/* TYPOGRAPHY > TITLE */

.titolo 
{ 
    position: relative;
    font-weight: normal;
    font-size: 180%;
    line-height: 100%;
    margin: 8px 0px;
    padding: 8px;
}

.titolo.centrato
{
    text-align: center;
}

.titolo .suppl,
.titolo .cust
{
    display: inline-block;
    vertical-align: top;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icona_titolo .icon
{
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
    width: 26px;
    height: 26px;
    font-size: var(--icon-size-mid);
}

.pulsanti_titolo
{ 
    display: inline-block;
    position: absolute;
    right: 16px;
}

.titolo .pulsanti_titolo a
{ 
    display: inline-block;
    vertical-align: top;
    margin: 0px 4px;
}

.pulsanti_titolo .icon
{
    display: inline-block;
    vertical-align: top;
}

.status_titolo
{ 
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
}

span.separatore_titolo:before
{
    content: "\f111";
    vertical-align: top;
    padding: 0px 12px;
    font-size: 33%;
    font-family: var(--icon-font);    
    color: var(--background-light);
}

.titolo .select-info,
.section .select-info
{
    margin: 0px 2px;
    font-style: normal;
    font-family: var(--font-bold);    
    color: var(--font-color-base);
}

span.section span.select-warning,
span.section span.select-warning .icon
{
    display: inline-block;
    vertical-align: top;
    color: var(--state-color-fail);
}

span.section span.select-warning
{
    margin-left: 16px;
}

/* TYPOGRAPHY > TEXT */

.messaggio_generico
{ 
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4px;
    font-size: 120%;
}

.messaggio_generico .icon
{ 
    display: inline-block;
    vertical-align: top;
}

.info_success
{
    font-size: 150%;
    color: var(--state-color-success);
}

.info_success .icon
{
    color: var(--state-color-success);
    line-height: 150%;
}

.evidenziato,
.info_strong
{
    font-family: var(--font-bold);
}

.info_paragraph
{
    font-size: 100%;
}

.info_hilight,
.info_hilight *
{
    color: var(--state-color-fail);
}

.info_lighter
{ 
    font-family: var(--font-base);
    color: var(--font-color-light);    
}

.perm
{
}

.status_new
{
    padding: 2px 4px;
    white-space: nowrap;
    background: var(--state-color-success);
    color: var(--font-color-neg);
    border-radius: var(--border-radius-base);    
}

em.currency
{
    margin-left: 3px;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.5;
    text-align: left !important;
}

span.currency-caption,
span.pairs-caption
{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 120%;
}

.amount,
.amount_negative,
.amount_positive,
.amount_negative_special,
.amount_positive_special
{
   display: block;
   white-space: nowrap;
}

.info_hilight .amount,
.info_hilight .amount_negative,
.info_hilight .amount_positive,
.info_hilight .amount_negative_special,
.info_hilight .amount_positive_special,
.popitselect .amount,
.popitselect .amount_negative,
.popitselect .amount_positive,
.popitselect .amount_negative_special,
.popitselect .amount_positive_special,
.selectbox .amount,
.selectbox .amount_negative,
.selectbox .amount_positive,
.selectbox .amount_negative_special,
.selectbox .amount_positive_special
{
   display: inline-block;
}

.amount_negative { color: var(--state-color-fail); }
.amount_positive { color: var(--state-color-success); filter: brightness(75%); }
.amount_negative_special { color: var(--amount-special-neg); }
.amount_positive_special { color: var(--amount-special-pos); }

span.en_field,
span.zh_field { display: block; }

span.otherlang_field
{ 
    opacity: 0.5;
}

/* TYPOGRAPHY > PUBLIC IDENTIFIERS */

a.pub_id,
span.pub_id
{
    padding: 2px 4px;
    white-space: nowrap;
    text-transform: uppercase;
    background: var(--link-color);
    color: var(--font-color-neg);
    border-radius: var(--border-radius-base);
}

a.pub_id.lite,
span.pub_id.lite
{
    background: var(--state-color-off);
}

a.pub_id.special,
span.pub_id.special
{
    background: var(--state-color-fail);
}

a.pub_id.custom,
span.pub_id.custom
{
    display: table-caption;
    margin-top: 4px;
    background: var(--background-dark);
}

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

a.pub_id.lite:hover
{
    background: var(--state-color-off);
}

a.pub_id.hist,
span.pub_id.hist
{    
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--background-dark);
    font-family: var(--font-italic);
}

a.pub_id.success,
span.pub_id.success
{
    background: var(--state-color-success);
}

a.pub_id.extrapad,
span.pub_id.extrapad
{
    padding: 2px 12px;
}

a.pub_id.extrapad.hist,
span.pub_id.extrapad.hist
{    
    font-size: 80%;    
}

span.demo_num_items
{
    margin: 0px 8px;
}

span.demo_num_items span.pub_id
{
    padding: 2px 16px;
}

div.no-item-found,
div.gm-redirecting
{
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 16px;
    font-size: 180%;
    text-align: center;
    color: var(--font-color-light);    
}

div.no-item-found .icon
{
    margin: auto;
    padding: 24px;
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 64px;
    opacity: 0.25;    
}

div.xfer_info
{
    position: relative;
    display: table;
    padding: 0px 8px 0px 30px;
    line-height: 22px;
    font-size: 120%;
}

div.xfer_info.guide,
div.xfer_info.guide .icon
{
    color: var(--link-color);
}

div.xfer_info .icon
{
    position: absolute;
    top: 0px;
    left: 4px;
}

div.xfer_info.__active
{
    cursor: pointer;
}

div.xfer_info.__active:hover,
div.xfer_info.__active:hover .icon
{
    color: var(--active-color);
}

div.xfer_special_box
{
    box-sizing: border-box;    
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -240px;
    margin-top: -960px;
    width: 480px;
    height: 400px;
    opacity: 0;    
    padding: 8px;
    z-index: 2;
    transition: all 0.3s;
    background: var(--bkg-color);
    border-radius: var(--border-radius-base);
    border: var(--border-light-thin);
    box-shadow: var(--shadow-base);    
}

div.xfer_special_box.__show
{
    opacity: 1;
    margin-top: -200px;
}

div.xfer_special_box h2
{
    margin: 0px 0px 16px 0px;
    padding-bottom: 4px;
    font-weight: normal;
    font-size: 120%;
    font-family: var(--font-bold);
    text-transform: uppercase;
    border-bottom: var(--sect-border-strong);
}

div.xfer_special_box .buttonbar
{
    position: absolute;
    bottom: 16px;
}

a.xfer_special_button
{
    display: none;
    position: absolute;
    left: 16px;
    top: 24px;
    font-size: 180%;
    line-height: 100%;
    padding: 8px 12px;
}

a.xfer_special_button.__show
{
    display: block;
}

a.xfer_special_button .icon
{
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
    color: var(--font-color-neg);
}

/* TYPOGRAPHY > SPACER */

.basic_spacer,
.thin_spacer,
.amount_spacer,
.tall_spacer
{
    display: block;
    height: 16px;
}

.thin_spacer,
.amount_spacer
{
    height: 8px;
}

.tall_spacer
{
    height: 32px;
}

/* AVATAR */

div.gm_avatar
{ 
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align:center;
    text-align: center;    
    border-radius: 100%;
    font-size: 12px !important;
    background-color: var(--state-color-off);
    color: var(--font-color-neg);
}

div.big_avatar
{ 
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 16px !important;
    background-color: transparent;
}

span.gm_avatar 
{ 
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
}

/* LAYOUT > HEADER */

header
{
    position: fixed;
    top: 0px;    
    z-index: 5;
    display: block;
    width: 100%;    
    box-sizing: border-box;
    padding: 8px;
    height: var(--header-height);
    background: var(--header-color);
}

div.header_title
{
    display: inline-block;    
    margin: 4px 4px 0px 4px;
    height: 28px;    
    line-height: 28px;
    padding: 0px 8px;
    vertical-align: top;
    font-family: var(--font-bold);
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: var(--border-radius-base);
    color: var(--font-color-neg);    
}

div.header_title.current
{
    background-color: var(--bkg-color);
    color: var(--link-color);
}

div.header_title:hover
{
    background-color: var(--active-color);
    color: var(--font-color-neg);
}

div.header_title.blocked,
div.header_title.blocked:hover
{
    background-color: var(--state-color-fail);
    color: var(--font-color-neg);
}

/* LAYOUT > HEADER > SETTINGS */

div.header_settings
{
    position: absolute;
    top: 8px;
    right: 52px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 100%;
}

div.header_settings .icon
{
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: var(--font-color-neg);    
}

/* LAYOUT > HEADER > NOTIFICATION CENTER */

div.header_notify
{
    position: absolute;
    top: 8px;
    right: 94px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 100%;
}

div.header_notify .icon
{
    width: 36px;
    height: 36px;
    line-height: 36px;    
    font-size: 18px;
    color: var(--font-color-neg);
}

/* LAYOUT > HEADER > QR SCANNER */

div.header_flydemo
{
    position: absolute;
    top: 8px;
    right: 136px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 100%;
}

div.header_flydemo .icon
{
    width: 36px;
    height: 36px;
    line-height: 36px;    
    font-size: 18px;
    color: var(--font-color-neg);
}

/* LAYOUT > HEADER > LANGUAGE */

/*
div.header_language
{
    position: absolute;
    top: 8px;
    right: 54px;
*/

.language_trigger
{ 
    display: block;
    border-radius: 100%;
    font-size: 0px;
    text-align: center;    
    width: 36px;
    height: 36px;
    line-height: 36px;
    background: var(--link-color);
    color: var(--font-color-neg);
}

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

.language_trigger:before
{    
    color: var(--font-color-neg);
    font-size: 14px;
}

.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_zh:before { content: "中文"; }
.language_trigger.flag__gma:before { content: "ALL"; }

/* LAYOUT > HEADER > AVATAR */

div.header_avatar
{
    position: absolute;
    top: 8px;
    right: 8px;
}

/* LAYOUT > HEADER > NAVIGATION */

div#__gm_main_nav__
{
    vertical-align: top;
    display: inline-block;
    margin-top: 4px;
    height: 28px;
    line-height: 28px;
}

a.main_nav_item
{
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0px 8px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--font-color-neg);    
    border-radius: var(--border-radius-base);
}

a.main_nav_item .icon
{
    display: inline-block;
    vertical-align: top;
    height: 28px;
    line-height: 28px;
    margin-right: 4px;
    color: var(--font-color-neg)
}

a.main_nav_item.current,
a.main_nav_item.current .icon
{
    background: var(--bkg-color);
    color: var(--link-color);
}

a.main_nav_item:hover,
a.main_nav_item:hover .icon
{    
    background: var(--active-color);
    color: var(--font-color-neg);
}

a.header_nav_toggle
{
    vertical-align: top;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 100%;
}

a.header_nav_toggle .icon
{
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: var(--font-color-neg);
}

div#__gm_navigation__
{
    position: fixed;
    z-index: 9;
    overflow: hidden;
    height: 100%;
    top: 0px;
    left: 0px;
    width: 360px;    
    box-sizing: border-box;
    background: var(--background-dark);
    box-shadow: 2px 0px 4px 0px #C2C2C2;
}

a#__gm_navclose__
{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

a#__gm_navclose__ .icon
{
    color: var(--font-color-neg);   
}

.header_nav_home
{
    position: relative;    
    height: 32px;
}

.header_nav_home a.logo
{    
    display: block;
    position: absolute;
    left: 8px;
    top: 8px;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 180%;    
    padding: 4px 8px;
    text-transform: uppercase;    
    color: var(--font-color-neg);
    border-radius: var(--border-radius-base);
}

.header_nav_home a.logo.current
{
    background: var(--bkg-color);
    color: var(--font-color-base);
}

.header_nav_home a.logo.blocked
{
    background: var(--state-color-fail);
    color: var(--font-color-neg);
}

.header_nav_home a.logo:hover
{
    background: var(--active-color);
    color: var(--font-color-neg);
}

.header_nav_home .adminblock
{
    position: absolute;
    top: 8px;
    left: 70px;
    width: auto;
    height: 20px;
    line-height: 20px;
}

.header_nav_home .adminblock a
{
    display: block;
    color: var(--font-color-neg);
    padding: 4px 8px;
    text-transform: uppercase;
    border-radius: var(--border-radius-base);
}

.header_nav_home .adminblock a:before
{
    content: "\f05e";
    font-family: var(--icon-font);
    font-size: 14px;
    margin-right: 8px;
}

.header_nav_home .adminblock a.blocked
{
    background: var(--bkg-color);
    color: var(--font-color-base);
}

.header_nav_home .adminblock a:hover
{
    background: var(--active-color);
}

ul.header_nav,
ul.header_nav_sub
{
    list-style: none;
    overflow: hidden;
    padding-inline-start: 0px;
    margin: 0px;        
}

ul.header_nav
{
    padding: 4px 8px;
}

ul.header_nav li,
ul.header_nav_sub li
{
    color: var(--font-color-neg);
    margin: 0px;
    padding: 0px;
}

ul.header_nav li .icon,
ul.header_nav_sub li .icon
{
    display: inline-block;
    color: var(--font-color-neg);
    margin-right: 6px;
    float: left;    
}

ul.header_nav li h1
{
    display: block;
    margin: 8px 0px;
    font-weight:  normal;
    font-size: 120%;
    text-transform: uppercase;
    border-bottom: 1px solid #666666;
    color: var(--font-color-light);
}

ul.header_nav_sub li a
{
    display: block;
    padding: 0px 2px;
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--font-color-neg);
    border-radius: var(--border-radius-base);
}

ul.header_nav_sub li a.current
{
    background: var(--bkg-color);
    color: var(--font-color-base);
}

ul.header_nav_sub li a.current .icon
{
    color: var(--icon-color);
}

ul.header_nav_sub li a:hover
{
    background: var(--active-color);
    color: var(--font-color-neg);
}

ul.header_nav_sub li a:hover .icon
{
    color: var(--font-color-neg);
}

/* LAYOUT > HEADER > SEARCH */

.header_search
{    
    margin-top: 4px;
    display: inline-block;
    vertical-align: top;
    width: 28px;
    height: 28px;
    line-height: 28px;    
    border-radius: 100%;
}

.header_search .icon
{
    width: 28px;
    height: 28px;
    line-height: 28px;
    color: var(--font-color-neg);
    border-radius: 100%;
}

.header_search:hover,
.header_search:hover .icon
{
    color: var(--link-color);
    background: var(--bkg-color);
}

/* LAYOUT > DRAWER > APPLICATION SEARCH */

div#__drawerappsearch__
{
    position: fixed;
    z-index: 9;
    overflow: hidden;    
    height: 100%;
    top: 0px;
    left: 0px;
    width: 66%;
    background: var(--bkg-color);
    box-shadow: 2px 0px 4px 0px #C2C2C2;
}

.drawerappsearch-header
{
    position: relative;
    width: 100%;
}

.drawerappsearch-header h1
{
    white-space: nowrap;
    overflow: hidden;
    font-weight: normal;
    font-size: 180%;
    margin: 0px;
    padding: 12px 8px;
}

.drawerappsearch-input
{
    position: relative;
    margin: 0px 8px;
}

.drawerappsearch-input:before
{
    position: absolute;
    content: "\f002";
    top: 8px;
    left: 8px;
    font-size: 16px;
    font-family: var(--icon-font);    
    color: var(--font-color-light);
}

.drawerappsearch-input input
{
    width: 100%;
    height: 32px;
    font-size: 130%;
    padding-left: 32px;
}

.drawerappsearch-input input::placeholder
{
    opacity: var(--input-placeholder-opacity);
    color: var(--font-color-base);
}

.drawerappsearch-input .searchreset
{
    position: absolute;
    top: 1px;
    left: 1px;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: var(--input-bkg-color);
    border-radius: var(--border-radius-base);
    color: var(--icon-color);
}

.drawerappsearch-input .searchreset:hover
{
    color: var(--active-color);
}

.drawerappsearch-input .searchreset:before
{
    font-size: var(--icon-size-mid);
}

.drawerappsearch-result
{
    overflow-y: auto;
    height: calc(100% - 84px);
    margin: 8px 16px 0px 16px;
}

/* LAYOUT > DRAWER > APPLICATION SEARCH > SKIP BUTTONS */

.drawerappsearch-result .skip
{
    margin-bottom: 16px;
}

.drawerappsearch-result .skip .skip_button
{
    display: inline-block;
    margin-top: 4px;
    margin-right: 4px;
    padding: 4px 8px;        
    white-space: nowrap;
    font-size: 100%;    
    text-transform: uppercase;
    background: var(--state-color-off);
    color: var(--font-color-neg);
    border-radius: var(--border-radius-base);
}

.drawerappsearch-result .skip .skip_button .badge
{
    margin-left: 8px;
    padding: 0px;
    display: inline-block;
    width: 32px;
    height: 16px;
    line-height: 18px;
    text-align: center;
    border-radius: var(--border-radius-mid);
    background: var(--bkg-color);
    color: var(--font-color-light);
}

.drawerappsearch-result .skip .skip_button.skip_on
{
    background: var(--link-color);
}

.drawerappsearch-result .skip .skip_button.skip_on .badge
{
    background: var(--bkg-color);
    color: var(--link-color);
}

.drawerappsearch-result .skip .skip_button:hover
{
    background: var(--active-color);
}

.drawerappsearch-result .skip .skip_button:hover .badge
{
    color: var(--active-color);
}

/* LAYOUT > DRAWER > APPLICATION SEARCH > RESULT */

.searchdata
{
    margin-bottom: 16px;
}

.searchdata h2
{
    margin: 0px 0px 16px 0px;
    font-weight: normal;
    font-size: 120%;
    text-transform: uppercase;
    border-bottom: var(--border-light-thin);
}

.searchdata h2.side_icon
{
    padding: 0px 0px 4px 24px;        
}

.searchdata h2.side_icon:before
{
    color: var(--icon-color);
}

.searchdata .searchitem
{
    width: 100%;    
}

.searchdata .searchitem:hover
{
    background-color: var(--row-bkg-hover);
}

.searchdata .searchitem.searchmore
{
    padding: 4px 0px;
}

.searchdata .searchitem.searchmore a
{    
    font-family: var(--font-bold);
    color: var(--font-color-base);
}

.searchdata .searchitem.searchmore a:before
{
    color: var(--font-color-base);
}

.searchmsg,
.searchempty
{
    text-align: center;
    margin: 25% 16px;
    font-size: 150%;
}

.searchwrap
{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 0px;
    cursor: pointer;
}

.searchwrap .icon
{
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
}

.searchdataseparator
{
    width: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.searchdataseparator:before
{
    content: "\f111";
    vertical-align: middle;
    font-size: 4px;
    color: var(--state-color-off);
    font-family: var(--icon-font);
}

/* LAYOUT > HEADER > FILTERS */

.header_filter
{
    width: 100%;
    box-sizing: border-box;    
    position: relative;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: auto;
    margin-bottom: 16px;
    margin-top: var(--header-height);    
    background: var(--bkg-color);
    box-shadow: var(--shadow-base);    
}

.header_filter .filter_element
{
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
}

.info_filter_sep
{
    display: inline-block;
    vertical-align: top;
    padding: 0px 0px;
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
}

.info_filter_sep:before
{
    content: "\f0b0";
    font-size: 14px;
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

.info_filter_sep._articles:before
{
    content: "\f03a";
}

.info_filter_sep._materials:before
{
    content: "\f576";
}

a.info_filter_on,
a.info_filter_off
{
    display: inline-block; 
    vertical-align: top;   
    box-sizing: border-box;
    max-width: 16vw;
    overflow: hidden;
    white-space: nowrap;    
    text-overflow: ellipsis;
    padding: 0px 8px;
    height: 24px;
    line-height: 24px;    
    font-size: 12px;
    text-transform: uppercase;
    border-radius: var(--border-radius-base);
}

a.info_filter_on:hover,
a.info_filter_off:hover
{
    background: var(--active-color);
}

a.info_filter_off
{
    background: var(--state-color-off);
    color: var(--font-color-neg);
}

a.info_filter_on
{
    background: var(--link-color);
    color: var(--font-color-neg);
}

div.stepperbox
{
    display: inline-block;
}

div.stepperbox span
{
    display: inline-block;
    width: 40px;
    height: 25px;
    line-height: 23px;
    vertical-align: top;
    box-sizing: border-box;
    font-size: 120%;
    text-align: center;
    border: var(--input-border-base);
    border-radius: var(--border-radius-base);    
}

div.stepperbox .icon
{
    display: inline-block;
}

/* LAYOUT > FOOTER */

div#footer
{ 
    margin-top: 32px;
    padding: 16px 0px 32px 0px;
    font-size: 12px;
    text-align: center;
    border-top: var(--border-light-thin);
    color: var(--state-color-off);
}

div#footer p
{ 
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 6px;
}

div.poweredby
{ 
    display: block;
    padding: 16px 16px 64px 16px;    
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: center;
    color: var(--font-color-light);
}

div.poweredby img
{ 
    display: block;
    opacity: 0.3;
}

span.footer-separator:before
{
    content: "\f111";
    display: inline-block;    
    vertical-align: top;
    height: 18px;
    line-height: 18px;
    padding: 0px 12px;    
    font-size: 33%;
    font-family: var(--icon-font);
}

a.changeloglink
{
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

.changelog-type.bugfix,
.changelog-type.bugfix .icon { color: var(--label-color); }
.changelog-type.new,
.changelog-type.new .icon { color: var(--state-color-fail);  }
.changelog-type.pay,
.changelog-type.pay .icon { color: var(--state-color-success); }

.changelog-type .icon
{
    display: inline-block;
    vertical-align: top;
    height: 18px;
    line-height: 18px;
}

/* SECTIONS */

div.section,
span.section,
a.section
{ 
    display: block;
    padding: 2px 0px;
    margin: 16px 0px;
    text-transform: uppercase;
    font-size: 120%;
    border-bottom: var(--sect-border-strong);
    font-family: var(--font-bold);
    color: var(--font-color-base);
}

/* TABLES > PAGE STRUCTURE */

table.free_table
{ 
    margin: auto;
    width: calc(100% - 8px);
    border-collapse: collapse;
}

table.free_table td.col_2
{
    width: 50%;
}

table.free_table td.col_3_max
{
    max-width: 33%;
}

table.free_table td.vtop
{
    vertical-align: top;
}

table.free_table td.inputform
{
    padding: 8px;
}

table.free_table.sixtysize
{
    width: 60%;
    margin: 0px;
}

/* ARTICLES > SHOW PAGE */

div.main_picture,
div.main_movie
{
    width: 100%;
    text-align: center;
    box-sizing: border-box !important;    
}

div.main_picture a,
div.main_movie a
{
    display: block;    
}

div.main_picture .pic_wrap,
div.tech_pictures .tech_wrap,
div.main_movie .mov_wrap
{
    position: relative;
    margin: 8px;
}

div.main_picture .pic_wrap .modref
{
    padding: 8px 4px;
    text-align: left;
    font-size: 130%;    
}

.pic_wrap img
{
    position: relative;
    border-radius: var(--border-radius-base);
}

div.main_movie .mov_wrap video
{
    width: 100%;
}

div.tech_wrap
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    box-sizing: border-box !important;
}

div.tech_wrap .pic_wrap
{
    width: calc(50% - 16px);
}

div.pict
{
    position: relative;
}

div.pict img
{
    display: block;
    border-radius: var(--border-radius-base);
}

div.pict .icon,
div.pict .icon:before
{
    font-size: 48px;
    width: 100px;
    height: 64px;
    line-height: 64px;
    border-radius: var(--border-radius-base);
    background: var(--background-light);
}

div.pict .modref
{
    padding: 4px 2px;
    font-family: var(--font-bold);
    color: var(--font-color-base);    
}

div.pict .morefunc
{
    display: none;
    box-sizing: border-box;
    position: absolute;
    top: 4px;
    right: 8px;
    margin: 0px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 100%;
    text-align: center;
    background: var(--bkg-color);
    border: var(--border-dark-thin);
}

div.pict .morefunc:before
{
    content: "\f142";
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-family: var(--icon-font);
}

div.pict .morefunc:hover
{
    color: var(--font-color-neg);
    background: var(--active-color);
    border-color: var(--active-color);
}

div.pict:hover .morefunc
{
    display: block;
}

.pic_wrap div.pict .icon,
.pic_wrap div.pict .icon:before,
.mov_wrap div.pict .icon,
.mov_wrap div.pict .icon:before,
.tech_wrap .icon,
.tech_wrap .icon:before
{
    width: 160px;
    margin: auto;
    background: none;
    opacity: 0.5;
    height: var(--icon-dim-xxl);
    line-height: var(--icon-dim-xxl);
    font-size: var(--icon-size-xxl);    
}

div.dragtargetbox.article_media,
div.dragtargetbox.main_picture,
div.dragtargetbox.tech_pictures,
div.dragtargetbox.main_movie
{
    width: 100%;
    min-height: 350px;
}

/* TECH PICS (articles list page) */

a.techpiclink
{
    display: block;
    white-space: nowrap;
    text-align: center;
    text-transform: uppercase;
    padding: 4px 0px;
    font-family: var(--font-bold);
}

a.techpiclink span.badge
{
    display: inline-block;
    margin-right: 4px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 100%;
    font-size: 10px;
    background-color: var(--badge-color-off);
    color: var(--font-color-neg);
}

a.techpicwrap
{
    display: block;
    margin-top: 2px;
    width: 104px;
}

a.techpicwrap *
{
    margin-right: 2px;
    vertical-align: top;
}

a.techpicwrap img
{
    display: inline-block;
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: var(--border-radius-base);
}

.techpicmore
{
    display: inline-block;
    width: 32px;
    height: 24px;
    line-height: 24px;        
    text-align: center;
    letter-spacing: 1px;
    background: var(--state-color-off);
    color: var(--font-color-neg) !important;
    border-radius: var(--border-radius-base);
}

span.basic_caption,
div.basic_caption
{
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ARTICLES > SPECIFICATIONS > OPTIONS */

.gm_specs_none:before,
.gm_specsopt_minimal:before,
.gm_specsopt_part:before,
.gm_specsopt_ext:before,
.gm_specsopt_complete:before,
.gm_specsopt_compact:before,
.gm_notesvsb_normal:before,
.gm_notesvsb_private:before,
.gm_notesvsb_both:before,
.gm_vsbl_both:before,
.gm_vsbl_visible:before,
.gm_vsbl_invisible:before
{
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
    color: var(--icon-color);
}

.gm_specs_none:before { content: "\f0c9"; }
.gm_specsopt_minimal:before { content: "\f03a"; }
.gm_specsopt_part:before { content: "\f00b"; }
.gm_specsopt_ext:before { content: "\f00a"; }
.gm_specsopt_complete:before { content: "\f0ce"; }
.gm_specsopt_compact:before { content: "\f5fd"; }
.gm_notesvsb_normal:before { content: "\f06e"; }
.gm_notesvsb_private:before { content: "\f070"; }
.gm_notesvsb_both:before { content: "\f249"; }
.gm_vsbl_both:before { content: "\f03a"; }
.gm_vsbl_visible:before { content: "\f06e"; }
.gm_vsbl_invisible:before { content: "\f070"; }

/* TABLES > PAGER */

div.t_basic_controls
{ 
    width: 100%;
    margin: 8px auto;
}

div.t_basic_controls.no-margin-top
{
    margin: 0px 0px 8px 0px;
}

div.t_basic_controls div.t_basic_element
{ 
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 4px 8px;   
}                       

div.t_basic_controls div.t_basic_element .t_mid_select_wrap
{
    width: 260px;
}

div.t_basic_controls div.t_basic_element .t_wide_select_wrap
{
    width: 360px;
}

div.t_basic_controls div.t_basic_element .t_basic_select_wrap
{
    width: 360px;
}

div.t_basic_controls div.t_basic_element div.search_input
{
    width: 100%;
}

div.t_basic_controls div.pager-wrap
{
    display: inline-block;
    vertical-align: top;
    padding: 4px;    
    line-height: 26px;
}

div.t_basic_controls div.pager-wrap div
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 110%;
}

div.t_basic_controls div.pager-wrap div .icon
{
    line-height: 26px;
}

div.t_basic_controls div span.pager-current,
div.t_basic_controls div span.pager-pages,
div.t_basic_controls div span.pager-total
{
    display: inline-block;
    margin: 0px 2px;
    padding: 0px 8px;
    height: 22px;
    line-height: 22px;
    font-family: var(--font-bold);
}

div.t_basic_controls div span.pager-current
{
    color: var(--active-color);
}

/* TABLES > TOOLBAR */

table.toolbar { margin: 6px auto;
                width: calc(100% - 8px); }

table.toolbar td { padding: 4px 8px; }

/* TABLES > FORM */

table.frame_table
{ 
    margin: auto;
    width: calc(100% - 8px);
    border-collapse: collapse;
}

table.frame_table td
{ 
    vertical-align: top;
    padding: 0px;
}

table.frame_table td.col_1
{
    width: 100%;
}

table.frame_table td.col_2
{
    width: 50%;
}

table.frame_table td.col_2 .section
{
    width: calc(100% - 8px);
}

/* TABLES > BASIC */

.basic_wrap
{
    position: relative;
    width: 100%;   
    overflow-x: auto;
}

.basic_wrap.magnified_content
{
    padding-bottom: 64px;
}

.basic_wrap.framed
{
    max-height: 50vh;
    overflow-y: auto;
}

table.basic_table
{ 
    position: relative;
    margin: auto;
    width: calc(100% - 8px);
    border-collapse: collapse;
}

table.basic_table td
{ 
    position: relative;
    padding: 6px 4px;
    vertical-align: middle;
}

table.basic_table tr
{
    border-bottom: var(--row-border-base);
}

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

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

table.basic_table tr:hover
{
    background-color: var(--row-bkg-hover);
}

table.basic_table tr.basic_header
{
    position: relative;
    z-index: 2;    
    transition: top 0.25s;
}

table.basic_table tr.basic_header td
{
    padding: 0px;
}

table.basic_table tr.basic_header td div
{
    white-space: nowrap;
    text-transform: uppercase;
    padding: 8px 4px;
    height: 16px;
    background-color: var(--row-bkg-head);
    border-bottom: var(--sect-border-strong);
    color: var(--font-color-base);
    font-family: var(--font-bold);    
}

table.basic_table tr.basic_header td div a, 
table.basic_table tr.basic_header td div a:link
table.basic_table tr.basic_header td div a:active
table.basic_table tr.basic_header td div a:visited
table.basic_table tr.basic_header td div a:hover
{
    color: var(--font-color-base);
}

table.basic_table tr.basic_header:hover
{
    background-color: var(--row-bkg-head);
}

table.basic_table tr.basic_header td.collapsedheader div,
table.basic_table td.collapsedcell
{
    width: 16px;    
}

table.basic_table tr.basic_header td.collapsedheader div a
{
    font-size: 0px;
}

table.basic_table tr.basic_header td.collapsedheader div a:before
{
    display: inline-block;    
    font-size: 16px;
    content: "\f337";    
    float: left;
    font-family: var(--icon-font);
}

table.basic_table td.collapsedcell *
{
    display: none;    
    width: 0px;
}

table.basic_table td.numeric
{
    text-align: right;
}

table.basic_table td.edt
{
    cursor: cell;
}

table.basic_table td.active
{
    cursor: pointer;
}

table.basic_table td.nowrap
{
    white-space: nowrap;
}

table.basic_table td.col_icon
{
    width: 24px;
}

table.basic_table td.col_icon_4
{
    width: 96px;
}

table.basic_table td.limit-50
{
    width: 50%;
}

table.basic_table td.limit-66
{
    width: 66%;
}

.gm-cat-icon
{
    position: absolute;
    top: 4px;
    left: 4px;
}

.compactspecbox
{
    display: inline-block;
    padding: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
    border: var(--border-light-thin);
    border-radius: var(--border-radius-base);    
}

.compactspecbox.edt
{
    cursor: cell;
}

.compactspecbox.changed_field
{
    color: var(--active-color);
    font-family: var(--font-bold);
}

.compactspecbox.empty
{
    display: none;
}

.compactspecbox h6
{
    margin: 0px 0px 4px 0px;    
    font-size: 90%;
    font-weight: normal;    
    text-transform: uppercase;
    color: var(--font-color-light);
}

/* TABLES > BASIC > CUSTOM DATA */

table.basic_table tfoot
{
}

table.basic_table tr.basic_total
{    
    border-bottom: none;
    background-color: var(--row-bkg-foot);
    border-top: var(--sect-border-strong);
}

table.basic_table tr.basic_total td
{ 
    vertical-align: top;
    font-family: var(--font-bold);
}

table.basic_table tr.basic_total td.label
{     
    text-transform: uppercase;
    font-size: 120%;
}

table.basic_table tr.basic_total td div.label
{
    text-transform: uppercase;
    font-family: var(--font-bold);    
}

table.basic_table tr.basic_total td div.sublabel
{
    margin-top: 8px;
}

table.basic_table td.full_assortment.label
{      
    text-transform: uppercase;
    font-size: 120%;
    font-family: var(--font-bold);
}

div.full_assortment_box
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

table.basic_table td.changed_field 
{  
    color: var(--active-color);
    font-family: var(--font-bold);
}

table.basic_table td.enlarge
{
    font-size: 16px;
    font-weight: bold;
}

/* TABLES > PROTOTYPES */

.proto_spec_table
{
    width: 100%;
}

/* TABLES > AWB */

div.awb-legend
{
    vertical-align: top;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    box-sizing: border-box;
    margin-right: 8px;
}

div.awb-legend-caption
{
    vertical-align: top;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 20px;
}

table.basic_table td.awbcol
{
    color: var(--font-color-neg);
}

table.basic_table td.awb-1,
div.awb-legend.awb-1
{
    background-color: var(--awb-color-1) !important;   
}

table.basic_table td.awb-2,
div.awb-legend.awb-2
{
    background-color: var(--awb-color-2) !important;
}

table.basic_table td.awb-3,
div.awb-legend.awb-3
{
    background-color: var(--awb-color-3) !important;
}

table.basic_table td.awb-4,
div.awb-legend.awb-4
{
    background-color: var(--awb-color-4) !important;
}

table.basic_table td.awb-5,
div.awb-legend.awb-5
{
    background-color: var(--awb-color-5) !important;
}

/* TABLES > BASIC > DEMO */

table.basic_table.playdemo_table td
{
    font-size: 150%;
}
                   
/* TABLES > DETAILS */

table.show_table
{ 
    margin: auto;
    width: calc(100% - 8px);
    border-collapse: collapse;
}

table.show_table th,
table.free_table th
{ 
    padding: 8px 0px;    
    font-weight: normal;
    font-size: 130%;
    white-space: nowrap;
    text-transform: uppercase;
    background-color: var(--row-bkg-head);
    border-bottom: var(--sect-border-strong);        
    font-family: var(--font-bold);
}

table.show_table tr
{
    border-bottom: var(--row-border-base);
}

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

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

table.show_table td
{ 
    vertical-align: middle;
    padding: 6px 8px;
}

table.show_table td.basic_caption
{ 
    width: 20%;
    vertical-align: top;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.show_table td.basic_info
{
    font-size: 110%;
}

table.show_table td img { vertical-align: top; }
table.show_table td.notes { width: 35%; }
table.show_table td.ship-notes { width: 360px; font-size: 110%; padding: 6px 16px; }
table.show_table td.security-notes { font-size: 110%; text-transform: uppercase; white-space: pre; }
table.show_table td.basic_date { width: 15%; }
table.show_table td.pricedata { vertical-align: top; font-size: 110%; }

div.showarticle_price
{ 
    vertical-align: top;
    margin-bottom: 8px;
}

/* ASSORTMENTS */

.asr-item-wrap,
.asr-item-wrap-custom
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
    margin-bottom: 4px;
    width: 464px;
}

.asr-item-wrap-custom
{
    width: 552px;
}

.asr-item-add
{
    display: inline-block;
    height: 72px;
    line-height: 36px;
    box-sizing: border-box;    
    border-radius: var(--border-radius-mid);
    border: var(--border-active-drop);
}

.asr-item-add a
{
    display: block;
    position: relative;
    padding: 16px 16px 16px 56px;
    font-size: 130%;    
    color: var(--font-color-base);
}

.asr-item-add a:before
{
    content: "\f0cb";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;    
    padding: 16px;
    font-size: 30px;
    font-family: var(--icon-font);    
    color: var(--icon-color);    
}

.asr-item-add:hover
{
    border-color: var(--active-color);
}

.asr-item-add:hover a,
.asr-item-add:hover a:before
{
    color: var(--active-color);
}

/* ASSORTMENTS > EDIT */

.asr-clear_fields
{
    text-align: right;
}

.asr-clear_fields a
{
    color: var(--font-color-base);
}

.asr-clear_fields .icon
{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;   
}

.asr-clear_fields a:hover,
.asr-clear_fields a:hover .icon
{
    color: var(--active-color);
}

/* ASSORTMENTS > TABLE */

table.assortment_table
{ 
    width: 100%; 
    margin: 0px;
}

table.assortment_table tr:nth-child(odd),
table.assortment_table tr:nth-child(even)
{ 
    border-bottom: none;
    background-color: transparent;
}

table.assortment_table td
{ 
    text-align: center;    
    padding: 2px 4px;
    border: var(--border-light-thin);
    background-color: var(--row-bkg-odd);
}

table.assortment_table td.label
{
    background-color: var(--row-bkg-even);
    color: var(--font-color-light);
}

table.assortment_table tr td.asr-title
{    
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
    font-family: var(--font-bold);
    border-bottom: var(--sect-border-strong);    
}

table.assortment_table tr td.asr-title a
{
    color: var(--font-color-base);
}

table.assortment_table tr td.asr-title a:hover
{
    color: var(--active-color);
}

table.assortment_table tr td.asr-title .ctrl
{
    position: absolute;
    top: 0px;
    right: 4px;
}

table.assortment_table tr td.asr-title .ctrl *
{
    display: inline-block;    
    vertical-align: top;
}

table.assortment_table tr td.asr-title .ctrl input[type=checkbox], 
table.assortment_table tr td.asr-title .ctrl input.checkbox
{
    display: none;
}

table.assortment_table tr td.asr-title .ctrl .checkboxwrap,
table.assortment_table tr td.asr-title .ctrl .checkboxwrap_checked
{
    vertical-align: middle;
    margin-left: 4px;
}

table.assortment_table tr td.label.asr-total
{
    width: 40px;
}

table.assortment_table tr td.label.asr-pairs-pack
{
    width: 64px;
}

table.assortment_table tr.quant td,
table.assortment_table tr td.quant { font-size: 110%; }

table.assortment_table tr.asr-notes td,
table.assortment_table tr td.asr-notes { text-align: left; }

table.assortment_table tr td.asr-notes
{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 72px;
}

/* ASSORTMENTS > TABLES > HISTORY */

table.assortment_history { width: 100%; }
table.assortment_history td { padding-bottom: 16px; }

/* CUSTOMERS > TABLES > INFO */

table.customer_info tr
{ 
    border: none;
    background-color: transparent !important;
}

table.customer_info td
{ 
    vertical-align: top;
    padding: 0px;
}

table.customer_info tr.customer_header td
{
    white-space: nowrap;
    text-transform: uppercase;
    padding: 0px;
    font-family: var(--font-bold);
}

table.customer_info td.nowrap { white-space: nowrap; }

table.customer_info td.info-block div
{
    margin-bottom: 12px;
    margin-right: 64px;
}

table.customer_info td span.customer_label
{
    display: block;
    margin-bottom: 6px;
    font-size: 100%;
    font-family: var(--font-bold);
}

table.customer_info td span.customer_value
{
    line-height: 20px;
}

/* TABLES > EDIT */

table.edit_table
{ 
    width: 100%;
}

table.edit_table td
{ 
    padding: 4px;
    position: relative;
}

table.edit_table td.basic_caption
{ 
    width: 20%;
    text-align: right;
    vertical-align: top !important;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.edit_table td.basic_caption.shorter
{
    width: 15%;
}                                    

table.edit_table td.edititems_select
{
    vertical-align:bottom !important;
}

form table.edit_table td.edititems_select .selectbox
{
    width: 100%;
}

form table.edit_table td.custassort_select .selectbox
{
    width: 100%;
}

span.assortment-input-wrap
{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 0px;
}

span.assortment-input-wrap input
{
    width: 100%;
}

div.assortment_edit_vblock
{ 
   height: 22px;
   line-height: 18px;
   letter-spacing: 1px;
}

div.assortment_edit_vsymbol
{ 
   height: 24px;
   line-height: 24px;
   vertical-align: top;
   white-space: nowrap;
}

div.box_custom_assortments
{   
    height: 50vh;
    overflow-y: scroll;
}

span.edit_inline_label 
{ 
    display: inline-block;
    width: 128px; 
    padding: 0px 8px; 
    text-align: right;
}


table.edit_table td.proto_label
{    
    box-sizing: border-box;
    height: 38px;
    line-height: 38px;
    padding: 0px 12px;
    text-align: right;
}

table.edit_table td.proto_input
{
    box-sizing: border-box;
    height: 38px;
}

span.nologo
{ 
    display: inline-block;
    width: auto;
    line-height: 25px;
    letter-spacing: 1px;    
}


table.edit_asr_table td.details
{
    padding: 8px 0px 8px 0px;
}

table.edit_asr_table td.cart-pairs
{
    vertical-align: top;
}

/* TABLES > AUX INFO */

table.auxinfo_table
{
    width: 100%;
}

table.auxinfo_table td
{
    padding: 0px 0px 8px 0px;
}

table.auxinfo_table td.auxnum
{
    line-height: 26px;
    font-size: 110%;
    font-family: var(--font-bold);    
}

table.auxinfo_table td.auxcheck
{
    padding: 4px 4px 8px 4px;
}

table.auxinfo_table td.auxabbr
{
    width: 80px;
}

/* TABLES > OVERVIEW */   

div.overview_wrapper
{
    margin-top: 24px;
    margin-left: 8px;
}

table.overview_table
{ 
    position: relative;    
    border-collapse: collapse;
}

table.overview_table td,
table.overview_table th
{ 
    position: relative;
    padding: 6px 18px;;
    vertical-align: middle;    
    text-transform: uppercase;
    font-size: 120%;
    background-color: var(--row-bkg-odd);
    border-bottom: var(--row-border-base);
}

table.overview_table tr:nth-child(even) td
{    
    background-color: var(--row-bkg-even);   
}

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

table.overview_table td.intdata
{
    font-family: var(--font-bold);
    text-align: right;
}

table.overview_table td.success
{
    color: var(--state-color-success);
}

table.overview_table td.error
{
    color: var(--state-color-fail);   
}

table.overview_table th
{
    white-space: nowrap;
    text-transform: uppercase;    
    border-bottom: var(--sect-border-strong);
    color: var(--font-color-base);
    font-family: var(--font-bold);
}

table.overview_table th.center
{
    text-align: center;
}

/* TABLES > PROTOTYPES */   

.__protover_hide
{
    display: none;
}

/* GRIDS */

.data_grid_box
{
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: left;
    flex-wrap: wrap;
    overflow-y: auto;
    gap: 8px;
}

.data_grid_box.nopad
{
    padding: 0px;
}

.data_grid_item
{
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: 300px;
    height: 86px;
    padding: 8px;
    overflow: hidden;
    background: var(--row-bkg-even);
    border: var(--row-border-base);
    border-radius: var(--border-radius-base);
}

.data_grid_item.fat
{
    width: 128px;
    height: 106px;
}

.data_grid_item.active
{
    cursor: pointer;
}

.data_grid_item.active:hover
{
    border-color: var(--active-color);
}

.data_grid_item.active:hover .data_grid_icon .icon,
.data_grid_item.active:hover .data_grid_label
{    
    color: var(--active-color);
}

.data_grid_item .data_grid_title
{
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data_grid_item .edt
{
    cursor: cell;
}

.data_grid_item .data_grid_sub
{
    margin-top: 8px;
    text-transform: uppercase;
    font-size: 80%;
}

.data_grid_item .data_grid_info
{
    position: absolute;
    left: 8px;
    bottom: 8px;
    color: var(--font-color-light);
}

.data_grid_item .data_grid_select
{
    position: absolute;
    top: 8px;
    right: 8px;
}

.data_grid_item .data_grid_ctrl
{
    position: absolute;
    bottom: 8px;
    right: 4px;
}

.data_grid_item .data_grid_icon .icon
{
    margin: auto;
    height: 48px;
    line-height: 48px;
}

.data_grid_item .data_grid_backimg,
.data_grid_item .data_grid_backimg div
{
    width: 100%;
    height: 48px;
}

.data_grid_item .data_grid_label
{
    width: 100%;
    margin-top: 16px;
    text-align: center;
    font-size: 130%;
}

/* FORM > INPUTS */

input,
textarea,
.input-like
{
    resize: none;
    box-sizing: border-box;    
    width: calc(100% - 16px);
    height: 26px;
    padding: 4px 8px;
    font-size: 110%;
    font-family: var(--font-base);    
    background: var(--input-bkg-color);
    border: var(--input-border-base);
    border-radius: var(--border-radius-base);
    color: var(--font-color-base);    
}

.input-like
{
    display: inline-block;
    vertical-align: top;
    line-height: 140%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input::placeholder,
.countryplaceholder
{
    opacity: var(--input-placeholder-opacity);
    color: var(--font-color-base);
}

input:focus,
textarea:focus
{
    border-color: var(--border-color-select);
}

input[type=number].amountinput,
input.pairsinput
{
    max-width: 160px;
}

input.halfsize { width: 45%; }
input.mid_desc { width: 320px; }
input.cart_numeric { width: 40px; }
input.mid_numeric { width: 64px; }

input.proto_input
{
    width: 100%;
    padding: 4px 10px;
    font-size: 150%;
}

a.pwd_masktoggle 
{ 
    display: inline-block;
    position: absolute;
    right: 16px;
    bottom: 0px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: var(--icon-color);
}

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

div.search_input
{
    position: relative;
    width: calc(100% - 16px);
}

div.search_input:before
{
   position: absolute;
   content: "\f002";
   top: 4px;
   left: 8px;
   font-size: 16px;
   font-family: var(--icon-font);
   color: var(--font-color-light);
}

div.search_input input
{   
    width: 100%;    
    padding-left: 28px;
}

div.search_input .search_reset
{
    position: absolute;
    top: 2px;
    left: 4px;
    display: block;
    width: 22px;
    height: 22px;
    line-height: 22px;    
    border-radius: var(--border-radius-base);
    background: var(--input-bkg-color);
    color: var(--icon-color);
}

div.search_input .search_reset:hover
{
    color: var(--active-color);
}

.popit-search
{
    position: relative;
}

.popit-search:before 
{
    position: absolute;
    content: "\f002";
    top: 4px;
    left: 6px;
    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: 26px;
}

.popit-search a.popit-search-reset,
.popit-search a.popit-search-reset:hover
{
    position: absolute;
    cursor: pointer;
    vertical-align: top;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    line-height: 22px;    
    padding: 0px;
    margin: 0px;
    z-index: 2;
    background: var(--input-bkg-color);
    font-size: var(--icon-size-base);
    color: var(--icon-color) !important;    
}

.popit-search a.popit-search-reset:before
{
    width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0px;
    margin: 0px;
}

.popit-search a.popit-search-reset:hover:before
{
    color: var(--icon-color) !important;
}

/* POP-IT > COUNTRY INFO */

.popitmenu a .country-info,
.popitselect a .country-info,
.country-info,
.popitmenu a .dial-info,
.popitselect a .dial-info,
.dial-info
{
    line-height: 24px;
    white-space: nowrap;
}

.popitmenu a .country-info em,
.popitselect a .country-info em,
.country-info em,
.popitmenu a .dial-info em,
.popitselect a .dial-info em,
.dial-info em
{
    display: inline-block;
    text-align: center;
    font-style: normal;
    width: 28px;
    opacity: 0.5;    
}

.popitmenu a .dial-info em,
.popitselect a .dial-info em,
.dial-info em
{
    width: 48px;
    text-align: right;
    margin-right: 6px;
}

.popitmenu a .country-info img,
.popitselect a .country-info img,
.country-info img,
.popitmenu a .dial-info img,
.popitselect a .dial-info img,
.dial-info img
{
    display: inline-block;
    width: 22px;
    vertical-align: top;
}

textarea
{
    height: 80px;
}

textarea.smaller
{    
    height: 42px;
}

input[type=checkbox],
input.checkbox
{    
    width: 16px;  
    height: 16px;
    vertical-align: top;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px none;
    cursor: pointer;
}

/* FORM > CHECKBOX */

.checkboxwrap input[type=checkbox],
.checkboxwrap_checked input[type=checkbox]
{
    display: none;
}

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

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

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

/* FORM > INPUTS > ON-OFF */

.input_yesno_box 
{
    display: block;
    box-sizing: border-box;
    position: relative;    
    overflow: hidden;
    width: var(--onoff-dim);
    height: calc(var(--onoff-dim) / 2);
    border-radius: var(--onoff-radius);
    border: var(--input-border-base);
    background-color: var(--input-bkg-color);
}

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

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

.input_yesno_toggle_yes 
{
    left: 0px;    
}
.input_yesno_toggle_no 
{
    left: calc(var(--onoff-dim) / 2);
    
}

.input_yes,
.input_no 
{
    position: absolute;
    top: 2px;
    display: block;
    font-size: 0px;
    text-align: center;
    z-index: 1;    
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 100%;
}

.input_yes:before,
.input_no:before
{
    font-size: 12px;
    font-family: var(--icon-font);    
    color: var(--font-color-neg);
}

.input_yes 
{
    right: 3px;
    background-color: var(--active-color);
}
.input_no 
{
    left: 3px;
    background-color: var(--state-color-off);
}

.input_yes:before
{
    content: "\f00c";
}

.input_no:before
{
    content: "\f00d";
}

/* FORM > INPUTS > MULTISELECT */

div.multiselect-outer-wrap
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: calc(100% - 16px);
}

table.multiselectwrap td
{
    max-width: 60vw;
    overflow-wrap: break-word;
    padding-bottom: 8px;
}

table.multiselectwrap td.multiselectgroup
{
    vertical-align: top;
    padding-right: 8px;
    padding-bottom: 8px;
}

table.multiselect
{
    width: 100%;
}

table.multiselect th,
table.multiselect td
{
    text-align: left;
    padding: 0px 8px 2px 8px;
    font-size: 110%;
}

table.multiselect td
{
    padding: 2px 8px;
}

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

table.multiselect th.multictrl
{
    width: 18px;
}

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

div.check-spacer-h
{
  display: inline-block;
  margin: 0px 8px;
  vertical-align: middle;
}

/* FORM > INPUTS > RANGE */

input[type=range]
{
    appearance: none;
    display: inline-block;
    box-sizing: border-box;
    width: calc(100% - 16px);
    padding: 0px;
    margin: 0px;    
    border: none;
    background: transparent;
    cursor: pointer;
    height: 26px;
}

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

input[type=range]::-webkit-slider-thumb
{
    appearance: none;        
    cursor: pointer;
    border: none;
    border-radius: 100%;        
    width: 24px;
    height: 24px;
    margin-top: -6px;
    background: var(--active-color);
}

input[type=range]::-webkit-slider-runnable-track
{
    height: 12px;
    background: var(--background-light);    
    border-radius: var(--border-radius-base);
}

input[type=range]::-moz-range-track
{
    background: var(--active-color); 
}

/* FORM > INPUTS > SELECT */

.selectbox,
.seldatetimebox
{
    position: relative;
    display: inline-block;
    width: calc(100% - 16px);
    height: 26px;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;    
}

.seldatetimebox
{
    width: 30%;
}

.selectbox:after,
.seldatetimebox:after
{
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;    
    text-align: center;
    font-size: 130%;
    content: "\f078";
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

.selectbox input.selectwraptext,
.seldatetimebox input.seldatetimewraptext
{
    cursor: pointer;
    width: 100%;
    padding-right: 32px;
}

div.halfselectwrap
{
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
}

div.smallselectwrap
{
    display: inline-block;
    width: 320px;
    vertical-align: top;
}

form div.halfselectwrap .selectbox,
form div.smallselectwrap .selectbox,
form div.smallselectwrap input,
form div.smallselectwrap div.search_input
{
    width: 100%;
}

.as_select
{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    height: 25px;
    width: calc(100% - 16px);
    cursor: pointer;    
    padding: 4px 26px 4px 8px;
    background: var(--input-bkg-color);
    border: var(--input-border-base);
    border-radius: var(--border-radius-base);
    color: var(--font-color-base);
}

.as_select:after
{
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;    
    text-align: center;
    font-size: 130%;
    content: "\f078";
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

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

/* FORM > PREVIEWS > INPUT-LIKE */

span.preview_box 
{      
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    line-height: 26px;
    padding: 0px 8px;
    cursor: pointer;
    outline: none;
}

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

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

/* FORM > INPUTS > DATETIME */

select.seldatetime
{
    width: 30%;
}

span.seldatetimewrap
{
}

span.seldatetime_buttons
{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;    
}

span.seldatetime_buttons a,
span.seldatetime_buttons .icon
{
    color: var(--icon-color);
}

/* FORM > INPUTS > CALENDAR */

div.inputcalendarwrap 
{ 
    position: relative;
    overflow: hidden;
    margin: 0px;
    width: 240px;
    box-sizing: content-box;
}

div.inputcalendarwrap *
{
    box-sizing: border-box;
}

div.inputcalendarheader 
{ 
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
}

div.inputcalendarheader a.title 
{ 
    padding: 0px 6px;
    font-size: 130%;
}

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

div.inputcalendarfooter 
{ 
    position: relative;
    margin: 8px 0px;
    text-align: center;
}

div.inputcalendarfooter a.inputcalendartime 
{ 
    display: inline-block;
    width: 32px;
}                                 

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

div.inputcalendarwrap div.rapidtop { top: 38px; }
div.inputcalendarwrap div.rapidbottom { bottom: 32px; }

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

.__rapidselector-fx-trigger
{ 
    height: 180px !important; 
}

div.inputcalendarwrap div.rapidselector a 
{ 
    display: inline-block;
    width: 33.3%;
    height: 20px;
    line-height: 16px;
    text-align: center;
    padding: 2px;
    margin: 2px 0px;
    border-radius: var(--border-radius-base);
} 

div.inputcalendarwrap div.rapidselector a.selected
{ 
    color: var(--font-color-neg); 
    background: var(--link-color);
}

div.inputcalendarwrap div.rapidselector a:hover
{
    color: var(--font-color-neg);
    background: var(--active-color);
}

div.inputcalendarwrap div.rapidselector div.rapidselector-year,
div.inputcalendarwrap div.rapidselector div.rapidselector-month,
div.inputcalendarwrap div.rapidselector div.rapidselector-minutes,
div.inputcalendarwrap div.rapidselector div.rapidselector-hours { padding-top: 8px; }

div.inputcalendarwrap div.rapidselector div.rapidselector-minutes { text-align: left; }

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

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: 184px; }

div.inputcalendarwrap div.rapidselector a.shift_prev,
div.inputcalendarwrap div.rapidselector a.shift_next { width: 24px; 
                                                       height: 84px;
                                                       background-position: center; }

div.inputcalendarwrap div.rapidselector a.shift_prev { float: left; }
div.inputcalendarwrap div.rapidselector a.shift_next { float: right; }         

table.inputcalendar
{
    width: 100%;
}

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

table.inputcalendar th 
{ 
    border-bottom: var(--row-border-base);
}

table.inputcalendar td
{ 
    cursor: pointer; 
    border-radius: var(--border-radius-base);
}

table.inputcalendar td.nomonthday
{ 
    opacity: 0.33;
}

table.inputcalendar td.selected
{ 
    color: var(--font-color-neg);
    background: var(--link-color);
}

table.inputcalendar td:hover
{ 
    color: var(--font-color-neg);
    background: var(--active-color);
}

table.inputcalendar td.nomonthday:hover
{ 
    cursor: default;
    color: unset;
    background: unset;
}

/* FORM > INPUTS > COLOR PICKER */

.palette-cell
{
    position: relative;
    cursor: pointer;
    margin: 1px;
    box-sizing: border-box;
    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 var(--bkg-color);
}

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

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

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

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

/* FORM > INPUTS > EDIT AREA */

div.editarea_box
{
    position: relative;
    display: inline-block;        
    box-sizing: border-box;
    width: calc(100% - 16px);
    background-color: var(--input-bkg-color);
    border: var(--input-border-base);
    border-radius: var(--border-radius-base);
}

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

div.editarea_wrap
{
    position: relative;
    height: 128px;
}

div.editarea 
{ 
    position: relative;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    height: 128px;
    padding: 8px;
    font-size: 110%;
    background-color: var(--input-bkg-color);
    border-radius: var(--border-radius-base);    
}

div.editarea_wrap.midarea,
div.editarea.midarea 
{
    height: 64px;
}

div.editarea_wrap.shortarea,
div.editarea.shortarea 
{
    height: 86px;
}

/* FORM INPUTS > EDIT AREA > TOOLBAR*/

div.editarea_toolbar
{
   position: relative;
   box-sizing: border-box;
   width: 100%;
   padding: 8px;
}

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

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: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: var(--border-radius-base);
    color: var(--icon-color);
}

div.editarea_toolbutton a.noicon
{
    text-align: center;
    font-size: 130%;    
}

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

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

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

.color_edit_box
{
    display: inline-block;    
}

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

.color_edit_box._color_bkg
{
    margin-left: 8px;
}

.color_edit_label
{
    margin-bottom: 8px;
    font-size: 110%;
}

/* FORM > INPUTS > INLINE MODULE */

div.module_box
{
    display: inline-block;
    border: 1px solid transparent;
    width: calc(100% - 16px);
    border-radius: var(--border-radius-base);
}

div.module_box .icon
{
    display: inline-block;
    vertical-align: top;
    line-height: 26px;
    margin-right: 4px;
    color: var(--icon-color);
}


div.module_box .as_select .icon
{
    line-height: 16px;
}

div.module_box .icon:hover
{
    color: var(--active-color);
}

.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;    
    padding-right: 8px;
    padding-bottom: 8px;
}

.module_inline_table th
{    
    white-space: nowrap;
    font-weight: normal;
    text-transform: uppercase;
    font-family: var(--font-bold);    
    border-bottom: var(--sect-border-strong);
}

.module_inline_table td
{
    vertical-align: top;
    padding-top: 8px;
}

.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
{
    width: 100%;
}

.module_inline_table td input.prefixed
{
    width: calc(100% - 42px);
}

.module_inline_table td div.prefix
{
    display: inline-block;
    width: 42px;
}

.module_inline_table td div.prefix.flag
{    
    display: flex;
    align-items: center;
    float: left;
    cursor: pointer;
}

.module_inline_table td div.prefix.flag img
{
    max-width: 100%;
}

.module_inline_table td textarea
{
    width: 100%;
    height: 60px;
}

.module_inline_table td span.stepper
{
    width: 100%;
}

.module_inline_table td .selectbox,
.module_inline_table td div.popup_box,
.module_inline_table td .as_select
{
    width: 100%;
}

/* FORM > INPUTS > ARTICLES */

textarea.article-specs
{
    display: block;
    vertical-align: top;
    margin: 0px;    
    height: 56px;
    box-sizing: border-box;
    text-transform: uppercase;    
}

/* FORM > INPUTS > TAGS */

.tags-input-wrapper
{
    position: relative;
    display: inline-block;
    width: calc(100% - 16px);
}

a.tags-input-manual-toggle
{
    position: absolute;
    bottom: 0px;
    right: 0px;    
    font-size: 12px;
    opacity: 0.5;
    color: var(--icon-color);
}

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

.tags-input-wrapper textarea
{
    width: 100%;
    height: auto;
    min-height: 56px;
    box-sizing: border-box;
    text-transform: uppercase;
}

.tags-input-container
{
    position: relative;
    box-sizing: border-box;
    display: inline-block;        
    cursor: text;
    width: 100%;
    min-height: 56px;
    padding: 3px 8px;
    background: var(--input-bkg-color);
    border: var(--input-border-base);
    border-radius: var(--border-radius-base);
}

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

.tags-input-container input
{
    border: none;
    outline: none;
    width: 33%;
    padding: 4px 0px;
    text-transform: uppercase;
}

.tags-input-container.emails-container input,
.tags-input-container.items-container input
{
    text-transform: none;
}

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

.tags-input-container .tag-item
{
    position: relative;
    display: inline-block;
    box-sizing: border-box;    
    font-size: 110%;
    white-space: nowrap;
    padding: 3px 6px;
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: var(--border-radius-base);
    background: var(--state-color-off);
    color: var(--font-color-neg);
}

.tags-input-container .tag-item
{
    text-transform: uppercase;
}

.tags-input-container.emails-container .tag-item,
.tags-input-container.items-container .tag-item
{
    text-transform: none;
}

.tags-input-container .tag-item .icon
{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: var(--font-color-neg);
}

.tags-input-container .tag-item.existing
{
    background: var(--background-dark);
    color: var(--font-color-neg);
}

.tags-input-container .tag-item.existing .icon
{
    color: var(--font-color-neg);
}

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

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

.tags-input-container .tag-item.w-val-sep
{
    margin-right: 16px;
}

.tags-input-container .tag-item.w-val-sep:after
{
    content: attr(data-valsep);
    text-align: center;
    display: block;
    position: absolute;
    vertical-align: top;
    top: 0px;
    right: -16px;
    width: 16px;
    height: 26px;
    line-height: 26px;    
    color: var(--font-color-base);
}

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

/* FORM > INPUT > AUTOCOMPLETE */

.autocomplete-box 
{
    display: none;
    box-sizing: border-box;
    opacity: 0;
    z-index: 8;
    min-width: 480px;    
    text-align: left;    
    outline: none;
    cursor: default;
    overflow-y: auto;
    max-height: 480px;
    min-height: 32px;        
    transition: var(--transition-base);
    background-color: var(--bkg-color);
    border: var(--border-light-thin);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);
}

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

.autocomplete-box div.auto-item,
.mailcontacts-list-box div.mailcontacts-list-item
{
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;  
    padding: 8px 8px;
    line-height: 26px;
    font-size: 110%;
    color: var(--font-color-base);    
}

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

.autocomplete-box div.auto-item.autocomplete-item-current,
.mailcontacts-list-box div.mailcontacts-list-item:hover
{
    background: var(--row-bkg-hover);
}

.autocomplete-box div.auto-item span.auto-remove
{
    position: absolute;
    right: 2px;
    top: 8px;
}

.autocomplete-box div.auto-item u,
.mailcontacts-list-box div.mailcontacts-list-item u
{
    float: left;    
    display: inline-block;
    box-sizing: border-box;
    margin-right: 8px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 100%;
    text-decoration: none;
    color: var(--font-color-neg);
    background-color: var(--state-color-off);
}

.autocomplete-box div.auto-item em,
.mailcontacts-list-box div.mailcontacts-list-item em
{
    display: block;    
    margin-left: 34px;
    font-size: 100%;
    line-height: 16px;
    font-style: normal;
    color: var(--label-color);
}

.autocomplete-box div.auto-item i,
.mailcontacts-list-box div.mailcontacts-list-item i
{
    position: absolute;
    right: 8px;
    bottom: 0px;
    display: block;
}

.autocomplete-box div.auto-item i:before,
.mailcontacts-list-box div.mailcontacts-list-item i:before
{
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;    
    font-size: 16px;
    font-style: normal;
    opacity: 0.25;
    font-family: var(--icon-font);
}

.autocomplete-box div.auto-item i[data-role="1"]:before { content: "\f508"; }
.autocomplete-box div.auto-item i[data-role="2"]:before { content: "\f275"; }
.autocomplete-box div.auto-item i[data-role="3"]:before { content: "\f06e"; }
.autocomplete-box div.auto-item i[data-role="8"]:before { content: "\f007"; }
.autocomplete-box div.auto-item i[data-role="9"]:before { content: "\f505"; }

.tags-input-container .tag-item u
{
    float: left;    
    display: inline-block;
    box-sizing: border-box;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 70%;
    text-align: center;
    border-radius: 100%;
    text-decoration: none;
    color: var(--font-color-neg);
    background-color: var(--state-color-off);
}

.tags-input-container .tag-item em
{
    display: none;
}

.tags-input-container .tag-item i
{
    display: none;
}

/* FORM > INPUTS > CONTACTS */

.anag_contact_box
{
    width: 100%;
}

.anag_contact_item,
.anag_contact_add
{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 50%;
    padding: 8px;
}

.anag_contact_add
{    
    min-height: 336px;
    border-radius: var(--border-radius-mid);
    border: var(--border-active-drop);
}

.anag_contact_add a
{
    display: block;
    position: relative;
    min-height: 320px;
    line-height: 320px;
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    color: var(--font-color-base);
}

.anag_contact_add a:before
{
    content: "\f067";
    display: block;
    position: absolute;
    top: 76px;
    left: calc(50% - var(--icon-dim-xl) / 2);
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-family: var(--icon-font);
    font-size: var(--icon-size-xl);
}

.anag_contact_add:hover
{
    border-color: var(--active-color);
}

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

.anag_contact_title
{
    position: relative;
    margin-bottom: 16px;
    border-bottom: var(--sect-border-strong);    
}

.anag_contact_title input
{
    width: calc(100% - 80px);
    padding: 4px 0px 4px 0px;
    background: transparent;
    font-size: 150%;
    border: none;
    text-transform: uppercase;
}

a.anag_contact_default
{
    position: absolute;
    right: 36px;    
}

a.anag_contact_default .icon
{
}

a.anag_contact_default.is_default .icon
{
    color: var(--state-color-warning);
}

.anag_contact_remove
{
    position: absolute;
    right: 8px;
}

a.anag_contact_link
{
    position: relative;
    display: inline-block;
}

a.anag_contact_link div
{
    position: absolute;
    top: -6px;
    right: -8px;
    display: block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 100%;
    font-size: 10px;
    background-color: var(--badge-color-off);
    color: var(--font-color-neg);
}

/* MEDIA > PLAYERS */

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

.videowrap
{
    background-color: var(--tooltip-bkg-color);
}

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

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

.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
{
}

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

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

.mediaseektooltip
{            
    text-align: center;
    position: absolute;    
    left: 0px;
    top: -32px;
    margin-left: -32px;
    width: 64px;
    height: 32px;
    line-height: 32px;
    font-size: 110%;
    color: var(--font-color-neg);
    background-color: var(--background-dark);
    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: 8px !important;
    background: var(--state-color-off);
}

.mediactrl
{        
    text-align: left;
    margin-top: 16px;
}

.mediactrl *
{
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
}

.mediactrl a
{
    cursor: pointer;
}

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

.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-left: 16px;
    vertical-align: top;
}

div.main_movie .mov_wrap .mediavolumewrap a.icon,
div.main_movie .mov_wrap .mediavolumewrap .icon
{
    display: inline-block;
}

/* MEDIA PLAYERS > PREVIEW */

.preview .videowrap
{
    padding: 0px;
    width: 100%;
    height: 192px;
}

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

/* FORM > BUTTON BAR */

div.buttonbar
{ 
    width: 100%;
    margin-top: 32px;
    text-align: center;
}

div.buttonbar.bottom-docked
{
    position: fixed;
    bottom: 0px;
    margin-top: 0px;
    padding: 24px;
    z-index: 4;
    background: var(--bkg-color);
    border-top: var(--border-light-fat);
    box-shadow: var(--shadow-base);    
}

div.buttonbar a,
div.buttonbar button,
div.buttonbar input
{ 
    margin: 0px 6px;
}

/* FORM > BUTTONS */

.btn,
a.btn
{
    color: var(--font-color-neg);
    text-align: center;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    min-width: 200px;    
    height: 32px;
    line-height: 28px;
    padding: 0px 16px;
    text-transform: uppercase;
    text-decoration: none;    
    background: var(--background-dark);
    border: 2px solid var(--background-dark);
    border-radius: var(--border-radius-mid);
    
}

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

.btn-cancel,
a.btn-cancel,
.btn-close,
a.btn-close,
.btn-back,
a.btn-back,
.btn-loop,
a.btn-loop,
.btn-qrcode,
a.btn-qrcode,
.btn-prices,
a.btn-prices
{
    background: var(--bkg-color);
    color: var(--font-color-base);
}

.btn-cancel:hover,
a.btn-cancel:hover,
.btn-close:hover,
a.btn-close:hover,
.btn-back:hover,
a.btn-back:hover,
.btn-loop:hover,
a.btn-loop:hover,
.btn-qrcode:hover,
a.btn-qrcode:hover,
.btn-prices:hover,
a.btn-prices:hover
{
     background: var(--bkg-color);
     color: var(--active-color);
}

.btn-loop.active,
a.btn-loop.active,
.btn-prices.active,
a.btn-prices.active
{
    background: var(--active-color);
    color: var(--font-color-neg);
    border-color: var(--active-color);
}

/* FORM > BUTTONS > SPECIFIC BUTTONS */

.btn-submit:before,
a.btn-submit:before,
.btn-continue:before,
a.btn-continue:before,
.btn-clone:before,
a.btn-clone:before,
.btn-cancel:before,
a.btn-cancel:before,
.btn-back:before,
a.btn-back:before,
.btn-details:before,
a.btn-details:before,
.btn-print:before,
a.btn-print:before,
.btn-download:before,
a.btn-download:before,
.btn-send:before,
a.btn-send:before,
.btn-qrcode:before,
a.btn-qrcode:before,
.btn-prices:before,
a.btn-prices:before,
.btn-filter:before,
a.btn-filter:before,
.btn-search:before,
a.btn-search:before,
.btn-calc:before,
a.btn-calc:before,
.btn-loop:before,
a.btn-loop:before,
.btn-tools:before,
a.btn-tools:before,
.btn-playdemo:before,
a.btn-playdemo:before
{        
    font-size: 14px;
    vertical-align: top;
    padding: 0px 8px;
    font-family: var(--icon-font);
}

.btn-submit:before,
a.btn-submit:before
{
    content: "\f00c";    
}

.btn-continue:before,
a.btn-continue:before
{
    content: "\f054";
}

.btn-clone:before,
a.btn-clone:before
{
    content: "\f24d";
}

.btn-cancel:before,
a.btn-cancel:before
{
    content: "\f00d";   
}

.btn-back:before,
a.btn-back:before
{
    content: "\f060";    
}

.btn-details:before,
a.btn-details:before
{
    content: "\f00e";
}

.btn-print:before,
a.btn-print:before
{
    content: "\f02f";    
}

.btn-download:before,
a.btn-download:before
{
    content: "\f019";
}

.btn-send:before,
a.btn-send:before
{
    content: "\f1d8";
}

.btn-qrcode:before,
a.btn-qrcode:before
{
    content: "\f029";
}

.btn-prices:before,
a.btn-prices:before
{
    content: "\f155";
}

.btn-filter:before,
a.btn-filter:before
{
    content: "\f0b0";
}

.btn-search:before,
a.btn-search:before
{
    content: "\f002";
}

.btn-calc:before,
a.btn-calc:before
{
    content: "\f1ec";
}

.btn-loop:before,
a.btn-loop:before
{
    content: "\f2f9";
}

.btn-tools:before,
a.btn-tools:before
{
    content: "\f0ad";
}

.btn-playdemo:before,
a.btn-playdemo:before
{
    content: "\f51c";
}

/* FORM > BUTTONS > ICONS */

div.iconsbuttonbar
{ 
    box-sizing: border-box;
    width: 100%;
    margin: 16px 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    row-gap: 8px;
    overflow: visible;
}

div.iconsbuttonbar.alignleftbar
{
    justify-content: start;
}

div.iconsbuttonbar.distanced
{
    margin-top: 48px;
}

.bar_col_1
{
    width: 100%;
}

.bar_col_2
{
    width: 49%;
}

.bar_col_1.wmbottom,
.bar_col_2.wmbottom
{
    margin-bottom: 16px;
}

.sender_col_btn,
.sender_col_input,
.recipient_col_btn,
.recipient_col_input,
.body_col_input
{
    display: inline-block;
    vertical-align: top;
}

.sender_col_btn,
.recipient_col_btn
{
    width: 56px;
    margin-right: 8px;
}

.sender_col_input,
.recipient_col_input
{
    width: calc(100% - 64px);
}

.body_col_input
{
    width: 100%;
}

.sender_col_btn a,
.recipient_col_btn a
{
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;    
    border: 1px solid #C6C6C6;
    font-size: 110%;
    border-radius: var(--border-radius-base);
    color: var(--font-color-base);
}

.sender_col_btn a
{
    height: 26px;
    line-height: 26px;
}

.recipient_col_btn a
{
    height: 56px;
    line-height: 56px;
}

.mailcontacts-bar
{
    margin-top: 8px;
}

.mailcontacts-bar a
{
    display: inline-block;
    vertical-align: top;    
    line-height: 22px;
    margin-right: 16px;
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--font-color-base);
}

.mailcontacts-bar a .icon
{
    display: inline-block;
    vertical-align: top;    
    /*color: var(--link-color);*/
}

.mailcontacts-bar a:hover,
.mailcontacts-bar a:hover .icon
{
    color: var(--active-color);
}


span.bracketaddr
{
    opacity: 0.65;
}

span.bracketaddr:before
{
    content: "<";
}

span.bracketaddr:after
{
    content: ">";
}

div.icons-row-break
{
    width: 100%;
    height: 0px;
}

button.btn-icon
{
    position: relative;
    display: inline-block;
    width: 72px;
    height: 72px;
    text-align: center;
    vertical-align: top;
    border: none;
    background: transparent;    
    cursor: pointer;     
}

button.btn-icon:before
{
    display: none;        
}

button.btn-icon .icon
{
   margin: auto;
}

button.btn-icon em
{
    display: block;
    margin-top: 12px;
    font-family: var(--font-base);
    font-style: normal;
    font-size: 80%;
    letter-spacing: 0px;
}

button.btn-icon:hover em
{
    color: var(--font-color-neg);
}

button.btn-icon span
{
    display: none;
    box-sizing: border-box;
    position: absolute;
    width: 320px;
    left: -124px;
    top: -32px;
    z-index: 2;
    padding: 6px;
    text-align: center;
    text-transform: none;
    font-size: 120%;
    color: var(--active-color);    
}

button.btn-icon .icon
{
   margin: auto;
}

button.btn-icon.selected
{
    color: var(--font-color-neg);
    background: var(--link-color);
}

button.btn-icon.selected .icon,
button.btn-icon.selected em
{
    color: var(--font-color-neg);
}

button.btn-icon:hover span
{
    display: block;
}

button.btn-icon:hover,
button.btn-icon.selected:hover
{
    color: var(--font-color-neg);
    background: var(--active-color);
}

button.btn-icon:hover .icon
{
    color: var(--font-color-neg);
}

/* FORM > BUTTONS > ICONS > FIXED BAR */

div.iconsbuttonbar.fixedbar
{
    width: calc(100% - 36px);
    margin: 0px auto;
    padding: 46px 8px 8px 8px;
}

div.iconsbuttonbar.fixedbar button.btn-icon span
{
    display: none;
    position: fixed;
    width: 100%;
    top: auto;
    bottom: 90px;
    left: 0px;
    text-align: center;    
    z-index: 3;    
    font-size: 130%;
    color: var(--active-color);
}

div.iconsbuttonbar.fixedbar button.btn-icon:hover span
{
    display: block;
}

/* FORM > BUTTONS > ICONS > SPACED BAR */

div.iconsbuttonbar.spacedbar
{
    /*padding-bottom: 32px;*/
    /*row-gap: 24px;*/
}

div.iconsbuttonbar.spacedbar button.btn-icon
{
   width: 128px;  
}

div.iconsbuttonbar.spacedbar.wide button.btn-icon
{
   width: 192px;   
}

div.iconsbuttonbar.spacedbar button.btn-icon span,
div.iconsbuttonbar.spacedbar button.btn-icon:hover span
{
    display: none;
}

/* TITLE BUTTONS */

a.title-btn
{
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
    padding: 0px 12px;
    background: var(--background-dark);
    color: var(--font-color-neg);
    text-align: center;
    text-transform: uppercase;
    border-radius: 36px;
}

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

/* FIXED BUTTONS > WRAPPER */

.fixed-buttons-wrap
{
    position: fixed;
    bottom: 16px;
    right: 16px;    
    z-index: 3;
    display: block;
}

.fixed-buttons-wrap.w-margin
{
    right: 80px;
}

.fixed-buttons-wrap.l-side
{
    right: auto;
    left: 16px;
}

/* FIXED BUTTONS > BUTTONS */

.fixed-btn
{
    display: inline-block;
    box-sizing: border-box;
    width: 58px;
    height: 58px;
    border-radius: 100%;
    text-align: center;    
    cursor: pointer;
    overflow: hidden;
    z-index: 3;
    background: var(--link-color);
    color: var(--font-color-neg);
    border: var(--border-light-fat);
    box-shadow: var(--shadow-base);
}

.fixed-btn:before
{
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 54px;
    font-family: var(--icon-font);
    font-size: var(--icon-size-mid);
    color: var(--font-color-neg);
}

.fixed-btn.extended
{
    width: auto;
    padding: 0px 16px;
    border-radius: 32px;
}

.fixed-btn.extended:before
{
    width: auto;
}

.fixed-btn.extended .label
{
    display: inline-block;
    vertical-align: top;
    margin-left: 12px;
    line-height: 54px;
    text-transform: uppercase;
    font-size: 110%;
    color: var(--font-color-neg);
}

.fixed-btn:hover
{
    background: var(--active-color);
    border-color: var(--active-color);
}

.fixed-btn.add:before
{
    content: "\f067";
}

.fixed-btn.more:before
{
    content: "\f142";
}

.fixed-btn.back,
.fixed-btn.top
{
    background: var(--bkg-color);    
}

.fixed-btn.back:before,
.fixed-btn.top:before
{
    color: var(--icon-color);
}

.fixed-btn.back:hover:before,
.fixed-btn.top:hover:before
{
    color: var(--active-color);
}

.fixed-btn.back:before { content: "\f060"; }
.fixed-btn.top:before { content: "\f062"; }

/* FIXED BUTTONS > BADGE */

.fixed-buttons-wrap .badge
{
    position: absolute;
    top: -13px;
    right: -8px;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 100%;    
    cursor: pointer;
    z-index: 2;
    background: var(--badge-color-off);    
    box-shadow: var(--shadow-base);
}

.fixed-buttons-wrap .badge:hover
{
    background: var(--active-color);
}

.fixed-buttons-wrap .badge .icon
{
    margin: auto;
    line-height: 32px;
    color: var(--font-color-neg);
}

/* FORM > MORE FUNCTIONS */

.more_functions_wrap
{
    position: fixed;
    bottom: -146px;
    display: block;
    width: 100%;
    background: var(--bkg-color);
    border-top: var(--border-light-fat);
    box-shadow: var(--shadow-base);
    z-index: 4;
    transition: all 0.3s;
}

.more_functions_wrap.more_functions_show
{
    bottom: 0px;
}

.more_functions_btn_hide
{
    position: absolute;
    right: 10px;
    top: 10px;    
    z-index: 4;
}

.more_functions_btn_hide .icon
{
    font-size: var(--icon-size-large);
}

/* ATTACHMENTS */

a.attachlink,
a.reminderlink
{
    position: relative;    
    display: inline-block;
    margin: 2px;
}

a.attachlink div.badge,
a.reminderlink div.badge
{
    position: absolute;
    top: -8px;
    right: -6px;
    display: block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 100%;
    font-size: 10px;
    background-color: var(--badge-color-off);
    color: var(--font-color-neg);
}

div.attach_box
{ 
    margin-left: auto;  
    margin-right: auto; 
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

div.attach_item
{ 
   position: relative;
   display: inline-block;
   vertical-align: top;
   min-width: 240px;
   min-height: 160px;
   border: var(--row-border-base);
   background: var(--row-bkg-even);
   border-radius: var(--border-radius-base);;
}
                  
div.attach_title
{ 
    width: calc(100% - 48px);
    vertical-align: top;
    margin-bottom: 8px;
    padding: 0px 8px;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 110%;
} 

div.attach_title span.invisible
{
    position: absolute;
    top: 8px;
    right: 32px
}

div.attach_ctrls
{
    position: absolute;
    top: 8px;
    right: 6px;
}
                   
div.attach_preview,
div.attach_notes
{ 
    padding: 4px;
}

div.attach_preview
{ 
    display: inline-block;
}

div.attach_preview img
{ 
    border-radius: var(--border-radius-base);
}

div.attach_notes 
{ 
    display: inline-block; 
    width: 50%;
    vertical-align: top;
}

div.attach_ctrls .icon
{ 
    display: inline-block;
}

/* ATTACHMENTS > SELECTION */

.attachselect
{
    width: 100%;
    padding-top: 4px;
}

.attachselect-item
{
    display: inline-block;
    vertical-align: top;
    width: 32%;
    margin-right: 8px;
    margin-bottom: 16px;
}

.attachselect-item .title
{
    margin-bottom: 16px;
}

.attachselect-item .title span
{
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 32px);
    padding-left: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 100%;
    letter-spacing: 1px;
}

.attachselect-item .prevwrap
{
    margin-left: 24px;
}

.attachselect-item .prevwrap embed
{
    width: calc(100% - 32px);
}

/* PACKAGING */

div.aux_info 
{ 
  display: inline-block;
  white-space: nowrap;
  box-sizing: border-box;
}

div.aux_info span:first-child
{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

div.aux_info span:last-child
{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;   
}

div.aux_info span.aux_element
{ 
    display: inline-block;
    margin-right: 1px;
    width: 24px;
    height: 16px;
    line-height: 16px;
    padding: 4px 2px;  
    text-align: center;
    white-space: nowrap;
    color: var(--font-color-neg);
    background: var(--state-color-off);
}

div.aux_info span.aux_on 
{ 
    background: var(--state-color-success);
}

div.aux_info.aux_ext span.aux_element
{
    width: auto;
    text-transform: uppercase;
}

/* LOGO > EDIT */

span.logoselect
{ 
    position: relative; 
    display:inline-block;
    margin-right: 6px;
    vertical-align: top;
}

span.logoselect span.logocheckwrap
{ 
    position: absolute;
    top: 4px;
    left: 4px; 
    padding: 0px;
    border: var(--sect-border-strong);    
    border-radius: var(--border-radius-base);
    background: var(--bkg-color);
}

span.logoselect span.logocheckwrap input[type=checkbox]
{ 
    outline: none;
    float: left;
    margin: 0px;
    padding: 0px;
} 

span.logoselect img
{
    display: block;
    margin-bottom: 8px;
    margin-right: 8px;
    width: 164px;
    height: 164px;
    object-fit: cover;
    border-radius: var(--border-radius-base);
    border: var(--sect-border-strong);    
}

span.logoselec.removed img
{ 
    border-color: var(--state-color-fail);
}

div.logoshow .pic_wrap
{
    display: inline-block;
    width: 46%;
    margin-right: 8px;
    margin-bottom: 8px;
}

div.logoshow .pic_wrap img
{
}

/* STATISTICS > CHOICE */

.stats-choice-box
{        
    position: relative;
    margin: auto;
    display: flex;    
    align-items: center;
    justify-content: center;
    width: calc(100vw - 32px);
    gap: 16px;
}

.stats-choice-item
{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    overflow: hidden;
    width: 50%;
    height: 160px;
    padding: 8px;
    border-radius: var(--border-radius-mid);
    border:var(--border-light-fat);
}

.stats-choice-item a
{
    display: block;
    position: relative;
    height: 188px;
    line-height: 188px;
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    color: var(--icon-color);
}

.stats-choice-item a:before
{    
    display: block;
    position: absolute;
    top: 8px;
    left: calc(50% - var(--icon-dim-xl) / 2);
    width: var(--icon-dim-xl);
    height: var(--icon-dim-xl);
    line-height: var(--icon-dim-xl);
    font-family: var(--icon-font);
    font-size: var(--icon-size-xl);
}

.stats-choice-item.stats-articles a:before
{
    content: "\f03a";
}

.stats-choice-item.stats-customers a:before
{
    content: "\f508";
}

.stats-choice-item:hover
{
    border-color: var(--active-color);
}

.stats-choice-item:hover a
{
    color: var(--active-color);
}

/* STATISTICS > REPORT */

div.stats-value
{
    font-size: 120%;
}

div.stats-value.positive
{
    color: var(--state-color-success);
}

div.stats-value.negative
{
    color: var(--state-color-fail);
}

div.stats-details
{
    margin: 5px 0px;
}

div.stats-details span.info
{
    margin-left: 8px;
}

div.stats-details span.info span.amount
{
    display: inline-block;
}

div.stats-details span.value
{
    margin-left: 8px;
}

div.stats-details span.value:before
{
    content: "(";
    font-family: var(--font-base);
}

div.stats-details span.value:after
{
    content: ")";
    font-family: var(--font-base);
}

/* STATES */

.status
{
    display: inline-block;
    width: 18px;
    height: 16px;
    line-height: 16px;
    padding: 4px;
    text-align: center;
    border-radius: 100%;
    background: var(--state-color-off);
    color: var(--font-color-neg) !important;
}

.status-accredito-no { }
.status-accredito-yes { background: var(--state-color-success); }

.status-shipacc-no { }
.status-shipacc-yes { background: var(--state-color-success); }

.status-sent-no {}
.status-sent-yes { background: var(--state-color-success); }
.status-sent-changed { background: var(--state-color-fail); }

.status-proforma-yes { background: var(--state-color-fail); }
.status-proforma-no { background: var(--state-color-warning); }
.status-proforma-noneed { }
.status-proforma-paid { background: var(--state-color-success); }

.status-discount-on { background: var(--state-color-success); }
.status-discount-off { }

.status-enabled,
.status-disabled
{    
    padding: 4px;
    white-space: nowrap;
    letter-spacing: 1px;
    border-radius: var(--border-radius-base);
    background: var(--state-color-off);
    color: var(--font-color-neg) !important;
}

.status-enabled
{
    background: var(--state-color-success);
}

/* NOTES */

.article-notes,
.order-notes,
.order-privatenotes,
.add-notes,
.add-privatenotes,
.add-spec,
.generic-badge
{
    margin-right: 2px;
    box-sizing: border-box;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;    
    white-space: nowrap;
    text-align: center;
    vertical-align: top;
    border-radius: 100%;
    background: var(--background-dark);
    color: var(--font-color-neg) !important;
}

.add-notes,
.add-privatenotes,
.add-spec
{
    font-family: var(--font-bold);
    font-size: 17px;    
}

.add-spec
{
    vertical-align: super;
}

.basic_caption .article-notes,
.basic_caption .order-notes,
.basic_caption .order-privatenotes,
.basic_caption .generic-badge
{
    margin-left: 8px;
}

/* NOTES > ASYNC */

.extended-notes-title
{
    display: block;
    padding: 4px 0px;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: var(--font-color-base);
    border-bottom: var(--sect-border-strong);
    font-family: var(--font-bold);
}

ul.extended-notes
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

ul.extended-notes li
{
    position: relative;
    padding: 8px;    
    font-size: 110%;
    border-bottom: var(--row-border-base);
}

ul.extended-notes li:nth-child(even)
{    
    background-color: var(--row-bkg-even);
}

ul.extended-notes li:nth-child(odd)
{
    background-color: var(--row-bkg-odd);
}

ul.extended-notes li div.datetime
{
    margin-bottom: 8px;
    color: var(--font-color-light);    
}

.extended-action-editdel
{
    position: absolute;
    top: 4px;
    right: 2px;
}

.extended-action-editdel .icon
{
    display: inline-block;
}

.extended-action-add
{
    display: block;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    font-size: 0px;
    border-radius: 100%;
    background: var(--link-color);
    color: var(--font-color-neg);
    border: var(--border-light-fat);
    box-shadow: var(--shadow-base);
}

.extended-action-add:before
{
    content: "\f067";
    display: block;    
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: var(--icon-size-base);
    font-family: var(--icon-font);
    color: var(--font-color-neg);    
}

.extended-action-add:hover
{
    background: var(--active-color);
}

/* I-FRAME */      
             
.popupframe
{ 
    display: block;
    position: fixed;
    width: 92%;
    height: 92%;
    left: 4%;
    top: 4%;
    border: none;    
    z-index: 11;
    opacity: 0;
    transform: translateX(-200%);    
    border-radius: var(--border-radius-base);
}
                  	
.popupframe-fx
{ 
    transition: all 0.4s 0s;
}
                  	
.popupframe-fx-trigger
{ 
  	transform: translateY(0);
  	opacity: 1;
 }

.fullscreenframe,
.overlayframe
{ 
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 12;
    border: none;
}

/* I-FRAME > MODAL BACKGROUND */

#modalback
{ 
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;    
    z-index: 8;
    background: var(--background-modal);
}

/* LOADING */

@keyframes spin 
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* LOADING > SMALL */

.loadingsmall
{
    display: block;
    overflow: hidden;
    width: var(--icon-dim-base);
    height: var(--icon-dim-base);    
}

.loadingsmall:after
{
    content: " ";
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: 100%;    
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border: 4px solid var(--background-light);
    border-top: 4px solid var(--active-color);
}

/* 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(--font-color-neg);
}

div.loading_page:after 
{
    /*
    content: "\f110";
    position: absolute;
    display: block;        
    animation: spin 2s infinite linear;
    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);        
    */

    content: " ";
    position: absolute;
    top: calc(50% - var(--icon-size-xl) / 2);
    left: calc(50% - var(--icon-size-xl) / 2);
    display: block;
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    line-height: var(--icon-size-xl);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border: 6px solid var(--background-light);
    border-top: 6px solid var(--active-color);    
}

/* LOADING > PAGE > MESSAGE */

div.loading_msg
{
    width: 100%;    
    text-align: center;    
    letter-spacing: 1px;
    padding-bottom: 128px;
    font-size: 180%;
}

div.loading_pageprog div.loading_msg
{
    padding-bottom: 16px;
}

/* LOADING > OBJECTS */

div.loading_layer 
{ 
    z-index: 2;
    cursor: wait;
    background: var(--background-loader);
    border-radius: 2px;
}

div.loading_layer div.spinner
{
    width: 48px;
    height: 48px;
    line-height: 48px;
}

div.loading_layer div.spinner:before
{
    content: " ";
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: 100%;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border: 6px solid var(--background-light);
    border-top: 6px solid var(--active-color);    
}

div.loading_layer.loading_input
{
    border-radius: var(--border-radius-base);
}

div.loading_layer.loading_input div.spinner
{
    margin-top: 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);
}

/* PROMPT BOX */

.promptbox 
{
    z-index: 9;
    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(--bkg-color);
    border-radius: var(--border-radius-base);
    border: var(--border-light-thin);
    box-shadow: var(--shadow-base);  
}

.promptbox-fx 
{
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.3s;
}

.promptbox-fx-trigger
{
    opacity: 1;
    transform: scale(1);
}

#promptheader 
{
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    cursor: move;
    text-transform: uppercase;
    padding: 8px;  
    border-radius: var(--border-radius-base);
}

#promptclose
{
    position: absolute;
    top: 8px;
    right: 8px;
}

#promptclose:before
{
    content: "\f00d";
    font-family: var(--icon-font);
    font-size: var(--icon-size-small);
    color: var(--icon-color);
}

.prompt_content
{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;  
    text-align: center;
    margin-top: 16px;
    padding: 8px 24px;
    font-size: 130%;
}

.prompt_content > input 
{ 
    width: 100%;
    margin-top: 16px;
}

.promptbody.prompt .prompt_content .msg,
.promptbody.text .prompt_content .msg
{
    width: 100%;
    text-align: left;    
}

.promptbox div.buttonbar
{
    padding: 8px 0px 32px 0px;
}

.prompt_content select { cursor: pointer; }

/* TOOLTIPS */

.tooltip-content { display: none !important; }
.tooltip { display: none !important; }

/* FORM > POP-UP */                     

div.popup_box
{ 
    display: inline-block;
    width: 100%;
}

div.popup_box > span.popup_buttons a
{  
    display: inline-block;
    margin-top: 2px;
    margin-left: 4px;
    vertical-align: top;
    color: var(--icon-color);
}

input.popup_manualtxt
{ 
    width: calc(100% - 104px);
}

input.popup_manualtxt.readonly
{ 
    text-align: left;
    background: var(--input-bkg-color);
    color: var(--font-color-base);
}

div.popup_box.popup_box_no_manual .preview_box
{
    display: none;
}

/* FORM > PREVIEWS */

.preview
{ 
    display: block;
    margin-top: 8px;
    margin-left: 0px;
    padding: 0px;
}

/* FORM > PREVIEWS > GRID */

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

.preview-item .preview-fname
{
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 20px);
    padding: 8px 0px;
}

.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: 20px;
    height: 20px;
    line-height: 20px;
    color: var(--icon-color);
}

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

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

.preview-item embed
{
    width: 100%;
}

.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 .img,
.preview-item .generic,
.preview-item .removed 
{  
    display: block;
    width: 100%;    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--preview-height-base);
    border-radius: var(--border-radius-base);
}

.preview-item .__bkgcontain .img
{
    background-size: 90%;
}

.preview-item .__imgactive .img
{
    cursor: pointer;
}

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

a.preview-pdf-show
{ 
    display: block; 
    box-sizing: border-box;
    width: 100%;
    padding: 3px;
    text-align: center;        
    letter-spacing: 1px;    
    text-transform: uppercase;
    color: var(--font-color-neg);
    background: var(--background-dark);
}

/* FORM > PROGRESS > CIRCLE */

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

.progress-circle .back
{    
    stroke-width: 8px;
    stroke: var(--state-color-off);
}

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

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

.progress-circle .label
{
    font-size: 18px;
    fill: var(--font-color-base);
}

.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 > UPLOAD */

input[type=file]
{ 
   display: none;
   margin: 0px;
   padding: 0px;
}

div.upload_box
{ 
    display: inline-block;
    width: calc(100% - 16px);
    margin-right: 16px;
}

/* 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 > DRAG & DROP */                                       

div.dragtargetbox
{
    position: relative;
    width: calc(100% - 16px);    
    padding: 8px 8px 32px 8px;
    box-sizing: border-box;
    min-height: var(--preview-height-base);
    border-radius: var(--border-radius-mid);
    border: var(--border-active-drop);
}

div.dragtargetbox span.dragtargetmsg
{
    position: absolute;
    width: 100%;
    bottom: 8px;
    left: 0px;
    text-align: center;    
    text-transform: uppercase;
    font-size: 110%;
    color: var(--font-color-light);
}

div.upload_layer 
{ 
    display: block;    
    background: var(--background-modal);
    text-align: center;
    z-index: 3;    
    min-height: 360px;
}

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

a.upload_layer_close
{ 
    display: block;
    z-index: 2;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 26px;
    color: var(--font-color-neg);
}

a.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% - 16px);
   height: 32px;
   line-height: 32px;
   padding: 0px 8px;
   font-size: 170%;
   font-family: var(--font-bold);
   color: var(--font-color-neg);
}

.upload_layer_box .upload_layer_msg div.upload_loading
{
    display: inline-block;
    margin-right: 16px;
    color: var(--font-color-neg);
}

.upload_layer_box ul.upload_queue 
{
    overflow-y: scroll;
    height: calc(100% - 56px);    
}

.upload_layer_box .upload_layer_buttons
{ 
    text-align: center !important;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 56px;
    padding-top: 16px;
}

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

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

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

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

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

div.upload_layer .progress-circle .back
{
    stroke: #FFFFFF;
}

/* POP-IT > MENUS & SELECTS */

.popitmenu,
.popitselect
{
    box-sizing: content-box;
    text-align: left;  
    min-width: 300px;
    max-height: 460px;  
    z-index: 99;
    opacity: 0;
    padding: 4px;    
    background-color: var(--bkg-color);
    border: var(--border-light-thin);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);
}

.popitmenu-itemswrap,
.popitselect-itemswrap
{
    box-sizing: border-box;
    max-height: 460px;
    max-width: 460px;
    min-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.popitmenu a,
.popitselect a,
a.popit-like
{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 4px;
    text-decoration: none;
    height: 24px;
    line-height: 24px;    
    margin: 0px;
    font-size: 110%;    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 3px;
    color: var(--font-color-base);
}

.popitmenu a:before,
.popitselect a:before,
a.popit-like:before
{
    line-height: 24px;
    padding-left: 4px;
}

a.popit-like
{
    position: relative;   
}

a.popit-like.full
{
    padding-left: 4px;
}

.popitmenu a.side_icon,
.popitselect a.side_icon
{
    background-position: 6px center;
}

.popitmenu a:hover,
.popitselect a:hover,
.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);
    color: var(--font-color-neg) !important;
}

.popitmenu a:hover:before,
.popitselect a:hover:before,
a.popit-like:hover:before,
.popitmenu a[data-focus="1"]:before,
.popitselect a[data-focus="1"]:before
{
    color: var(--font-color-neg) !important;
}

a.popit-like.selected:before
{
    content: "\f00c";
    position: absolute;
    top: 0px;
    left: 8px;
    display: block;
    font-family: var(--icon-font);    
}

.popitmenu a:hover .icon,
.popitselect a:hover .icon
{
    color: var(--font-color-neg);
}

/* POP-IT > FX'S */

.popitmenu-fx
{
    transition: opacity 0.3s ease-in-out, height 0.3s;
}

.popitmenu-fx-trigger
{
    opacity: 1;
}

.popitselect-fx
{
    transition: opacity 0.3s ease-in-out;
}

.popitselect-fx-trigger
{
    opacity: 1;
}

/* POP-IT > BALOON */

.popitbaloon,
.popiteditor
{
    box-sizing: content-box;
    text-align: left;
    padding: 4px;
    opacity: 0;
    z-index: 99;
    background: var(--bkg-color);  
    border: var(--border-light-thin);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);    
}

.popitbaloon-fx
{
    transition: opacity 0.3s ease-in-out, height 0.3s;
}

.popitbaloon-fx-trigger
{
    opacity: 1;
}

.popiteditor-fx
{
    transition: opacity 0.3s ease-in-out, height 0.3s;
}

.popiteditor-fx-trigger
{
    opacity: 1;
}

/* POP-IT > BALOON > WRAPPERS */

.popiteditor-itemswrap
{
    position: relative;
    width: 520px;
    height: 360px;    
}

.popiteditor-itemswrap input
{
    width: 100%;
}

.popitbaloon-asyncwrap,
.popitbaloon-expandwrap,
.ordernotes-asyncwrap
{
    position: relative;
    width: 480px;
    height: 400px;
    overflow-y: auto;
}

.ordernotes-asyncwrap
{
    position: unset;
}

.popitbaloon-expandwrap
{
    height: 80px;
}

.popitbaloon-expandwrap .close,
.popitbaloon-expandwrap .copy
{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    color: var(--icon-color);
}

.popitbaloon-expandwrap .copy
{
    right: 24px;
}

.popitbaloon-expandwrap .close:hover,
.popitbaloon-expandwrap .copy:hover
{
    color: var(--active-color);
}

.popitbaloon-expandwrap .title
{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 2px 4px;
    text-align: left;  
    text-transform: uppercase;        
}

.popitbaloon-expandwrap .content
{
    box-sizing: border-box;
    margin-top: 8px;
    padding: 2px 4px;
    overflow-wrap: break-word;    
    font-size: 120%;
}

div.qrcodebaloon-asyncwrap
{
    width: 240px;
}

div.qrcodebaloon-asyncwrap a.qrlink
{
    box-sizing: border-box;
    display: block;
    margin: auto;
    width: 94%;
    padding: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
}

div.qrcodebaloon-asyncwrap .qrwrap
{
    display: block;
    margin: auto;
    width: 200px;
    height: 200px;
}

div.qrcodebaloon-asyncwrap img.qrcode
{
    width: 100%;
    height: 100%;
}

div.qrcodebaloon-asyncwrap a.qrdownload
{
    display: block;
    margin: 12px auto 4px auto;
    width: 50%;
    text-align: center;
    font-size: 130%;
    text-transform: uppercase;
    color: var(--link-color);
}

div.qrcodebaloon-asyncwrap a.qrdownload .icon
{
    display: inline-block;
    vertical-align: top;
    color: var(--link-color);
}

div.qrcodebaloon-asyncwrap a.qrdownload:hover,
div.qrcodebaloon-asyncwrap a.qrdownload:hover .icon
{
    color: var(--active-color);
}

div.popitaccount-asyncwrap
{
    width: 432px;
    height: 280px;
    overflow: auto;
}

div.popitfilepreview-asyncwrap
{
    width: 432px;
    height: 320px;
    overflow: hidden;
}

div.popitmorefunc-asyncwrap
{
    position: relative;
    width: 300px;
    height: auto;
    overflow-y: auto;
}

div.popitgmcontacts-asyncwrap,
div.popitgmreminders-asyncwrap
{
    position: relative;
    width: 480px;
    height: 480px;
    overflow-y: auto;
}

.popitbaloon-asyncguide
{
    position: relative;
    width: 640px;
    height: 480px;
    overflow-y: auto;
}

.material-filter-form-asyncwrap
{
    position: relative;
    width: 800px;
    height: 600px;
    overflow-y: auto;
}

/* POP-IT > BALOONS > FILE PREVIEW */

.popit-preview-title
{
    width: 92%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 4px 0px;
    font-size: 110%;
}

.popit-preview-open
{
    position: absolute;
    top: 2px;
    right: 24px;
}

.popit-preview-open a
{
    color: var(--icon-color);
}

.popit-preview-sub
{
    padding: 4px 4px 8px 4px;
}

.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;
}

.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);
    background-color: var(--background-light);
    border-radius: var(--border-radius-base);
}

/* POP-IT > BALOON > FORM */

.popitframe
{
    position: fixed;
    z-index: 8;
    left: 20dvw;
    top: 2dvh;
    width: 60dvw;
    height: 96dvh;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
    text-align: left;
    padding: 8px;
    border-radius: 8px;  
    background: var(--bkg-color);    
    border: var(--border-light-thin);
    box-shadow: var(--shadow-base);    
}

.popitframe.small
{
    left: 50%;
    top: 50%;
    margin-left: -260px;
    margin-top: -180px;
    width: 520px;
    height: 360px;
}

.popitframe.popitspecedit
{
    left: 50%;
    top: 50%;
    margin-left: -320px;
    margin-top: -320px;
    width: 640px;
    height: 640px;
}

.popitframe.popitspecedit.popitspec-w-tech
{
    left: 40%;
    top: 50%;
    margin-left: 32px;
    margin-top: -320px;
    width: 640px;
    height: 640px;
}

.popitframe.popitassortments,
.popitframe.popitsmartselector
{
    margin-left: 0px;
    margin-top: 0px;
    left: 2dvw;
    top: 2dvh;
    width: 96dvw;
    height: 96dvh;
}

/* POP-IT > CLOSE */

a.popitclose
{ 
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    color: var(--icon-color);
}

/* POP-IT > INLINE EDIT > GENERIC */

.inlineprompt-box
{
    width: 440px;
    padding: 4px;
}

.inlineprompt-box input[type=text]
{
    width: 100%;
    box-sizing: border-box;
}

.inlineprompt-box div.buttonbar
{
    margin-top: 16px;
}

.inlineprompt-title
{
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.inlineprompt-txt
{
    margin-top: 8px;
}

.inlineprompt-close
{
    position: absolute;
    top: 2px;
    right: 2px;    
    z-index: 2;
}

.inlineprompt-close a
{
    color: var(--icon-color);
}

.inlineprompt-opt
{
    width: 100%;
    margin-top: 8px;
    /*text-align: right;*/
    text-align: left;
}

.inlineprompt-opt input[type=checkbox]
{
  width: 16px;
  height: 16px;
}

.inlineprompt-opt .input_yesno_box
{
    display: inline-block;
    vertical-align: top;
}

a.label-opt
{
    display: inline-block;
    vertical-align: top;    
    height: 18px;
    line-height: 18px;
    margin-left: 8px;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--font-color-base);
}


/* POP-IT > INLINE EDIT > FORM */

.inlineprompt-form
{
    position: relative;
    margin-top: 16px;
    height: calc(96vh - 96px);   
    overflow: auto;
}

.popitframe.popitspecedit .inlineprompt-form
{
    height: 544px;   
}

.popitframe.small .inlineprompt-form
{
    min-height: auto;
}

.popitframe.small .inlineprompt-form div.editarea_box
{
    width: 100%;
}

.inlineprompt-form .titolo
{
    margin-top: 0px;
    margin-bottom: 8px;
    padding: 0px;
    line-height: 36px;
}

.inlineprompt-form .titolo .suppl
{
    display: inline-block;
    vertical-align: top;
    max-width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* POP-IT > INLINE EDIT > BUTTONS */

.inlineprompt-buttonbar
{    
    position: absolute;
    bottom: 0px;    
    left: 0px;
    box-sizing: border-box;
    width: 100%;
    height: 64px;    
    padding: 16px;
    background: var(--bkg-color);
    text-align: center;
}

.inlineprompt-buttonbar .btn
{
    margin: 0px 8px;
}

.__freebuttons
{    
    position: relative;
    margin-top: 16px;
    background: var(--bkg-color);
}

/* POP-IT > INLINE EDIT > ARTICLE SPEC BOX */

.inline-article-spec-box
{
    width: 100%;
    height: calc(96vh - 446px);
    overflow: auto;
    display: flex;
    align-items: flex-start;
    flex-flow: wrap;
    justify-content: space-between;
}

.inline-article-spec-item
{
    display: inline-block;
    vertical-align: top;
    width: 49.5%;
}

.inline-article-spec-item .label
{
    height: 26px;
    line-height: 26px;
}

.inline-article-spec-item .tags-input-wrapper,
.inline-article-spec-item textarea.article-specs
{
    width: 100%;
}


/* POP-IT > INLINE PREVIEWS */

.inlineprompt-preview-title
{
    padding: 6px;
    margin-bottom: 8px;
    font-size: 130%;
}

.inlineprompt-preview-fullscreen
{
    position: absolute;
    top: 2px;
    right: 2px;
}

.inlineprompt-preview-fullscreen .icon
{
    font-size:  var(--icon-size-mid);
}

.inlineprompt-preview-box
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;   
    gap: 12px;
}

.inlineprompt-preview-item
{
   /* margin: 0px 6px 12px 6px;*/
}

/* MATERIAL FILTERS */

form.material-filter-form
{
    height: 470px;
    overflow-y: scroll;
}

.material-filter-item
{
    max-width: 380px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CLONE */

.auxopt_wrap
{
    margin-top: 8px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.auxprice_wrap
{
    text-align: left;
}

.edit_prices_wrap
{
    display: flex;
    align-items: start;
    justify-content: left;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 8px;
}

.edit_prices_cur
{
    width: 32%;
}

.auxprice_wrap .edit_prices_wrap .edit_prices_cur
{
    width: auto;
}

/* AVATAR */

.popitmenu a.avatar_popup_identity
{    
    height: 42px;
    line-height: 42px;
    padding-top: 0px;
    padding-bottom: 0px;    
    margin-bottom: 8px;    
    border-bottom: 1px solid #B4B4B4;
    cursor: default; 
    font-size: 150%;  
}

.popitmenu a.avatar_popup_identity:hover
{
    background-color: transparent !important;
    color: var(--icon-color) !important;
}

/* USERS > SNIPPET */
  
span.user_snippet 
{ 
    position: relative;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    height: 20px;
}

span.user_snippet .icon
{ 
    display: inline-block;
    vertical-align: top;
    width: 100%;    
    color: var(--font-color-neg);
}

span.user_snippet .icon:hover
{
    color: var(--font-color-neg);
}

span.user_snippet span.nick
{     
    white-space: nowrap; 
    margin-left: 6px;
}                          

/* USERS > SNIPPET > AVATAR */

span.user_snippet div.avatar
{
    display: inline-block;
    vertical-align: top;
    height: 20px;
}

span.user_snippet span.avatar 
{ 
    display: inline-block;
    text-align: center;
    vertical-align: text-top;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 70%;
    color: var(--font-color-neg);
}      

/* USERS > SNIPPET > ACCOUNT */

span.user_snippet.user_account
{ 
    display: block;
    height: 100px;
    padding: 8px;
    border-radius: var(--border-radius-base);
    color: var(--font-color-neg);
}

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: 2px solid #FFFFFF;
    font-size: 24px;
}

span.user_snippet.user_account span.nick
{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: 1px;
    margin-left: 84px;
    font-family: var(--font-bold);
    font-size: 18px;
}

span.user_snippet.user_account span.sub
{
    display: block;
    margin-left: 84px;
    margin-top: 8px;
    font-size: 14px;
}

span.user_snippet.user_account span.lv
{
    text-transform: uppercase;    
    letter-spacing: 1px;
    display: block;
    margin-left: 84px;
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.67;
}

q.user_info_phrase
{
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
}

.user_info_actions
{
    margin-top: 8px;
}

.mail_snippet,
.phone_snippet
{    
    position: relative;
    display: inline-block;
    box-sizing: border-box;    
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mail_snippet,
.phone_snippet
{
    cursor: pointer;
}

.mail_snippet .icon,
.phone_snippet .icon
{
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
}

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

.phone_snippet em
{
    margin-left: 4px;
    font-style: normal;
}

/* CONTACTS > SNIPPET */

.contact-snippet-box
{
}

.contact-snippet-box.extended
{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-snippet-item
{
    position: relative;
    border-bottom: var(--border-light-thin);
    padding-bottom: 16px;
    margin-bottom: 8px;
}

.contact-snippet-box.extended .contact-snippet-item
{
    width: 49%;
    border-bottom: none;
    background: var(--row-bkg-even);
    border-radius: var(--border-radius-base);    
}

.contact-snippet-default
{
    position: absolute;
    top: 8px;
    right: 2px;
}

.contact-snippet-default .icon
{
    color: var(--state-color-warning);
}

.contact-snippet-title
{
    padding: 8px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-snippet-title .nick
{
    margin-left: 8px;
    font-size: 130%;
    text-transform: uppercase;
}

.contact-snippet-mail,
.contact-snippet-phone,
.contact-snippet-info
{
    position: relative;
    padding-left: 38px;
    padding-right: 4px;
    padding-top: 4px;
}

.contact-snippet-mail:before,
.contact-snippet-phone:before,
.contact-snippet-info:before
{
    position: absolute;
    top: 4px;
    left: 8px;
    display: block;    
    font-size: 16px;
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

.contact-snippet-mail:before
{
    content: "\f0e0";
}

.contact-snippet-phone:before
{
    content: "\f879";
}

.contact-snippet-info:before
{
    content: "\f05a";
}

.contact-snippet-mail .mail_snippet
{
    display: table;
    margin-bottom: 4px;
}

.contact-snippet-phone .phone_snippet
{
    display: table;
    margin-bottom: 4px;
}

/* REMINDERS > SNIPPET */

.reminder-snippet-box
{
}

.reminder-snippet-box.extended
{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.reminder-snippet-item
{
    position: relative;    
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: var(--border-light-thin);
}

.reminder-snippet-box.extended .reminder-snippet-item
{
    width: 49%;    
    border-bottom: none;
    background: var(--row-bkg-even);
    border-radius: var(--border-radius-base);
}

.reminder-snippet-title
{
    padding: 8px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 130%;
    text-transform: uppercase;
}

.reminder-snippet-msg
{
    margin-bottom: 8px;
    padding: 0px 4px;
}

.reminder-snippet-schedule,
.reminder-snippet-operators,
.reminder-snippet-recipients,
.reminder-snippet-status
{
    position: relative;
    padding-left: 38px;
    padding-right: 4px;
    padding-top: 4px;
}

.reminder-snippet-schedule:before,
.reminder-snippet-operators:before,
.reminder-snippet-recipients:before,
.reminder-snippet-status:before
{
    position: absolute;
    top: 4px;
    left: 8px;
    display: block;    
    font-size: 16px;
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

.reminder-snippet-schedule:before { content: "\f073"; }
.reminder-snippet-operators:before { content: "\f007";}
.reminder-snippet-recipients:before { content: "\f0e0";}

.reminder-snippet-operators .op
{
    margin-bottom: 4px;
}

.reminder-snippet-status:before { content: ""; }
.reminder-snippet-status.ready { color: var(--font-color-base); }
.reminder-snippet-status.ready:before { content: "\f017"; }
.reminder-snippet-status.block { color: var(--state-color-fail); }
.reminder-snippet-status.block:before,
.reminder-snippet-status.failure { color: var(--state-color-fail); }
.reminder-snippet-status.failure:before { content: "\f071"; color: var(--state-color-fail); }
.reminder-snippet-status.sent { color: var(--state-color-success); }
.reminder-snippet-status.sent:before { content: "\f00c"; color: var(--state-color-success); }
.reminder-snippet-status.disabled { color: var(--state-color-fail); }
.reminder-snippet-status.disabled:before { content: "\f00d"; color: var(--state-color-fail); }

/* DRAWERS */

.__drawer-fx 
{ 
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    overflow: hidden;
}

.__drawer-fx-trigger 
{ 
    width: 0px !important;
    border: none !important;
    box-shadow: none !important;
}

.drawerclose
{
    position: absolute;    
    display: block;    
    text-align: center;    
    top: 8px;
    right: 8px
}

a.drawerclose:before 
{
    display: block;    
    content: "\f053";    
    font-family: var(--icon-font);    
    color: var(--icon-color);
    font-size: 16px;
}

/* DRAWERS > TECH PICTURES */

.drawertechpics
{
    position: fixed;
    z-index: 9;
    overflow: hidden;    
    height: 100%;
    top: 0px;
    width: 40%;
    background: var(--bkg-color);    
}

.drawertechpics-left
{
    left: 0px;
    border-right: var(--border-light-thin);
    box-shadow: 2px 0px 4px 0px var(--shadow-color);    
}

.drawertechpics-right
{
    right: 0px;
    border-left: var(--border-light-thin);
    box-shadow: -2px 0px 4px 0px var(--shadow-color);
}

.drawertechpics.drawertechpics-right .drawerclose
{
    right: unset;
    left: 8px;
}

.drawertechpics.drawertechpics-right a.drawerclose:before 
{
    content: "\f054";    
}

.drawertechpics-header
{
    position: relative;
    width: 100%;
}

.drawertechpics-async-wrap
{
    width: 100%;
    height: calc(100% - 48px);
}

.techpicdrawerwrap
{
    width: 95%;
    height: 100%;
    margin: auto;
    overflow-y: auto;
}

.techpicdrawerwrap img
{
    margin-bottom: 8px;
    border-radius: var(--border-radius-base);
}

/* DRAWER > NOTIFY AREA > LAYOUT */

.drawerappnotices
{
    position: fixed;
    z-index: 9;
    top: 52px;
    right: 0px;
    width: 40%;
    height: calc(100% - 52px);
    overflow: hidden;
    background: var(--bkg-color);
    border-left: var(--border-light-thin);
    box-shadow: -2px 0px 4px 0px var(--shadow-color);
}

.drawerappnotices a.drawerclose:before 
{
    content: "\f054";    
}

.drawerappnotices-header
{
    position: relative;
    width: 100%;
    margin: 8px 0px;
    height: 64px;
}

.drawerappnotices-footer
{
    height: 0px;
}

.drawerappnotices-asyncwrap
{
    width: 100%;        
    overflow-y: auto;
    padding: 8px 0px;
    height: calc(100% - 64px);
}

/* DRAWER > NOTIFY AREA > HEADER */

.drawerappnotices-header h1
{
    font-weight: normal;
    font-size: 180%;
    padding: 0px 8px;
    margin: 0px;
}

.drawerappnotices-header .more
{
    position: absolute;
    top: 8px;
    right: 32px;    
}

.drawerappnotices-header .more .icon
{
    height: 18px;
    line-height: 18px;
    color: var(--icon-color);
}

.drawerappnotices-header .sub
{
    margin-top: 8px;
    padding: 0px 8px;
    vertical-align: top;
    line-height: 24px;
}

.drawerappnotices-header .notread_only
{
    margin-right: 8px;
    display: inline-block;
    vertical-align: top;
}

/* NOTIFIES */

div.notification-center-box
{
}

/* NOTIFIES > ITEMS */

div.notify-item 
{ 
    position: relative;
    padding: 8px;
    border-bottom: var(--row-border-base);
}

div.notify-item:hover
{
    background-color: var(--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;
    font-size: 16px;
    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);        
    color: var(--negative-color);
}      

div.notify-item span.notify-avatar:before
{
    font-size: 20px;
    font-family: var(--icon-font);    
    color: var(--icon-color);
}

div.notify-item div.notify-avatar span.__avatar-side-id
{
    display: none;
}

/* NOTIFIES > TITLE */

div.notify-item div.notify-title
{ 
    width: calc(100% - var(--icon-dim-large) - 64px);    
    margin-left: calc(var(--icon-dim-large) + 8px);
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-size: 130%;
}

/* NOTIFIES > INFO */

div.notify-item div.notify-desc 
{ 
    margin-top: 8px;
    margin-left: calc(var(--icon-dim-large) + 8px);
}
                                                             
div.notify-item div.notify-info 
{ 
    position: relative;
    margin-top: 8px;
    margin-left: calc(var(--icon-dim-large) + 8px);
    font-size: 90%;
    color: var(--font-color-light);
}              

/* NOTIFIES > STATUS  & REMOVE */

div.notify-item div.notify-read,
div.notify-item div.notify-remove
{
    position: absolute;
    top: 12px;    
}

div.notify-item div.notify-read
{
    right: 32px;
}

div.notify-item div.notify-remove
{   
    right: 8px;        
}

div.notify-item div.notify-remove .icon,
div.notify-item div.notify-remove .icon:before
{
    vertical-align: top;
    color: var(--icon-color);
}

div.notify-item div.notify-read .icon,
div.notify-item div.notify-read .icon:before
{
    vertical-align: bottom;
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    line-height: var(--icon-dim-small);

    /*font-size: var(--icon-size-small);    */
}

/* NOTIFIES > FUNCTIONS & SELECTION */


div.notification-center-box div.notify-select-all
{
    text-align: right;
    padding-right: 8px;
    padding-bottom: 8px;
}

div.notification-center-box div.notify-select-all span
{
    margin-right: 8px;
    text-transform: uppercase;    
}

div.notify-item div.notify-func
{
    position: absolute;
    top: 8px;
    right: 32px;
}

div.notify-item div.notify-select
{
    position: absolute;
    top: 10px;
    right: 8px;
}

/* MESSAGES > STATIC */ 

.staticmsg,
.loginmsg 
{
    position: fixed;
    z-index: 10;
    top: 0px;
    left: 15%;
    width: 70%;    
}

.staticmsg .messagebox,
.loginmsg .messagebox 
{
    width: 100%;
    margin-top: 8px;
}

.messagebox
{
    position: relative;
    display: block;
    text-align: center;
    letter-spacing: 1px;    
    font-size: 130%;
    padding: 8px 24px;
    background: #333333;
    color: var(--font-color-neg);
    border-radius: var(--border-radius-base);
}

.messagebox:before
{
    position: absolute;
    display: block;
    content: "\f05a";
    left: 8px;
    top: 8px;
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
}

/* MESSAGES > ALERTS */

.alertmsg
{
    position: fixed;
    z-index: 200;    
    left: 0px;
    width: 70%;
    left: 15%;
    top: -100%;
    opacity: 0;
    padding: 8px;
    background: var(--background-dark);    
    border-radius: var(--border-radius-base);
    box-shadow: 0px 0px 16px 0px #999999;
    text-align:  center;
    font-size: 130%;
    color: var(--font-color-neg);
}

.alertmsg-fx 
{
    transition: all 0.5s;
}
.alertmsg-fx-trigger 
{
    top: 47px;
    opacity: 1;
}

.alertmsg:before 
{
    content: "\f05a";
    display: block;
    position: absolute;
    left: 8px;
    top: 8px;
    font-family: var(--icon-font);
    font-size: 22px;
}

/* MESSAGES > TYPES */

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

.alertsuccess:before
{ 
    content: "\f00c";    
}

.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: 8px;
    top: 8px;
}

.alertclose:after 
{
    content: "\f00d";
    font-family: var(--icon-font);
    font-size: 18px;
    color: var(--font-color-neg);
}

/* ARTICLE SMART SEARCH  */

.smartsearch-input,
.smartsearch-select-header
{
    position: relative;
    height: 26px;
}

.smartsearch-input:before
{
    position: absolute;
    content: "\f002";
    top: 1px;
    left: 1px;
    width: 32px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    font-size: var(--icon-size-base);
    font-family: var(--icon-font);
    color: var(--font-color-light);
}

.smartsearch-input input.searcharticle
{
    width: 286px;
    padding-left: 32px;
    padding-right: 32px;
}

.smartsearch-input .smartsearch-reset
{
    position: absolute;
    top: 2px;
    left: 1px;
    display: block;
    width: 32px;
    height: 23px;
    line-height: 23px;
    text-align: center;    
    border-radius: var(--border-radius-base);
    background: var(--input-bkg-color);
    color: var(--icon-color);
}

.smartsearch-input .smartsearch-reset:hover
{
    color: var(--active-color);
}

.smartsearch-input .smartsearch-exactmatch
{
    position: absolute;
    top: 2px;
    left: 260px;
    width: 22px;
    height: 22px;
    text-align: center;
    border-radius: 100%;    
}

.smartsearch-input .smartsearch-exactmatch .icon
{
    width: 22px;
    height: 22px;
    line-height: 22px;    
    font-size: 14px;
}

.smartsearch-input .smartsearch-exactmatch[data-value="1"]
{
    background-color: var(--active-color);
}

.smartsearch-input .smartsearch-exactmatch[data-value="1"] .icon
{
    color: var(--font-color-neg);
}

.smartsearch-select-all,
.smartsearch-remove-all
{
    display: none;
    vertical-align: top;
    position: absolute;
    top: 0px;
    right: 2.3vw;
    line-height: 26px;
}

.smartsearch-select-all .checkboxwrap,
.smartsearch-select-all .checkboxwrap_checked
{
    vertical-align: middle;
    margin-left: 8px;
}

.smartsearch-select-all a,
.smartsearch-remove-all a
{    
    line-height: 23px;    
    text-transform: uppercase;    
    color: var(--font-color-base);
}

.smartsearch-select-all a span
{
    font-family: var(--font-bold);
}

.smartsearch-select-all a:hover,
.smartsearch-remove-all a:hover,
.smartsearch-remove-all a:hover .icon
{
    color: var(--active-color);
}

.smartsearch-remove-all a
{
    vertical-align: top;
}

.smartsearch-remove-all .icon
{
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
}

.smartsearch-result,
.smartsearch-selection,
.smartsearch-preview
{
    box-sizing: border-box;
    margin-top: 16px;
    display: flex;
    width: 100%;
    max-height: calc(96vh - 196px);
    align-items: start;
    justify-content: left;
    flex-wrap: wrap;
    overflow-y: auto;
    gap: 8px;
}

.smartsearch-selection
{
}

.smartsearch-preview
{
    margin-top: 0px;
    padding: 0px 16px;
}

.smartsearch-item
{
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: 286px;
    height: 98px;
    padding: 8px;
    overflow: hidden;
    background: var(--row-bkg-even);
    border: var(--row-border-base);
    border-radius: var(--border-radius-base);
}

.smartsearch-item.active
{
    cursor: pointer;
}

.smartsearch-item.checked
{
    border-color: var(--border-color-select);
}

.smartsearch-item div.pict
{
    margin: 0px;
    display: inline-block;
}

.smartsearch-item div.pict img
{
    max-height: 64px; 
    object-fit: contain;
}

.smartsearch-item div.pict .modref
{
    padding: 4px 0px;
    font-size: 10px;
}

.smartsearch-item div.pict .icon,
.smartsearch-item div.pict .icon:before
{
    font-size: 36px;
    width: 64px;
    height: 48px;
    line-height: 48px;
}

.smartsearch-item div.label
{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    height: 100%;
    padding: 0px 8px;
}

.smartsearch-item div.label .title,
.smartsearch-item div.label .color,
.smartsearch-item div.label .price
{
    display: block;    
    width: 176px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;   
}

.smartsearch-item div.label .color,
.smartsearch-item div.label .price
{
    margin-top: 8px;
}

.smartsearch-item div.label .price .amount
{
    display: inline-block;
    margin-right: 8px;
}

.smartsearch-item div.select
{
    position: absolute;
    right: 8px;
    top: 8px;
}

.smartsearch-item div.select .checkboxwrap
{
    background-color: var(--bkg-color);
}

.smartsearch-item div.select .icon
{    
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    color: var(--icon-color);
}

.smartsearch-item div.select:hover .icon
{
    color: var(--active-color);
}

.smartsearch-item div.invisible
{
    position: absolute;
    right: 8px;
    top: 32px;
}

.smartsearch-item div.invisible .icon
{
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
}

.smartsearch-item div.more
{
    position: absolute;
    right: 4px;
    bottom: 8px;
}

.smartsearch-item.preview
{
    width: auto;
    height: auto;
    margin: 0px;
    padding: 0px;
    border: none;
    background: none;    
}

.smartsearch-item.preview div.pict img
{
    max-height: 64px; 
}

.smartsearch-item.preview div.label,
.smartsearch-item.preview div.select
{
    display: none;
}

.smartsearch-item.preview .more
{
    margin: 0px 8px;
    font-size: 110%;
}

.smartsearch-item.preview .more:before
{
    content: " ... ";
}
  
/* ARTICLE QR SCANNER BUTTON */

.article-qr-scanner-button
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 16px;
}

.article-qr-scanner-button .icon
{
    font-size: 24px;
    line-height: 26px;
}

/* ARTICLE FILTERS POPUP */

.article-filters-toggle
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 16px;
}

.article-filters-toggle .icon
{
    font-size: 20px;
    line-height: 26px;
}

.article-filters-toggle div
{
    position: absolute;
    top: -10px;
    right: -14px;
    display: none;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
    font-size: 12px;
    background-color: var(--state-color-fail);
    color: var(--font-color-neg);
}

.article-filters-toggle div.show
{
    display: block;
}

.article-filters-box
{
    box-sizing: border-box;
    opacity: 0;
    width: 480px;
    position: absolute;
    top: -480px;
    left: 336px;
    z-index: 3;
    padding: 8px;
    transition: all 0.3s;
    background-color: var(--bkg-color);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);    
}

.article-filters-box.show
{
    top: 0px;
    opacity: 1;
}

.article-filters-title
{
    position: relative;
    font-weight: normal;
    font-size: 180%;
    line-height: 100%;
    margin: 8px 0px;
    padding: 8px;
}

.article-filters-title .article-filters-reset
{
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
}

/* QR CODE SCANNER */

.device-camera-interface
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: var(--background-modal);
    color: var(--font-color-neg);
}

.device-camera-title
{
    text-align: center;    
    position: relative;
    font-weight: normal;
    font-size: 180%;
    line-height: 100%;
    margin: 8px 0px;
    padding: 8px;
}

.device-camera-close
{
    position: absolute;
    top: 8px;
    right: 8px;
}

.device-camera-close .icon
{    
    font-size: 26px;
    color: var(--font-color-neg);
}

.device-camera-frame
{
    margin: 16px auto 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100vh - 136px);
    height: calc(100vh - 136px);    
    overflow: hidden;    
    background: var(--bkg-color);
    border-radius: 8px;
}

.device-camera-reader
{    
    position: relative;
    width: calc(100vh - 136px);
    height: calc(100vh - 136px);
    border-radius: 8px;
}

a.device-camera-cameras
{
    display: none;
    position: absolute;
    z-index: 3;
    left: calc(50vw - 64px + (100vh - 136px) / 2);
    bottom: 80px;    
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: var(--font-color-neg);
    background: var(--background-modal);
    border-radius: 8px;
}

a.device-camera-cameras:before
{
    content: "\f2f1";
    font-family: var(--icon-font);
    font-size: 26px;   
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
    backface-visibility: hidden;
}

a.device-camera-cameras.flipped:before
{
    transform: rotate(180deg);
}

a.device-camera-cameras.show
{
    display: block;
}

a.device-camera-cameras.camera:before
{
    content: "\f030";
}

.device-camera-buttonbar
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 16px;
    text-align: center;
}

.device-camera-buttonbar .btn.btn-cancel
{    
    background: transparent;
    border: none;
    font-size: 150%;
    color: var(--font-color-neg);
}

.device-camera-buttonbar .btn.btn-cancel:before
{
    font-size: 26px;
    padding: 0px 16px
}

.device-camera-buttonbar .btn.btn-cancel:hover,
.device-camera-buttonbar .btn.btn-cancel:hover:before
{
    color: var(--active-color);
}

.device-camera-error
{
    padding: 32px 8px;    
    font-size: 150%;
    text-align: center;
    color: var(--font-color-base);
}

.device-camera-error .permission-guide
{
    margin-top: 32px;
}

.device-camera-error .permission-guide p
{
    margin-top: 8px;
    font-size: 80%;
}

.device-camera-error .permission-guide a
{
    margin-top: 32px;
    font-size: 80%;
}

/* QR CODE SCANNER > WIZARD */

.qrscanner-sub-title,
.qrscanner-sub-hilight
{
    margin-top: 8px;
    font-size: 130%;
    color: var(--font-color-light);
}

.qrscanner-sub-hilight
{
    color: var(--link-color);
}

.qrscanner-sub-price
{
    margin-top: 8px;
    font-size: 150%;
}

.qrscanner-sub-price.hide
{
    visibility: hidden;
}

.qrscanner-sub-price .curpricevalue
{
    display: inline-block;
    vertical-align: top;
    margin-right: 16px;
}

.qrscanner-mainpic
{
    margin-top: 24px;
    width: 45vw;
}

.qrscanner-more
{
    position: absolute;
    z-index: 2;
    top: 0px;
    right: 24px;
    padding: 4px;
    border-radius: 100%;
    border: 2px solid var(--background-dark);
}

.qrscanner-more .icon:before
{
    font-size: 20px;
}

.qrscanner-more:hover
{
    border-color: var(--active-color);
}

/* QR CODE SCANNER > TOGGLE PRICES */

.toggle-prices-box
{
    position: fixed;   
    bottom: 4dvh;
    right: 4dvw;
    z-index: 2;
}

/* ARTICLE INSERT LOOP */

.article-insert-loop-box
{
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 24px;
}

.order-insert-loop-box
{
    position: fixed;
    z-index: 3;
    left: 4vw;
    bottom: 4.3vh;
}

/* ARTICLE SELECTION */

.gmart
{
    text-transform: uppercase;
}

.gmart span.pub,
.gmart span.lite,
.gmart span.spcl
{
    padding: 1px 2px;    
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--link-color);
    border-radius: var(--border-radius-base);
}

.gmart span.pub
{
    margin-right: 8px;
}

.gmart span.lite
{
    color: var(--state-color-off);
}

.gmart span.spcl
{
    color: var(--state-color-fail);
}

.gmart i
{
    display: inline-block;
    margin-left: 4px;
    width: 20px;
    height: 20px;    
    line-height: 20px;    
}

.gmart i:before
{
    content: "\f070";
    font-size: 13px;
    width: 20px;
    height: 20px;    
    line-height: 20px;
    font-family: var(--icon-font);
}

.popitselect a:hover .gmart span.pub,
.popitselect a[data-focus="1"] .gmart span.lite
{
    color: var(--font-color-neg);
}

/* FONT ZOOM */ 

.gm-font-zoom-box
{
    position: fixed;    
    z-index: 9;
    bottom: -64px;
    left: 50%;
    margin-left: -320px;
    opacity: 0;
    display: block;
    width: 640px;
    height: 24px;
    padding: 16px;    
    transition: all 0.3s ease;
    background: var(--bkg-color);
    box-shadow: var(--shadow-base);
    border-radius: 8px;
}

.gm-font-zoom-box.show
{
    bottom: 64px;
    opacity: 1;
}

.gm-font-zoom-box *
{
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    height: 26px;
    line-height: 26px;
}

.gm-font-zoom-label
{
    margin-right: 16px;
}

.gm-font-zoom-box .icon
{
    width: 20px;    
    font-size: 20px;
    padding: 0px 4px;
}

.gm-font-zoom-box input[type=range]
{
    width: 200px;
    margin: 0px 8px;
}

.gm-font-zoom-close
{
    position: absolute;
    right: 8px;
}

/* AUX */

.__noscroll
{ 
    overflow: hidden;
}

.__hidden
{
    display: none !important;
}

.__inline
{
    display: inline-block !important;
    vertical-align: top !important;
}

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

.__upper
{
    text-transform: uppercase;
}

.__disabled
{
    opacity: 0.15;
}

.__linkactive
{
    cursor: pointer !important;
}

.__blink
{
    animation: bkgblinker 1s linear infinite;
}

@keyframes bkgblinker
{
    50% { background-color: rgba(86, 179, 113, 0.33); }
}

img.__lazy
{
    background-image: url(../img/loadplacehold-new.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

div.pict img.__lazy
{
    min-height: 64px;
}

/* NOTIFY > BADGE  */

.__notify-newcount 
{ 
    position: absolute;
    z-index: 2;    
    display: block;
    border-radius: 100%;
    text-align: center;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    background: var(--badge-color-bright);
    color: var(--font-color-neg) !important;
}

a.reminderlink .__notify-newcount 
{
    top: -8px;
    right: -6px;
}

/* NOTIFY > BADGE > PULSE FX */

.__notify-newcount::after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;    
    animation: pulse 3s infinite ease-out;
    transform: translate(-50%, -50%) scale(1);
    background-color: var(--badge-color-pulse);
}

@keyframes pulse
{
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 0.9; /* it appears immediately */
  }
  35% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0; /* long pause */
  }
}

.__notify-hide
{ 
    display: none !important;
}

ul.gm-guide
{
    padding-left: 26px;
    padding-right: 16px;
    margin: 0px;
}

ul.gm-guide li
{
    margin-bottom: 12px;
}

ul.gm-guide li div.gm-guide-title
{
    font-family: var(--font-bold);
    font-size: 110%;
    line-height: 26px;    
}

.__tablet
{
}

.__desktoponly
{
}

.__wideonly
{
}

.__mobileonly
{
    display: none !important;
}

.__gminvisible,
.__gminvisible:hover
{    
    font-size: var(--icon-size-small);
    color: var(--state-color-invisible);
    background-color: var(--background-dark);    
    border-radius: var(--border-radius-base);
}

.__gmlocked,
.__gmlocked:hover
{    
    color: var(--state-color-warning);
    background-color:  var(--background-dark);
    border-radius: var(--border-radius-base);
}

.gmseason_winter,
.gmseason_summer,
.gmcategory_man,
.gmcategory_woman,
.gmcategory_baby
{
    display: inline-block;
    vertical-align: top;
    font-style: normal;
    margin-right: 8px;
}

.gmseason_winter:before,
.gmseason_summer:before,
.gmcategory_man:before,
.gmcategory_woman:before,
.gmcategory_baby:before
{
    font-family: var(--icon-font);    
    font-size: var(--icon-size-base);
}

.gmseason_winter:before
{
    content: "\f2dc";
    color: var(--season-color-winter);
}

.gmseason_summer:before
{
    content: "\f185";
    color: var(--season-color-summer);
}

.filter_element .gmseason_winter:before,
.filter_element .gmseason_summer:before
{
    color: var(--font-color-neg);
}

.gmcategory_man:before { content: "\f183"; }
.gmcategory_woman:before { content: "\f182"; }
.gmcategory_baby:before { content: "\f1ae"; }

.gmseason_label
{
    white-space: nowrap;
}

.gmseason_label em
{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;    
    width: 38px;
    padding-right: 8px;
    font-style: normal;
    text-align: right;
}

.gmseason_label i
{
    width: 16px;
    text-align: center;
}

.gmsort_ins,
.gmsort_artasc,
.gmsort_artdesc,
.gmsort_cat,
.gmsort_color,
.gmitdisp_normal,
.gmitdisp_full
{
    display: inline-block;
    vertical-align: top;
    font-style: normal;
    margin-right: 8px;
}

.gmsort_ins:before,
.gmsort_artasc:before,
.gmsort_artdesc:before,
.gmsort_cat:before,
.gmsort_color:before,
.gmitdisp_normal:before,
.gmitdisp_full:before
{
    font-family: var(--icon-font);
    font-size: var(--icon-size-base);
}

.gmsort_ins:before { content: "\f162"; }
.gmsort_artasc:before { content: "\f15d"; }
.gmsort_artdesc:before { content: "\f881"; }
.gmsort_cat:before { content: "\f7bd"; }
.gmsort_color:before { content: "\f53f"; }
.gmitdisp_normal:before { content: "\f0ce"; }
.gmitdisp_full:before { content: "\f0cb"; }

/* LOGIN */

.login-container
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-wrapper
{
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    /*grid-auto-flow: row dense;*/
    background: #FFFFFF;

   /*
    background-image: url(../img/logo-gm-collectionlab-bw.png);
    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: lighten;
    background-size: 50%;
    background-position: 120% -20%;
    background-repeat: no-repeat;
    */
}

.login-image-wrapper
{
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    display: flex;
    flex-direction: column;
    justify-content: center;       
    background-repeat: no-repeat;
    background-size: cover;
    background-image: var(--login-imagewrapper-bkg);
    border-radius: var(--border-radius-mid);
    box-shadow: var(--login-imagewrapper-shadow);
}

.login-form-wrapper
{
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 11vw;
}

.login-form-wrapper h1
{
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    font-size: 200%;
}

/* LOGIN > IMAGE */

.login-image-box
{
    margin: auto;
    width: 90%;
    height: 80%;
    min-height: 640px;    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

.login-image-box:before
{
    content: attr(data-cover);
    display: block;  
    padding-top: 35vh;
    margin: auto;
    text-align: center;
    font-size: 320%;    
    font-family: var(--font-bold);
    color: var(--font-color-neg);
    text-shadow: 0px 0px 32px var(--font-color-base);
}

/* LOGIN > FORM */

form.loginform
{
    width: 100%;
    margin: 16px auto 0px auto;
}

form.recoveryform
{
    width: 100%;
    margin: 16px 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
{
    position: relative;
    padding-top: 0px;
    padding-bottom: 16px;
}

form.loginform div.inputwrap div.inputwrapinner label,
form.recoveryform div.inputwrap div.inputwrapinner label
{
    display: none;
}

form.loginform div.inputwrap div.inputwrapinner > input,
form.recoveryform div.inputwrap div.inputwrapinner > input
{
    width: 100%;
    height: 48px;
    padding: 8px;
    font-size: 130%;
}

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: 48px;
    height: 48px;
    line-height: 48px;
    font-family: var(--icon-font);        
    font-size: var(--icon-size-mid);
    opacity: var(--input-placeholder-opacity);
}

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: 48px;
}

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: 16px;
    margin-left: 8px;
}

form.loginform a.pwd_masktoggle,
form.recoveryform a.pwd_masktoggle
{
    top: 0px;
    bottom: auto;
    right: 0px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    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: 48px;
    line-height: 48px;
    font-size: 150%;
}

form.loginform div.buttonbar a.btn.btn-submit:before
{
    content: "\f2f6";
    font-size: var(--icon-size-mid);
}

form.loginform div.buttonbar a.btn.btn-submit,
form.recoveryform div.buttonbar a.btn.btn-submit
{
    margin: 0px;
}

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(--background-dark);
}

form.loginform div.section, 
form.recoveryform div.section
{
    border-bottom: none;
    text-transform: unset;
    font-family: var(--font-base);
}