body, html
{
	height: 100%;
}

#vtt-header {
    background: #7F99BE url(../Images/header_bg.jpg) center;
}
#vtt-header h1 {
    font-size: 16px;
    color: #fff;
    font-weight: normal;
    padding: 5px 10px;
}
#details-panel .details-info {
    margin:15px;
    padding:15px;
    border:1px dotted #999;
    color:#555;
    background: #f9f9f9;
}

.filter_delete
{
	background-image: url(../Images/Icon/filter_delete.png);
}
.table-export
{
	background-image: url(../Images/Icon/table-export.png);
}
.export-csv
{
	background-image: url(../Images/Icon/text-csv.png);
}
.export-xls
{
	background-image: url(../Images/Icon/excel.png);
}
.export-pdf
{
	background-image: url(../Images/Icon/pdf.png);
}
.vtt-control-panel
{
	background-image: url(../Images/Icon/control_panel.png);
}
.vtt-icon-support
{
	background-image: url(../Images/Icon/support.png) !important;
}
.vtt-icon-chamado
{
	background-image: url(../Images/Icon/chamado.png) !important;
}

/*
"Botão" customizado
*/
.vtt-button
{
	width: 20px;
	height: 20px;
}

.vtt-button:hover
{
	/*border-radius:5px;*/
	border: solid 1px gray;
	background-position: center;
	cursor: pointer;
}

.x-nlg .x-tab-bar
{
	background-image: none;
}

/*
Trigger Customizado
*/
.x-form-add-trigger
{
	background: url(../Images/Icon/addtrigger.gif) no-repeat;
}

.x-form-trigger-over
{
	background-position: -17px 0;
	border-bottom-color: #a1a1a1;
}

/*
Classes utilizadas na exebição da capa do arquivo
Pasta Vtt.View/Js;Sign/Programacao
*/
.vtt-div-tela
{
	background: url(../Images/Icon/tela.png) no-repeat;
	float: left;
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 320px;
	height: 180px;
}

.vtt-div-tela img
{
	width: 290px;
	height: 140px;
	margin-left: 14px;
	margin-top: 14px;
}

.vtt-div-tela-off-line
{
	width: 290px;
	height: 140px;
	margin-left: 14px;
	margin-top: 14px;
	background-color: Black;
}

.vtt-div-tela-menor
{
	background: url(../Images/Icon/tela_menor.png) no-repeat;
	float: left;
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 150px;
	height: 84px;
}

.vtt-div-tela-menor img
{
	width: 135px;
	height: 65px;
	margin-left: 7px;
	margin-top: 7px;
}

.vtt-div-tela-off-line-menor
{
	width: 136px;
	height: 74px;
	margin-left: 7px;
	margin-top: 5px;
	background-color: Black;
}

/*
Classes utilizadas no template do dataview para seleção de arquivo.
*/
.vtt-div-arquivo, .vtt-div-arquivo:hover
{
	cursor: pointer;
	float: left;
	width: 150px;
	height: 90px;
	margin: 10px;
	text-align: center;
	border: 1px solid gray;
}
.vtt-div-arquivo:hover
{
	background-color: Black;
}
.vtt-div-arquivo.x-item-selected
{
	background-color: #78C8BE;
}
.vtt-div-arquivo img
{
	width: 140px;
	height: 80px;
	margin-top: 4px;
	margin-bottom: 5px;
}

