/* ********************************** ************** ******************************** */
/* ****************************** INTERFACE DO TOOLSYS 7 **************************** */

/* -------------------------------------- IMPORT ------------------------------------ */
@import 'Base.less';
/* ---------------------------------------------------------------------------------- */





/* ------------------------------------- TABELAS ------------------------------------ */
.tabela_lista {
    padding: 10px 0px 0px 0px;
    clear: both;
}
.tabela_lista table { width: 100%; border-collapse: collapse; }

.tabela_lista thead { background: transparent; }
.tabela_lista thead td {
	font-size: 13px;
    padding: 10px 3px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 2px solid @interface_color;
    color: @interface_color;
}
.tabela_lista thead td a { font-weight: normal; text-decoration: none; color: @interface_color; }
.tabela_lista thead td a:hover { font-weight: bold; }

.tabela_lista thead td.td-left { text-align: left; padding-left: 10px; }
.tabela_lista thead td.td-right { text-align: right; padding-right: 10px; }

.tabela_lista tbody {}
.tabela_lista tbody td {
	padding: 10px;
	color: #777;

    border-bottom: 1px solid #EAF0F4;

    transition: 0.3s;
    font-size: 15px;
}

.tabela_lista tbody tr:hover { background: #F1F5F8; transition: 0.3s; }

.tabela_lista tbody .td-noborder-right { border-right: none; }
.tabela_lista tbody .td-noborder-left { border-left: none; }

.tabela_lista tbody td .td-subitem { font-size: 0.75em; display: block; margin: -2px 0px 0px 0px; color: @interface_color; }
.tabela_lista tbody td .td-subitem a { color: @interface_color; text-decoration: none; }
.tabela_lista tbody td .td-subitem a:hover { text-decoration: underline; }

.tabela_lista tbody td .link_pessoa { text-decoration: none; color: #777; transition: 0.5s; }
.tabela_lista tbody td .link_pessoa i { font-size: 0.80em; color: #AAA; transition: 0.5s; }

.tabela_lista tbody td .link_pessoa:hover { color: @interface_color; transition: 0.5s; }
.tabela_lista tbody td .link_pessoa:hover i { color: @interface_color; transition: 0.5s; }

.tabela_lista tbody .td-estados { padding: 0px 5px 0px 5px; text-align: center; }
.tabela_lista tbody .td-estados.estados-1 { width: 22px; }
.tabela_lista tbody .td-estados.estados-2 { width: 44px; }

.tabela_lista tbody .td-icones { padding: 0px 5px 0px 5px; text-align: center; width: 35px; }
.tabela_lista tbody .td-icones a { display: block; width: 100%; height: 26px; }
.tabela_lista tbody .td-icones a img { max-width: 100%; max-height: 100%; }

.tabela_lista tbody .td-datas { width: 100px; text-align: center; }
.tabela_lista tbody .td-usos { width: 100px; text-align: center; }

.tabela_lista tbody tr .td-galerias { width: 90px; text-align: center; padding: 2px 0px 0px 0px; }
.tabela_lista tbody tr .td-galerias a { text-decoration: none; color: #CEDFE9; transition: 0.3s; font-size: 20px; width: 100%; display: block; .box-sizing-boder; margin: 0px; }
.tabela_lista tbody tr .td-galerias a.com-itens { color: #CEDFE9; transition: 0.3s; }
.tabela_lista tbody tr:hover .td-galerias a { color: #CEDFE9; opacity: 0.75 !important; filter: alpha(opacity=75) !important; transition: 0.3s; }
.tabela_lista tbody tr:hover .td-galerias a:hover { color: @interface_color + #111; opacity: 1.0 !important; filter: alpha(opacity=100) !important; transition: 0.3s; }

.tabela_lista tbody tr .td-galerias a i { display: inline-block; vertical-align: top; padding-top: 2px; }
.tabela_lista tbody tr .td-galerias a em { display: inline-block; vertical-align: top; font-style: normal; font-size: 12px; font-weight: bold; height: 20px; box-sizing: border-box; padding-top: 4px; padding-left: 5px; }
.tabela_lista tbody tr .td-galerias a em:before { content: "( "; font-size: 10px; }
.tabela_lista tbody tr .td-galerias a em:after { content: " )"; font-size: 10px; }

.tabela_lista tbody tr .td-contadores { width: 80px; text-align: center; }
.tabela_lista tbody tr .td-contadores span { font-size: 13px; color: #444; }
.tabela_lista tbody tr .td-contadores span.zero { color: #CEDFE9;; }

.tabela_lista tbody tr .td-contadores-box { text-align: center; font-size: 13px !important; width: 120px; }
.tabela_lista tbody tr .td-contadores-box a { text-decoration: none; display: inline-block; padding: 3px 8px; border-radius: 5px; transition: 0.3s; }
.tabela_lista tbody tr .td-contadores-box a span { color: #11719d; transition: 0.3s; }
.tabela_lista tbody tr .td-contadores-box span.zero { color: #CEDFE9; transition: 0.3s; }
.tabela_lista tbody tr .td-contadores-box a:hover { background: #11719d; transition: 0.3s; }
.tabela_lista tbody tr .td-contadores-box a:hover span { color: #FFF; transition: 0.3s; }

.tabela_lista tbody tr .td-box-cor { text-align: center; vertical-align: middle; }
.tabela_lista tbody tr .td-box-cor .box-cor { display: inline-block; width: 24px; height: 24px; border: 1px #DDD solid; background: #FFFFFF; margin: 3px 0px 0px 0px; }

.tabela_lista tbody tr .td-lixeira-tipo { width: 220px; text-align: center; }
.tabela_lista tbody tr .td-lixeira-data { width: 120px; text-align: center; padding-top: 3px; padding-bottom: 2px; font-size: 0.75em; }
.tabela_lista tbody tr .td-lixeira-data span { font-size: 0.8em; display: block; color: @interface_color; }

.tabela_lista .td-sem-itens { text-align: center; padding: 150px 0px 150px 0px; font-size: 30px; text-transform: uppercase; color: @color-form-texts; border: none; opacity: 0.4; }

.rodape-tabela { font-size: 13px; color: @interface_color; text-transform: uppercase; padding: 5px 8px; border-top: 2px solid @interface_color; margin-top: -1px; }


.tabela_lista .td-incompleto { float: right; color: @interface_color; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------- TABELAS - DENTRO DE FIELDSET --------------------------- */
.form-group-box table
{
	tbody tr td { background: #F1F5F8; }
	tbody tr:last-child td { border: none; }
	tbody tr:last-child td:first-child { border-bottom-left-radius: 20px; }
	tbody tr:last-child td:last-child { border-bottom-right-radius: 20px; }

	tbody tr:hover {
		& input[type="text"], & input[type="password"], & textarea, & select {
			background: #F1F5F8 + #080808;
		}
	}
}
/* ---------------------------------------------------------------------------------- */





/* --------------------------------- TABELAS - AÇÕES -------------------------------- */
.td-acoes { padding: 0px 5px 0px 5px; text-align: center; font-size: 0px !important; }
.td-acoes.acoes-1 { width: 24px; }
.td-acoes.acoes-2 { width: 68px; }
.td-acoes.acoes-3 { width: 104px; }
.td-acoes.acoes-4 { width: 140px; }
.td-acoes.acoes-5 { width: 176px; }
.td-acoes.acoes-6 { width: 212px; }

tr .td-acoes a { cursor: pointer; background: #95B0BB; width: 32px; height: 32px; border-radius: 50%; text-align: center; display: inline-block; margin: 0px 4px 0px 0px; font-size: 16px !important; text-align: center; padding-top: 6px; box-sizing: border-box; color: #FFF; transition: 0.3s; }
tr .td-acoes a:hover { background: @interface_color + #111; transition: 0.3s; }
tr .td-acoes a:last-child { margin-right: 0px; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------- TABELAS - COMPONENTE - NICK ---------------------------- */
tr .td-nick { width: 100px; text-align: center; padding: 2px 5px 2px 5px !important; }
tr .td-nick.nick-50 { width: 50px; }

tr .td-nick .com-nick { display: inline-block; width: 32px; height: 32px; border-radius: 50%; text-align: center; box-sizing: border-box; padding-top: 6px; color: #FFF; }
tr .td-nick .sem-nick span { display: inline-block; font-size: 0.9em !important; }

tr .td-nick .sem-nick { display: inline-block; width: 32px; height: 32px; border-radius: 50%; text-align: center; box-sizing: border-box; padding-top: 6px; color: #95B0BB; background-color: #F1F5F8; }
tr .td-nick .sem-nick span { display: inline-block; font-size: 0.9em !important; }
/* ---------------------------------------------------------------------------------- */





/* ---------------------- TABELAS - COMPONENTE - MULTI NICK ------------------------- */
tr .td-multi-nick { width: 250px; text-align: center; padding: 2px 5px 2px 5px !important; }

tr .td-multi-nick .multi-nick { text-align: center; }
tr .td-multi-nick .multi-nick .nick { display: inline-block; width: 26px; height: 26px; border-radius: 50%; text-align: center; box-sizing: border-box; padding-top: 2px; color: #FFF; }
tr .td-multi-nick .multi-nick .nick span { display: inline-block; font-size: 0.8em !important; }
/* ---------------------------------------------------------------------------------- */





/* ------------------- TABELAS - COMPONENTE - STATUS DE USUÀRIO --------------------- */
tr .td-status-usuario { width: 120px; text-align: center; padding: 2px 5px 2px 5px !important; }

tr .td-status-usuario .status { display: block; height: 32px; border-radius: 32px; text-align: center; box-sizing: border-box; padding-top: 6px; color: #FFF; }
tr .td-status-usuario .status span { display: inline-block; font-size: 0.9em !important; text-transform: uppercase; }

tr .td-status-usuario .status.ativo { background-color: #1783B5; }
tr .td-status-usuario .status.ativo span { color: #FFF; }

tr .td-status-usuario .status.inativo { background-color: #F1F5F8; }
tr .td-status-usuario .status.inativo span { color: #95B0BB; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------------------ PAGINAÇÃO ----------------------------------- */
.pagination { margin: 15px 0px 30px 0px; padding: 0px 0px 0px 0px; width: 100%; .box-sizing-boder; clear: both; }
.pagination p { margin: 5px 0px 0px 0px; padding: 0px; width: 100%; text-align: center; font-size: 13px; color: #95B0BB; }
.pagination p b { color: #95B0BB; }

.pagination ul { margin: 0px; padding: 0px; width: 100%; text-align: center; }
.pagination ul li { display: inline-block; }

.pagination a { color: #444; display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; padding: 4px 4px 1px 4px; text-decoration: none; font-size: 16px; margin: 0px 2px 0px 2px; }
.pagination a.currentpage { background-color: @interface_color; color: #FFF; padding: 4px 4px 1px 4px; }
.pagination a:hover { background-color: @interface_color; color: #FFF; padding: 4px 4px 1px 4px; }

.pagination a.prevnext { color: #95B0BB; font-size: 16px; width: 20px; }
.pagination a.prevnext:hover { background: none; color: @interface_color; }
.pagination a.prevnext.disablelink { opacity: 0.5; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------------- ORDENAÇÃO DE ITENS ------------------------------- */
tr .td-ordem { position: relative; width: 38px; height: 24px; padding: 0px 0px 0px 0px !important; text-align: center; }

tr .td-ordem .io_up { display: none; position: absolute; top: -4px; left: 15px; color: #777; background-position: 0 0; height: 10px; }
tr .td-ordem .io_up:hover { color: @interface_color + #111; }
tr .td-ordem .io_up.disabled { opacity: 0.5; filter: alpha(opacity=50); }
tr:hover .td-ordem .io_up {display: block;}

tr .td-ordem .io_down { display: none; position: absolute; bottom: 8px; left: 15px; color: #777; background-position: 0 0; height: 10px; }
tr .td-ordem .io_down:hover { color: @interface_color + #111; }
tr .td-ordem .io_down.disabled { opacity: 0.5; filter: alpha(opacity=50); }
tr:hover .td-ordem .io_down {display: block;}

tr .td-ordem .io_edit { position: absolute; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; margin-top: -12px; background: #555; color: #EEE; font-size: 11px; padding: 3px 4px 2px 4px; cursor: pointer; left: -25px; top: 50%; opacity: 0.0; transition: 0.3s; }
tr:hover .td-ordem .io_edit { background: #95B0BB; left: -10px; opacity: 1.0; transition: 0.3s; }
tr:hover .td-ordem .io_edit:hover { background: @interface_color + #111; opacity: 1.0; filter: alpha(opacity=100); transition: 0.3s; }

tr .td-ordem .io_num { text-align: center; vertical-align: middle; display: block; font-size: 13px; color: #888; }
tr:hover .td-ordem .io_num { font-weight: bold; color: #555; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------------ PUBLICAÇÃO DE ITENS ------------------------------- */
tr .td-publish { width: 20px; height: 24px; padding: 0px 5px 0px 5px !important;}

tr .td-publish a { font-size: 1.3em; color: #CEDFE9; cursor: pointer; transition: 0.75s; }
tr .td-publish a:hover { color: #CEDFE9 - #222; transition: 0.75s; }
tr .td-publish a.active { color: @interface_color; transition: 0.75s; }
tr .td-publish a.erro { color: #B22; transition: 0.75s; }
/* ---------------------------------------------------------------------------------- */





/* --------------------------- COMPARTILHAMENTO DE ITENS ---------------------------- */
tr .td-share { width: 20px; height: 24px; padding: 0px 5px 0px 5px !important; }

tr .td-share a { font-size: 1.2em; color: #CEDFE9; cursor: pointer; transition: 0.75s; }
tr .td-share a:hover { color: @interface_color + #111; transition: 0.75s; }
/* ---------------------------------------------------------------------------------- */





/* -------------------------------- DIALOGS PADRÕES --------------------------------- */
.dialog_item_ordem {}
.dialog_item_ordem p { text-align: center; margin: 0px 0px 20px 0px; font-size: 13px; }
.dialog_item_ordem p label { font-size: 16px; }
.dialog_item_ordem div { width: 50px; margin: 0px auto 0px auto; }
.dialog_item_ordem div input { text-align: center; }


.dialog_categoria_cadastro {}
.dialog_categoria_cadastro p { text-align: center; margin: 6px 0px 15px 0px; font-size: 13px; }
.dialog_categoria_cadastro_loading p { text-align: center; font-size: 13px; }
.dialog_categoria_cadastro_loading p b { font-size: 16px; }
.dialog_categoria_cadastro_loading div { width: 40px; height: 30px; margin: 0px auto 0px auto; background: transparent url("../Imagens/ajax_loader_2.gif") no-repeat center center; }


.dialog_item_share {}
.dialog_item_share > p { text-align: center; margin: 6px 0px 15px 0px; font-size: 13px; }
.dialog_item_share > div { margin: 10px 35px 10px 35px; text-align: center; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------------------ TOOLTIPS ------------------------------------ */
.ui-tooltip {
	background: @interface_color !important;
	border: 1px solid @interface_color !important;
	color: #FFF !important;
	padding: 6px 12px !important;
	
	font-family: 'Source Sans Pro', sans-serif !important;
	font-size: 13px !important;
	box-shadow: 0 0 5px rgba(0,0,0,0.25) !important;
	margin-top: -12px !important;
	
	top: -10px;
	border-radius: 30px !important;
}

.ui-tooltip .arrow {
	width: 60px !important;
	height: 12px !important;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px !important;
	bottom: -12px !important;
}

.ui-tooltip .arrow:after {
	background: @interface_color !important;
	border: 1px solid @interface_color !important;
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ui-tooltip .arrow.left { left: 20%; }
.ui-tooltip .arrow.top { top: -16px; bottom: auto; }
.ui-tooltip .arrow.top:after { bottom: -20px; top: auto; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------------------- BOTÕES ------------------------------------- */
.botao_padrao {
	display: block;
	.box-sizing-boder;
	text-align: center;
	padding: 5px 12px;
	color: #FFF;
	background: @interface_color;
	border: 1px #E2E2E2 solid;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s;
	font-size: 0.80em;
	outline: none;
}
.botao_padrao:hover {
	color: #FFF;
	background: @interface_color + #111;
	transition: all 0.25s;
}

.botao_cinza {
	display: block;
	.box-sizing-boder;
	text-align: center;
	padding: 5px 12px;
	background: #7F98A4;
	color: #FFF;
	border-radius: 5px;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s;
	font-size: 0.80em;
	outline: none;
}
.botao_cinza:hover {
	color: #FFF;
	background: @interface_color;
	transition: all 0.25s;
}

.botao_branco {
	display: block;
	.box-sizing-boder;
	text-align: center;
	padding: 5px 12px;
	color: #333;
	background: #FFF;
	border: 1px #E2E2E2 solid;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s;
	font-size: 0.80em;
	outline: none;
}
.botao_branco:hover {
	color: #FFF;
	background: @interface_color;
	transition: all 0.25s;
}

.botao_branco_vermelho {
	display: block;
	.box-sizing-boder;
	text-align: center;
	padding: 5px 12px;
	color: #333;
	background: #FFF;
	border: 1px #E2E2E2 solid;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s;
	font-size: 0.80em;
	outline: none;
}
.botao_branco_vermelho:hover {
	color: #FFF;
	background: #B22;
	transition: all 0.25s;
}
/* ---------------------------------------------------------------------------------- */





/* ------------------------------- AJUSTES DE PLUGINS ------------------------------- */
.redactor-box { margin-bottom: 0px !important; }
/* ---------------------------------------------------------------------------------- */





/* ----------------------------- JQUERY UI - DATEPICKER ----------------------------- */
.ui-datepicker { border: none !important; -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.2); box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.2); border-radius: 6px !important; margin-top: 10px; }

.ui-datepicker .ui-datepicker-header { margin: -0.2em -0.2em 0px -0.2em; border: none !important; background: @interface_color; color: #FFF; border-radius: 6px 6px 0px 0px !important; }

.ui-datepicker .ui-datepicker-header .ui-datepicker-title {}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover { background: transparent; border-color: transparent !important; }
.ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover { background: transparent; border-color: transparent !important; }

.ui-datepicker .ui-datepicker-calendar {}
.ui-datepicker .ui-datepicker-calendar thead th {}
.ui-datepicker .ui-datepicker-calendar thead th span { color: #7F98A4; }
.ui-datepicker .ui-datepicker-calendar tbody td {}
.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-default { height: 31px; box-sizing: border-box; text-align: center; padding: 6px 0px 0px 0px; border-radius: 50%; border: 1px #FFF solid !important; background: #FFF !important; color: #7F98A4 !important; }
.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-default.ui-state-hover { background: #F1F5F8 !important; color: #7F98A4 !important; }
.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-default.ui-state-highlight { background: #F1F5F8 !important; color: #7F98A4 !important; }
.ui-datepicker .ui-datepicker-calendar tbody td .ui-state-default.ui-state-active { background: @interface_color !important; color: #FFF !important; font-weight: bold; }
/* ---------------------------------------------------------------------------------- */





/* ------------------------------- JQUERY UI - DIALOGS ------------------------------ */
.ui-dialog { border: none !important; -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.2); box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.2); border-radius: 12px !important; }

.ui-dialog .ui-dialog-titlebar { background: @interface_color; color: #FFF; border: none; margin: -0.2em -0.2em 7px -0.2em; padding: 0.7em 1em !important; }

.ui-dialog .ui-dialog-titlebar .ui-dialog-title { font-family: 'Open Sans', sans-serif; text-transform: uppercase; }

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { border: none; background: transparent; color: #FFF; outline: none; right: 0.5em; }

.ui-dialog .ui-dialog-content { margin: 0px -0.2em 0px -0.2em; font-size: 1.2em; color: #363636; }

.ui-dialog .ui-dialog-buttonpane { border-top: none; margin: 0px -0.2em 0px -0.2em; padding: 0.5em 0.6em 0.4em 0.4em !important; text-align: center !important; }

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none !important; }

.ui-dialog .ui-dialog-buttonpane .ui-button {
	background: @interface_color;
	border: none;
	border-radius: 20px;
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 14px;
	padding: 5px 20px 5px 20px;
	margin: 5px 5px 5px 5px !important;
	transition: 0.25s;
	cursor: pointer;
	height: 36px;
	display: inline-block;
	box-sizing: border-box;
	outline: none;
	
	float: none;
	
	&:hover {
		background: @interface_color + #111;
		transition: 0.25s;
	}
}

.ui-dialog .ui-dialog-buttonpane .ui-button.button-secondary {
	background: #7F98A4;
	transition: 0.25s;
	
	&:hover {
		background: @interface_color + #111;
		transition: 0.25s;
	}
}

.ui-dialog .ui-dialog-buttonpane .ui-button .ui-button-text { padding: 0px; }
/* ---------------------------------------------------------------------------------- */