/*

RESETS AND WRAPPERS

*/
body, html {
    background: @content-bg;
}
.collapsable {
    vertical-align: top;
}
.blockstrap-wrapper {
    z-index: 1;
    background: @content-bg;
    a { text-decoration: none; }
    nav a,
    .btn { 
        text-transform: uppercase;
        border-radius: @border-radius;
    }
    #loader-canvas,
    #loader-wrapper { 
        z-index: 0;
        background: transparent;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        #logo {
            display: block;
            position: absolute;
            width: 221px;
            height: 36px;
            background: url(../img/logo.png) no-repeat;
            top: 50%;
            left: 50%;
            margin: -21px 0 0 -110px;
        }
    }
    .loading {
        color: transparent !important;
        background-image: url(../img/loading.gif) !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }
    p.break-word {
        word-wrap: break-word;
    }
    p.left-aligned {
        text-align: left !important;
    }
}
.blockstrap-wrapper.loading {
    background: black;
    #loader-wrapper { 
        z-index: 8888888; 
        display: block;
        background: black;
        opacity: 0.75;
    }
    #loader-canvas {
        display: block;
        z-index: 99999999;
        width: 400px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -200px 0 0 -200px;
    }
}

/*

HEADER

*/
.blockstrap-wrapper { 
    header {
        background: @header-bg;
        vertical-align: top;
        .fixed-header(@sidebar-width, @header-height);
        position: fixed;
        z-index: 999;
        i.fa {
            font-size: 24px;
        }
        #menu-toggle {
            outline: 0;
            display: block;
            z-index: 99999;
            color: @nav-border-hover;
            position: absolute;
            top: 14px;
            left: @panel-padding;
            text-align: left;
            width: 33px;
        }
        #sidebar-toggle {
            outline: 0;
            display: block;
            z-index: 99999;
            color: @nav-border-hover;
            position: absolute;
            top: 14px;
            right: @panel-padding;
            text-align: right;
            width: 33px;
        }
        #menu-toggle:hover,
        #sidebar-toggle:hover {
            color: @nav-color-hover;
        }
        .avatar {
            margin-top: -5px;
            padding: 5px;
            background: @header-bg;
            .circle(40px);
        }
    }
    #navigation { 
        .fixed-header(@sidebar-width, @header-height);
        position: fixed;
        a {
            outline: 0;
        }
    }
}

/*

FORMS

*/
.blockstrap-wrapper { 
    .panel-body {
        form {
            .form-group {
                background: @table-bg;
                display: inline-block;
                width: 100%;
                position: relative;
                padding: @panel-padding 0;
                min-height: calc(@panel-padding * 3);
                border-top: 1px solid @table-border;
                margin-bottom: -5px;
                .col-sm-9 {
                    input, select { 
                        background: @form-alternative-bg;
                        border-radius: @border-radius;
                        border: 1px solid @form-horizontal-label-border;
                    }
                    .row-fluid {
                        select {
                            padding-left: 0;
                        }
                    }
                }
                .glyphicon {
                    position: absolute;
                    top: 10px;
                    right: 25px;
                }
                .bootstrap-filestyle .glyphicon {
                    display: none;
                }
                label {
                    line-height: 33px;
                }
                .group-span-filestyle {
                    label {
                        line-height: 20px;
                        .glyphicon {
                            font-family: 'Glyphicons Halflings'
                        }
                    }
                }
            }
            .form-control.row-fluid {
                margin-top: -6px;
                background-color: transparent;
                padding-left: 0;
                padding-right: 0;
                border: none;
                box-shadow: none;
                .col-sm-4 {
                    padding: 5px;
                }
            }
            .form-group:nth-child(even) {
                background: @table-bg-alt;
            }
            .form-group:first-child {
                border-top: none;
            }
            label.control-label {
                color: @form-horizontal-label-color;
            }
        }
    }
    #search-form {
        display: block;
        position: fixed;
        right: 0;
        left: calc(@panel-padding + 30);
        right: calc(@panel-padding + 30);
        padding-left: calc(@panel-padding / 2);
        padding-right: calc(@panel-padding / 2);
        top: 7px;
        z-index: 999999;
        .form-group {
            position: relative;
        }
        button[type="submit"] {
            width: 30px;
            display: block;
            position: absolute;
            right: 0;
            text-align: center;
            margin: 0 0 0 -5px;
            height: 35px;
            line-height: 34px;
            background: @nav-bg-active;
            border: 1px solid @nav-border-hover;
            border-radius: 0 @border-radius @border-radius 0;
        }
        input#search-term {
            display: block;
            position: absolute;
            left: 0;
            right: 31px;
            width: 99%;
            height: 35px;
        }
    }
    #search-term {
        padding: 5px 15px;
        font-size: 16px;
        width: 300px;
        color: @nav-color-hover;
        background: @nav-bg-hover;
        border: 1px solid @nav-border-hover;
        border-radius: @border-radius 0 0 @border-radius;
    }
    button[type="submit"].fa {
        color: @nav-color-active;
        height: 35px;
        padding: 0 5px;
        font-size: 15px;
        line-height: 34px;
    }
    button[type="submit"]:hover {
        background: @nav-bg-hover;
        border-color: @nav-border-active;
    }
}
body.blockstrap-open-menu .blockstrap-wrapper { 
    #search-form {
        display: none;
    }
}

