/*
* CSS PADRÃO MANGACODE - DASHBOARD.
* Criado em : 05/06/2016, 14:41:37
* Autor     : Bernardo Corrêa
*/

/* *************************
******* FONT FAMILYS *******
************************** */
@font-face {font-family: san_francisco_ul; src: url(../_fonts/sf-ultralight.otf);}
@font-face {font-family: san_francisco_t; src: url(../_fonts/sf-thim.otf);}
@font-face {font-family: san_francisco_l; src: url(../_fonts/sf-light.otf);}
@font-face {font-family: san_francisco_r; src: url(../fonts/sf-regular.otf);}
@font-face {font-family: san_francisco_m; src: url(../_fonts/sf-medium.otf);}
@font-face {font-family: san_francisco_sb; src: url(../_fonts/sf-semibold.otf);}
@font-face {font-family: san_francisco_b; src: url(../_fonts/sf-bold.otf);}
@font-face {font-family: san_francisco_h; src: url(../_fonts/sf-heavy.otf);}
@font-face {font-family: san_francisco_bl; src: url(../_fonts/sf-black.otf);}

body, html {font-family: san_francisco_ul; overflow-x:hidden;}

/* *************************
******* FONT WEIGHTS *******
************************** */
.f-thim {font-family: san_francisco_ul;}
.f-elight {font-family: san_francisco_t;}
.f-light {font-family: san_francisco_l;}
.f-regular {font-family: san_francisco_r;}
.f-medio {font-family: san_francisco_m;}
.f-semibold {font-family: san_francisco_sb;}
.f-bold {font-family: san_francisco_b;}
.f-ebold {font-family: san_francisco_h;}
.f-ubold {font-family: san_francisco_bl;}

