.nc-button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: #fff;
  border: 2px solid transparent;
  letter-spacing: normal;
  text-decoration: none;
  transition: 0.3s;

  /* default size */
  font-size: 16px;
  padding: 14px!important;
  border-radius: 50px!important;
  min-width: 250px;

  &:hover {
    color: #fff;
  }

  @media screen and (max-width: 767px) {
    padding: 16px;
  }

  .icon-after {
    display: flex;
    align-items: center;

    i {
      font-size: 0.8em;
    }
  }
}

.nc-button-fill-primary {
  background-color: #223447;
  border-color: #223447;

  &:hover {
    color: #fff;
    background-color: #1d2c3c;
    border-color: #1b2a39
  }
}

.nc-button-fill-secondary {
  background-color: #2d7492;
  border-color: #2d7492;

  &:hover {
    background-color: #26637c;
    border-color: #245d75
  }
}

.nc-button-fill-tertiary {
  background-color: #566d93;
  border-color: #566d93;

  &:hover {
    background-color: #495d7d;
    border-color: #455776
  }
}

.nc-button-fill-danger {
  background-color: #d00;
  border-color: #d00;

  &:hover {
    background-color: #bc0000;
    border-color: #b10000;
  }
}

.nc-button-fill-cc-accent {
  background-color: #fab904;
  border-color: #fab904;

  &:hover {
    background-color: #fcd604;
    border-color: #fcd604
  }
}

.nc-button-fill-cc-sub-accent {
  background-color: #FF5F01;
  border-color: #FF5F01;

  &:hover {
    background-color: #FF8401;
    border-color: #FF8401
  }
  &.hover-outline{
    &:hover {
      background-color: #fff;
      color: #ff5f01;
      border: 2px solid #ff5f01;
      background-image: url("/template/img/button/ico_arrow_cc-sub-accent.svg") !important;
    }
  }
}

.nc-button-fill-gcp-primary {
  background-color: #367971;
  border-color: #367971;

  &:hover {
    background-color: #2e6760;
    border-color: #2b615a;
  }
}

.nc-button-fill-gcp-secondary {
  background-color: #183935;
  border-color: #183935;

  &:hover {
    background-color: #14302d;
    border-color: #132e2a;
  }
}

.nc-button-fill-security-primary {
  background-color: #67568c;
  border-color: #67568c;

  &:hover {
    background-color: #584977;
    border-color: #524570;
  }
}

.nc-button-fill-security-secondary {
  background-color: #3a324b;
  border-color: #3a324b;

  &:hover {
    background-color: #312b40;
    border-color: #2e283c;
  }
}

.nc-button-fill-body {
  color: #223447;
  background-color: #fff;
  border-color: #fff;

  &:hover {
    color: #000;
    background-color: white;
    border-color: white;
  }
}

.nc-button-fill-gray {
  background-color: #aaa;
  border-color: #aaa;

  &:hover {
      background-color: #ccc;
      border-color: #ccc;
  }
}

.nc-button-fill-gray-dark {
  background-color: #757575;
  border-color: #757575;
  &:hover {
      background-color: #969696;
      border-color: #969696;
  }
}

/* outline */
.nc-button-outline-primary {
  color: #223447;
  border-color: #223447;
  background-color: #fff;

  &:hover {
    background-color: #223447;
    border-color: #223447
  }
}

.nc-button-outline-secondary {
  color: #2d7492;
  border-color: #2d7492;
  background-color: #fff;

  &:hover {
    background-color: #2d7492;
    border-color: #2d7492;
  }
}

.nc-button-outline-tertiary {
  color: #566d93;
  border-color: #566d93;
  background-color: #fff;

  &:hover {
    background-color: #566d93;
    border-color: #566d93;
  }
}

.nc-button-outline-danger {
  color: #d00;
  border-color: #d00;
  background-color: #fff;

  &:hover {
    background-color: #d00;
    border-color: #d00;
  }
}

.nc-button-outline-cc-accent {
  color: #fab904;
  border-color: #fab904;
  background-color: #fff;

  &:hover {
    background-color: #fab904;
    border-color: #fab904;
  }
}

.nc-button-outline-gcp-primary {
  color: #367971;
  border-color: #367971;
  background-color: #fff;

  &:hover {
    background-color: #367971;
    border-color: #367971;
  }
}

.nc-button-outline-gcp-secondary {
  color: #183935;
  border-color: #183935;
  background-color: #fff;

  &:hover {
    color: #fff;
    background-color: #183935;
    border-color: #183935;
  }
}

.nc-button-outline-security-primary {
  color: #67568c;
  border-color: #67568c;
  background-color: #fff;

  &:hover {
    background-color: #67568c;
    border-color: #67568c;
  }
}

.nc-button-outline-security-secondary {
  color: #3a324b;
  border-color: #3a324b;
  background-color: #fff;

  &:hover {
    color: #fff;
    background-color: #3a324b;
    border-color: #3a324b;
  }
}

.nc-button-outline-rightblue {
  border: 1px solid #3b7c97;
  border-radius: 50px;
  color: #3b7c97;

  &:hover {
    background-color: #3b7c97;
  }
}

