$dark-blue: #1F77D0;
$blue: #1DC7EA;
$green: #87CB16;
$orange: #FFA534;
$red: #FB404B;

$blue-navbar: lighten($dark-blue, 10%);
$azure-navbar: lighten($blue, 15%);
$green-navbar: lighten($green, 10%);
$orange-navbar: lighten($orange, 10%);
$red-navbar: lighten($red, 10%);

#login { display: none; }

.alert {
  border: 0;
  border-radius: 0;
  color: #FFFFFF;
  padding: 10px 15px;
  font-size: 14px;
}

.alert-primary {
  background-color: $blue-navbar;
}

.alert-info {
  background-color: $azure-navbar;
}

.alert-success {
  background-color: $green-navbar;
}

.alert-warning {
  background-color: $orange-navbar;
}

.alert-danger {
  background-color: $red-navbar;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  @media(max-width: $break){
    position: relative;
    margin-bottom: 50px;
  }
}

.inputfile + label {
  cursor: pointer;
  margin: 0 10px 10px 10px;
  width: 90%;
  font-size: 14px;
  font-weight: 400;
  color: $grisf;
  background-color: $grisc;
  display: inline-block;
  border: solid 1px $grisf;
  padding: 10px 10px 0 10px;
  background: url("../img/bkg_bt_type_file.png") right top no-repeat;
  @media(max-width: $break){
    height:75px;
  }
}

.inputfile + label span {
  width: auto;
  min-height: 2em;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  margin-top: 14px;
  background-color: none;

  em {
    font-size: 0.8em;
    color: $grisf;
  }
}

// RESTYLING THE TABS USING THE CUSTOM VARIABLE
.tabs {
  .tab {
    background-color: rgba(#999, 0.1);

    a {
      color: $bleu_at_f;

      &.active {color: $bleu_at_f;}
      &:hover {color: $bleu_at_f;}
      &:focus {
        background-color: rgba($bleu_at_f, 0.1);
        &.active{
          background-color: rgba($bleu_at_f, 0.1);
        }
      }
    }
  }
  .indicator {background-color: $bleu;}
}