.vtt-dataview-arquivo:hover
{
	opacity: 0.8;
}
.vtt-dataview-arquivo, .vtt-dataview-arquivo:hover
{
	float: left;
	width: 120px;
	height: 90px;
	margin: 10px;
	border: 1px solid lightgray;
	padding: 5px;
}
.vtt-dataview-arquivo.x-item-selected
{
	background-color: lightgray;
	opacity: 0.70;
	border: 1px dotted black;
}
.vtt-dataview-arquivo-content
{
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.vtt-dataview-arquivo-name
{
	text-align: center;
	width: 100%;
	margin-top:5px;
	overflow: hidden;	
	font-size: smaller;
	white-space: nowrap;
}

/*
Classes utilizadas no template de edição do roteiro.
*/
.vtt-div-container-tela
{
	border: 1px solid gray;
	background-color: #F2F2F2;
	float: left;
	width: 300px;
	margin: 5px;
	padding: 5px;
}

.vtt-div-container-tela h1
{
	text-align: center;
	font-size: 20;
	margin-bottom: 20px;
}

.vtt-div-container-tela .btn-adicionar
{
	border: solid 1px gray;
	text-align: center;
	clear: both;
	cursor: pointer;
}

.vtt-div-container-tela .roteiro
{
	text-align: center;
	float: left;
	width: 100%;
	margin: 5px;
}

.vtt-div-container-tela .roteiro h1
{
	font-size: 10;
	margin-bottom: 0px;
}

.vtt-div-container-tela .roteiro .arquivo
{
	width: 85%;
	float: left;
}

.vtt-div-container-tela .roteiro .arquivo img
{
	width: 100%;
	height: 130px;
	border: 1px solid gray;
	cursor: pointer;
}

.vtt-div-container-tela .roteiro .controle
{
	float: left;
	width: 15%;
	height: 130px;
}

.vtt-div-container-tela .roteiro .controle img, .vtt-div-container-tela .roteiro .controle img:hover
{
	margin-top: 20px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.vtt-div-container-tela .roteiro .controle img:hover
{
	border: solid 1px gray;
}

/*
 CSS para as linhas coloridas do grid.
*/

.red-row .x-grid-cell
{
	background-color: #cc0000 !important;
	color: #ffffff;
	font-weight: bold;
}

.red-row.x-grid-row-alt .x-grid-cell
{
	background-color: #aa0000 !important;
	color: #ffffff;
	font-weight: bold;
}

.yellow-row .x-grid-cell
{
	background-color: #cccc00 !important;
	color: #000000;
}

.yellow-row.x-grid-row-alt .x-grid-cell
{
	background-color: #aaaa00 !important;
	color: #000000;
}

.green-row .x-grid-cell
{
	background-color: #00cc00 !important;
	color: #000000;
}

.green-row.x-grid-row-alt .x-grid-cell
{
	background-color: #00aa00 !important;
	color: #000000;
}

.yellow-row.x-grid-row-over .x-grid-cell, .green-row.x-grid-row-over .x-grid-cell, .red-row.x-grid-row-over .x-grid-cell, .yellow-row.x-grid-row-selected .x-grid-cell, .green-row.x-grid-row-selected .x-grid-cell, .red-row.x-grid-row-selected .x-grid-cell
{
	background-color: #E0E0E0 !important;
	border-color: #BFB8B8;
	border-style: dotted;
	color: #000000;
}

.selector:hover
{	
	opacity: 0.8;
}
.selector.x-item-selected
{
	background-color: lightgray;
	opacity: 0.7;
	border: 1px dotted black;
}


/*CLASSES DA TELA DE CONFIGURAÇÃO*/
.vtt-node-over
{
	border:5px dotted gray !important;
}

.vtt-dataview-tela, .vtt-dataview-tela:hover
{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;
	border: 1px solid lightgray;
	padding: 5px;
}
.vtt-dataview-tela:hover
{
	opacity: 0.8;
}
.vtt-dataview-tela.x-item-selected
{
	background-color: lightgray;
	opacity: 0.70;
	border: 1px dotted black;
}

.vtt-dataview-tela-content
{
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.vtt-dataview-tela-name
{
	text-align: center;
	width: 98%;
	overflow: hidden;
	margin: 5px;
	font-size: smaller;
	white-space: nowrap;
}
/* ID´s para message layer da extjs */
.msg .x-box-mc {
    font-size:14px;
}
#msg-div {
    position:absolute;
    left:35%;
    top:10px;
    width:300px;
    z-index:20000;
}
#msg-div .msg {
    border-radius: 8px;
    -moz-border-radius: 8px;
    background: #F6F6F6;
    border: 2px solid #ccc;
    margin-top: 2px;
    padding: 10px 15px;
    color: #555;
}
#msg-div .msg h3 {
    margin: 0 0 8px;
    font-weight: bold;
    font-size: 15px;
}
#msg-div .msg p {
    margin: 0;
}