.nc-button-outline-body {
  border: 1px solid rgba(255, 255, 255, 0.4);

  &:hover {
    background-size: 20px 20px;
    background-color: #fcba04;
    border: 1px solid #fcba04;
  }
}

/* size */
.nc-button-xl {
  font-size: 32px;
  padding: 14px 32px!important;
  min-width: 500px;

  @media screen and (max-width: 767px) {
    font-size: 24px;
    padding: 14px 24px;
    min-width: 250px;
  }
}

.nc-button-lg {
  font-size: 22px;
  padding: 21.5px!important;
  min-width: 360px;

  @media screen and (max-width: 767px) {
    font-size: 18px;
    padding: 20px;
    min-width: 250px;
  }
}

.nc-button-mlg {
  font-size: 16px;
  line-height: 1;
  padding: 22px!important;
  min-width: 340px;
}

.nc-button-md{
  @media screen and (min-width:768px) {
    min-width: 346px;
  }
}

.nc-button-sm {
  font-size: 14px;
  padding: 10px!important;
  min-width: 120px;
}

/* arrow */
.nc-button-arrow {
  position: relative;
  background-repeat: no-repeat;
  background-position: right 20px top 48%;
  padding-right: 50px!important;
  padding-left: 50px  !important;

  &:hover {
    background-position: right 15px top 48%;
  }
}

a[class*="nc-button-fill"] {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_body.svg");
    background-size: 12.5px!important;
    &.nc-button-xl{background-size: 20px!important;}
    &.nc-button-lg{background-size: 15px!important;}
    &:hover {
      background-image: url("/template/img/button/ico_arrow_body.svg");
    }
  }

}

a[class*="nc-button-outline"] {
  &.nc-button-arrow {
    background-size: 12.5px!important;
    &.nc-button-xl{background-size: 20px!important;}
    &.nc-button-lg{background-size: 15px!important;}
    &:hover {
      background-size: auto;
      background-image: url("/template/img/button/ico_arrow_body.svg");
    }
  }
}

.nc-button.nc-button-outline-primary {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_primary.svg");
  }
}

.nc-button.nc-button-outline-secondary {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_secondary.svg");
  }
}

.nc-button.nc-button-outline-cc-accent {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_accent.svg");
  }
}

.nc-button.nc-button-outline-gcp-primary {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_gcp-primary.svg");
  }
}

.nc-button.nc-button-outline-gcp-secondary {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_gcp-secondary.svg");
  }
}

.nc-button.nc-button-outline-security-primary {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_security-primary.svg");
  }
}

.nc-button.nc-button-outline-rightblue {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_rightblue.svg");
  }
}

.nc-button.nc-button-outline-body {
  &.nc-button-arrow {
    background-image: url("/template/img/button/ico_arrow_body.svg");
  }
}

/* inner-link */

.nc-button-inner-link {
  position: relative;
  background-repeat: no-repeat;
  background-position: right 20px top 52%;
  padding-right: 50px;
  padding-left: 50px;
}

a[class*="nc-button-fill"] {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_body.svg");
    background-size: 12.5px!important;
    &.nc-button-xl{background-size: 20px!important;}
    &.nc-button-lg{background-size: 15px!important;}
    &:hover {
      background-size: auto;
      background-image: url("/template/img/button/ico_inner-link_body.svg");
    }
  }
}

a[class*="nc-button-outline"] {
  &.nc-button-inner-link {
    background-size: 12.5px!important;
    &.nc-button-xl{background-size: 20px!important;}
    &.nc-button-lg{background-size: 15px!important;}
    &:hover {
      background-size: auto;
      background-image: url("/template/img/button/ico_inner-link_body.svg");
    }
  }
}

.nc-button.nc-button-outline-primary {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_primary.svg");
  }
}

.nc-button.nc-button-outline-secondary {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_secondary.svg");
  }
}

.nc-button.nc-button-outline-cc-accent {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_accent.svg");
  }
}

.nc-button.nc-button-outline-gcp-primary {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_gcp-primary.svg");
  }
}

.nc-button.nc-button-outline-gcp-secondary {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_gcp-secondary.svg");
  }
}

.nc-button.nc-button-outline-security-primary {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_security-primary.svg");
  }
}

.nc-button.nc-button-outline-rightblue {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_rightblue.svg");
  }
}

.nc-button.nc-button-outline-body {
  &.nc-button-inner-link {
    background-image: url("/template/img/button/ico_inner-link_body.svg");
  }
}

/* shape */
/* .nc-button-outlined {
  color: var(--color-bg);
  border: 2px solid var(--color-bg);
  background: var(--color-white);
} */

/* elevation */
/* .nc-button-elevation-0 {
  box-shadow: none;
} */

.nc-button-boxShadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.nc-button-multisize {
  padding: 26.5px 32px;
  font-size: 32px;
  border-radius: 70px;
  min-width: 495px;

  small {
    display: block;
    font-size: 14px;
    line-height: 1.3;
  }

  &.nc-button-arrow {
    background-size: 20px !important;
  }

  @media screen and (max-width:767px) {
    min-width: initial;
    width: 100%;
    padding-top: 19.5px;
    padding-bottom: 19.5px;
    font-size: 24px;

    small {
      font-size: 12px;
    }
  }
}