/* ICONS  */

.icon:before,
.side_icon:before
{
   display: inline-block;
   vertical-align: top;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: 21px;
   /*
   width: 32px;
   height: 38px;
   line-height: 38px;
   text-align: center;
   */
   
   /*
   width: 22px;
   height: 22px;
   line-height: 22px;
   */   
}

.icon.large:before,
.side_icon.large:before
{
    font-size: 26px;
}

.side_icon 
{
    position: relative;
    display: block;
    padding: 0px 0px 0px 38px;
    height: 38px;
    line-height: 38px;
}

.side_icon:before 
{
    display: block;    
    position: absolute;
    top: 0px;
    left: 8px;
    content: "";
}

.icon_check_ok:before
{
    content: "\f00c";
    color: #00934a;
}

.icon_check_fail:before
{
    content: "\f00d";
    color: #dc3545;
}

.icon_select:before { content: "\f00c"; }
.icon_close:before{ content: "\f00d"; }
.icon_clear:before{ content: "\f00d"; }
.icon_show:before { content: "\f06e"; }
.icon_hide:before { content: "\f070"; }
.icon_inc:before { content: "\f067"; }
.icon_dec:before { content: "\f068"; }
.icon_prev:before { content: "\f053"; }
.icon_next:before { content: "\f054"; }
.icon_calendar:before { content: "\f073"; }

/* FX */

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

/* FORM > HTML*/

form 
{
    position: relative;
    width: 100%;
    background: #f7f7f7;
    padding: 15px;
    border-radius: 12px;
}

form fieldset 
{
    border: none;
}

input[type="text"],
input[type="password"],
textarea
{
    display: inline-block;    
    margin: 0px;
    padding: 12px;
    width: 100%;
    height: 42px;
    font-size: 16px;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    color: #000000;
    background-color: #FFFFFF;
    letter-spacing: 1px;
}

textarea
{
    height: 250px;
}

input[type="text"]:focus, 
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="password"]:focus,
textarea:focus
{
    border-color: #B1B1B1;
    color: #000000;
}

input.readonly,
textarea.readonly 
{
    border-color: #f7f7f7;
    background-color: #f7f7f7;
}

input.numerichidden 
{
    display: none;
}

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

dfn 
{
    font-style: normal;
}

/* FORM > SECTIONS */