/* *************************
******* FONT COLORS *******
************************** */
.f-black {color: #454545;}
.f-gray {color: #555;}
.f-silver {color: #888;}
.f-white {color: #fff;}
.f-red {color: #c62828;}
.f-blue {color: #1565c0;}
.f-green {color: #388e3c;}
.f-yellow {color: #f5af3d;}
.f-orange {color: #f4511e;}

/* *************************
******* FONT SIZES *********
************************** */
.title-page {font-size: 27px}
.title-page-sec {font-size: 22px}
.subtitle-page {font-size: 18px}
.text-page {font-size: 14px}

/* *************************
******* BOX COLORS *********
************************** */
.box-black {background-color: #242424;}
.box-gray {background-color: #565656;}
.box-silver {background-color: #f4f4f4;}
.box-silver-d {background-color: #f0f0f0;}
.box-white {background-color: #fff;}
.box-red {background-color: #d9534f;}
.box-blue {background-color: #0275d8;}
.box-green {background-color: #5cb85c;}
.box-yellow {background-color: #f0ad4e;}
.box-orange {background-color: #f4511e;}

/* *************************
******* BTN'S STYLE ********
************************** */
.btn { /* OBJETO PRINCIPAL */
    cursor: pointer; 
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.05); 
    /*    -webkit-transition: 0.3s; transition: 0.3s;*/
    color: #fff !important;
    text-shadow:2px 2px 1px rgba(0,0,0,0.3);
    font-family: san_francisco_l;
    text-align: center;
}
.btn:hover {}

.btn-larg {font-size: 20px; padding: 11px 16px 13px 16px;}
.btn-medio {font-size: 15px; padding: 8px 12px 10px 12px;}
.btn-low {font-size: 12px; padding: 7px 9px 9px 9px;}

.btn-icon {font-size: 15px; padding: 8px 12px 10px 12px; width: 40px}

/* *************************
******* BTN'S COLORS *******
************************** */
.btn-black {background-color: #444;} .btn-black:hover {background-color:#222; }
.btn-green {background-color: #5cb85c;} .btn-green:hover {background-color:#3d9c3d; }
.btn-red {background-color: #d9534f;} .btn-red:hover {background-color:#dd241e; }
.btn-blue {background-color: #0275d8;} .btn-blue:hover {background-color:#0463b6; }
.btn-yellow {background-color: #f0ad4e;} .btn-yellow:hover {background-color:#f3991a; }
.btn-orange {background-color: #f4511e;} .btn-orange:hover {background-color:#d7481b; }
.btn-orange2 {background-color: #fff; color: #f4511e} .btn-orange2:hover {background-color:#f4511e; color: #fff}

/* *************************
******* FORM'S STYLES ******
************************** */
/* BOX'S CONTROLADORAS DE FORM */
.box-diagram1 {width: 100%; float: left; margin-bottom: 10px; position: relative}
.box-diagram2 {width: 49.4%; margin-right: 1%; float: left; margin-bottom: 10px; position: relative}
.box-diagram3 {width: 32.5%; margin-right: 1%; float: left; margin-bottom: 10px; position: relative}
.box-diagram4 {width: 23.9%; margin-right: 1%; float: left; margin-bottom: 10px; position: relative}

.small-titulo {font-size: 12px; margin-bottom: 3px; display: block; position: relative;} /* TÍTULO DE INPUT */
.small-titulo .box-title {position: absolute; display: none; z-index: 2; text-align: center; top: 25px; left: -10px; background-color: #222; padding: 10px; width: 300px;}
.small-titulo .box-title span {position: absolute; z-index: 2; top: -5px; left: 10px; background-color: #222; width: 10px; height: 10px; -webkit-transform: rotate(45deg)}
.small-titulo .box-title p {color: #f0f0f0; font-size: 11px; font-family: san_francisco_m}
.small-titulo:hover .box-title {display: block !important;}
.small-titulo.help:hover .box-title {display: block !important;}

.form-icon {width: 100%; padding: 12px 12px 12px 45px; color: #444; border: 1px solid rgba(0,0,0,0.1); border-bottom: 3px solid rgba(0,0,0,0.1); font-family: san_francisco_t; background-repeat: no-repeat; background-position: left 10px center; background-size: 20px;} /* OBJETO PRINCIPAL */
.form {width: 100%; padding: 12px; color: #444; border: 1px solid rgba(0,0,0,0.1); border-bottom: 3px solid rgba(0,0,0,0.1); font-family: san_francisco_t;} /* OBJETO PRINCIPAL */
.input-form-larg {font-size: 20px; height: 50px}
.input-form-medio {font-size: 15px; height: 45px}
.input-form-low {font-size: 12px; height: 30px}

.box-form {position: relative; width: 100%; float: left}
.box-form .input-form-medio {padding-right: 60px;}
.box-form .btn {position: absolute; right: 0; top: 0;}
.box-form .btn-icon {height: 45px; width: 50px}

.area-form-larg {font-size: 20px; height: 120px}
.area-form-medio {font-size: 15px; height: 100px}
.area-form-low {font-size: 12px; height: 80px}

.campo-up { cursor:pointer; display:block; opacity:0; position:absolute;}
.campo-up-fake { background:url(../_images/img_sl.png) no-repeat center right; float: left;}

.email {background-image: url(../_images/icons/email.png); background-color: #f5f5f5}
.pass {background-image: url(../_images/icons/pass.png); background-color: #f5f5f5}

/* *************************
***** LOGIN DASHBOARD ******
************************** */
.wall-login {background-color: #6d2323; background-image: linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,.8))}
.content-login {
    width: 380px;
    position: absolute; 
    margin-left: -190px;
    left: 50%;
    top: 50%;
    margin-top: -215px;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(0,0,0,.1);
    padding: 80px 40px
}
.content-login.register {margin-top: -270px;}
.main-login {width: 100%; height: 100%; position: absolute}
.content-login header .logo {width: 70%; margin: 0 auto; margin-bottom: 30px;}
.content-login main {}
.content-login main .btn-larg {width: 100%; margin-top: 10px; font-size: 16px; background-color: rgba(255,255,255,.1); text-transform: uppercase}
.content-login main .btn-larg:hover {width: 100%; margin-top: 10px; background-color: rgba(255,255,255,.15);}
.content-login main .input-form-medio {background-color: rgba(0,0,0,.1); color: rgba(255,255,255,.5);}
.content-login main .input-form-medio:focus {background-color: rgba(0,0,0,.2)}
.content-login footer {width: 100%;}
.content-login footer a {font-size: 13px; color: rgba(255,255,255,.5)}
.content-login footer a:hover {color: #fff;}

.content-login main .input-form-medio::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(255,255,255,.2);
}
.content-login main .input-form-medio::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255,255,255,.2);
}
.content-login main .input-form-medio:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255,255,255,.2);
}
.content-login main .input-form-medio:-moz-placeholder { /* Firefox 18- */
    color: rgba(255,255,255,.2);
}

.main-login-student {position: relative; width: 100%; height: 100%; height: calc(100vh);}
.main-login-student .wallpaper {height: 100%; height: calc(100vh); margin-right: 400px; background: url("../_images/wall2.jpg") no-repeat center center; background-size: cover;}
.main-login-student .content-login-student {width: 400px; height: 100%; padding: 40px; overflow: hidden; overflow-y: auto; position: fixed; top: 0; right: 0;}
.main-login-student .content-login-student h4 {font-size: 23px;}
.main-login-student .content-login-student .logo {width: 70%; margin: 0 auto; margin-bottom: 30px;}
.main-login-student .content-login-student .btn-larg {width: 100%; margin-top: 10px; font-size: 16px; text-transform: uppercase}
.main-login-student .content-login-student .input-form-medio {border: none; border-bottom: 2px solid #f0f0f0}
.main-login-student .content-login-student .input-form-medio:focus {border-bottom: 2px solid #444}
.main-login-student .content-login-student footer {width: 100%;}
.main-login-student .content-login-student footer a {font-size: 13px; color: #999}
.main-login-student .content-login-student footer a:hover {color: #555;}

/* *************************
********* DASHBOARD ********
************************** */

/* NAV DASHBOARD */
.nav-dash {margin-top: 4px}
.nav-dash li {list-style: none; float: left; margin-right: 4px; font-size: 14px}
.nav-dash li a {color: #454545}
.nav-dash li a:hover {color: #f4511e}

/* TABS */
.tabs {display: none; overflow: auto}
.history-downloads {display: block !important;}
#tab1 {display: block;}

/* CHART CONTAINER */
.chart-container {
    position: relative;
    margin: auto;
    height: 50vh;
    width: 93vw;
}

/* MENU DASHBOARD */
.nav-menu-fix {width: 170px; position: absolute; z-index: 2; left: 0; top: 0; height: 100%; min-height: 100%;}
.nav-menu-fix ul li{list-style: none; width: 100%; float: left; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,0.1); border-left: 3px solid rgba(0,0,0,0); font-family: san_francisco_ul}
.nav-menu-fix ul li a{color: #fff; width: 100%; float: left; padding: 11px;}
.nav-menu-fix ul li:hover {background-color: rgba(0,0,0,0.2); border-left: 3px solid #f4511e;}

/* SUBMENU DASHBOARD */
.nav-menu-fix ul li ul {position: absolute; float: left; left: 100%; width: 100%; z-index: 6; background-color: #23282b; display: none}
.nav-menu-fix ul li:hover ul {display: block}

.icon-notif {position: absolute; right: 8px; margin-top: 10px; padding: 3px 7px; font-size: 11px}
.icon-notif2 { padding: 3px 7px; font-size: 11px; margin-left: 10px; text-shadow:none;}

/* PROFILE MENU */
.nav-menu-fix .box-profile {width: 100%; float: left; padding: 8px 10px; background-color: rgba(0,0,0,0.2); border-bottom: 1px solid #f4511e}
.nav-menu-fix .profile-photo {width: 23%; padding: 2px}
.nav-menu-fix .profile-txt {width: 70%;}
.nav-menu-fix .profile-txt h2 {font-size: 13px; margin-bottom: 3px}
.nav-menu-fix .profile-txt p {font-size: 10px;}
.nav-menu-fix .profile-txt a {color: #fff !important;}
.nav-menu-fix .profile-txt a:hover {color: #f4511e !important;}

/* HEADER DASHBOARD */
.header-fix {min-height: 52px; width: 100%; float: left}
.header-fix .menu-anchor {font-size: 20px; float: left; cursor: pointer; padding: 13px 17px;}

.header-fix .btn-options {float: right;}
.header-fix .options-anchor {font-size: 20px; float: left; cursor: pointer; padding: 13px 17px}
.header-fix h1 {font-size: 16px; margin: 15px 0 0 15px}

/* CONTENT DASHBOARD */
.dashboard-fix {margin-left: 170px;}
.dashboard-main {width: 100%; height: 100%}
.dashboard {width: 100%;}

/* SLIDE MENU */
.nav-menu-fix {-webkit-transition: all .70s ease; -moz-transition: all .70s ease; -ms-transition: all .70s ease; transition: all .70s ease;}
.menu-active .nav-menu-fix {-webkit-transform: translateX(-170px); -moz-transform: translateX(-170px); -ms-transform: translateX(-170px); transform: translateX(-170px);}

.dashboard-fix {-webkit-transition: all .70s ease; -moz-transition: all .70s ease; -ms-transition: all .70s ease; transition: all .70s ease;}
.menu-active .dashboard-fix {margin-left: 0px;}
/* SLIDE MENU */

.form_load {width: 30px; height: 30px; background: url(../_images/icons/loading.gif) no-repeat center center; background-size: 100%;}

.bar-loading {border: 2px dotted rgba(0,0,0,0.1); margin: 15px 0 0 0; display: none;}
.bar-loading .bar {padding: 8px; width: 0%; max-width: 100%; font-size: 17px; background-image: linear-gradient(to right, transparent, rgba(0,0,0,.1));}

.box-options {margin-top: -30px}

.content-post {float: left; width: 100%;}
.content-post article {margin-bottom: 10px; position: relative;}
.content-post article .post-img {max-width: 290px}
.content-post article .post-txt {margin-left: 290px;}
.content-post article .post-txt header {min-height: 214px;}
.content-post article .post-txt header h1 {font-size: 26px}
.content-post article .post-txt header .cate {font-size: 13px; margin-bottom: 8px; display: inline-block; margin-right: 10px}
.content-post article .post-txt header .date {font-size: 13px; margin-top: 9px}
.content-post article .post-txt header a {color: #444;}
.content-post article .post-txt header a:hover {color:#f4511e}

.content-post2 {}
.content-post2 article {margin-bottom: 20px; position: relative}
.content-post2 article .post-img {max-width: 140px}
.content-post2 article .post-txt {margin-left: 140px}
.content-post2 article .post-txt header {padding: 10px; min-height: 105px}
.content-post2 article .post-txt header h1 {font-size: 15px}
.content-post2 article .post-txt header .cate {font-size: 10px; margin-bottom: 8px; display: inline-block; margin-right: 10px}
.content-post2 article .post-txt header .date {font-size: 10px; margin-top: 9px}
.content-post2 article .post-txt header a {color: #444;}
.content-post2 article .post-txt header a:hover {color:#f4511e}

.content-serv {}
.content-serv article {position: relative}
.content-serv article header h1 {font-size: 22px}
.content-serv article header .cate {font-size: 12px; margin-bottom: 8px; display: inline-block; margin-right: 10px}
.content-serv article header .date {font-size: 12px; margin-top: 9px}
.content-serv article header a {color: #444;}
.content-serv article header a:hover {color:#f4511e}

.content-gal {}
.content-gal article {width: 19.2%; margin: 0.4%; position: relative; overflow: hidden}
.content-gal article header {position: absolute; top: 0; right: 0; padding: 7px; transform: translateY(-60px);}
.content-gal article:hover header {transform: translateY(0px);}

.content-create-cate header h2 {font-size: 30px; margin-bottom: 5px;}
.content-create-cate header p {font-size: 19px;}

.content-cate {}
.content-cate .box-parent {margin-bottom: 15px}
.content-cate .box-parent header h1 {font-size: 22px; margin-bottom: 5px}
.content-cate .box-parent header .date {font-size: 12px; display: inline-block; margin-right: 12px}

.content-cate .box-cate {margin: 0 0.8% 15px 0.8%; width: 48.2%; border: 1px solid rgba(0,0,0,0.1); border-left: 4px solid #f4511e; border-bottom: 4px solid rgba(0,0,0,0.06)}
.content-cate .box-cate header h1 {font-size: 19px; margin-bottom: 0px}
.content-cate .box-cate header .date {font-size: 12px;}

.content-banners {}
.content-banners article > div header {position: absolute; bottom: 7px; right: 7px; padding: 8px; background-color: rgba(0,0,0,.8)}
.content-banners article > div .icon {position: absolute; top: 10px; left: 10px; font-size: 30px; color: #555; width: 40px; height: 40px; background-color: #fff; text-align: center; box-shadow: 1px 1px 2px 0 rgba(0,0,0,.3)}

.nav-tab {display: block; border-bottom: 1px solid rgba(0,0,0,.1)}
.nav-tab ul li {display: inline-block; font-family: san_francisco_m; font-size: 17px; margin-right: 5px;}
.nav-tab ul li a {display: block; padding: 8px 12px; color: #444; border: 1px solid rgba(0,0,0,.1); border-bottom: 0; border-top-left-radius: 5px; border-top-right-radius: 5px}
.nav-tab ul li a:hover {background-color: #fff}
.nav-tab ul .current a {background-color: #d9534f; color:#fff; border: 1px solid #d9534f; border-bottom: 0; border-top-left-radius: 5px; border-top-right-radius: 5px}
.nav-tab ul .current a:hover {background-color: #d9534f; color:#fff;}

.nav-tab.nostyle {border: 0;}
.nav-tab.nostyle a:hover {background-color: initial}
.nav-tab.nostyle .current a {background-color: #333; border: 1px solid transparent}
.nav-tab.nostyle .current a:hover {background-color: #333; border: 1px solid transparent}

.content-numbers {}
.content-numbers article .icon {position: absolute; font-size: 55px; color: rgba(0,0,0,0.2); right: 15px; top: 20px}
.content-numbers article header {border:1px solid rgba(0,0,0,0.1); border-bottom:4px solid rgba(0,0,0,0.2); position: relative}
.content-numbers article header h1 {font-size: 19px; margin-bottom: 3px; text-shadow:2px 2px 0px rgba(0,0,0,0.2);}
.content-numbers article header p {font-size: 35px; text-shadow:4px 4px 0px rgba(0,0,0,0.2)}
.chart {height: 300px;}

.content-status-agent{}
.content-status-agent article {margin-bottom: 10px}
.content-status-agent article:last-child {margin-bottom: 0px}
.content-status-agent article .status-box {height: 35px; width: 100%; background-color: #f6f6f6}
.content-status-agent article .status-box .status-bar {padding: 10px; font-size: 13px; margin-top: 3px;}
.content-status-agent .chrome {background-color: #eebaba}
.content-status-agent .firefox {background-color: #f5d0bc}
.content-status-agent .ie {background-color: #bdd5ef}
.content-status-agent .other {background-color: #e0e0e0}

.on-smart {display: none}
.on-desktop {visibility: visible}   

/* PAGINATOR STYLE */
.paginator { width: 100%; float: left; text-align: center; margin-top: 20px}
.paginator li {list-style: none; font-size: 14px; margin-right: 5px; display: inline-block;}
.paginator a {color: #555; background-color: #fff; padding: 8px 13px; border: 1px solid rgba(0,0,0,0.2); display: block; border-radius: 5px}
.paginator a:hover {background-color: #f0f0f0;}
.paginator .active {color: #fff; background-color: #c62828; padding: 8px 13px; border: 1px solid rgba(0,0,0,0.2); display: block; border-radius: 5px}

/* RELATÓRIOS E-MAIL */
.content-relatorio {width: 1200px; margin: 0 auto; overflow: auto;}
canvas {max-width: 100%}

.frame_absolute, .frame_absolute1 {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.2); border-radius: 5px;}

.txt p {text-align: justify; font-size: 17px; margin-bottom: 20px; line-height: 22px; color: #555; font-family: san_francisco_l;}
.txt p:last-child {margin-bottom: 0;}

@media screen and (max-width: 1050px) {
    .box25, .box33, .box30 {width: 50%}
    .content-post article .post-img {max-width: 250px}
    .content-post article .post-txt {margin-left: 250px}
    .content-post article .post-txt header {min-height: 185px}
    .content-post article .post-txt header h1 {font-size: 17px}
    .content-post article .post-txt header .cate {font-size: 10px}
    .table .tb-field {font-size: 13px; padding: 10px}
    .table .tb-field2 {font-size: 11px; padding: 7px}
    
    .content-sool-manager, .content-sool-options {width: 100%;}
}

@media screen and (max-width: 850px) {
    .dashboard {min-height: 600px}
    .box35, .box50, .box60, .box65, .box70, .box75, .box100 {width: 100%}
    /* BOX'S CONTROLADORAS DE FORM */
    .box-diagram3, .box-diagram4 {width: 100%; margin-right: 0%;}
    /* SLIDE MENU */
    .nav-menu-fix {-webkit-transform: translateX(-170px); -moz-transform: translateX(-170px); -ms-transform: translateX(-170px); transform: translateX(-170px);}
    .dashboard-fix {margin-left: 0px;}
    .menu-active .dashboard-fix {-webkit-transform: translateX(170px); -moz-transform: translateX(170px); -ms-transform: translateX(170px); transform: translateX(170px);}
    /* SLIDE MENU */
    .content-post article .post-img {max-width: 190px}
    .content-post article .post-txt {margin-left: 190px}
    .content-post article .post-txt header h1 {font-size: 15px}
    .content-post article .post-txt header .cate {font-size: 10px}

    .content-create-cate header h2 {font-size: 20px; margin-bottom: 5px;}
    .content-create-cate header p {font-size: 14px;}
    .padding-total-normal {padding: 20px}
}

@media screen and (max-width: 550px) {
    .on-smart {visibility: visible}
    .on-desktop {display: none;}

    .padding-total-low {padding: 14px}
    .btn-icon {font-size: 12px; padding: 7px; width: 30px}

    .table .tb-field {font-size: 11px; padding: 7px}
    .table .tb-field2 {font-size: 10px; padding: 5px}

    .nav-tab .btn-medio {font-size: 11px; padding: 5px}

    .title-page {font-size: 22px; text-align: center}
    .title-page-sec {font-size: 22px; text-align: center}
    .subtitle-page {font-size: 15px; text-align: center}

    .box-options {width: 100%; margin-top: 10px; text-align: center}
    .nav-dash {text-align: center}
    .nav-dash li {float: none; display: inline-block}

    .box {padding: 5px}
    .box25, .box33, .box30 {width: 100%}
    /* BOX'S CONTROLADORAS DE FORM */
    .box-diagram2 {width: 100%; margin-right: 0%;}

    .content-post article .post-img {max-width: 100%}
    .content-post article .post-txt {margin-left: 0}
    .content-post article .post-txt header {min-height: 0px}
    .content-post article .post-txt header h1 {font-size: 15px}
    .content-post article .post-txt header .cate {font-size: 10px}
    .content-post2 article .post-img {max-width: 100%}
    .content-post2 article .post-txt {margin-left: 0}
    .content-post2 article .post-txt header h1 {font-size: 15px}

    .content-cate .box-parent header {text-align: center}
    .content-cate .box-cate {margin: 0 0% 10px 0%; width: 100%;}

    /* CONTENT LOGIN */
    .content-login {width: 90%; margin-left: auto; left: 0; margin-right: auto; right: 0; top: 20px; margin-top: 0;}
    .content-login.register {margin-top: 0;}
    .content-login footer, .content-login main {padding: 20px}
    .content-login footer .btn-medio {width: 100%; text-align: center; font-size: 13px; margin-bottom: 10px }
    .content-login footer .btn-medio:last-child {margin-bottom: 0px }

}