/**
 * Description: Portal Rede Simples
 *
 * Summary:
 *
 *  0. Imports
 *  1. Buttons
 *  2. Drop Down Menu 
 *  3. Login Admin
 *  4. Página - Gerenciar Conteúdo
 *  5. Página Seções
 *  6. Validação Login
 *  7. Inserir Conteúdos
 */

 /* ############################################################

## Instalação e configuração inicial do LESS no Sublime Text

1. Instalar Node.js (https://nodejs.org/en/)
2. Instalar o plugin LESS no Sublime Text
3. Instalar o plugin "Less2Css" no Sublime Text
4. Adicionar o seguinte código no arquivo de configuração do plugin (less2css.sublime-settings):

{
    "minify": false,
    "outputDir": "auto",
    "main_file": "admin.less"
}

5. Seu LESS está pronto para ser utilizado

############################################################ */ 

/*===============================
=           0. Imports            =
===============================*/

 // Import variables into admin.less
//@import "../dist/rs-mg/style-mg.less";

/** LESS Variables **/
@import "_variables.less";

 // Import variables into admin.less
//@import (reference) "style.less";

.rendercss(
    @color-default,
    @color-darken, 
    @color-1, 
    @color-2, 
    @color-3, 
    @color-4, 
    @navbar-bgcolor, 
    @footer-bgcolor, 
    @panel-heading-color,
    @warning
){

    /*=====  End of 0. Imports  ======*/

    /*==================================
    =            1. Buttons            =
    ==================================*/

    .btn-secondary {
        background: @color-2;
        text-transform: capitalize;
        padding: 5px 15px;
        color: #fff;

        &:hover, 
        &:focus,
        &:active,
        &.active.focus, 
        &.active:focus, 
        &.active:hover, 
        &:active.focus, 
        &:active:focus, 
        &:active:hover {
            color: #fff;
            background: darken(@color-2, 5%);
            outline: none;
        }

        i {
            color: #fff;
            margin-left: 0px;
            font-size: 13px;
        }
    }

    .margin-right-15 {
        margin-right: 15px;
    }

    .margin-bottom-35 {
        margin-bottom: 35px;
    }

    .icn-success {
        color: #2ab27b;
    }

    /*=====  End of 1. Buttons  ======*/

    /*======================================
    =         2. Drop Down Menu            =
    ======================================*/

    .navbar-brand {
        height: 68px;
        padding: @navbar-brand;

        img {
            height: 100%;
        }
    }

    .navbar-nav {
        padding-top: 9px;
    }

    .dropdown-menu>li>a:focus,
    .dropdown-menu>li>a:hover {
        text-decoration: none;
        color: #ffffff;
        background-color: @color-1;
    }

    .dropdown-header, .dropdown-menu>li>a {
        display: block;
        padding: 10px 20px;
        line-height: 1.6;
        white-space: nowrap;
    }

    /*=====  End of 2. Drop Down Menu  ======*/

    /*======================================
    =            3. Login Admin            =
    ======================================*/

    /*----------  Navbar  ----------*/

    .navbar {
        margin-bottom: 0px !important;
    }

    /*----------  Bg Tela de Login  ----------*/

    .rs-login-bg {
        background: @bg-login;
        background-repeat: no-repeat;
        width: 100%;
        height: 94.1vh;
    }

    // .login-page .panel {
    //     width: 400px;
    //     margin: 0 auto;
    //     position: relative;
    // }

    // .panel {
    //     margin-bottom: 20px;
    //     background-color: #fff;
    //     border: 1px solid transparent;
    //     border-radius: 4px;
    //     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    //     box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    // }

    /*----------  Box central de login  ----------*/

    .panel-title {
        font-size: 13px;
        padding-left: 0px !important; 
    }


    .panel-footer {
         background-color: #fff;
    }

    .login-pannel-box {
        margin-top: 150px;
    }

    .rs-login-bg {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;

        .panel-title {
            i {
                margin-right: 8px;
                border-right: 1px solid #ddd;
                padding-right: 10px;
                font-size: 17px;
            }
        }

        .panel {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 0;

            button {
                color: #fff;
            }

            .input-group {
                input {
                    border-radius: 0;
                }
            }

            .input-group-addon {
                background-color: #fafafa;
                border-radius: 0;
                border-color: #DDD;
                min-width: 40px;
            }

            .panel-footer {
                a {
                    color: #666;
                    font-size: 13px;
                    text-decoration: none;

                    &:hover {
                        color: @color-1;
                    }
                }
            }
        }
    }

    @media (min-width: 1200px) {
        #content {
            padding: 20px 20px 50px 23px;
            width: 400px;
            margin: 0 auto;
            position: relative;
        }
    }

    /*----------  Icones  ----------*/

    .panel-title > .fa, .panel-title > .glyphicon, .panel-title > .glyphicons, .panel-title > .imoon {
        color: @color-1;
    }
    .input-group-addon {
        color: @color-1;
    }

    /*----------  Formulários  ----------*/

    .form-control {
        height: 38px;
    }

    .form-control:focus {
        border-color: #46a546;
        box-shadow: none;
    }
    /*=====  End of 3. Login Admin  ======*/

    /*===================================================
    =           4. Página - Gerenciar Conteúdo            =
    ===================================================*/

    /*----------  Formulário de cadastro  ----------*/

    #app .news-adm-post {

        .form {
            margin-bottom: 50px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }

        .panel {
            padding: 0;
            margin-bottom: 20px;
            background-color: transparent;
            border-radius: 0px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .panel-heading {
            padding: 0px 15PX 20px 15px;
            border-bottom: 1px solid transparent;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
            background-color: transparent;
            border: 1px solid transparent;
            box-shadow: none;
        }

        .panel-body {
            padding: 0;
        }

        .list-group-item {
            color: #fff;
            background-color: @color-darken;
            border-color: transparent;
            width: 100px;
            margin-bottom: 1px;
            opacity: .5;
            transition: all 300ms ease;
            
            &.active {
                background-color: @color-1;
                opacity: 1;
                &:after {
                    content: '';
                    position: absolute;
                    left: 100%;
                    top: 50%;
                    margin-top: -13px;
                    border-left: 0;
                    border-bottom: 13px solid transparent;
                    border-top: 13px solid transparent;
                    border-left: 10px solid @color-2;
                    transition: all 300ms ease;
                }
                &:hover {
                    &:after {
                        border-left-color: darken(@color-1, 10%);
                    }
                }
            }

            &:hover {
                background-color: darken(@color-1, 10%);
                opacity: 1;
            }

            &:first-child {
                border-top-right-radius: 0;
            }
            &:last-child {
                border-bottom-right-radius: 0;
            }
        }

        div.bhoechie-tab-menu {
            z-index: 11;
            padding-right: 0;
            padding-left: 0;
            padding-bottom: 0;
            width: 100px;
        }

        div.bhoechie-tab-content{
            width: 100%;
            background-color: #ffffff;
            padding-left: 20px;
            padding-top: 10px;
            margin: 15px 0 50px 0;
        }

        div.bhoechie-tab-container-branco {
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            border-top-left-radius: 0;
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
            background-color: #ffffff;
            float: left;
            margin-left: -1px;
            width: 90%;
            height: auto;
            min-height: 550px;
            z-index: 10; 
        }    

        div.bhoechie-tab div.bhoechie-tab-content:not(.active){
            display: none;
        }

        div.bhoechie-tab-menu div.list-group>a .glyphicon,
        div.bhoechie-tab-menu div.list-group>a .fa {
            color: #fff;
        }
    }

    /*=====  End of 4. Página - Gerenciar Conteúdo  ======*/

    /*========================================
    =            5. Página Seções            =
    ========================================*/

    .panel {
        padding: 15px;
    }

    .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border-bottom-width: 0px;
    }

    .table>thead>tr>th {
        vertical-align: middle!important;
        border-bottom: 1px solid #ddd;
        padding: 8px 10px !important;
    }

    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px 9px;
        line-height: 1.6;
        vertical-align: middle;
        border-top: 1px solid #ddd;
    }

    /*=====  End of 5. Página Seções  ======*/

    .select_fw {
        font-family: 'FontAwesome', 'sans-serif';
    }

    #app {
        min-height: 100vh;
        background-color: #f0f0f0;

        .panel-default {
            border: 1px solid #e1e1e1;
        }

        .panel-modal {
            border: none;
            background-color: transparent;

            @media (min-width: 768px) {
                .modal-content {
                    box-shadow: 0 5px 15px rgba(110,110,110,.5);
                }
            }
        }

        .panel-page-title {
            background-color: #23497e;
            color: #fff;
            border: none;
            padding: 25px 15px;
            border-radius: 4px;

            small {
                color: #fff;
            }

            .panel-heading {
                // border-bottom: 1px solid #fff;
            }
        }

        .panel-page {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
            box-shadow: 0 1px 1px rgba(0,0,0,0.05);
        }

        .btn-gray {
            background-color: #dadada;
            color: #4c4e50;
            border: 1px solid #ccc;
            transition: all 300ms ease;

            &:hover {
                background-color: darken(#dadada, 5%);
                color: #fff;
            }

            &.edit:hover {
                background-color: #3097D1;
                border-color: #3097D1;
            }
            &.success:hover {
                background-color: #2ab27b;
                border-color: #259d6d;
            }

            &.danger:hover {
                background-color: #f4363d;
                border-color: darken(#f4363d, 5%);
            }

            &.preview:hover {
                background-color: #f2f2f2;
                border-color: #c4c4c4;
                color: #444;
            }

            &.warning:hover {
                background-color: #fc7c5f;
                color: #fff;
                border-color: darken(#fc7c5f, 5%);
            }
        }

        .list-group-item {
            color: #444;
            background-color: #cecece;
            border-color: #fff;
        }

        .btn.collapsed .fa-caret-up {
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            -ms-transform: rotate(180deg); /* IE 9 */
            transform: rotate(180deg);
        }

        .rs-thumbnail {
            img {
                width: 90px;
                height: 60px;
                object-fit: cover;
            }
        }
    }

    .btn-collapse {
        color: #fff;
    }
        
    /*=======================================
    =         6. Validação Login            =
    =======================================*/

    .help-block {
        font-size: 11px;
    }

    /*=====  End of 6. Validação Login  ======*/


    /*=======================================
    =         7. Inserir Conteúdos          =
    =======================================*/

    // Sortable Table

    body.dragging, body.dragging * {
      cursor: move !important;
    }

    .dragged {
      position: absolute;
      opacity: 0.5;
      z-index: 2000;
    }

    ol.example li.placeholder {
      position: relative;
      /** More li styles **/
    }
    ol.example li.placeholder:before {
      position: absolute;
      /** Define arrowhead **/
    }

    .sorted_table_menu .rs-iconsortable {
       cursor: move;
    }

    /*===============================================
    =            8. Registro de usuários            =
    ===============================================*/

    /*==================================
    =          6. Pagination           =
    ==================================*/
    .pagination {
        display: flex;
        justify-content: center;

        li>a,
        li>span {
            margin: 0 2px;
            color: @color-2;
        }
        li>a:focus, 
        li>a:hover, 
        li>span:focus, 
        li>span:hover {
            color: darken(@color-2, 10%);
        }

        li {
            span {
                background-color: @color-2;
                color: #fff;
                border-color: @color-2;

                &:hover {
                    color: #fff;
                    background-color: @color-2;
                    border-color: darken(@color-2, 5%);
                }
            }

            &.disabled span {
                background-color: @color-default;
                color: @color-darken;
                border-color: @color-default;
            }
        }

        li.active>a {
            background-color: @color-2;
            border-color: darken(@color-2, 5%);
            color: #fff;
        }
    }

    /*=====  End of 6. Pagination  ======*/


    /*----------  Modal para editar usuários  ----------*/

    .modal-dialog {
        margin: 200px auto;
    }


    /*=====  End of 8. Registro de usuários  ======*/


    /*==========================================================
    =            9. Page - Editar conteúdo dinâmico            =
    ==========================================================*/

    #app .panel-default {
        border: 1px solid #e1e1e1;
        display: inline-block;
        width: 100%;
    }

    .padding-0 {
        padding: 0px;
    }

    .form-imput-inline {
        padding-left: 0px;
        padding-right: 6px; 
    }

    .rs-remove-img {
        width: 150px;
        height: 110px;
        position: relative;
        padding: 8px;
        border: 1px solid #dcdcdc;
        border-radius: 5px;
        transition: all 300ms ease;
        
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        &:hover {
            i {
                background-color: #e00000;
            }
        }
    }

    .rs-remove-img-ic {
        position: absolute;
        left: 50%;
        margin-left: -17px;
        top: 47%;
        color: #fff;
        text-align: center;
        margin-top: -14px;

        
        i {
            font-size: 20px;
            background-color: red;
            border-radius: 50%;
            height: 35px;
            width: 35px;
            line-height: 35px;
            text-align: center;
            background-color: rgba(224, 0, 0, .7);
        }
    }





    /*=====  End of 9. Page - Editar conteúdo dinâmico  ======*/

}

