flexmonster/theme/flexmonster-base.less

Pivot table component for web reporting. The most powerful JavaScript tool to visualize your business data.

/** 
 * Flexmonster Pivot Table & Charts [https://www.flexmonster.com/]
 * September 2025 (v. 2.9.112)
 * Copyright 2025 Flexmonster All rights reserved
 *
 * Flexmonster Pivot Table & Charts is a part of Flexmonster Software that is distributed under the terms and conditions of Flexmonster Software License Agreement: 
 * https://www.flexmonster.com/software-license-agreement/
 *
 * By downloading, installing, and/or otherwise using Flexmonster Pivot Table & Charts, you accept and agree to be bound by and require each of your Representatives, 
 * clients and/or end-users, as the case may be, to be bound by all the terms and conditions of 
 * Flexmonster Software License Agreement: https://www.flexmonster.com/software-license-agreement/
 *
 * Pricing for Commercial License Models can be found on Flexmonster pricing page: 
 * https://www.flexmonster.com/pivot-table-editions-and-pricing/
 */
@import (reference) "default/flexmonster.less";

:root {
    --fm-version: "2.9.112";
}

/* ===== RESET STYLES ===== */
#fm-pivot-view,
#fm-toolbar-wrapper {
    line-height: 1;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    -webkit-text-size-adjust: none;
}

#fm-pivot-view, 
#fm-toolbar-wrapper {
    input[type=text] {
        -webkit-appearance: none;
    }

    /* Hide HTML5 Up and Down arrows. */
    input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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

#fm-pivot-view div, #fm-pivot-view span, #fm-pivot-view applet, #fm-pivot-view object, #fm-pivot-view iframe,
#fm-pivot-view h1, #fm-pivot-view h2, #fm-pivot-view h3, #fm-pivot-view h4, #fm-pivot-view h5, #fm-pivot-view h6, #fm-pivot-view p, #fm-pivot-view blockquote, #fm-pivot-view pre,
#fm-pivot-view a, #fm-pivot-view abbr, #fm-pivot-view acronym, #fm-pivot-view address, #fm-pivot-view big, #fm-pivot-view cite, #fm-pivot-view code,
#fm-pivot-view del, #fm-pivot-view dfn, #fm-pivot-view em, #fm-pivot-view img, #fm-pivot-view ins, #fm-pivot-view kbd, #fm-pivot-view q, #fm-pivot-view s, #fm-pivot-view samp,
#fm-pivot-view small, #fm-pivot-view strike, #fm-pivot-view strong, #fm-pivot-view sub, #fm-pivot-view sup, #fm-pivot-view tt, #fm-pivot-view var,
#fm-pivot-view b, #fm-pivot-view button, #fm-pivot-view u, #fm-pivot-view i, #fm-pivot-view center,
#fm-pivot-view dl, #fm-pivot-view dt, #fm-pivot-view dd, #fm-pivot-view ol, #fm-pivot-view ul, #fm-pivot-view li,
#fm-pivot-view fieldset, #fm-pivot-view form, #fm-pivot-view label, #fm-pivot-view legend,
#fm-pivot-view table, #fm-pivot-view caption, #fm-pivot-view tbody, #fm-pivot-view tfoot, #fm-pivot-view thead, #fm-pivot-view tr, #fm-pivot-view th, #fm-pivot-view td,
#fm-pivot-view article, #fm-pivot-view aside, #fm-pivot-view canvas, #fm-pivot-view details, #fm-pivot-view embed,
#fm-pivot-view figure, #fm-pivot-view figcaption, #fm-pivot-view footer, #fm-pivot-view header,
#fm-pivot-view menu, #fm-pivot-view nav, #fm-pivot-view output, #fm-pivot-view ruby, #fm-pivot-view section, #fm-pivot-view summary,
#fm-pivot-view time, #fm-pivot-view mark, #fm-pivot-view audio, #fm-pivot-view video, 
#fm-toolbar-wrapper div, #fm-toolbar-wrapper span, #fm-toolbar-wrapper applet, #fm-toolbar-wrapper object, #fm-toolbar-wrapper iframe,
#fm-toolbar-wrapper h1, #fm-toolbar-wrapper h2, #fm-toolbar-wrapper h3, #fm-toolbar-wrapper h4, #fm-toolbar-wrapper h5, #fm-toolbar-wrapper h6, #fm-toolbar-wrapper p, #fm-toolbar-wrapper blockquote, #fm-toolbar-wrapper pre,
#fm-toolbar-wrapper a, #fm-toolbar-wrapper abbr, #fm-toolbar-wrapper acronym, #fm-toolbar-wrapper address, #fm-toolbar-wrapper big, #fm-toolbar-wrapper cite, #fm-toolbar-wrapper code,
#fm-toolbar-wrapper del, #fm-toolbar-wrapper dfn, #fm-toolbar-wrapper em, #fm-toolbar-wrapper img, #fm-toolbar-wrapper ins, #fm-toolbar-wrapper kbd, #fm-toolbar-wrapper q, #fm-toolbar-wrapper s, #fm-toolbar-wrapper samp,
#fm-toolbar-wrapper small, #fm-toolbar-wrapper strike, #fm-toolbar-wrapper strong, #fm-toolbar-wrapper sub, #fm-toolbar-wrapper sup, #fm-toolbar-wrapper tt, #fm-toolbar-wrapper var,
#fm-toolbar-wrapper b, #fm-toolbar-wrapper button, #fm-toolbar-wrapper u, #fm-toolbar-wrapper i, #fm-toolbar-wrapper center,
#fm-toolbar-wrapper dl, #fm-toolbar-wrapper dt, #fm-toolbar-wrapper dd, #fm-toolbar-wrapper ol, #fm-toolbar-wrapper ul, #fm-toolbar-wrapper li,
#fm-toolbar-wrapper fieldset, #fm-toolbar-wrapper form, #fm-toolbar-wrapper label, #fm-toolbar-wrapper legend,
#fm-toolbar-wrapper table, #fm-toolbar-wrapper caption, #fm-toolbar-wrapper tbody, #fm-toolbar-wrapper tfoot, #fm-toolbar-wrapper thead, #fm-toolbar-wrapper tr, #fm-toolbar-wrapper th, #fm-toolbar-wrapper td,
#fm-toolbar-wrapper article, #fm-toolbar-wrapper aside, #fm-toolbar-wrapper canvas, #fm-toolbar-wrapper details, #fm-toolbar-wrapper embed,
#fm-toolbar-wrapper figure, #fm-toolbar-wrapper figcaption, #fm-toolbar-wrapper footer, #fm-toolbar-wrapper header,
#fm-toolbar-wrapper menu, #fm-toolbar-wrapper nav, #fm-toolbar-wrapper output, #fm-toolbar-wrapper ruby, #fm-toolbar-wrapper section, #fm-toolbar-wrapper summary,
#fm-toolbar-wrapper time, #fm-toolbar-wrapper mark, #fm-toolbar-wrapper audio, #fm-toolbar-wrapper video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: none;
    transition: none;
    border-collapse: collapse;
    border-spacing: 0;
}

