
.IconA {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    --color-link: #6b6b6b;
    --color-link-hover: #545454;
    --color-link-textOutline: #6b6b6b;
    --color-link-textFlat: #6b6b6b;
    color: var(--color-link);
    padding: 0;
    display: inline-flex !important;
    align-items: center
}

.IconA:hover, .IconA:hover:after {
    color: var(--color-link-hover)
}

.IconA__wrapper {
    display: inline-block
}

.IconA--icon:after {
    content: "";
    font-family: FontAwesome !important;
    font-size: var(--size-icon);
    line-height: var(--size-icon);
    color: var(--color-link);
    width: var(--size-icon);
    height: var(--size-icon);
    margin-left: 4px;
    font-weight: 300;
    -webkit-font-smoothing: antialiased
}

.IconA--left {
    flex-direction: row-reverse
}

.IconA--left:after {
    margin: 0 4px 0 0
}

.IconA--flatButton, .IconA--outlineButton {
    --button-padding-horizontal: 24px;
    --padding-iconButton: 32px;
    --button-padding-vertical: 8px;
    border-radius: calc(var(--padding-iconButton) + var(--size-icon) * 2);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border: 1px solid var(--color-link)
}

.IconA--flatButton:hover, .IconA--outlineButton:hover {
    border-color: var(--color-link-hover)
}

.IconA--flatButton:after, .IconA--outlineButton:after {
    color: var(--color-link-textButton)
}

.IconA--flatButton.IconA--icon:after, .IconA--outlineButton.IconA--icon:after {
    font-family: FontAwesome !important;
    font-size: var(--size-icon);
    font-weight: 300;
    height: var(--size-icon);
    line-height: var(--size-icon);
    width: var(--size-icon);
    right: var(--button-padding-horizontal);
    -webkit-font-smoothing: antialiased
}

.IconA--outlineButton, .IconA--outlineButton.IconA--icon {
    color: var(--color-link-textOutline)
}

.IconA--flatButton {
    --color-link-textFlat: var(--white);
    color: var(--color-link-textFlat);
    background-color: var(--color-link);
    border-color: var(--color-link)
}

.IconA--flatButton:hover {
    background-color: var(--color-link-hover);
    border-color: var(--color-link-hover)
}

.IconA--flatButton:hover, .IconA--flatButton:hover:after {
    color: var(--color-link-textFlat)
}

.IconA--small {
    --size-icon: 12px
}

.IconA--small.IconA--flatButton, .IconA--small.IconA--outlineButton {
    --button-padding-horizontal: 16px;
    --button-padding-vertical: 5px;
    --padding-iconButton: 24px;
    --size-icon: 12px;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 300
}

.IconA--medium {
    --size-icon: 18px !important;
}

.IconA--medium.IconA--flatButton, .IconA--medium.IconA--outlineButton {
    --button-padding-horizontal: 24px;
    --button-padding-vertical: 8px;
    --padding-iconButton: 36px;
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 300
}

.IconA--medium.IconA--linkType {
    --size-icon: 18px;
    font-size: 1.155rem !important;
    line-height: 1.75rem;
    font-weight: 500
}

.IconA--large {
    --size-icon: 18px
}

.IconA--large.IconA--flatButton, .IconA--large.IconA--outlineButton {
    --button-padding-horizontal: 32px;
    --button-padding-vertical: 9px;
    --padding-iconButton: 40px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 300
}

.IconA--large.IconA--linkType {
    --size-icon: 24px;
    font-size: 1.5rem;
    line-height: 2.0625rem;
    font-weight: 500
}


.IconA--maincolor {
    --color-link: #f5962d !important;
    --color-link-hover: var(--maincolor50);
    --color-link-textOutline: var(--maincolor40)
}

.IconA--sky40 {
    --color-link: var(--sky40);
    --color-link-hover: var(--sky50);
    --color-link-textOutline: var(--sky40)
}

.IconA--blue40 {
    --color-link: var(--blue40);
    --color-link-hover: var(--blue50);
    --color-link-textOutline: var(--blue40)
}

.IconA--blue80 {
    --color-link: var(--blue80);
    --color-link-hover: var(--blue90);
    --color-link-textOutline: var(--blue80)
}

.IconA--grey {
    --color-link: #6b6b6b;
    --color-link-hover: #545454;
    --color-link-textOutline: #282828
}

.IconA--grey.IconA--outlineButton {
    --color-link-hover: #282828
}

.IconA--white {
    --color-link: var(--white);
    --color-link-hover: var(--grey10);
    --color-link-textFlat: #282828;
    --color-link-textOutline: var(--white)
}

.IconA--noText.IconA--icon:after {
    margin: 0
}

.IconA--facebook {
    color: #1e4297 !important;
    border-color: #1e4297 !important;
}

.IconA--twitter {
    color: #1da1f2 !important;
    border-color: #1da1f2 !important;
}

.IconA--linkedin {
    color: #006cb0 !important;
    border-color: #006cb0 !important;
}

.IconA--play {
    color: #f70000 !important;
    border-color: #f70000 !important;
}

.IconA--wify {
    color: #ab2084 !important;
    border-color: #ab2084 !important;
}