//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.mg {
    .rendercss (
        #dedede, 
        #666, 
        #e63c3c, 
        #e63c3c, 
        darken(#e63c3c, 15%), 
        #ff9b00, 
        darken(#666, 10%), 
        darken(#666, 10%), 
        #666,
        #ffc40d
    );

    .gradient-bgcolor (@startColor: @color-1, @endColor: darken(@color-1, 25%)) {
        background-color: @startColor;
        background: linear-gradient(to right, @startColor, @endColor); /* Standard syntax */
        background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
        background: -webkit-linear-gradient(left, @startColor, @endColor);
        background: -moz-linear-gradient(right, @startColor, @endColor);
        background: -ms-linear-gradient(right, @startColor, @endColor);
        background: -o-linear-gradient(right, @startColor, @endColor);
    }

    @cta-title: darken(#666, 10%);

    /*----------  Variable Admin  ----------*/

    @bg-login: url('../dist/rs-mg/bg-login.png') top center;
    @navbar-brand: 14px 10px;
}


//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.df {
    .rendercss(
        #dedede, 
        #666, 
        #95bd3a, 
        #009d72, 
        #007b82, 
        #95bd3a, 
        #009d72, 
        #009d72, 
        #009d72,
        #ffc40d
    );

    .gradient-bgcolor (@startColor: @color-2, @endColor: @color-3) {
        background-color: @startColor;
        background: linear-gradient(to right, @startColor, @endColor); /* Standard syntax */
        background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
        background: -webkit-linear-gradient(left, @startColor, @endColor);
        background: -moz-linear-gradient(right, @startColor, @endColor);
        background: -ms-linear-gradient(right, @startColor, @endColor);
        background: -o-linear-gradient(right, @startColor, @endColor);
    }

    @cta-title: darken(#666, 10%);

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-df/bg-login.jpg') top center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}

//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.ac {
    .rendercss(
       #e1e1e1, 
        #666, 
        #589c45, 
        #589c45, 
        darken(#589c45, 15%), 
        #95bd3a, 
        darken(#5b5b5f, 5%), 
        darken(#5b5b5f, 5%), 
        #5b5b5f,
        #ffc40d
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-ac/bg-login.jpg') top center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}

//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.rs {
    .rendercss(
        #e1e1e1, 
        #5b5b5f, 
        #a31724, 
        #a31724, 
        darken(#a31724, 15%), 
        #e1b21c, 
        darken(#5b5b5f, 5%), 
        darken(#5b5b5f, 5%), 
        #5b5b5f,
        #e1b21c
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-rs/bg-login.jpg') center center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}
//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.ms {
    .rendercss(
        #e1e1e1, 
        #5b5b5f, 
        #01943F, 
        #01943F, 
        darken(#01943F, 15%), 
        #01943F, 
        darken(#5b5b5f, 5%), 
        darken(#5b5b5f, 5%), 
        #5b5b5f,
        #01943F
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-ms/bg-login.jpg') center center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}
//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.rr {
    .rendercss(
        #e1e1e1, 
        #5b5b5f, 
        #29166F, 
        #ea332e,
        #ea332e,
        #ea332e, 
        darken(#5b5b5f, 5%), 
        darken(#5b5b5f, 5%), 
        #5b5b5f,
        #5b5b5f
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-ms/bg-login.jpg') center center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}
//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.mt {
    .rendercss(
        #e1e1e1, 
        #5b5b5f, 
        #47648E, 
        #47648E, 
        darken(#47648E, 15%), 
        #01943F, 
        darken(#5b5b5f, 5%), 
        darken(#5b5b5f, 5%), 
        #5b5b5f,
        #01943F
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-ms/bg-login.jpg') center center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}
//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.ce {
    .rendercss(
        #e1e1e1, 
        #5b5b5f, 
        #079D56, 
        #079D56,
        #079D56,
        #FFC700, 
        lighten(#5b5b5f, 5%), 
        lighten(#5b5b5f, 5%), 
        #5b5b5f,
        #079D56
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-ms/bg-login.jpg') center center;
    @navbar-brand: 15px 5px;

    /*----------  Guia rápido - Em breve  ----------*/
    .rs-steps {
        .rs-steps-items {
            opacity: .1;
        }
        .rs-title {
            display: none;
        }
    }
}

//@color-darken
//@color-1 
//@color-2
//@color-3
//@color-4
//@navbar-bgcolor
//@footer-bgcolor
//@panel-heading-color

body.am {
    .rendercss(
       #e1e1e1, 
        #666, 
        #589c45, 
        #589c45, 
        darken(#589c45, 15%), 
        #95bd3a, 
        darken(#5b5b5f, 5%), 
        darken(#5b5b5f, 5%), 
        #5b5b5f,
        #ffc40d
    );

    /*----------  Variable Admin  ----------*/
    @bg-login: url('../dist/rs-ac/bg-login.jpg') top center;
    @navbar-brand: 15px 5px;
}