// Bootstrap Overrides
// --------------------------------------------------
svg { fill: currentColor;
}

/***************************************************************************************
* Breadcrumbs
***************************************************************************************/

.breadcrumb {
  background-color: transparent;
  padding-left: 0;
  > li {
    + li:before {
        content: "";
        min-height: 20px;
        min-width: 20px;
        background-image: url('//crossroads-media.s3.amazonaws.com/images/arrow-right9.svg');
        background-position: 0px;
        display: inline-block;
        vertical-align: bottom;
        padding: 0;
        margin: 0 0 1px;
        background-size: 18px;
        background-repeat: no-repeat;
        opacity: .2;
    }
  }
}
ol.breadcrumb li:first-child {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.9rem;
  vertical-align: middle;
  font-family: $brand-font-family;

  a {
    color: $cr-orange;
  }
}
ol.breadcrumb li.active {
  text-transform: none;
}


/***************************************************************************************
* Buttons
***************************************************************************************/

.btn {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  .icon {
    fill: #fff;
  }
}

.btn-xs, .btn-group-xs>.btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-sm, .btn-group-sm>.btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-lg, .btn-group-lg>.btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

/***************************************************************************************
* Badges
***************************************************************************************/

.filetype-badge {
  border-radius: 3px;
  margin-left: 5px;
}


/***************************************************************************************
* Tabs
***************************************************************************************/

.nav-tabs {
  margin-bottom: 15px;
}
.nav-tabs > li > a > tab-heading > span {
  line-height: 1.625;
  display: block;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #eeeeee;
}

/***************************************************************************************
* Modals
***************************************************************************************/

.modal-backdrop {
  height: 100%;
}

/***************************************************************************************
* Date Picker
***************************************************************************************/

.dropdown-menu.ng-valid-date, .dropdown-menu.ng-valid-date-disabled {
  table {
    outline: none;

    thead {
      th {
        .btn-default {
          // @extend .btn-primary;
          background: white;
          color: $gray-darker;
          border: 1px solid white;
        }
      }
    }
  }

  .btn-default {
    background: white;
    border: none;
    color: $gray-darker;

    &:hover {
      background: $gray-lighter;
    }

    &:hover {
      .text-info {
        color: $gray-darker;
      }
    }
  }

    .btn-default.active {
    background: $gray;
    border: $gray;
    color: white;

    &:hover {
      background: $gray-light;
    }

    &:hover {
      .text-info {
        color: white;
      }
    }
  }

  .btn-info, .btn-danger, .btn-success {
    @extend .btn-primary;
  }

  .active {
    .text-info {
      color: $gray-darker;
    }
  }

  .btn-info, .btn-danger, .btn-success {
    @extend .btn-primary;
  }

  .active {
    .text-info {
      color: white;
    }
  }
}

/***************************************************************************************
* Label
***************************************************************************************/

label {
    @extend label;
    margin-bottom: 3px;

}
/***************************************************************************************
* Labels
***************************************************************************************/

.label {
    font-size: 65%;
}
/***************************************************************************************
* Forms
***************************************************************************************/
.form-control {
  padding: $padding-base-vertical ($padding-base-horizontal/2);
}

select.form-control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  padding-right: 46px;
  box-shadow: none;
}
input[type=text],
input[type=email],
input[type=textarea],
input[type=textfield],
input[type=search],
input[type=password],
input[type=tel],
textarea
 {
  appearance: none;
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 6px 0 0;
}
/***************************************************************************************
* Panels
***************************************************************************************/
.panel p {
  margin: 0;
}