/*
 * Imports
 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

@import (optional) '/../../../../../../storage/app/backend_less_code';
@import 'bootstrap/bootstrap';
@import 'shared';

/*
 * Global Variables
 */

@primary-font: 'Open Sans', sans-serif;
@text-black: rgb(85, 85, 85); /* Default text */
@text-dark-gray: #7f8891;
@bg-black: #222e38; /* Dark background */
@blue: #00afff; /* Primary color */
@hover-blue: darken(@blue, 5%); /* Primary color (hover) */
@white: #fff; /* Background color */
@red: #F26175; /* Error, alert - color from framycss.org */
@green: #69DD95; /* Success - Color from framycss.org */
@yellow: #F8C93F; /* Danger - Color from framycss.org */

::selection { background: @blue; color: white; }

/*
 * Classes
 */

/* Responsive tables: No more tables */
@media (max-width: @screen-phone) {
    .table:not([data-not-responsive]) {
        .no-more-tables();
    }
}

.btn { border-radius: 3px; color: @text-black }
.btn-default {
    background: linear-gradient(to bottom, #ffffff 0%, #ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );
}

.focus { box-shadow: 0 0 0 2px #eee; border-color: silver }

h1.page-title.model-index { display: none }
h2.section { margin: 0 0 20px 0; font-size: 14px; font-weight: bold }

/* Form */
.form-errors {
    position: relative; margin: 20px 0; padding: 20px; border: 1px solid #e7ecf0; font-weight: bold; color: @red;
    li { margin-left: 20px;}
}
.form-errors::before {
    content: "\f071";
    position: absolute;
    top: 0;
    transform: translate(0, -50%);
    padding: 0 3px;
    border: 1px solid #e7ecf0;
    background-color: white;
    font-family: Font Awesome\ 5 Free;
}
.form-group {
    label { .text-overflow(); color: @text-dark-gray }
    label:after { /* content: ':'; */ }
    input, select, textarea {
        .form-control();
        &:focus { .focus() }
        border: 1px solid #f0f0f0;
        border-radius: 0;
        background-color: #f5f5f5;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        color: @text-dark-gray;
    }
    input[type=checkbox] { width: auto; height: auto; margin-left: 0 }
    select[multiple] { height: auto; }
    textarea { height: auto }
}
.form-actions {
    padding-top: 20px;
    input[type=submit], button { margin-right: 10px; margin-bottom: 10px; }
}
.form-editor {
    margin-bottom: 20px;
    label.full-line { display: block; width: auto; height: 30px; line-height: 30px; margin: 0; padding: 0 10px; border: 1px solid #cccccc; border-bottom: none; }
}
.form-horizontal {
    .control-label {
        text-align: left;
    }
}
.input-group .input-group-addon { border: 1px solid rgb(240, 240, 240); }

/* File Upload */
.input-group-addon.delete { cursor: pointer }
.image-upload-prev {
    margin-bottom: 10px;
    img { max-width: 100%; max-height: 32px; transition: all 0.1s linear; }
    img:hover { max-height: 200px; }
}

/* Modal */
.modal .modal-header {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: @blue;
    color: white;
}
.modal .form-group { .clearfix() }
.modal .modal-footer button { .btn(); .btn-default(); margin-left: 5px }

/* Toolbar */
.toolbar {
    &.top {
        min-height: 26px; margin-bottom: 20px;
        button { margin-right: 10px }
    }
    &.bottom { min-height: 34px; margin: 10px 0; padding: 5px 0; }
}

/* Search-Box */
.model-search-box input[type=text] {
    .form-control(); display: inline-block; width: 150px; height: auto /* fix for a display bug in the blink engine */; .background-image('img/default/searchbox_bg.png'); background-position: 10px center; background-repeat: no-repeat; text-indent: 20px; transition: width .3s ease-in-out;
    &:focus { .focus(); width: 170px }
}
.model-search-box input[type=submit] { vertical-align: inherit; }

.toolbar .model-search-box { display: inline; float: right; }
@media (max-width: 805px) {
    .toolbar button { margin-bottom: 10px; }
}
@media (max-width: 540px) {
    .toolbar .model-search-box { display: block; float: none; margin-top: 10px; }
}

/* Recycle Bin Button */
.recycle-bin-button {
    display: inline-block; margin: 10px 0; padding: 3px 7px; border-radius: 3px;
    &.enabled { background-color: @bg-black; color: white !important }
    &.disabled { background-color: #DDD; color: #999 !important }
}
.toolbar .recycle-bin-button { margin: 0 }

/* Pagination */
ul.pagination {
    li.active, li.active span { background-color: @blue; border-color: @blue; }
}
.toolbar ul.pagination { float: right; margin: -4px 0 0 0 }
@media (max-width: @screen-phone) {
    .toolbar ul.pagination { display: block; float: none; margin: 20px 0 }
}

/* Tooltip */
.hover-ui { display: none; }

/* Datetime Picker */
.date-time-picker .input-group-addon { cursor: pointer; }
.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover { background-color: @blue !important }
.bootstrap-datetimepicker-widget td.today:before { border-bottom: 7px solid @blue !important; }
.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover { background-color: @blue !important; }
.bootstrap-datetimepicker-widget td span.active { background-color: @blue !important; }

/* Tags */
.bootstrap-tagsinput {
    input { display: inline-block; height: auto; }
}

/* Icon links */
.page .table .icon-link { .btn(); .btn-default(); .btn-xs(); font-size: 13px }
.page .table .icon-link[data-color] { border: none; color: white; }
.page .table .icon-link[data-color=blue] { background: @blue; }
.page .table .icon-link[data-color=red] { background: @red; }
.page .table .icon-link[data-color=yellow] { background: @yellow; }

/* Info text */
.info-text { color: #999 }

/* Alert */
.alert {
    border-radius: 0; font-weight: bold; color: white;
    a { color: white; text-decoration: underline }
}
#content > .alert { margin-bottom: 0 /* remove bottom margin of a "global" alert so it does not break the page head */ }
.alert-success { border-color: #69DD95; background: @green; }
.alert-danger { border-color: #F26175; background: @red; }
.alert-warning { border-color: #F8C93F; background: @yellow; }
.alert-info { border-color: #4ba7e2; background: rgba(75,167,226,0.8); }

/* Tabs */
.nav-tabs li {
    a { background-color: #eeeeee };
    a:hover { background-color: @white }
    &.active a { background-color: @white; }
}
.tab-content {
    padding: 0 20px; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;
    .tab-pane { padding: 20px 0 0 0 }
}

/*
 * Sub pages
 */

.page-images {
    .image {
        position: relative; float: left; width: 20%; padding-top: 20%; background-size: cover; background-position: center;
        box-shadow: inset 0 0 0 1px white;
        .show { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
        .info {
            .text-overflow();
            display: none; position: absolute; left: 0; top: 0; width: 100%; padding: 10px; background-color: rgba(255, 255, 255, 0.8); text-align: center; font-weight: bold;
        }
        .actions {
            display: none; position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px; background-color: rgba(255, 255, 255, 0.8); text-align: center;
            a { .btn(); .btn-default(); }
        }
        &:hover .info, &:hover .actions {
            display: block;
        }
    }
    .image:nth-child(3n+3) {
        margin-right: 0;
    }
}
@media (max-width: @screen-tablet) {
    .page-images {
        .image { width: 33.33%; padding-top: 33%; }
        .info, .actions { display: block !important }
        .info .gallery { display: none }
        .actions a { padding: 1px 5px !important; }
    }
}
@media (max-width: 400px) {
    .page-images .image { width: 50%; padding-top: 50%; }
}

.page-visitors {
    #chart { margin: 0 0 20px 5%; width: 90%; height: 200px }
    table.days th { width: 50% }
    table.days tr.hover td { background-color: #DDD; background-image: none }
}

.page-members {
    div.data { display: none }
    table {
        div { margin-bottom: 10px }
        .icon-link { margin-right: 10px; }
    }
}

.page-matches .scores {
    padding-top: 7px;
    .item { display: inline-block; margin: 0 10px 10px 0; padding: 5px 10px; border: 1px solid #CCC; border-radius: 3px; cursor: pointer; }
    .item .score { font-weight: bold }
    .add-new { padding: 5px 10px; border: 1px solid #CCC; border-radius: 3px; font-weight: bold; cursor: pointer;}
}

.page-dashboard {
    #chart { margin-bottom: 20px; width: 100%; height: 250px }
    .quick-access {
        margin: 20px 0; text-align: center;
        a { box-sizing: border-box; display: inline-block; padding: 10px; }
        a span { display: block; width: 60px; height: 60px; margin: 0 10px; background-color: @blue; }
        a:hover span { background-color: lighten(@blue, 10%) }
        a:active { box-shadow: none; transform: translateY(5px); transition: all 0.08s linear; }
        i { display: block; font-size: 20px; color: white; line-height: 60px }
    }
    .widgets-row {
        div { width: 50%; float: left }
        div:first-child { box-sizing: border-box; padding-right: 10px }
        table { width: 100%; table-layout: fixed; }
        td { .text-overflow(); }
        th:first-child { width: 70% }
    }
    .feed-messages {
        float: left; margin-top: 20px;
        table { width: 100%; table-layout: fixed; }
        th:nth-child(2) { width: 100px }
        td { .text-overflow(); }
        img { vertical-align: text-bottom; }
        a { display: block }
    }
}
@media (max-width: @screen-tablet) {
    .page-dashboard {
        .quick-access {
            div { width: 25%; min-width: 100px; padding: 10px 0 }
        }
    }
}
@media (max-width: @screen-phone) {
    .page-dashboard {
        .quick-access {
            div { width: 33%; min-width: 33%; padding: 10px 0 }
            a { margin: 0 5px; }
            i { font-size: 30px; }
        }
        #chart .flot-text { display: none }
        .widgets-row div { width: auto; float: none; }
        .feed-messages td { white-space: normal; }
    }
}

.page-navigations {
    #items-table {
        th.urls { width: 50% }
        th.actions { width: 20% }
        tr.item-level-1 td:first-child { padding-left: 20px }
        tr.item-level-2 td:first-child { padding-left: 40px }
        tr.item-level-3 td:first-child { padding-left: 60px }
        tr.item-level-4 td:first-child { padding-left: 80px }
        tr.item-level-5 td:first-child { padding-left: 100px }
    }
    #item_add { margin-top: 20px; }
}

.page-config {
    form { margin-top: 20px }
    .actions button { margin-bottom: 10px; }
    .theme-tile {
        width: 33%; float: left; text-align: center;
        label { width: 90%; cursor: pointer; }
        input[type=radio] { display: none }
        .preview-img { opacity: 0.5; width: 100%; padding-top: 75%; border: 3px solid transparent; background-repeat: no-repeat; background-position: center; background-size: cover; }
        input[type=radio]:checked + .preview-img { opacity: 1; border-color: @blue; } /* Select .prev-img after checked radio button */
        .preview-img:hover { opacity: 1 }
    }
}
@media (max-width: @screen-tablet) {
    .page-config .actions .btn {
        width: 100%;
    }
}
.page-config-show-log {
    pre { padding: 0; background-color: transparent; border: none; }
    .item { margin-bottom: 10px; padding: 10px; border: 1px solid #E3E6E8; white-space: normal; cursor: pointer; }
    .date { color: @blue; }
    .stack { display: none; padding: 10px 0 10px 20px; }
    .stack-line { margin-bottom: 5px; padding: 5px; border-bottom: 1px solid #ddd; }
}

.page-contact-admin-show .reply-area {
    #show-reply-form { display: none }
    form { display: block }
}
.page-contact-admin-show .reply-area.reply-form-hidden {
    #show-reply-form { display: inline-block }
    form { display: none }
}

.page-cash-flows.page-model-index {
    .revenues { padding: 2px 5px; background-color: @green; color: white; font-weight: bold; }
    .expenses { padding: 2px 5px; background-color: @red; color: white; font-weight: bold; }
    .summary { padding: 10px; border: 1px solid #ddd; text-align: right }
}

.page-diag {
    th, td { width: 50% }
}

.editor-flags {
    img { cursor: pointer }
}

.editor-images {
    .actions {
        padding-bottom: 20px;
        input { .form-control(); display: inline-block; width: 70%; box-sizing: border-box }
        button { width: 27%; box-sizing: border-box; }
    }
    .images { height: 330px; overflow-y: scroll; }
    .image { float: left; width: 100px; height: 100px; margin: 0 10px 10px 0; background-position: center; background-size: cover; cursor: pointer }
}

/*
 * Main layout
 */

body {
    font-size: 13px;
    color: @text-dark-gray;
    font-family: @primary-font;
    background-color: @white;
}

a {
    color: @text-dark-gray;
    text-decoration: none;
    &:focus {
        color: @text-dark-gray;
        text-decoration: none;
    }
    &:hover {
        color: @text-dark-gray;
        text-decoration: none;
    }
    &:active {
        color: @text-dark-gray;
        text-decoration: none;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto !important;
}

.row {
    margin: 0;
}

@header-height: 56px;
@sidebar-width: 250px;
@sidebar-width-small: 70px;

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

header {
    position: fixed; z-index: 100; left: 0; right: 0; background-color: @blue; color: @white; font-size: 14px; line-height: @header-height; box-shadow: rgba(0, 0, 0, 0.33) 0 1px 3px 0;
    a { color: @white; }
    a:focus { color: @white }
    a:hover { color: @white; }
    a:active { color: @white; }
    nav {
        position: absolute; right: 0; top: 0;
        ul { margin: 0; }
        li {
            float: left;
            .fadd { display: none !important; }
            a {
                display: block; padding: 0 20px; height: @header-height; font-weight: bold; text-transform: uppercase;
            }
            &:hover { background-color: @hover-blue; }
        }
    }
    .msg { display: inline-block; margin-left: 40px; animation: 1s ease-out 0s 1 slideInFromTop; }
    .header-logo { display: block; width: @sidebar-width; height: @header-height; float: left; }
}
@media (max-width: 790px) {
    header .msg { display: none; }
}
@media (max-width: 570px) {
    header nav .text { display: none }
}
@media (max-width: @screen-phone) {
    header {
        position: relative;
        .header-logo { width: auto; float: none; text-align: center; }
        nav {
            position: relative; right: auto; top: auto;
            li { width: 33%; padding: 0 !important; text-align: center; overflow: hidden; white-space: nowrap; }
            li a { padding: 0 10px; }
            .text { display: inline; }
        }
    }
}

#sidebar {
    background-color: @bg-black;
    position: fixed;
    height: 100%;
    width: @sidebar-width;
    box-sizing: border-box;
    overflow: auto;
    margin-top: @header-height;
    .account {
        text-align: center;
        margin: 40px 0 40px 0;
        .avatar {
            font-weight: 300;
            color: @white;
            font-size: 16px;
            .image {
                width: 80px;
                height: 80px;
                margin-left: auto;
                margin-right: auto;
                background-position: center top;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 80px;
            }
            .welcome {
                display: block;
                margin-top: 10px;
                span {
                    .text-overflow();
                    display: inline-block;
                    vertical-align: text-bottom;
                    max-width: 80%;
                    font-weight: bold;
                    white-space: nowrap;
                }
            }
        }
    }
    .navigation {
        .category {
            .head {
                display: block;
                padding: 10px 20px;
                margin-bottom: 1px;
                background-color: lighten(@bg-black, 2%);
                color: rgba(130, 165, 192, 0.5);
                font-weight: bold;
                text-transform: uppercase;
                .text-overflow();
                .fas { position: absolute; right: 20px; line-height: @line-height-base; opacity: 0.33; transition: all 0.1s linear; }
            }
            .items {
                height: 0;
                overflow: hidden;
                a {
                    .text-overflow();
                    display: block;
                    padding: 10px 20px;
                    color: lighten(@bg-black, 40%);

                    i {
                        width: 30px;
                        text-align: center;
                    }
                }
                a:active, .item.active {
                    padding-left:  15px;
                    border-left: 5px @blue solid;
                    background-color: darken(@bg-black, 2%);
                }
                a:hover {
                    padding-left:  15px;
                    border-left: 5px @blue solid;
                    background-color: darken(@bg-black, 2%);
                }
            }
            &.active .head .fas { transform: rotate(90deg); opacity: 0.66; }
            &.initial-active .head .fas { transform: rotate(90deg);  opacity: 0.66; transition: none }
        }
        .category.initial-active .items {
            height: auto;
        }
    }
    .hamburger { display: none; padding: 10px 20px; }
}
@media (min-width: @screen-phone) and (max-width: @screen-tablet) {
    #sidebar {
        width: @sidebar-width-small;
        .account { display: none; }
        .navigation {
            .head { padding: 10px !important; font-size: 11px }
            .head .full, .item span, .fa-angle-right { display: none }
        }
    }
}
@media (max-width: @screen-phone) {
    #sidebar {
        position: relative; width: 100%; height: auto !important; margin-top: 0;
        .account { display: none; }
        .hamburger { display: block; text-align: right; }
        .navigation { display: none; }
        &.max {
            .hamburger { display: block; position: absolute; right: 0; top: 0; }
            .navigation { display: block; }
        }
    }
}

#content { margin-left: @sidebar-width; padding-top: @header-height; padding-bottom: 40px; }
@media (min-width: @screen-phone) and (max-width: @screen-tablet) {
    #content { margin-left: @sidebar-width-small; }
}
@media (max-width: @screen-phone) {
    #content { margin-left: 0; padding-top: 0; }
}

.page {
    max-width: 1400px; margin: 0 40px;
}
.page-head {
    display: block; margin-bottom: 40px; padding: 20px 0 20px 40px; border-bottom: 1px solid silver; font-size: 18px; transition: all 0.5s linear;
    i { display: inline-block; width: 30px; margin-right: 10px; border-radius: 3px; line-height: 30px; background-color: @blue; color: white; text-align: center; }
    &:hover { background-color: #f5f5f5; }
}
@media (max-width: @screen-phone) {
    .page { margin: 0 20px; }
    .page-head { padding-left: 20px; }
}

#footer {
    margin-left: @sidebar-width; padding: 0 40px; background-color: #eee; color: #999;
    .version { display: inline-block; padding: 20px }
    .top { display: inline-block; padding: 20px; color: silver; float: right }
}
@media (min-width: @screen-phone) and (max-width: @screen-tablet) {
    #footer { margin-left: @sidebar-width-small };
}
@media (max-width: @screen-phone) {
    #footer { margin-left: 0 }
}
