/*
    Este arquivo contém os estilos de layout que formam a estrutura do sistema, como:

    - Barra de cabeçalho
    - Barra de título
    - Ajustes para funcionamento do bootstrap com kendo-ui
    - Cores de fundo
    - Loaders (informação para o usuário de que algo está carregando)

______________________________________________________________________________________________
*/

/* 
    BOOTSTRAP + KENDO-UI - Inicio ---------------------------------------------
    reset everything to the default box model because of bootstrap 
*/

*,
:before,
:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* set a border-box model only to elements that need it */

.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container, .container-fluid, .row, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2,
.col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5,
.col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8,
.col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .form-control.k-widget {
        padding: 0;
    }


.fa.k-sprite,
.fa.k-sprite::before {
    font-size: 12px;
    line-height: 16px;
}

/*
    BARRAS DE ROLAGEM - Inicio -------------------------------------
*/


::-webkit-scrollbar {
    width: 7px;
    height:7px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #aaa;
    box-shadow: inset 0 0 6px #aaa;
    background-color: #f2f2f2;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
    -webkit-box-shadow: inset 0 0 6px #727272;
    box-shadow: inset 0 0 6px #727272;
}

    ::-webkit-scrollbar-thumb:window-inactive {
        background: #e9e9e9;
    }

body {
    scrollbar-track-color: #f2f2f2;
    scrollbar-shadow-color: #aaa;
    scrollbar-base-color:#727272;
}




/*
    LAYOUT - Inicio -------------------------------------------------
*/



html, body, .wi-full-content {
    width: 100%;
    height: 100%;
}

html, body {
    font-family: "Segoe UI", "Segoe", "SegoeUI-Regular-final", Calibri, Tahoma, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
}



iframe {
    border: none;
    background-color: #fff;
}

.wi-full-content {
    background-color: inherit;
}

.wi-full-height {
    height: 100%;
}

.wi-layout-basic {
    padding-top: 50px;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: inherit;
}

.wi-layout-offset-sm {
    padding-top: 32px;
}

.wi-layout-offset {
    padding-top: 50px;
}

.wi-iframe {
    height: 99.2%;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 36px;
}

@media all and (min-width:768px) {
    .wi-iframe {
        padding-top: 80px;
    }
}

.firstletter-upper:first-letter {
    text-transform: uppercase !important;
}

.wi-clickable {
    cursor: pointer;
}

.wi-nopadding {
    padding: 0 !important;
}

.text-app-blue {
    color: #007acc !important;
}

.text-purple {
    color: #5133ab !important;
}

.text-red1 {
    color: #ac193d !important;
}

.text-red2 {
    color: #dc572e !important;
}

.text-red3 {
    color: #ff0000 !important;
}

.text-orange1 {
    color: #fe8a00 !important;
}

.text-green1 {
    color: #00a600 !important;
}

.text-green2 {
    color: #078207 !important;
}

.text-green3 {
    color: #7fb900 !important;
}

.text-green4 {
    color: #008172 !important;
}

.text-blue1 {
    color: #2672ec !important;
}

.text-blue2 {
    color: #00afef !important;
}

.text-blue3 {
    color: #548bd4 !important;
}

.text-blue4 {
    color: #96afcf !important;
}

.text-blue5 {
    color: #5880b3 !important;
}

.text-blue6 {
    color: #004c80 !important;
}



.wi-bg-purple {
    background-color: #5133ab !important;
    color: #fff;
}

.wi-bg-red1 {
    background-color: #ac193d !important;
    color: #fff;
}

.wi-bg-red2 {
    background-color: #dc572e !important;
    color: #fff;
}

.wi-bg-red3 {
    background-color: #ff0000 !important;
    color: #fff;
}

.wi-bg-orange1 {
    background-color: #fe8a00 !important;
}

.wi-bg-green1 {
    background-color: #00a600 !important;
    color: #fff;
}

.wi-bg-green2 {
    background-color: #078207 !important;
    color: #fff;
}

.wi-bg-green3 {
    background-color: #7fb900 !important;
    color: #fff;
}

.wi-bg-green4 {
    background-color: #008172 !important;
    color: #fff;
}

.wi-bg-appblue {
    background-color: #007acc !important;
    color: #fff;
}

.wi-bg-blue1 {
    background-color: #2672ec !important;
    color: #fff;
}

.wi-bg-blue2 {
    background-color: #00afef !important;
    color: #fff;
}

.wi-bg-blue3 {
    background-color: #548bd4 !important;
    color: #fff;
}

.wi-bg-blue4 {
    background-color: #96afcf !important;
    color: #fff;
}

.wi-bg-blue5 {
    background-color: #5880b3 !important;
    color: #fff;
}

.wi-bg-blue6 {
    background-color: #004c80 !important;
    color: #fff;
}

.wi-bg-lighterblue {
    background-color: #C6D8F0 !important;
}

.wi-bg-gray {
    background-color: #d8d8d8 !important;
}

.wi-bg-gray1 {
    background-color: #e8e8e8 !important;
}

