/*------------------------------------------------------------------
[5. Typography]
*/

/* Standard elements
--------------------------------------------------
*/
@use '../../vars.scss' as *;
@use 'sass:color' as color;

.color-black {
    color: $Black-Color !important;
}

.color-Dark-Gray-1 {
    color: $Dark-Gray-1 !important;
}

.color-Dark-Gray-2 {
    color: $Dark-Gray-2 !important;
}
.color-Red {
    color: $Red !important;
}
.color-Green {
    color: $Green !important;
}
.color-Light-Gray-1 {
    color: $Light-Gray-1 !important;
}
.color-Light-Gray-2 {
    color: $Light-Gray-2 !important;
}
.color-Light-Gray-3 {
    color: $Light-Gray-3 !important;
}
.color-White {
    color: $White !important;
}
.color-Link {
    color: $Link !important;
}
.color-dark-link {
    color: $Link-on-dark !important;
}

.b-color-black {
    background-color: $Black-Color !important;
}

.b-color-Dark-Gray-1 {
    background-color: $Dark-Gray-1 !important;
}

.b-color-Dark-Gray-2 {
    background-color: $Dark-Gray-2 !important;
}
.b-color-Red {
    background-color: $Red !important;
}
.b-color-Green {
    background-color: $Green !important;
}
.b-color-Light-Gray-1 {
    background-color: $Light-Gray-1 !important;
}
.b-color-Light-Gray-2 {
    background-color: $Light-Gray-2 !important;
}
.b-color-Light-Gray-3 {
    background-color: $Light-Gray-3 !important;
}
.b-color-White {
    background-color: $White !important;
}
.b-color-Link {
    background-color: $Link !important;
}
.b-color-dark-link {
    background-color: $Link-on-dark !important;
}


a {
  text-shadow: none !important;
  color: $color-primary-dark;
  transition: color 0.1s linear 0s, background-color 0.1s linear 0s,
    opacity 0.2s linear 0s !important;
}
a:focus,
a:hover,
a:active {
  color: $Red;
}
a,
a:focus,
a:hover,
a:active {
  outline: 0 !important;
  text-decoration: none;
}
a[ng-click] {
  cursor: pointer;
}
br {
  line-height: normal;
  clear: both;
}
p {
  display: block;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.01em;
  line-height: 22px;
  margin: 0px 0px 10px 0px;
  font-style: normal;
  white-space: normal;
}
small,
.small {
  line-height: 18px;
  font-size: 85%;
}
label {
  &.inline {
    display: inline-block;
    position: relative;
    top: 0px;
    font-size: 13px;
  }
}
ul,
ol {
  margin-bottom: 10px;
  & > li {
    padding-left: 3px;
    line-height: 24px;
  }
  &.lg-icon {
    & > li {
      font-size: 21px;
      & span {
        font-size: 14px;
      }
    }
  }
  &.no-style {
    list-style: none;
    padding-left: 5px;
  }
}


.text-master {
  color: $color-master !important;
}
.text-master-light {
  color: $color-master-light !important;
}
.text-black {
  color: $color-master-dark !important;
}
.text-white {
  color: #fff !important;
}
.text-complete {
  color: $color-complete !important;
}
.text-success {
  color: $color-success !important;
}
.text-info {
  color: $color-info !important;
}
.text-warning {
  color: $color-warning !important;
}
.text-warning-dark {
  color: $color-warning-dark !important;
}

.text-danger {
  color: $color-danger !important;
}
.text-primary {
  color: $color-primary !important;
}

/* Text Aligngments
------------------------------------
*/

.text-right {
  text-align: right !important;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}

.windows {
  body,
  p {
    font-size: 13px;
    letter-spacing: normal;
  }

  .jumbotron p {
    font-size: 13px;
    &.small {
      font-size: 85%;
    }
  }
  small,
  .small {
    font-size: 89%;
  }
}

.alert {
  & > p,
  & > ul {
    margin-bottom: 0;
  }
}
.table {
  & > tbody {
    & > tr {
      & > td,
      & > th {
        line-height: 1.42857143;
      }
    }
  }
  & > tfoot {
    & > tr {
      & > td,
      & > th {
        line-height: 1.42857143;
      }
    }
  }
  & > thead {
    & > tr {
      & > td,
      & > th {
        line-height: 1.42857143;
      }
    }
  }
}