/*------------------------------------------------------------------
[Core General Stylesheet]

Project:    Fondamix Foundation Dashboard Template
Version:    1.0
Last change:    01/01/2017 [fixed Float bug, vf]
Author:Themesmile
-------------------------------------------------------------------*/

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

//Font 
$font-title: "Montserrat",
sans-serif;
$font-text: "Montserrat",
sans-serif;
$fontawesome: "FontAwesome",
sans-serif;
$entypo: "entypo",
sans-serif;
//Background Color
$primary-color: #2f323a;
//text color
$main-text-color:#222;
//master value
$no-pad:0px!important;
$pad:10px!important;
$pad-twenty:20px!important;
$pad-forty:40px!important;
$margin:10px!important;
$text-right:right!important;
$text-left:left!important;
// Master Color
$white:#fff;
$gray:#777;
$gray-blue: #EEF1F7;
$black: #222A38;
$black-solid: #000000;
$red: #F20556;
$yellow: #f39c12;
$aqua: #0ABAEF;
$blue:#5C9DF5;
$light-blue: #3c8dbc;
$dark-blue: #0F5593;
$green: #92CD18;
$light-green:#45B6B0;
$navy: #001f3f;
$teal: #B5AB8A;
$olive:#3d9970;
$lime: #01ff70;
$orange: #FF884D;
$red-orange: #e83922;
$fuchsia: #f012be;
$purple:#932ab6;
$maroon: #85144b;
$transparent: transparent;
$opacity: rgba(0,
0,
0,
0.5);
$opacity-one: rgba(0,
0,
0,
0.3);
//-----------------------------------------------------------------------------//
[class*="entypo-"]:before {
    font-family: $entypo;
}


/* fontawesome */

[class*="fontawesome-"]:before {
    font-family: $fontawesome;
}

body {
    font-family: $font-text!important;
    background: $primary-color;
    padding: 0;
    font-size: 13px!important;
    color: #888!important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: $font-title!important;
    font-weight: bold;
}

p {
    font-size: 14px!important;
}

blockquote {
    margin: 0 0 1.25rem;
    padding: 0.5625rem 1.25rem 0 1.1875rem;
    border-left: 3px solid #8c92a3;
    font-family: $font-title;
    font-size: 16px;
    font-style: italic;
    color: $main-text-color;
}

ul,
ol,
dl {
    font-size: 13px;
}


/*
Preloader
 */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2F323A;
    /* change if the mask should have another color then white */
    z-index: 9999;
    /* makes sure it stays on top */
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    /* centers the loading animation horizontally one the screen */
    top: 50%;
    /* centers the loading animation vertically one the screen */
    background-image: url(../img/ball-triangle.svg);
    /* path to your loading animation */
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
    /* is width and height divided by two */
}

.slide-out-div {
    padding: 20px 5px;
    width: 60px;
    background: #fff;
    position: relative;
    z-index: 9999;
}

.handle {
    background: #0D0C0E;
    color: #fff;
    width: 40px;
    height: 50px;
    text-align: center;
    display: block;
    left: -36px!important;
}


/*
Value Master
 */

.fixed-nest {
    position: fixed!important;
}

.no-pad {
    padding: $no-pad;
}

.pad {
    padding: $pad;
}

.pad-twenty {
    padding: $pad-twenty;
}

.pad-forty {
    padding: $pad-forty;
}

.margin {
    margin: $margin;
}

.margin-center {
    margin: 10px 0;
}

.margin-left {
    margin: 0 40px 0 0;
}

.padding-content {
    padding: 0 15%;
}

.height-tiny {
    height: 8px!important;
}

.radius {
    border-radius: 3px!important;
}

.inline {
    display: inline;
    width: auto;
}

.text-right {
    text-align: $text-right;
}

.text-left {
    text-align: $text-left;
}


/*
Master Background Color
 */

.bg-light-green,
.bg-dark-blue,
.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black {
    color: #f9f9f9 !important;
}

.bg-white {
    background: $white !important;
}

.bg-gray {
    background: $gray !important;
}

.bg-gray-blue {
    background: $gray-blue !important;
}

.bg-black {
    background: $black !important;
}

.bg-black-solid {
    background: $black-solid !important;
}

.bg-red {
    background: $red !important;
}

.bg-yellow {
    background: $yellow !important;
}

.bg-aqua {
    background-color: $aqua !important;
}

