.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  padding: 10px;
  margin-bottom: 12px;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  padding: 10px;
  margin-bottom: 12px;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
  padding: 10px;
  margin: 10px;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
  padding: 10px;
  margin: 10px;
}

.account-type input.account-type-radio:checked ~ label {
  font-size: 84%;
}

.uploadButton-button7,
.uploadButton-button-new-project {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 4px;
  color: #3884d2;
  background-color: transparent;
  border: 1px solid #3884d2;
  flex-direction: row;
  transition: 0.3s;
  margin: 0;
  outline: none;
  box-shadow: 0 3px 10px rgba(56, 132, 210, 0.1);
}

.intro-banner.bg-hero-engineer.overlay-white {
  background: #18314a url(/assets/images/bg-hero-engineer.png) center center
    no-repeat !important;
  background-size: cover !important;
}

.col-xl-4.text-center,
.col-xl-3.text-center {
  text-align: center;
}

.top-quality {
  background: rgb(54, 127, 202) !important;
  background: linear-gradient(
    157deg,
    rgba(54, 127, 202, 1) 0%,
    rgba(19, 41, 64, 1) 100%
  ) !important;
  min-height: 418px !important;
}

.top-quality h2.title {
  margin-top: 31px;
  padding-left: 25%;
  padding-right: 25%;
  line-height: 43px;
  color: #ffffff;
}

.section.padding-top-10.padding-bottom-45.section-engineer {
  background-color: #f9f9f9;
}

.invoice-input-qty {
  max-width: 50% !important;
}

.invoice-items th.total {
  width: 200px !important;
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .top-quality h2.title {
    padding-left: 15%;
    padding-right: 15%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  #responsive {
    display: block;
  }

  #navigation {
    display: inline-block !important;
  }
}

.pl2 {
  padding-left: 2px !important;
}
.pr2 {
  padding-right: 2px !important;
}
.pr10 {
  padding-right: 10px;
}

.pr20 {
  padding-right: 20px;
}

.hide {
  display: none !important;
}

.invoice-line {
  border-bottom: 1px solid #ddd;
}

.textAlignRight {
  text-align: right;
}

.invoiceStatusMessage {
  float: right;
}

.approve-pay:hover {
  color: #fff;
  background-color: #333;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.invoice-input-qty {
  max-width: 50% !important;
}

.invoice-items th.total {
  width: 200px !important;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #responsive {
    display: block;
  }

  #navigation {
    display: inline-block !important;
  }
}

a.button,
a.button span,
span.button,
button.button,
.uploadButton .uploadButton-button {
  font-size: 12px;
}

.pheader {
  color: rgb(56, 132, 210);
  font-size: 14px;
  text-align: center;
  padding: 10px;
}

.trade-type {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;

  div {
    width: 31%;
    flex-wrap: wrap;
  }

  label {
    border-radius: 3px;
    border: none;
    background-color: #f2f2f2;
    width: 100%;
    margin-bottom: 0;
  }

  input.trade-type-radio:empty {
    display: none;
  }

  label i {
    position: relative;
    font-size: 18px;
    top: 2px;
    margin-right: 2px;
  }

  input.trade-type-radio {
    &:empty ~ label {
      position: relative;
      float: left;
      padding: 10px;
      text-align: center;
      padding-bottom: 11px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-radius: $global-border-radius;
      color: #888;
      transition: 0.4s;
      line-height: 28px;
      overflow: hidden;
    }

    ~ label:hover {
      color: #289c41;
      background-color: #e4f6e9;
    }

    &:checked ~ label {
      color: #fff;
      background-color: #47bb67;
    }

    &:empty ~ label {
      &:after,
      &:before {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 48px;
        border-radius: $global-border-radius;
        font-size: 22px;
        background: transparent;
        z-index: 100;
        opacity: 0;
      }
    }
  }

  .ripple-effect-dark span.ripple-overlay {
    animation: ripple 1.2s;
    opacity: 0.03;
  }
}

#register-account-form .welcome-text {
  margin-top: 2rem;
}

#btnregister {
  width: 100% !important;
}

ul.dashboard-box-list.activity-logs li ul {
  padding-left: 20px;
}

ul.dashboard-box-list.activity-logs li ul li {
  list-style: square;
}

h3 + ul {
  list-style: square !important;
  padding-left: 20px !important;
}

h3 ~ ul {
  list-style: square !important;
  padding-left: 20px !important;
}