/*

SIDEBAR

*/
.blockstrap-wrapper #sidebar {
    text-align: center;
    background: @sidebar-bg;
    padding: @panel-padding;
    .fixed-sidebar(@sidebar-width, @header-height);
    position: fixed;
    .sidebar-wrapper {
        position: fixed;
        left: 80px;
        right: 20px;
    }
    .avatar {
        padding: 5px;
        background: @header-bg;
        .circle(140px);
    }
    #user-name {
        .pro();
        color: @sidebar-link-color;
    }
    #last {
        font-size: 11px;
        margin: -10px 0 15px;
        color: @sidebar-sub-color;
    }
    .actions {
        padding-bottom: @panel-padding;
    }
    #sidebar-panel {
        z-index: 2;
        position: relative;
        color: @sidebar-panel-color;
        padding: @panel-padding;
        background: @sidebar-panel-bg;
        border-top: 1px solid @sidebar-panel-border;
        border-bottom: 1px solid @sidebar-panel-border;
        margin: @panel-padding -@panel-padding;
        p {
            font-size: 11px;
            text-align: justify;
            line-height: 16px;
        }
        ul {
            font-size: 11px;
            display: block;
            position: relative;
            list-style: none;
            text-align: left;
            margin: 0;
            padding: 0;
            li {
                .values {
                    float: right;
                }
                padding-bottom: calc(@panel-padding / 2);
            }
            li.total {
                border-top: 1px solid @sidebar-panel-border;
                padding-top: calc(@panel-padding / 2);
                color: @btn-danger-color;
                span {
                    float: right;
                }
            }
        }
        .panel-title {
            .pro();
            border-bottom: 1px solid @sidebar-panel-border;
            margin-bottom: calc(@panel-padding / 2);
        }
    }
}

/*

CONTENT / PANELS

*/
.blockstrap-wrapper #main-content {
    background: @content-bg;
    left: @sidebar-width;
    right: 0;
    top: @header-height;
    padding-top: @panel-padding;
    display: block;
    position: absolute;
    min-height: 100%;
    z-index: 2;
    a {
        color: @content-link;
    }
    a:hover {
        color: @content-link-hover;
    }
    .panel-wrapper {
        display: inline-block;
        position: relative;
        padding-left: @panel-padding;
        padding-right: @panel-padding;
        margin-bottom: @panel-padding;
    }
    .panel {
        padding: 0;
        margin-bottom: @panel-padding;
        border-radius: @border-radius;
        .panel-heading {
            .pro();
            background: @panel-header-bg;
            color: @panel-header-color;
            padding: calc(@panel-padding / 2);
        }
        .panel-body {
            padding: @panel-padding;
            .row-fluid {
                float: left;
            }
            .panel {
                float: left;
                border-radius: 0;
                box-shadow: none;
                text-align: center;
                padding: @panel-padding 0;
                margin: 0;
                background: @table-bg;
                .panel-value {
                    font-size: 24px;
                    color: @content-link;
                    display: block;
                    margin: 0;
                }
                .panel-description {
                    display: block;
                }
            }
            .panel.list-group-item {
                width: 50%;
                .list-item-content {
                    padding: 21px 0;
                }
            }
        }
        .panel-body.padless {
            padding: 0;
            ul.list-group {
                margin-bottom: 0;
                padding-bottom: 0;
            }
        }
    }
    .actions.col-md-12 {
        padding: 0 @panel-padding calc(@panel-padding * 2);
    }
}

/*

FOOTER

*/
.blockstrap-wrapper footer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    line-height: 0;
    font-size: 11px;
    color: @sidebar-panel-color;
    padding: @panel-padding;
    background: @sidebar-panel-bg;
    border-top: 1px solid @sidebar-panel-border;
    z-index: 2;
}

