@import "bootstrap/bootstrap";

body{
    background-color: $gray-100;
}
.container.left{
    margin-left:0px !important;
}
.container.right{
    margin-left:0px !important;
}

pre{
  border: 1px solid $gray-200;
}

.rounded-lg{
  border-radius: $border-radius-lg;
}
.rounded-sm{
  border-radius: $border-radius-sm;
}


/***********
* Headings *
************/
h1.title{  
	font-size: $title-font-size;
  margin: $spacer 0px !important;
}
h1{
    margin-top: $spacer; 
    margin-bottom: $spacer / 2;
}
h2{
	//color: $dark-lighter;
    margin-top: $spacer / 3;
    margin-bottom: $spacer / 6;
}
h3{
	//color: $dark-more-lighter;
    margin-top: $spacer / 2;
    margin-bottom:$spacer / 4;
}
h4{
    font-weight: normal;
    margin-top: $spacer / 2;
    margin-bottom:$spacer / 4;
}
h5, h6{
    color: $gray-500;
    margin:0px;
    text-transform: uppercase;
}
h6{
    font-weight: normal;
}

.bg-dark{
  color: $gray-100;
  h1, h2, h3{
    color: $gray-100;
  }
  h4, h5, h6{
    color: $gray-300;        
  }
}

/***********
* Tables *
************/
.table{
  .table-head{
    background-color: $table-head-bg;
    .col{
      color: $table-head-color;
      font-weight: bold;
      font-size: $font-size-base * 1.25;
    }
  }
  .row{
    margin-left: 0px;
    margin-right: 0px;
  }
  .col{
    padding: $table-cell-padding;
    border-bottom: $table-border-width solid $table-border-color;
    b{
      font-weight: bold;
    }
  }
}
.table-bordered{
  border-bottom: 0px;

  .col{
    border-right: $table-border-width solid $table-border-color;
  }
  .col:last-child{
    border-right: 0px;
  }
}
.table-striped{
  .row:nth-child(2n){
    background-color: $table-accent-bg;
  } 
}


/*************
* pagination *
*************/
.pagination{
  .page-item{
    .page-link{
      border-radius: $border-radius;
    }
  }
}

/**************
* Backgrounds *
**************/

@each $color, $value in $theme-colors {
  .bg-#{$color}{
    color: color-yiq($value);
    .img-thumbnail{
      background-color: color-yiq($value); 
    }
  }
}

.card{
    margin-bottom: $spacer * 1.25;
    box-shadow: $box-shadow;
    .card-title{
        margin-top:0px;
    }
}

/********
* Forms *
********/

.ng-invalid.ng-dirty:not(form) input, .ng-invalid.ng-dirty:not(form) textarea{
  border-color: $form-feedback-invalid-color;

}

.form-group{
  margin-bottom: 0px;
}
.form .form-group{
  margin-bottom: $form-group-margin-bottom;
}

.form-group{
    label{
        margin-bottom: $spacer / 6;
    }    
    textarea.invalid, input.invalid{
        border-color: $form-feedback-invalid-color;
    }    
}
::-webkit-input-placeholder{
    font-weight: 200;
}
::-moz-placeholder { /* Firefox 19+ */
  font-weight: 200;
}
:-ms-input-placeholder { /* IE 10+ */
  font-weight: 200;
}
:-moz-placeholder { /* Firefox 18- */
  font-weight: 200;
}
.custom-select{
  font-weight: 200;
}

/*********
* Images *
*********/
.img-thumbnail{
  height: $thumbnail-height !important;
  width: $thumbnail-width !important;
}


/******
* Nav *
******/
.nav-link{
  color: $nav-link-color;
  cursor: pointer;
  border-radius: $nav-link-border-radius;
}
.nav-link:hover{
  color: $nav-link-hover-color;
}
.nav-link.active{
  //border-bottom: 2px solid $primary;
  font-weight: $nav-link-active-weight;
  background-color: $nav-link-active-bg;
  color: $nav-link-active-color;
}

/*********
* navbar *
*********/

.navbar{
  &.navbar-light{
    .nav-link.active{
      background-color: $navbar-light-active-bg;
    }
    .navbar-brand{
      color: $navbar-light-brand-color;
    }
  }
  &.navbar-dark{
    .nav-link.active{
      background-color: $navbar-dark-active-bg;
    }
    .navbar-brand{
      color: $navbar-dark-brand-color;
    }
  }
  &.navbar-expand-sm{
    @include media-breakpoint-down(xs){
      .nav-item{
        display: block;
        width: 100%;
      }
      .navbar-collapse{
        padding-top: 10px;
      }
    }
  }
  &.navbar-expand-md{
    @include media-breakpoint-down(sm){
      .nav-item{
        display: block;
        width: 100%;
      }
      .navbar-collapse{
        padding-top: 10px;
      }
    }
  }
  &.navbar-expand-lg{
    @include media-breakpoint-down(md){
      .nav-item{
        display: block;
        width: 100%;
      }
      .navbar-collapse{
        padding-top: 10px;
      }
    }
  }
  &.navbar-expand-xl{
    @include media-breakpoint-down(lg){
      .nav-item{
        display: block;
        width: 100%;
      }
      .navbar-collapse{
        padding-top: 10px;
      }
    }
  }
}