#fm-pivot-view ol, #fm-pivot-view ul,
#fm-toolbar-wrapper ol, #fm-toolbar-wrapper ul {
    list-style: none;
}

#fm-pivot-view table,
#fm-toolbar-wrapper table {
    border-collapse: collapse;
    border-spacing: 0;
}

#fm-pivot-view caption, #fm-pivot-view th, #fm-pivot-view td,
#fm-toolbar-wrapper caption, #fm-toolbar-wrapper th, #fm-toolbar-wrapper td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

#fm-pivot-view q, #fm-pivot-view blockquote,
#fm-toolbar-wrapper q, #fm-toolbar-wrapper blockquote {
    quotes: none;
}

    #fm-pivot-view q:before, #fm-pivot-view q:after, #fm-pivot-view blockquote:before, #fm-pivot-view blockquote:after,
    #fm-toolbar-wrapper q:before, #fm-toolbar-wrapper q:after, #fm-toolbar-wrapper blockquote:before, #fm-toolbar-wrapper blockquote:after {
        content: "";
        content: none;
    }

#fm-pivot-view img,
#fm-toolbar-wrapper img {
    max-width: 100%;
    height: auto;
    height: initial;
    border: none;
}

#fm-pivot-view a,
#fm-toolbar-wrapper a {
    text-decoration: none;
}

#fm-pivot-view article, #fm-pivot-view aside, #fm-pivot-view details, #fm-pivot-view figcaption, #fm-pivot-view figure, #fm-pivot-view footer, #fm-pivot-view header, #fm-pivot-view main, #fm-pivot-view menu, #fm-pivot-view nav, #fm-pivot-view section, #fm-pivot-view summary,
#fm-toolbar-wrapper article, #fm-toolbar-wrapper aside, #fm-toolbar-wrapper details, #fm-toolbar-wrapper figcaption, #fm-toolbar-wrapper figure, #fm-toolbar-wrapper footer, #fm-toolbar-wrapper header, #fm-toolbar-wrapper main, #fm-toolbar-wrapper menu, #fm-toolbar-wrapper nav, #fm-toolbar-wrapper section, #fm-toolbar-wrapper summary {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#fm-pivot-view :focus,
#fm-toolbar-wrapper :focus {
    outline: none;
}

#fm-pivot-view h1,
#fm-pivot-view h2,
#fm-pivot-view h3,
#fm-pivot-view h4,
#fm-pivot-view h5,
#fm-pivot-view h6,
#fm-toolbar-wrapper h1,
#fm-toolbar-wrapper h2,
#fm-toolbar-wrapper h3,
#fm-toolbar-wrapper h4,
#fm-toolbar-wrapper h5,
#fm-toolbar-wrapper h6  {
    font-weight: normal;
}
/*-----------STANDARD RESET END-----------------*/

@font-face {
  font-family: "flexmonster-icons";
  src: url("../assets/flexmonster-icons.woff?v2.9.94") format("woff"), 
       url("../assets/flexmonster-icons.ttf?v2.9.94") format("truetype"), 
       url("../assets/flexmonster-icons.svg#flexmonster-icons?v2.9.94") format("svg");
  font-weight: normal;
  font-style: normal;
}

.rotate(@deg: 90) {
    -webkit-transform: rotate(@deg * 1deg);
    -moz-transform: rotate(@deg * 1deg);
    transform: rotate(@deg * 1deg);
    -o-transform: rotate(@deg * 1deg);
    @IEdeg: round((@deg / 90), 0);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@IEdeg);
}

/* === Do NOT remove and do NOT change .fm-csscheck class === */
.fm-csscheck {
    font-family: 'flexmonster';
}