form div.section 
{
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

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

/* FORM > SECTIONS > BAR */

form div.section_bar
{
  position: relative;
  width: 100%;  
  font-size: 18px;    
  font-weight: 400;
  text-transform: uppercase;
  color: #888;
  padding: 15px 0px;
  border-bottom: 2px solid #E2E2E2;
}

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

/* FORM > SECTIONS > CONTENT */

form div.section_content 
{
    position: relative;
    width: 100%;
    padding-bottom: 15px;
}

.section_spacer
{
    display: block;
    width: 100%;
    height: 15px;
}

/* FORM > SECTIONS > ROOT */

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

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

/* FORM > INPUTS */

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

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

.inputwrap-fx-trigger {  }


form div.inputwrap div.inputwrapinner 
{ 
    position: relative;
    padding-top: 25px;
}

form div.inputwrap div.inputwrapinner label
{    
    margin: 0px;    
    padding: 0px;    
    display: block; 
    font-weight: 600;
    font-size: 15px;
    color: #323232;
}

/* FORM > INPUTS > ERROR */

form div.inputwrap.error-occurred div.inputwrapinner input,
form div.inputwrap.error-occurred div.inputwrapinner textarea
{
    border-color: #dc3545;
}

/*
form div.inputwrap.error-occurred div.inputwrapinner input::placeholder
{
    color: transparent;
}
*/

form div.inputwrap.error-occurred:after
{
    z-index: 1;
    position: absolute;
    display: block;    
    top: 5px;
    left: 0px;
    padding-bottom: 15px;
    z-index: 2;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 1px;    
    content: attr(data-vld-msg);    
    font-size: 13px;
    color: #dc3545;
}

form div.inputwrap.error-occurred .radiowrap,
form div.inputwrap.error-occurred .radiowrap_checked,
form div.inputwrap.error-occurred .checkboxwrap,
form div.inputwrap.error-occurred .checkboxwrap_checked
{
    border-color: #dc3545;
}

/* FORM > INPUTS > PASSWORD */

a.pwd_masktoggle,
a.pwd_masktoggle:before
{ 
    display: inline-block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #888;
}

/* FORM > INPUTS > STEPPER */

span.stepper 
{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 42px;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    background: #FFFFFF;
}

span.stepper.readonly
{
    border-color: #f7f7f7;
    background-color: #f7f7f7;
}

/*
display: inline-block;    
    margin: 0px;
    padding: 12px;
    width: 100%;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    color: #000000;
    background-color: #FFFFFF;
    letter-spacing: 1px;
*/

span.stepper[data-focus="1"]
{
    border: 1px solid #B1B1B1;
}

form div.inputwrap div.inputwrapinner span.stepper > input 
{
    border: none;
    vertical-align: top;
    width: 168px;
    height: 40px;
    line-height: 40px;
}

span.stepper .inputhelper 
{
    position: absolute;
    left: 168px;
    display: inline-block;
    text-align: center;
    font-style: normal;
    height: 40px;
    line-height: 40px;
    padding: 0px 12px;
    background: #FFFFFF;
    color: #888888;
    border-radius: 4px;
}

span.stepper.readonly .inputhelper 
{
    background-color: #f7f7f7;
}

span.numeric_incdec 
{
    position: absolute;
    left: 226px;
    display: inline-block;
    vertical-align: top;
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px;
}

span.numeric_incdec .icon
{
    display: inline-block;
    text-align: center;    
    width: 40px;
    height: 40px;
    line-height: 40px;
}

span.numeric_incdec .icon:before
{   
    display: inline-block;    
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 19px;
    line-height: 40px;
    color: #888;
}

/* FORM > INPUTS > CHECKBOX */

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

.checkboxwrap,
.checkboxwrap_checked
{
   display: inline-block;
   vertical-align: top;
   text-align: center;
   cursor: pointer;
   width: 24px;
   height: 24px;
   border: 2px solid #B0B0B0;
   border-radius: 2px;
}

.checkboxwrap_checked 
{ 
    background: #323232;
    border-color: #323232;
}

.checkboxwrap_checked:before 
{
   display: inline-block;
   vertical-align: top;
   text-align: center;
   content: "\f00c";
   font: normal normal normal 14px/1 FontAwesome;
   font-size: 19px;
   width: 22px;
   height: 22px;   
   color: #FFFFFF;
}

dfn.checkhelper
{
    display: inline-block;
    vertical-align: top;
    width: 80%;
    margin-left: 15px;
}

/* FORM > INPUTS > RADIO BUTTON */

.radiobuttons
{
    display: inline-block;
}

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

.radio-wrapper 
{
    margin-top: 15px;
}

.radio-wrapper .label 
{
    display: inline-block;
    max-width: 70vw;
    vertical-align: top;
    margin-left: 12px;
    line-height: 24px;
    font-size: 16px;
}

.radio-wrapper .label a
{
    color: #000000;
    font-weight: 400;
}

.radiowrap,
.radiowrap_checked 
{
    cursor: pointer;
    position: relative;
    display: inline-block;    
    vertical-align: top;
    /*margin-top: 3px;*/
    border-radius: 100%;    
    width: 24px;
    height: 24px;
    border: 2px solid #B0B0B0;
}

.radiowrap:before,
.radiowrap_checked:before
{  
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    width: 14px;
    height: 14px;
}

.radiowrap_checked:before { background-color: #323232; }

dfn.radiohelper
{
    display: block;    
    margin-top: 15px;
    margin-left: 36px;
}

/* FORM > INPUTS > SELECT */

form div.inputwrap div.inputwrapinner .selectbox,
form div.inputwrap div.inputwrapinner .selperiodbox,
form div.inputwrap div.inputwrapinner .limitbox
{
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    height: 42px;
}

form div.inputwrap div.inputwrapinner .selectbox:after,
form div.inputwrap div.inputwrapinner .selperiodbox:after,
form div.inputwrap div.inputwrapinner .limitbox:after
{
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;    
    text-align: center;
    content: "\f078";
    padding: 0px 15px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 17px;
    height: 42px;
    line-height: 42px;
    color: #888;
}

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

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

div.multiselect-tab-wrap
{
}

table.multiselectwrap td
{
    max-width: 70vw;
    overflow-wrap: break-word;
    vertical-align: top;
    padding-top: 15px;
}

table.multiselectwrap td.multiselectgroup
{
    vertical-align: top;    
}

table.multiselect
{
    width: 100%;
}

table.multiselect th,
table.multiselect td
{
    text-align: left;
    padding: 15px 15px 15px 0px;
}

table.multiselect th 
{     
    text-transform: uppercase;    
    white-space: nowrap;
    font-weight: 600;
    border-bottom: 1px solid #F1F1F1;
}

table.multiselect th.multictrl
{
}

table.multiselect th a,
table.multiselect td a
{
}

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

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

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

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

span.multiselect a,
span.multiselect_all a
{
    display: inline-block;
    vertical-align: top;
    margin-left: 12px;
    line-height: 24px;
    font-size: 16px;    
    font-weight: 400;
    color: #000000;
}

/* FORM > INPUTS > ASYNC CHECK */

input[type=text].async_check_text
{
    padding-right: 38px;
}

span.async_check_wrap,
span.pwd_check_wrap
{ 
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 32px;
    height: 40px;
    line-height: 40px;
}

span.pwd_check_wrap
{
    right: 0px;
}

span.async_check_wrap .icon:before,
span.pwd_check_wrap .icon:before
{
    width: 100%;
    height: 38px;
    line-height: 38px;
    text-align: center;
}

/* FORM > INPUT > AUTOCOMPLETE */

.autocomplete-box 
{
    /*position: fixed;*/
    position: absolute; /* deve essere absolute! */
    z-index: 10;
    text-align: left;    
    outline: none;
    cursor: default;
    overflow-y: auto;
    max-height: 320px;
    min-height: 38px;    
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    box-shadow: 0px 0px 8px 0px #C2C2C2;
}

.autocomplete-box a 
{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    height: 38px;
    line-height: 38px;
    padding: 0px 15px;
    font-size: 16px;
    color: #323232;
}

.autocomplete-box a.autocomplete-item-current 
{
    background: #323232;
    color: #FFFFFF;
}

.autocomplete-box a strong 
{
    font-weight: 600;
}

/* FORM > INPUTS > CALENDAR */

div.inputcalendarwrap 
{ 
    position: relative;
    overflow: hidden;
    margin: 0px;    
    box-sizing: content-box;    
    width: 20vw;
    font-size: 16px;
}

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

div.inputcalendarheader .icon:before
{
    font-size: 17px;
    color: #888;
}

div.inputcalendarheader a.title 
{ 
    text-transform: uppercase;
    padding: 0px 10px;    
    color: #323232;
}

div.inputcalendarheader a.title:hover
{
    color: #244B90;
}

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

div.inputcalendarfooter 
{ 
    position: relative;
    text-align: center;
    margin-top: 10px;  
}

div.inputcalendarfooter a.inputcalendartime 
{ 
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    color: #323232;
}                                 

div.inputcalendarwrap div.rapidselector 
{ 
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 0px;
    overflow: hidden;    
    text-align: center;
    background: #FFFFFF;
}

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

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

.__rapidselector-fx-trigger
{ 
    height: calc(100% - 2 * 32px - 10px) !important;
}

div.inputcalendarwrap div.rapidselector a 
{ 
    display: inline-block;
    text-align: center;
    width: 33.33%;    
    letter-spacing: 1px;
    padding: 10px 0px;
    color: #323232;
    border-radius: 2px;
} 

div.inputcalendarwrap div.rapidselector a:hover
{
    background: #F1F1F1;
}

div.inputcalendarwrap div.rapidselector a.selected
{ 
    background: #323232;
    color: #FFFFFF;
}        

div.inputcalendarwrap div.rapidselector div.rapidselector-hours,
div.inputcalendarwrap div.rapidselector div.rapidselector-minutes
{ 
    text-align: left;
    padding-top: 10px;
}

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

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

div.inputcalendarwrap div.rapidselector div.shift_content { width: calc(100% - 2 * 32px); }

div.inputcalendarwrap div.rapidselector a.shift_prev,
div.inputcalendarwrap div.rapidselector a.shift_next
{ 
    background: none;
    margin-top: 72px;        
    width: 30px;
}

div.inputcalendarwrap div.rapidselector a.shift_prev:before,
div.inputcalendarwrap div.rapidselector a.shift_next:before
{
    
    font-size: 17px;
    color: #888;
}

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

table.inputcalendar
{
    width: 100%;
}

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

table.inputcalendar th 
{ 
    font-weight: normal;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    border-bottom: 1px solid #E2E2E2;
}

table.inputcalendar td
{ 
    cursor: pointer;
}

table.inputcalendar td:hover
{
    background-color: #F1F1F1;
}

table.inputcalendar td.nomonthday,
table.inputcalendar td.nomonthday:hover
{ 
    opacity: 0.25;
    background-color: transparent;
}

table.inputcalendar td.selected
{ 
    border-radius: 2px;
    background: #323232;
    color: #FFFFFF;
    border-radius: 4px;
}

/* FORM > INPUTS > POP-UP */                     

div.popup_box 
{
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    height: 42px;
    background-color: #FFFFFF;
    border-radius: 4px;
}

div.popup_box.popup_box_no_manual
{
    border: 1px solid #E2E2E2;
}

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

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

div.popup_box input
{
    cursor: pointer;
}

div.popup_box input.popup_manualtxt 
{ 
    cursor: text;
}

.popup_buttons 
{
    display: inline-block;
    position: absolute;
    top: 1px;
    right: 0px;
    height: 42px;
    
}

.popup_buttons .icon:before
{
    width: 42px;
    line-height: 42px;
    text-align: center;
    color: #888;
}

/* FORM > UPLOAD */

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

div.upload_box  
{ 
    width: 100%;
}

div.upload_dragdrop_msg
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 100%;
    font-size: 16px;
    padding: 0px 10px;
    height: 42px;
    line-height: 42px;
    border: 2px dashed #E2E2E2;   
    border-radius: 4px;
}

div.upload_dragdrop_msg a
{
    text-transform: uppercase;
    font-weight: 600;
}

/* FORM > UPLOAD > AJAX */

div.upload_bar
{
    width: 100%;
}

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

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

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

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

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

/* FORM > UPLOAD AJAX > SELECT */

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

/* FORM > UPLOAD > DRAG & DROP */                                       

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

div.upload_layer .icon
{
    color: #FFFFFF;
}

.upload_layer_close
{ 
    display: block;
    z-index: 2;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #FFFFFF
}

.upload_layer_close:before
{
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 26px;
    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% - (26px / 2));
   height: 26px;
   line-height: 26px;
   padding: 0px 15px;
   font-size: 26px;
   font-weight: 400;
   color: #FFFFFF
}