/*

BUTTONS

*/
.blockstrap-wrapper { 
    #main-content .btn.btn-primary,
    #main-content .btn.btn-subtle.active,
    .btn.btn-primary {
        color: @btn-primary-color;
        border-color: @btn-primary-border;
        .gradient(@btn-primary-top, @btn-primary-bottom);
    }
    #main-content .btn.btn-primary:hover,
    #main-content .btn.btn-subtle.active:hover,
    .btn.btn-primary:hover {
        .gradient(@btn-primary-bottom, @btn-primary-top);
    }
    #main-content .btn.btn-default,
    .btn.btn-default {
        color: @btn-default-color;
        border-color: @btn-default-border;
        .gradient(@btn-default-top, @btn-default-bottom);
    }
    #main-content .btn.btn-default:hover,
    .btn.btn-default:hover {
        .gradient(@btn-default-bottom, @btn-default-top);
    }
    #main-content .btn.btn-danger,
    .btn.btn-danger {
        color: @btn-danger-color;
        border-color: @btn-danger-border;
        .gradient(@btn-danger-top, @btn-danger-bottom);
    }
    #main-content .btn.btn-danger:hover,
    .btn.btn-danger:hover {
        .gradient(@btn-danger-bottom, @btn-danger-top);
    }
    #main-content .btn.btn-subtle,
    .btn.btn-subtle {
        color: @btn-subtle-color;
        border-color: @btn-subtle-border;
        .gradient(@btn-subtle-top, @btn-subtle-bottom);
    }
    #main-content .btn.btn-subtle:hover,
    .btn.btn-subtle:hover {
        .gradient(@btn-subtle-bottom, @btn-subtle-top);
    }
    #main-content .btn.btn-success,
    .btn.btn-success {
        color: @btn-success-color;
        border-color: @btn-success-border;
        .gradient(@btn-success-top, @btn-success-bottom);
    }
    #main-content .btn.btn-success:hover,
    .btn.btn-success:hover {
        .gradient(@btn-success-bottom, @btn-success-top);
    }
}

/*

LISTS

*/
.blockstrap-wrapper {
    .list-group .list-group-item {
        background: @table-bg;
        font-size: 12px;
    }
    .list-group .list-group-item:nth-child(even) {
        background: @table-bg-alt;
    }
    .list-group .list-group-item .btn.btn-xs {
        font-size: 10px;
    }
    .panel-body {
        .list-group {
            float: left;
            width: 100%;
            background: @table-bg;
        }
        .list-group .list-group-item {
            float: left;
            width: 100%;
            border-left: none;
            border-right: none;
            padding: @panel-padding;
        }
        .list-group .list-group-item:first-child {
            border-top: none;
        }
        .list-group .list-group-item:last-child {
            border-bottom: none;
            margin-bottom: -@panel-padding;
        }
        .list-group .list-group-item.from {
            border-left: 8px solid @ribbon-from;
        }
        .list-group .list-group-item.to {
            border-left: 8px solid @ribbon-to;
        }
    }
}

/*

JUMBOTRON

*/
.blockstrap-wrapper {
    .panel-body .jumbotron {
        background: @panel-bg;
        border-left: 8px solid @ribbon-default;
        padding: 0;
        margin: 0;
        h1 {
            .pro();
            text-align: center;
            margin: 0;
        }
        .intro {
            font-size: 12px;
            opacity: 0.7;
            margin-bottom: 0;
            text-align: center;
        }
        .actions {
            .disabled {
                text-transform: lowercase;
                font-size: 12px;
            }
        }
        .jumbotron-contents {
            font-size: 12px;
            a.btn-xs {
                padding: 5px 10px;
                font-size: 11px;
                text-transform: lowercase;
                margin: 0 6px 6px 0;
            }
        }
    }
    .panel-body.padless .jumbotron {
        padding: @panel-padding;
    }
}

/*

HIDDEN MENU

*/
.blockstrap-wrapper {
    #navigation {
        display: block;
        position: fixed;
        overflow-y: auto;
        overflow-x: hidden;
        top: 0;
        padding-top: calc(@header-height + @panel-padding);
        padding-left: @panel-padding;
        padding-right: @panel-padding;
        left: @sidebar-width;
        bottom: 0;
        right: 0;
        width: auto;
        height: auto;
        z-index: 1;
        background: black;
        a {
            display: block;
            position: relative;
            padding: @panel-padding 0;
            border-top: 1px dotted @nav-border-active;
        }
        a:first-child {
            border-top: none;
        }
    }
    #navigation:before {
        content: "";
        display: block;
        position: fixed;
        left: @sidebar-width;
        right: 0;
        top: 0;
        height: @header-height;
        width: 100%;
        z-index: 9;
        background: @header-bg;
    }
}

