/*****************************************************
    Estilos y apariencia de la aplicacion
*****************************************************/
body{}
/*----------------------------------------------------
    Colores para el Dialog()
----------------------------------------------------*/
/*
.win_round{}
.win_gradient{background:{$titlebarBackColor};}
.win_close{color:{$titlebarTextColor}}
.win_title_text{color:{$titlebarTextColor};}
.win_border{border-color:{$borderColor}}
*/
/*----------------------------------------------------
    Estilos para el Grid
----------------------------------------------------*/
/*
.rwf_grid .navbutton {}
.rwf_grid th {color:{$titlebarTextColor}}
.rwf_grid .head:hover, .rwf_grid .sortdesc:hover, .rwf_grid .sortasc:hover {color:{$titlebarTextColor}} 
.rwf_grid .win_gradient{background:{$titlebarBackColor};}
.rwf_grid #filterpane{}
.rwf_grid #filterpane select, .rwf_grid #filter{}
*/

.rwf_tabstrip .tab_body {font-family: {$fontFamily};}
#animatedTitle {font-family: {$fontFamily};}

/*----------------------------------------------------
    Estilos para el Menu
----------------------------------------------------*/
/* de aqui en adelante hay que redefinir y distribuir */

/* Iconos para las celdas del grid */
a.grid-cell-icon{height:18px;width:22px;line-height:18px;font-size:18px;display:inline-block;text-align:center;color:#888;}
a.grid-cell-icon:hover{color:#000;}

/* Divisor horizontal */
hr{margin: 10px 0; border: 0;}
hr.divisor, hr.divider{border-top: 1px solid rgba(0, 0, 0, 0.10);}
/* Imagenes de perfil */
/*
<div class="user-image">
	<a href="javascript:;" onclick="showPictureUpload();">
		<img id="profilePicture" src="/Pictures/49-18.jpg" class="img-responsive img-circle">
	</a>
</div>
*/
.profile-picture{margin-top:10px;}
.profile-picture img{
	-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
/* Accion ligada a la imagen */
.profile-picture a{
	position:relative;
	display:block;
}
.profile-picture a:before{
	content:'';
	display:block;
	position:absolute;
	max-width:256px;
	margin:0 auto;
	background:linear-gradient(to bottom, #68b828 50%, #ffffff 100%);
	left:0px; right:0px; top:0px; bottom:0px;
	z-index: 1;  
	zoom: 1;

	-webkit-opacity:0; -moz-opacity:0; opacity:0; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter:alpha(opacity=0);
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius: 50%;
	-webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box;
	-webkit-transition:all 100ms ease-in-out; -moz-transition:all 100ms ease-in-out; -o-transition:all 100ms ease-in-out; transition:all 100ms ease-in-out;
}
.profile-picture a:after {
	content:'\f093';
	display:block;
	position:absolute;
	color:#fff;
	font-family:'fontawesome';
	font-size:22px;
	left:50%; top:50%;
	margin-left:-12px; margin-top:-13px;
	z-index: 2;

	-webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); transform:scale(0);
	-webkit-transition:all 200ms ease-in-out; -moz-transition:all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition:all 200ms ease-in-out;
}
.profile-picture a:hover:before {
	-webkit-opacity:0.4; -moz-opacity:0.4; opacity:0.4; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40); filter:alpha(opacity=40);
	zoom: 1;
}
.profile-picture a:hover:after{
  -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); transform:scale(1);
}
.profile-picture img {
	//width:60%;
	max-width:256px;
	margin:0 auto;
}
/* */
.clearfix{}
.clearfix:before, .clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
/* */
table.vo_value_list{width:100%;margin-top:12px;}
.vo_value_list td{line-height:24px;min-height:24px;font-size:14px;}
.vo_value_list td.icon{text-align:center;padding:0;}
.vo_value_list td.caption, .vo_value_list td.value>span.caption{text-align:left;white-space:nowrap;font-weight:bold;padding:4px -1px;vertical-align:top;}
.vo_value_list td.value{vertical-align:top;}
.vo_value_list td.value>span{display:inline-block;font-weight:normal;color:#000;width:99%;}
.vo_value_list td.value:first-child{width:99%}

div.show-top-margin{margin-top:2em;}
.show-grid{margin-bottom:2em;}
.show-grid [class^="col-"]{padding-top:10px;padding-bottom:10px;border:1px solid #AAA;background-color:#EEE;background-color:rgba(200,200,200,0.3);}
.responsive-utilities-test .col-xs-6{margin-bottom:10px;}
.responsive-utilities-test span{padding:15px 10px;font-size:14px;font-weight:bold;line-height:1.1;text-align:center;border-radius:4px;}
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg{color:#999;border:1px solid #ddd;}
.visible-on .col-xs-6 .visible-xs,
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6;}
div.controls input,div.controls select{margin-bottom:.5em;}
#inputSeleccionado{border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-moz-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6);}
.bs-glyphicons{padding-left:0;padding-bottom:1px;margin-bottom:20px;list-style:none;overflow:hidden;}
.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;margin:0 -1px -1px 0;font-size:12px;line-height:1.4;text-align:center;border:1px solid #ddd;}
.bs-glyphicons .glyphicon{display:block;margin:5px auto 10px;font-size:24px;}
.bs-glyphicons li:hover{background-color:rgba(86,61,124,.1);}

.btn-toolbar+.btn-toolbar{margin-top:10px;}
.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px;}
form .row{margin-bottom:1em;}
.nav .dropdown-menu{display:none;}
.nav .open .dropdown-menu{display:block;position:absolute;}

/* CLASES AGREGADAS */
.navbar {
	margin-bottom:0px;
	border-radius: 0px;
}
.navbar-default{
	background-color:#007fc2;
	border-color:#006fb6;
}
.navbar-default .navbar-nav>li>a {
	color:rgba(255,255,255,0.85);
	transition-duration: 0.5s;
}
.navbar-default .navbar-nav>li>a:hover{
	background-color:#0075bb;
	color:rgba(255,255,255,1.0);
}

.navbar-default .navbar-toggle {
	border-color:#006fb6;
	color:#FFF;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color:#006fb6;
	border-color:#0075bb;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
	color:#FFF;
}

@media (min-width: 768px) {
	.bs-glyphicons li{width:12.5%;}
}

@media (max-width: 768px) {
	.navbar-nav{ margin: 0 -15px;}
	.navbar-default .navbar-nav>li {
		border-bottom: 1px solid #006fb6;
	}
	.navbar-default .navbar-nav>li>a {
		padding: 15px 30px;
	}
}

.ca-menu{
	padding:0;
	margin:4px auto 10px;
	width: 240px;

	top:0;
}
.ca-menu li{
	width: 140px;
	height: 42px;
	overflow: hidden;
	position: relative;
	display: block;
	background: #007FC2;
	margin-bottom: 0px;
	transition: all 300ms ease-in-out;
}
.ca-menu li a{
	text-align: left;
	width: 100%;
	height: 100%;
	display: block;
	color: #FFFFFF;
	position: relative;
}
.ca-icon{
	font-family: 'HelveticaNeueLTStd-BdCn','WebSymbolsRegular', cursive;
	font-size: 20px;
	color: #D2E6F2;
	text-shadow: 0px 0px 1px #fff;
	line-height: 32px;
	position: absolute;
	width: 24px;
	left: 8px;
	text-align: center;
	transition: all 300ms linear;
}
.ca-content{
	font-family: 'HelveticaNeueLTStd-BdCn',Centaur, Garamond;
	xxtext-shadow:0 1px 4px rgba(0,0,0,0.68);
	position: absolute;
	left: 48px;
	height: 27px;
	font-size: 17px;
	line-height: 27px;
	color:#444;
	transition: all 300ms linear;
}

.ca-menu li:hover{
	background-color: #2D70B3
}
.ca-menu li:hover .ca-content{
	color:#00A6ED;
}
.ca-menu li:hover .ca-icon{
	color: #2E6CA5;
	font-size: 120px;
	opacity: 0.2;
	left: -20px;
	transform: rotate(20deg);
}

/* Button General */
.btn {
	background: {$buttonBackColor};
	color: {$buttonTextColor};
}
.btn:hover {
	background-color: {$buttonHoverColor};
	color: {$buttonTextColor};
}

/* Button Default */
.btn-default {
	background-color: {$buttonBackColor};
	color: {$buttonTextColor};
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	background-color: {$buttonHoverColor};
	color: {$buttonTextColor};
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	background: {$buttonBackColor};
	color: {$buttonTextColor};
}

body {
	-font-size: {$fontSize};
	-font-family: {$fontFamily};
}
/******************************************************
KODE STYLE CUSTOM
******************************************************/
body {
	font-family: 'Open Sans', sans-serif;
	background: {$backColor};
	color: {$textColor};
}
::-moz-selection {
	background: #D5EAFF;
}
::selection {
	background: #D5EAFF;
}
a {
	color: #399BFF;
}
/* =================================================================================
Top
================================================================================= */
#top {
	background: {$headBackColor};
	color: {$headTextColor};
}
/* =================================================================================
App Logo
================================================================================= */
.applogo {
	background: {$headBackColor};
	color: {$headTextColor};
}
.applogo .logo {
	font-family: 'Montserrat', sans-serif;
	color: {$headTextColor};
}
/* =================================================================================
Sidebar Open Button - Show or Hide Sidebar
================================================================================= */
.sidebar-open-button {
	color: rgba(0, 0, 0, 0.6);
}
.sidebar-open-button:hover,
.sidebar-open-button:active {
	background: rgba(255, 255, 255, 0.07);
}
.sidebar-open-button-mobile {
	color: rgba(0, 0, 0, 0.6);
	border-right: 1px solid rgba(0, 0, 0, 0.14);
}
.sidebar-open-button-mobile:hover,
.sidebar-open-button-mobile:active {
	background: rgba(255, 255, 255, 0.07);
}
/* =================================================================================
Searchbox - Top Search Input
================================================================================= */
.searchbox {
	background: rgba(255, 255, 255, 0.95);
	color: #37363E;
}
.searchbutton {
	color: rgba(0, 0, 0, 0.5);
}
/* =================================================================================
Top Menu 
================================================================================= */
.topmenu a {
	color: rgba(255, 255, 255, 0.9);
}
.topmenu a:hover {
	color: #fff;
}
/* =================================================================================
Sidepanel Open Button - Show or Hide Sidepanel
================================================================================= */
.sidepanel-open-button {
	color: rgba(0, 0, 0, 0.6);
	border-left: 1px solid rgba(0, 0, 0, 0.14);
}
.sidepanel-open-button:hover,
.sidepanel-open-button:active {
	background: rgba(255, 255, 255, 0.05);
}
/* =================================================================================
Top Right
================================================================================= */
.top-right a {
	color: #fff;
}
.top-right .profilebox {
	color: rgba(255, 255, 255, 0.95);
}
.top-right .profilebox .caret {
	color: rgba(255, 255, 255, 0.5);
}
.top-right .profilebox:hover {
	color: #fff;
}
.top-right .notifications {
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
}
.top-right .notifications:hover {
	background: rgba(0, 0, 0, 0.5);
}
.top-right .hdbutton {
	background: #fff;
	color: #404B5F;
}
.top-right .hdbutton:hover {
	background: rgba(255, 255, 255, 0.95);
}
/* =================================================================================
Sidebar 
================================================================================= */
.sidebar {
	font-family: 'Montserrat', sans-serif;
	background: {$buttonBackColor};
	color: {$buttonTextColor};
}
.sidebar .label-default {
	background: rgba(255, 255, 255, 0.2);
}
.sidebar-panel {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-panel li a {
	color: {$buttonTextColor};
}
.sidebar-panel li a .caret {
	color: rgba(255, 255, 255, 0.4);
}
.sidebar-panel li .icon {
	color: rgba(255, 255, 255, 0.6);
}
.sidebar-panel li a:hover,
.sidebar-panel li a.active {
	background: {$buttonHoverColor};
	color: {$buttonTextColor};
}
.sidebar-panel li a:hover .icon,
.sidebar-panel li a.active .icon {
	color: {$buttonTextColor};
}

.sidebar-panel li ul li a, .sidebar-panel li .icon{
	color: {$buttonTextColor};
}

/* Up - Down */
body {font-family: '{$fontFamily}';} /* 'Open Sans'*/
/* =================================================================================
App Logo
================================================================================= */
.applogo .logo {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Sidebar 
================================================================================= */
.sidebar {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Sidepanel 
================================================================================= */
.sidepanel-m-title {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* List with Title */
.list-w-title .label {font-family: '{$fontFamily}';} /* 'Montserrat' */
.list-w-title h4 {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* General Sidepanel Title */
.gn-title {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Page Header 
================================================================================= */
.page-header .title {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Presentation 
================================================================================= */
.presentation .titles h1 {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* Changelog */
.changelogs .version {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Invoice
================================================================================= */
.invoice {font-family: '{$fontFamily}';} /* 'Montserrat' */
.invoice .logo {font-family: '{$fontFamily}';} /* 'Open Sans'*/
.invoice .table p {font-family: '{$fontFamily}';} /* 'Open Sans'*/
.invoice .bottomtext {font-family: '{$fontFamily}';} /* 'Open Sans'*/
/* =================================================================================
Login Pages
================================================================================= */
.login-form form .top h1, .login-form div.form .top h1 {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
404 - 500 Pages
================================================================================= */
.error-pages h1 {font-family: '{$fontFamily}';/*, 'Montserrat', sans-serif;*/
}
/* =================================================================================
Top Stats
================================================================================= */
.topstats h3 {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* Charts */
.easypie span {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Bootstrap Rewrite
================================================================================= */
.font-title {font-family: '{$fontFamily}';} /* 'Montserrat' */
.font-title-tab {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* Dropdown Menu */
.dropdown-header {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* Panels */
.panel-title {font-family: '{$fontFamily}';} /* 'Montserrat' */
.panel .badge {font-family: '{$fontFamily}';} /* 'Open Sans'*/
/* Panel Tools */
.panel-tools {font-family: '{$fontFamily}';} /* 'Open Sans'*/
/* Widget Tools */
.widget-tools {font-family: '{$fontFamily}';} /* 'Open Sans'*/
/* Modals */
.modal-title {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* Table */
thead {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* =================================================================================
Widgets
================================================================================= */
.widget .widget-title h2 {font-family: '{$fontFamily}';} /* 'Montserrat' */
.widget-inline-list li span {font-family: '{$fontFamily}';} /* 'Montserrat' */
/* Chart with Stats */
.chart-with-stats .title {font-family: '{$fontFamily}';} /* 'Montserrat' */
.chart-with-stats .title small {font-family: '{$fontFamily}';} /* 'Open Sans'*/
/* Quick Menu */
.quick-menu {font-family: '{$fontFamily}';} /* 'Montserrat' */