.helptip-alpha
{
    display: grid;
    grid-template-areas:
        "top    top    top"
        "left   blank right"
        "bottom bottom bottom";

        grid-template-rows: repeat(3, auto);
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    --x: 630px;
    --y: 587px;
    --width: 97px;
    --height: 34px;
}

.helptip-alpha > div
{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, .75);
}

.helptip-alpha .helptip-alpha-window
{
    background: none;
}

.helptip-alpha .helptip-alpha-top
{
    grid-area: top;
    height: var(--y);
}

.helptip-alpha .helptip-alpha-left
{
    grid-area: left;
    width: var(--x);
    height: var(--height);
}

.helptip-alpha .helptip-alpha-window
{
    grid-area: blank;
    width: var(--width);
    height: var(--height);
}

.helptip-alpha .helptip-alpha-right
{
    grid-area: right;
    width: calc(100vw - (var(--x) + var(--width)));
    height: var(--height);
}

.helptip-alpha .helptip-alpha-bottom
{
    grid-area: bottom;
    height: calc(100vh - (var(--y) + var(--height)));
}


.helptip
{
    display: grid;
    grid-template-rows: auto 15px;

    position: absolute;
    z-index: 1001;
    width: fit-content;
}

.helptip button
{
    all: unset;
}

.helptip button > *
{
    pointer-events: none;
}

.helptip .helptip-panel
{
    display: grid;
    grid-template-rows: minmax(80px, auto) 36px;
    row-gap: 10px;

    width: fit-content;
    min-width: 300px;
    max-width: 380px;
    padding: 25px;
    border-radius: 10px;
    background: #3ea2e0;
    box-sizing: border-box;
    color: #ffffff;
    font-family: 'Segoe UI', 'Arial';
    font-size: 12px;
    letter-spacing: .5px;
}

.helptip .helptip-arrow
{
    grid-row: 2 / 3;
    vertical-align: top;
    width: 0;
    margin-left: 20px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #3ea2e0;
    pointer-events: none;
}

/**************************************************/


.helptip[help-align^="B"]
{
    grid-template-rows: 15px auto;
}

.helptip[help-align^="B"] .helptip-arrow
{
    grid-row: 1 / 2;
    margin-left: 20px;
    border-top: 0 solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #3ea2e0;
}

.helptip[help-align^="BR"] .helptip-panel
{
    grid-row: 2 / 3;
}

.helptip[help-align="BL"] .helptip-arrow,
.helptip[help-align="TL"] .helptip-arrow
{
    margin-left: auto;
    margin-right: 20px;
}

.helptip[help-align="BC"] .helptip-arrow,
.helptip[help-align="TC"] .helptip-arrow
{
    margin-left: auto;
    margin-right: auto;
}

.helptip[help-align="TR"] .helptip-arrow,
.helptip[help-align="BR"] .helptip-arrow
{
    margin-left: auto;
    margin-right: 20px;
}

/**************************************************/

.helptip .helptip-title
{
    font-size: 18px;
    font-weight: 600;
}

.helptip p
{
    font-size: 14px;
}

.helptip .helptip-interaction
{
    text-decoration: underline;
    cursor: pointer;
}

/****************************************************************************************************
****************************************************************************************************/




/****************************************************************************************************
****************************************************************************************************/

.helptip .helptip-row:nth-child(2)
{
    display: grid;
    grid-template-columns: auto 100px;
    align-items: center;
}

.helptip .helptip-row .helptip-col
{
    grid-column: 1 / 2;
}

.helptip .helptip-row .helptip-col:nth-child(2)
{
    grid-column: 2 / 3;
    text-align: right;
}

/****************************************************************************************************
****************************************************************************************************/

.helptip button
{
    display: grid;
    grid-auto-flow: column;

    vertical-align: middle;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    outline: 0;
    font-size: 0;
    cursor: pointer;
    pointer-events: all;
    
    --height: 36px;
}

.helptip button .button-next-content
{
    display: inline-block;
    vertical-align: top;
    height: var(--height);
    padding: 0 20px;
	background: #23506e;
    border-radius: 5px;
    color: #ffffff;
    font-weight: normal;
    line-height: var(--height);
    font-size: 14px;
    text-transform: uppercase;
}

.helptip button[name="next"] .button-next-content
{
    padding-right: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.helptip button .button-next-pointer
{
    display: inline-block;
    vertical-align: top;
    border-top: calc(var(--height) / 2) solid transparent;
	border-bottom: calc(var(--height) / 2) solid transparent;
	border-left: calc(var(--height) / 2) solid #23506e;
    pointer-events: none;
}

@media (orientation: landscape) {
    .helptip .helptip-panel
    {
        max-width: 90vw;
    }
}

.helptip button,
.helptip .helptip-interaction
{
    pointer-events: all !important;
}

.helptip[help-length="1"] .helptip-row:nth-child(2) .helptip-col:nth-child(1),
.helptip[help-ID-last="1"] .helptip-row:nth-child(2) .helptip-col:nth-child(1),
.helptip[help-ID-last="1"] button[name="next"],
.helptip:not([help-ID-last="1"]) button[name="complete"]
{
    display: none;
}