/* ===== PIVOT UI ===== */
#fm-pivot-view .fm-ui,
#fm-pivot-view .fm-ui span,
#fm-pivot-view .fm-ui div,
#fm-pivot-view .fm-ui p,
#fm-pivot-view .fm-ui a,
#fm-pivot-view .fm-ui table,
#fm-pivot-view .fm-ui table th,
#fm-pivot-view .fm-ui table tr,
#fm-pivot-view .fm-ui table td,
#fm-pivot-view .fm-ui ul,
#fm-pivot-view .fm-ui li,
#fm-pivot-view .fm-ui input,
#fm-pivot-view .fm-ui textarea,
#fm-pivot-view .fm-ui select,
#fm-toolbar-wrapper .fm-toolbar-ui,
#fm-toolbar-wrapper .fm-toolbar-ui span,
#fm-toolbar-wrapper .fm-toolbar-ui div,
#fm-toolbar-wrapper .fm-toolbar-ui p,
#fm-toolbar-wrapper .fm-toolbar-ui a,
#fm-toolbar-wrapper .fm-toolbar-ui table,
#fm-toolbar-wrapper .fm-toolbar-ui table th,
#fm-toolbar-wrapper .fm-toolbar-ui table tr,
#fm-toolbar-wrapper .fm-toolbar-ui table td,
#fm-toolbar-wrapper .fm-toolbar-ui ul,
#fm-toolbar-wrapper .fm-toolbar-ui li,
#fm-toolbar-wrapper .fm-toolbar-ui input,
#fm-toolbar-wrapper .fm-toolbar-ui textarea,
#fm-toolbar-wrapper .fm-toolbar-ui select {
    font-family: @font-family;
    font-size: @font-size;
    text-align: left;
    color: @theme-text-color;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-shadow: none;
    float: none;
    line-height: normal;
}

#fm-pivot-view .fm-ui-mobile,
#fm-pivot-view .fm-ui-mobile span,
#fm-pivot-view .fm-ui-mobile div,
#fm-pivot-view .fm-ui-mobile p,
#fm-pivot-view .fm-ui-mobile a,
#fm-pivot-view .fm-ui-mobile table,
#fm-pivot-view .fm-ui-mobile th,
#fm-pivot-view .fm-ui-mobile tr,
#fm-pivot-view .fm-ui-mobile td,
#fm-pivot-view .fm-ui-mobile ul,
#fm-pivot-view .fm-ui-mobile li,
#fm-pivot-view .fm-ui-mobile input,
#fm-pivot-view .fm-ui-mobile textarea,
#fm-pivot-view .fm-ui-mobile select,
#fm-pivot-view .fm-ui-mobile option {
    font-size: @font-size-mobile;
    -webkit-border-radius: 0;
    border-radius: 0;
}

#fm-pivot-view .fm-ui-mobile .fm-grid-layout div.fm-cell.fm-header{
    line-height: @font-size-mobile;
}

#fm-pivot-view .fm-ui-mobile input[type="text"] {
    height: 28px;
    line-height: 28px;
    border: @ui-border;
    background-color: rgb(255, 255, 255);
}

#fm-pivot-view .fm-ui-mobile select {
    background-color: rgb(255, 255, 255);
}

#fm-pivot-view .fm-ui a {
    font-weight: normal;
}

#fm-pivot-view .fm-ui ul > li:before {
    width: 0px !important;
    height: 0px !important;
    margin: 0;
    padding: 0;
    border: 0;
}

#fm-pivot-view a.fm-ui {
    color: inherit;
    font-weight: normal;
}

    #fm-pivot-view a.fm-ui:hover {
        color: inherit;
        font-weight: normal;
        text-decoration: none;
    }

#fm-pivot-view input.fm-ui {
    font-size: 12px;
    outline: none;
}

#fm-pivot-view input.fm-ui-mobile {
    font-size: @font-size-mobile;
}

#fm-pivot-view span.fm-ui {
    font-size: 11px;
}

#fm-pivot-view span.fm-ui-mobile {
    font-size: @font-size-mobile;
}

#fm-pivot-view div.fm-ui-clear {
    clear: both;
}

#fm-pivot-view .fm-pointer-events-none {
    pointer-events: none;
}

#fm-pivot-view input[type=text].fm-ui-text-input,
#fm-pivot-view input[type=number].fm-ui-text-input {
    /*vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;*/
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    height: 38px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
    text-align: left;
    color: @ui-element-text-color;
    font-size: @ui-element-font-size;
    background: @background-ui-element-base-color;
    border: @ui-element-border;
}

    #fm-pivot-view input[type=text].fm-ui-text-input.fm-ui-prompt {
        color: @ui-prompt-color;
        font-style: italic;
    }

    // #fm-pivot-view input[type=text].fm-ui-text-input.fm-ui-mobile {
    //     height: 30px;
    // }

#fm-pivot-view .fm-ui textarea.fm-ui-text-area {
    resize: none;
    border: @ui-border;
    padding: 1px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    color: @ui-text-area-color;
    background: @ui-text-area-background-color;
    font-size: @ui-element-font-size;
}

    #fm-pivot-view .fm-ui textarea.fm-ui-text-area:focus {
        outline: none;
    }
