.button {
    text-shadow: none;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out;
    margin: 0;
    padding: 8px 14px;
    vertical-align: middle;
    border-style: solid;
    border-width: 2px;
    outline: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 30px;
    white-space: normal;
    overflow: hidden;
    border-radius: 30px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--cool-900);
    border-color: var(--yellow-500);
    background-color: var(--yellow-500)
}

.button.icons_dictionary,
.button>.icons_dictionary,
.button.icons_dictionary_before:before,
.button.icons_dictionary_after:after {
    background-color: var(--cool-900);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    width: 16px;
    height: 16px
}

.button:hover,
.button:focus-visible {
    text-decoration: none;
}

.button.blue.icons_dictionary,
.button.blue>.icons_dictionary,
.button.blue.icons_dictionary_before:before,
.button.blue.icons_dictionary_after:after {
    background-color: var(--warm-100)
}

.button.blue:hover,
.button.blue:focus-visible {
    border-color: var(--azure-700);
    background-color: var(--azure-700)
}

.button.green {
    color: var(--warm-100);
    background-color: var(--green-600);
    border-color: var(--green-600)
}

.button.green.icons_dictionary,
.button.green>.icons_dictionary,
.button.green.icons_dictionary_before:before,
.button.green.icons_dictionary_after:after {
    background-color: var(--warm-100)
}

.button.green:hover,
.button.green:focus-visible {
    border-color: var(--green-700);
    background-color: var(--green-700)
}

.button.salad {
    color: var(--green-800);
    background-color: var(--green-300);
    border-color: var(--green-300)
}

.button.salad.icons_dictionary,
.button.salad>.icons_dictionary,
.button.salad.icons_dictionary_before:before,
.button.salad.icons_dictionary_after:after {
    background-color: var(--green-800)
}

.button.salad:hover,
.button.salad:focus-visible {
    border-color: var(--green-400);
    background-color: var(--green-400)
}

.button.red {
    color: var(--warm-100);
    background-color: #D1401F;
    border-color: #D1401F
}

.button.red.icons_dictionary,
.button.red>.icons_dictionary,
.button.red.icons_dictionary_before:before,
.button.red.icons_dictionary_after:after {
    background-color: var(--warm-100)
}

.button.red:hover,
.button.red:focus-visible {
    border-color: var(--red-600);
    background-color: var(--red-600)
}

.button.ghost {
    color: var(--warm-100);
    background-color: transparent;
    border-color: var(--warm-100)
}

.button.ghost.icons_dictionary,
.button.ghost>.icons_dictionary,
.button.ghost.icons_dictionary_before:before,
.button.ghost.icons_dictionary_after:after {
    background-color: var(--warm-100)
}

.button.ghost:hover,
.button.ghost:focus-visible {
    color: var(--cool-900);
    border-color: var(--yellow-300);
    background-color: var(--yellow-300)
}

.button.ghost:hover.icons_dictionary,
.button.ghost:hover>.icons_dictionary,
.button.ghost:hover.icons_dictionary_before:before,
.button.ghost:hover.icons_dictionary_after:after,
.button.ghost:focus-visible.icons_dictionary,
.button.ghost:focus-visible>.icons_dictionary,
.button.ghost:focus-visible.icons_dictionary_before:before,
.button.ghost:focus-visible.icons_dictionary_after:after {
    background-color: var(--cool-900)
}

.button.transparent {
    background-color: transparent;
    border-color: var(--cool-900)
}

.button.transparent.icons_dictionary,
.button.transparent>.icons_dictionary,
.button.transparent.icons_dictionary_before:before,
.button.transparent.icons_dictionary_after:after {
    background-color: var(--cool-900)
}

.button.transparent:hover,
.button.transparent:focus-visible {
    border-color: var(--yellow-300);
    background-color: var(--yellow-300)
}

.button.black {
    color: var(--warm-100);
    background-color: var(--cool-900);
    border-color: var(--cool-900)
}

.button.black.icons_dictionary,
.button.black>.icons_dictionary,
.button.black.icons_dictionary_before:before,
.button.black.icons_dictionary_after:after {
    background-color: var(--warm-100)
}

.button.black:hover,
.button.black:focus-visible {
    border-color: var(--cool-800);
    background-color: var(--cool-800)
}

.button.white {
    background-color: var(--warm-100);
    border-color: var(--warm-100)
}

.button.white.icons_dictionary,
.button.white>.icons_dictionary,
.button.white.icons_dictionary_before:before,
.button.white.icons_dictionary_after:after {
    background-color: var(--cool-900)
}

.button.white:hover,
.button.white:focus-visible {
    border-color: var(--warm-200);
    background-color: var(--warm-200)
}

.button.passive {
    border-width: 1px;
    background-color: transparent !important;
    cursor: text;
    padding-top: 9px;
    padding-bottom: 9px
}

.button.social-icon {
    font-size: 0;
    padding: 5px;
    width: 42px;
    height: 42px
}

.button.social-icon.icons_dictionary,
.button.social-icon>.icons_dictionary,
.button.social-icon.icons_dictionary_before:before,
.button.social-icon.icons_dictionary_after:after {
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    width: 20px;
    height: 20px;
    margin: 0
}

.button.social-icon:hover,
.button.social-icon:focus-visible {
    border-color: var(--azure-700);
    background-color: var(--azure-700)
}

.button.social-icon:hover.icons_dictionary,
.button.social-icon:hover>.icons_dictionary,
.button.social-icon:hover.icons_dictionary_before:before,
.button.social-icon:hover.icons_dictionary_after:after,
.button.social-icon:focus-visible.icons_dictionary,
.button.social-icon:focus-visible>.icons_dictionary,
.button.social-icon:focus-visible.icons_dictionary_before:before,
.button.social-icon:focus-visible.icons_dictionary_after:after {
    background-color: var(--warm-100)
}

.button:focus-visible {
    outline: 2px solid var(--azure-700)
}

.button-link-effect {
    text-shadow: none;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    outline: 0;
    -webkit-appearance: none;
    white-space: nowrap;
    border-bottom: 2px solid #161B26;
    background: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.05em;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    color: #161B26
}

.button-link-effect.icons_dictionary,
.button-link-effect.icons_dictionary_before:before,
.button-link-effect.icons_dictionary_after:after {
    background: #161B26;
    -webkit-mask-size: 10px 10px;
    mask-size: 10px 10px;
    width: 10px;
    height: 10px
}

.button-link-effect .icons_dictionary_after.inside_text:after {
    height: auto;
    min-height: 10px
}

.button-link-effect:hover,
.button-link-effect:focus-visible {
    color: #007BC7;
    border-color: #007BC7;
    text-decoration: none
}

.button-link-effect:hover.icons_dictionary,
.button-link-effect:hover.icons_dictionary_before:before,
.button-link-effect:hover.icons_dictionary_after:after,
.button-link-effect:focus-visible.icons_dictionary,
.button-link-effect:focus-visible.icons_dictionary_before:before,
.button-link-effect:focus-visible.icons_dictionary_after:after {
    background-color: #007BC7
}

.button-link-effect:focus-visible {
    outline: 2px solid #007BC7
}