/**
 * LogiFlow
 *
 * A cloud based we application development framework for PHP
 * built upon the CodeIgniter framework.
 *
 * Copyright (C) 2015 Logibase Limited - All Rights Reserved
 *
 * @package		LogiFlow
 * @author		Logibase Dev Team
 * @copyright	Copyright (c) 2015, Logibase Limited (http://logibase.com)
 * 
 * @link	http://logibase.com
 * @since	Version 1.0.0
 */



/*

Notes:

light green: #a0ce4e
dark green: #628615

*/

.app-light-green { color: #a0ce4e; }
.app-dark-green { color: #628615; }

/* ---------------------------------------------------------------------
|  XS Styles less than 768px
*/

/*
| ======================================================================
|  Core
| ======================================================================
*/

html, body {
	background-color: #eee;
}

legend { font-weight: 400; font-size: 17px; border-bottom: 1px solid #CCC; padding-bottom: 3px; }

/*
| ======================================================================
|  Typography
| ======================================================================
*/

h3.panel-title, h4.panel-title { font-family: 'PT Sans', sans-serif; }
h3.panel-title { font-weight: 400; font-size: 20px; }
h4.panel-title { font-weight: 400; font-size: 17px; }


/* Page titles */
.page-title { 
	background-image: none; 
	background-color: #666666;
	padding: 25px 0;
}
.page-title h1 { color: #FFF; text-align: center; margin: 0 15px 0 15px; font-size: 20px; line-height: 25px; }
.page-title p { color: #FFF; text-align: center; margin: 15px 15px 0 15px; }

/* Links */
a, a:visited, a:hover, a:focus, a:active, a.active { color: #a0ce4e; text-decoration: none; text-shadow: none; outline: 0; }
a:hover, a:focus, a:active, a.active { color: #628615; text-decoration: underline; }
.page-title a:hover, .page-title a:focus, .page-title a:active, .page-title a.active { color: #a0ce4e; text-decoration: underline; }

/*
| ======================================================================
|  Section Separator
| ======================================================================
*/

.section-separator {
	position: relative;
	border-bottom: 6px solid #666666;
	margin-bottom: 60px;
}
.section-separator .arrow {
	z-index: 2;
	position: absolute;
	top: 4px;
	left: 50%;
	height: 0;
	width: 0;
	margin-left: -29px;
	border-color: transparent;
	border-top-color: #666666;
	border-style: solid;
	border-width: 29px 29px 0 29px;
}

/*
| ======================================================================
|  Nav Bar
| ======================================================================
*/

.navbar { height: 50px; background-image: none; background-repeat: no-repeat; background-color: #252525; border: none; color: #ffffff; }
.navbar img { margin-top: 4px; }
.navbar .lines-button { margin-top: 11px; }

.navbar .close-window { margin-top: 8px; }

/*
| ======================================================================
|  Slidebar Nav Menu
| ======================================================================
*/

.sb-menu li a, .sb-menu li a:visited { color: #ffffff; padding: 0.8em; }
.sb-menu li a:hover, 
.sb-menu li a:focus, 
.sb-menu li a:active, 
.sb-menu li a.active { color: #a0ce4e; }
.sb-menu > li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.sb-menu li.separator { height: 15px; background-color: rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sb-menu li.heading { padding: 0.5em 0.8em; letter-spacing: 1px; font-size: 14px; color: #8C8C8C; text-align: right; }

.sb-menu li.autologout { color: #8C8C8C; height: 50px; padding: 15px 0.8em 0 0.8em; font-size: 12px; }
.sb-menu li.autologout a { position: absolute; right: 0; top: 0; height: 50px; padding: 15px 0.8em 0 0.8em; font-size: 14px; }

.sb-menu li.avatar-mobile { text-align: center; padding: 20px; }
.sb-menu li.avatar-mobile span { display: block; text-align: center; padding: 10px 5px 0 5px; color: #CCCCCC; }
.sb-menu li.avatar-mobile div.avatar { padding: 3px; box-shadow: none; background: #ddd; }
.sb-menu li.avatar-mobile div.avatar img { margin-top: 0; }



/*
| ======================================================================
|  Other
| ======================================================================
*/

#sb-site { padding: 50px 0 0 0; box-shadow: none; background-color: #eee; }
.sb-slidebar { background-color: #252525; border: none; }

/* Price plan list */
#pricing-table {  }
#pricing-table .pricing { margin: 0; padding: 0; }
#pricing-table .pricing .pricing-table { padding-bottom: 15px; }
#pricing-table .pricing .pricing-table .pricing-header {
  position: relative;
  background: #666;
  padding: 22px 0 5px;
  text-align: center;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-title {
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-rate {
  font-size: 60px;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 60px;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-rate sup {
  font-size: 24px;
  position: relative;
  top: -30px;
  color: #bdc3c7;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-rate span {
  font-size: 16px;
  color: #bdc3c7;
}
#pricing-table .pricing .pricing-list {
text-align: center;
  padding: 15px 0;
  background: #ffffff;
  border: 1px solid #ccc;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
#pricing-table .pricing .pricing-list button {
	margin: 15px 0 10px;
}
#pricing-table .pricing .pricing-list ul {
  padding: 0px;
  display: table;
  margin: 0px auto;
}
#pricing-table .pricing .pricing-list ul li {
  list-style: none;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 16px;
  line-height: 42px;
}
#pricing-table .pricing .pricing-list ul li:last-child {
  border: none;
}
#pricing-table .pricing .pricing-list ul li i {
  margin-right: 12px;
  color: #bdc3c7;
}
#pricing-table .pricing .pricing-list ul li span {
  font-weight: 600;
  font-size: 18px;
}

.info-card { text-align: center; }
.info-card .name { font-size: 18px; font-weight: 600; padding: 10px 0 5px; }
.info-card .name2 { font-size: 18px; font-weight: 600; padding: 20px 0 0 0; }
.info-card .type { }
.info-card .id { font-size: 14px; }
.info-card .btn-icon { margin: 0 2px 5px; }

.table-filters { padding: 15px; background: #f1f1f1; margin-bottom: 30px; }
.table-filters h5 { display: block; width: 100%; padding: 0 0 3px 0; margin: 0 0 15px 0; font-weight: 400; font-size: 17px; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #CCC; }

#support_accordion .panel-heading { cursor: pointer; }
#support_accordion h4.panel-title { line-height: 1.1; cursor: pointer; }

.vimeo-embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.vimeo-embed-container iframe, .vimeo-embed-container object, .vimeo-embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
| ======================================================================
|  Footer
| ======================================================================
*/

footer { color: #999999; font-size: 12px; background-color: #252525; text-align: center; }
footer > div { padding: 15px 0; }

footer .logibase-tag a, 
footer .logibase-tag a:visited, 
footer .logibase-tag a:hover, 
footer .logibase-tag a:focus, 
footer .logibase-tag a:active, 
footer .logibase-tag a.active { color:#ED2175; }

footer .logibase-tag a:hover, 
footer .logibase-tag a:focus, 
footer .logibase-tag a:active, 
footer .logibase-tag a.active { color: #ED2175; }

/*
| ======================================================================
|  Bootstrap overrides and additions
| ======================================================================
*/
.panel-default { border-color: #ccc; }
.panel-default > .panel-heading { background-image: none; background-color: #d8d8d8; }
.panel-title { font-weight: 600; }

/*
| ======================================================================
|  John border radius overrides
| ======================================================================
*/
.panel,
.btn,
.well,
.form-control,
.dropdown-menu,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.list-group-item,
#pricing-table .pricing .pricing-table .pricing-header,
#pricing-table .pricing .pricing-list { border-radius:0 !important;}

/*
| ======================================================================
|  John home page styles
| ======================================================================
*/
.home-page-title { padding:55px 0;}
.home-page-title p { font-size:17px; color:#d8d8d8;}
.home-page-panel {}
.home-page-panel h3 { text-align:center; font-size:30px; color:#333; margin-bottom:20px;}
.home-page-panel p { text-align:center; font-size:17px; color:#747474; margin-bottom:30px;}
.home-page-panel-system {}
.home-page-panel-examples {}
.home-page-panel-subscriptions { margin-bottom:60px;}
.home-page-panel-subscriptions button { width:100%; font-size:17px; padding:10px auto; margin-bottom:20px; white-space:normal;}
.home-page-video-card { background-color:#fff; padding:10px; border:1px solid #ccc; margin-bottom:20px;}
.home-page-video-card img { border:1px solid #DEDDDD;}
.home-page-video-card h6 { font-size:17px; text-align:center; margin:15px 0 0 0;}
.home-page-video-card p { font-size:14px; text-align:left; padding:0; margin:10px 0 0 0;}
.home-page-video-card button { width:100%; font-size:17px; padding:10px auto; margin:15px 0 0 0; white-space:normal;}

.fusion-sep-clear {
  clear: both;
  display: block;
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  width: 100%;
  overflow: hidden;
}
.fusion-separator {
  border: 0 solid #CCCCCC;
  border-top-width:1px;
  margin: 60px auto 60px auto;
  clear: both;
  position: relative;
  z-index: 11;
}
.fusion-separator span {
  position: absolute;
  display: table;
  left: 50%;
  top: 50%;
  margin: -13px 0 0 -13px;
  height: 26px;
  width: 26px;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: 50%;
  /* Fix to make border-radius work for transparent colors */
  background-clip: padding-box;
  text-align: center;
}
.fusion-separator span i {
  display: block;
  display: table-cell;
  vertical-align: middle;
  color: #747474;
}







@media (max-width : 768px) { }

/* ---------------------------------------------------------------------
|  SM Styles 768px and up 
*/

@media (min-width : 768px)
{
	/*
	| ======================================================================
	|  Typography
	| ======================================================================
	*/

	/* Page titles */
	.page-title h1 { font-size: 30px; line-height: 35px; }
	
	/*
	| ======================================================================
	|  Nav Bar
	| ======================================================================
	*/
	
	.navbar { height: 70px; }
	.navbar img.logo { margin-top: 6px; }
	
	.navbar .close-window { margin-top: 20px; margin-right: 15px; }
	
	/*
	| ======================================================================
	|  Upper Nav Menu
	| ======================================================================
	*/

	nav.upper-nav > ul > li > a, nav.upper-nav > ul > li > a:visited { height: 70px; line-height: 65px; padding: 0 20px 5px; color: #ffffff; border-top: 4px solid #252525; }
	nav.upper-nav > ul > li > a:hover, 
	nav.upper-nav > ul > li > a:focus, 
	nav.upper-nav > ul > li > a:active, 
	nav.upper-nav > ul > li > a.active { color: #a0ce4e; border-top: 4px solid #a0ce4e; text-decoration: none; }
	nav.upper-nav li.my_account ul.dropdown-menu { right: 0; left: auto; }
	nav.upper-nav li.autologout { height: 70px; line-height: 65px; padding: 0 20px 5px; color: #999999; border-top: 4px solid #252525; }
	nav.upper-nav li.avatar { padding-top: 4px; }
	nav.upper-nav li.avatar div.avatar { padding: 3px; box-shadow: none; background: #ddd; }
	nav.upper-nav li.avatar .avatar img { margin-top: 0; }
	
	/*
	| ======================================================================
	|  Other
	| ======================================================================
	*/

	#sb-site { padding-top: 70px; }
	
	/*
	| ======================================================================
	|  Footer
	| ======================================================================
	*/
	
	footer { text-align: left; }
	footer > div > div > div:last-child { text-align: right; }
}
@media (max-width : 992px) { }

/* ---------------------------------------------------------------------
|  MD Styles 992px and up
*/

@media (min-width : 992px)
{
	
}
@media (max-width : 1200px) { }

/* ---------------------------------------------------------------------
|  LG Styles 1200px and up
*/

@media (min-width : 1200px)
{
	
}