// icons
#fm-pivot-view {
    [class^="fm-ui-icon-"]:before, 
    [class*=" fm-ui-icon-"]:before, 
    .fm-ui-icon:before {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: flexmonster-icons !important;
        speak-as: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .fm-icon-act_add:before {
        content: "\e900";
    }

    .fm-icon-act_calc:before {
        content: "\e901";
    }

    .fm-icon-act_check:before {
        content: "\e902";
    }

    .fm-icon-act_close:before {
        content: "\e903";
    }

    .fm-icon-act_close_small:before {
        content: "\e904";
    }

    .fm-icon-act_filter:before {
        content: "\e905";
    }

    .fm-icon-act_font:before {
        content: "\e906";
    }

    .fm-icon-act_move:before {
        content: "\e907";
    }

    .fm-icon-act_roll_down:before {
        content: "\e908";
    }

    .fm-icon-act_roll_up:before {
        content: "\e909";
    }

    .fm-icon-act_search:before {
        content: "\e90a";
    }

    .fm-icon-act_sigma:before {
        content: "\e90b";
    }

    .fm-icon-act_table_settings:before {
        content: "\e90c";
    }

    .fm-icon-act_table_sort:before {
        content: "\e90d";
    }

    .fm-icon-act_trash:before {
        content: "\e90e";
    }

    .fm-icon-arrow_down:before {
        content: "\e90f";
    }

    .fm-icon-arrow_left:before {
        content: "\e910";
    }

    .fm-icon-arrow_right:before {
        content: "\e911";
    }

    .fm-icon-arrow_up:before {
        content: "\e912";
    }

    .fm-icon-calc_abs:before {
        content: "\e913";
    }

    .fm-icon-calc_and:before {
        content: "\e914";
    }

    .fm-icon-calc_assigne:before {
        content: "\e915";
    }

    .fm-icon-calc_degree:before {
        content: "\e916";
    }

    .fm-icon-calc_divide:before {
        content: "\e917";
    }

    .fm-icon-calc_equal:before {
        content: "\e918";
    }

    .fm-icon-calc_if:before {
        content: "\e919";
    }

    .fm-icon-calc_less:before {
        content: "\e91a";
    }

    .fm-icon-calc_less_equal:before {
        content: "\e91b";
    }

    .fm-icon-calc_max:before {
        content: "\e91c";
    }

    .fm-icon-calc_min:before {
        content: "\e91d";
    }

    .fm-icon-calc_minus:before {
        content: "\e91e";
    }

    .fm-icon-calc_more:before {
        content: "\e91f";
    }

    .fm-icon-calc_more_equal:before {
        content: "\e920";
    }

    .fm-icon-calc_multiply:before {
        content: "\e921";
    }

    .fm-icon-calc_notequal:before {
        content: "\e922";
    }

    .fm-icon-calc_or:before {
        content: "\e923";
    }

    .fm-icon-calc_plus:before {
        content: "\e924";
    }

    .fm-icon-chart_direction_xy:before {
        content: "\e925";
    }

    .fm-icon-count_down:before {
        content: "\e926";
    }

    .fm-icon-count_up:before {
        content: "\e927";
    }

    .fm-icon-dd_connect_csv:before {
        content: "\e928";
    }

    .fm-icon-dd_connect_json:before {
        content: "\e929";
    }

    .fm-icon-dd_export_bar:before {
        content: "\e92a";
    }

    .fm-icon-dd_export_bar_hor:before {
        content: "\e92b";
    }

    .fm-icon-dd_export_bar_lane:before {
        content: "\e92c";
    }

    .fm-icon-dd_export_bar_stack:before {
        content: "\e92d";
    }

    .fm-icon-dd_export_line:before {
        content: "\e92e";
    }

    .fm-icon-dd_export_pie:before {
        content: "\e92f";
    }

    .fm-icon-dd_export_scatter:before {
        content: "\e930";
    }

    .fm-icon-dd_format:before {
        content: "\e931";
    }

    .fm-icon-dd_format_1:before {
        content: "\e932";
    }

    .fm-icon-dd_open_local:before {
        content: "\e933";
    }

    .fm-icon-dd_open_remote:before {
        content: "\e934";
    }

    .fm-icon-dd_save_exel:before {
        content: "\e935";
    }

    .fm-icon-dd_save_html:before {
        content: "\e936";
    }

    .fm-icon-dd_save_image:before {
        content: "\e937";
    }

    .fm-icon-dd_save_pdf:before {
        content: "\e938";
    }

    .fm-icon-dd_save_print:before {
        content: "\e939";
    }

    .fm-icon-direction_direction_y:before {
        content: "\e93a";
    }

    .fm-icon-menu_charts:before {
        content: "\e93b";
    }

    .fm-icon-menu_connect:before {
        content: "\e93c";
    }

    .fm-icon-menu_export:before {
        content: "\e93d";
    }

    .fm-icon-menu_fields:before {
        content: "\e93e";
    }

    .fm-icon-menu_format:before {
        content: "\e93f";
    }

    .fm-icon-menu_fullscreen_close:before {
        content: "\e940";
    }

    .fm-icon-menu_fullscreen_open:before {
        content: "\e941";
    }

    .fm-icon-menu_grid:before {
        content: "\e942";
    }

    .fm-icon-menu_open:before {
        content: "\e943";
    }

    .fm-icon-menu_options:before {
        content: "\e944";
    }

    .fm-icon-menu_save:before {
        content: "\e945";
    }

    .fm-icon-notif_arrow:before {
        content: "\e946";
    }

    .fm-icon-notif_confirm:before {
        content: "\e947";
    }

    .fm-icon-notif_info:before {
        content: "\e948";
    }

    .fm-icon-notif_warning:before {
        content: "\e949";
    }
}
.fm-ui-icon {
    display: block;
    position: absolute;
    font-family: 'flexmonster-icons' !important;
    speak-as: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    width: auto;
    height: auto;
    height: initial;
    background: transparent;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// mixins
.fm-ui-vam {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.fm-ui-icon-vam {
    .fm-ui-icon;
    .fm-ui-vam;
}

.fm-ui-ham {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.fm-ui-icon-ham {
    .fm-ui-icon;
    .fm-ui-ham;
}

.fm-ui-icon-c {
    .fm-ui-icon;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.fm-shadow {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

// labels 
#fm-pivot-view {
    span.fm-ui-label {
        color: @ui-label-color;
        font-size: @ui-label-font-size;

        * {
            font-size: @ui-label-font-size;
        }

        b {
            font-weight: bold;
        }
    }

    span.fm-ui-label-light {
        color: @ui-label-color-light;
    }
}
// buttons
#fm-pivot-view,
#fm-toolbar-wrapper {
    button.fm-ui-btn,
    a.fm-ui-btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-transform: uppercase;
        position: relative;
        outline: none;
        border: none;
        border-radius: @ui-btn-border-radius;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        font-size: @ui-btn-font-size;
        font-weight: bold;
        padding: 10px 12px;
        letter-spacing: 0.5px;
        min-width: 90px;
        color: @ui-btn-text-color;
        border: @ui-border-dark;
        background-color: @background-ui-element-base-color;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &:hover {
            font-weight: bold;
            color: @ui-btn-dark-color-hover;
            border-color: @ui-btn-dark-color-hover;
            background-color: @ui-background-light;
        }

        &:hover,
        &:focus,
        &:active {
            outline: none;
        }
    }


    

    a.fm-ui-btn-dark,
    button.fm-ui-btn-dark {
        color: @ui-btn-dark-text-color;
        background: @ui-background-dark;

        &:hover {
            font-weight: bold;
            color: @ui-btn-dark-text-color;
            background: @ui-btn-dark-color-hover;
        }

        &:disabled {
            opacity: 1;
            pointer-events: none;
            cursor: default;
            color: lighten(@ui-btn-dark-text-color, 30%);
            background: lighten(@ui-background-dark, 30%);
        }
    }

    a.fm-ui-btn-light,
    button.fm-ui-btn-light {
        background: @ui-background-superlight;
        border: @ui-element-border;
        color: @ui-btn-light-text-color;
        font-weight: normal;
        text-transform: none;
        padding: 11px 11px;

        &:hover {
            background: @ui-btn-color-hover;//#f8f8f8;
            border-color: @ui-border-color-light;
            color: @ui-btn-light-text-color;
            font-weight: normal;
        }
    }

    a.fm-ui-btn-superlight,
    button.fm-ui-btn-superlight {
        background: @background-ui-element-base-color;
        border: @ui-element-border;
        color: @ui-btn-light-text-color;
        font-weight: normal;
        text-transform: none;
        padding: 11px 11px;
        padding-top: 9px;

        &:hover {
            background: @ui-btn-color-light-hover;
            border-color: @ui-border-color-light;
            color: @ui-btn-light-text-color;
            font-weight: normal;
        }
    }

    a.fm-ui-btn.fm-ui-btn-close,
    button.fm-ui-btn.fm-ui-btn-close {
        font-size: 0;
        border: none;
        background: none;
        min-width: auto;
        min-width: initial;
        width: 30px;
        height: 30px;
        padding: 2px;
        &:before {
            .fm-ui-icon;
            content: "\e903";
            font-size: 26px;
            position: static;
        }
    }

    .fm-ui-btns-row {
        font-size: 0;

        .fm-ui-btn {
            margin-right: 20px;
            height: 38px;
            &:last-child {
               margin-right: 0;
            }
        }
    }
}

// toggle button
#fm-pivot-view {
    a.fm-ui-toggle-btn,
    button.fm-ui-toggle-btn {
        color: @ui-btn-toggle-text-color;
        font-size: @ui-btn-font-size;
        line-height: 36px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        border: @ui-element-border;
        border-radius: @ui-btn-border-radius;
        background: @background-ui-element-base-color;

        &.fm-selected {
            color: @ui-btn-toggle-selected-text-color;
            background: @ui-background-light;
        }

        &:hover {
            color: @ui-btn-toggle-selected-text-color;
            background: @ui-btn-color-hover;
        }
    }

    a.fm-ui-toggle-btn-dark,
    button.fm-ui-toggle-btn-dark {
        color: @ui-btn-toggle-selected-text-color;
        background: @ui-background-light;

        &.fm-selected {
            color: @ui-btn-toggle-dark-selected-text-color;
            background: @ui-background-dark;
            border-color: @ui-border-color-dark;
    
            &:hover {
                background: @ui-btn-dark-color-hover;
                border-color: @ui-btn-dark-color-hover;
            }
        }
    }
}

#fm-pivot-view a.fm-ui-link-btn {
    background: none;
    font-size: 12px;
    text-decoration: underline;
    line-height: 1;
    width: auto;
    width: initial;
    height: auto;
    height: initial;
    border: none;
    padding: 0;
    cursor: pointer;
    
    &:hover {
        background: none;
        text-decoration: none;
    }

    &.fm-ui-pressed {
        background: none;
        text-decoration: underline;
    }
}