.upload_layer_box .upload_layer_msg div.upload_loading
{
    display: inline-block;
    margin-right: 15px;
    color: #FFFFFF;
}

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

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

/* MEDIA > EMBED */

embed
{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* FORM > PREVIEWS */

form div.inputwrap div.inputwrapinner .preview 
{
    position: relative;
    width: 100%;
}

/* FORM > PREVIEWS > LIST */

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

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

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

/* FORM > PREVIEWS > GRID */

/*
--preview-width-base: 192px;
    --preview-height-base: 192px;
    --preview-width-small: 175px;    
    --preview-height-small: 175px;
*/

.preview *
{
    box-sizing: border-box;
}

.preview-item
{
    position: relative;
    vertical-align: top;
    display: inline-block;            
    width: 192px;
    margin-top: 15px;
    margin-right: 15px;
}

.preview-item .preview-fname
{
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 20px);
    padding-bottom: 10px;
    /*font-size: var(--font-size-smaller);*/
}

.preview-item .preview-fname span.preview-fsize
{
    display: block;
    color: #888;
}

.preview-item .preview-item-remove
{    
    z-index: 2;
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0px;
    /*
    width: 21px;
    height: 21px;
    line-height: 21px;
    */
}

.preview-item .preview-inner
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 192px;
    background-color: #E2E2E2;
    border-radius: 4px;
}

