@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,500,600,700&subset=latin,latin-ext);

@import "jquery/jquery-ui.min.css";
@import "bootstrap/bootstrap.min.css";
@import "fontawesome/font-awesome.min.css";

@import "summernote/summernote.css";
@import "nvd3/nv.d3.css";
@import "blueimp/blueimp-gallery.min.css";
@import "mcustomscrollbar/jquery.mCustomScrollbar.css";
@import "rickshaw/rickshaw.css";
@import "introjs/introjs.min.css";

@import "animate/animate.min.css";

/* THEME */
@import "theme-standard.less";
/* EOF THEME */

/* FUNCTIONS */
.shadow(@s){
    -moz-box-shadow: @s;
    -webkit-box-shadow: @s;
    box-shadow: @s;
}
.multi-shadow(...) {
    @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @props;
    -moz-box-shadow: @props;
    box-shadow: @props;
}
.border-radius(@r){
    -moz-border-radius: @r;
    -webkit-border-radius: @r;
    border-radius: @r;
}
.box-transition-all(@s){
    -webkit-transition: all @s ease;
    -moz-transition: all @s ease;
    -ms-transition: all @s ease;
    -o-transition: all @s ease;
    transition: all @s ease;
}
.box-transition-opacity(@s){
    -webkit-transition: opacity @s ease-in-out;
    -moz-transition: opacity @s ease-in-out;
    -ms-transition: opacity @s ease-in-out;
    -o-transition: opacity @s ease-in-out;
    transition: opacity @s ease-in-out;
}
.box-transition-color(@s){
    -webkit-transition: color @s ease;
    -moz-transition: color @s ease;
    -ms-transition: color @s ease;
    -o-transition: color @s ease;
    transition: color @s ease;
}
.opacity(@o,@of){
    opacity: @o;
    filter: e("alpha(opacity = @{of})");
}
.gradient-v(@f,@t){
    background: @f;
    background: -moz-linear-gradient(top, @f 0%, @t 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@f), color-stop(100%,@t));
    background: -webkit-linear-gradient(top, @f 0%,@t 100%);
    background: -o-linear-gradient(top, @f 0%,@t 100%);
    background: -ms-linear-gradient(top, @f 0%,@t 100%);
    background: linear-gradient(to bottom, @f 0%,@t 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@f, endColorstr=@t,GradientType=0 );
}
.gradient-h(@f,@t){
    background: @f;
    background: -moz-linear-gradient(left, @f 0%, @t 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,@f), color-stop(100%,@t));
    background: -webkit-linear-gradient(left, @f 0%,@t 100%);
    background: -o-linear-gradient(left, @f 0%,@t 100%);
    background: -ms-linear-gradient(left, @f 0%,@t 100%);
    background: linear-gradient(to right, @f 0%,@t 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@f, endColorstr=@t,GradientType=1 );
}
.gradient-lr(@f,@t){
    background: @f;
    background: -moz-linear-gradient(-45deg, @f 0%, @t 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,@f), color-stop(100%,@t));
    background: -webkit-linear-gradient(-45deg, @f 0%,@t 100%);
    background: -o-linear-gradient(-45deg, @f 0%,@t 100%);
    background: -ms-linear-gradient(-45deg, @f 0%,@t 100%);
    background: linear-gradient(135deg, @f 0%,@t 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@f, endColorstr=@t,GradientType=1 );
}
.gradient-rl(@f,@t){
    background: @f;
    background: -moz-linear-gradient(45deg, @f 0%, @t 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@f), color-stop(100%,@t));
    background: -webkit-linear-gradient(45deg, @f 0%,@t 100%);
    background: -o-linear-gradient(45deg, @f 0%,@t 100%);
    background: -ms-linear-gradient(45deg, @f 0%,@t 100%);
    background: linear-gradient(45deg, @f 0%,@t 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@f, endColorstr=@t,GradientType=1 );
}
/* EOF FUNCTIONS */

/* PREDEFINED CLASSES */
.clearfix {zoom: 1;
    &:before,&:after{content: "";display: table;}
    &:after{clear: both;}
}
.background-colorful{background: linear-gradient(left,@base-danger 0%,@base-warning 50%,@base-success 100%);
                     background: -o-linear-gradient(left,@base-danger 0%,@base-warning 50%,@base-success 100%);
                     background: -moz-linear-gradient(left,@base-danger 0%,@base-warning 50%,@base-success 100%);
                     background: -webkit-linear-gradient(left,@base-danger 0%,@base-warning 50%,@base-success 100%);
                     background: -ms-linear-gradient(left,@base-danger 0%,@base-warning 50%,@base-success 100%);
                     background:-webkit-gradient(linear,left top,right top,color-stop(0, @base-danger),color-stop(0.5, @base-warning),color-stop(1, @base-success));}
/* EOF PREDEFINED CLASSES */
html *{outline: none !important;}
html,body{min-height: 100%; padding: 0px; margin: 0px; background: @body-background url('../img/bg.png') left top repeat; position: relative; font-family: 'Tahoma', sans-serif; letter-spacing: 0.05rem; font-size: 12px; color: @base-color; overflow-x: hidden;}
.body-full-height{height: 100%;
    body{height: 100%;}
}

a{
    color: @base-primary;
}

.row{margin-left: 0px; margin-right: 0px;
    [class^='col-xs-'], [class^='col-sm-'], [class^='col-md-'], [class^='col-lg-']{min-height: 1px; padding-left: 10px; padding-right: 10px;}
    &.stacked{
        [class^='col-xs-'], [class^='col-sm-'], [class^='col-md-'], [class^='col-lg-']{padding-left: 0px; padding-right: 0px;}
    }
}

.pl-0{padding-left: 0px !important;}
.pl-5{padding-left: 5px !important;}
.pl-10{padding-left: 10px !important;}
.pr-0{padding-right: 0px !important;}
.pr-5{padding-right: 5px !important;}
.pr-10{padding-right: 10px !important;}

.ml-0{margin-left: 0px !important;}
.ml-5{margin-left: 5px !important;}
.ml-10{margin-left: 10px !important;}
.mr-0{margin-right: 0px !important;}
.mr-5{margin-right: 5px !important;}
.mr-10{margin-right: 10px !important;}
.mt-0{margin-top: 0px !important;}
.mt-5{margin-top: 5px !important;}
.mt-10{margin-top: 10px !important;}
.mb-0{margin-bottom: 0px !important;}
.mb-5{margin-bottom: 5px !important;}
.mb-10{margin-bottom: 10px !important;}

table.planning-table{
    tr{
        td{
            vertical-align: middle !important;
        }
    }
}

.panel-heading.divider{
    background-color: #fff !important;
    padding: 5px !important;

    h3.panel-title{
        font-size: 12px !important;
    }
}

.panel.project-panel{
    box-shadow: none;

    .list-group-item:last-child{
        border-bottom: 1px solid #ddd !important;
    }

    border-top: none;
    &.panel-warning{
        border-left: 2px solid #fea233;
    }
    &.panel-info{
        border-left: 2px solid #1b9cf7;
    }
    &.panel-success{
        border-left: 2px solid #77c453;
    }
}

div#project-sidebar{
    height: 100%;

    div.dropdown-menu{
        right: 0 !important;
        left: inherit !important;
    }
}

div#checkList div.panel-body{
    padding: 15px !important;

    div.list-group-item{
        border-radius: 0px !important;
        border-left: none;
        border-right: none;

        &:first-child{
            border-top: none;
        }
    }
}

div.available_employees#rightnav{
    position: fixed;
    right: 0px;
    top: 62px;
}


/* PAGE CONTAINER */
.page-container{width: 100%; float: left; min-height: 100%; position: relative; background: @base-background; .box-transition-all(200ms);
    /* SIDEBAR */
    .page-sidebar{width: 220px; float: left; position: relative; z-index: 3;
        &.page-sidebar-fixed{position: fixed;}
        svg {
            width: 20px;
            margin-right: 8px;
        }
    }

    &.page-container-wide{
        .page-sidebar{width: 50px;}
    }
    /* END SIDEBAR */
    /* CONTENT */
    .page-content{min-height: 100%; margin-left: 220px; background: @body-background url('../img/bg.png') left top repeat; position: relative; .clearfix;
        .content-frame{float: left; width:100%; position: relative; background: @body-background url('../img/bg.png') left top repeat;
            .content-frame-top{float: left; width: 100%; line-height: 30px; padding: 13px 15px 15px; background: rgba(0,0,0,0.02); border-bottom: 1px solid #DDD; border-top: 1px solid #DDD;
                .page-title{padding: 0px; width: auto;
                    h2{margin-bottom: 0px; font-size: 22px;}
                }
            }
            .content-frame-left{float: left; width: 300px; padding: 10px; min-height: 100%; background: rgba(0,0,0,0.02); border-right: 1px solid #DDD;
                &.padding-0{padding: 0px;}
                .block{padding: 0px; margin-bottom: 20px;}
                h4{margin-top: 10px;}
                > .form-group{margin-bottom: 20px;}
            }
            .content-frame-right{float: right; width: 300px; padding: 10px; height:~'calc(100vh - 62px)'!important; background: rgba(0,0,0,0.02); border-left: 1px solid #DDD;
                &.content-frame-right-artist{ width: 50%;}
                &.padding-0{padding:0px;
                    .block{padding: 10px;}
                }
                h4{margin-top: 10px;}
                .block{padding: 0px; margin-bottom: 20px;}
                > .form-group{margin-bottom: 20px;}
            }
            .content-frame-body{padding: 70px 10px 10px 10px; margin-left: 300px;
                &.content-frame-body-left{margin-left: 0px; margin-right: 300px;}
                &.content-frame-body-left-artist{margin-left: 0px; margin-right: 50%;}
            }
            .content-frame-left-toggle,.content-frame-right-toggle{display: none; margin-left: 5px;}
        }
        .page-content-wrap{float: left; width: 100%;}
    }
    &.page-container-wide{
        .page-content{margin-left: 50px; }
    }
    &.page-navigation-toggled,&.page-navigation-toggled-hover{
        .page-content{margin-left: 50px;}
    }
    /* END CONTENT */

    /* RTL CONTENT MODE */
    &.page-mode-rtl{
        .page-sidebar{float: right;
            &.page-sidebar-fixed{right: 0px;}
        }
        .page-content{margin-left: 0px; margin-right: 220px;}
        &.page-container-wide{
            .page-content{margin-right: 50px;}
        }
    }
    /* END RTL CONTENT MODE */

    &.page-navigation-top{
        .page-content{margin-left: 0px;}
        .page-content-header{.border-radius(5px 5px 0px 0px);}
    }
    &.page-navigation-top-fixed{
        .x-navigation.x-navigation-horizontal{position: fixed; padding-right: 220px; top: 0px;}
        .page-content{padding-top: 50px;}
        &.page-navigation-toggled{
            .x-navigation.x-navigation-horizontal{padding-right: 50px;}
        }
    }
    &.page-navigation-toggled-hover{
        .page-sidebar{position: absolute; background: @xn-background; min-height: 100%;}
    }
}

body{
    &.page-container-boxed{background: url("../img/backgrounds/wall_1.jpg") left top no-repeat fixed; padding: 20px 0px;
        .page-container{width: 1200px; float: none; margin: 0px auto; .shadow(1px 1px 2px 0px rgba(0,0,0,0.2)); .border-radius(5px);
            &.page-navigation-top{
                .page-content{.border-radius(5px);}
            }
        }
        &.wall_1{background-image: url("../img/backgrounds/wall_1.jpg");}
        &.wall_2{background-image: url("../img/backgrounds/wall_2.jpg");}
        &.wall_3{background-image: url("../img/backgrounds/wall_3.jpg");}
        &.wall_4{background-image: url("../img/backgrounds/wall_4.jpg");}
        &.wall_5{background-image: url("../img/backgrounds/wall_5.jpg");}
        &.wall_6{background-image: url("../img/backgrounds/wall_6.jpg");}
        &.wall_7{background-image: url("../img/backgrounds/wall_7.jpg");}
        &.wall_8{background-image: url("../img/backgrounds/wall_8.jpg");}
        &.wall_9{background-image: url("../img/backgrounds/wall_9.jpg");}
        &.wall_10{background-image: url("../img/backgrounds/wall_10.jpg");}
    }
}
/* END PAGE CONTAINER */