.bg-blue {
    background-color: $blue !important
}

.bg-light-blue {
    background-color: $light-blue !important;
}

.bg-dark-blue {
    background-color: $dark-blue !important;
}

.bg-green {
    background-color: $green !important;
}

.bg-light-green {
    background-color: $light-green !important;
}

.bg-navy {
    background-color: $navy !important;
}

.bg-teal {
    background-color: $teal !important;
}

.bg-olive {
    background-color: $olive !important;
}

.bg-lime {
    background-color: $lime !important;
}

.bg-orange {
    background-color: $orange !important;
}

.bg-red-orange {
    background-color: $red-orange !important;
}

.bg-fuchsia {
    background-color: $fuchsia !important;
}

.bg-purple {
    background-color: $purple !important;
}

.bg-maroon {
    background-color: $maroon !important;
}

.bg-transparent {
    background: $transparent!important;
    border: none!important;
    box-shadow: none!important;
}

.bg-opacity {
    background: rgba(0, 0, 0, 0.5) !important;
}

.bg-opacity-one {
    background: rgba(0, 0, 0, 0.3) !important;
}

.bg-opacity-white {
    background: rgba(255, 255, 255, 0.5) !important;
}

.bg-opacity-white-btn {
    background: rgba(255, 255, 255, 0.2) !important;
}

.bg-opacity-white-btn:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    color: white!important;
}

.border-gray {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2)!important;
}


/*
Master Text Color
 */

.text-opacity {
    color: rgba(0, 0, 0, 0.5) !important;
}

.text-black {
    color: $black!important;
}

.text-red {
    color: $red !important;
}

.text-gray {
    color: $gray !important;
}

.text-amber {
    color: #ffffff!important;
}

.text-yellow {
    color: #f39c12 !important;
}

.text-aqua {
    color: #0ABAEF!important;
}

.text-blue {
    color: #5C9DF5 !important;
}

.text-dark-blue {
    color: #0F5593 !important;
}

.text-light-blue {
    color: #3c8dbc !important;
}

.text-green {
    color: #92CD18!important;
}

.text-navy {
    color: #B7C1D3 !important;
}

.text-teal {
    color: #39cccc !important;
}

.text-olive {
    color: #3d9970 !important;
}

.text-lime {
    color: #01ff70 !important;
}

.text-orange {
    color: #FF884D !important;
}

.text-fuchsia {
    color: #f012be !important;
}

.text-purple {
    color: #932ab6 !important;
}

.text-maroon {
    color: #85144b !important;
}

.text-white {
    color: #ffffff!important;
}

.border-green {
    border-color: #37A8AF!important;
}

.border-blue {
    border-color: #3E739D!important;
}

.border-aqua {
    border-color: #0090D9!important;
}

.text-opacity {
    color: rgba(255, 255, 255, 0.7)!important;
}

.button-radius{
    border-radius: 30px!important;
}
/*
Hide elements by display none only
*/

.hide {
    display: none !important;
}


/* Remove borders */

.no-border {
    border: 0px !important;
}


/* Remove padding */

.no-padding {
    padding: 0px !important;
}


/* Remove margins */

.no-margin {
    margin: 0px !important;
}


/* Remove box shadow */

.no-shadow {
    box-shadow: none!important;
}

.border {
    border-bottom: 1px !important;
}

.star {
    color: red!important;
}


/* font style for title */

.font-title {
    font-family: 'Montserrat', sans-serif!important;
}

.font-uppercase {
    text-transform: uppercase!important;
}

.font-medium {
    font-size: 14px!important;
}

.js-off-canvas-exit {
    background: transparent;
}

.img-circle {
    border-radius: 50%;
}

.circle-nest {
    height: 30px;
    width: 30px;
    line-height: 30px;
    display: block;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
}

.circle-nest-medium {
    height: 45px;
    width: 45px;
    line-height: 45px;
    display: block;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
}
.callout {
    margin: 0 0 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(10, 10, 10, 0.05);
    border-radius: 0;
    position: relative;
    color: #0a0a0a;
    background-color: white;
    border-radius: 3px;
}
hr{
    border-bottom: 1px solid #eee;
}

// Top Bar Menu Stylesheet 
@import 'topbar';
//Side Bar stylesheet
@import 'sidebar';
//Side Bar stylesheet
@import 'content';
//Off Canvas stylesheet
@import 'off-canvas';