.preview-item .imgwrap
{
    width: 100%;
    height: 192px;
}

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

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

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

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

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

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

/*
.preview-item.preview-drag,
.preview-item.preview-drag .__imgactive .img
{
    cursor: move;
}
*/

/* FORM > PREVIEWS > GRID > INPUT */

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







/* FORM > ATTACHMENTS */

div.input-attach-drop
{
    display: inline-block;
    width: 100%;
}

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

/* FORM > SIGN-UP */

form.loginform
{
    padding-bottom: 40px;
}

form.loginform div.inputwrap div.inputwrapinner label,
form.registerform div.inputwrap div.inputwrapinner label,
form.contactform div.inputwrap div.inputwrapinner label
{
    display: none; 
}

form.loginform div.inputwrap.error-occurred:after,
form.registerform div.inputwrap.error-occurred:after
{
    top: 2px;
}

form.loginform .buttonbar .btn,
form.registerform .buttonbar .btn,
form.contactform .buttonbar .btn
{
    width: 100%;
    min-width: 100%;
    margin: 0px;    
    background: #008AA9;
}

.login_recovery
{
    display: block;
    width: 100%;
    position: absolute;
    right: 0px;
    bottom: -128px;
    font-size: 16px;
    color: #004a93;
    text-align: center;
}

