/* -------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------- */

/*

------------------------------------------
------------------------------------------

----- Blesta styles

------------------------------------------
------------------------------------------
	
*/

/* Container */

.blestabody .container,
.blestabody .container-lg,
.blestabody .container-md,
.blestabody .container-sm,
.blestabody .container-xl {
	margin: 0 auto;
	width: var(--container-width);
	max-width: var(--container-maxwidth);
}

.blestabody .blestacontainer .container,
.blestabody .blestacontainer .container-lg,
.blestabody .blestacontainer .container-md,
.blestabody .blestacontainer .container-sm,
.blestabody .blestacontainer .container-xl {
	width: 100%;
	max-width: none;
}

.blestacontainer hr {
	border-top: var(--color-border) 1px solid;
}

.blestacontainer .btn {
	text-decoration: none;
}

.blestacontainer .list-group-item h4 {
	color: var(--color-heading) !important;
	font-weight: bold;
}

.blestacontainer .section-title h3 {
	color: var(--color-heading);
}

/* Nav */

.blestabody .nav-content nav.navbar {
	background: var(--color-box-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%);
	border-bottom: var(--color-box-background-border) 1px solid;	
}

.blestabody .nav-content nav.navbar .nav-item {
	font-size: 1.2em;
	font-weight: bold;	
}

.blestabody .nav-content nav.navbar .navbar-nav > li > a {
	color: var(--color-box-foreground) !important;
	text-decoration: none;	
}

.blestabody .nav-content nav.navbar .navbar-nav > li > a:hover {
	color: var(--color-primary-background) !important;
}

.blestabody .dropdown-menu {
	background: var(--color-box-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%);
	border-color: var(--color-box-background-border);		
}

.blestabody .dropdown-item,
.blestabody ul.dropdown-menu li a {
	text-decoration: none !important;
	color: var(--color-box-foreground) !important;
}

.blestabody .dropdown-item:hover {
	background: var(--color-box-active-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%);
	color: var(--color-box-active-foreground) !important;
}

/* Homepage boxes */

.blestacontainer .thanks blockquote {
	background: var(--color-box-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%);
	border: var(--color-box-background-border) 1px solid;
	border-bottom-width: var(--border-bottom-width-default);	
	color: var(--color-box-foreground);
	border-radius: var(--border-radius-default);		
	padding: var(--spacing-child);
}

.blestacontainer .thanks blockquote h4 {
	color: var(--color-box-foreground-bold);
}

.blestacontainer .thanks blockquote p:last-child {
	margin-bottom: 0;
}

.blestacontainer .card {
	background: var(--color-box-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%);
	border: var(--color-box-background-border) 1px solid;
	border-bottom-width: var(--border-bottom-width-default);	
	color: var(--color-box-foreground);
	border-radius: var(--border-radius-default);			
}

.blestacontainer .card i {
	font-size: 3em;
	margin-bottom: 10px;
}

.blestacontainer .card-kb i {
	font-size: 1em;
	margin-bottom: 0;
}

.blestacontainer .card-kb .form-control {
	background: var(--color-box-active-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%);	
	color: var(--color-box-active-foreground);	
	border-color: var(--color-box-active-background-border);	
}

.blestacontainer .card h4 {
	color: var(--color-box-foreground-bold);
}

.blestacontainer .card:hover h4 {
	color: var(--color-primary-background);
}

/* Card */

.blestacontainer .card-blesta,
.blestacontainer .panel {
	background: var(--color-box-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%);
	border: var(--color-box-background-border) 1px solid !important;
	border-bottom-width: var(--border-bottom-width-default) !important;	
	color: var(--color-box-foreground);
	border-radius: var(--border-radius-default) !important;	
}

.blestacontainer .card-blesta > .card-header,
.blestacontainer .panel .panel-header {
	background: var(--color-box-head-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%) !important;
	border-bottom: var(--color-box-head-background-border) 1px solid !important;
	color: var(--color-box-head-foreground) !important;
	text-shadow: var(--color-box-head-foreground-shadow) 1px 1px !important;		
}
 
