<form method="get" action="javascript:getlink();" style="text-align: center;" name="linkform" onsubmit="return checkForm(this);">

<xf:js src="xf/captcha.js" min="1" />

<div data-xf-init="re-captcha" data-sitekey="{$siteKey}" data-invisible="{$invisible}"></div>

<noscript>
    <div>
        <div style="width: 302px; height: 422px; position: relative;">
            <div style="width: 302px; height: 422px; position: absolute;">
                <iframe src="https://www.google.com/recaptcha/api/fallback?k={$siteKey|urlencode}"
                    frameborder="0" scrolling="no"
                    style="width: 302px; height:422px; border-style: none;"></iframe>
            </div>
        </div>
        <div style="width: 300px; height: 60px; border-style: none;
            bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
            background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
            <textarea name="g-recaptcha-response" id="g-recaptcha-response"
                class="g-recaptcha-response"
                style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
                margin: 10px 25px; padding: 0px; resize: none;"></textarea>
        </div>
    </div>
</noscript>
<style>
// ########################## GLOBAL BASE SETUP #######################

html
{
    font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif;
    font-family: @xf-fontFamilyUi;
    font-weight: @xf-fontWeightNormal;
    color: @xf-textColor;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    background-color: @xf-pageBg;

    /* // just a reminder that we *might* want this at some point
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;*/
}

button, input, optgroup, select, textarea
{
    font-family: @xf-fontFamilyUi;
    line-height: @xf-lineHeightDefault;
}

img
{
    max-width: 100%;
    height: auto;
}

b, strong
{
    font-weight: @xf-fontWeightHeavy;
}

a
{
    .xf-link();

    &:hover
    {
        .xf-linkHover();
    }
}

{{ include('core_setup.less') }}
{{ include('core_utilities.less') }}
{{ include('core_list.less') }}
{{ include('core_categorylist.less') }}
{{ include('core_block.less') }}
{{ include('core_blockmessage.less') }}
{{ include('core_blockstatus.less') }}
{{ include('core_blocklink.less') }}
{{ include('core_blockend.less') }}
{{ include('core_fixedmessage.less') }}
{{ include('core_button.less') }}
{{ include('core_meter_bar.less') }}

// ################################# INPUTS & FORMS #####################

.m-formElementExplain()
{
    display: block;
    font-style: normal;
    .xf-formExplain();

    .m-textColoredLinks();
}

{{ include('core_input.less') }}
{{ include('core_formrow.less') }}

{{ include('core_collapse.less') }}
{{ include('core_badge.less') }}
{{ include('core_tooltip.less') }}
{{ include('core_menu.less') }}
{{ include('core_offcanvas.less') }}
{{ include('core_tab.less') }}
{{ include('core_overlay.less') }}
{{ include('core_globalaction.less') }}
{{ include('core_avatar.less') }}
{{ include('core_datalist.less') }}
{{ include('core_filter.less') }}
{{ include('core_contentrow.less') }}
{{ include('core_pagenav.less') }}
{{ include('core_hscroller.less') }}

// FLASH MESSAGES
.flashMessage
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: @zIndex-9;
    .xf-flashMessage();

    .m-transitionFadeDown();
}

// AUTOCOMPLETE
.autoCompleteList
{
    .m-autoCompleteList();
    margin-top: 2px;
}

// #################################### TAGS ##############################
// note that while this is related to tags, it's commonly used so just include it

.tagList,
.tagList > dt,
.tagList > dd
{
    display: inline;
    padding: 0;
    margin: 0;
}

.tagItem
{
    display: inline-block;
    max-width: 100%;
    padding: 0 6px 1px;
    margin: 0 0 2px;
    border-radius: @xf-borderRadiusMedium;
    font-size: @xf-fontSizeSmaller;
    .xf-chip();

    &:hover
    {
        text-decoration: none;
        color: @xf-chip--color;
        .xf-chipHover();
    }
}

// ############################# MISC #########################

.recaptcha
{
    &.input
    {
        box-sizing: content-box;
        max-width: 100%;
    }

    img
    {
        max-width: 100%;
    }
}

.likesBar
{
    .m-transitionFadeDown();
    .xf-minorBlockContent();
    border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
    padding: @xf-paddingMedium;
    font-size: @xf-fontSizeSmaller;
    margin-top: @xf-paddingMedium;
}

.likeIcon
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-thumbs-up, 1em);
        color: @xf-textColorFeature;
        margin-right: .2em;
    }
}

.reactionsBar
{
    .m-transitionFadeDown();
    .xf-minorBlockContent();
    border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
    padding: @xf-paddingMedium;
    font-size: @xf-fontSizeSmaller;
    margin-top: @xf-paddingMedium;
}

.reactionSummary
{
    display: inline-block;
    .m-listPlain();
    line-height: 16px;
    height: 16px;
    margin: 0 -2px;
    vertical-align: text-top;

    > li
    {
        display: inline-block;
        height: 20px;
        width: 20px;
        padding: 2px;
        margin: -2px 0;
        background: @xf-contentBg;
        border-radius: 50%;
        position: relative;
        margin-left: -6px;

        &:nth-child(1)
        {
            z-index: 3;
            margin-left: 0;
        }

        &:nth-child(2)
        {
            z-index: 2;
        }

        &:nth-child(3)
        {
            z-index: 1;
        }
    }

    .reaction
    {
        position: absolute;
        top: 0;

        &.reaction
        {
            // increase specificity to override .reaction.reaction--<size>
            display: block;
        }
    }
}

.reactionsBar,
.message-responseRow
{
    .reactionSummary
    {
        > li
        {
            background: @xf-contentAltBg;
        }

        .reaction
        {
            top: 2px;
        }
    }
}

.reactTooltip
{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;

    .reaction
    {
        margin: @xf-paddingSmall;
        .m-transition(transform);

        &:hover
        {
            .m-transform(scale(1.2));
        }
    }
}

.colorChip
{
    display: inline-block;
    border: @xf-borderSize solid @xf-borderColor;
    border-radius: @xf-borderRadiusMedium;
    padding: 1px;
    width: 100px;
}

.colorChip-inner
{
    display: block;
    background-color: transparent;
    border-radius: @xf-borderRadiusSmall;
    height: 1em;
}

.colorChip-value
{
    display: none;
}

pre.sf-dump
{
    // not ideal, but then again neither is the default of 99999...
    z-index: @zIndex-1 !important;
}

.grecaptcha-badge
{
    z-index: @zIndex-5;
}

// Bookmarking links for 2.1
.bookmarkLink
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-bookmark);
        font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
    }
    &.is-bookmarked
    {
        &:before
        {
            font-weight: @faWeight-solid;
        }
    }

    &.bookmarkLink--highlightable.is-bookmarked
    {
        color: @xf-textColorAttention;

        &:hover
        {
            color: @xf-textColorAccentContent;
        }
    }

    span
    {
        margin-left: .35em;
    }
}

.dragHandle
{
    cursor: move;

    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-bars);
    }

    .is-undraggable &
    {
        visibility: hidden;
        cursor: default;
    }
}

{{ include('core_action_bar.less') }}
{{ include('core_labels.less') }}
{{ include('core_pikaday.less') }}
{{ include('core_reaction.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}
{{ include('core_fa.less') }}

// RESOLUTION OUTPUT

.debugResolution
{
    .debugResolution-output:before
    {
        content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}";
        @media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; }
        @media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; }
        @media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; }
        @media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; }
    }
}
</style>