/* WIZARD  */

.step_messages
{
    font-size: 16px;
    padding-top: 15px;
}

.step_messages span
{
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    color: #323232;    
}

.step_messages.important
{
    font-size: 21px;
    text-align: center;
    margin-bottom: 30px;
}

.step_messages.important span
{
    font-size: 43px;
    margin-top: 30px;
}

/* MESSAGES > STATIC */

.staticmsg,
.loginmsg 
{
    position: absolute;
    z-index: 2;
    top: 282px;
    width: 100%; 
}

.staticmsg .messagebox,
.loginmsg .messagebox 
{
    width: 100%;
    margin-bottom: 15px;
}

.messagebox,
.hintbox 
{
    max-width: 1140px;
    position: relative;
    margin: auto;
    display: block;
    text-align: center;
    letter-spacing: 1px;        
    padding: 15px;
    background: #323232;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    /*border-radius: 12px;*/
}

.messagebox:before,
.hintbox:before
{
    position: absolute;
    display: block;
    content: "\f05a";
    left: 15px;
    top: 15px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 26px
}

.hintbox 
{
    margin-top: 15px;
    background: #00934a;
}

.hintbox.hintwarning
{
    background: #dc3545;
}

.hintbox.hintwarning:before
{
    content: "\f071";
}

/* MESSAGES > ALERTS */ 

.alertmsg
{
    position: fixed;
    z-index: 200;    
    left: 0px;
    width: 70%;
    left: 15%;
    top: -100%;
    opacity: 0;
    background: #323232;
    text-align:  center;
    letter-spacing: 1px;    
    padding: 15px;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
}