/*

TABLES

*/
.blockstrap-wrapper {
    .jumbotron-contents .btn-table-filter {
        display: none;
    }
    #main-content table.table,
    table.table {
        width: 100%;
        max-width: 100%;
        position: relative;
        thead {
            visibility: hidden;
            tr th {
                display: none;
            }
        }
        thead th,
        tbody td {
            font-size: 12px;
            border-color: @table-border;
            padding: @panel-padding calc(@panel-padding / 2);
        }
        thead tr th:last-child,
        tbody tr td:last-child {
            text-align: right;
        }
        tbody tr td {
            color: @table-color;
            background: @table-bg-alt;
        }
        tbody tr:nth-child(odd) td {
            background: @table-bg;
        }
        thead tr th {
            .pro();
            cursor: pointer;
            font-size: 125%;
            font-weight: normal;
            padding: calc(@panel-padding / 2);
            background: @table-header-bg;
            color: @table-header-color;
        }
        thead tr th.sorting_asc,
        thead tr th.sorting_desc {
            background: @table-header-bg-active;
        }
        tbody tr.to td.ribbon { 
            width: 8px;
            padding-left: 0;
            padding-right: 0;
            background: @ribbon-to;
        }
        tbody tr.from td.ribbon { 
            width: 8px;
            padding-left: 0;
            padding-right: 0;
            background: @ribbon-from;
        }
        thead tr th.ribbon { 
            width: 8px;
            padding-left: 0;
            padding-right: 0;
            background: @table-header-bg;
        }
        thead tr th,
        tbody tr td {
            display: none;
            .btn-xs {
                float: right;
                margin-left: calc(@panel-padding / 2);
                margin-bottom: calc(@panel-padding / 2);
            }
            .mobile-view {
                display: inline-block;
                position: relative;
                margin-right: 6px;
            }
        }
        tbody tr td:first-child,
        tbody tr td:last-child {
            display: table-cell !important;
            text-align: left;
        }
        border-bottom: 1px solid @table-border;
    }
    #main-content .panel-body,
    .panel-body {
        table.table {
            margin-bottom: 0;
            padding-bottom: 0;
            max-height: 500px;
        }
        .dataTables_wrapper { 
            .dataTables_length,
            .dataTables_info,
            .dataTables_paginate {
                font-size: 12px;
                color: @table-color;
                background: transparent;
                border-color: transparent;
                font-weight: normal;
                display: inline-block;
                position: relative;
                vertical-align: middle;
                padding: @panel-padding calc(@panel-padding / 2);
                text-align: center;
                width: 100%;
            }
            .dataTables_paginate { 
                ul { 
                    padding: 0;
                    margin: 0;
                    li a {
                        background: @table-bg;
                        border: 1px solid @table-border;
                    }
                    li.active a {
                        background: @ribbon-default;
                        color: @ribbon-default-color;
                    }
                }
            }
            .dataTables_info {
                text-align: center;
            }
        }
    }
    #main-content .panel-wrapper.empty,
    .panel-wrapper.empty {
        .panel {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            .panel-body .dataTables_wrapper,
            .dataTables_wrapper { 
                .dataTables_length,
                .dataTables_info,
                .dataTables_paginate {
                    float: left;
                    padding: @panel-padding 0;
                }
                .dataTables_paginate {
                    float: right;
                }
                .dataTables_info {
                    padding: calc(@panel-padding + 2);
                }
            }
        }
    }
}