.blestacontainer .card-blesta > .card-footer,
.blestacontainer .panel .panel-footer {
	background: var(--color-box-footer-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%) !important;
	color: var(--color-box-footer-foreground) !important;
	border-radius: 0 0 var(--border-radius-default) var(--border-radius-default) !important;
	border-color: var(--color-box-footer-background-border) !important;
	font-size: 0.9em;
 } 
 
 /* Breadcrumb */
 
.blestacontainer .breadcrumb {
	background: var(--color-box-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%) !important;
	color: var(--color-box-foreground) !important;	 
}

/* Cart */

.blestabody .card-steps {
	background: var(--color-box-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%) !important;
	color: var(--color-box-foreground) !important;		
}

/* Highlight */

.blestacontainer .list-group.list-options a.list-group-item:hover,
.blestacontainer .list-group.list-options a.list-group-item:focus,
.blestacontainer a.list-group-item:hover,
.blestacontainer a.list-group-item:focus {
	background-color: var(--color-box-active-background) !important;
}

.blestacontainer a.list-group-item.active,
.blestacontainer a.list-group-item.active:hover,
.blestacontainer a.list-group-item.active:focus {
	background-color: var(--color-box-active-background) !important;
}

.blestacontainer .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
	background-color: var(--color-box-active-background) !important;
}

/* Tabs */

.blestacontainer .nav .nav-item .nav-link {
	text-decoration: none;
}

/* Login */

.blestacontainer .row.login {
	padding-top: 3%;
}

/* Primary Button */

.blestacontainer .btn-primary,
.blestacontainer .btn-primary:visited,
.blestacontainer .btn-primary:active,
.blestacontainer .btn-success,
.blestacontainer .btn-success:visited,
.blestacontainer .btn-success:active,
.blestacontainer .btn-warning,
.blestacontainer .btn-warning:visited,
.blestacontainer .btn-warning:active,
.blestacontainer .btn-outline-primary,
.blestacontainer .btn-outline-primary:visited,
.blestacontainer .btn-outline-primary:active {
	color: var(--color-primary-foreground) !important;
	border: solid 1px var(--color-primary-background-border) !important; 
	background: var(--color-primary-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%) !important;	
	text-shadow: var(--color-primary-foreground-shadow) 1px 1px !important;
}

.blestacontainer .btn-primary:hover,
.blestacontainer .btn-success:hover,
.blestacontainer .btn-warning:hover,
.blestacontainer .btn-warning:focus,
.blestacontainer .btn-outline-primary:hover {
	color: var(--color-primary-active-foreground) !important;
	border: solid 1px var(--color-primary-active-background-border) !important;
	background: var(--color-primary-active-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%) !important;
	text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px !important;	
}

/* Secondary Button */

.blestacontainer .btn-info,
.blestacontainer .btn-info:active,
.blestacontainer .btn-info:visited,
.blestacontainer .btn-danger,
.blestacontainer .btn-danger:active,
.blestacontainer .btn-danger:visited,
.blestacontainer .btn-default,
.blestacontainer .btn-default:active,
.blestacontainer .btn-default:visited,
.blestacontainer .btn-light,
.blestacontainer .btn-light:active,
.blestacontainer .btn-light:visited {
	color: var(--color-secondary-foreground) !important;
	border: solid 1px var(--color-secondary-background-border) !important;
	background: var(--color-secondary-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%) !important;
	text-shadow: var(--color-secondary-foreground-shadow) 1px 1px !important;	
}

.blestacontainer .btn-info:hover,
.blestacontainer .btn-danger:hover,
.blestacontainer .btn-default:hover,
.blestacontainer .btn-default:focus,
.blestacontainer .btn-light:hover {
	color: var(--color-secondary-active-foreground) !important;
	border: solid 1px var(--color-secondary-active-background-border) !important;
	background: var(--color-secondary-active-background) !important;
	background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%) !important;
	text-shadow: var(--color-secondary-active-foreground-shadow) 1px 1px !important;		
}