@charset "utf-8";
/* 
	Project: xFramework UI
	URL: http://www.xneo.com.br
	Version: 1.1
	Date: 2015-07-09
	Author: X-NEO Soluções para e-commerce
*/

/* Base */
html, body { min-height: 100%; }
body { background-color: #242429; margin: 0; }

a { color: #2282F0; text-decoration: underline; }
a:hover { text-decoration: none; }
a.thumb { text-decoration: none; }

/* Border-boxing */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Clearfix */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.controle { clear: both; font-size: 0; height: 0; line-height: 0; }

/* Grids */
.gs-example { border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; color: #333; margin-bottom: 15px; padding: 5px 15px; }

/* Floating */
.fl { float: left !important; }
.fr { float: right !important; }

/* Show/Hide */
.show { display: block !important; }
.hide { display: none !important; }

/* Images */
.img-resp { height: auto; max-width: 100%; }
.img-rounded, .img-thumb { display: inline-block; margin: 5px; vertical-align: middle; }
.img-rounded { border-radius: 4px; }
.img-thumb { background-color: #fff; border: 1px solid #ddd; border-radius: 2px; padding: 4px; }

/* Forms */
label { color: rgba(0,0,0,0.7); display: block; font: bold 11px/20px Arial, Helvetica, sans-serif; margin: 0 0 15px; }
label span { display: block; padding: 0 5px 3px; }
label.lb-nm { margin: 0; }

.fields { background: #fff; border: 1px solid #bbb; box-sizing: border-box; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); color: rgba(0,0,0,0.75); display: block; font: 12px/16px Arial, Helvetica, sans-serif; outline: none; }
.fields:focus, .fields:hover { border: 1px solid #888; box-shadow: 0 0 8px rgba(0,0,0,0.1); }

.text { height: 48px; margin: 0; padding: 0 10px; width: 100%; max-width: 100%; }
.textarea { height: 120px; margin: 0; padding: 12px 10px; width: 100%; max-width: 100%; }
.select { height: 48px; margin: 0; padding: 10px; width: 100%; max-width: 100%; }
.select-multiple { height: 120px; margin: 0; padding: 6px; width: 100%; max-width: 100%; }
.select option { padding: 2px; }
.radio, .checkbox { cursor: pointer; margin: 0 0 5px !important; vertical-align: middle; }
.radio-inline, .checkbox-inline { display: inline-block !important; padding: 0 30px 0 0 }
.radio input, .checkbox input { float: left; margin: 3px 10px 0 0; }

.input-group { border-collapse: separate; display: table; position: relative; color: rgba(0,0,0,0.65); font: bold 12px Arial, Helvetica, sans-serif; margin: 0 0 15px; }
td .input-group { margin: 0; }
.input-group span { background: #f0f0f0; border: 1px solid #bbb; border-right: 0; border-radius: 3px 0 0 3px; padding: 10px; text-align: center; display: table-cell; vertical-align: middle; white-space: nowrap; width: 1%; }
.input-group .fields { display: table-cell; border-radius: 0 3px 3px 0; }
.ig-right span { border: 1px solid #bbb; border-left: 0; border-radius: 0 3px 3px 0; }
.ig-right .fields { border-radius: 3px 0 0 3px; }

.divider { border-bottom: 1px solid #eee; height: 0; margin: 20px 0; overflow: hidden; }

/* Full-width */
.full-width { width: 100%; }

/* Buttons */
.buttons { display: block; padding: 30px 60px 60px; text-align: right; }
.buttons-int { border-top: 1px solid #eee; display: block; padding: 15px 0 0; }
.btn { border: 0; border-radius: 3px; color: #fff; cursor: pointer; display: inline-block; font: 700 11px/44px 'Open Sans', Helvetica, Arial, sans-serif; height: 46px; margin: 2.5px 1.5px; padding: 0 23px; text-decoration: none !important; text-transform: uppercase; vertical-align: middle; outline: none; white-space: nowrap; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-appearance: none; }
.btn:hover { transition: all 0.5s ease; }

/* Labels */
.lbl { border-radius: 2px; color: #fff; font: bold 11px/2em Arial, Helvetica, sans-serif; display: inline-block; padding: 0 10px; text-align: center; text-shadow: 1px 1px 0px rgba(0,0,0,0.2); text-decoration: none; vertical-align: middle; }

/* Badges */
.bdg { background-color: #999; border-radius: 10px; display: inline-block; color: #fff; font-size: 1em; font-weight: bold; line-height: 1; padding: 3px 7px; min-width: 10px; text-align: center; white-space: nowrap; vertical-align: baseline; }
.bdg:empty { display:none; }

/* Progress Bar */
.progress { background: #eee; border-radius: 3px; box-shadow: inset 0 2px 1px rgba(0,0,0,0.05); height: 28px; margin: 20px 0; }
.progress-bar { border-radius: 3px; height: 28px; }
.progress-bar span { color: #fff; display: inline-block; font: 400 0.725em/28px 'Open Sans', Arial, Helvetica, sans-serif; padding: 0 10px; text-shadow: 1px 1px 0px rgba(0,0,0,0.2); }
.progress-bar span:empty { display: none; }

/* UI Colors */
.c-default { background: #fafafa; border: 1px solid #ddd; color: #484848; }
.c-default:hover, .c-default:focus { background: #eee; }
.c-primary { background: #2282F0; }
.c-primary:hover, .c-primary:focus { background: #1771d8; }
.c-success { background: #61b261; }
.c-success:hover, .c-success:focus { background: #58a558; }
.c-info { background: #428bca; }
.c-info:hover, .c-info:focus { background: #3f7fb7; }
.c-alert { background: #f0b94e; }
.c-alert:hover, .c-alert:focus { background: #d9a43c; }
.c-error { background: #d9534f; }
.c-error:hover, .c-error:focus { background: #cf4a46; }
.c-black { background: #353535; }
.c-black:hover, .c-black:focus { background: #252525; }

.ct-primary { color: #2282F0; }

/* Charts */
.canvas { max-width: 100% !important; height: auto !important; margin: 20px 0; }

/* Examples */
.example { background: #fff; border: 1px solid #ddd; border-bottom: 0; border-radius: 2px 2px 0 0; margin: 0; padding: 45px 15px 15px; position: relative; }
.example:after { content: "Exemplo"; position: absolute; top: 15px; left: 15px; font-size: 12px; font-weight: bold; color: #bbb; text-transform: uppercase; letter-spacing: 1px; }
code { color: #484848; font: 400 0.8em/2em Menlo, Monaco, Consolas, "Courier New", monospace; margin: 0; padding: 0; }
.code { background: #f5f5f5; border: 1px solid #ddd; border-radius: 0 0 2px 2px; margin: 0; padding: 15px; }

.img-example { border-bottom: 1px solid #ddd; border-radius: 2px; }
.img-example:after { content: "Arquivos"; }
.img-example span.w-img { float: left; position: relative; }
.img-example span.w-img .options { position: absolute; bottom: 8px; right: 8px; background-color: #fff; border-radius: 2px; padding: 5px; text-align: center; }

.highlight-first-example > a:first-of-type img { box-shadow: 0 0 10px rgba(0,0,0,0.35); !important; }

/* Panels */
.panel { background-color: #fff; border: 1px solid #eee; border-radius: 2px; box-shadow: 0 1px 0px rgba(0,0,0,0.05); margin: 0 0 20px; }
.panel-heading { background-color: #f5f5f5; border-bottom: 1px solid #eee; border-radius: 2px 2px 0 0; padding: 10px 25px; }
.panel-heading p { color: #484848; font: 700 0.725em/1em 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif; }
.panel-heading input { width: 200px; border: 1px solid #ccc; height: 30px; line-height: 20px; margin: 4px 0 0; padding: 5px; border-radius: 2px; float:right; color: #484848; font: 11px/20px Arial, Helvetica, sans-serif; }
.panel-body { padding: 15px 25px; }

/* Tables */
table, tr, th, td { border: 0; border-collapse: collapse; }
table { background-color: #fff; margin: 0; padding: 0; width: 100%; }
table td input { vertical-align: middle; }
table caption { background: #242429; border: 1px solid #1b1b1e; border-bottom: 0; border-radius: 2px 2px 0 0; color: #bbb; font: 700 0.7em/2em 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif; padding: 15px; text-align: left; text-transform: uppercase; }
table th { background: #fafafa; border: 1px solid #eee; border-bottom: 1px solid #ddd; color: rgba(0,0,0,0.5); font: bold 11px/2em Arial, Helvetica, sans-serif; padding: 12px; text-align: left; text-transform: uppercase; vertical-align: middle; }
table td { color: #585858; font: 400 12px/26px Arial, Helvetica, sans-serif; padding: 8px 12px; vertical-align: middle; }

.tbl-list tr:nth-child(even) { background-color: #fafafa; }
.tbl-list tr:hover td { background-color: rgba(0,0,0,0.03); }
.tbl-list tfoot tr td { background: none !important; }
.tbl-list td { border-bottom: 1px solid #eee; }

.tbl-boxie { border: 0px solid #eee; }
.tbl-boxie caption { background: #f5f5f5; border: 1px solid #eee; color: #484848; }
.tbl-boxie td { border: 1px solid #eee; border-top: 0; padding: 15px; }

.tbl-img { background: #fff; border: 1px solid #ddd; display: inline-block; height: 34px; margin: 1px 8px 1px 0; width: 34px; vertical-align: middle; }
.tbl-img img { display: block; width: 100%; height: 100%; cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: zoom-in; }
.opt { color: #484848; display: inline-block; font-weight: 700; margin: 0 5px; }

/* Pagination */
.paginador { font: bold 12px/40px Arial, Helvetica, sans-serif; padding: 15px 0; text-align: center; }
.paginador a { background: #fafafa; border: 1px solid #ddd; display: inline-block;text-align: center; text-decoration: none; height: 40px; width: 40px; }
.paginador a:first-child { border: 1px solid #ddd; border-radius: 2px 0 0 2px; }
.paginador a:last-child { border-radius: 0 2px 2px 0; }
.paginador a:hover { background: #eee; }
.paginador a.active { background: #eee; color: #888; }

/* Modals */
.modal-dialog { background: #f00; border-radius: 3px; background: #fff; overflow: hidden; position: relative }
.modal-heading { background-color: #f5f5f5; border-bottom: 1px solid #eee; border-radius: 3px 3px 0 0; padding: 10px 25px; position: fixed; top: 0; left: 0; width: 100%; }
.modal-body { padding: 80px 25px 15px; }
.close-btn { color: #888; }
.close-btn:hover { color: #484848; transition: all 0.5s ease; }

/* Modals */
.fmodal-dialog { background: #f00; border-radius: 3px; background: #fff; overflow: hidden; position: relative }
.fmodal-heading { background-color: #f5f5f5; border-bottom: 1px solid #eee; border-radius: 3px 3px 0 0; padding: 10px 25px; position: absolute; top: 0; left: 0; width: 100%; }
.fmodal-body { padding: 80px 25px 15px; }


/* Messages */
.message { border-radius: 2px; color: #fff; font: bold 13px Arial, Helvetica, sans-serif; margin: 10px 0 20px; padding: 20px; text-shadow: 1px 1px 0px rgba(0,0,0,0.15); }

/* Tooltips */
a[data-tooltip] { cursor: pointer; position: relative; text-decoration: none; border-bottom: solid 1px; }
a[data-tooltip]:before { content: ""; border-top: 6px solid #383838; border-left: 6px solid transparent; border-right:6px solid transparent; top: -8px; left: 5px; position: absolute; visibility: hidden; }
a[data-tooltip]:after { content: attr(data-tooltip); position: absolute; color: #fff; top: -40px; left: -20px; background: #383838; padding: 6px 10px; border-radius: 3px; visibility: hidden; white-space: nowrap; }
a[data-tooltip]:hover:before, a[data-tooltip]:hover:after { visibility: visible; -webkit-transition: visibility 0s linear .3s; -moz-transition: visibility 0s linear .3s; -o-transition: visibility 0s linear .3s; transition: visibility 0s linear .3s;  z-index: 1000; }

/* Typography */
h1 { color: #383838; font: 300 2.5em 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0; padding: 0; }
h2 { color: #333; font: 400 2em 'Roboto' ,'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0.5em 0; padding: 0; }
h3 { color: rgba(0,0,0,0.75); font: 400 1.75em 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0.5em 0; padding: 0; }
h4 { color: #aaa; font: 300 1.5em 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0; padding: 0; }
h5 { color: #333; font: 400 1.25em 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0.5em 0; padding: 0; }
h6 { color: #333; font: 400 1em 'Open Sans', Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0.5em 0; padding: 0; }

p { color: rgba(0,0,0,0.65); font: 0.9em/1.8em Arial, 'Open Sans', Helvetica, Arial, sans-serif; margin: 1em 0; padding: 0; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-norm { text-transform: none; }
.text-upp { text-transform: uppercase; }

/* Text: Dialogs */
p.p-small-title { font-size: 12px !important; padding: 0 !important; }
p.p-small { font-size: 12px !important; padding: 0 20px !important; }
p.p-small strong { display: inline-block; min-width: 150px; }

/* Grid 1200px */
.container-16, .container-12 { margin: 0 auto; width: 1200px; }
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 { display: inline; float: left; margin-left: 10px; margin-right: 10px; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
.beta { margin-left: 0; margin-right: 0; }
.container-16 .grid-1 { width: 55px; }
.container-16 .grid-2 { width: 130px; }
.container-16 .grid-3 { width: 205px; }
.container-16 .grid-4 { width: 280px; }
.container-16 .grid-5 { width: 355px; }
.container-16 .grid-6 { width: 430px; }
.container-16 .grid-7 { width: 505px; }
.container-16 .grid-8 { width: 580px; }
.container-16 .grid-9 { width: 655px; }
.container-16 .grid-10 { width: 730px; }
.container-16 .grid-11 { width: 805px; }
.container-16 .grid-12 { width: 880px; }
.container-16 .grid-13 { width: 955px; }
.container-16 .grid-14 { width: 1030px; }
.container-16 .grid-15 { width: 1105px; }
.container-16 .grid-16 { width: 1180px; }
.container-12 .grid-1 { width: 80px; }
.container-12 .grid-2 { width: 180px; }
.container-12 .grid-3 { width: 280px; }
.container-12 .grid-4 { width: 380px; }
.container-12 .grid-5 { width: 480px; }
.container-12 .grid-6 { width: 580px; }
.container-12 .grid-7 { width: 680px; }
.container-12 .grid-8 { width: 780px; }
.container-12 .grid-9 { width: 880px; }
.container-12 .grid-10 { width: 980px; }
.container-12 .grid-11 { width: 1080px; }
.container-12 .grid-12 { width: 1180px; }

/* Grid 960px */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.container-16, .container-12 { width: 960px; }
	.container-16 .grid-1 { width: 40px; }
	.container-16 .grid-2 { width: 100px; }
	.container-16 .grid-3 { width: 160px; }
	.container-16 .grid-4 { width: 220px; }
	.container-16 .grid-5 { width: 280px; }
	.container-16 .grid-6 { width: 340px; }
	.container-16 .grid-7 { width: 400px; }
	.container-16 .grid-8 { width: 460px; }
	.container-16 .grid-9 { width: 520px; }
	.container-16 .grid-10 { width: 580px; }
	.container-16 .grid-11 { width: 640px; }
	.container-16 .grid-12 { width: 700px; }
	.container-16 .grid-13 { width: 760px; }
	.container-16 .grid-14 { width: 820px; }
	.container-16 .grid-15 { width: 880px; }
	.container-16 .grid-16 { width: 940px; }
	.container-12 .grid-1 { width: 60px; }
	.container-12 .grid-2 { width: 140px; }
	.container-12 .grid-3 { width: 220px; }
	.container-12 .grid-4 { width: 300px; }
	.container-12 .grid-5 { width: 380px; }
	.container-12 .grid-6 { width: 460px; }
	.container-12 .grid-7 { width: 540px; }
	.container-12 .grid-8 { width: 620px; }
	.container-12 .grid-9 { width: 700px; }
	.container-12 .grid-10 { width: 780px; }
	.container-12 .grid-11 { width: 860px; }
	.container-12 .grid-12 { width: 940px; }
}
	
/* Grid 720px */
@media only screen and (min-width: 720px) and (max-width: 959px) {
	.container-16, .container-12 { width: 720px; }
	.container-16 .grid-1 { width: 25px; }
	.container-16 .grid-2 { width: 70px; }
	.container-16 .grid-3 { width: 115px; }
	.container-16 .grid-4 { width: 160px; }
	.container-16 .grid-5 { width: 205px; }
	.container-16 .grid-6 { width: 250px; }
	.container-16 .grid-7 { width: 295px; }
	.container-16 .grid-8 { width: 340px; }
	.container-16 .grid-9 { width: 385px; }
	.container-16 .grid-10 { width: 430px; }
	.container-16 .grid-11 { width: 475px; }
	.container-16 .grid-12 { width: 520px; }
	.container-16 .grid-13 { width: 565px; }
	.container-16 .grid-14 { width: 610px; }
	.container-16 .grid-15 { width: 655px; }
	.container-16 .grid-16 { width: 700px; }
	.container-12 .grid-1 { width: 40px; }
	.container-12 .grid-2 { width: 100px; }
	.container-12 .grid-3 { width: 160px; }
	.container-12 .grid-4 { width: 220px; }
	.container-12 .grid-5 { width: 280px; }
	.container-12 .grid-6 { width: 340px; }
	.container-12 .grid-7 { width: 400px; }
	.container-12 .grid-8 { width: 460px; }
	.container-12 .grid-9 { width: 520px; }
	.container-12 .grid-10 { width: 580px; }
	.container-12 .grid-11 { width: 640px; }
	.container-12 .grid-12 { width: 700px; }
}
	
/* Grid Mobile Less Than 719px */
@media only screen and (max-width: 719px) {
	.container-12,.container-16 { width: 90%; }
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 { width: 100%; margin-left: 0px; margin-right: 0px; }
	.alpha { margin-left: 0; }
	.omega { margin-right: 0; }
	.beta { margin-left: 0; margin-right: 0; }
	.container-16 .grid-1, .container-16 .grid-2, .container-16 .grid-3, .container-16 .grid-4, .container-16 .grid-5, .container-16 .grid-6, .container-16 .grid-7, .container-16 .grid-8, .container-16 .grid-9, .container-16 .grid-10, .container-16 .grid-11, .container-16 .grid-12, .container-16 .grid-13, .container-16 .grid-14, .container-16 .grid-15, .container-16 .grid-16, .container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11, .container-12 .grid-12 { width: 100%; }
}

/* Error 404 */
.error-404 { padding: 150px 0; }
.error-404 h1 { color: #ddd; }