/*

MODALS

*/
.modal-backdrop,
.blockstrap-wrapper .modal-backdrop {
    z-index: 0;
    display: none;
}
.blockstrap-wrapper {
    .modal:before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: @modal-bg;
        opacity: @modal-bg-opacity;
    }
    .modal {
        z-index: 99999999;
        .modal-dialog {
            top: -100%;
            .modal-header {
                .pro();
                background: @modal-header-bg;
                color: @modal-header-color;
                border-radius: @border-radius @border-radius 0 0;
                border-bottom: 1px solid @modal-border;
            }
            .modal-body {
                background: @modal-body-bg;
                color: @modal-body-color;
                text-align: justify;
                font-size: 12px;
                form {
                    input, textarea, select { 
                        background: @modal-form-bg;
                        font-size: 12px;
                    }
                    textarea {
                        height: 140px;
                    }
                }
                .actions {
                    background: @modal-header-bg;
                    color: @modal-header-color;
                    border-radius: 0 0 @border-radius @border-radius;
                    border-top: 1px solid @modal-border;
                    margin: @panel-padding calc(0 - @panel-padding) calc(0 - @panel-padding);
                    padding: 0 @panel-padding;
                    min-height: 55px;
                }
                .qr-holder {
                    display: block;
                    background: @modal-form-bg;
                    border: 1px solid @modal-border;
                    padding: @panel-padding;
                    text-align: center;
                    img {
                        background: @modal-body-bg;
                        padding: @panel-padding;
                        border: 1px solid @modal-border;
                    }
                }
                p.left {
                    text-align: left;
                }
            }
            .modal-body.no-footer {
                border-radius: 0 0 @border-radius @border-radius;
            }
            .modal-footer {
                background: @modal-header-bg;
                color: @modal-header-color;
                border-radius: 0 0 @border-radius @border-radius;
                border-top: 1px solid @modal-border;
            }
        }
    }
    .modal.in {
        .modal-dialog {
            animation: slide-down 1s forwards;
        }
    }
}

/* 

ANIMATIONS

*/
@keyframes slide-down {
    0% { top: -100%; }
    100% { top: @panel-padding; }
}

/*

FORMS

*/
.blockstrap-wrapper {
    form {
        .actions,
        .form-group {
            display: block;
            position: relative;
            margin: 0;
            padding: calc(@panel-padding / 4) 0;
            min-height: calc(@panel-padding * 2);
            .input-icon {
                display: block;
                position: absolute;
                top: 7px;
                right: 9px;
                font-size: 18px;
            }
        }
        .actions {
            .btn.pull-right {
                margin: calc(@panel-padding / 2) 0 0 calc(@panel-padding / 2);
            }
        }
        .bootstrap-switch {
            background: @form-alternative-bg;
            border: 1px solid @form-horizontal-label-border;
            padding: 3px;
            .bootstrap-switch-label {
                color: @form-horizontal-label-color;
                background: @form-alternative-bg;
                margin-left: -3px;
                line-height: 27px !important;
            }
        }
        .bootstrap-switch-wrapper {
            float: right;
            max-height: 38px;
        }
        .bootstrap-switch.bootstrap-switch-on {
            .bootstrap-switch-label {
                margin-left: 3px;
            }
        }   
    }
    form.form-horizontal {
        label.control-label,
        select.form-control,
        input.form-control {
            font-size: 16px;
            line-height: 16px;
            height: 30px;
        }
        label.control-label {
            text-align: left;
            font-size: 12px;
            background: @form-horizontal-label-bg;
            color: @form-horizontal-label-color;
            border: 1px solid @form-horizontal-label-border;
            border-radius: @border-radius 0 0 @border-radius;
        }
        select.form-control,
        input.form-control {
            border-radius: 0 @border-radius @border-radius 0;
        }
        div.col-xs-1, div.col-sm-1, div.col-md-1, div.col-lg-1, 
        div.col-xs-2, div.col-sm-2, div.col-md-2, div.col-lg-2, 
        div.col-xs-3, div.col-sm-3, div.col-md-3, div.col-lg-3, 
        div.col-xs-4, div.col-sm-4, div.col-md-4, div.col-lg-4, 
        div.col-xs-5, div.col-sm-5, div.col-md-5, div.col-lg-5, 
        div.col-xs-6, div.col-sm-6, div.col-md-6, div.col-lg-6, 
        div.col-xs-7, div.col-sm-7, div.col-md-7, div.col-lg-7, 
        div.col-xs-8, div.col-sm-8, div.col-md-8, div.col-lg-8, 
        div.col-xs-9, div.col-sm-9, div.col-md-9, div.col-lg-9, 
        div.col-xs-10, div.col-sm-10, div.col-md-10, div.col-lg-10, 
        div.col-xs-11, div.col-sm-11, div.col-md-11, div.col-lg-11, 
        div.col-xs-12, div.col-sm-12, div.col-md-12, div.col-lg-12 {
            padding-left: 0;
            padding-right: 0;
        }
        label.control-label.transparent-label {
            background: transparent;
            border-color: transparent;
        }
    }
}

/*

SETUP

*/
.blockstrap-wrapper {
    #setup-blockstrap {
        .full-screen();
        z-index: 999999999;
        background: black;
        color: white;
        padding: @panel-padding;
    }
}

/*

PROGRESS

*/
.blockstrap-wrapper {
    #sidebar {
        .progress {
            background: @sidebar-panel-bg;
            border: 1px solid @sidebar-panel-border;
        }
    }
}