/* NAVIGATION */
.x-navigation, .x-navigation ul{width: 100%; padding: 0px; margin: 0px; float: left; list-style: none; display: block; z-index: 3;}
.x-navigation{background: @xn-background;
    /* NAV LIST ELEMENT */
    li{float: left; display: block; width: 100%; padding: 0px; margin: 0px; position: relative;
        > a{display: block; float: left; width: 100%; line-height: 19px; color: @xn-color; font-size: 13px; font-weight: 400; padding: 12px 10px 12px 15px; text-decoration: none; border-bottom: 1px solid darken(@xn-background,2%); vertical-align: text-bottom;
            .fa,.glyphicon{color: @xn-icon-color; text-align: center; width: 20px; font-size: 14px; margin-right: 10px; vertical-align: baseline; .box-transition-color(200ms);}
            &:hover{background: lighten(@xn-background,5%); .box-transition-all(200ms);
                .fa,.glyphicon{color: @xn-icon-color-hover;}
            }
        }
        > ul{background: @xn-background-active; max-height: 0px; .box-transition-all(200ms); overflow: hidden;
             li{
                 > a{color: @xn-color-sub; font-size: 12px; line-height: 19px; font-weight: 400; padding: 12px 10px; border-bottom-color: darken(@xn-background-active,2%);
                    &:hover{background: darken(@xn-background-active,2%); color: @xn-color;}
                 }
                 &.active > a{background: darken(@xn-background-active,2%); color: @xn-color;}
             }
        }

        &.xn-openable:before{position: absolute; font-family: "FontAwesome"; content: "\f107"; font-size: 14px; width: 20px; height: 20px; color: @xn-color; right: 0px; top: 12px; cursor: pointer;}
        &.xn-openable > .informer{right: 25px;}

        &.active{
            &.xn-openable:before{content: "\f106";}
            > a{background: lighten(@xn-background,5%); .box-transition-all(200ms);
                .fa,.glyphicon{color: @xn-icon-color-hover;}
            }
            > ul{max-height: 1200px;}
        }

        &.xn-title{padding: 20px 10px 10px; line-height: 20px; font-weight: 300; font-size: 13px; color: #999;border-bottom: 1px solid darken(@xn-background,2%);}
    }
    /* END NAV LIST ELEMENT */

    /* NAV LIST FIRST ELEMENT */
    > li{
        > a{
            &.x-navigation-control{background: @xn-background-logo;}
        }
        &.xn-openable:before{top: 15px;}
        > ul > li{
            > a{padding-left: 25px; &:hover{padding-left: 30px;} }
            &.active{ > a{padding-left: 30px;} }
            > ul > li{
                > a{padding-left: 40px; &:hover{padding-left: 45px;} }
                &.active{ > a{padding-left: 45px;} }
                > ul > li{
                    > a{padding-left: 50px; &:hover{padding-left: 55px;} }
                    &.active{ > a{padding-left: 55px;} }
                    > ul > li{
                        > a{padding-left: 60px; &:hover{padding-left: 65px;} }
                        &.active{ > a{padding-left: 65px;} }
                        > ul > li{
                            > a{padding-left: 70px; &:hover{padding-left: 75px;} }
                            &.active{ > a{padding-left: 75px;} }
                            > ul > li{
                                > a{padding-left: 80px; &:hover{padding-left: 85px;} }
                                &.active{ > a{padding-left: 85px;} }
                            }
                        }
                    }
                }
            }

        }
        &:last-child{
            > a{.border-radius(0px 0px 0px 5px); border-bottom: 0px;}
        }
    }
    /* END NAV LIST FIRST ELEMENT */

    /* NAV HORIZONTAL MODE */
    &.x-navigation-horizontal{height: 50px; background: @xn-background;
        .xn-logo a{border-bottom: 0px; width: 200px;}
        > li{
            &.xn-openable{
                &:before{display: none;}
            }
            > a{padding:15px; border-bottom: 0px; line-height: 20px; color: @xn-horizontal-color; text-shadow: none;
                &:hover{background: @xn-horizontal-background-hover;
                    .fa,.glyphicon{color: @xn-horizontal-icon-hover;}
                }
                .fa,.glyphicon{color: @xn-horizontal-icon;}
            }
            &.active > a{background: @xn-horizontal-background-hover;
                .fa,.glyphicon{color: @xn-horizontal-icon-hover;}
            }

            ul{width: @xn-submenu-width; position: absolute; overflow: visible; display: none; .border-radius(3px); .shadow(0px 2px 1px 0px rgba(0, 0, 0, 0.1)); z-index: 3;
                ul.xn-drop-white:after{border-right-color: #FFF;}
            }
            > ul{top: 60px; left: 0px;
                &.xn-drop-white:after{border-bottom-color: #FFF;}
                &.xn-drop-left{left: auto; right: 0px;
                        &.xn-drop-white{
                            ul:after{border-left-color: #FFF;}
                        }
                }
                &:after{bottom: 100%;left: 27px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
                        border-color: rgba(0, 0, 0, 0); border-bottom-color: @xn-background;border-width: 5px;margin-left: -5px;}
                &.xn-drop-left:after{right: 20px; left: auto;
                    ul{left: auto; right: @xn-submenu-width + 10;
                       &:after{right: auto; left: 100%; border: solid transparent; border-left-color: @xn-background; border-width: 5px; margin-right: -5px;}
                    }
                }
                ul{top: 0px; right: -@xn-submenu-width - 10;
                    &:after{right: 100%;top: 23px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
                           border-color: rgba(0, 0, 0, 0); border-right-color: @xn-background;border-width: 5px;margin-top: -5px;}
                }
                li{
                    > a{padding-left: 10px;
                         &:hover{padding-left: 15px;}
                    }
                    &.active{
                        > a{padding-left: 15px;}
                    }
                }
            }
            li{width: 100%;
               &:first-child a{.border-radius(3px 3px 0px 0px);}
               &:last-child a{.border-radius(0px 0px 3px 3px); border-bottom-color: transparent;}
               &.xn-openable:before{content: "\f105";}
               &.active.xn-openable:before{content: "\f104";}
            }

            &:last-child{
                > a{.border-radius(0px);}
            }
            &.last{
                >a{.border-radius(0px 5px 0px 0px);}
            }
        }
        li{width: auto; position: relative;
            &.active{
                > ul{display: block;}
            }
            &.xn-openable{
                > a{padding-right: 20px;}
            }
        }
        ul{
            &.xn-drop-white{background: #FFF;
                ul{background: #FFF;
                    &:after{border-right-color: #FFF;}
                }
                li{
                    > a{color: #333; text-shadow: none; border-bottom: 1px solid #E9E9E9;
                        &:hover{background: #F5F5F5; color: #333;}
                        .fa,.glyphicon{color: @xn-background;}
                    }
                    &.active{
                        > a{color: #333; text-shadow: none; border-bottom: 1px solid #E9E9E9;}
                        &.xn-openable:before{color: #333;}
                    }
                }
            }
        }
        .xn-icon-button{
            > a{padding: 15px 10px; text-align: center; width: 50px;
                .fa,.glyphicon{margin: 0px;}
            }
        }
        .xn-search{padding: 10px 5px;
            input{width: 100px;
                  &:focus{width: 200px;}
            }
            &:before{left: 5px;}
        }
    }
    /* END NAV HORIZONTAL MODE */

    /* NAV MINIMIZED MODE */
    &.x-navigation-minimized{width: 50px;
        .xn-text{display: none;}
        .xn-visible{display: block;}

        li{width: auto; position: relative;
            &.xn-profile{
                .profile-mini{display: block;}
                .profile:after{right: 100%;top: 23px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
                               border-color: rgba(0, 0, 0, 0); border-right-color: @xn-background;border-width: 5px;margin-top: -5px;}
            }
            &.xn-title{display: none;}
            &.active{
                > ul{display: block;}
            }

           ul{top: 0px; right: -@xn-submenu-width - 10; .shadow(0px 2px 1px 0px rgba(0, 0, 0, 0.1));
              &:after{right: 100%;top: 23px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
                      border-color: rgba(0, 0, 0, 0); border-right-color: @xn-background;border-width: 5px;margin-top: -5px;}
              li{
                > a{padding-left: 15px !important;
                    &:hover{padding-left: 20px !important;}
                }
                &.active{
                    > a{padding-left: 20px !important;}
                }
                &:first-child{
                    > a{.border-radius(3px 3px 0px 0px);}
                }
                &:last-child{
                    > a{border-bottom: 0px; .border-radius(0px 0px 3px 3px);}
                }
              }
           }

        }
        > li{width: 100%;
            > a{padding: 15px 10px; text-align: center;
                .fa,.glyphicon{margin: 0px;}
            }
            ul{width: @xn-submenu-width; position: absolute; overflow: visible; display: none; .border-radius(3px);}
            li{width: 100%;
               &.xn-openable:before{content: "\f105";}
               &.active.xn-openable:before{content: "\f104";}

            }

            &.active:before,&.xn-openable:before{display: none;}

            &.xn-logo{
                > a:first-child{padding: 0px; width: 50px; background-image: url("../img/logo-small.png");}
            }
        }
        .xn-search{
            input{width: 30px;padding: 0px 2px 0px 28px;
                &:focus{width: 200px; padding: 0px 8px 0px 28px;}
            }
        }

        &.x-navigation-hover{
            li{
                &:hover > ul{display: block; background: @base-background-active; max-height: 1200px; .border-radius(0px); right: -@xn-submenu-width;
                    &:after{display: none;}
                }
            }
        }
    }
    /* END NAV MINIMIZED MODE */

    /* X-NAVIIGATION CUSTOM */
    &.x-navigation-custom{
        li{
            ul{background: darken(@xn-background,3%);}
            > a{border-bottom: 0px;
                &:hover{background: darken(@xn-background,4%);
                    .fa,.glyphicon{color: @xn-icon-color-hover;}
                }
                .fa,.glyphicon{color: #DDD;}
            }
            &.active{
                > a{background: darken(@xn-background,4%);
                    .fa,.glyphicon{color: @xn-icon-color-hover;}
                }
            }
        }
        > li{
            > a{padding: 12px 10px 12px 12px; border-bottom: 0px; font-size: 13px; color: #CCC; border-left: 3px solid transparent;
                &:hover{color: #FFF; background: lighten(@xn-background,2%);}
            }
            &.active{
                > a{color: #FFF; background: lighten(@xn-background,2%);border-left: 3px solid @xn-icon-color-hover;}
            }
            &.xn-openable{
                &:before{color: #CCC;top: 12px;}
            }
            &.xn-title{border-bottom: 0px;}
            &.xn-logo{
                > a{border-left: 0px;
                    &:hover{background-color: darken(@xn-background-logo,2%);}
                }
            }
        }
        &.x-navigation-minimized{
            > li{
                > a{padding: 15px 10px 15px 7px;}
                &.xn-profile{
                    > a{border-left: 0px; padding: 7px;}
                }
            }

        }
    }
    /* END X-NAVIGATION CUSTOM */

    /* NAV SEARCH */
    .xn-search{padding: 10px 10px 10px 9px; position: relative;
        input{width: 200px; height: 30px; padding: 0px 8px 0px 28px; line-height: 25px; border: 1px solid darken(@xn-background,5%);
             background: darken(@xn-background,3%); color: #AAA; .box-transition-all(200ms); .border-radius(5px);}
        &:before{content: "\f002"; font-family: FontAwesome; position: absolute; width: 30px; height: 30px; text-align: center; font-size: 17px; line-height: 28px; color: #AAA; left: 10px; top: 10px; z-index: 2; cursor: pointer;}
    }
    /* END NAV SEARCH */

    .xn-visible{display: none;}

    .x-navigation-control{position: absolute; right: 0px; width: 50px; height: 50px; cursor: pointer; display: none;
        &:hover{background: darken(@xn-background-logo,2%);border-bottom: 0px;}
        &:before{position: absolute; font-family: "FontAwesome"; content: "\f0c9"; font-size: 14px; top: 14px; left: 20px; color: #FFF; text-shadow: 1px 2px 2px rgba(0,0,0,0.3);}
    }

    > li{
        &.xn-navigation-control{display: none; height: 50px; border-bottom: 1px solid darken(@xn-background,2%);
            .x-navigation-control{
                &:hover{background: @xn-background-active;}
            }
        }
        &.xn-logo{
            > a{border-bottom: 0px;}
            > a:first-child{font-size: 0px; text-indent: -9999px; background: url("../img/logo_tool.png") top center no-repeat @xn-background-logo; padding: 0px; border-bottom: 0px; color: #FFF; height: 50px;
                &:hover{background-color: darken(@xn-background-logo,2%);}
            }
        }
        &.xn-profile{padding: 0px;border-bottom: 1px solid @xn-background-active;
            .profile-data-name{color: @xn-color;}
            .profile-mini{display: none; width: 50px; padding: 7px;
                img{width: 36px; border: 2px solid #FFF; .border-radius(50%);}
            }
        }
    }

    /* NAV INFORMER */
    .informer{ font-size: 11px; position: absolute; line-height: 20px; text-align: center; padding: 0px 7px;
                                 background: #BBB; right: 10px; top: 15px; color: #FFF; .border-radius(10px);
            &.pulsate{-webkit-animation: pulsate 1s ease-out;-webkit-animation-iteration-count: infinite;
                      -moz-animation: pulsate 1s ease-out; -moz-animation-iteration-count: infinite;
                      animation: pulsate 1s ease-out; animation-iteration-count: infinite;}

            &.informer-primary{background: @base-primary;}
            &.informer-success{background: @base-success;}
            &.informer-info{background: @base-info;}
            &.informer-warning{background: @base-warning;}
            &.informer-danger{background: @base-danger;}
    }
    li li .informer{top: 12px;}
    .xn-icon-button .informer{left: auto; bottom: auto; right: 1px; top: 5px;}
    /* END NAV INFORMER */
}

.page-container.page-mode-rtl{
    .x-navigation{
        &.x-navigation-minimized{
            li{
                ul{top: 0px; right: auto; left: -@xn-submenu-width - 10;
                   &:after{right: auto; left: 100%; border-right-color: transparent; border-left-color: @xn-background;}
                }
                .profile{right: auto; left: -@xn-submenu-width - 10;
                    &:after{right: auto; left: 100%; border-right-color: transparent; border-left-color: @xn-background;}
                }
            }
            &.x-navigation-hover{
                li{
                    ul{left: -@xn-submenu-width;}
                }
            }
        }
    }
}
.page-container-boxed{
    .x-navigation{.border-radius(5px 0px 0px 5px);
        .xn-logo a{.border-radius(5px 0px 0px 0px);}
        &.x-navigation-horizontal{.border-radius(5px 5px 0px 0px);
            &.x-navigation-panel{.border-radius(0px 5px 0px 0px);}
        }
    }
    .page-container{
        .page-content{.border-radius(0px 5px 5px 0px);}

        &.page-navigation-top-custom{
            .x-navigation{
                &.x-navigation-horizontal{.border-radius(0px 0px 0px 0px);}
            }
        }

        &.page-mode-rtl{
            .page-content{.border-radius(5px);}
            .page-sidebar{
                .x-navigation{.border-radius(0px 5px 5px 0px);
                    .xn-logo a{.border-radius(0px 5px 0px 0px);}
                }
            }
            .x-navigation{
                &.x-navigation-horizontal{.border-radius(5px 0px 0px 0px);
                    &.x-navigation-panel{.border-radius(5px 0px 0px 0px);}
                    > li:first-child a{.border-radius(5px 0px 0px 0px);}
                }
            }
        }
    }
}
/* END NAVIGATION */

/* PROFILE */

    .profile{width: 100%; float: left; padding: 15px 10px; position: relative; background: darken(@xn-background,3%);
        .profile-image{float: left; width: 100%; margin: 0px 0px 10px; text-align: center;
            img{width: 100px; border: 3px solid #FFF; .border-radius(50%);}
        }
        .profile-data{width: 100%; float: left; text-align: center;
            .profile-data-name{width: 100%; float: left; font-size: 14px; font-weight: 500; color: #FFF;}
            .profile-data-title{width: 100%; float: left; font-size: 11px; font-weight: 400; color: #999;}
        }
        .profile-controls{
            a{width: 30px; height: 30px; font-size: 14px; color: #FFF; border: 2px solid #FFF; line-height: 25px; position: absolute; .border-radius(50%); padding: 0px; .box-transition-all(200ms);
                &.profile-control-left{left: 15px; top: 53px; text-align: center;}
                &.profile-control-right{right: 15px; top: 53px; text-align: center;}
                .fa,.glyphicon{width: auto; margin-right: auto;}
                &:hover{border-color: #DDD; color: #DDD;}
            }

        }
    }
    /* X-NAVIGATION FEATURES */
        .x-navigation.x-navigation-minimized .profile{width: 220px; background: @xn-background; position: absolute; top: 4px; right: -@xn-submenu-width - 10; display: none; .border-radius(3px);}
        .x-navigation.x-navigation-minimized li.active .profile{display: block;}
        .x-navigation.x-navigation-minimized .profile-mini{display: block; border-bottom: 0px;}
    /* END X-NAVIGATION FEATURES */
/* END PROFILE */

/* PAGE CONTENT HEADER */
.page-content-header{float: left; width: 100%; background: url(../img/bg.png) left top repeat #FFF; padding: 10px 15px; height: 70px;
    .logo{display: block; float: left; width: 140px; height: 50px; background: url(../img/logo-grey-big.png) left top no-repeat;}

    .contacts{float: left; height: 25px; clear:both;
        a{float: left; display: block; line-height: 20px; margin-top: 5px; font-size: 11px; text-decoration: none; margin-left: 10px; color: #999; .box-transition-color(200ms);
            .fa,.glyphicon{font-size: 16px; margin-right: 5px; line-height: 20px; vertical-align: middle;}
            &:hover{color: @base-info;}
        }
    }
    .socials{float: right; clear:both;
        a{float: left; display: block; line-height: 24px; font-size: 23px; margin-left: 5px; width: 24px; text-align: center;
            .fa{line-height: 24px; color: #999; .box-transition-color(200ms);
                &:hover{
                    &.fa-facebook-square{color: #3C599B;}
                    &.fa-twitter-square{color: #1AB2E8;}
                    &.fa-pinterest-square{color: #C81D25;}
                    &.fa-linkedin-square{color: #0077B4;}
                    &.fa-dribbble{color: #E04C86;}
                }
            }
        }
    }

}
/* END PAGE CONTENT HEADER */


        /* BLOCK */
        .block{padding: 5px 10px; float: left; width: 100%; margin-bottom: 20px;}
        .block-full-width{padding: 0px; float: left; width: 100%; position: relative;}
        /* END BLOCK */

        /* BREADCRUMB */
        .breadcrumb{float: left; width: 100%; background: @body-background; margin-bottom: 10px; padding: 15px 15px 7px; .border-radius(0px);
            li,li a{font-size: 11px; line-height: 12px; color: lighten(@base-color,20%); text-decoration: none;
                &:hover{color: @base-color;}
            }
            li:last-child{color: @base-color;}
            > li+li:before{font-family: "FontAwesome"; content: "\f105"; color:  lighten(@base-color,20%); padding: 0px 8px;}
        }
        /* EOF BREADCRUMB */

        /* Progress list */
        .progress-list{float: left; width: 100%;padding: 0px 5px; font-size: 11px;
            .progress{clear:both; margin-top: 20px;}
        }
        /* end progress list*/

        /* LIST TAGS */
        .list-tags{float: left; width: 100%; list-style: none; padding: 0px; margin: 0px;
            li{float: left; display: block; position: relative;
               a{display: block; float: left; background: #F5F5F5; border: 1px solid #D5D5D5; .border-radius(3px);
                 line-height: 23px; font-size: 11px; margin: 0px 5px 5px 0px; padding: 0px 8px; color: @base-color;
                 &:hover{text-decoration: none; background: #F0F0F0;}
               }
            }
        }
        /* END LIST TAGS */

        /* LIST GROUP */
            .list-group{margin: 0px;
                .list-group-item{line-height: 20px;
                    .fa{margin-right: 10px;}
                    .btn{
                        .fa{margin-right: 0px;}
                    }
                    .progress{margin: 5px 0px;}
                    &.active{
                        .badge{color: @base-color;}
                    }
                    &:last-child{border-bottom: 0px;}
                }
                &.list-group-simple{border: 0px; background: transparent;
                    .list-group-item{border: 0px; background: transparent; padding: 5px 10px;}
                }
                &.border-bottom{
                    .list-group-item:last-child{border-bottom: 1px solid #E5E5E5;}
                }
                &.list-group-navigation{border: 0px; float: left; width: 100%;
                    .list-group-item{border-left: 0px; border-right: 0px; .border-radius(0px);}
                }
            }
            .padding-0 .list-group{border: 0px;
                .list-group-item{border-width: 1px 0px 0px 0px; .border-radius(0px);
                    &:first-child{border-top: 0px;}
                }
            }

            .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus{background: @base-primary; border-color: @base-primary;}
            .list-group-item{border-color: #E5E5E5;}
            a.list-group-item:hover, a.list-group-item:focus{background: #F9F9F9;}


            /* LIST GROUP CONTACTS */
            .list-group-contacts{
                .list-group-item{padding: 10px;
                    img{border: 2px solid #F5F5F5; .border-radius(50%); width: 40px; margin-right: 10px;}
                    img.concept{border: 1px solid @base-warning;}
                    img.gereed{border: 1px solid @base-info;}
                    img.gekeurd{border: 1px solid @base-success;}
                    .contacts-title{font-size: 13px; font-weight: 600; line-height: 20px;}
                    p{margin-bottom: 0px; line-height: 20px;}
                    &.active{background: #F5F5F5; border-color: #E5E5E5; color: @base-color;}
                }
            }

            .list-group-controls{position: absolute; right: 10px; top: 15px;}
            .list-group-status{float: left; margin-right: 10px; height: 40px; width: 10px; position: relative;
                &:after{position: absolute; left: 0px; top: 15px; width: 10px; height: 10px; border: 2px solid #CCC; .border-radius(50%); content: " "; background: transparent;}
                &.status-online:after{border-color: @base-success;}
                &.status-away:after{border-color: @base-warning;}
                &.status-offline:after{border-color: #CCC;}
            }
            /* END LIST GROUP CONTACTS */

            .status{margin: 5px 5px 5px 0px;display: inline-block;width: 10px;height: 10px;border: 2px solid #CCC;content: " ";background: transparent;.border-radius(50%); float: left;
                &.status-online{border-color: @base-success;}
                &.status-away{border-color: @base-warning;}
                &.status-offline{border-color: #CCC;}
            }
        /* EOF LIST GROUP */

        /* FRIENDS */
        .friend{width: 100%; float: left; text-align: center; padding: 10px 0px; color: @base-color; font-weight: 600; display: block; .opacity(0.8,80); .box-transition-opacity(200ms);
            img{width: 100%; border: 3px solid #F5F5F5; .border-radius(50%);}
            span{display: block; line-height: 20px; margin-top: 5px; font-size: 11px;}
            &:hover{text-decoration: none; .opacity(1,100); color: @base-heading-color;}
        }

        /* FRIENDS */

        /* PANELS */

        .panel{float: left; width: 100%; .border-radius(0px); border: 0px; border-top: 2px solid #E5E5E5; margin-bottom: 20px; position: relative; .shadow(0px 1px 1px 0px rgba(0, 0, 0, 0.2));
            &.panel-default{border-top-color: #F1F1F1; border-top-width: 1px;}
            &.panel-primary{border-top-color: @base-primary;}
            &.panel-success{border-top-color: @base-success;}
            &.panel-info{border-top-color: @base-info;}
            &.panel-warning{border-top-color: @base-warning;}
            &.panel-danger{border-top-color: @base-danger;}
            &.panel-colorful:before{content: ""; width: 100%; height: 2px; .background-colorful; display: block; left: 0px; top: 0px;}

            .panel-heading{padding: 10px;
                .panel-title-image{float: left; width: 30px; border: 2px solid #D5D5D5; .border-radius(50%); margin-right: 5px; }
                .panel-title{margin-left: 7px;}

                .panel-title-box{float: left;
                    h3{font-size: 14px; font-weight: 600; line-height: 18px; color: @base-heading-color; padding: 0px; margin: 0px;}
                    span{font-size: 12px; color: lighten(@base-color,25%); font-weight: 400; line-height: 12px;}
                }

            }
            .panel-heading,.panel-footer,.panel-body{float: left; width: 100%;}
            .panel-body{padding: 15px; position: relative;
                &.scroll{padding-right: 0px;}
                &.panel-body-map{padding: 5px;}
                &.panel-body-image{padding: 0px; margin-bottom: 10px; position: relative;
                    img{.border-radius(5px 5px 0px 0px); width: 100%;}
                    .panel-body-inform{width: 30px; height: 30px; position: absolute; bottom: -15px; left: 50%; background: @base-info; color: #FFF;
                                       .border-radius(5px); margin-left: -15px; text-align: center; line-height: 30px; padding-left: 1px; padding-top: 1px;
                                       -ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);
                        &.inform-primary{background: @base-primary;}
                        &.inform-success{background: @base-success;}
                        &.inform-warning{background: @base-warning;}
                        &.inform-danger{background: @base-danger;}
                        .fa{font-size: 16px; color: #FFF;
                            -ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
                    }
                }
                &.list-group{padding:0px;}
                &.profile{.border-radius(5px 5px 0px 0px);}
                &.panel-body-search{padding: 5px;}
                &.panel-body-half{
                    .panel-body{width: 50%; height: 100%;
                        &:nth-child(2n){padding-left: 25px;}
                        &.panel-body-image{margin-bottom: 0px;
                            .panel-body-inform{bottom: auto; left: auto; right: -15px; top: 50%; margin-left: 0px; margin-top: -15px;}
                        }
                    }
                }
            }
            .panel-title{font-size: 16px; font-weight: 400; line-height: 30px; display: block; float: left; color: @base-heading-color;}
            .panel-footer{background: #F5F5F5; border: 0px; border-top: 1px solid #E3E3E3; line-height: 30px; padding: 10px;}

        }
        .panel-default .panel-heading, .panel-primary .panel-heading,
        .panel-success .panel-heading, .panel-info .panel-heading,
        .panel-warning .panel-heading, .panel-danger .panel-heading{background: #F5F5F5; border-color: #E5E5E5;}

        .panel-fullscreen-wrap{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background: #FFF;
            .panel{.border-radius(0px); margin: 0px;
                .panel-body{overflow-y: scroll;}
            }
        }

        /* PANEL GROUP / ACCORDION */
        .panel-group{float: left; width: 100%;}
        .panel-group .panel-heading + .panel-collapse > .panel-body{border-top: 0px;}
        .panel-title > a{text-decoration: none;}

            .panel-group.accordion .panel-body{display: none;}
            .panel-group.accordion .panel-body.panel-body-open{display: block;}
        /* END PANEL GROUP / ACCORDION */


        /* PANEL CONTROLS */
        ul.panel-controls{float: right; padding: 0px; margin: 0px; list-style: none; position: relative;
            > li{float: left;
                > a{display: block; float: left; width: 30px; height: 30px; text-align: center; line-height: 28px; color: @base-color; margin-left: 3px; .box-transition-all(200ms);
                    &.control-primary{color: @base-primary; border-color: @base-primary;}
                    &.control-success{color: @base-success; border-color: @base-success;}
                    &.control-info{color: @base-info; border-color: @base-info;}
                    &.control-warning{color: @base-warning; border-color: @base-warning;}
                    &.control-danger{color: @base-danger; border-color: @base-danger;}
                    &:hover{border-color: #999; color: @base-heading-color;}
                    &.rounded{.border-radius(5px);}
                }
            }
            &.panel-controls-title{margin-top: 3px;}
        }

        .panel-hidden-controls{
            ul.panel-controls{
                > li{
                    > a{.opacity(0,0);
                        &:hover{}
                    }
                }
            }
            &:hover{
                ul.panel-controls{
                    > li{
                        > a{.opacity(0.8,80);
                            &:hover{.opacity(1,100);}
                        }
                    }
                }
            }
        }

        ul.panel-controls > li.label-control .label, .label-form{display: inline-block; font-size: 11px; padding: 5px 10px; line-height: 12px; margin-top: 4px;}

        ul.panel-controls > li > .dropdown-menu{left: auto; right: 3px;}
        ul.panel-controls > li > .dropdown-menu:after, ul.panel-controls > li > .dropdown-menu:before{left: auto; right: 11px;}
        ul.panel-controls > li > .dropdown-menu:after{margin-left: auto; margin-right: -5px;}
        ul.panel-controls > li > .dropdown-menu:before{margin-left: auto; margin-right: -6px;}
        /* EOF PANEL CONTROLS */

        .panel-heading .label{line-height: 16px; padding: 4px 10px; margin: 3px 0px 3px 5px; font-size: 12px; display: inline-block; .border-radius(3px);
            &.pulsate{-webkit-animation: pulsate 1s ease-out;-webkit-animation-iteration-count: infinite;
                   -moz-animation: pulsate 1s ease-out; -moz-animation-iteration-count: infinite;
                   animation: pulsate 1s ease-out; animation-iteration-count: infinite;}
        }

            /* PANEL BODY PRICING */
            .panel{
                &.panel-primary .panel-body-pricing small{color: @base-primary;}
                &.panel-success .panel-body-pricing small{color: @base-success;}
                &.panel-info .panel-body-pricing small{color: @base-info;}
                &.panel-warning .panel-body-pricing small{color: @base-warning;}
                &.panel-danger .panel-body-pricing small{color: @base-danger;}
            }
            .panel-body.panel-body-pricing{
                h2{font-size: 26px; font-weight: 400;
                    small{text-transform: uppercase;}
                }
                p{font-size: 13px; color: #666; margin-bottom: 15px;}
                p.text-muted{color: #AAA; font-size: 11px;}
                .fa{color: #EEE;}
            }
            /* PANEL BODY PRICING */

            /* PANEL REFRESHING */
            .panel-refresh-layer{position: absolute; left: 0px; top: 0px; background: #FFF; .opacity(0.5,50); z-index: 3; font-size: 21px;
                img{position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px;}
            }
            /* EOF PANEL REFRESHING */

            .panel-toggled .panel-body,.panel-toggled .panel-footer{display: none;}

            /* XNAV PANEL */

            .x-navigation li > .panel{display: none; position: absolute; left: 0px; top: 56px; width: 400px; z-index: 3; border-top-width: 1px; .border-radius(3px);}
            .x-navigation li > .panel.xn-drop-left{left: auto; right: 0px;}


            .x-navigation li > .panel .panel-heading{padding: 5px 10px;
                .panel-title{font-size: 14px;}
            }

            .x-navigation li > .panel .panel-footer{line-height: 30px; padding: 3px 10px;}

            .x-navigation li.active > .panel{display: block;}

            .x-navigation li > .panel:after{top: -11px; left: 20px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
                                            border-color: rgba(0, 0, 0, 0); border-bottom-color: #E5E5E5;border-width: 5px;margin-left: -5px;}
            .x-navigation li > .panel.xn-drop-left:after{right: 20px; left: auto;}
            .x-navigation li > .panel.dragged:after{display: none;}

            .x-navigation li > .panel.panel-primary:after{border-bottom-color: @base-primary;}
            .x-navigation li > .panel.panel-info:after{border-bottom-color: @base-info;}
            .x-navigation li > .panel.panel-warning:after{border-bottom-color: @base-warning;}
            .x-navigation li > .panel.panel-danger:after{border-bottom-color: @base-danger;}
            .x-navigation li > .panel.panel-success:after{border-bottom-color: @base-success;}

            .resizable-helper{border: 1px dashed @base-primary;}
            //.xn-panel-dragging .panel-heading:hover{cursor: move;}
            .ui-resizable-s{width: 98%;}
            .ui-resizable-e{height: 98%;}
            .ui-resizable-se{width: 16px; height: 16px; right: 0px; bottom: 0px;text-indent: 0px; background: url(../img/jquery/resize-icon.png) left top no-repeat;}
            /* EOF XNAV PANEL */

        /* EOF PANELS */

        /* USER */
        .user{float: left; width: 100%; line-height: 50px;
            img{float: left; width: 50px; border: 3px solid #F5F5F5; .border-radius(50%); margin-right: 10px;}
            img.concept{border: 1px solid @base-warning;}
            img.gereed{border: 1px solid @base-info;}
            img.gekeurd{border: 1px solid @base-success;}
            a{display: block; float: left; text-decoration: none; font-size: 14px; font-weight: 600; color: @base-primary;}
            a:hover{color: @base-primary;}
            .btn{margin-top: 10px;}
        }
        /* END USER */


        /* BUTTONS */
        .btn{font-size: 12px; padding: 4px 15px; line-height: 20px; font-weight: 400; .border-radius(15px); .box-transition-all(200ms);} //.border-radius(5px)
            .btn.btn-lg, .btn-group-lg > .btn{font-size: 14px; padding: 12px 20px;}
            .btn.btn-sm, .btn-group-sm > .btn{font-size: 11px; padding: 2px 10px;}
            .btn.btn-xs, .btn-group-xs > .btn{font-size: 10px; padding: 0px 5px;}

            .btn-default{border-color: #DDD;}
            .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default{background-color: #F5F5F5;border-color: #DDD;}

            .btn-danger{background-color: @base-danger;border-color: @base-danger;}
            .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger{background-color: darken(@base-danger,5%);border-color: darken(@base-danger,5%);}
            .btn-danger[disabled],.btn-danger.disabled{background: lighten(@base-danger,10%);border-color: lighten(@base-danger,8%);}

            .btn-warning{background-color: @base-warning;border-color: @base-warning;}
            .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning{background-color: darken(@base-warning,5%);border-color: darken(@base-warning,5%);}
            .btn-warning[disabled],.btn-warning.disabled{background: lighten(@base-warning,10%);border-color: lighten(@base-warning,8%);}

            .btn-success{background-color: @base-success;border-color: @base-success;}
            .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success{background-color: darken(@base-success,5%);border-color: darken(@base-success,5%);}
            .btn-success[disabled],.btn-success.disabled{background: lighten(@base-success,10%);border-color: lighten(@base-success,8%);}

            .btn-primary{background-color: @base-primary;border-color: @base-primary;}
            .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary{background-color: darken(@base-primary,5%);border-color: darken(@base-primary,5%);}
            .btn-primary[disabled],.btn-primary.disabled{background: lighten(@base-primary,10%);border-color: lighten(@base-primary,8%);}

            .btn-info{background-color: @base-info;border-color: @base-info;}
            .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info{background-color: darken(@base-info,5%);border-color: darken(@base-info,5%);}
            .btn-info[disabled],.btn-info.disabled{background: lighten(@base-info,10%);border-color: lighten(@base-info,8%);}

            .btn-link{font-weight: 600; color: @base-primary;}
            .btn-link:hover,.btn-link:focus,.btn-link:active,.btn-link.active{color: @base-primary;}

            .btn{
                .fa,.glyphicon{font-size: 14px; margin-right: 5px;}
                &.btn-rounded{
                    background: transparent; color: @base-color; .border-radius(12px); border-width: 2px; padding: 2px 10px; font-weight: 600;
                    &.btn-default{
                        &:hover,&:focus,&:active,&.active{border-color: #CCC; color: #333;}
                    }
                    &.btn-success{color: @base-success;
                        &:hover,&:focus,&:active,&.active{border-color: darken(@base-success,5%); color: darken(@base-success,5%);}
                    }
                    &.btn-warning{color: @base-warning;
                        &:hover,&:focus,&:active,&.active{border-color: darken(@base-warning,5%); color: darken(@base-warning,5%);}
                    }
                    &.btn-info{color: @base-info;
                        &:hover,&:focus,&:active,&.active{border-color: darken(@base-info,5%); color: darken(@base-info,5%);}
                    }
                    &.btn-danger{color: @base-danger;
                        &:hover,&:focus,&:active,&.active{border-color: darken(@base-danger,5%); color: darken(@base-danger,5%);}
                    }
                    &.btn-primary{color: @base-primary;
                        &:hover,&:focus,&:active,&.active{border-color: darken(@base-primary,5%); color: darken(@base-primary,5%);}
                    }
                }
                &:active,&.active{.shadow(none);}

                &.btn-twitter{background: #1AB2E8; border-color: #1AB2E8;
                    &:hover,&:focus,&:active,&.active{background: darken(#1AB2E8,5%);}
                }
                &.btn-facebook{background: #3C599B; border-color: #3C599B;
                    &:hover,&:focus,&:active,&.active{background: darken(#3C599B,5%);}
                }
                &.btn-google{background: #E04A39; border-color: #E04A39;
                    &:hover,&:focus,&:active,&.active{background: darken(#E04A39,5%);}
                }
                &.btn-condensed{padding-left: 10px; padding-right: 10px; text-align: center;
                    .fa,.glyphicon{margin: 0px; text-align: center;}
                    &.btn-sm{padding-left: 8px; padding-right: 8px;}
                    &.btn-lg{padding-left: 15px; padding-right: 15px;}
                }
            }

            div.note-editor button.btn{
                border-radius: 5px;
            }
        /* EOF BUTTONS */

        /* FORM ELEMENTS */
        .radio, .checkbox{margin-top: 5px; margin-bottom: 5px; float: left; width: 100%;}
        .radio+.radio, .checkbox+.checkbox{margin-top: 0px;}
        input[type=radio], input[type=checkbox]{margin: 2px 0px 0px;}
            .checkbox.pull-left,.checkbox.pull-right,.radio.pull-left,.radio.pull-right{width: auto;}

        .btn.dropdown-toggle{border-radius: 0px; border: 1px solid #eaeaea;}
        .form-control{height: 30px; font-size: 12px; line-height: 18px; .shadow(none); -webkit-appearance: none; border: 1px solid #eaeaea; border-radius: 0px; background: #F9F9F9;}
        .form-control:focus{border-color: #C5C5C5; .shadow(none); border-color: #C1C1C1; background: #FFF;}
        .form-control[disabled],.form-control[readonly]{color: #CCC;}
        .form-control[disabled]:focus,.form-control[readonly]:focus{background: #EEE; color: #CCC; border-color: #D5D5D5;}
        .input-group-addon{border-color: @base-primary; background-color: @base-primary; font-size: 13px; padding: 0px 10px; line-height: 28px; color: #FFF; text-align: center; min-width: 36px;}
        .input-group-addon, .input-group-btn{vertical-align: bottom;}

        .form-group:last-child{margin-bottom: 0px;}

        .form-group-separated{border-top: 1px dashed #D5D5D5;
            .form-group{border-bottom: 1px dashed #D5D5D5; margin-bottom: 0px;
                [class^="col-md-"]{border-left: 1px dashed #D5D5D5; padding: 12px 10px;
                    &:first-child{border-left: 0px;}
                }
                &:last-child{border-bottom: 0px;}
                &.form-group-border-right{
                    [class^="col-md-"]{border-left: 0px;border-right: 1px dashed #D5D5D5;
                        &:last-child{border-right: 0px; margin-left: 0px;}
                    }
                }
            }
            &.panel-body,&.modal-body{padding: 0px;}
        }

        .form-horizontal .form-group{margin-left: 0px; margin-right: 0px;}
        .form-horizontal .control-label{line-height: 30px; padding-top: 0px;}

        .help-block{color: #AAB2BD; margin-bottom: 0px;}
        .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group{margin-right: -2px;}

        .input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn{font-size: 16px;}
            .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn{font-size: 11px;}

        .input-group-btn>.btn:hover, .input-group-btn>.btn:focus, .input-group-btn>.btn:active{z-index: 0;}
        .input-group-btn > .btn{border-radius:0px !important;}


        .has-feedback label~.form-control-feedback{top: 20px;}
            /* FORM VALIDATION STATES */
            .has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox,
            .has-success .radio-inline, .has-success .checkbox-inline,.has-success .form-control-feedback{color: @base-success;}
            .has-success .form-control{border-color: @base-success;}

            .has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox,
            .has-warning .radio-inline, .has-warning .checkbox-inline, .has-warning .form-control-feedback{color: @base-warning;}
            .has-warning .form-control{border-color: @base-warning;}

            .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox,
            .has-error .radio-inline, .has-error .checkbox-inline, .has-error .form-control-feedback{color: @base-danger;}
            .has-error .form-control{border-color: @base-danger;}
            /* EOF FORM VALIDATION STATES */

            .form-control.error, .bootstrap-select.error > button{border-color: @base-danger;}
            label{font-weight: 600;}
            label.error,label.valid{color: @base-danger; margin-bottom: 0px; margin-top: 3px; font-size: 11px; font-weight: normal; width: 100%;}

            .form-control.valid, .bootstrap-select.valid > button{border-color: @base-success;}
            label.valid{color: @base-success;}

            .control-label.text-left{text-align: left;}


        /* EOF FORM ELEMENTS */

        /* LABELS AND BADGES */
        .label{font-weight: 500; border-radius: 1em;}
        .badge{font-size: 11px; line-height: 20px; font-weight: 500; .border-radius(1em); padding: 0px 8px;}
        .label-primary,.badge-primary{background-color: @base-primary;}
        .label-success,.badge-success{background-color: @base-success;}
        .label-info,.badge-info{background-color: @base-info;}
        .label-warning,.badge-warning{background-color: @base-warning;}
        .label-danger,.badge-danger{background-color: @base-danger;}
        /* EOF LABELS AND BADGES */

        /* ALERTS */
        .alert{float: left; width: 100%; margin-bottom: 10px; line-height: 21px;}
        .alert-success{background-color: @base-success; color: #FFF; border-color: darken(@base-success,2%);}
        .alert-info{background-color: @base-info; color: #FFF; border-color: darken(@base-info,2%);}
        .alert-warning{background-color: @base-warning; color: #FFF; border-color: darken(@base-warning,2%);}
        .alert-danger{background-color: @base-danger; color: #FFF; border-color: darken(@base-danger,2%);}
        /* EOF ALERTS */

        /* DROP DOWN */
        .dropdown-menu{font-size: 12px;.shadow(0px 2px 1px 0px rgba(0, 0, 0, 0.1)); border: 1px solid #E5E5E5; padding: 0px; margin: 8px 0px 0px; min-width: 200px;}
            .dropdown-menu > li > a{padding: 8px 15px; border-bottom: 1px solid #E9E9E9; line-height: 20px;}
            .dropdown-menu > li:last-child > a{border-bottom: 0px;}

            .dropdown-menu:after,.dropdown-menu:before {bottom: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
            .dropdown-menu:after{border-color: rgba(255, 255, 255, 0);border-bottom-color: #FFF;border-width: 5px;margin-left: -5px;}
            .dropdown-menu:before{border-color: rgba(229, 229, 229, 0);border-bottom-color: #E5E5E5;border-width: 6px;margin-left: -6px;}

                .dropup .dropdown-menu:after,.dropup .dropdown-menu:before{display: none;}

            .dropdown-header{padding: 10px 15px; border-bottom: 1px solid #E5E5E5; color: #777;}

            .dropdown-menu .fa{margin-right: 5px;}
            .dropdown-menu .divider{background: #F5F5F5; margin: 0px; padding: 15px 0px 0px; border-bottom: 1px solid #E5E5E5;}
        /* EOF DROP DOWN */

        /* MODAL */
        .modal-content{.border-radius(5px); .shadow(none); border-width: 5px;}
        .modal-header{padding: 10px 10px 10px 15px; line-height: 30px; .border-radius(5px 5px 0px 0px); background: #F5F5F5; border-color: #D5D5D5}
            .modal-header .close{margin-top: 5px; margin-right: 5px;}
            .modal-title{line-height: 30px;}
        .modal-body{padding: 15px; .clearfix;}
        .modal-footer{ background: #F5F5F5; border-color: #D5D5D5; padding: 10px 15px; .border-radius(0px 0px 5px 5px);}

        /* EOF MODAL */

        /* PORTLET */
        .scCol{min-height: 30px;}
        .scPlaceholder{background: #fcfbf4; border: 1px dashed #999; margin-bottom: 20px; .border-radius(3px); float: left; width: 100%;}
        /* EOF PORTLET */

        /* TYPOGRAPHY */
        .page-title{float: left; width: 100%; padding: 5px 10px;
            h2{float: left; line-height: 30px;}
        }

        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{color: @base-heading-color; padding: 0px; margin: 0px;}
        h1,.h1{margin-top: 15px; margin-bottom: 15px; font-size: 32px; font-weight: 400;}
        h2,.h2{margin-bottom: 15px; font-size: 26px; font-weight: 400;}
        h3,.h3{margin-bottom: 10px; font-size: 18px; font-weight: 600;
            small{line-height: 19px;}
        }
        h4,.h4{margin-bottom: 10px; font-size: 16px; font-weight: 400;}
        h5,.h5{margin-bottom: 10px; margin-top: 5px; font-size: 14px; font-weight: 400;}
        h6,.h6{margin-bottom: 10px; font-size: 13px; font-weight: 600;}

        blockquote{font-size: 12px; border-left-color: #CCC; line-height: 20px;}
        blockquote p{line-height: 12px;}
        .blockquote-reverse, blockquote.pull-right{border-right-color: #CCC;}
            .blockquote-primary{border-left-color: @base-primary;}
            .blockquote-success{border-left-color: @base-success;}
            .blockquote-info{border-left-color: @base-info;}
            .blockquote-danger{border-left-color: @base-danger;}
            .blockquote-warning{border-left-color: @base-warning;}

        .text-title{font-weight: 600; border-bottom: 1px solid #F5F5F5; padding: 10px 0px 5px; font-size: 15px;}
        /* EOF TYPOGRAPHY */

        /* HELPERS */
        .push-down-0{margin-bottom: 0px !important;}
        .push-down-5{margin-bottom: 5px !important;}
        .push-down-10{margin-bottom: 10px !important;}
        .push-down-15{margin-bottom: 15px !important;}
        .push-down-20{margin-bottom: 20px !important;}
        .push-down-25{margin-bottom: 25px !important;}
        .push-down-30{margin-bottom: 30px !important;}

        .push-up-0{margin-top: 0px !important;}
        .push-up-5{margin-top: 5px !important;}
        .push-up-10{margin-top: 10px !important;}
        .push-up-15{margin-top: 15px !important;}
        .push-up-20{margin-top: 20px !important;}
        .push-up-25{margin-top: 25px !important;}
        .push-up-30{margin-top: 30px !important;}

        .padding-0{padding: 0px !important;}
        .padding-bottom-0{padding-bottom: 0px !important;}
        .padding-top-0{padding-top: 0px !important;}

        .text-muted{color: #CCD0D9 !important;}
        .text-primary{color: @base-primary !important;}
        .text-success{color: @base-success !important;}
        .text-info{color: @base-info !important;}
        .text-warning{color: @base-warning !important;}
        .text-danger{color: @base-danger !important;}

        .bg-primary{color: #fff; background-color: @base-primary;}
        .bg-success{color: #fff; background-color: @base-success;}
        .bg-info{color: #fff; background-color: @base-info;}
        .bg-warning{color: #fff; background-color: @base-warning;}
        .bg-danger{color: #fff; background-color: @base-danger;}

        .twitter{border-color: #1AB2E8 !important; color: #1AB2E8 !important;
            &:hover{border-color: lighten(#1AB2E8,10%) !important; color: lighten(#1AB2E8,10%) !important;}
        }
        .facebook{border-color: #3C599B !important; color: #3C599B !important;
            &:hover{border-color: lighten(#3C599B,10%) !important; color: lighten(#3C599B,10%) !important;}
        }
        .line-height-30{line-height: 30px;}
        /* EOF HELPERS */

        /* PROGRESS BARS */
        .progress.progress-small{height: 5px;}
        .progress.progress-small .progress-bar{font-size: 0px;}

        .progress-bar{background-color: @base-primary;}
        .progress-bar-success{background-color: @base-success;}
        .progress-bar-warning{background-color: @base-warning;}
        .progress-bar-danger{background-color: @base-danger;}
        .progress-bar-info{background-color: @base-info;}
        .progress-bar-colorful{.background-colorful;}
        /* EOF PROGRESS BARS */

        /* SWITCH */
        .switch{cursor:pointer;position:relative; height: 30px; line-height: 30px;
            input{position:absolute;opacity:0;filter:alpha(opacity=0);
                &:checked+span:after{left:21px;}
                &:checked+span{background-color: @base-success;}
                &:disabled+span{background-color: #CCC;}
            }
            span{position:relative; width:50px; height:30px; .border-radius(30px); background-color: @base-danger; border:1px solid #E5E5E5; display: inline-block; .box-transition-all(200ms); border-color: rgba(0,0,0,0.1); left: 0px;
                &:after{content:""; position:absolute; background-color: #fff; width:26px; top:1px; bottom:1px; left:1px; .border-radius(30px); .shadow(1px 1px 3px rgba(0,0,0,0.25)); .box-transition-all(200ms);}
            }
            &.switch-small{margin: 6px 0px 4px; height: 20px; line-height: 20px;
                input{
                    &:checked+span:after{left:11px;}
                }
                span{width: 30px; height: 20px; .border-radius(20px);
                    &:after{width: 16px;}
                }
            }
        }



        /* END SWITCH */

        /* PAGINATION */
        .pagination{width: 100%; margin: 10px 0px;}
        .pagination > li > a, .pagination > li > span{margin-left: 3px; .border-radius(3px); color: @base-color; border-color: #E5E5E5;}
        .pagination > li > a:hover, .pagination > li > span:hover{color: #222;}
        .pagination > li.active > a,.pagination > li.active > a:hover{background: @base-primary; color: #FFF; border-color: @base-primary;}

            .pagination.pagination-sm{margin: 0px; width: auto;
                &.push-down-20{margin-bottom: 20px;}
                &.push-up-20{margin-top: 20px;}
            }
        /* END PAGINATION */

        /* POPOVER */
        .popover{.shadow(0px 2px 1px 0px rgba(0, 0, 0, 0.1));}
            .popover-title{background: #f5f5f5; border-bottom-color: #e5e5e5; line-height: 20px;}
        .popover > .arrow, .popover > .arrow:after{border-width: 5px;}
            .popover.right > .arrow{left: -6px; margin-top: -6px;}
                .popover.right > .arrow:after{bottom: -5px;}

            .popover.top > .arrow{bottom: -6px; margin-left: -6px; border-top-color: rgba(0,0,0,.50);}
                .popover.top > .arrow:after{margin-left: -5px;}

            .popover.bottom > .arrow{top: -6px; margin-left: -6px; border-bottom-color: rgba(0,0,0,.30);}
                .popover.bottom > .arrow:after{margin-left: -5px;}

            .popover.left > .arrow{right: -6px; margin-top: -6px;}
                .popover.left > .arrow:after{bottom: -5px;}
        /* EOF POPOVER */

        /* TABS */
        .tabs{float: left; width: 100%; position: relative; margin-top: 40px;}
        .nav-tabs,.nav-tabs.nav-justified{border-bottom: 0px; margin-bottom: 0px; margin-top: -40px; padding: 0px;}
            .block-head .nav-tabs{border-bottom: 0px;}

            .nav-tabs > li{margin-bottom: 0px;}
                .nav-tabs > li > a{margin-right: 5px; border: 0px; font-size: 14px; border-top: 2px solid transparent; .border-radius(0px); color: #333; .box-transition-all(200ms); background: #F5F5F5; padding: 9px 15px;}
                .nav-tabs > li:first-child > a{.border-radius(5px 0px 0px 0px);}

            .nav-tabs > li > a:hover{border-color: transparent; background: #FFF;}
            .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus,.nav-tabs > .dropdown.active.open > a:hover
            {border: 0px; border-top: 2px solid @base-primary; background: #FFF; .border-radius(3px 3px 0px 0px);}

            .nav-tabs.nav-justified > li > a{border: 0px; border-top: 2px solid transparent;.border-radius(0px); color: #333; .box-transition-all(200ms);}
                .nav-tabs.nav-justified > li > a:hover{border-color: @base-primary; background: transparent;}
                .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus{border: 0px; border-top: 2px solid @base-primary; background: #FFF; .border-radius(3px 3px 0px 0px);}

            .nav-tabs a .caret,.nav-tabs a:hover .caret{color: @base-primary;}

            .nav-tabs-vertical .tabs{margin-top: 0px;}
             .nav-tabs-vertical .nav-tabs{margin-top: 0px; float: left; width: 150px; position: absolute; left: 0px; border-bottom: 0px; padding: 0px;}
                .nav-tabs-vertical .nav-tabs > li{width: 100%;}
                    .nav-tabs-vertical .nav-tabs > li > a{width: 100%; .border-radius(0px); border-top: 0px; border-left: 2px solid transparent; background: #FFF;}
                        .nav-tabs-vertical .nav-tabs > li > a:hover{border-left-color: @base-primary; background: transparent;}
                        .nav-tabs-vertical .nav-tabs > li.active > a, .nav-tabs-vertical .nav-tabs > li.active > a:hover, .nav-tabs-vertical .nav-tabs > li.active > a:focus, .nav-tabs-vertical .nav-tabs > .dropdown.active.open > a:hover
                        {border-top: 0px; border-left: 2px solid @base-primary; background: #F5F5F5;}

                    .nav-tabs-vertical .nav-tabs > li:first-child > a{-moz-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px;}
                    .nav-tabs-vertical .nav-tabs > li:last-child > a{-moz-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;}

            .nav-tabs-vertical .tab-content{width: auto; margin-left: 150px;}
            .nav-tabs-vertical .panel-body{padding-top: 10px;}
        /* EOF TABS */

        /* TABLES */
        //.table > thead > tr > th{border-bottom-color: #E5E5E5;}
        .table-responsive{border: 0px;}
        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
        .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{border-color: #E5E5E5; border-width: 1px;}
        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th{background: #F5F5F5;}
        .table > thead > tr > th{background: #FFF; color: #333; font-size: 11px; white-space: nowrap;}

        .panel-body.panel-body-table{padding: 0px;
            h1,h2,h3,h4,h5,h6{padding-left: 10px; margin-bottom: 10px;}
        }
        .panel-body.panel-body-table .table{margin-bottom: 0px; border: 0px;}
            .panel-body.panel-body-table .table tr > td:first-child,
            .panel-body.panel-body-table .table tr > th:first-child{border-left: 0px;}
            .panel-body.panel-body-table .table tr > td:last-child,
            .panel-body.panel-body-table .table tr > th:last-child{border-right: 0px;}
            .panel-body.panel-body-table .table > tbody > tr:last-child > td{border-bottom: 0px;}
            .panel-body.panel-body-table td, .panel-body.panel-body-table th{padding: 8px 10px;}

            .table.table-actions td{line-height: 28px;}
            .table .progress-small{margin: 7px 0px 8px;}
        /* EOF TABLES */

        /* Datatables */
        .dataTable{float: left; border-bottom: 1px solid #E5E5E5 !important; margin-bottom: 5px;}
        .dataTable div.checker, .dataTable div.radio{display: inherit;}

        .dataTables_wrapper{float: left; width: 100%;}

        .dataTables_length{width: 50%; float: left; padding: 0px 0px 5px; border-bottom: 1px solid #E5E5E5; font-size: 12px;}
            .dataTables_length label,.dataTables_filter label{padding: 0px; line-height: 26px; height: auto; margin: 0px; font-weight: normal;}
            .dataTables_length select{width: 70px; display: inline; margin: 0px 5px;}
        .dataTables_filter{width: 50%; float: right; padding-left: 5px; padding: 0px 0px 5px; border-bottom: 1px solid #E5E5E5; font-size: 12px;}
            .dataTables_filter label{float: right;}
            .dataTables_filter label input{width: 150px; display: inline; margin-left: 5px;}

            td.dataTables_empty{font-size: 11px; text-align: center; color: #333;}

        .dataTables_info{float: left; font-size: 12px; padding: 0px; line-height: 30px;}
        .dataTables_paginate{padding: 0px; text-align: right; float: right;}

            .dataTables_paginate a.paginate_disabled_previous,.dataTables_paginate a.paginate_disabled_next,.dataTables_paginate a.paginate_button,.paginate_enabled_next,.paginate_active,.paginate_enabled_previous
            {padding: 5px 10px; font-size: 12px; .border-radius(3px); float: left; text-decoration: none; background-color: #fff; border: 1px solid #ddd; color: @base-color; margin-left: 3px; cursor: pointer;}
            .dataTables_paginate .paginate_enabled_next:hover,.dataTables_paginate a.paginate_button:hover,.dataTables_paginate .paginate_enabled_previous:hover
            {background-color: #eee; border-color: #ddd; color: #222;}
            .dataTables_paginate .paginate_button.current,
            .dataTables_paginate .paginate_button.current:hover{background: @base-primary; color: #FFF; border-color: @base-primary;}
            .dataTables_paginate a.paginate_disabled_previous,.dataTables_paginate a.paginate_button_disabled,.dataTables_paginate a.paginate_disabled_next
            {cursor: default; color: #ccc;}
            .dataTables_paginate a.paginate_button_disabled:hover{box-shadow: none; color: #ccc;}

        .sorting_desc,.sorting_asc,.sorting{position: relative; cursor: pointer; padding-right: 20px !important;}
            .sorting:before,.sorting_desc:before,.sorting_asc:before
            {position: absolute; top: 8px; right: 5px; font-family: 'FontAwesome'; .opacity(0.9,90); width: 10px; height: 10px; display: block;}
            .sorting:before{content: "\f0dc"; .opacity(0.3,30);}
            .sorting_desc:before{content: "\f0d8";}
            .sorting_asc:before{content: "\f0d7";}

        .sorting_asc_disabled:before,.sorting_desc_disabled:before{.opacity(0.1,10);}
        /* eof Datatables */

        /* icons-list */
        .icons-list{list-style: none; padding: 0px; margin: 0px 0px 20px; display: block; float: left; width: 100%;}
            .icons-list li{float: left; display: block; width: 25%; height: 30px; padding: 5px; line-height: 20px; font-size: 11px; border: 1px solid #FFF;}
            .icons-list li:hover{color: #333; cursor: pointer; background: #F5F5F5; border: 1px solid #E5E5E5; .border-radius(3px);}
                .icons-list li span:first-child,.icons-list li i{font-size: 18px; float: left; margin-right: 10px; color: #222; line-height: 20px;}

                .icon-preview{font-size: 88px; color: #222; text-align: center;}
        /* eof icons-list */


        /* WIDGETS */

        .widget{width: 100%; float: left; margin: 0px; list-style: none; text-decoration: none; .shadow(0px 1px 1px 0px rgba(0, 0, 0, 0.2));
                color: #FFF; .border-radius(5px); padding: 15px 10px; margin-bottom: 20px; min-height: 120px; position: relative;}
        .widget.widget-padding-sm,.widget.widget-item-icon{padding: 10px 0px 5px;}
        .widget.widget-np{padding: 0px;}
        .widget.widget-no-subtitle{padding-top: 25px;}

        .widget.widget-carousel{padding-bottom: 0px; padding-top: 10px;}
            .widget.widget-default{.gradient-v(#FFFFFF,#F5F5F5);}
            .widget.widget-primary{.gradient-v(@widget-primary,darken(@widget-primary,5%));}
            .widget.widget-success{.gradient-v(@widget-success,darken(@widget-success,5%));}
            .widget.widget-info{.gradient-v(@widget-info,darken(@widget-info,5%));}
            .widget.widget-warning{.gradient-v(@widget-warning,darken(@widget-warning,5%));}
            .widget.widget-danger{.gradient-v(@widget-danger,darken(@widget-danger,5%));}

        .widget .widget-title,.widget .widget-subtitle,.widget .widget-int,.widget .widget-big-int{width: 100%; float: left; text-align: center;}

        .widget .widget-title{font-size: 16px; font-weight: 600; margin-bottom: 5px; line-height: 20px; text-transform: uppercase;}
        .widget .widget-subtitle{font-size: 12px; font-weight: 400; margin-bottom: 5px; line-height: 15px; color: #EEE;}
        .widget .widget-int{font-size: 32px; line-height: 40px; font-weight: bold; font-family: arial;}
        .widget .widget-big-int{font-size: 42px; line-height: 45px; font-weight: 300;}

        .widget .widget-item-left{margin-left: 10px; float: left; width: 100px;}
        .widget .widget-item-right{margin-right: 10px; float: right; width: 100px;}

        .widget.widget-item-icon .widget-item-left,
        .widget.widget-item-icon .widget-item-right{width: 70px; padding: 20px 0px; text-align: center;}

        .widget.widget-item-icon .widget-item-left{border-right: 1px solid rgba(0,0,0,0.1); margin-right: 10px; padding-right: 10px;}
        .widget.widget-item-icon .widget-item-right{border-left: 1px solid rgba(0,0,0,0.1); margin-left: 10px; padding-left: 10px;}

        .widget .widget-item-left .fa, .widget .widget-item-right .fa,
        .widget .widget-item-left .glyphicon, .widget .widget-item-right .glyphicon{font-size: 60px;}


        .widget .widget-data{padding-left: 120px;}
        .widget .widget-data-left{padding-right: 120px;}

        .widget.widget-item-icon .widget-data{padding-left: 90px;}
        .widget.widget-item-icon .widget-data-left{padding-right: 90px; padding-left: 10px;}

            .widget .widget-data .widget-title, .widget .widget-data-left .widget-title,
            .widget .widget-data .widget-subtitle, .widget .widget-data-left .widget-subtitle,
            .widget .widget-data .widget-int, .widget .widget-data-left .widget-int,
            .widget .widget-data .widget-big-int, .widget .widget-data-left .widget-big-int{text-align: left;}

        .widget .widget-controls a{position: absolute; width: 30px; height: 30px; text-align: center; line-height: 27px; color: #FFF;
                                   border: 1px solid #FFF; .border-radius(50%);.box-transition-all(200ms); .opacity(0.4,40);}
            .widget .widget-controls a.widget-control-left{left: 10px; top: 10px;}
            .widget .widget-controls a.widget-control-right{right: 10px; top: 10px;}
            .widget .widget-controls a:hover{.opacity(1,100);}

        .widget .widget-buttons{float: left; width: 100%; text-align: center; padding-top: 3px; margin-top: 5px; border-top: 1px solid rgba(0,0,0,0.1);}
            .widget .widget-buttons a{position: relative; display: inline-block; line-height: 30px; font-size: 21px;}

            .widget .widget-buttons .col{width: 100%; float: left;}
            .widget .widget-buttons.widget-c2 .col{width: 50%;}
            .widget .widget-buttons.widget-c3 .col{width: 33.333333%;}
            .widget .widget-buttons.widget-c4 .col{width: 25%;}
            .widget .widget-buttons.widget-c5 .col{width: 20%;}

            .widget.widget-primary .widget-buttons a{color: darken(@widget-primary,25%); border-color: darken(@widget-primary,25%);}
                .widget.widget-primary .widget-buttons a:hover{color: darken(@widget-primary,35%);}
            .widget.widget-success .widget-buttons a{color: darken(@widget-success,25%); border-color: darken(@widget-success,25%);}
                .widge.widget-success .widget-buttons a:hover{color: darken(@widget-success,30%);}
            .widget.widget-info .widget-buttons a{color: darken(@widget-info,25%); border-color: darken(@widget-info,25%);}
                .widget.widget-info .widget-buttons a:hover{color: darken(@widget-info,30%);}
            .widget.widget-warning .widget-buttons a{color: darken(@widget-warning,25%); border-color: darken(@widget-warning,25%);}
                .widget.widget-warning .widget-buttons a:hover{color: darken(@widget-warning,30%);}
            .widget.widget-danger .widget-buttons a{color: darken(@widget-danger,25%); border-color: darken(@widget-danger,25%);}
                .widget.widget-danger .widget-buttons a:hover{color: darken(@widget-danger,30%);}

         .plugin-clock span{-webkit-animation: pulsate 1s ease-out;-webkit-animation-iteration-count: infinite;
                            -moz-animation: pulsate 1s ease-out; -moz-animation-iteration-count: infinite;
                            animation: pulsate 1s ease-out; animation-iteration-count: infinite; opacity: 0.0; margin-right: 2px;}

         .widget.widget-default{color: @base-heading-color;
            .widget-subtitle{color: @base-heading-color;}
            .widget-controls a{color: @base-heading-color; border-color: @base-heading-color;}
         }
        /* END WIDGETS */

        /* TILES */
        .tile{width: 100%; float: left; margin: 0px; list-style: none; text-decoration: none; font-size: 38px; font-weight: 300;
               color: #FFF; .border-radius(5px); padding: 10px; margin-bottom: 20px; min-height: 100px; position: relative; border: 1px solid #D5D5D5; text-align: center;
            &.tile-valign{line-height: 75px;}
            &.tile-default{background: #FFF; color: @base-color;
                &:hover{background: #FAFAFA;}
            }
            &.tile-primary{background: @base-primary; border-color: @base-primary;
                &:hover{background: darken(@base-primary,2%);}
            }
            &.tile-success{background: @base-success; border-color: @base-success;
                &:hover{background: darken(@base-success,2%);}
            }
            &.tile-warning{background: @base-warning; border-color: @base-warning;
                &:hover{background: darken(@base-warning,2%);}
            }
            &.tile-danger{background: @base-danger; border-color: @base-danger;
                &:hover{background: darken(@base-danger,2%);}
            }
            &.tile-info{background: @base-info; border-color: @base-info;
                &:hover{background: darken(@base-info,2%);}
            }
            &:hover{text-decoration: none; color: #FFF;}
            &.tile-default:hover{color: @base-color;}

            .fa{font-size: 52px; line-height: 74px;}
            p{font-size: 14px; margin: 0px;}

            .informer{position: absolute; left: 5px; top: 5px; font-size: 12px; color: #FFF; line-height: 14px;
                &.informer-default{color: #FFF;}
                &.informer-primary{color: @base-primary;}
                &.informer-success{color: @base-success;}
                &.informer-info{color: @base-info;}
                &.informer-warning{color: @base-warning;}
                &.informer-danger{color: @base-danger;}

                .fa{font-size: 14px; line-height: 16px;}

                &.dir-tr{left: auto; right: 5px;}
                &.dir-bl{top: auto; bottom: 5px;}
                &.dir-br{left: auto; top: auto; right: 5px; bottom: 5px;}
            }
        }
        /* EOF TILES */

        /* MESSAGES */
        .messages{width: 100%; float: left;
            .item{width: 100%; float: left; margin-bottom: 10px; .opacity(0,0); .box-transition-all(200ms);
                .text{background: #FFF; padding: 10px; .border-radius(3px); border: 1px solid #D5D5D5;
                    .heading{width: 100%; margin-bottom: 5px;
                        a{text-decoration: none; font-size: 12px; color: @base-primary; font-weight: 600; line-height: 20px;}
                        .date{float: right; line-height: 20px; font-size: 11px; color: #CCC; font-weight: 600;}
                    }
                    &:hover{border-color: #BBB;}
                }
                &:nth-child(2n) .text{background: #F6F6F6;}
                &.item-visible{.opacity(1,100);}
            }
            &.messages-img{
                .item{
                    .image{float: left; width: 40px;
                        img{border: 2px solid #F5F5F5; border-radius: 50%; width: 40px;}
                    }
                    .text{margin-left: 50px; position: relative;
                        &:after,&:before{right: 100%; top: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
                        &:after{border-color: rgba(255, 255, 255, 0);border-right-color: #FFF;border-width: 5px;margin-top: -5px;}
                        &:before{border-color: rgba(213, 213, 213, 0);border-right-color: #D5D5D5;border-width: 6px;margin-top: -6px;}
                    }
                    .text:hover{
                        &:before{border-right-color: #BBB;}
                    }
                    &.in{
                        .image{float: right;}
                        .text{margin-left: 0px; margin-right: 50px;
                            &:after,&:before{right: auto; left: 100%;}
                            &:after{border-right-color: transparent; border-left-color: #FFF;}
                            &:before{border-right-color: transparent; border-left-color: #D5D5D5;}
                        }
                        .text:hover{
                            &:before{border-left-color: #BBB;}
                        }
                    }
                }

            }
        }
        /* END MESSAGES */

        /* CONTACTS */
        .contact-info{float: left; width: 100%;
            p{margin-bottom: 5px;}
            strong{font-size: 13px;}
            small{font-weight: 700;}
        }
        /* END CONTACTS */

        /* LOCK SCREEN */
        .lockscreen-container{float: left; width: 100%; min-height: 100%; background: url("../img/bg.png") left top repeat @base-primary;
            .lockscreen-box{width: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -120px;
                .lsb-access{border: 5px solid darken(@base-primary,5%); background: darken(@base-primary,10%); width: 140px; height: 140px; float: left; margin-left: 30px; .border-radius(50%); .box-transition-all(200ms);
                    .lsb-box{background: @base-primary; border: 5px solid darken(@base-primary,12%); width: 120px; height: 120px; margin: 5px; .border-radius(50%); line-height: 110px; text-align: center; .box-transition-all(200ms);
                        .fa{font-size: 64px; line-height: 110px; color: darken(@base-primary,10%); text-shadow: 1px 1px 1px rgba(0,0,0,0.6); .box-transition-all(200ms);}
                        .user{display: none; position: relative;
                            img{border: 0px; width: 110px; height: 110px;}
                            .user_signin{position: absolute; width: 110px; height: 110px; left: 0px; top: 0px; .border-radius(50%); background: rgba(0,0,0,0.2); display: none; z-index: 5;
                                .fa{font-size: 64px; color: rgba(0,0,0,0.3); line-height: 110px; text-align: center; text-shadow: none;}
                            }
                            &:hover{
                                .user_signin{display: block;
                                    .fa{display: block;}
                                }
                            }
                        }
                    }
                    &:hover{border-color: darken(@base-primary,2%); background-color: darken(@base-primary,7%); cursor: pointer;
                        .lsb-box{border-color: darken(@base-primary,9%); background: lighten(@base-primary,2%);
                            .fa{color: darken(@base-primary,8%); text-shadow: 1px 1px 1px rgba(0,0,0,0.4);}
                        }
                    }
                }
                .lsb-form{display: none; float: left; width: 200px; margin-top: 20px; position: relative;
                    .sign-in{display: none;}
                    .input-group-addon{background: darken(@base-primary,2%); border: 1px solid darken(@base-primary,3%); border-right: 0px; color: #D5D5D5;font-size: 23px; line-height: 32px;
                        .fa{line-height: 32px;}
                    }
                    input{background: darken(@base-primary,2%); color: #D5D5D5; border: 1px solid darken(@base-primary,3%); height: 36px;}

                    ::-webkit-input-placeholder{color: #AAA;}
                    :-moz-placeholder{color: #AAA;opacity:1;}
                    ::-moz-placeholder{color: #AAA;opacity: 1;}
                    :-ms-input-placeholder{color: #AAA;}
                }

                &.active{
                    .lsb-access{position: relative;
                        &:after{top: 135px;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
                                border-color: rgba(136, 183, 213, 0);border-top-color: darken(@base-primary,5%);border-width: 5px;margin-left: -5px; .box-transition-all(200ms);}
                        .lsb-box{
                            .fa{display: none;}
                            .user{display: block;}
                        }
                        &:hover{
                            &:after{border-top-color: darken(@base-primary,2%);}
                        }
                    }
                    .lsb-form{display: block;}
                }
            }
        }
        /* END LOCK SCREEN */

        /* REGISTRATION */
        .registration-container{float: left; width: 100%; min-height: 100%; background: url("../img/bg.png") left top repeat @base-primary;
            .registration-box{width: 400px; margin: 0px auto; padding-top: 100px;
                .registration-logo{background: url("../img/logo-lr.png") top center no-repeat; width: 100%; height: 100px; float: left;}
                .registration-body{width: 100%; float: left; background: rgba(0,0,0,0.8); padding: 20px; .border-radius(5px);
                    .registration-title{color: #FFF; font-size: 19px; font-weight: 300; margin-bottom: 20px;}
                    .form-control{border: 0px; background: rgba(0,0,0,0.9); padding: 10px 15px; color: #CCC; line-height: 20px; height: auto; .box-transition-all(200ms);
                        &:focus{background: rgba(0,0,0,0.3);}
                    }
                    .btn-link{color: #FFF; border: 0px;}
                    .registration-subtitle{line-height: 20px; padding: 5px; font-size: 12px; color: #DDD; margin-top: -10px;
                        a{color: @base-info;}
                    }
                    h4{font-size: 12px; color: #F5F5F5; line-height: 20px; margin-top: 10px;}
                }
                .registration-footer{width: 100%; float: left; padding: 10px; color: #FFF;
                    a{color: #FFF;}
                }
            }
            &.registration-extended{
                .registration-box{width: 767px;}
            }
        }
        /* END REGISTRATION */

        /* LOGIN */
        .login-container{float: left; width: 100%; min-height: 100%; background: url("../img/bg.png") left top repeat #000;
            .login-box{width: 400px; margin: 0px auto; padding-top: 100px;
                .login-logo{background: url("../img/logo-lr.png") top center no-repeat; width: 100%; height: 100px; float: left;}
                .login-body{width: 100%; float: left; background: rgba(255,255,255,0.1); padding: 20px; .border-radius(0px);
                    .login-title{color: #FFF; font-size: 19px; font-weight: 300; margin-bottom: 20px;}
                    .form-control{border: 0px; background: rgba(0,0,0,0.2); padding: 10px 15px; color: #CCC; line-height: 20px; height: auto; .box-transition-all(200ms);
                        &:focus{background: rgba(0,0,0,0.3);}
                    }
                    .btn-link{color: #FFF; border: 0px;}
                    .login-or{width: 40px; height: 25px; background: rgba(0,0,0,0.2);position: relative; margin: 25px auto; text-align: center; line-height: 25px; color: #FFF;
                        &:before{content: "";position: absolute;left: 0;width: 0;height: 0;top: -10px;
                                border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 10px solid rgba(0,0,0,0.2);
                        }
                        &:after{content: "";position: absolute;left: 0;width: 0;height: 0;bottom: -10px;
                                border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 10px solid rgba(0,0,0,0.2);
                        }
                    }
                    .login-subtitle{line-height: 20px; padding: 5px 0px; font-size: 12px; color: #FFF;
                        a{color: @base-info;}
                    }
                }
                .login-footer{width: 100%; float: left; padding: 10px; color: #FFF;
                    a{color: #FFF;}
                }
            }
            &.lightmode{background: url("../img/backgrounds/wall_1.jpg") left top no-repeat;
                .login-box{
                    .login-body{background: rgba(255,255,255,0.2);
                        .form-control{background: rgba(255,255,255,0.4); color: #333;}
                    }
                    .login-subtitle a{color: @base-primary;}
                }
            }
            &.login-v2{background: url("../img/bg.png") left top repeat #F5F5F5;
                .login-box{
                    .login-logo{background: url("../img/logo-grey.png") top center no-repeat;}
                    .login-body{
                        .login-title{color: @base-primary;}
                        .form-control{background: #FFF; color: @base-primary; border: 1px solid #D5D5D5; border-left: 0px;}
                        .input-group-addon{background: #FFF; color: @base-primary; line-height: 40px; font-size: 21px; border-color: #D5D5D5;}
                        a{color: @base-primary;}
                    }
                    .login-footer{color: @base-color;
                        a{color: @base-heading-color;}
                    }
                }
            }
            &.login-inside{background: transparent;
                .login-box{width: 100%; padding-top: 0px;
                    .login-body{padding: 0px;}
                }
            }
        }
        /* END LOGIN */

        /* TIMELINE */
        .img-text{border: 3px solid #FFF; .border-radius(3px); margin: 0px 10px 5px 0px; .shadow(1px 1px 0px 0px rgba(0,0,0,0.1));}

        .timeline{float: left; width: 100%; padding: 0px; position: relative; padding: 0px; margin: 0px 0px 20px;
             &:before{content: " "; position: absolute; width: 6px; background: #FFF; height: 100%; left: 50%; margin-left: -3px; border: 1px solid rgba(0,0,0,0.1);}
            .timeline-item{width: 50%; float: left; position: relative; clear: both; margin-bottom: 20px; z-index: 2;
                &.timeline-main{height: 40px; width: 50%;}
                .timeline-date{padding: 7px 10px; line-height: 20px; font-size: 14px; .border-radius(3px); position: absolute; right: -50px; top: 0px;
                               font-weight: 600; color: @theme-color; background: #F5F5F5; text-align: center; border: 3px solid #FFF; width: 100px; box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2);
                               a{color: @theme-color;}
                }
                .timeline-item-content{float: left; background: #F5F5F5; border: 3px solid #FFF; .border-radius(5px); width: 95%; box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2);
                    &:before,&:after{left: 95%; top: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
                    &:before{border-color: rgba(255, 255, 255, 0); border-left-color: #FFF; border-width: 3px; margin-top: -3px;}
                    &:after{border-color: rgba(255, 255, 255, 0); border-left-color: #FFF; border-width: 7px; margin-top: -7px;}

                    .timeline-heading{width: 100%; float: left; padding: 10px 10px 5px; line-height: 30px;
                        img{width: 30px; height: 30px; margin-right: 5px; border: 2px solid #FFF; .border-radius(50%);}
                        a{color: @theme-color; font-weight: 600;}
                    }
                    .timeline-body{width: 100%; float: left; padding: 10px;
                        &.comments{padding: 0px;}
                    }
                    .timeline-footer{width: 100%; float: left; padding: 5px 10px; line-height: 20px; background: #FFF;
                        a{color: @theme-color; font-size: 12px; margin-right: 10px; text-decoration: none;
                            &:hover{color: darken(@theme-color,5%);}
                        }
                        .pull-right{
                            > a:last-child{margin-right: 0px;}
                        }
                    }
                }

                .timeline-item-info{position: absolute; left: 105%; font-size: 12px; padding: 7px 15px; line-height: 20px; width: 110px; text-align: center;
                                    background: #F5F5F5; border: 3px solid #FFF; .border-radius(5px); box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2); font-weight: 600;
                    //&:before{content: " "; position: absolute; right: 100%; width: 50px; height: 4px; background: #FFF; top: 14px;}
                }

                .timeline-item-icon{position: absolute; right: -20px; width: 40px; height: 40px; .border-radius(50%); font-size: 20px; box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2);
                                    line-height: 34px; text-align: center; border: 3px solid #FFF; background: #F5F5F5; color: #BBB;}

                &:last-child{margin-bottom: 0px;}

                &.timeline-item-right{float: right;
                    .timeline-item-info{left: auto; right: 105%;
                        &:before{right: auto; left: 100%;}
                    }
                    .timeline-item-content{float: right;
                        &:before,&:after{left: auto; right: 95%;border-right-color: #FFF; border-left-color: transparent;}
                    }
                    .timeline-item-icon{right: auto; left: -20px;}
                }
            }

            &.timeline-right{
                &:before{left: 160px;}
                .timeline-item{width: 100%; padding-left: 210px;
                    &.timeline-main{width: 160px; padding-left: 0px;}
                    .timeline-item-content{width: 100%;
                        &:before,&:after{right: auto; left: 196px;}
                        &:before{border-width: 0px;}

                    }
                    .timeline-item-info{left: 0px; right: auto;}
                    .timeline-item-icon{left: 140px;}
                }
            }
        }
        /* END TIMELINE */

        /* COMMENTS */
        .comments{float: left; width: 100%; padding: 0px; margin: 0px; background: @bg-comments;
            .comment-item{float: left; width: 100%; padding: 10px 10px 8px; line-height: 15px; border-bottom: 1px solid darken(@bg-comments,4%);
                img{width: 30px; height: 30px; float: left; margin: 0px 10px 20px 0px; border: 3px solid #FFF; .border-radius(50%); float: left;}
                p{margin-bottom: 0px; line-height: 13px; margin-bottom: 5px; font-size: 11px;
                    &.comment-head{font-size: 12px;
                        a{font-size: 12px; font-weight: 600; color: #333;}
                    }
                }
                small{line-height: 10px;}
                &:first-child{border-top: 1px solid darken(@bg-comments,4%);}
            }
            .comment-write{float: left; width: 100%; padding: 5px;
                .form-control{border-color: darken(@bg-comments,6%);}
            }
        }
        /* END COMMENTS */

        /* TASKS */
        .panel-body.tasks{padding: 10px;}
        .tasks{float: left; width: 100%;
            .task-item{width: 100%; float: left; padding: 0px; background: #FFF; border-left: 3px solid #FFF; margin-bottom: 10px; .shadow(1px 1px 1px rgba(0,0,0,0.2));
                &:hover{background: #F9F9F9; cursor: pointer;}
                &.task-complete{background: #FFF2C5;}
                &.task-primary{border-left-color: @base-primary;}
                &.task-success{border-left-color: @base-success;}
                &.task-info{border-left-color: @base-info;}
                &.task-warning{border-left-color: @base-warning;}
                &.task-danger{border-left-color: @base-danger;}

                .task-text{margin-bottom: 10px; float: left; width: 100%; font-size: 12px; font-weight: 400; padding: 10px;}
                .task-footer{float: left; width: 100%; font-size: 12px; color: #AAA; line-height: 20px; padding: 10px; background: #F5F5F5;
                    a{color: #AAA; display: block; float: left; margin-left: 10px; font-size: 14px;
                      &:hover{color: @base-color;}
                    }
                }
            }
            .task-drop{float: left; width: 100%; padding: 30px 10px; border: 2px dashed #D5D5D5; .border-radius(5px); font-size: 16px; text-align: center; line-height: 20px;
                &:hover{.opacity(0.5,50); cursor: pointer;}
            }
        }
        /* END TASKS */


        /* my progress bar */
        .mpb{position: fixed; top: 0px; left: 0px; width: 100%; height: 5px; background: rgba(0,0,0,0.2); z-index: 1001; .shadow(0px 1px 2px rgba(0,0,0,0.3));
            &.bottom{top: auto; bottom: 0px;}
            .mpb-progress{background: #FFF; display: block; float: left; height: 5px;
                &.mpb-primary{background: @base-primary;}
                &.mpb-warning{background: @base-warning;}
                &.mpb-success{background: @base-success;}
                &.mpb-info{background: @base-info;}
                &.mpb-danger{background: @base-danger;}
            }
        }
        /* eof my progress bar */

        /* search result */
        .search-results{float: left; width: 100%;
            .sr-item{float: left; width: 100%; margin-bottom: 5px; padding: 10px 15px; .border-radius(5px); background: #FFF; .shadow(0px 1px 1px 0px rgba(0, 0, 0, 0.2));
                .sr-item-title{font-size: 16px; font-weight: 600; color: @base-heading-color; display: block;}
                .sr-item-link{font-size: 12px; font-weight: 400; color: @base-success; line-height: 20px;}
                p{font-size: 13px; color: @base-color; margin: 5px 0px;
                    &.sr-item-links{font-size: 11px;}
                }
                &:last-child{margin-bottom: 20px;}
            }
        }
        /* eof search restult */

        /* Posts */
        .posts{
            .post-item{float: left; width: 100%; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #F5F5F5;
                .post-title{font-size: 25px; font-weight: 400; color: @base-heading-color; float: left; width: 100%; line-height: 30px;
                    a{font-size: 25px; color: @base-heading-color;}
                }
                .post-date{font-size: 11px; color: lighten(@base-color,20%); line-height: 20px; margin: 5px 0px 0px; float: left; width: 100%;
                    a{color: lighten(@base-color,20%);}
                    .fa{font-size: 12px; margin-right: 5px;}
                }
                .post-video{position: relative; padding-bottom: 56.25%;padding-top: 25px; height: 0; margin-bottom: 6px;
                    iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
                }
                .post-text{font-size: 13px; float: left; width: 100%; margin: 10px 0px;}
                .post-row{float: left; width: 100%; font-size: 11px;
                    .post-info{line-height: 20px; padding: 5px 10px; border: 1px solid #F5F5F5; font-size: 11px; color: lighten(@base-color,20%); float: left;}
                }
                &:last-child{margin-bottom: 0px; padding-bottom: 10px; border-bottom: 0px;}
            }
        }
        .post-image{width: 400px; float: left;}
        .links{float: left; width: 100%; padding: 5px 10px;
            a{font-size: 16px; font-weight: 400; color: @base-color; display: block; float: left; width: 100%; line-height: 30px;
                .label{float: right; padding: 5px 10px; margin-top: 3px;}
            }
            &.small{
                a{font-size: 12px; line-height: 20px; margin-bottom: 10px;}
            }
        }
        /* eof posts */

        /* faq */
        .panel-body.faq{padding: 0px;}
        .faq{width: 100%; float: left;
             .faq-item{width: 100%; float: left; padding: 10px 15px; border-bottom: 1px solid #F5F5F5;
                .faq-title{font-size: 16px; font-weight: 400; color: @base-heading-color; line-height: 30px; float: left; width: 100%; cursor: pointer; position: relative; padding-left: 20px;
                    .fa{color: @base-color; width: 30px; height: 30px; border: 1px solid @base-color; .border-radius(50%); margin-right: 15px; line-height: 31px; text-align: center; position: absolute; left: 0px; top: 0px;}
                }
                .faq-text{font-size: 13px; color: @base-color; line-height: 20px; float: left; width: 100%; padding: 0px 20px; max-height: 0px; height: 0px; .box-transition-all(200ms); overflow: hidden;
                    h5{font-weight: 600; font-size: 14px;}
                }
                &.active{padding-bottom: 0px; border-bottom: 1px solid #FFF;
                    .faq-title .fa{line-height: 28px;}
                    .faq-text{max-height: 500px; height: auto; background: #F5F5F5; .border-radius(5px); padding: 15px 20px; margin-top: 10px;}
                }
                &:first-child{.border-radius(5px 5px 0px 0px); border-top: 1px solid #F5F5F5;}
                &:last-child{.border-radius(0px 0px 5px 5px); padding-bottom: 15px;}
             }
             .faq-highlight{background: @base-warning; color: #FFF; padding: 0px 5px; .border-radius(3px); text-decoration: underline;}
        }
        /* eof faq */

        /* message box */
        .message-box{display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;
            &.open{display: block;}
            .mb-container{position: absolute; left: 0px; top: 35%; background: rgba(0,0,0,0.9); padding: 20px; width: 100%;
                .mb-middle{width: 50%; left: 25%; position: relative; color: #FFF;
                    .mb-title{width: 100%; float: left; padding: 10px 0px 0px; font-size: 31px; font-weight: 400; line-height: 36px;
                        .fa,.glyphicon{font-size: 38px; float: left; margin-right: 10px;}
                    }
                    .mb-content{width: 100%; float: left; padding: 10px 0px 0px;
                        p{margin-bottom: 0px;}
                    }
                    .mb-footer{width: 100%; float: left; padding: 10px 0px;}
                }
            }
            &.message-box-warning{
                .mb-container{background: rgba(254,162,35,0.9);}
            }
            &.message-box-danger{
                .mb-container{background: rgba(182,70,69,0.9);}
            }
            &.message-box-info{
                .mb-container{background: rgba(63,186,228,0.9);}
            }
            &.message-box-success{
                .mb-container{background: rgba(149,183,93,0.9);}
            }
        }
        /* end message box */

        /* Gallery */
        .gallery{float: left; width: 100%;
            .gallery-item{float: left; width: 25%; padding: 10px 5px 10px 5px; text-decoration: none;
                .image{width: 100%; position: relative; .shadow(0px 2px 1px 0px rgba(0,0,0,0.1)); cursor: pointer; position: relative; overflow: hidden;
                    a{display: block;}
                    &:after,&:before{position: absolute;content: '';top: 0;left: 0;right: 0;bottom: 0; border: 3px solid #fff;.border-radius(3px);z-index: 1;}
                    &:before{z-index: 2; background: rgba(0,0,0,0.0); .box-transition-all(200ms);}
                    &:hover:before{background: rgba(0,0,0,.3);}
                    img{width: 100%; .border-radius(5px);}

                    .gallery-item-controls{position: absolute; right: -60px; top: 3px; display: block; list-style: none; padding: 0px; z-index: 2; .box-transition-all(200ms);
                        li{float: left; list-style: none; background: #FFF; width: 30px; height: 30px; text-align: center; line-height: 26px;
                           .check{margin: 4px 0px;}
                           .icheckbox_minimal-grey{margin-right: 0px;}
                           a,span{font-size: 17px; color: #BBB;
                                &:hover{color: @base-color;}
                           }
                           &:first-child{.border-radius(0px 0px 0px 3px);}
                           &:hover{background: #F5F5F5;}
                        }
                    }

                }
                .meta{color: @base-color; margin-top: 5px; line-height: 16px; padding: 0px 5px;
                      strong{display: block; font-weight: 600; font-size: 13px;}
                      span{display: block; color: lighten(@base-color,20%);}
                }

                &:hover{
                    .image{
                        .gallery-item-controls{right: 3px;}
                    }
                }
                &.active{
                    .image{.shadow(0px 0px 6px 0px rgba(51,65,78,0.8));
                        .gallery-item-controls{right: 3px;}
                    }

                }
            }
        }
        /* end Gallery */

        /* Dropzone */
        .dropzone{
            &.dropzone-mini{min-height: 150px;
                .dz-message{background: none; position: relative; margin: 0px; padding: 0px; left: auto; top: auto; width: 100%; float: left; height: 120px;
                    &:after{content: "\f0ee";position: absolute; width: 80px; height: 80px; text-align: center;font-family: FontAwesome; font-size: 88px; top: 26px; left: 50%; margin: 0px 0px 0px -40px; line-height: 80px; .opacity(0.5,50); .box-transition-all(200ms);}
                    &:hover:after{.opacity(1,100);}
                }
            }
            &.dz-started{
                .dz-message{display: none;}
            }
        }
        /* end Dropzone */

        /* errors */
        .error-container{width: 500px; margin: 50px auto 0px;
            .error-code{float: left; width: 100%; font-size: 135px; line-height: 130px; text-align: center; color: #333; font-weight: 300;}
            .error-text{float: left; width: 100%; margin-top: 10px; font-size: 26px; line-height: 24px; text-transform: uppercase; color: #666; text-align: center; font-weight: 400;}
            .error-subtext{float: left; width: 100%; margin: 30px 0px 10px; font-size: 13px; line-height: 20px; color: #AAA; text-align: center; font-weight: 400;}
            .error-actions{float: left; width: 100%; margin-top: 10px;}
        }
        /* end errors */


        /* SETTINGS */
        .theme-settings{position: fixed; right: -200px; top: 200px; .box-transition-all(400ms); z-index: 3;
            .ts-button{position: absolute; left: -36px; height: 36px; width: 36px; top: 10px; background: rgba(0,0,0,0.9); .border-radius(5px 0px 0px 5px); font-size: 19px; color: #FFF; line-height: 34px; text-align: center; cursor: pointer;}
            .ts-body{width: 200px; background: rgba(0,0,0,0.9); .border-radius(5px 0px 0px 5px); padding: 10px 10px 10px; color: #FFF;
                .ts-title{font-size: 15px; font-weight: 600; line-height: 20px; margin-bottom: 5px; margin-top: 10px;
                    &:first-child{margin-top: 0px;}
                }
                .ts-row{margin-bottom: 5px;}
            }
            &.active{right: 0px;}

            .ts-themes{width: 100%; margin-top: 10px;
                a{width: 30px; height: 30px; margin-right: 6px; margin-bottom: 5px; display: inline-block;
                    img{width: 30px; height: 30px;}
                    &.active{
                        img{border: 2px solid #FFF;}
                    }
                }
            }
            #ts-wallpapers{display: none;}
        }
        /* END SETTIGS */

        /* FLAGS */
        .xn-icon-button > a > .flag{display: block; margin: 0px auto;}
        .flag{display: inline-block; width: 18px; height: 18px; background-size: 18px 18px; background-position: left top; vertical-align: inherit; margin-right: 5px;
            &.flag-gb{background-image: url(../img/flags/gb.png);}
            &.flag-de{background-image: url(../img/flags/de.png);}
            &.flag-cn{background-image: url(../img/flags/cn.png);}
        }
        /* END FLAGS */

        /* PAGE LOADING FRAME */

        .page-loading-frame{width: 100%; height: 100%; position: fixed; z-index: 9999; background: url(../img/bg.png) left top repeat @base-background; .box-transition-all(1000ms);
            .page-loading-loader{width: 64px; height: 64px; position: absolute; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; .box-transition-all(100ms);}
            &.v2{background: #111; background: url(../img/bg.png) left top repeat rgba(0,0,0,0.8);
                .page-loading-loader{width: 64px;height: 64px; position: absolute; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px;-webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear;
                    .dot1, .dot2{width: 60%;height: 60%;display: inline-block;position: absolute;top: 0;background-color: #F5F5F5;border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out;}
                    .dot2{top: auto;bottom: 0px;-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
                }
            }
            &.removed{.opacity(0,0);
                .page-loading-loader{.opacity(0,0);}
            }
        }
        /* PAGE LOADING FRAME */

        /* INVOICE */
        .invoice{float: left; width: 100%;
            h4{font-weight: 700; font-size: 14px;}
            .invoice-address{float: left; width: 100%; margin-bottom: 10px;
                h5{font-weight: 700; font-size: 14px; line-height: 20px; margin-bottom: 20px;}
                h6{font-weight: 700; font-size: 12px; line-height: 20px; margin-bottom: 5px; padding-left: 10px;}
                p{font-size: 12px; line-height: 20px; margin-bottom: 0px; padding-left: 10px;}
            }
            .table td{border: 0px;}
            .table tr.total td{background: @base-background; color: #FFF; font-size: 13px; font-weight: 600;}
            .table-invoice{margin: 0px -15px 50px;
                .table{border: 0px;
                    th{color: @base-heading-color; padding: 15px 25px; font-size: 14px; font-weight: 700; border: 0px;}
                    td{border: 0px; padding: 15px 30px; background: #F8FAFC;
                       strong{color: @base-heading-color;}
                    }
                    tr:nth-child(2n+1) td{background: #FFF;}
                }
            }
            .paymant-table{float: left; width: 100%; margin-bottom: 20px;
                a{display: block; float: left; width: 100%; padding: 8px 10px; font-size: 14px; font-weight: 700; line-height: 23px; color: @base-heading-color;
                    img{margin-right: 5px; margin-top: -3px;}
                    p{line-height: 20px; font-size: 11px; color: lighten(@base-color,10%); font-weight: 500; margin-bottom: 0px;}
                    &:hover{text-decoration: none; background: #F9FAFC;}
                    &.active{background: #F9FAFC;}
                }
            }
        }
        /* END INVOICE */

        /* Autocomplete */
        .ui-autocomplete{background: #FFF; border: 1px solid #D5D5D5; .border-radius(5px);
            .ui-menu-item{background: #FFF; border-bottom: 1px solid #D5D5D5; line-height: 20px; padding: 8px 15px;
                &:first-child{.border-radius(5px 5px 0px 0px);}
                &:last-child{border-bottom: 0px;.border-radius(0px 0px 5px 5px);}
                &:hover{background: #F5F5F5;}
                &.ui-state-focus,
                &.ui-state-active{margin: 0px;}
            }

            &:after, &:before{bottom: 100%;left: 20px;border: solid transparent;content: " ";
                              height: 0;width: 0;position: absolute;pointer-events: none;}
            &:after{border-color: rgba(255, 255, 255, 0);border-bottom-color: #FFF;border-width: 5px;margin-left: -5px;}
            &:before{border-color: rgba(213, 213, 213, 0);border-bottom-color: #D5D5D5;border-width: 6px;margin-left: -6px;}
        }
        /* End Autocomplete */

        /* SIDEBAR */
        .sidebar{position: absolute; z-index: 1; right: -@sidebar_width; top: 0px; width: @sidebar_width; height: 100%; .box-transition-all(200ms);
            .sidebar-wrapper{width: 100%;height: 100%; background: url("../img/bg.png") left top repeat @sidebar_background; color: @sidebar_color;
                .sidebar-tabs{float: left; width: 100%; margin-bottom: 15px;
                    > a{display: block; float: left; width: 50%; line-height: 30px; font-size: 13px; color: @sidebar_tabs_color; padding: 10px; background: @sidebar_title_background; text-align: center; text-decoration: none;
                        .fa,.glyphicon{line-height: 30px; margin-right: 5px; font-size: 14px;}
                        &:hover{background: lighten(@sidebar_title_background,2%);}
                        &.active{background: transparent;}
                    }
                }
                .sidebar-tab-content{float: left; width: 100%; display: none;
                    &.active{display: block;}
                }

                .sidebar-title{float: left; width: 100%; line-height: 30px; padding: 10px; font-size: 12px; font-weight: 400; color: @sidebar_title_color; margin-bottom: 10px; background: @sidebar_title_background;
                    strong{color: @sidebar_color;}
                }
                .sidebar-block{float: left; width: 100%; padding: 0px 10px; margin-bottom: 15px;}

                .list-group{float: left; width: 100%; margin-bottom: 10px;
                    .list-group-item{background: transparent; border: 0px; color: @sidebar_color;.box-transition-all(200ms);
                        &:hover{background: rgba(0,0,0,0.1);}
                        a{color: @sidebar_title_color;}
                        p{margin-bottom: 5px; margin-top: 5px;}
                    }
                }
            }
        }
        body.sidebar-opened{
            .page-container{margin-left: -@sidebar_width;}
            .sidebar{right: 0px;}
        }
        /* END SIDEBAR */

        /* MAILBOX */
        .panel .panel-body.mail{padding: 0px;}
        .mail{padding: 0px; float: left; width: 100%;
            .mail-item{float: left; padding: 10px 15px 10px 13px; width: 100%; line-height: 20px; border-left: 2px solid #D5D5D5;
                &.mail-primary{border-left-color: @base-primary;}
                &.mail-info{border-left-color: @base-info;}
                &.mail-success{border-left-color: @base-success;}
                &.mail-warning{border-left-color: @base-warning;}
                &.mail-danger{border-left-color: @base-danger;}

                .mail-checkbox{float: left; width: 20px; height: 20px; margin-right: 10px;}
                .mail-star{font-size: 16px; width: 20px; float: left; text-align: center; margin-right: 10px; cursor: pointer;
                    &.starred{color: @base-warning;
                        .fa-star-o:before{content: "\f005";}
                    }
                }
                .mail-user{font-size: 12px; font-weight: 600; float: left; width: 150px; color: @base-heading-color;}
                .mail-text{font-size: 12px; float: left; color: @base-color;}
                .mail-date{float: right; font-size: 12px;}
                .mail-attachments{float: right; font-size: 12px; color: #AAA; margin-right: 10px;
                    &.fa{font-size: 16px;}
                }
                &:nth-child(2n){background: #F9F9F9;}
                &.mail-unread{font-weight: 700;
                    .mail-user{font-weight: 700;}
                }
            }
        }
        .mail-checkall{margin-right: 5px;}
        /* END MAILBOX */

        /* PAGE TABBED */
        .page-tabs{float: left; width: 100%; margin-bottom: 20px; background: #FFF; border-bottom: 1px solid #D5D5D5; height: 50px;
            a{float: left; display: block; line-height: 49px; padding: 0px 15px; color: @base-color; font-size: 12px; font-weight: 600;.box-transition-all(200ms);
              text-decoration: none; border-bottom: 1px solid transparent; border-top: 0px; min-width: 120px; text-align: center;
                &:hover{color: @base-heading-color; border-bottom-color: @base-background; background: #F9F9F9;}
                &.active{border-bottom-color: @base-background; background: #F5F5F5; color: @base-heading-color;}
            }
        }

        .page-tabs-item{display: none;
            &.active{display: block;}
        }
        /* END PAGE TABBED */

        /* PAGE CUSTOM HEADER */
        .page-head{float: left; width: 100%; background: #FFF; padding: 10px; border-bottom: 1px solid #E5E5E5;
            .page-head-text{float: left;
                h1{font-size: 21px; line-height: 30px; font-weight: 400; padding: 0px; margin: 0px;}
                .page-head-subtitle{font-size: 12px; font-weight: 400; line-height: 20px; margin: 0px; color: #AAA;}
            }
            .page-head-controls{float: right; padding: 10px 0px;}
        }
        /* END PAGE CUSTOM HEADER */

        /* PAGE CONTENT ADAPTIVE */
        .page-content-wrap{
            &.page-content-adaptive{float: left; width: 100%; background: #FFF; padding: 10px;
                .panel{border: 0px; .shadow(none); padding: 0px 10px;
                    .panel-heading{border: 0px; background: #FFF; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;
                        .panel-title{margin-left: 0px; font-weight: 600;}
                    }
                    .panel-body{border: 0px; padding-left: 0px; padding-right: 0px;}
                    .panel-footer{border: 0px; background: #FFF; padding-left: 0px; padding-right: 0px;}
                }
            }
        }
        /* END PAGE CONTENT ADAPTIVE */

        /* SLIDING MENU */
        .sliding-menu{overflow: hidden; position: relative; background: #FFF; float: left; width: 100%; border: 1px solid #D5D5D5; border-radius: 5px; margin-bottom: 5px;}
        .sliding-menu ul{float: left; margin: 0; padding: 0;}
        .sliding-menu li{list-style: none; margin: 0; border-bottom: 1px solid #D5D5D5;}
        .sliding-menu li:last-child{border-bottom: 0px;}
        .sliding-menu a{display: block; padding: 5px 15px 5px 15px; line-height: 30px; color: #333; text-decoration: none;}
        .sliding-menu a .fa, .sliding-menu a .glyphicon{font-size: 18px; line-height: 30px; margin-right: 10px;}
        .sliding-menu a:hover { background: #F5F5F5;}
        .sliding-menu a.nav:before { content: '\3009'; float: right; margin-left: 0px;}
        .sliding-menu a.back {background: #F0F0F0;border-bottom: 1px solid #D5D5D5;}
        .sliding-menu a.back:before { content: '\3008'; float: left; margin-right: 15px; }
        /* END SLIDING MENU */

/* TEMPLATE PLUGINS */

        /* Nestable list */
        .dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 12px; line-height: 20px; }

        .dd-list{ display: block; position: relative; margin: 0; padding: 0; list-style: none; }
        .dd-list .dd-list { padding-left: 30px; }
        .dd-collapsed .dd-list { display: none; }

        .dd-item,.dd-empty,.dd-placeholder{ display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 12px; line-height: 20px; }

        .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; text-decoration: none; font-weight: 400; border: 1px solid #D5D5D5;
            background: #f5f5f5;.border-radius(5px);box-sizing: border-box; -moz-box-sizing: border-box;
        }
        .dd-handle:hover { color: @base-heading-color; background: #fff; }

        .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
        .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
        .dd-item > button[data-action="collapse"]:before { content: '-'; }

        .dd-placeholder,
        .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
        .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;}

        .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
        .dd-dragel > .dd-item .dd-handle { margin-top: 0; }
        .dd-dragel .dd-handle {
            -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
                    box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
        }

        .dd3-content {display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; text-decoration: none; border: 1px solid #D5D5D5;
                      background: #f5f5f5;box-sizing: border-box; -moz-box-sizing: border-box; .border-radius(5px);}
        .dd3-content:hover { color: @base-heading-color; background: #fff; }

        .dd-dragel > .dd3-item > .dd3-content { margin: 0; }

        .dd3-item > button { margin-left: 30px; }

        .dd3-handle {position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
                     border: 1px solid #D5D5D5;background: #F0F0F0;.border-radius(5px 0px 0px 5px);}
        .dd3-handle:before{content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #333; font-size: 16px; font-weight: normal;}
        .dd3-handle:hover{background: #E5E5E5;}
        /* end nestable list */

        /* To top */
        .to-top{width: 40px; height: 40px; background: @body-background; line-height: 35px; text-align: center; border: 1px solid #FFF; .border-radius(5px); font-size: 23px; color: #CCC; .box-transition-all(200ms);
            &:hover{border-color: @base-background; color: #333;}
        }
        /* end To top */

        /* iCheck plugin Minimal skin, black
        ----------------------------------- */
        .check{font-weight: 400; line-height: 20px; margin: 5px 0px; cursor: pointer;
               .icheckbox_minimal-grey,.iradio_minimal-grey {margin-right: 5px; margin-top: -2px;}
               &.disabled{color: #AAA;}
        }
        .icheckbox_minimal-grey,
        .iradio_minimal-grey  {
            display: inline-block;
            *display: inline;
            vertical-align: middle;
            margin: 0;
            padding: 0;
            width: 18px;
            height: 18px;
            background: url("../img/icheck/grey.png") no-repeat;
            border: none;
            cursor: pointer;
        }

        .icheckbox_minimal-grey{
            background-position: 0 0;
            &.hover{background-position: -20px 0;}
            &.checked{background-position: -40px 0;}
            &.disabled {background-position: -60px 0;cursor: default;}
            &.checked.disabled{background-position: -80px 0;}
        }

        .iradio_minimal-grey {background-position: -100px 0;
            &.hover {background-position: -120px 0;}
            &.checked {background-position: -140px 0;}
            &.disabled{background-position: -160px 0;cursor: default;}
            &.checked.disabled {background-position: -180px 0;}
        }

        /* END icheckbox */

        /* SPINNER */
        .ui-spinner{width: 100%;
            .ui-spinner-input{margin: 0px;}

        }
        .ui-spinner-up,.ui-spinner-down{display: block; width: 30px; height: 15px; background: @base-background; color: #FFF;}
        .ui-spinner-up:hover,.ui-spinner-down:hover{background: @base-background-active; cursor: pointer;}
        .ui-spinner-up{border-radius: 0px 5px 0px 0px;}
            .ui-spinner-up .ui-icon{width: 30px; height: 15px; color: #FFF;
                &:after{content: "\f106"; font-family: FontAwesome; font-size: 12px; color: #FFF; line-height: 15px; position: absolute; left: 0px; top: 0px; width: 30px; height: 15px; text-indent: initial;}
            }
        .ui-spinner-down{border-radius: 0px 0px 5px 0px;}
            .ui-spinner-down .ui-icon{width: 30px; height: 15px; color: #FFF;
                &:after{content: "\f107"; font-family: FontAwesome; font-size: 12px; color: #FFF; line-height: 15px; position: absolute; left: 0px; top: 0px; width: 30px; height: 15px; text-indent: initial;}
            }
        /* END SPINNER */

        //////////////
        /* BOOTSTRAP DATEPICKER */

            div.datepicker{padding: 10px; .shadow(0px 2px 1px 0px rgba(0, 0, 0, 0.1)); min-width: 250px;
                >div{display: none;}
                table{width: 100%;margin: 0;}
                td,th{text-align: center;width: 20px;height: 20px;}
                td{
                    &.day:hover {background: #F5F5F5;cursor: pointer;}
                                &.day.disabled{color: #CCC;}
                                &.old,&.new{color: #999;}
                                &.active,&.active:hover {background: @base-primary; color: #fff; .border-radius(3px);}
                                span {display: block;width: 31%;height: 54px;line-height: 54px;float: left;margin: 2px;cursor: pointer;
                                      &:hover{background: #F5F5F5;}
                                      &.active{background: @base-primary;color: #fff; .border-radius(3px);}
                                      &.old{color: #999;}
                                     }
                }

                th{&.switch {width: 145px;}
                   &.next,&.prev{font-size: 12px;}}
                   thead tr:first-child th {cursor: pointer; padding: 8px 0px;
                                            &:hover{background: #F5F5F5; .border-radius(3px);}
                                            }
            }
            .input-append,.input-prepend {&.date {
                                            .add-on i {display: block;cursor: pointer;width: 16px;height: 16px;}
                                         }
            }
            .datepicker.dropdown-menu:after,.datepicker.dropdown-menu:before{left: 16px;}
            .datepicker.datepicker-orient-left.dropdown-menu:after,.datepicker.datepicker-orient-left.dropdown-menu:before{left: auto; right: 16px;}
            /* EOF BOOTSTRAP DATEPICKER */


            /* BOOTSTRAP TIMEPICKER */
            .bootstrap-timepicker {
                position: relative;

                &.pull-right {
                    .bootstrap-timepicker-widget {
                        &.dropdown-menu {
                            left: auto;
                            right: 0;

                            &:before {
                                left: auto;
                                right: 12px;
                            }
                            &:after {
                                left: auto;
                                right: 13px;
                            }
                        }
                    }
                }

                .input-group-addon {
                    cursor: pointer;
                    i {
                       display: inline-block;
                       width: 16px;
                       height: 16px;
                    }
                }
            }
            .bootstrap-timepicker-widget {
                &.dropdown-menu {
                    padding: 4px;
                    &.open {
                        display: inline-block;
                    }
                    &:before {
                        border-bottom: 7px solid rgba(0, 0, 0, 0.2);
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        content: "";
                        display: inline-block;
                        position: absolute;
                    }
                    &:after {
                        border-bottom: 6px solid #FFFFFF;
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        content: "";
                        display: inline-block;
                        position: absolute;
                    }
                }
                &.timepicker-orient-left {
                    &:before {
                       left: 6px;
                    }
                    &:after {
                       left: 7px;
                    }
                }
                &.timepicker-orient-right {
                    &:before {
                       right: 6px;
                    }
                    &:after {
                       right: 7px;
                    }
                }
                &.timepicker-orient-top {
                    &:before {
                       top: -7px;
                    }
                    &:after {
                        top: -6px;
                    }
                }
                &.timepicker-orient-bottom {
                    &:before {
                        bottom: -7px;
                        border-bottom: 0;
                        border-top: 7px solid #999;
                    }
                    &:after {
                        bottom: -6px;
                        border-bottom: 0;
                        border-top: 6px solid #ffffff;
                    }
                }
                a.btn, input {
                    border-radius: 4px;
                }

                table {
                    width: 100%;
                    margin: 0;

                    td {
                        text-align: center;
                        height: 30px;
                        margin: 0;
                        padding: 2px;

                        &:not(.separator) {
                            min-width: 30px;
                        }

                        span {
                            width: 100%;
                        }
                        a {
                            border: 1px transparent solid;
                            width: 100%;
                            display: inline-block;
                            margin: 0;
                            padding: 8px 0;
                            outline: 0;
                            color: #333;

                            &:hover {
                                text-decoration: none;
                                background-color: #eee;
                                -webkit-border-radius: 4px;
                                -moz-border-radius: 4px;
                                border-radius: 4px;
                                border-color: #ddd;
                            }

                            i {
                                margin-top: 2px;
                                font-size: 18px;
                            }
                        }
                        input {
                            width: 25px;
                            margin: 0;
                            text-align: center;
                        }
                    }
                }
            }

            .bootstrap-timepicker-widget .modal-content {
                padding: 4px;
            }

            @media (min-width: 767px) {
                .bootstrap-timepicker-widget.modal {
                    width: 200px;
                    margin-left: -100px;
                }
            }

            @media (max-width: 767px) {
                .bootstrap-timepicker {
                    width: 100%;

                    .dropdown-menu {
                        width: 100%;
                    }
                }
            }

            /* EOF BOOTSTRAP TIMEPICKER */


            /* BOOTSTRAP COLORPICKER */
            .colorpicker-saturation {width: 100px;height: 100px;background-image: url(../img/colorpicker/saturation.png);cursor: crosshair;float: left;
                i {display: block;height: 5px;width: 5px;border: 1px solid #000;.border-radius(0px);position: absolute;top: 0;left: 0;margin: -4px 0 0 -4px;
                    b{display: block;height: 5px;width: 5px;border: 1px solid #fff;}
                }
            }
            .colorpicker-hue,.colorpicker-alpha {width: 15px;height: 100px;float: left;cursor: row-resize;margin-left: 4px;margin-bottom: 4px;
                i {display: block;height: 1px;background: #000;border-top: 1px solid #fff;position: absolute;top: 0;left: 0;width: 100%;margin-top: -1px;}
            }
            .colorpicker-hue{background-image: url(../img/colorpicker/hue.png);}
            .colorpicker-alpha{background-image: url(../img/colorpicker/alpha.png);display:none;}
            .colorpicker {top: 0;left: 0;padding: 4px;min-width: 120px;margin-top: 1px;.border-radius(3px);
                &.dropdown-menu{margin-top: 8px;}
                div{position: relative;}
                &.alpha{min-width: 140px;
                    .colorpicker-alpha {display: block;}
                }
            }
            .colorpicker-color {height: 10px;margin-top: 5px;clear: both;background-image: url(../img/colorpicker/alpha.png);background-position: 0 100%;
                div {height: 10px;}
            }

            .input-group{
                &.color {
                    .input-group-addon i {display: inline-block;cursor: pointer;width: 16px;height: 16px; vertical-align: text-bottom;}
                }
            }
            /* EOF BOOTSTRAP COLORPICKER */


            /* BOOTSTRAP SELECT */
            .bootstrap-select {width: 220px \0;
                & > .btn {width: 100%;padding-right: 25px;}
                .error & .btn {border: 1px solid @base-danger;}
                &.fit-width {width: auto !important;}
            }
            .bootstrap-select.btn-group:not(.input-group-btn),
            .bootstrap-select.btn-group[class*="span"] {float: none;display: inline-block;margin-bottom: 0px;margin-left: 0;}
            .form-search .bootstrap-select.btn-group,.form-inline .bootstrap-select.btn-group,.form-horizontal .bootstrap-select.btn-group {margin-bottom: 0;}
            .bootstrap-select.form-control {margin-bottom: 0;padding: 0;border: none;}
                .bootstrap-select.btn-group.pull-right,.bootstrap-select.btn-group[class*="span"].pull-right,
                .row-fluid .bootstrap-select.btn-group[class*="span"].pull-right {float: right;}

            .bootstrap-select.btn-group {
                .input-append & {margin-left: -1px;}
                .input-prepend & {margin-right: -1px;}
            }
            .bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {width: 220px;}
            .bootstrap-select.form-control:not([class*="span"]) {width: 100%;}
            .bootstrap-select.show-menu-arrow.open > .btn {z-index: 2051;}
            .bootstrap-select.btn-group .btn .filter-option {display: inline-block;overflow: hidden;width: 100%;text-align: left;}
            .bootstrap-select.btn-group .btn .caret {position: absolute;top: 50%;right: 12px;margin-top: -2px;vertical-align: middle;}
            .bootstrap-select.btn-group > .disabled,.bootstrap-select.btn-group .dropdown-menu li.disabled > a {cursor: not-allowed;}
            .bootstrap-select.btn-group > .disabled:focus {outline: none !important;}
            .bootstrap-select.btn-group[class*="span"] .btn {width: 100%;}
            .bootstrap-select.btn-group .dropdown-menu {min-width: 100%;z-index: 2000;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
            .bootstrap-select.btn-group .dropdown-menu.inner {position: static;border: 0;padding: 0;margin: 0;.border-radius(0px); .shadow(none);}
            .bootstrap-select.btn-group .dropdown-menu dt {display: block;padding: 3px 20px;cursor: default;}
            .bootstrap-select.btn-group .div-contain {overflow: hidden;}
            .bootstrap-select.btn-group .dropdown-menu li {position: relative;}
                .bootstrap-select.btn-group .dropdown-menu li > a.opt {position: relative;padding-left: 35px;}
                .bootstrap-select.btn-group .dropdown-menu li > a {cursor: pointer;}
                    .bootstrap-select.btn-group .dropdown-menu li > dt small {font-weight: normal;}

                    .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark {position: absolute;display: inline-block;right: 15px;margin-top: 11px; font-size: 11px;}
                    .bootstrap-select.btn-group .dropdown-menu li a i.check-mark {display: none;}

                    .bootstrap-select.btn-group .dropdown-menu li a span.text {display: inline-block;}

                    .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {margin-right: 34px;}

                    .bootstrap-select.btn-group .dropdown-menu li small{padding-left: 0.5em;}

            .bootstrap-select.btn-group .dropdown-menu {
              & li:not(.disabled) > a:hover small,
              & li:not(.disabled) > a:focus small,
              & li.active:not(.disabled) > a small {color: rgb(100, 177, 216);color: rgba(100, 177, 216, 0.4);}
              & li > dt small {font-weight: normal;}
            }

            .bootstrap-select.show-menu-arrow {
              .dropdown-toggle {
                &:before {content: '';border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom-width: 7px;border-bottom-style: solid;
                          border-bottom-color: rgb(204, 204, 204);border-bottom-color: rgba(204, 204, 204, 0.2);position: absolute;bottom: -4px;left: 9px;display: none;}

                &:after {content: '';border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid white;position: absolute;
                         bottom: -4px;left: 10px;display: none;}
              }
              &.dropup {
                .dropdown-toggle {
                  &:before {bottom: auto;top: -3px;border-bottom: 0;border-top-width: 7px;border-top-style: solid;border-top-color: rgb(204, 204, 204);border-top-color: rgba(204, 204, 204, 0.2);}
                  &:after {bottom: auto;top: -3px;border-top: 6px solid #FFFFFF;border-bottom: 0;}
                }
              }

              &.pull-right {
                .dropdown-toggle {
                  &:before {right: 12px;left: auto;}
                  &:after {right: 13px;left: auto;}
                }
              }

              &.open > .dropdown-toggle {
                &:before,
                &:after {display: block;}
              }
            }

            .bootstrap-select.btn-group .no-results {padding: 8px;background: #f5f5f5; border-top: 1px solid #E5E5E5; margin-top: 5px;}

            .bootstrap-select.btn-group .dropdown-menu .notify {position: absolute;bottom: 5px;width: 96%;margin: 0 2%;min-height: 26px;padding: 3px 5px;
              background: #f5f5f5;border: 1px solid #e3e3e3;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);pointer-events: none;opacity: 0.9;
              -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

            .bootstrap-select.btn-group.fit-width .btn .filter-option {position: static;}
            .bootstrap-select.btn-group.fit-width .btn .caret {position: static;top: auto;margin-top: -1px;}
            .control-group.error .bootstrap-select .dropdown-toggle {border-color: #b94a48;}

            .bootstrap-select-searchbox,
            .bootstrap-select .bs-actionsbox {padding: 4px 8px;}

            .bootstrap-select .bs-actionsbox {float: left;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
              & .btn-group button {width: 50%;}
            }
            .bootstrap-select-searchbox {
              & + .bs-actionsbox {padding: 0 8px 4px;}
              & input {margin-bottom: 0;}
            }
            .mobile-device {position: absolute;top: 0;left: 0;display: block !important;width: 100%;height: 100% !important;opacity: 0;}

            /* EOF BOOTSTRAP SELECT */

            /* Validation Engine */
            @popupBg: #111;
            @popupTextColor: #FFF;
            @popupFontSize: 12px;
            @popupRadius: 3px;

             .formError {z-index: 990;}
                .formError .formErrorContent {z-index: 991;}
                .formError .formErrorArrow {z-index: 996;}

                .ui-dialog .formError {z-index: 5000;}
                .ui-dialog .formError .formErrorContent {z-index: 5001;}
                .ui-dialog .formError .formErrorArrow {z-index: 5006;}

            .inputContainer{position: relative;float: left;}
            .formError{position: absolute;top: 300px;left: 300px;display: block;cursor: pointer;text-align: left;}
            .formError.inline{position: relative;top: 0;left: 0;display: inline-block;}
            .ajaxSubmit{padding: 20px;background: #55ea55;border: 1px solid #999;display: none;}
            .formError .formErrorContent {width: 100%;background: @popupBg;position:relative;color: @popupTextColor;min-width: 120px;
                                          font-size: @popupFontSize;padding: 4px 10px 4px 10px;.border-radius(@popupRadius);}
            .formError.inline .formErrorContent{}
            .greenPopup .formErrorContent{background: @base-success;}
            .blackPopup .formErrorContent{background: #000;color: #FFF;}
            .formError .formErrorArrow{width: 15px;margin: -2px 0 0 13px;position:relative;}
            body[dir='rtl'] .formError .formErrorArrow,body.rtl .formError .formErrorArrow{margin: -2px 13px 0 0;}
            .formError .formErrorArrowBottom{margin: 0px 0 0 12px;top:2px;}
            .formError .formErrorArrow div{font-size: 0px;height: 1px;background: @popupBg;margin: 0 auto;line-height: 0;font-size: 0;display: block;}
            .formError .formErrorArrowBottom div{}
            .greenPopup .formErrorArrow div{background: @base-success;}
            .blackPopup .formErrorArrow div{background: #000;color: #FFF;}
            .formError .formErrorArrow .line10{width: 13px;border: none;}
            .formError .formErrorArrow .line9{width: 11px;border: none;}
            .formError .formErrorArrow .line8{width: 11px;}
            .formError .formErrorArrow .line7{width: 9px;}
            .formError .formErrorArrow .line6{width: 7px;}
            .formError .formErrorArrow .line5{width: 5px;}
            .formError .formErrorArrow .line4{width: 3px;}
            .formError .formErrorArrow .line3{width: 1px;}
            .formError .formErrorArrow .line2{width: 0px;border: none;}
            .formError .formErrorArrow .line1{width: 0px;border: none;}

            /* EOF Validation Engine */

            /* RangeSlider */

            .ui-rangeSlider{height:22px; margin-top: 4px;}
            .ui-rangeSlider .ui-rangeSlider-innerBar{height:16px;margin:3px 6px;background:#F5F5F5; border: 1px solid #E5E5E5; .border-radius(5px);}
            .ui-rangeSlider .ui-rangeSlider-handle{width: 22px; height:22px; background: #FFF; border: 2px solid @base-primary; cursor: col-resize; .border-radius(50%);}
            .ui-rangeSlider .ui-rangeSlider-bar{margin: 1px 0px; background: #E5E5E5; height:20px; cursor:move; cursor:grab; cursor: -moz-grab; .border-radius(10px);}
            .ui-rangeSlider .ui-rangeSlider-bar.ui-draggable-dragging{cursor: -moz-grabbing;cursor:grabbing;}
            .ui-rangeSlider-arrow,.ui-rangeSlider-arrow-inner{display: none;}

            .ui-rangeSlider-container{height:22px;}
            .ui-rangeSlider-withArrows .ui-rangeSlider-container{margin:0 11px;}
            .ui-rangeSlider-noArrow .ui-rangeSlider-container{margin: 0;}

            .ui-rangeSlider-label{background: @base-primary; margin:0px; white-space: nowrap; bottom:26px; padding: 5px 8px; cursor:col-resize; color: #FFF; .border-radius(5px); font-size: 11px;}

            .ui-rangeSlider-label-inner{display:none;}

            input.ui-editRangeSlider-inputValue{width:3em;vertical-align: middle;text-align:center;}

            /* EOF RangeSlider */

            /* Smart Wizard */
            .wizard .anchor{float: left; padding: 0px; margin: 0px; list-style: none; display: block; position: relative; width: 100%;}
            .wizard .anchor:after{content: " "; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; .border-radius(1px); background: #D5D5D5; z-index: 1;}
                .wizard .anchor li{float: left; display: block;}
                .wizard .anchor li a{font-size: 14px; color: @base-color; text-decoration: none; display: block; line-height: 18px; padding: 10px 20px 15px 0px; position: relative;}
                    .wizard .anchor li a .stepNumber{display: none;}
                    .wizard .anchor li a .stepDesc{font-weight: 400;}
                        .wizard .anchor li a .stepDesc small{color: #999; font-weight: 300;}

                .wizard .anchor li a:before{content: " "; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: #D5D5D5; z-index: 2; .box-transition-all(200ms);}
                .wizard .anchor li a:after{content: " "; position: absolute; bottom: -10px; left: 0px; width: 22px; height: 22px; .border-radius(50%); background: #FFF; border: 3px solid #D5D5D5; z-index: 3; text-align: center; line-height: 17px; .box-transition-all(200ms); color: #DDD;}

                .wizard .anchor li a.done:after{border-color: @base-success; content: "\f00c"; font-family: FontAwesome; color: @base-success; font-size: 10px;}
                .wizard .anchor li a.done:before{background: @base-success;}

                .wizard .anchor li a.error:after{border-color: @base-danger; content: "\f00d"; font-family: FontAwesome; color: @base-danger; font-size: 10px;}
                .wizard .anchor li a.error:before{background: @base-danger;}


                .wizard .anchor li a.selected:after{border-color: @base-primary; content: "\f0da"; font-family: FontAwesome; color: @base-primary; font-size: 13px; padding-left: 2px;}
                .wizard .anchor li a.selected:before{background: @base-primary;}

            .wizard .stepContainer,.wizard .actionBar{float: left; width: 100%; margin-top: 30px;}
            .wizard .actionBar{margin-top: 20px;}
            .wizard .actionBar .btn.pull-right{margin-left: 5px;}
            .wizard .actionBar .btn-primary{display: none;}
            .wizard .actionBar .loader{display: none;}

            .wizard .anchor.steps_1 li{width: 100%;}
            .wizard .anchor.steps_2 li{width: 50%;}
            .wizard .anchor.steps_3 li{width: 33.333333%;}
            .wizard .anchor.steps_4 li{width: 25%;}
            .wizard .anchor.steps_5 li{width: 20%;}
            .wizard .anchor.steps_6 li{width: 16.666666%;}
            .wizard .anchor.steps_7 li{width: 14.285714%;}
            .wizard .anchor.steps_8 li{width: 12.5%;}
            /* END Smart Wizard */

            /* OWL Slider */
            .owl-carousel .owl-wrapper:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
            .owl-carousel{display: none;position: relative;width: 100%;-ms-touch-action: pan-y;}
                .owl-carousel .owl-wrapper{display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);}
                .owl-carousel .owl-wrapper-outer{overflow: hidden;position: relative;width: 100%;}
                .owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition: height 500ms ease-in-out;-moz-transition: height 500ms ease-in-out;-ms-transition: height 500ms ease-in-out;
                                                            -o-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out;}

                .owl-carousel .owl-item{float: left;}
                    .owl-carousel .owl-item > div{width: 100%; float: left;}
                .owl-controls .owl-page,.owl-controls .owl-buttons div{cursor: pointer;}
            .owl-controls {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
            .grabbing{cursor:url(../img/owl/grabbing.png) 8 8, move;}
            .owl-carousel  .owl-wrapper,.owl-carousel  .owl-item{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-webkit-transform: translate3d(0,0,0);
                                                                 -moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);}

            .owl-theme .owl-controls{text-align: center;}
            .owl-theme .owl-controls .owl-pagination{height: 22px; line-height: 22px;}
            .owl-theme .owl-controls .owl-buttons div{
                    color: #FFF;display: inline-block;zoom: 1;*display: inline; margin: 5px; padding: 3px 10px;font-size: 12px;-webkit-border-radius: 30px;-moz-border-radius: 30px;
                    border-radius: 30px; background: #222;filter: Alpha(Opacity=20);opacity: 0.2;}
            .owl-theme .owl-controls.clickable .owl-buttons div:hover{filter: Alpha(Opacity=50);opacity: 0.5;text-decoration: none;}
            .owl-theme .owl-controls .owl-page{display: inline-block;zoom: 1;*display: inline;}
            .owl-theme .owl-controls .owl-page span{display: block;width: 12px;height: 12px;margin: 5px 7px;filter: Alpha(Opacity=20);opacity: 0.2;
                                                    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: #222;}
            .owl-theme .owl-controls .owl-page.active span,
            .owl-theme .owl-controls.clickable .owl-page:hover span{filter: Alpha(Opacity=500);opacity: 0.5;}
            .owl-theme .owl-controls .owl-page span.owl-numbers{height: auto;width: auto;color: #FFF;padding: 2px 10px;font-size: 12px;
                                                                -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}
            .owl-item.loading{min-height: 150px;background: url(../img/owl/AjaxLoader.gif) no-repeat center center}
            /* END Slider */

            /* jVectorMaps */
            .jvectormap-label {position: absolute;display: none;border: solid 1px @base-primary;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
                   background: @base-primary;color: white;font-family: sans-serif, Verdana;font-size: smaller;padding: 3px;z-index: 15;opacity: 0.9;filter: alpha(opacity=90);}
            .jvectormap-zoomin, .jvectormap-zoomout {position: absolute;left: 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background: @base-primary;
                                                     padding: 3px;olor: white;width: 16px;height: 16px;cursor: pointer;line-height: 10px;text-align: center; color: #FFF;}
            .jvectormap-zoomin {top: 10px;}
            .jvectormap-zoomout {top: 30px;}
            /* END jVectorMaps */

            /* tagsinput */
            div.tagsinput {border: 1px solid #D5D5D5; background: #FFF; width: 100%; min-height: 30px; overflow-y: auto; .border-radius(3px);}
            div.tagsinput span.tag {.border-radius(3px); display: block; float: left; text-decoration:none; background: @base-primary; color: #FFF; margin: 2px 0px 2px 2px; line-height: 20px; padding: 2px 5px 2px 20px; position: relative;}
            div.tagsinput span.tag a{color: #FFF; text-decoration:none; position: absolute; left: 5px; width: 15px; height: 20px; .opacity(0.5,50);}
            div.tagsinput span.tag a:hover{.opacity(1,100);}
            div.tagsinput span.tag a:before{position: absolute; font-family:"FontAwesome"; content:"\f00d"; color:#FFF; font-size:12px; line-height: 20px;}
            div.tagsinput input{width:80px; margin: 4px 5px; border: 0px; height: 20px; line-height: 20px;}
            div.tagsinput div{display:block; float: left;}
            .tags_clear{clear: both; width: 100%; height: 0px;}
            .not_valid {background: @base-danger !important; color: #FFF !important; .border-radius(3px); padding: 0px 5px;}
            /* END tagsinput */

            /* sparkline */
                .sparkline{display: inline-block; position: relative;}
                    .jqstooltip{display: block !important; padding: 0px !important; border: 0px !important;}
                    .jqsfield{padding: 4px 5px 5px; display: inline-block; line-height: 13px;}
            /* eof sparkline */

            /* bootstra file input */
            .file-input-wrapper{
                input[type=file], input[type=file]:focus, input[type=file]:hover {
                    position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; height: 30px;
                }
            }
            .file-input-name{margin-left: 10px;}

            /* eof bootstrap file input */

            /* Morris charts */
            .morris-hover {position: absolute; z-index: 1000;
                &.morris-default-style {border-radius: 10px; padding: 6px; color: #666; background: rgba(255, 255, 255, 0.8); border: solid 2px rgba(230, 230, 230, 0.8);
                                        font-family: sans-serif; font-size: 12px; text-align: center;

                  .morris-hover-row-label {font-weight: bold; margin: 0.25em 0;}
                  .morris-hover-point {white-space: nowrap;margin: 0.1em 0;}
                }
            }
            /* END Morris charts */

            /* Bootstrap Tour */
            .tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;background-color:#000;opacity:.8}
            .tour-step-backdrop{position:relative;z-index:1101;background:inherit}
            .tour-step-background{position:absolute;z-index:1100;background:inherit;border-radius:6px}
            .popover[class*=tour-]{z-index:1100}
            .popover[class*=tour-] .popover-navigation{padding:9px 14px}
            .popover[class*=tour-] .popover-navigation [data-role=end]{float:right}
            .popover[class*=tour-] .popover-navigation [data-role=prev],
            .popover[class*=tour-] .popover-navigation [data-role=next],
            .popover[class*=tour-] .popover-navigation [data-role=end]{cursor:pointer}
            .popover[class*=tour-] .popover-navigation [data-role=prev]
            .disabled,.popover[class*=tour-] .popover-navigation [data-role=next].disabled,
            .popover[class*=tour-] .popover-navigation [data-role=end]
            .disabled{cursor:default}.popover[class*=tour-]
            .orphan{position:fixed;margin-top:0}
            .popover[class*=tour-].orphan .arrow{display:none}
            /* END Bootstrap Tour */

            /* Bootstro */
            .bootstro-next-btn{float:right}
            .bootstro-prev-btn{float:left}
            .bootstro-backdrop{opacity:.5;background-color:#000;bottom:0;left:0;position:fixed;right:0;top:0;z-index:5;filter:alpha(opacity=50)}
            .bootstro-highlight{z-index:9999;position:relative; color: #111;
                h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{color: #000;}
            }
            .bootstro-finish-btn-wrapper{padding-top:10px;text-align:center;clear:both}
            .bootstro-nav-wrapper{margin-top:10px}
            .bootstro-nav-wrapper button,
            .bootstro-finish-btn-wrapper button{font-size:12px!important;padding:3px 5px 3px 5px!important;font-weight:400;}
            /* END Bootstro */

            /* Bootstrap fileinput */
            .file-input{overflow-x:auto}
            .file-loading{top:0;right:0;width:25px;height:25px;font-size:999px;text-align:right;color:#fff;background:transparent url(../img/fileinput/loading.gif) top left no-repeat;border:none}
            .btn-file{position:relative;overflow:hidden}
            .btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;text-align:right;filter:alpha(opacity=0);opacity:0;background:none repeat scroll 0 0 transparent;cursor:inherit;display:block}
            .file-caption .glyphicon{display:inline-block;min-width:18px;float:left;margin-top:2px}
            .file-caption-name{display:inline-block;float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:85%}
            .file-error-message{background-color:#f2dede;color:#a94442;text-align:center;border-radius:5px;padding:5px}
            .file-caption-disabled{background-color:#EEE;cursor:not-allowed;opacity:1}
            .file-input .btn .disabled,.file-input .btn[disabled]{cursor:not-allowed}
            .file-preview{border-radius:5px;border:1px solid #ddd;padding:5px;width:100%;margin-bottom:5px}
            .file-preview-frame{display:table; margin:10px; height:160px; border:1px solid #d5d5d5; box-shadow: 0px 1px 1px 0 rgba(0,0,0,.1);padding:3px;float:left;text-align:center}
            .file-preview-frame:hover{background-color:#F5F5F5;}
            .file-preview-image{height:150px;vertical-align:text-center}
            .file-preview-text{display:table-cell;width:150px;height:150px;color:#428bca;font-size:11px;vertical-align:middle;text-align:center}
            .file-preview-other{display:table-cell;width:150px;height:150px;font-family:Monaco,Consolas,monospace;font-size:11px;vertical-align:middle;text-align:center}
            .file-input-new .close,.file-input-new .file-preview,.file-input-new .fileinput-remove-button,.file-input-new .fileinput-upload-button,.file-input-new .glyphicon-file{display:none}
            .loading{background:transparent url(../img/loading.gif) no-repeat scroll center center content-box!important}
            .wrap-indicator{font-weight:700;color:#245269;cursor:pointer}
            /* END Bootstrap fileinput */

            /* daterangepicker */
            .dtrange{line-height: 28px; padding: 0px 10px; border: 1px solid #BBB; .border-radius(3px); float: left; cursor: pointer;}
                .dtrange:hover{background-color: #F9F9F9;}

            .daterangepicker.dropdown-menu{max-width: none;z-index: 3000; border: 1px solid #D5D5D5;}
                .daterangepicker.dropdown-menu:before,.daterangepicker.dropdown-menu:after{display: none;}
            .daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {float: left;margin: 4px;}
            .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {float: right;margin: 4px;}
            .daterangepicker .ranges {width: 182px;text-align: left;}
            .daterangepicker .ranges .range_inputs>div {float: left;}
            .daterangepicker .ranges .range_inputs>div:nth-child(2) {padding-left: 11px;}
            .daterangepicker .calendar {display: none; max-width: 270px; width: auto;}
            .daterangepicker .calendar th, .daterangepicker .calendar td {white-space: nowrap; text-align: center; min-width: 32px;}
            .daterangepicker .ranges label{color: #333;display: block;font-size: 11px;font-weight: normal;height: 20px;line-height: 20px;margin-bottom: 2px;text-shadow: #fff 1px 1px 0px;text-transform: uppercase;width: 74px;}
            .daterangepicker .ranges input {font-size: 11px;}
            .daterangepicker .ranges .input-mini{background-color: #F5F5F5; border: 1px solid #ccc;border-radius: 4px;color: #555;display: block;font-size: 11px;height: 30px;line-height: 30px;vertical-align: middle;margin: 0 0 10px 0;padding: 0 6px;width: 74px;}
            .daterangepicker .ranges ul {list-style: none;margin: 0;padding: 0;}
            .daterangepicker .ranges li {font-size: 13px;background: #f5f5f5;border: 1px solid #f5f5f5;color: @base-color;padding: 3px 12px;margin-bottom: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;cursor: pointer;}
            .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {background: @base-background; border: 1px solid @base-background;color: #fff;}
            .daterangepicker .calendar-date {border: 1px solid #ddd;padding: 4px;border-radius: 4px;background: #fff;}
            .daterangepicker .calendar-time {text-align: center;margin: 8px auto 0 auto;line-height: 30px;}
            .daterangepicker {position: absolute;background: #fff;top: 100px;left: 20px;padding: 4px;margin-top: 1px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
            .daterangepicker table {width: 100%;margin: 0;}
            .daterangepicker td, .daterangepicker th {text-align: center;width: 20px;height: 20px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;cursor: pointer;white-space: nowrap;}
            .daterangepicker td.off {color: #999;}
            .daterangepicker td.disabled {color: #999;}
            .daterangepicker td.available:hover, .daterangepicker th.available:hover {background: #D5D5D5;}
            .daterangepicker td.in-range {background: lighten(@base-color,45%);-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;}
            .daterangepicker td.active, .daterangepicker td.active:hover {background-color: @base-color;border-color: @base-color;color: #fff;}
            .daterangepicker td.week, .daterangepicker th.week {font-size: 80%;color: #ccc;}
            .daterangepicker select.monthselect, .daterangepicker select.yearselect {font-size: 12px;padding: 1px;height: auto;margin: 0;cursor: default;}
            .daterangepicker select.monthselect {margin-right: 2%;width: 56%;}
            .daterangepicker select.yearselect {width: 40%;}
            .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {width: 50px;margin-bottom: 0;}

            /* eof daterangepicker */

            /* Tocify */
            .tocify{width: 20%; max-height: 90%; overflow: auto; position: fixed; border: 1px solid #E5E5E5; .border-radius(5px); .shadow(0px 1px 0px 0px rgba(0, 0, 0, 0.2));
                ul,li{list-style: none;margin: 0;padding: 0;border: none;line-height: 30px;}
                ul{
                    &.tocify-header{
                        > li > a{border-bottom: 1px solid #E5E5E5;}
                    }
                    &.tocify-subheader{display: none;
                        li.tocify-item{
                            a{background: #F5F5F5;
                                &:hover{background: #F0F0F0;}
                            }
                            &.active{
                                a{background: @base-background;}
                            }
                        }
                    }
                }
                li{
                    &.tocify-item{
                        a{background: #FFF; padding: 10px; font-size: 12px; color: #333; line-height: 20px; border-bottom: 1px solid #E5E5E5;
                          &:hover{background: #F5F5F5;}
                        }
                        &.active{
                            a{background: @base-background; color: #FFF;}
                        }
                    }

                }

            }
            .tocify-header{text-indent: 10px;}
            .tocify-subheader {text-indent: 20px;}
            .tocify-subheader li{font-size: 12px;}
            .tocify-subheader .tocify-subheader {text-indent: 30px;}
            .tocify-subheader .tocify-subheader .tocify-subheader {text-indent: 40px;}
            /* END Tocify */

            /* Filetree */
            ul.jqueryFileTree {font-size: 11px;line-height: 18px;padding: 0px;margin: 0px;
                li{list-style: none;padding: 0px;padding-left: 20px;margin: 0px;white-space: nowrap;}
                a{color: #333; text-decoration: none; display: block; padding: 0px 2px;
                    &:hover{background: #E9EDF1;}
                }
            }

            li.directory { background: url(../img/filetree/directory.png) left top no-repeat; }
            li.expanded { background: url(../img/filetree/folder_open.png) left top no-repeat; }
            li.file { background: url(../img/filetree/file.png) left top no-repeat; }
            li.wait { background: url(../img/filetree/spinner.gif) left top no-repeat; }

            /* File Extensions*/
            li.ext_3gp { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_afp { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_afpa { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_asp { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_aspx { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_avi { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_bat { background: url(../img/filetree/application.png) left top no-repeat; }
            li.ext_bmp { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_c { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_cfm { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_cgi { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_com { background: url(../img/filetree/application.png) left top no-repeat; }
            li.ext_cpp { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_css { background: url(../img/filetree/css.png) left top no-repeat; }
            li.ext_doc { background: url(../img/filetree/doc.png) left top no-repeat; }
            li.ext_exe { background: url(../img/filetree/application.png) left top no-repeat; }
            li.ext_gif { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_fla { background: url(../img/filetree/flash.png) left top no-repeat; }
            li.ext_h { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_htm { background: url(../img/filetree/html.png) left top no-repeat; }
            li.ext_html { background: url(../img/filetree/html.png) left top no-repeat; }
            li.ext_jar { background: url(../img/filetree/java.png) left top no-repeat; }
            li.ext_jpg { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_jpeg { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_js { background: url(../img/filetree/script.png) left top no-repeat; }
            li.ext_lasso { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_log { background: url(../img/filetree/txt.png) left top no-repeat; }
            li.ext_m4p { background: url(../img/filetree/music.png) left top no-repeat; }
            li.ext_mov { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_mp3 { background: url(../img/filetree/music.png) left top no-repeat; }
            li.ext_mp4 { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_mpg { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_mpeg { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_ogg { background: url(../img/filetree/music.png) left top no-repeat; }
            li.ext_pcx { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_pdf { background: url(../img/filetree/pdf.png) left top no-repeat; }
            li.ext_php { background: url(../img/filetree/php.png) left top no-repeat; }
            li.ext_png { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_ppt { background: url(../img/filetree/ppt.png) left top no-repeat; }
            li.ext_psd { background: url(../img/filetree/psd.png) left top no-repeat; }
            li.ext_pl { background: url(../img/filetree/script.png) left top no-repeat; }
            li.ext_py { background: url(../img/filetree/script.png) left top no-repeat; }
            li.ext_rb { background: url(../img/filetree/ruby.png) left top no-repeat; }
            li.ext_rbx { background: url(../img/filetree/ruby.png) left top no-repeat; }
            li.ext_rhtml { background: url(../img/filetree/ruby.png) left top no-repeat; }
            li.ext_rpm { background: url(../img/filetree/linux.png) left top no-repeat; }
            li.ext_ruby { background: url(../img/filetree/ruby.png) left top no-repeat; }
            li.ext_sql { background: url(../img/filetree/db.png) left top no-repeat; }
            li.ext_swf { background: url(../img/filetree/flash.png) left top no-repeat; }
            li.ext_tif { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_tiff { background: url(../img/filetree/picture.png) left top no-repeat; }
            li.ext_txt { background: url(../img/filetree/txt.png) left top no-repeat; }
            li.ext_vb { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_wav { background: url(../img/filetree/music.png) left top no-repeat; }
            li.ext_wmv { background: url(../img/filetree/film.png) left top no-repeat; }
            li.ext_xls { background: url(../img/filetree/xls.png) left top no-repeat; }
            li.ext_xml { background: url(../img/filetree/code.png) left top no-repeat; }
            li.ext_zip { background: url(../img/filetree/zip.png) left top no-repeat; }

            /* END Filetree */

        .chart-legend{position: absolute; top: 5px; right: 5px;}
            .rickshaw_legend{background: rgba(0,0,0,0.05)}
                .rickshaw_legend .label{color: #333;}

        //////////////
/* END TEMPLATE PLUGINS */

    .fa-right{margin-left: 5px; margin-right: 0px;}


/* Animations */
@-webkit-keyframes pulsate {
    0% {opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

@-moz-keyframes pulsate {
    0% {opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

@keyframes pulsate {
    0% {opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {opacity: 0.0;}
}


@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* END Animations */


@media only screen and (max-width: 768px){
    [class^='col-xs-'], [class^='col-sm-'], [class^='col-md-'], [class^='col-lg-']{margin-bottom: 10px;}

    /* LOGIN */
    .login-container{padding: 0px 10px;
        .login-box{padding-top: 10px; width: 100%;}
    }
    .registration-container{padding: 0px 10px;
        .registration-box{padding-top: 10px; width: 100% !important;}
    }
    /* END LOGIN */

    /* TOCIFY */
    .tocify{display: none;}
    /* END TOCIFY */

    /* TIMELINE */
    .timeline{
        &.timeline-right{
            &:before{left: 60px;}
            .timeline-item{padding-left: 110px;
                &.timeline-main{width: 60px;}
                .timeline-item-icon{left: 40px;}
                .timeline-item-info{top: 45px; width: 70px; left: 25px; padding: 7px 0px;}
            }
        }
    }
    /* END TIMELINE */

    .post-image{width: 100%;}
    .table-responsive{border: 0px;}

    .page-content-header{height: auto;
        .pull-right{width: 100%;}
        .logo,.contacts,.socials{margin: 0px auto; float: none;}
        .contacts,.socials{width: 100%; text-align: center; height: auto;}
        .contacts a{float: none; display: inline; white-space: nowrap;}
        .socials a{float: none; display: inline; white-space: nowrap;}

    }

    .form-group-separated{
        .form-group{
            [class^="col-md-"]{padding: 5px 10px; margin-bottom: 0px;}
        }
    }
}

@media only screen and (max-width: 1024px){

    .page-container{
        .page-sidebar{position: relative; float: left; width: 100%;
            &.scroll{position: relative;}
        }

        .page-content{margin-left: 0px;
            .content-frame{
                .content-frame-left,.content-frame-right,.content-frame-right-artist{width: 100%; display: none;}
                .content-frame-body{margin-left: 0px; margin-right: 0px;
                    &.content-frame-body-left{margin-right: 0px;}
                    &.content-frame-body-left-artist{margin-right: 0px;}
                }
                .content-frame-left-toggle,.content-frame-right-toggle{display: inline-block;}

            }

        }
        &.page-navigation-toggled{
            .page-content{margin-left: 0px;}
        }
        &.page-mode-rtl{
            .page-content{margin-right: 0px;}
        }

        &.page-navigation-top-fixed{
            .x-navigation.x-navigation-horizontal{padding-right: 0px; position: relative;}
            .page-content{padding-top: 0px;}
        }
    }

    .x-navigation{max-height: 50px; overflow: hidden; background: @xn-background;
        &.x-navigation-panel{height: 50px; max-height: auto; overflow: visible;
            li{
                &.xn-icon-button{width: 50px;}
                &.xn-search{width: auto;}
            }
        }
        .xn-search{
            input{width: 100%;}
        }
        > li{
            &.xn-profile{display: none;}
            &.xn-navigation-control{display: block;}
        }
        &.x-navigation-open{max-height: 1200px; overflow: visible;
            > li{
                &.xn-profile{display: block;}
            }
        }
        .x-navigation-control{display: block;}
    }


    .x-navigation-minimize{display: none !important;}
    .x-navigation-horizontal > li > ul ul,.x-navigation-horizontal > li > ul.xn-drop-left ul{position: relative; left: auto; right: auto; margin-left: 0px; margin-right: 0px; .shadow(none);}
    .x-navigation-horizontal > li > ul ul:after{display: none;}

    .x-navigation.x-navigation-horizontal .xn-search input:focus{width: 100px;}

    /* XNAV PANEL */
    .x-navigation li > .panel{width: 250px;}
    /* END XNAV PANEL */

    /* list icons */
    .icons-list li{width: 100%;}
    /* END list icons */

    /* Gallery */
    .gallery{
        .gallery-item{width: 50%;}
    }
    /* End Gallery */

    /* Timeline */
    .timeline{
        .timeline-item{
            .timeline-item-content{width: 90%;
                &:before,&:after{left: 90%;}
            }
            &.timeline-item-right{
                .timeline-item-content{
                    &:before,&:after{right: 90%;}
                }
            }
        }
    }

    /* END Timeline */

    /* Error */
    .error-container{width: 100%;}
    /* End Error */

    /* Settings */
    .theme-settings{display: none;}
    /* End Settings */

    .post-image{width: 300px;}
}

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .icheckbox_minimal,
    .iradio_minimal {
        background-image: url("../img/icheck/grey@2x.png");
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px;
    }
    .ui-resizable-se{background-image: url("../img/jqyery/resize-icon@2x.png");}

    .x-navigation{
        > li.xn-logo > a:first-child{background-image: url("../img/logo@2x.png"); background-size: 220px 50px;}
        &.x-navigation-minimized{
            > li.xn-logo > a:first-child{background-image: url("../img/logo-small@2x.png"); background-size: 50px 50px;}
        }
    }
    .login-container{
        .login-box{
            .login-logo{background-image: url("../img/logo@2x.png"); background-size: 220px 50px;}
        }
    }
    .page-content-header{
        .logo{background-image: url("../img/logo-grey-big@2x.png"); background-size: 140px 50px;}
    }
}

@media print {
    .x-navigation,.page-sidebar, .theme-settings{display: none;}
    .page-container .page-content{margin-left: 0px;}
}

#buffer-notification{
	display:none;
	width:22%;
	margin:0 auto;
	height:30px;
	//background-color:red;
	position:fixed;
	bottom:0;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	p{
		width:70%;
		float:left;
		color:white;
		line-height:30px;
		margin-left:10px;
	}
}

.bootstrap-timepicker-widget{
	z-index:99999999 !important;
}

i.remove-absence{
    color: black;
    &:hover{
        color: red;
        cursor: pointer;
    }
}

.fileupload-wrap{
    border-top:1px solid #efefef;
    padding: 20px;
}

.success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;

    .check-icon {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box;
        border: 4px solid #4CAF50;

        &::before {
            top: 3px;
            left: -2px;
            width: 30px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px;
        }

        &::after {
            top: 0;
            left: 30px;
            width: 60px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in;
        }

        &::before, &::after {
            content: '';
            height: 100px;
            position: absolute;
            background: #FFFFFF;
            transform: rotate(-45deg);
        }

        .icon-line {
            height: 5px;
            background-color: #4CAF50;
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10;

            &.line-tip {
                top: 46px;
                left: 14px;
                width: 25px;
                transform: rotate(45deg);
                animation: icon-line-tip 0.75s;
            }

            &.line-long {
                top: 38px;
                right: 8px;
                width: 47px;
                transform: rotate(-45deg);
                animation: icon-line-long 0.75s;
            }
        }

        .icon-circle {
            top: -4px;
            left: -4px;
            z-index: 10;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 4px solid rgba(76, 175, 80, .5);
        }

        .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
            background-color: #FFFFFF;
        }
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}


div.shift-panel.panel{
    div.panel-heading{
        cursor: pointer;
    }
    &.selected{
        div.panel-heading, div.panel-footer{
            background: #e0ebff;
            border-color: #a4b3d0;
        }
    }
}

div.redactor-box{
    border: none!important;
}

div.list-group-contacts{
    span.select2-selection{
        border: none !important;
    }
}

span.select2-selection{
    border: 1px solid #eaeaea !important;
    border-radius: 0px !important;
}

div.checkbox-form {
    display: flex;
    align-items: center;

    input {
        margin: 0px 10px 0px 0px;
        &:hover{
            cursor: pointer;
        }
    }

    label {
        margin: 0px;
        padding: 5px 0px;
        user-select: none;
        &:hover{
            cursor: pointer;
        }
    }
}

div.scannable-input {
    position:relative;
    width:100%;
    
    i, svg {
        font-size:16px;
        margin-right:10px;
        position:absolute;
        left:12px;
        top:0px;
        height:30px;
        z-index: 9;
    }

    input {
        padding-left:42px;
        background-color:#fff;
    }

    input:focus + svg, input:focus + i{
        color: #77c453;
    }

    &.mobile{
        input{
            padding-left: 18px;
        }
        i, svg{
            font-size: 17px;
            margin-right: 0px;
            right: 20px;
            left: auto;
            height: 44px;
        }
    }
}

.checkinout_button{
    margin-top: 30px;
    margin-bottom: 20px;
    display: none;
    a{
        width: 100%;
        display: block;
        button{
            width: ~'calc(100% - 21px)';
            border-radius: 5px;
            margin: 11px;
            padding: 14px 20px;
            font-size: 1.2rem;
            font-weight: 400;
            display: flex;
            justify-content: space-between;
            align-items: center;
            i,svg{
                font-size: 1.5rem;
            }
        }
    }

    @media screen and (max-width: 768px) {
        display: block;
    }
}

.material_checkinout_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
    background-color: whitesmoke;

    &.centered{
        justify-content: center;
        padding-top: 0px;
    }

    .checkinout_buttons{
        flex-direction: column;
        display: flex;

        button{
            font-size: 1.6rem;
            padding: 20px 30px;
            margin-bottom: 10px;
            width: 200px;

            span{
                width: 114px;
                display: inline-block;
                text-align: left;
            }
        }
    }

    .checkinout_heading{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;

        i, svg{
            font-size: 2rem;
            color: #a9a9a9;
        }

        h1{
            font-size: 2rem;
            margin: 0px;
        }
    }

    .checkinout_form{
        width: 100%;
        padding: 0px 40px;
        .input-group{
            width: 100%;
            margin-bottom: 20px;
            select, .select2{
                width: 100% !important;
            }
            input{
                width: 100%;
                height: 45px;
                font-size: 1.2rem;
            }

            .select2-container--default .select2-selection--single{
                height: 45px;

                .select2-selection__rendered{
                    line-height: 43px;
                    padding-left: 18px;
                    font-size: 1.2rem;
                    padding-right: 33px;
                }
                .select2-selection__arrow{
                    height: 43px;
                    width: 20px;
                    right: 10px;
                }
            }
            
        }

       
    }

    .checkinout_summary{
        padding: 40px;
        margin-top: 20px;
        padding-top: 30px;
        border-top: 1px solid #e9e9e9;
        width: 100%;

        table{
            tr{
                td, th{
                    padding: 11px 8px;
                }
            }
            thead tr td{
                vertical-align: bottom;
            }
        }
    }
}

#materialsTable thead td {
    font-weight: bold;
}

#select2-stockEmployeeMobile-results, #select2-stockEventsMobile-results, #select2-stockWarehouseMobile-results{
    li{
        padding: 12px !important;
        font-size: 1.2rem;
    }
}

div.amounts {
    display: flex;

    div {
        width: 70px;
        text-align:right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        padding-right: 15px;
    }
    i, svg {
        color: black;
    }
}

span.button-divider {
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 1px;
    background-color: #ddd;
    margin-left: 10px;
    margin-right: 10px;
}

table.declarations-table{
    tr{
        td.action-handle{
            height: 47px;
        }
        &:hover{
            td.action-handle{
                div.label{
                    display: none;
                }
                select.change-state{
                    display: block !important;
                }
            }
        }
    }
}