.wi-dev, .wi-dev:hover, .wi-dev:focus, .wi-dev:active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

#loading-dots {
    z-index: 10003;
    display: none;
    position: absolute;
    top: 28px;
    left: -100px;
}

.wi-rotate45 {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wi-rotate45minus {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}



.wi-vertical-center {
    display: table;
    padding: 0;
    height: 70%;
    width: 100%;
}

    .wi-vertical-center > div {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
    }

.col-centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}


/* 
    HEADER BAR - Inicio --------------------------------------------------------------
*/

.app-header {
    background-color: #007acc;
    color: #fff;
    min-height: 36px;
}

    .app-header a, .app-header a:focus, .app-header a:hover {
        color: #fff;
        text-decoration: none;
    }

    .app-header .app-header-title {
        font-size: 14px;
        padding-top: 3px;
        padding-right: 20px;
        vertical-align: middle;
    }

    .app-header .app-header-item-title {
        font-size: 14px;
        margin-top: -3px;
    }

    .app-header .app-header-v-separator {
        padding-right: 5px !important;
        padding-left: 5px !important;
        line-height: 30px;
    }

    .app-header .app-header-toolbar {
        margin-bottom: 0;
    }

        .app-header .app-header-toolbar > li {
            vertical-align: top;
        }

    .app-header .app-header-menu-bar {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #fff;
        margin-bottom: 4px;
    }

    .app-header .app-header-company {
        white-space: nowrap;
        width: 150px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: top;
    }

    .app-header .app-header-text,
    .app-header .app-header-click {
        padding-left: 13px;
        padding-right: 13px;
        height: 36px;
        line-height: 32px;
    }

    .app-header .app-header-click {
        cursor: pointer;
    }

        .app-header .app-header-click li {
            vertical-align: middle;
        }

        .app-header .app-header-click:hover,
        .app-header .active {
            background-color: #0E639C;
        }


.app-brand {
    width: 100px;
    height: 21px;
    margin-top: 7px;
    background-image: url(images/brand.png);
    background-repeat: no-repeat;
    padding: 0;
    vertical-align: middle;
}

.user-ctxmenu {
    display: none;
    top: 36px;
    z-index: 10030;
    height: 100%;
}

    .user-ctxmenu ul > li {
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f2f2f2;
        cursor: pointer;
        font-size: 14px;
    }

        .user-ctxmenu ul > li:hover,
        .user-ctxmenu ul > li:active,
        .user-ctxmenu ul > li:focus,
        .user-ctxmenu ul > li > a:active,
        .user-ctxmenu ul > li > a:focus {
            background-color: #f8f8f8;
        }

    .user-ctxmenu .fa {
        margin-right: 10px;
        color: #333;
    }

.user-img {
    height: 80px;
    width: 80px;
}

    .user-img > span {
        vertical-align: middle;
        line-height: 80px;
    }



/* 
    TITLE BAR - Inicio ------------------------------------------------------
*/

.app-titlebar {
    background-color: inherit;
}

    .app-titlebar .breadcrumb {
        background-color: transparent;
        padding: 0;
        margin: 10px 0;
        font-size: 14px;
        line-height: 1.1em;
    }

        .app-titlebar .breadcrumb li {
            padding: 0;
        }

    .app-titlebar .navbar-text {
        background-color: transparent;
        padding: 0;
        margin-left: 0;
        line-height: 1.1em;
        font-size: 18px;
    }

.app-search {
    width: 92%;
    margin-top: 5px;
    margin-bottom: 5px;
}

    .app-search input {
        color: #A5A5A5;
    }

@media all and (min-width:768px) {
    .app-titlebar .breadcrumb {
        font-size: 18px;
    }

    .app-search {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.app-dashboard-buttons {
    margin-top: 9px;
    padding-right: 0;
}




/* 
    LOADING & OVERLAYS - Inicio ---------------------------------------------------------------
*/

.wi-overlay {
    z-index: 10030;
    width: 100%;
    height: 100%;
    display: none;
    top: 36px;
    position: fixed;
    background-color: #fff;
}

.wi-transparency70 {
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.wi-loading {
    z-index: 10031;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute !important;
}

    .wi-loading > div {
        height: 100%;
    }

    .wi-loading table, .wi-loading td {
        height: 100%;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }



/*
    LIST-BLOCK - Inicio
*/


.wi-list-block > .row {
    border-bottom: 1px solid #c9c9c9;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 80px;
}

    .wi-list-block > .row:first-child {
        border-top: 1px solid #c9c9c9;
    }

    .wi-list-block > .row > div {
        min-height: 65px;
    }

@media all and (min-width:992px) {
    .wi-list-block > .row {
        border-bottom: none;
        padding-top: 7px;
        padding-bottom: 7px;
        min-height: 0;
    }

        .wi-list-block > .row:first-child {
            border-bottom: 1px solid #c9c9c9;
        }

        .wi-list-block > .row > div {
            min-height: 30px;
        }
}