// checkbox
#fm-pivot-view {
    a.fm-ui-checkbox {
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: inline-block;
        vertical-align: middle;

        .fm-ui-label {
            padding-left: 30px;
            position: relative;
            line-height: 1.2;
            color: @ui-element-text-color;
            font-size: @ui-element-font-size;

            &:before {
                content: '';
                display: inline-block;
                box-sizing: border-box;
                position: absolute;
                left: 0;
                top: 0;
                width: 18px;
                height: 18px;
                border: @ui-element-border;
                background: @background-ui-element-base-color;
            }

            &:before:hover {
                border-color: @ui-border-color;
            }

            &:after {
                .fm-ui-icon-vam;
                opacity: 0;
                content: '\e947';
                color: @ui-element-checkbox-color;
                font-size: 20px;
                left: -1px;
            }
        }


        &.fm-selected {
            .fm-ui-label:after {
                opacity: 1;
                font-weight: @ui-element-checkbox-font-weight;
                width: 0;
            }

            .fm-ui-label:before {
                border: 1px solid @ui-background-dark;
                background: @ui-background-dark;
            }
        }

        &.fm-ui-semi-selected {
            .fm-ui-label:after {
                content: '';
                border: 5px solid @ui-background-dark;
                background-color: @ui-background-dark;
                width: 0;
                height: 0;
                left: 4px;
                top: 9px;
                opacity: 1;
            }
        }
    }
}

