@use "sass:color";
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");

@import "custom_sass";



// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
    .btn-#{$color} {
      @if $color == "light"{
        @include button-variant(
          $value,
          $value,
          $color: shade-color($value, 35%),
          $hover-color:$color,
          $hover-background: tint-color($value,8%),
        );
      } @else if $color == "dark" {
        @include button-variant(
          $value,
          $value,
          $hover-background: tint-color($value, 10%),
        );
      }@else if $color == "warning" or $color =="secondary"{
          @include button-variant(
            $value,
            $value,
            $color: shade-color($value, 35%),
             $hover-color:$color,
             $hover-background:shade-color($value, 7%),
             $active-color:$color,
             );
        }
      @else {
        @include button-variant($value, $value, $color:$white, $hover-color:$white ,$active-color:$white);
      }
    }
  }

  @each $color, $value in $theme-colors {
    .btn-outline-#{$color} {
    @if $color == "light" or $color =="secondary"{
        @include button-outline-variant(
        $value,$color-hover:shade-color($value, 35%) ,$active-color:shade-color($value, 35%));
    }@else{
          @include button-outline-variant(
            $value,$color-hover:$white ,$active-color:$white);
      }
    }
 }

@each $color, $value in $theme-colors {
    .alert-outline-#{$color} {
        background-color: #fff;
    }
}
@each $color, $value in $theme-colors {
    .toast-#{$color} {
        /*box-shadow:0 8px 25px -8px $value;*/
        background-color: $value !important;
        opacity: 1;
        position: absolute;
    }
    .toast-#{$color}:focus {
        box-shadow: 0 8px 25px -8px $value;
    }
}
@each $color, $value in $theme-colors {
    .btn-outline-#{$color}:focus {
        box-shadow: 0 8px 25px -8px $value;
    }
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
    }
}

.alert .btn-close {
    color: #333;
}
hr {
    border: 0;
    border-top: 1px solid #eeeeee;
}
p {
    margin-bottom: 10px;
}
/******************* help-block error message ***********/
.form-text{
    display: block;
    margin-top: 5px;
    font-size: 14px;
    margin-bottom: 10px;
    color: #737373;
}
.form-text.is-invalid,
.form-label.is-invalid,
.form-check.is-invalid,
.form-check-inline.is-invalid {
  color: #ff7a7a;
}
 .form-text.is-valid,
 .form-label.is-valid,
 .form-check.is-valid,
 .form-check-inline.is-valid {
    color: #75d1a3;
}
.form-control.is-valid {
    border-color: #75d1a3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-control.is-invalid{
    border-color: #ff7a7a;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
h4,
h5,
h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
mark{
    background-color: #ffce56;
    padding: 0.2em;
}
.form-control-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
select[multiple],
select[size] {
    height: auto;
}
.slider.slider-horizontal:hover,
.slider.slider-vertical:hover {
    .tooltip.tooltip-main {
        opacity: 1 !important;
    }
}
.form-control:valid:focus {
    border-color: #4fc48a;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c2ebd6;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c2ebd6;
}
.form-control:invalid:focus {
    border-color: #ff4747;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffe0e0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffe0e0;
}
.lead {
    font-size: 1.25rem;
    font-weight: $lead-font-weight;
}

code {
    background-image: linear-gradient(90deg, lighten($yellow, 35%), $yellow);
    padding: 0.2em;
}

// give spacing between card float-right icons
.card-header > span.float-end > *:not(:last-child) {
    margin-right: 0.25rem;
}