/*---reset---*/
/*Body*/
html{
    height: $p100;
    font-size: 14px;
}
body{
    height: $p100;
    &.layout-boxed{
        height: $p100;
    }
}
.wrapper{
    height: $p100;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
    position: relative;
    @include before-after-state{
        content: " ";
        display: table;
    }
}
body{
    overflow-x: hidden;
    overflow-y: auto;
	color:lighten($dark, 20%);
	font-size: 1rem;
	font-style: normal;
	font-weight:400;
	font-family: $bodyfont;
	line-height:1.5;
	background-color:#fbfbfb;
}

/*---basic---*/
a {
    color:lighten($dark, 20%);
}
a{
    @include hover-state{
        outline: 0;
        text-decoration: none;   
    }
}
h1,h2,h3,h4,h5,h6,.h1, .h2, .h3, .h4, .h5, .h6 {
	
	font-family: inherit;
    font-weight: 400;
    line-height: 1.2;
}
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-size: 65%;
}
h4, .h4, h5, .h5, h6, .h6 {
    margin-bottom: 0.7142857143rem;
}
.h1, h1 {
    font-size: 2.5714285714285716rem;
}

.h2, h2 {
    font-size: 2.142857142857143rem;
}

.h3, h3 {
    font-size: 1.7142857142857142rem;
}

.h4, h4 {
    font-size: 1.2857142857142858rem;
}

.h5, h5 {
    font-size: 1.1428571428571428rem;
}

.h6, h6 {
    font-size: 1rem;
}
h1, h2, h3, .h1, .h2, .h3 {
    margin-top: 0.7142857143rem;
    margin-bottom: 0.7142857143rem;
}
img {
    max-width: $p100;
}
.img-fluid{
	width: $p100;
}
.align-sub {
    vertical-align: sub;
}

$font-size-map: ( font-size-: font-size);
$sizes-list: 0 10 12 14 16 18 20 22 24 26 30 32 36 38 40 42 46 48 50 60 70 72 76 78 80 100 140 180 200;
@each $size in $sizes-list {
    $val: $size / 14 + rem;
    @each $keyword,
    $property in $font-size-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$line-height-map: ( l-h-: line-height);
$sizes-list: 0 10 12 14 16 18 20 22 24 26 30 32 36 38 40 42 46 48 50 60 70 72 76 78 80 100 140 180 200;
@each $size in $sizes-list {
    $val: $size / 14 + rem;
    @each $keyword,
    $property in $line-height-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$font-weight-map: ( font-weight-: font-weight);
$sizes-list: 100 200 300 400 500 600 700 800 900;
@each $size in $sizes-list {
    $val: $size;
    @each $keyword,
    $property in $font-weight-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}
.font-weight-light {
    font-weight: $fw-light;
}
.font-weight-normal {
    font-weight: $fw-normal;
}
.font-weight-medium {
    font-weight: $fw-medium;
}
.font-weight-bold {
    font-weight: $fw-bold;
}

.hide {
    display: none !important;
}
.no-border {
    border: 0 !important;
}
.no-radius {
    border-radius: 0 !important;
}
.no-padding {
    padding: 0 !important;
}
.no-margin {
    margin: 0 !important;
}
.no-shadow {
    box-shadow: none !important;
}
.chart-legend, .contacts-list, .list-unstyled, .mailbox-attachments, .users-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.list-group-unbordered>.list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
.code-preview {
    border: 1px solid $light;
    padding: 20px;
    background-color: $white;
}
code {
    border: 1px solid $light;
    background-color: $white;
    border-radius: .25rem;
    padding: .2rem .4rem;
}
hr {
    border-top-color: rgba(lighten($black, 15%),0.07);
    margin: 1rem auto;
}
.d3-line{
	fill:rgba(255, 255, 255, 0);
}

.theme-switch li a.active{
	opacity: 0.6;
    border: 5px solid #ffffff;
}
.dark-skin .theme-switch li a.active{
    border: 5px solid lighten($black, 15%);
}
.custom-select{
	cursor: pointer;
	border-radius: $fct-border-radius;
}

.image-popup-vertical-fit img,
.image-popup-fit-width img,
.image-popup-no-margins img,
.popup-gallery img,
.zoom-gallery img,
#image-popups img{
	border-radius: $default-border-radius;
}

/*---border radius---*/
$border-radius-map: ( rounded: border-radius);
$sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100;
@each $size in $sizes-list {
    $val: $size + px;
    @each $keyword,
    $property in $border-radius-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

.overflow-h{
	overflow: hidden;
}
.overflow-v{
	overflow: visible;
}
.overflow-xh{
	overflow-x: hidden;
}
.overflow-xv{
	overflow-x: visible;
}
.overflow-yh{
	overflow-y: hidden;
}
.overflow-yv{
	overflow-y: visible;
}

/*---border---*/
$border-sizes-list: 0 1 2 3 4 5;
@each $size in $border-sizes-list {
  .b-#{$size}  { border:        #{$size}px solid $light !important; } // All sides
  .bt-#{$size} { border-top:    #{$size}px solid $light !important; }
  .br-#{$size} { border-right:  #{$size}px solid $light !important; }
  .bb-#{$size} { border-bottom: #{$size}px solid $light !important; }
  .bl-#{$size} { border-left:   #{$size}px solid $light !important; }

  // Axes
  .bx-#{$size} {
    border-right:  #{$size}px solid $light !important;
    border-left:   #{$size}px solid $light !important;
  }
  .by-#{$size} {
    border-top:    #{$size}px solid $light !important;
    border-bottom: #{$size}px solid $light !important;
  }
}