.fm-ui-arrow-up {
    &:before,
    &:after {
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    &:before {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 5.5px 6px 5.5px;
        border-color: transparent transparent @ui-element-border-color transparent;
        top: -7px;
    }

    &:after {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 4.5px 6px 4.5px;
        border-color: transparent transparent @background-ui-element-base-color transparent;
        top: -6px;
    }
}

// dropdown
#fm-toolbar-wrapper,
#fm-pivot-view {
    div.fm-ui-dropdown {
        text-align: left;
        display: inline-block;
        vertical-align: top;
        width: auto;
        width: initial;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .fm-ui-dropdown-btn {
            display: block;
            position: relative;
            background-color: @background-ui-element-base-color;
            text-align: left;
            border: @ui-element-border;
            border-radius: 0;
            padding: 9px 25px 10px 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            cursor: pointer;
            height: 38px;

            .fm-ui-label {
                color: @ui-element-text-color;
                font-size: @ui-element-font-size;
                vertical-align: top;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                width: 100%;
                line-height: 18px;
            }
        }

        .fm-ui-dropdown-btn:after {
            .fm-ui-icon-vam;
            content: "\e908";
            right: 8px;
            font-size: 21px;
            color: @ui-icon-color;
            margin-top: -1px;
        }

        .fm-ui-dropdown-btn.fm-selected:after {
            content: "\e909";
        }

        .fm-ui-dropdown-btn.fm-selected + .fm-ui-dropdown-list {
            margin-top: 5px;
            visibility: visible;
            opacity: 1;
        }

        .fm-ui-dropdown-list {
            .fm-ui-arrow-up;
            .fm-shadow;

            display: block;
            position: absolute;
            z-index: 3;
            left: 0;
            top: 100%;
            border: @ui-element-border;
            margin-top: 20px;
            visibility: hidden;
            min-width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            opacity: 1;
            background: @background-ui-element-base-color;

            ul {
                overflow-y: auto;
                max-height: 300px;

                li {
                    display: block;
                    border-bottom: @ui-element-inner-border;
                    padding: 9px 9px;
                    cursor: pointer;
                    position: relative;

                    .fm-ui-label {
                        color: @ui-element-text-color;
                        font-size: @ui-element-font-size;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: inline-block;
                        width: 100%;
                    }

                    &:last-child {
                        border-bottom: none;
                    }

                    &:hover {
                        background: @ui-background-light;
                    }

                    &.fm-selected {
                        background: @ui-background-light;
                        padding-right: 32px;
                        position: relative;

                        &:after {
                            .fm-ui-icon-vam;
                            content: '\e902';
                            color: @ui-icon-color;
                            right: 6px;
                            font-size: 22px;
                            margin-top: -2px;
                        }
                    }
                }
            }
        }

    }
}

/* popup */
#fm-pivot-view {
    div.fm-ui-window {
        .fm-shadow;
        max-width: 100%;
        background: @background-base-color;
        margin: 0 auto 0;
        border: @ui-pop-up-border;
        padding: 24px 30px 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        z-index: 7;

        .fm-popup-header {
            min-height: 40px;
            margin-bottom: 10px;
            
            &.fm-ph-simple {
                margin-bottom: 24px;
            }

            .fm-popup-icons-row {
                margin-bottom: 25px;
                margin-top: 7px;
            }

            .fm-ui-btns-row {
               position: absolute;
               right: 30px;
            }
        }

        .fm-popup-title {
            color: @ui-title-color;
            font-size: @ui-title-font-size;
            display: block;
            padding: 5px 0;
        }

        .fm-popup-subtitle {
            color: @ui-subtitle-color;
            font-size: @ui-subtitle-font-size;
            margin-top: 5px;
            display: block;
        }
    }

    div.fm-ui-popup {
        z-index: 12;

        &.fm-layout-mobile {
            padding: 20px;

            .fm-popup-subtitle {
                display: none;
            }

            .fm-ui-btns-row {
                right: 20px;
            }
        }

        &.fm-layout-mobile-small {
            .fm-popup-header {
                margin-bottom: 10px;
                
                .fm-ui-col {
                    width: 100%;
                    margin-bottom: 10px;
                }

                .fm-ui-btns-row {
                    position: relative;
                    right: initial;
                    right: auto;
                    text-align: left;

                    .fm-ui-btn {
                        width: ~"calc(50% - 5px)";
                        width: ~"-webkit-calc(50% - 5px)";
                        margin-right: 10px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }

                .fm-popup-title {
                    font-size: @ui-title-font-size-smaller;
                    line-height: 1;
                }
            }
        }
    }
}

