html
{
    scroll-behavior : smooth;
}

a[name]
{
    display    : block;
    position   : relative;
    top        : -65px;
    visibility : hidden;
}

header
{
    text-align : left;
}

h2:first-child
{
    margin-top : 0;
}

.navbar-fixed-top
{
    z-index : 20000;
}

textarea
{
    background       : var(--silver);
    border           : none;
    border-radius    : 4px;
    display          : block;
    font-family      : Consolas, 'Courier New', monospace;
    margin           : 10px 0 20px;
    min-height       : 70px;
    overflow         : auto;
    padding          : 30px 10px;
    resize           : vertical;
    -moz-tab-size    : 4;
    -o-tab-size      : 4;
    -webkit-tab-size : 4;
    tab-size         : 4;
    white-space      : nowrap;
    width            : 100%;
}

p
{
    line-height : 1.5;
}

code
{
    color : #333333;
}

fieldset
{
    border        : 2px solid #CCCCCC;
    border-radius : 8px;
    margin        : 0 auto 20px;
    max-width     : 100%;
    padding       : 20px;
    width         : 800px;
}

fieldset > :first-child
{
    margin-top : 0;
}

#dsComponent_dsCOMPONENTS
{
    height   : 690px;
    position : relative;
}

.pane
{
    display        : block;
    height         : 700px;
    left           : 0;
    opacity        : 1;
    pointer-events : auto;
    position       : absolute;
    top            : 0;
    transform      : translate(0, 0);
    transition     : opacity 0.5s ease, transform 0.5s ease;
    width          : 100%;
}

.pane:not(.active)
{
    opacity        : 0;
    pointer-events : none;
    transform      : translate(0, 60px);
}

.setup-link
{
    display    : block;
    margin     : 20px auto 0;
    text-align : center;
}

.pane > div
{
    overflow : hidden;
}

.pane > p:first-child
{
    margin-bottom : 20px;
    text-align    : center;
}

#ph--container
{
    border        : 2px dashed rgba(0, 0, 0, 0.1);
    border-radius : 20px;
    height        : 400px;
    margin        : 0 auto;
    width         : 600px;
}

.copy
{
    padding   : 2.5px 5px;
    position  : absolute;
    transform : translateY(10px);
}

article.container ol > li
{
    margin-bottom  : 0;
    padding-bottom : 10px;
}

article.container ol > li:last-child
{
    padding-bottom : 0;
}


section.ph-bg-blue article.container ol > li:before
{
    background : #FFFFFF;
    box-shadow : inset 0 0 0 2px #FFFFFF;
    color      : #333333;
}

section.ph-bg-blue article.container ol > li:after
{
    background : #FFFFFF;
}

input[type='text']
{
    background    : rgba(var(--green_rgb), 0.15);
    border        : none;
    border-bottom : 2px solid var(--ui);
    font-weight   : normal;
    line-height   : normal;
    max-width     : 100%;
    outline       : none;
    padding       : 8px 8px 5px;
    width         : 240px;
}

input[type='text']:focus
{
    background : rgba(var(--green_rgb), 0.25);
}

input[type='text']::placeholder
{
    color : var(--ui);
}


input[type='radio'] + label
{
    font-weight  : normal;
    height       : 38px;
    line-height  : 38px;
    margin       : 0;
    padding-left : 10px;
}

input[type='radio']:checked + label
{
    font-weight : bold;
}

#dsComponent_dsSELECTOR
{
    background  : #FFFFFF;
    border      : none;
    display     : block;
    font-size   : 24px;
    font-weight : bold;
    margin      : 0 auto 20px;
    max-width   : 100%;
    padding     : 15px;
    width       : 600px;
}