File: //home/arjun/projects/buyercall_new/buyercall/buyercall/assets/styles/theme/_main.scss
/*
* Document : main.scss
* Author : pixelcave
* Description: The main stylesheet of the template
*
* Structure (with shortcodes):
* (#m01mls) MAIN LAYOUT
* (#m02hds) HEADER
* (#m03sns) SIDEBAR/NAVIGATION
* (#m04mcs) MAIN CONTENT
* (#m05pgs) PAGES
* (#m06bos) BOOTSTRAP OVERWRITE/EXTEND STYLES
* (#m07hes) HELPERS
* (#m08ths) THEMES
* (#m09res) RESPONSIVE
* (#m10prs) PRINT
*/
/*
=================================================================
(#m01mls) MAIN LAYOUT
=================================================================
*/
/* Preloader */
#page-wrapper.page-loading {
overflow: hidden;
.preloader {
display: block;
}
#page-container {
opacity: 0;
}
}
.preloader {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #323d40;
z-index: 99999;
.inner {
position: fixed;
top: 20%;
left: 50%;
margin: 0 0 0 -50px;
width: 100px;
height: 100px;
text-align: center;
}
}
.preloader-spinner {
width: 50px;
height: 50px;
margin: 0 auto;
border: 3px solid transparent;
border-left-color: #2eb398;
border-right-color: #2eb398;
border-radius: 50%;
-webkit-animation: nprogress-spinner .5s linear infinite;
-moz-animation: nprogress-spinner .5s linear infinite;
-ms-animation: nprogress-spinner .5s linear infinite;
-o-animation: nprogress-spinner .5s linear infinite;
animation: nprogress-spinner .5s linear infinite;
}
/* Main Structure */
html {
width: 100%;
height: 100%;
}
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #323d40;
font-size: 13px;
background-color: #323d40;
margin-bottom: 0px;
padding-bottom: 0px;
height: 100%;
width: 100%;
}
#page-container, #main-container, #page-content + footer {
min-width: 320px;
}
#page-container {
opacity: 1;
width: 100%;
padding: 0;
margin: 0 auto;
overflow-x: hidden;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
background-color: #323d40;
}
#sidebar, #sidebar-alt {
background-color: #41586e !important;
}
#sidebar {
width: 0;
position: absolute;
overflow: hidden;
}
#sidebar-alt {
width: 0;
position: absolute;
overflow: hidden;
right: 0;
}
#page-content {
padding: 10px 5px 1px;
background-color: #ebf1f2;
+ footer {
padding: 10px;
font-size: 12px;
background-color: #fafcfc;
&.footer-inverse {
color: #ffffff;
background-color: #323d40;
}
}
}
/* Fixed Header */
#page-container {
&.header-fixed-top {
padding: 0px 0 0;
}
&.header-fixed-bottom {
padding: 0 0 0px;
}
}
/* Sidebar + Static Header */
.sidebar-visible-xs {
#sidebar {
width: 210px;
}
#main-container {
margin-left: 210px;
margin-right: -210px;
}
}
/* Sidebar + Fixed Header */
.header-fixed-top #sidebar, .header-fixed-bottom #sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
background-color:#344658 !important;
}
.sidebar-visible-xs {
&.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom {
left: 210px;
right: -210px;
}
}
/*header hi text*/
.header-text{
margin-right: 15px;
color: #FFF;
padding-top: 5px;
}
/* Alternative Sidebar + Static Header */
.sidebar-alt-visible-xs {
#sidebar-alt {
width: 210px;
}
#main-container {
margin-right: 210px;
margin-left: -210px;
}
}
/* Alternative Sidebar + Fixed Header */
.header-fixed-top #sidebar-alt, .header-fixed-bottom #sidebar-alt {
position: fixed;
right: 0;
top: 0;
bottom: 0;
}
.sidebar-alt-visible-xs {
&.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom {
right: 210px;
left: -210px;
}
}
/* Fixed Footer */
.footer-fixed {
#page-content {
+ footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
}
padding-bottom: 41px;
}
&.sidebar-visible-xs #page-content + footer {
right: -210px;
left: 210px;
}
&.sidebar-alt-visible-xs #page-content + footer {
right: 210px;
left: -210px;
}
&.header-fixed-bottom #page-content + footer {
bottom: 50px;
}
}
/*
=================================================================
(#m02hds) HEADER
=================================================================
*/
header {
&.navbar-default, &.navbar-inverse {
padding: 0;
margin: 0;
min-width: 320px;
border: none;
}
}
/* Header Nav */
.navbar-default .navbar-nav > li > a {
color: #323d40;
}
.navbar-inverse .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > {
li > a {
&:hover, &:focus {
color: #ffffff;
background-color: #2eb398;
}
}
.active > a {
color: #ffffff;
background-color: #2eb398;
&:hover, &:focus {
color: #ffffff;
background-color: #2eb398;
}
}
.open > a {
color: #ffffff;
background-color: #2eb398;
&:hover, &:focus {
color: #ffffff;
background-color: #2eb398;
}
}
}
.navbar-inverse {
.navbar-nav > {
li > a {
&:hover, &:focus {
color: #ffffff;
background-color: #2eb398;
}
}
.active > a {
color: #ffffff;
background-color: #2eb398;
&:hover, &:focus {
color: #ffffff;
background-color: #2eb398;
}
}
.open > a {
color: #ffffff;
background-color: #2eb398;
&:hover, &:focus {
color: #ffffff;
background-color: #2eb398;
}
}
}
.collapse.in .navbar-nav .open .dropdown-menu > li > a {
color: #dddddd;
}
}
.nav.navbar-nav-custom {
float: left;
margin: 0;
> li {
min-height: 50px;
float: left;
> a {
min-width: 50px;
padding: 5px 7px;
line-height: 40px;
text-align: center;
color: #323d40;
position: relative;
.label-indicator {
position: absolute;
top: 4px;
right: 4px;
min-width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
font-weight: 600;
border-radius: 10px;
}
}
}
}
.navbar-inverse .nav.navbar-nav-custom > li > a {
color: #ffffff;
}
.nav.navbar-nav-custom {
> li {
&.open > a {
background-color: #2eb398;
color: #ffffff;
}
> a {
&:hover, &:focus {
background-color: #2eb398;
color: #ffffff;
}
> img {
width: 40px;
height: 40px;
border-width: 2px;
border-style: solid;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.75);
border-radius: 20px;
vertical-align: top;
}
}
}
.dropdown-menu {
margin-top: 0;
}
}
/* Header Search */
.navbar-form {
margin: 7px 0;
}
.collapsing .navbar-form, .collapse.in .navbar-form {
margin-left: -15px;
margin-right: -15px;
}
.collapsing .navbar-form .form-group, .collapse.in .navbar-form .form-group {
margin-bottom: 0;
}
.navbar-form-custom {
padding: 0;
height: 50px;
padding: 5px 10px;
.form-control {
margin: 0;
height: 40px;
width: 65px;
opacity: .75;
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
&:hover {
opacity: 1;
}
&:focus {
opacity: 1;
width: 140px;
}
}
}
.navbar-inverse .navbar-form-custom .form-control {
border: none;
}
/*
=================================================================
(#m03sns) SIDEBAR/NAVIGATION
=================================================================
*/
/* Sidebar Content */
.sidebar-content {
width: 210px;
color: #ffffff;
}
.sidebar-section {
padding: 10px;
> .sidebar-header {
margin-top: 0;
}
}
/* Sidebar Title */
.sidebar-title {
height: 50px;
line-height: 50px;
padding: 0 10px;
margin: 0;
font-weight: 300;
font-size: 16px;
display: block;
color: #ffffff;
background: rgba(0, 0, 0, 0.2);
}
a.sidebar-title {
&:hover, &:focus {
background-color: #2eb398;
color: #ffffff;
text-decoration: none;
}
}
.sidebar-title i {
font-size: 14px;
display: inline-block;
width: 18px;
text-align: center;
margin-right: 10px;
opacity: .5;
&.pull-left {
margin: 20px 10px 0 0;
}
&.pull-right {
margin: 20px 0 0 10px;
}
}
/* Sidebar Navigation */
.sidebar-nav {
list-style: none;
margin: 0;
padding: 10px 0 0;
}
.sidebar-header {
margin: 14px 0 0;
padding: 8px;
line-height: 12px;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
opacity: .75;
}
.sidebar-nav {
.sidebar-header:first-child {
margin-top: 0;
}
a {
display: block;
padding: 0 10px;
font-weight: 600;
min-height: 38px;
line-height: 38px;
&:hover, &:focus, &.active, &.open {
color: #ffffff;
text-decoration: none;
}
}
li.active > a {
color: #ffffff;
text-decoration: none;
}
a.open, li.active > a {
background: #2a3846;
}
a {
&.active {
background-color: #2eb398;
}
> {
.sidebar-nav-icon {
margin-right: 7px;
display: inline-block;
opacity: .5;
width: 18px;
font-size: 14px;
text-align: center;
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.sidebar-nav-indicator {
display: inline-block;
opacity: .5;
width: 18px;
font-size: 14px;
text-align: center;
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
float: right;
line-height: inherit;
margin-left: 4px;
font-size: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
}
&:hover {
opacity: 1;
> {
.sidebar-nav-icon, .sidebar-nav-indicator {
opacity: 1;
}
}
}
&.active, &.open {
opacity: 1;
> .sidebar-nav-icon {
opacity: 1;
}
}
}
li.active > a {
opacity: 1;
> .sidebar-nav-icon {
opacity: 1;
}
}
a {
&.active > .sidebar-nav-indicator, &.open > .sidebar-nav-indicator {
opacity: 0.25;
-webkit-transform: rotate(-225deg) rotateZ(0deg);
transform: rotate(-225deg) rotateZ(0deg);
}
}
li.active > a > .sidebar-nav-indicator {
display: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.active > ul, .open + ul {
background-color: #2a3846 !important;
}
li.active > ul {
display: block;
}
ul {
a {
margin: 0 0 0 10px;
font-size: 12px;
padding-left: 10px;
min-height: 32px;
line-height: 32px;
font-weight: normal;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
&.active {
background-color: #2eb398;
&:hover {
background-color: #2eb398;
}
}
}
ul {
margin: 0 0 0 10px;
}
}
}
/* Sidebar Color Themes */
.sidebar-themes {
list-style: none;
margin: 0;
padding-bottom: 7px;
text-align: center;
opacity: .5;
-webkit-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
&:hover {
opacity: 1;
}
li {
float: left;
margin: 0 5px 5px 0;
a {
display: block;
width: 20px;
height: 20px;
border-radius: 3px;
border: 2px solid rgba(255, 255, 255, 0.25);
&:hover {
border-color: rgba(255, 255, 255, 0.5);
}
}
&.active a {
border-color: #ffffff;
}
}
}
/*
=================================================================
(#m04mcs) SUBSCRIPTION BILLING WARNING
=================================================================
*/
.billing-warning {
background-color:#FFF;
padding: 16px 15px 5px 15px;
a {
color:#FFF;
&:hover {
color:#FFF;
}
}
}
.billing-error {
background-color:#FFF;
padding: 16px 15px 5px 15px;
a {
color:#FFF;
&:hover {
color:#FFF;
}
}
}
/*
=================================================================
(#m04mcs) CHARTS
=================================================================
*/
.chart-content {
}
/*
=================================================================
(#m04mcs) MAIN CONTENT
=================================================================
*/
/* Content Header */
.content-header {
background-color: #ffffff;
h1, h2 {
margin: 0;
font-size: 28px;
line-height: 32px;
}
small .content-header small {
font-size: 17px;
}
}
.header-section {
padding: 25px 10px;
}
.content-header {
margin: -10px -5px 10px;
}
.content-header-media {
position: relative;
height: 280px;
overflow: hidden;
.header-section {
z-index: 200;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
background: rgba(0, 0, 0, 0.5);
}
> {
img {
position: absolute;
top: 0;
left: 50%;
width: 2560px;
height: 280px;
margin-left: -1280px;
}
.content-header-media-map {
height: 300px;
}
}
small {
color: #cccccc;
}
}
/* Blocks */
.block {
margin: 0 0 10px;
padding: 20px 15px 1px;
background-color: #ffffff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
.block {
border: 1px solid #dae5e8;
}
&.full {
padding: 20px 15px;
}
.block-content-full {
margin: -20px -15px -1px;
}
.block-content-mini-padding {
padding: 8px;
}
&.full .block-content-full {
margin: -20px -15px;
}
}
.block-title {
margin: -20px -15px 20px;
border-bottom: 1px solid #dae5e8;
border-top-left-radius: 3px;
background-color:#2A3846;
color:#fff;
border-top-right-radius: 3px;
h1, h2, h3, h4, h5, h6 {
display: inline-block;
font-size: 18px;
line-height: 1.4;
margin: 0;
padding: 17px 15px 12px;
font-weight: normal;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-size: 13px;
font-weight: normal;
text-transform: none;
}
.nav-tabs {
padding: 0;
margin: 0 6px;
border-bottom: none;
> li {
> a {
border: none;
min-height: 45px;
line-height: 45px;
padding-top: 0;
padding-bottom: 0;
margin: 9px 2px 0;
&:hover {
background-color: #f9f9f9;
}
}
&.active > a {
border: none;
background-color: #dae5e8;
&:hover, &:focus {
border: none;
background-color: #dae5e8;
}
}
}
}
}
.block-options {
margin: 0 10px;
line-height: 54px;
.label {
display: inline-block;
padding: 6px;
vertical-align: middle;
font-size: 13px;
}
.dropdown-menu {
margin-top: 8px;
}
.btn {
border-radius: 17px;
padding-right: 8px;
padding-left: 8px;
min-width: 34px;
text-align: center;
i {
font-size: 14px;
}
}
}
.block-section {
margin-bottom: 20px;
}
/* Widgets */
.widget {
border-radius: 3px;
}
.widget-image {
border-radius: 3px;
> img {
border-radius: 3px;
}
}
.widget-image-content {
border-radius: 3px;
}
.widget {
background-color: #ffffff;
margin-bottom: 10px;
position: relative;
}
a.widget {
display: block;
&:hover, &:focus, &:active {
text-decoration: none;
}
.widget-content {
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
&:hover .widget-content, &:focus .widget-content, &:active .widget-content {
-webkit-box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2);
}
}
.widget-image {
height: 300px;
overflow: hidden;
> i {
position: absolute;
right: 30px;
bottom: 30px;
color: #ffffff;
font-size: 112px;
opacity: .3;
}
}
.widget-image-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 15px 25px;
background: rgba(0, 0, 0, 0.6);
}
.widget-content {
padding: 15px;
}
.widget-content-full {
padding: 0;
}
.widget .widget-content {
&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
}
.widget-content {
.pull-left {
margin-right: 20px;
}
.pull-right {
margin-left: 20px;
}
}
.widget-heading {
margin: 10px 0;
}
.widget-text {
color: #ffffff;
opacity: .8;
}
.widget-icon {
width: 74px;
height: 74px;
line-height: 70px;
font-size: 28px;
text-align: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
/* Feed */
.media-feed {
margin-bottom: 0;
> .media {
margin-top: 0;
padding: 20px 20px 0;
border-top: 1px dotted #dbe1e8;
&:first-child {
border-top: none;
}
}
&.media-feed-hover > .media:hover {
background-color: #f9f9f9;
}
}
/* Content which contains floats */
.content-float {
.pull-left {
margin: 0 20px 20px 0;
}
.pull-right {
margin: 0 0 20px 20px;
}
}
/* Scroll to top link */
#to-top {
display: none;
position: fixed;
bottom: 45px;
right: 15px;
border-radius: 3px;
padding: 4px 10px;
font-size: 22px;
text-align: center;
color: #ffffff;
background-color: #000000;
opacity: .1;
&:hover {
color: #ffffff;
background-color: #3498DB;
text-decoration: none;
opacity: 1;
}
}
/*
=================================================================
(#m05pgs) DATA TABLE
=================================================================
*/
.datatable-top-row {
background-color: #FAFCFC;
padding: 12px 0px;
width: auto;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #EBF1F2;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
margin: 0px 0px 0px 0px;
}
.datatable-table-top-border {
border-top-width: 1px;
}
/*
=================================================================
FIELDS
=================================================================
*/
.phone-field {
margin-bottom: 15px;
}
.phone-field-margin {
margin-top: 5px !important;
}
/*
=================================================================
(#m05pgs) PAGES
=================================================================
*/
/* Login */
#login-container {
position: absolute;
width: 300px;
top: 50px;
left: 50%;
margin-left: -150px;
z-index: 1000;
.register-terms {
line-height: 30px;
margin-right: 10px;
float: left;
}
}
/* Full Background Image */
img.full-bg {
min-height: 100%;
min-width: 1280px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
&.full-bg-bottom {
top: auto;
bottom: 0;
}
}
@media screen and (max-width: 1280px) {
img.full-bg {
left: 50%;
margin-left: -640px;
}
}
/* Calendar */
.calendar-events {
list-style: none;
margin: 0;
padding: 0;
li {
color: #ffffff;
margin-bottom: 6px;
padding: 6px 10px;
border-radius: 3px;
background-color: #323d40;
opacity: .8;
&:hover {
cursor: move;
opacity: 1;
}
}
}
/* Gallery */
.gallery img {
max-width: 100%;
}
a {
&[data-toggle="lightbox-image"] {
img {
max-width: 100%;
}
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
&.gallery-link {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
&[data-toggle="lightbox-image"]:hover img {
opacity: .75;
}
}
.gallery-image-container {
position: relative;
overflow: hidden;
margin-bottom: 30px;
}
.gallery-image-options {
padding: 9px 0;
text-align: center;
position: absolute;
top: -100px;
left: 0;
right: 0;
opacity: 0;
background: rgba(0, 0, 0, 0.6);
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.gallery-image-container:hover .gallery-image-options {
top: 0;
opacity: 1;
}
/* Charts */
.pie-chart .pie-avatar {
position: absolute;
top: 8px;
left: 8px;
}
.chart {
height: 360px;
}
.chart-tooltip, .mini-chart-tooltip {
position: absolute;
display: none;
color: #ffffff;
background-color: #000000;
padding: 5px 10px;
}
.chart-pie-label {
font-size: 12px;
text-align: center;
padding: 8px 12px;
color: #ffffff;
}
.mini-chart-tooltip {
left: 0;
top: 0;
visibility: hidden;
}
.legend table td {
padding: 3px 5px;
font-size: 17px;
text-transform: uppercase;
}
/* Add agent button */
.agent-button {
position: relative;
top: 10px;
float: left !important;
margin-bottom: 5px;
}
.agent-button-header {
padding-left: 0px;
}
.agent-header-title {
padding-right: 15px;
}
/* Timeline */
.timeline {
position: relative;
}
.timeline-header {
margin: 0;
font-size: 18px;
font-weight: normal;
padding: 0 15px;
min-height: 60px;
line-height: 60px;
background-color: #ffffff;
border-bottom: 4px solid #ebf1f2;
z-index: 500;
text-transform: uppercase;
}
.timeline-list {
list-style: none;
margin: 0;
padding: 0;
&:after {
position: absolute;
display: block;
width: 4px;
top: 0;
left: 94px;
bottom: 0;
content: "";
background-color: #ebf1f2;
z-index: 1;
}
}
.timeline-header + .timeline-list:after {
top: 60px;
}
.timeline-list li {
position: relative;
margin: 0;
padding: 20px 0;
}
.timeline-icon {
position: absolute;
left: 75px;
top: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 14px;
text-align: center;
color: #ffffff;
background-color: #3498DB;
border-radius: 50%;
z-index: 500;
}
.timeline-time {
float: left;
width: 60px;
font-weight: 300;
font-size: 15px;
text-align: right;
small {
font-size: 13px;
font-weight: 300;
}
}
.timeline-content {
margin-left: 126px;
}
.block-content-full .timeline-content {
padding-right: 20px;
}
/* Error */
#error-container {
padding: 20px;
position: relative;
background: rgba(0, 0, 0, 0.75);
h1 {
font-size: 156px;
color: #ffffff;
font-weight: 600;
margin: 0 0 10px;
}
h2 {
color: #eeeeee;
margin: 0 0 50px;
line-height: 1.4;
}
.form-control {
border-color: #ffffff;
}
}
/* Pricing Tables */
.table.table-pricing {
background-color: #ffffff;
text-align: center;
border: 5px solid #ffffff;
-webkit-transition: all .25s linear;
transition: all .25s linear;
&.table-featured, &:hover {
border-color: #3498DB;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-box-shadow: 0 3px 3px 1px #eeeeee;
box-shadow: 0 3px 3px 1px #eeeeee;
}
th {
text-align: center;
background-color: #3498DB;
border-bottom: none;
color: #ffffff;
padding-top: 15px;
padding-bottom: 15px;
}
td {
font-size: 14px;
padding-top: 10px;
padding-bottom: 10px;
}
}
/* Images */
.img-grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-grayscale-animated {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
&:hover {
-webkit-filter: grayscale(25%);
filter: grayscale(25%);
}
}
/*
=================================================================
(#m06bos) BOOTSTRAP OVERWRITE/EXTEND STYLES
=================================================================
*/
/* Navbar */
.navbar {
&.navbar-default {
background-color: #fafcfc;
}
&.navbar-inverse {
background-color: #273033;
}
}
.navbar-fixed-top, .navbar-fixed-bottom {
border-width: 0;
background-color: #2a3846 !important;
}
/* Typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
h5, .h5 {
font-size: 13px !important;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
font-weight: 300;
color: #879599;
}
h1, h2, h3 {
margin-bottom: 15px;
}
.text-primary {
color: #3498DB;
&:hover {
color: #3498DB;
}
}
a {
color: #2eb398;
&:hover, &:focus {
color: #2eb398;
}
&.text-primary {
color: #2eb398;
&:hover, &:focus {
color: #2eb398;
}
}
}
.text-danger {
color: #dd817b;
&:hover {
color: #dd817b;
}
}
a.text-danger {
color: #dd817b;
&:hover, &:focus {
color: #dd817b;
}
}
.text-warning {
color: #fa9c61;
&:hover {
color: #fa9c61;
}
}
a.text-warning {
color: #fa9c61;
&:hover, &:focus {
color: #fa9c61;
}
}
.text-success {
color: #7fb364;
&:hover {
color: #7fb364;
}
}
a.text-success {
color: #7fb364;
&:hover, &:focus {
color: #7fb364;
}
}
.text-info {
color: #3498db;
&:hover {
color: #3498db;
}
}
a.text-info {
color: #3498db;
&:hover, &:focus {
color: #3498db;
}
}
.text-muted {
color: #999999;
&:hover {
color: #999999;
}
}
a.text-muted {
color: #999999;
&:hover, &:focus {
color: #999999;
}
}
.text-light {
color: #ffffff;
&:hover {
color: #ffffff;
}
}
a.text-light {
color: #ffffff;
&:hover, &:focus {
color: #ffffff;
}
}
.text-dark {
color: #000000;
&:hover {
color: #000000;
}
}
a.text-dark {
color: #000000;
&:hover, &:focus {
color: #000000;
}
}
b, strong {
font-weight: 600;
}
ul, ol {
padding-left: 30px;
}
p {
line-height: 1.6;
}
.well {
background-color: #f9f9f9;
border: 1px solid #eeeeee;
box-shadow: none;
}
.page-header {
border-bottom-width: 1px;
border-bottom-color: #eeeeee;
margin: 30px 0 20px;
}
.sub-header {
margin: 20px 0;
padding: 10px 0;
border-bottom: 1px dashed #dddddd;
}
blockquote {
margin: 20px 0;
padding: 30px 60px 30px 20px;
position: relative;
width: 100%;
border: none !important;
background-color: #ebf1f2;
border-radius: 3px;
&:before {
display: block;
content: "\201C";
font-family: serif;
font-size: 96px;
position: absolute;
right: 10px;
top: -20px;
color: #000000;
}
&.pull-right:before {
left: 10px;
right: auto;
}
}
article p {
font-size: 18px;
line-height: 1.7;
}
/* Forms */
label {
font-size: 13px;
font-weight: bold;
}
fieldset legend {
font-size: 18px;
padding: 30px 0 10px;
border-bottom: 2px solid #ebf1f2;
}
input {
&[type="file"] {
padding-top: 7px;
}
&[type="text"].form-control, &[type="password"].form-control, &[type="email"].form-control {
-webkit-appearance: none;
}
}
textarea.form-control {
-webkit-appearance: none;
}
.form-control {
padding: 6px 8px;
max-width: 100%;
margin: 1px 0;
color: #323d40;
border-color: #dae5e8;
font-size: 13px;
}
.form-horizontal .form-control-static, .radio label, .checkbox label {
font-size: 13px;
}
label {
&.radio, &.radio-inline, &.checkbox, &.checkbox-inline {
font-size: 13px;
}
}
.form-control-borderless {
.form-control, .input-group-addon, &:focus {
border: transparent !important;
}
border: transparent !important;
}
.input-group {
margin-top: 1px;
margin-bottom: 1px;
.form-control {
margin-top: 0;
}
}
.form-control:focus {
border-color: #2eb398;
}
.help-block {
margin-top: 8px;
color: #999999;
font-weight: 400;
font-style: italic;
}
.input-group-addon {
min-width: 45px;
text-align: center;
background-color: #ffffff;
border-color: #dae5e8;
}
.form-horizontal .control-label {
margin-bottom: 5px;
}
.form-bordered {
margin: -15px -15px -1px;
}
.modal-body .form-bordered {
margin-bottom: -20px;
}
.form-bordered {
fieldset legend {
margin: 0;
padding-left: 20px;
padding-right: 20px;
}
.form-group {
margin: 0;
border: none;
display:block;
padding: 15px;
text-align:left;
border-bottom: 1px solid #ebf1f2;
&.form-actions {
background-color: #fafcfc;
border-bottom: none;
}
}
}
.form-horizontal.form-bordered .form-group {
padding-left: 0;
padding-right: 0;
}
.form-bordered .help-block {
margin-bottom: 0;
}
.has-success .form-control, .has-warning .form-control, .has-error .form-control {
-webkit-box-shadow: none;
box-shadow: none;
}
.has-success {
.help-block, .control-label, .input-group-addon, .checkbox, .checkbox-inline, .radio, .radio-inline {
color: #7fb364;
}
.form-control, .input-group-addon {
border-color: #9ddd7b;
background-color: #ffffff;
}
.form-control:focus {
border-color: #7fb364;
}
}
.has-warning {
.help-block, .control-label, .input-group-addon, .checkbox, .checkbox-inline, .radio, .radio-inline {
color: #fa9c61;
}
.form-control, .input-group-addon {
border-color: #fa9c61;
background-color: #ffffff;
}
.form-control:focus {
border-color: #e58f5a;
}
}
.has-error {
.help-block, .control-label, .input-group-addon, .checkbox, .checkbox-inline, .radio, .radio-inline {
color: #dd817b;
}
.form-control, .input-group-addon {
border-color: #dd817b;
background-color: #ffffff;
}
.form-control:focus {
border-color: #cc7872;
}
}
/* Form Select Switches */
.switch {
margin: 1px 0;
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
input {
position: absolute;
opacity: 0;
}
span {
position: relative;
display: inline-block;
width: 54px;
height: 28px;
border-radius: 4px;
background-color: #dddddd;
-webkit-transition: background-color .5s, border-radius .12s ease-in-out;
transition: background-color .5s, border-radius .12s ease-in-out;
&:after {
content: "";
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
width: 24px;
background-color: #ffffff;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
}
input:checked + span {
&:after {
left: 27px;
width: 24px;
top: 2px;
bottom: 2px;
}
background-color: #eeeeee;
}
}
.switch-default input:checked + span {
background-color: #dae5e8;
}
.switch-warning input:checked + span {
background-color: #fa9c61;
}
.switch-danger input:checked + span {
background-color: #dd817b;
}
.switch-info input:checked + span {
background-color: #51b7dd;
}
.switch-success input:checked + span {
background-color: #9ddd7b;
}
.switch-primary input:checked + span {
background-color: #2eb398;
}
/* Tables */
.table {
&.table-vcenter {
th, td {
vertical-align: middle;
}
}
thead > tr > {
th {
font-size: 13px;
font-weight: 600;
> small {
font-weight: 400;
font-size: 75%;
}
padding-top: 14px;
padding-bottom: 14px;
padding-left: 8px !important;
padding-right: 8px !important;
}
td {
padding-top: 14px;
padding-bottom: 14px;
}
}
tfoot > tr > {
th, td {
padding-top: 14px;
padding-bottom: 14px;
}
}
tbody > tr > {
th, td {
padding-top: 12px;
padding-bottom: 12px;
}
}
&.table-condensed tbody > tr > {
th, td {
padding-top: 5px;
padding-bottom: 5px;
}
}
tfoot > tr > {
th, td {
background-color: #fafcfc;
}
}
}
.table-borderless tbody > tr > {
th, td {
border-top-width: 0;
}
}
.table {
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td, tbody + tbody {
border-color: #ebf1f2;
}
}
.table-bordered {
border-color: #ebf1f2;
border-width: 0px;
> {
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
border-color: #ebf1f2;
}
}
}
.table-hover > tbody > tr:hover > {
td, th {
background-color: #ebf1f2;
}
}
/* List Group */
.list-group-item-pricing {
border: none !important;
}
.list-group-item {
border-color: #ebf1f2;
}
a.list-group-item {
&.active {
background-color: #2eb398;
border-color: #2eb398;
&:hover, &:focus {
background-color: #2eb398;
border-color: #2eb398;
}
.list-group-item-text, &:hover .list-group-item-text, &:focus .list-group-item-text {
color: #ffffff;
}
}
&:hover, &:focus {
background-color: #fafcfc;
}
&.active > .badge {
background: rgba(0, 0, 0, 0.4);
color: #ffffff;
}
}
/* Navs */
.nav-pills > li.active > a {
color: #fff;
background-color: #2eb398;
&:hover, &:focus {
color: #fff;
background-color: #2eb398;
}
}
.dropdown-menu > {
li > a {
&:hover, &:focus {
color: #fff;
background-color: #2eb398;
}
}
.active > a {
color: #fff;
background-color: #2eb398;
&:hover, &:focus {
color: #fff;
background-color: #2eb398;
}
}
}
.nav {
.open > a {
color: #fff;
background-color: #2eb398;
&:hover, &:focus {
color: #fff;
background-color: #2eb398;
}
}
> li i {
font-size: 14px;
}
}
.nav-pills > .active > a > .badge {
color: #2eb398;
}
.nav-stacked > li > a {
margin: 4px 0 0;
}
.nav {
.caret {
border-top-color: #2eb398;
border-bottom-color: #2eb398;
}
a {
&:hover .caret, &:focus .caret {
border-top-color: #2eb398;
border-bottom-color: #2eb398;
}
}
> li > a {
&:hover, &:focus {
background-color: #fafcfc;
}
}
}
.nav-tabs {
border-bottom-color: #ebf1f2;
> li {
margin-bottom: 0;
> a {
padding-left: 7px;
padding-right: 7px;
margin-bottom: -1px;
&:hover {
border-color: #ebf1f2;
}
}
&.active > a {
color: #323d40;
border-color: #ebf1f2;
border-bottom-color: transparent;
&:hover, &:focus {
color: #323d40;
border-color: #ebf1f2;
border-bottom-color: transparent;
}
}
}
}
.nav-pills > li.active > a > .badge {
background: rgba(0, 0, 0, 0.2);
color: #ffffff;
}
.nav-users {
list-style: none;
margin: 0;
padding: 0;
}
.nav-users-inactive a {
opacity: 0.4;
}
.nav-users a {
display: block;
min-height: 56px;
padding: 8px 10px 8px 60px;
position: relative;
color: #879599;
border-radius: 3px;
&:hover {
color: #ffffff;
background-color: #2eb398;
text-decoration: none;
opacity: 1;
}
}
.nav-users-avatar {
position: absolute;
top: 8px;
left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
}
.nav-users-indicator {
position: absolute;
top: 5px;
left: 5px;
}
.nav-users-heading {
display: block;
margin-top: 2px;
color: #ffffff;
font-weight: 600;
}
.dropdown-menu {
min-width: 180px;
padding: 0;
font-size: 13px;
border-color: #dae5e8;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
display: block;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.open > .dropdown-menu, .dropdown-menu.open {
-webkit-transform: scale(1);
transform: scale(1);
}
.lt-ie10 {
.dropdown-menu {
display: none;
}
.open > .dropdown-menu, .dropdown-menu.open {
display: block;
}
}
.dropdown-menu {
> li > a {
padding: 8px 10px;
}
i {
opacity: .2;
line-height: 17px;
}
a:hover i {
opacity: .5;
}
.divider {
margin: 3px 0;
padding: 0 !important;
background-color: #f0f0f0;
}
}
li.dropdown-header {
padding: 8px 10px;
color: #323d40;
background-color: #ebf1f2;
}
.dropdown-submenu {
position: relative;
> .dropdown-menu {
top: 0;
left: 100%;
margin-top: -3px;
margin-left: 0;
}
&:hover > .dropdown-menu {
display: block;
}
&.pull-left {
float: none;
> .dropdown-menu {
left: -100%;
margin-left: 10px;
}
}
}
.collapse.in .dropdown.open .dropdown-menu {
display: block;
position: static;
margin: 0 0 0 15px;
left: auto;
top: auto;
}
.pagination > {
li > {
a, span {
font-weight: 600;
color: #2eb398;
margin-left: 5px;
margin-right: 5px;
border: none !important;
border-radius: 3px !important;
background: transparent;
}
}
.active > {
a, span, a:hover, span:hover, a:focus, span:focus {
background-color: #2eb398;
}
}
.disabled > {
span {
background: transparent;
&:hover, &:focus {
background: transparent;
}
}
a {
background: transparent;
&:hover, &:focus {
background: transparent;
}
}
}
}
.pager > li > {
a, span {
border-color: #ebf1f2;
}
a:hover {
background-color: #2eb398;
border-color: #2eb398;
color: #ffffff;
}
}
.pagination > li > a:hover {
background-color: #2eb398;
border-color: #2eb398;
color: #ffffff;
}
.pager > li.disabled > a:hover {
border-color: #ebf1f2;
}
/* Popover */
.popover {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.popover-title {
background: none;
border: none;
font-size: 15px;
font-weight: 600;
padding-top: 7px;
padding-bottom: 2px;
}
/* Tooltip */
.tooltip {
z-index: 1051;
&.in {
opacity: 1;
}
}
.tooltip-inner {
padding: 4px 6px;
background-color: #000000;
color: #ffffff;
}
.tooltip {
&.top .tooltip-arrow, &.top-left .tooltip-arrow, &.top-right .tooltip-arrow {
border-top-color: #000000;
}
&.right .tooltip-arrow {
border-right-color: #000000;
}
&.left .tooltip-arrow {
border-left-color: #000000;
}
&.bottom .tooltip-arrow, &.bottom-left .tooltip-arrow, &.bottom-right .tooltip-arrow {
border-bottom-color: #000000;
}
}
/* Breadcrumps */
.breadcrumb {
background-color: transparent;
i {
font-size: 14px;
}
}
.breadcrumb-top {
font-size: 12px;
text-align: right;
margin-bottom: 0;
padding-bottom: 7px;
}
/* Progress Bars */
.progress, .progress-bar {
height: 17px;
line-height: 17px;
}
.progress-bar-danger {
background-color: #dd817b;
}
.progress-bar-warning {
background-color: #fA9c61;
}
.progress-bar-success {
background-color: #9ddd7b;
}
.progress-bar-info {
background-color: #51b7dd;
}
/* Modals */
.modal-content {
border-radius: 3px;
}
.modal-header {
padding: 17px 15px 15px;
border-bottom: 1px solid #eeeeee;
background-color: #f9f9f9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
.nav-tabs {
margin: 0 -3px -16px;
}
}
.modal-title {
font-weight: 300;
}
.modal-body {
padding: 20px 15px;
}
.modal-footer {
margin-top: 0;
padding: 9px 15px 10px;
border-top: 1px solid #eeeeee;
background-color: #f9f9f9;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.modal {
&.fade .modal-dialog {
-webkit-transition: all .35s ease-out;
transition: all .35s ease-out;
-webkit-transform: translate(0, 25%) scale(0.25);
transform: translate(0, 25%) scale(0.25);
}
&.in .modal-dialog {
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
}
}
/* Buttons */
.btn {
margin: 1px 0;
background-color: #ffffff;
&.disabled, &[disabled] {
opacity: .4;
}
}
.search-btn {
background-color: #ffffff;
border: 1px solid transparent;
}
fieldset[disabled] .btn {
opacity: .4;
}
.block-options .btn, .input-group .btn, .modal-content .btn {
margin-top: 0;
margin-bottom: 0;
}
.btn-default {
background-color: #c2cccf;
border-color: #c2cccf;
&.btn-alt {
background-color: #ffffff;
}
&:hover {
background-color: #dae5e8;
border-color: #dae5e8;
}
&:focus, &:active, &.active {
background-color: #aab3b5;
border-color: #aab3b5;
color: #ffffff;
}
}
.open .btn-default.dropdown-toggle {
background-color: #aab3b5;
border-color: #aab3b5;
color: #ffffff;
}
.btn-default {
&.disabled {
background-color: #c2cccf;
border-color: #c2cccf;
&:hover, &:focus, &:active, &.active {
background-color: #c2cccf;
border-color: #c2cccf;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #c2cccf;
border-color: #c2cccf;
}
}
}
fieldset[disabled] .btn-default {
&:hover, &:focus, &:active, &.active {
background-color: #c2cccf;
border-color: #c2cccf;
}
}
.btn-primary {
background-color: #3498DB;
border-color: #3498DB;
color: #ffffff;
&.btn-alt {
background-color: #ffffff;
color: #3498DB;
}
&:hover {
background-color: #3BAAF5;
border-color: #3BAAF5;
color: #ffffff;
}
&:focus, &:active, &.active {
background-color: #3498DB;
border-color: #3498DB;
color: #ffffff;
}
}
.open .btn-primary.dropdown-toggle {
background-color: #3498DB;
border-color: #3498DB;
color: #ffffff;
}
.btn-primary {
&.disabled {
background-color: #3498DB;
border-color: #3498DB;
color: #ffffff;
&:hover, &:focus, &:active, &.active {
background-color: #3BAAF5;
border-color: #3BAAF5;
color: #ffffff;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #3BAAF5;
border-color: #3BAAF5;
color: #ffffff;
}
}
}
fieldset[disabled] .btn-primary {
&:hover, &:focus, &:active, &.active {
background-color: #3498DB;
border-color: #3498DB;
color: #ffffff;
}
}
.btn-danger {
background-color: #ea4845;
border-color: #ea4845;
color: #ffffff;
&.btn-alt {
background-color: #ffffff;
color: #e74c3c;
}
&:hover {
background-color: #e74c3c;
border-color: #e74c3c;
color: #ffffff;
}
&:focus, &:active, &.active {
background-color: #ab6560;
border-color: #ab6560;
color: #ffffff;
}
}
.open .btn-danger.dropdown-toggle {
background-color: #ab6560;
border-color: #ab6560;
color: #ffffff;
}
.btn-danger {
&.disabled {
background-color: #c4746e;
border-color: #c4746e;
color: #ffffff;
&:hover, &:focus, &:active, &.active {
background-color: #c4746e;
border-color: #c4746e;
color: #ffffff;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #c4746e;
border-color: #c4746e;
color: #ffffff;
}
}
}
fieldset[disabled] .btn-danger {
&:hover, &:focus, &:active, &.active {
background-color: #c4746e;
border-color: #c4746e;
color: #ffffff;
}
}
.btn-warning {
background-color: #e08c58;
border-color: #e08c58;
color: #ffffff;
&.btn-alt {
background-color: #ffffff;
color: #f39c12;
}
&:hover {
background-color: #fa9c61;
border-color: #fa9c61;
color: #ffffff;
}
&:focus, &:active, &.active {
background-color: #c77c4e;
border-color: #c77c4e;
color: #ffffff;
}
}
.open .btn-warning.dropdown-toggle {
background-color: #c77c4e;
border-color: #c77c4e;
color: #ffffff;
}
.btn-warning {
&.disabled {
background-color: #e08c58;
border-color: #e08c58;
color: #ffffff;
&:hover, &:focus, &:active, &.active {
background-color: #e08c58;
border-color: #e08c58;
color: #ffffff;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #e08c58;
border-color: #e08c58;
color: #ffffff;
}
}
}
fieldset[disabled] .btn-warning {
&:hover, &:focus, &:active, &.active {
background-color: #e08c58;
border-color: #e08c58;
color: #ffffff;
}
}
.btn-dark {
background-color: #3C4858;
border-color: #3C4858;
color: #ffffff;
&.btn-alt {
background-color: #ffffff;
color: #f39c12;
}
&:hover {
background-color: #4f5a68;
border-color: #4f5a68;
color: #ffffff;
}
&:focus, &:active, &.active {
background-color: #2a323d;
border-color: #2a323d;
color: #ffffff;
}
}
.open .btn-dark.dropdown-toggle {
background-color: #2a323d;
border-color: #2a323d;
color: #ffffff;
}
.btn-dark {
&.disabled {
background-color: #626c79;
border-color: #626c79;
color: #ffffff;
&:hover, &:focus, &:active, &.active {
background-color: #626c79;
border-color: #626c79;
color: #ffffff;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #626c79;
border-color: #626c79;
color: #ffffff;
}
}
}
fieldset[disabled] .btn-dark {
&:hover, &:focus, &:active, &.active {
background-color: #626c79;
border-color: #626c79;
color: #ffffff;
}
}
.btn-success {
background-color: #8cc46e;
border-color: #8cc46e;
color: #ffffff;
&.btn-alt {
background-color: #ffffff;
color: #7db831;
}
&:hover {
background-color: #9ddd7b;
border-color: #9ddd7b;
color: #ffffff;
}
&:focus, &:active, &.active {
background-color: #7aab60;
border-color: #7aab60;
color: #ffffff;
}
}
.open .btn-success.dropdown-toggle {
background-color: #7aab60;
border-color: #7aab60;
color: #ffffff;
}
.btn-success {
&.disabled {
background-color: #8cc46e;
border-color: #8cc46e;
color: #ffffff;
&:hover, &:focus, &:active, &.active {
background-color: #8cc46e;
border-color: #8cc46e;
color: #ffffff;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #8cc46e;
border-color: #8cc46e;
color: #ffffff;
}
}
}
fieldset[disabled] .btn-success {
&:hover, &:focus, &:active, &.active {
background-color: #8cc46e;
border-color: #8cc46e;
color: #ffffff;
}
}
.btn-info {
background-color: #49a3c4;
border-color: #49a3c4;
color: #ffffff;
&.btn-alt {
background-color: #ffffff;
color: #3498db;
}
&:hover {
background-color: #51b7dd;
border-color: #51b7dd;
color: #ffffff;
}
&:focus, &:active, &.active {
background-color: #3f8eab;
border-color: #3f8eab;
color: #ffffff;
}
}
.open .btn-info.dropdown-toggle {
background-color: #3f8eab;
border-color: #3f8eab;
color: #ffffff;
}
.btn-info {
&.disabled {
background-color: #49a3c4;
border-color: #49a3c4;
color: #ffffff;
&:hover, &:focus, &:active, &.active {
background-color: #49a3c4;
border-color: #49a3c4;
color: #ffffff;
}
}
&[disabled] {
&:hover, &:focus, &:active, &.active {
background-color: #49a3c4;
border-color: #49a3c4;
color: #ffffff;
}
}
}
fieldset[disabled] .btn-info {
&:hover, &:focus, &:active, &.active {
background-color: #49a3c4;
border-color: #49a3c4;
color: #ffffff;
}
}
.btn-link {
color: #3498DB;
&:hover, &:focus {
color: #3498DB;
}
}
/* Graph */
.graph-row {
margin-right: 0px;
margin-left: 0px;
}
.graph-circle-padding {
padding-top: 40px !important;
padding-bottom: 60px !important;
}
.circle-block-margin {
margin-top: -40px !important;
}
.graph-row-margin-left {
padding-left: 0px;
}
/* Panels */
.panel {
margin-bottom: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}
.panel-extend {
padding: 15px;
}
.panel-heading {
padding: 15px;
color: #FFF
}
.panel-title {
font-size: 14px;
color: #323d40;
a { color: #323d40 !important;
}
}
.panel-default > .panel-heading {
background-color: #FFF;
}
.panel-group {
margin-bottom: 20px;
}
.panel-item {
color: #879599;
background-color: rgb(52, 152, 219);
background-color: rgba(52, 152, 219, .1);
}
.panel-border {
border-top: 1px solid #879599 !important;
}
/* Pre, Code */
pre {
background: #151515;
overflow: scroll;
}
code {
border: 1px solid #fad4df;
margin: 1px 0;
display: inline-block;
}
.btn code {
display: inline;
margin: 0;
}
/* Alerts */
.alert {
color: #ffffff;
border-width: 0;
.alert-link {
color: #000000;
opacity: .4;
}
}
.alert-danger {
background-color: #ea4845;
}
.alert-warning {
background-color: #fa9c61;
}
.alert-success {
background-color: #9ddd7b;
}
.alert-error {
background-color: #ea4845 !important;
}
.alert-info {
background-color: #51b7dd;
}
.alert-dismissable .close {
top: -8px;
right: -26px;
color: #000000;
}
.close {
opacity: .25;
text-shadow: none;
&:hover, &:focus {
opacity: .5;
}
}
/* Labels, Badges */
.label, .badge {
font-weight: normal;
font-size: 90%;
}
.label {
padding: 1px 4px;
}
.badge {
background: rgba(0, 0, 0, 0.4);
padding: 3px 6px;
}
.label-danger {
background-color: #dd817b;
&[href] {
&:hover, &:focus {
background-color: #b36964;
}
}
}
.label-warning {
background-color: #fa9c61;
&[href] {
&:hover, &:focus {
background-color: #d98755;
}
}
}
.label-success {
background-color: #9ddd7b;
&[href] {
&:hover, &:focus {
background-color: #7fb364;
}
}
}
.label-info {
background-color: #51b7dd;
&[href] {
&:hover, &:focus {
background-color: #4295b3;
}
}
}
.label-primary {
background-color: #2eb398;
&[href] {
&:hover, &:focus {
background-color: #289982;
}
}
}
.label-default {
background-color: #999999;
&[href] {
&:hover, &:focus {
background-color: #777777;
}
}
}
/* Carousel */
.carousel-control {
max-width: 50px;
&.left, &.right {
background: none;
opacity: 0;
filter: none;
}
}
.carousel:hover .carousel-control {
&.left, &.right {
opacity: 1;
}
}
.carousel-control {
&.left:hover, &.right:hover {
background: rgba(0, 0, 0, 0.2);
}
span {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
i {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
}
}
.carousel-indicators, .carousel-caption {
bottom: 5px;
}
/* Bottom Margin */
p, .table, .alert, .carousel {
margin-bottom: 20px;
}
/* Removing shadows and radius */
.navbar-form, .navbar-collapse {
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control {
-webkit-box-shadow: none;
box-shadow: none;
&:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
}
.has-success .form-control:focus, .has-warning .form-control:focus, .has-error .form-control:focus, .progress, .progress-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn {
&:active, &.active {
-webkit-box-shadow: none;
box-shadow: none;
}
}
.open .btn.dropdown-toggle, .panel {
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar, .dropdown-menu, .tooltip-inner, .breadcrumb {
border-radius: 0;
}
/*
=================================================================
(#m07hes) HELPERS
=================================================================
*/
.push {
margin-bottom: 15px !important;
}
.push-bit {
margin-bottom: 10px !important;
}
.push-top-bottom {
margin-top: 40px;
margin-bottom: 40px;
}
.display-none {
display: none;
}
.remove-margin {
margin: 0 !important;
}
.remove-margin-bottom {
margin-bottom: 0 !important;
}
.remove-padding {
padding: 0 !important;
}
.lt-ie10 .hidden-lt-ie10 {
display: none !important;
}
.visible-lt-ie10 {
display: none;
}
.lt-ie10 .visible-lt-ie10 {
display: block;
}
:focus {
outline: 0 !important;
}
/*
=================================================================
(#m08ths) THEMES
=================================================================
*/
/* Default Color Theme specific colors */
.themed-color {
color: #2eb398 !important;
}
.themed-background {
background-color: #2eb398 !important;
}
.themed-color-dark {
color: #323d40 !important;
}
.themed-background-dark {
background-color: #323d40 !important;
}
/* Contextual Background Colors */
.themed-background-danger {
background-color: #dd817b !important;
}
.themed-background-warning {
background-color: #fa9c61 !important;
}
.themed-background-info {
background-color: #51b7dd !important;
}
.themed-background-success {
background-color: #9ddd7b !important;
}
.themed-background-muted {
background-color: #f9f9f9 !important;
}
/*
=================================================================
(#m09res) RESPONSIVE
=================================================================
*/
/* Medium devices, Desktops ( > 1024 px) */
@media screen and (min-width: 1024px) {
.header-text-container {
margin-right: 235px !important;
}
}
/* Small devices, Tablets (>767px) */
@media screen and (min-width: 768px) {
/* General */
#login-container {
width: 480px;
top: 100px;
margin-left: -240px;
}
#page-content {
padding: 20px 20px 1px;
}
.header-section {
padding-left: 20px;
padding-right: 20px;
}
.block {
padding-left: 20px;
padding-right: 20px;
&.full {
padding-left: 20px;
padding-right: 20px;
}
}
#page-content + footer, .modal-body {
padding-left: 20px;
padding-right: 20px;
}
.block {
.block-content-full {
margin: -20px -20px -1px;
}
&.full .block-content-full {
margin: -20px;
}
}
.content-header {
margin: -20px -20px 20px;
}
.block, .widget {
margin-bottom: 20px;
}
.block-title {
margin-left: -20px;
margin-right: -20px;
}
/* Forms */
.form-bordered {
margin-left: -20px;
margin-right: -20px;
.form-group {
padding-left: 20px;
padding-right: 20px;
}
}
.form-horizontal.form-bordered .form-group {
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
}
/* Tabs */
.nav-tabs > li > a {
padding-left: 15px;
padding-right: 15px;
margin-left: 3px;
margin-right: 3px;
}
/*Table border*/
.table-border {
border: 1px solid #DDD;
}
}
/* Medium devices, Desktops (>991px) */
@media screen and (min-width: 992px) {
/* Reset sidebar classes used only on small screens */
.sidebar-visible-xs #sidebar, .sidebar-alt-visible-xs #sidebar-alt {
width: 0;
}
.sidebar-visible-xs #main-container, .sidebar-alt-visible-xs #main-container {
margin-left: 0;
margin-right: 0;
}
.sidebar-visible-xs {
&.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom {
right: 0;
left: 0;
}
}
.sidebar-alt-visible-xs {
&.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom {
right: 0;
left: 0;
}
}
.sidebar-visible-xs.footer-fixed #page-content + footer, .sidebar-alt-visible-xs.footer-fixed #page-content + footer {
right: 0;
left: 0;
}
/* Both Sidebars */
#sidebar, #sidebar-alt {
width: 0;
}
.sidebar-partial #sidebar {
width: 40px;
opacity: .4;
-webkit-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
}
.sidebar-visible-lg #sidebar, .sidebar-alt-visible-lg #sidebar-alt, .sidebar-partial #sidebar:hover, .sidebar-visible-lg.sidebar-partial #sidebar {
width: 210px;
opacity: 1;
}
/* Main Sidebar */
.sidebar-partial {
#main-container {
margin-left: 40px;
}
#sidebar:hover + #main-container {
margin-left: 210px;
}
}
.sidebar-visible-lg #main-container {
margin-left: 210px;
}
.sidebar-partial {
&.footer-fixed #main-container #page-content + footer, &.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom {
left: 40px;
}
#sidebar:hover + #main-container {
header {
&.navbar-fixed-top, &.navbar-fixed-bottom {
left: 210px;
}
}
#page-content + footer {
left: 210px;
}
}
}
.sidebar-visible-lg {
&.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom, &.footer-fixed #main-container #page-content + footer {
left: 210px;
}
}
/* Alternative Sidebar */
.sidebar-alt-visible-lg {
#main-container {
margin-right: 210px;
}
&.header-fixed-top header.navbar-fixed-top, &.header-fixed-bottom header.navbar-fixed-bottom, &.footer-fixed #main-container #page-content + footer {
right: 210px;
}
}
}
/* Small devices, Desktops (< 767px) */
@media screen and (max-width: 992px) {
.graph-row-margin-left {
padding-left: 0px;
margin-left: 15px;
}
}
/* Small devices, Desktops (< 767px) */
@media screen and (max-width: 768px) {
.datatable-top-row {
border-width: 0px 0px 1px 0px;
}
}
/*
=================================================================
(#m10prs) PRINT
=================================================================
*/
@media print {
#sidebar, #sidebar-alt, .content-header, .block-title, .block-options, #page-content + footer, #to-top {
display: none !important;
}
#page-content {
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
}
#main-container {
margin: 0 !important;
}
.block {
border: none !important;
padding: 0 !important;
&.full {
border: none !important;
padding: 0 !important;
}
}
.block-title {
margin: 0 0 20px !important;
}
}