.alertmsg:before 
{
    position: absolute;
    display: block;    
    left: 15px;
    top: 15px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 26px;
    content: "\f05a";
}
.alertmsg-fx 
{
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.alertmsg-fx-trigger 
{
    top: 85px;
    opacity: 1;
}

/* MESSAGES > TYPES */

.alertsuccess { background: #00934a; }
.alertsuccess:before { content: "\f00c"; }
.alertwarning { background: #dc3545; }
.alertwarning:before { content: "\f071"; }
.alerterror { background: #dc3545; }
.alerterror:before { content: "\f071"; }

/* MESSAGES > BUTTONS */

.alertclose 
{
    position: absolute;
    right: 15px;
    top: 15px;
}

.alertclose:after 
{
    content: "\f00d";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 26px;
    color: #FFFFFF;
}

@media (max-width: 767px)
{
    .messagebox,
    .hintbox 
    {
        padding: 15px 30px 15px 15px;
    }

    .messagebox:before,
    .hintbox:before
    {
        display: none;
    }

    .alertmsg
    {
        width: 100%;
        left: 0%;
        padding: 15px 30px 15px 15px;
    }

    .alertmsg-fx-trigger 
    {
        top: 64px;
    }

    .alertmsg:before 
    {
        display: none;
    }


    .alertclose 
    {
        right: 4px;
        top: 4px;
    }
}


/* POP-IT > MENUS & SELECTS */

.popitmenu,
.popitselect {
  box-sizing: content-box;
  text-align: left;  
  z-index: 99;
  opacity: 0;
  padding: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;  
  border: 1px solid #E2E2E2;
  box-shadow: 0px 0px 8px 0px #C2C2C2;
}

.popitmenu-itemswrap,
.popitselect-itemswrap
{
    max-height: 400px;
    max-width: 80vw;
    min-width: 20vw;
    overflow-y: auto;
    overflow-x: auto;
}

.popitmenu a,
.popitselect a,
a.popit-like
{
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  color: #323232;
  border-radius: 4px;
}

.popitmenu a:hover,
.popitmenu a[data-focus="1"],
.popitselect a:hover,
.popitselect a[data-focus="1"],
a.popit-like:hover,
a.popit-like[data-focus="1"]
{
  background-color: #323232; !important;
  color: #FFFFFF !important;
}

.popitmenu a.side_icon:before,
.popitselect a.side_icon:before
{
    height: 38px;
    line-height: 38px;  
}

.popitmenu a:hover.side_icon:before,
.popitmenu a[data-focus="1"].side_icon:before,
.popitselect a:hover.side_icon:before,
.popitselect a[data-focus="1"].side_icon:before
{
    color: #FFFFFF;
}

/* FX'S */
.popitmenu-fx {
  -webkit-transition: opacity 0.3s ease-in-out, height 0.3s;
  transition: opacity 0.3s ease-in-out, height 0.3s;
}
.popitmenu-fx-trigger {
  opacity: 1;
}
.popitselect-fx {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.popitselect-fx-trigger {
  opacity: 1;
}
.popitmenu input,
.popitselect input {
  margin-left: 28px;
  margin-bottom: 4px;
  width: calc(100% - 54px);
}

/* POP-IT > BALOONS */

.popitbaloon
{
  box-sizing: content-box;
  text-align: left;
  opacity: 0;
  z-index: 99;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 4px;  
  border: 1px solid #E2E2E2;
  box-shadow: 0px 0px 8px 0px #C2C2C2;
}

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


@media (max-width: 767px)
{
    #popitmodalback 
    { 
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;    
        z-index: 100; 
        background: rgba(0, 0, 0, 0.66);
    }

    .popitmenu,
    .popitselect, 
    .popitbaloon
    {
        box-sizing: border-box;
        text-align: left;  
        position: absolute;
        top: 8%;
        left: 5%;
        width: 90%;
        height: 84%;
        max-height: unset;
        min-height: unset;
        max-width: unset;
        min-width: unset;       
        opacity: 1;        
        box-shadow: none;
    }

    .popitmenu-itemswrap,
    .popitselect-itemswrap
    {        
        max-height: unset;
        min-height: unset;
        max-width: unset;
        min-width: unset;    
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: auto;
    }

    .popitmenu a,
    .popitselect a,
    a.popit-like
    {
        font-size: 14px;
        overflow: unset;
    }

    /* POP-IT > CLOSE */

    .popitclose
    {
        position: absolute;
        top: 8px;
        right: 8px;
        display: block;
        cursor: pointer;
    }

    /* FORM > INPUTS > CALENDAR */

    div.inputcalendarwrap 
    { 
        width: 100%;
        margin-top: 30px;
    }
}


/* TOOLTIPS */

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

/* TOOLTIPS > GENERIC */

.tooltip 
{
  position: absolute;
  display: block;  
  text-align: center;  
  z-index: 99;
  opacity: 0;
  min-width: 120px;
  max-width: 480px;
  min-height: 40px;
  padding: 8px;
  color: #FFFFFF;
  background-color: #000000;
  border-radius: 4px;
}

.tooltip-top 
{
  margin-top: -2px;
  margin-left: 0px;
}

.tooltip-bottom 
{
  margin-top: 48px;
  margin-left: 0px;
}

.tooltip-right 
{
  margin-top: -2px;
  margin-left: 48px;
}

/* TOOLTIPS > GENERIC > FX */

.tooltip-fx 
{
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
.tooltip-fx-trigger 
{
    opacity: 1;  
}

/* I-FRAME > MODAL BACKGROUND */

/* LOADING > OBJECTS */

div.loading_layer 
{ 
    z-index: 2;
    cursor: wait;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: flex-end;    
}

div.loading_layer div.spinner
{
    width: 48px;
    height: 48px;
    margin-bottom: 128px;
}

div.loading_layer div.spinner:before
{
    content: "\f110"; /*"\f021"; */
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 52px;
    width: 48px;
    height: 48px;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

/*
#modalback 
{ 
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;    
    z-index: 10; 
    background: rgba(0, 0, 0, 0.66);
}

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

/* AUX */

.__hidden
{
    display: none !important;
}

.__desktoponly
{
}

.__mobileonly
{
    display: none !important;
}

@media (max-width: 767px)
{
    .__desktoponly
    {
        display: none !important;
    }

    .__mobileonly
    {
        display: unset !important;
    }
}