.border {
  border: 1px solid $light !important;
}

// Border colors
//
@each $name, $value in $colors {
  .border-#{$name} {
    border-color: $value !important;
  }
}
.border-transparent {border-color: transparent !important; }
.border-white       {border-color: #fff !important; }
.border-light       {border-color: $light !important; }
.border-fade        {border-color: lighten($light, 01%) !important; }


.b-dashed{
	border-style: dashed !important;
}
.bt-dashed{
	border-top-style: dashed !important;
}
.bl-dashed{
	border-left-style: dashed !important;
}
.br-dashed{
	border-right-style: dashed !important;
}
.bb-dashed{
	border-bottom-style: dashed !important;
}

.b-dotted{
	border-style: dotted !important;
}
.bt-dotted{
	border-top-style: dotted !important;
}
.bl-dotted{
	border-left-style: dotted !important;
}
.br-dotted{
	border-right-style: dotted !important;
}
.bb-dotted{
	border-bottom-style: dotted !important;
}

.b-double{
	border-style: double !important;
}
.bt-double{
	border-top-style: double !important;
}
.bl-double{
	border-left-style: double !important;
}
.br-double{
	border-right-style: double !important;
}
.bb-double{
	border-bottom-style: double !important;
}

.b-groove{
	border-style: groove !important;
}
.bt-groove{
	border-top-style: groove !important;
}
.bl-groove{
	border-left-style: groove !important;
}
.br-groove{
	border-right-style: groove !important;
}
.bb-groove{
	border-bottom-style: groove !important;
}
.btr-0{
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
.bbr-0{
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.brr-0{
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.blr-0{
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.bar-0{
	border-radius: 0 !important;
}
/*---vertical-align---*/
.vertical-align{
    font-size: 0;
}
.vertical-align:before{
    display: inline-block;
    height: 100%;
    content: ''; 
    vertical-align: middle;
}
.vertical-align-middle, .vertical-align-bottom{
    display: inline-block;
    max-width: 100%;
}
.vertical-align-middle{
    vertical-align: middle;
}
.vertical-align-bottom{
    vertical-align: bottom;
}