// datepicker
#fm-pivot-view {
    div.fm-ui-datepicker {
        .fm-ui-dp-header {
            text-align: center;
            padding: 10px;
            font-weight: bold;
            border-bottom: @ui-border-light;
            position: relative;

            .fm-ui-dp-month {
                margin-right: 5px;
            }

            .fm-ui-dp-year, .fm-ui-dp-month {
                cursor: pointer;
                text-decoration: underline;
                &:hover {
                    text-decoration: none;
                }
                &.fm-disabled {
                    cursor: auto;
                    text-decoration: none;
                }
            }

            .fm-ui-btn {
                padding: 0;
                border: none;
                min-width: auto;
                position: absolute;
                background: none;
                width: 37px;
                height: 37px;
                top: 0;

                &:before {
                    .fm-ui-icon;
                    .rotate(90);
                    font-size: 24px;
                    top: 6px;
                    left: 6px;
                }
                &.fm-prev-btn {
                    left: 0;
                    &:before {
                        content: "\e908";
                    }
                }
                &.fm-next-btn {
                    right: 0;
                    &:before {
                        content: "\e909";
                    }
                }
            }
        }
        .fm-ui-dp-week {
            padding: 10px;
            border-bottom: @ui-border-light;
            background-color: @ui-background-superlight;
            
            .fm-ui-dp-day-title {
                text-align: center;
                color: @ui-label-color-light;
            }
        }
        .fm-ui-dp-dates {
            padding: 10px 10px;

            .fm-ui-dp-date-label {
                text-align: center;
                padding: 5px;
                cursor: pointer;
                position: relative;

                &:hover {
                    background-color: @ui-background-light;
                }
                &.fm-highlighted {
                    font-weight: bold;
                }
                &.fm-muted {
                    font-weight: normal;
                    color: @ui-label-color-light;
                }
                &.fm-selected {
                    font-weight: normal;
                    color: @background-base-color;
                    background-color: @ui-background-dark;
                    border: 1px solid @ui-background-dark;
                }
            }
        }
        .fm-ui-dp-col-7 {
            width: 14.285%;
            display: inline-block;
        }
        .fm-ui-dp-col-5 {
            width: 20%;
            display: inline-block;
        }
        .fm-ui-dp-col-3 {
            width: 33.333%;
            display: inline-block;
        }
        .fm-ui-dp-footer {
            display: none;
            text-align: center;
            margin-bottom: 5px;

            .fm-cancel-btn {
                display: inline-block;
                padding: 10px;
                color: @ui-label-color-light;
            }
        }

        .fm-ui-dp-time {
            padding: 10px;
            border-top: @ui-border-light;
            text-align: center;

            .fm-ui-label {
                margin-right: 5px;
            }

            input.fm-ui-dp-time-input {
                padding: 2px 1px 2px 4px;
                border: @ui-border-light;
                color: @ui-element-text-color;
                font-size: @ui-element-font-size;
                text-align: center;
            }
        }

        &.fm-ui-dp-view-months {
            .fm-ui-dp-header {
                .fm-ui-btn {
                    display: none;
                }
            }
            .fm-ui-dp-week {
                display: none;
            }
            .fm-ui-dp-dates {
                padding-bottom: 0;
            }
            .fm-ui-dp-footer {
                display: block;
            }
        }

        &.fm-ui-dp-view-years {
            .fm-ui-dp-header {
                .fm-ui-dp-month {
                    display: none;
                }
            }
            .fm-ui-dp-week {
                display: none;
            }
            .fm-ui-dp-dates {
                padding-bottom: 0;
            }
            .fm-ui-dp-footer {
                display: block;
            }
        }
    }

    div.fm-ui-datepicker-input {
        position: relative;

        &.fm-opened {
            .fm-ui-datepicker-dropdown {
                display: block;
            }
        }

        .fm-ui-datepicker-dropdown {
            .fm-ui-arrow-up;
            .fm-shadow;
            display: none;
            background-color: @background-base-color;
            border: @ui-border-light;
            position: absolute;
            width: 300px;
            right: 0;
            top: 100%;
            margin-top: 5px;
            z-index: 1;

            &:after, &:before {
                left: auto;
            }
            &:after {
                right: 8px;
            }
            &:before {
                right: 6px;
            }
        }

        .fm-ui-datepicker-icon {
            right: 0;
            font-size: 20px;
            color: @theme-color;
            cursor: pointer;
            width: 35px;
            height: 100%;
            position: absolute;

            
            &:after {
                .fm-ui-icon-c;
                content: "\e900";
            }

        }
    }
}

#fm-toolbar-wrapper,
#fm-pivot-view {
    .fm-ui {
        .fm-ui-row {
            font-size: 0;
        }

        .fm-ui-col,
        .fm-ui-col-2,
        .fm-ui-col-3,
        .fm-ui-col-9 {
            display: inline-block;
            vertical-align: top;
            min-height: 1px;
        }

        .fm-ui-col-2 {
            width: 50%;
        }

        .fm-ui-col-3 {
            margin-right: 30px;
            width: ~"-webkit-calc(33.33% - 20px)";
            width: ~"calc(33.33% - 20px)";
            
            &:nth-child(3n+3) {
                margin-right: 0;
            }
        }

        .fm-ui-col-9 {
            margin-right: 1px;
            margin-bottom: 1px;
            width: ~"-webkit-calc(11.11% - 0.9px)";
            width: ~"calc(11.11% - 0.9px)";
            
            &:nth-child(9n+9) {
                margin-right: 0;
            }
        }

        .fm-vam {
            vertical-align: middle;
        }

        .fm-vat {
            vertical-align: top;
        }

        .fm-tar {
            text-align: right;
        }

        .fm-tal {
            text-align: left;
        }

        .fm-tac {
            text-align: center;
        }

        .fm-mb30 {
            margin-bottom: 30px;
        }
    }
}

#fm-pivot-view {
    .fm-helper {
        .fm-shadow;
        display: inline-block;
        background: @ui-draggable-item-backgound-color;
        opacity: 0.9;
        padding: 10px 9px;
        font-family: @font-family;
        font-size: @ui-label-font-size;
        font-weight: bold;
        border: @ui-border-light;
        pointer-events: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 250px;
        color: @ui-draggable-item-text-color;

        .fm-label {
            width: ~"calc(100% - 20px)";
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        
        .fm-drag-icon {
            float: right;
            position: relative;
        }

        &.fm-no-drop {
            .fm-drag-icon:after {
                .fm-ui-icon;
                content: "\ea0e";
                color: @theme-color-danger;
                right: 0;
            }  
        }

        &.fm-drag-remove {
            .fm-drag-icon::after {
                .fm-ui-icon;
                content: "\e90e";
                color: @theme-color-danger;
                right: -4px;
                top: -4px;
                font-size: 21px;
            }  
        }
    }
    
    @media (max-width: 1370px) and (pointer: coarse) {
        .fm-helper {
            .fm-shadow;
            display: inline-block;
            background: @ui-draggable-item-backgound-color;
            opacity: 0.9;
            padding: 10px 9px;
            font-family: @font-family;
            font-size: @ui-label-font-size;
            font-weight: bold;
            border: @ui-border-light;
            pointer-events: none;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 250px;
            color: @ui-draggable-item-text-color;
    
            .fm-label {
                width: ~"calc(100% - 20px)";
                display: inline-block;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            
            .fm-drag-icon {
                float: right;
                position: relative;
            }
    
            &.fm-no-drop {
                .fm-drag-icon:after {
                    .fm-ui-icon;
                    content: "\ea0e";
                    color: @theme-color-danger;
                    right: 0;
                }  
            }
    
            &.fm-drag-remove {
                border-color: red;
                border-width: 2px;
                display: flex;

                .fm-label {
                    display: flex;
                    padding-left: 10px;
                }

                .fm-drag-icon::after {
                    .fm-ui-icon;
                    content: "\e90e";
                    color: @theme-color-danger;
                    left: -8px;
                    top: -5px;
                    font-size: 21px;
                }  
            }
        } 
    }

    .fm-header-helper {
        text-transform: uppercase;
        border: none;
        background: @ui-draggable-item-backgound-color;
        padding: 8px 6px;
        font-size: @font-size;
        border: @ui-border;
        cursor: move;

        &.fm-drag-remove {
            border-color: red;
            border-width: 2px;

            .fm-remove-icon {
                display: inline-block;
                margin-left: 4px;
                width: 10px;
                position: relative;

                &:after {
                    .fm-ui-icon;
                    content: "\e90e";
                    color: @theme-color-danger;
                    top: -16px;
                    left: -7px;
                    font-size: 21px;
                }
            }
        }
    }

    @media (max-width: 1370px) and (pointer: coarse) {
        .fm-header-helper {
            text-transform: uppercase;
            border: none;
            background: @ui-draggable-item-backgound-color;
            padding: 12px 18px;
            font-size: @font-size * 1.2;
            border: @ui-border;
            cursor: move;
    
            &.fm-drag-remove {
                border-color: red;
                border-width: 2px;

                .fm-remove-icon {
                    display: inline-block;
                    margin-left: 4px;
                    width: 10px;
                    position: relative;

                    &:after {
                        .fm-ui-icon;
                        content: "\e90e";
                        color: @theme-color-danger;
                        top: -23px;
                        left: -15px;
                        font-size: 21px * 1.5;
                    }
                }
            }
        }
    }

    .fm-drop-indicator {
        height: 2px;
        background: @ui-background-dark;
    }
}

#fm-pivot-view div.fm-ui-panel {
    position: relative;
    background: @background-base-color;
    border: @ui-border;
}

#fm-pivot-view div.fm-ui-modal-overlay {
    background-color: white;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    
    &.fm-ui-opaque {
        opacity: 1;
    }

    &.fm-ui-transparent {
        opacity: 0;
    }

}

#fm-pivot-view div.fm-ui-toolbar {
    background: @background-base-color;
    border-top: 1px dotted #dcdcdc;
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-bottom: 0px;
}

#fm-pivot-view div.fm-ui-hgroup {
    overflow: hidden;
}

    #fm-pivot-view div.fm-ui-hgroup > * {
        float: left;
    }

#fm-pivot-view div.fm-ui-vgroup > * {
    display: block;
}

#fm-pivot-view ul.fm-ui-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#fm-pivot-view {
    .fm-ui-context-submenu {
        position: absolute;
    }
}

#fm-pivot-view .fm-ui-disabled,
#fm-toolbar-wrapper .fm-ui-disabled {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.5 !important;
}

// virtual list
#fm-pivot-view {
    div.fm-ui-vlist {
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;

        ul.fm-ui-list {
            position: absolute;
            overflow: hidden;
            width: 100%;
            top: 0;
            background: @background-ui-element-base-color;
        }

        div.fm-ui-vlist-placeholder {
            width: 100%;
        }
    }
}

#fm-pivot-view div.fm-ui-divider {
    background-color: @ui-background-light;
    position: absolute;
    z-index: 1;

    &:hover {
        background-color: darken(@ui-background-light, 2%);
    }

    &:before {
        .fm-ui-icon-c;
        content: "\e907";
        font-size: 13px;
        color: @ui-border-color;
    }

    &.fm-ui-horizontal {
        left: 0;
        right: 0;
        height: 9px;
        
        &:hover {
            cursor: row-resize;
        }

        &:before {
            top: 4px;
        }
    }
    
    &.fm-ui-vertical {
        top: 0;
        bottom: 0;
        width: 9px;
        
        &:hover {
            cursor: col-resize;
        }

        &:before {
            left: -2px;
            .rotate(90);
        }
    }
}

#fm-pivot-view .fm-ui-toolbar-mobile {
    he