HTML
{
    height : 100%;
}

BODY
{
    height     : 87%;
    background : -webkit-radial-gradient(circle farthest-side at center center, #FFFFFF 0%, #FFFFFF 70%, #CCCCCC 100%);
    background : -o-radial-gradient(circle farthest-side at center center, #FFFFFF 0%, #FFFFFF 70%, #CCCCCC 100%);
    background : -moz-radial-gradient(circle farthest-side at center center, #FFFFFF 0%, #FFFFFF 70%, #CCCCCC 100%);
    background : radial-gradient(circle farthest-side at center center, #FFFFFF 0%, #FFFFFF 70%, #CCCCCC 100%);
}

BODY, H1, H2, H3, H4, INPUT, SELECT, A, #company
{
    padding     : 0;
    margin      : 0;
    outline     : none;
    font-family : Arial, sans-serif;
    font-size   : 1.0rem;
    color       : #666666;
}

H1, H2, H3
{
    padding     : 12px 0;
    font-weight : 700;
}

H2
{
    font-size   : 1.8rem;
    color       : #FFFFFF;
    text-shadow : 1px 1px 1px #000000;
}

H3
{
    font-size : 1.3em;
}

H4
{
    margin  : 0;
    padding : 0;
}

.error, .ok
{
    font-weight : bolder;
}

.error
{
    color      : #FF0000;
    font-size  : 0.85em;
    margin-top : 2px;
}

.ok
{
    color : #6D982D;
}

.required
{
    margin     : 0;
    padding    : 0;
    color      : #FF0000;
    text-align : center;
}

PRE
{
    text-align : center;
}

HEADER
{
    margin           : 20px 0 0 0;
    background-color : #174065;
    min-height       : 20%;
    z-index          : -1;
    border-top       : 1px solid #FFFFFF;
    border-bottom    : 1px solid #FFFFFF;
}

NAV
{
    position : relative;
    z-index  : 1;
    top      : -20%;
    padding  : 0;
}

NAV #nav-container
{
    width           : 100%;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    justify-content : space-between;
}

NAV .nav-item
{
    display          : flex;
    flex-direction   : row;
    flex-wrap        : nowrap;
    justify-content  : space-between;
    align-items      : center;
    width            : 50%;
    background-color : #174065;
}

NAV .nav-item UL
{
    display         : flex;
    flex-direction  : row;
    justify-content : flex-end;
    align-items     : center;
    width           : 100%;
    margin-right    : 20px;
}

NAV .nav-item UL LI
{
    margin-left : 40px;
    color       : #FFFFFF;
}

NAV .nav-item UL LI A
{
    text-decoration : none;
    color           : #FFFFFF;
}

NAV .nav-item UL LI A:hover
{
    text-shadow : 1px 1px 10px #FFFFFF;
}

#ribbon-wrapper
{
    margin-left : 25px;
    width       : 360px;
    height      : 97px;
}

#ribbon
{
    width         : 360px;
    padding       : 10px 0 20px 0;
    position      : absolute;
    top           : -10px;
    text-align    : center;
    border-radius : 3px 3px 30px 30px;
    background    : #FFFFFF;
    border        : 1px solid #000000;
    box-shadow    : 1px 1px 10px #000000;
}

#ribbon:before
{
    content       : "";
    position      : absolute;
    height        : 0;
    width         : 0;
    top           : 0;
    right         : -10px;
    border-bottom : 9px solid #000000;
    border-right  : 9px solid transparent;
}

#logo:after
{
    display        : block;
    content        : attr(title);
    font-family    : "Times New Roman", sans-serif;
    color          : #000000;
    font-size      : 1.2em;
    text-transform : uppercase;
    padding-top    : 10px;
}

#logo A
{
    font-size       : 1.8em;
    font-family     : "Times New Roman", sans-serif;
    color           : #000000;
    text-decoration : none;
    text-align      : center;
    text-transform  : uppercase;
    border-bottom   : 2px solid #000000;
    padding         : 4px;
}

MAIN
{
    position : relative;
    z-index  : 2;
    top      : -190px;
}

MAIN #main-container
{
    display         : flex;
    justify-content : center;
    align-items     : center;
}

MAIN .main-item
{
    width         : 50%;
    box-shadow    : 0 0 20px 1px #000000;
    border-radius : 10px 10px 0 0;
}

MAIN #main-head
{
    text-align          : center;
    border-radius       : 10px 10px 0 0;
    background-color    : #174065;
    border              : 2px solid #FFFFFF;
    padding             : 20px 0;
    background-image    : url("../img/debtor.png");
    background-position : 20px 20px;
    background-repeat   : no-repeat;
    background-size     : 70px;
    text-transform      : uppercase;
}

MAIN #main-head H2
{
    cursor : default;
}

MAIN #main-body
{
    background-color : #FFFFFF;
}

FORM
{
    padding             : 30px;
    border              : 2px solid #FFFFFF;
    background-color    : #EAEFF5;
    background-image    : url("../img/lock.png");
    background-position : bottom right;
    background-repeat   : no-repeat;
}

INPUT[type=checkbox]:checked + LABEL:after
{
    opacity : 1;
}

SELECT#language
{
    margin      : 0;
    font-weight : normal;
    padding     : 2px;
    font-size   : 12px;
}

SELECT:hover, INPUT:not(INPUT[type=submit]):hover
{
    box-shadow : 0 0 5px #666666;
}

SELECT OPTION
{
    font-weight : normal;
    color       : #666666;
}

SELECT OPTION:checked
{
    font-weight : bolder;
    font-size   : 12pt;
}

#policycheck
{
    width   : 100%;
    padding : 8px;
}

#policycheck LABEL
{
    margin  : 5px 0 0 0;
    padding : 3px 0 0 0;
}

#policycheck LABEL:hover A, #policycheck LABEL:hover
{
    font-weight : bold;
}

#policycheck SPAN
{
    margin-left : 25px;
}

INPUT[type=checkbox]
{
    -webkit-appearance : none;
    appearance         : none;
}

INPUT#check_1
{
    margin           : 5px 0 0 0;
    padding          : 0;
    background-color : transparent;
    border           : none;
    width            : 20px;
    height           : 22px;
    position         : absolute;
}

LABEL.check
{
    position : relative;
    display  : inline-block;
    margin   : 5px 20px 15px 0;
    cursor   : pointer;
}

LABEL.check::before
{
    content       : "";
    position      : absolute;
    left          : 0;
    top           : 2px;
    width         : 16px;
    height        : 16px;
    border-radius : 2px;
    border        : 1px solid #CBC9C9;
    background    : #FFFFFF;
}

INPUT[type=checkbox]:checked + .check:before
{
    background : #666666;
}

LABEL.check::after
{
    left         : 4px;
    border       : 3px solid #FFFFFF;
    content      : "";
    position     : absolute;
    top          : 6px;
    width        : 8px;
    height       : 4px;
    background   : transparent;
    border-top   : none;
    border-right : none;
    transform    : rotate(-45deg);
    opacity      : 0;
}

#button
{
    width  : 100%;
    margin : 15px 0 0 0;
}

#button INPUT[type=submit]
{
    padding       : 15px;
    cursor        : pointer;
    width         : 100%;
    border-radius : 5px;
    font-size     : 22px;
    font-weight   : 800;

    color         : #000000;
    text-shadow   : 3px 2px 3px rgba(255, 255, 255, 0.25);

    border        : 1px solid #6D982D;
    background    : #8EBF42;
    background    : -moz-linear-gradient(-90deg, #8EBF42, #6D982D);
    filter        : progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#8EBF42', endColorstr='#6D982D');
}

#button INPUT[type=submit]:hover
{
    box-shadow : 0 0 5px #666666;
}

#button INPUT[type=submit]:active
{
    position   : relative;
    top        : 1px;
    background : #8EBF42;
    background : -moz-linear-gradient(-90deg, #6D982D, #8EBF42);
    filter     : progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#6D982D', endColorstr='#8EBF42');
}

*:valid, *:disabled
{
    color       : #000000;
    font-weight : bold;
}

*:focus::placeholder, *:focus-within::placeholder
{
    color : transparent;
}

FOOTER
{
    position         : absolute;
    bottom           : 0;
    left             : 0;
    width            : 100%;
    background-color : #F4F4F4;
    text-align       : center;
    padding          : 10px 0;
    border-top       : 1px solid #CCCCCC;
    z-index          : 999;
}

@media (max-width : 1200px)
{
    BODY
    {
        height : 0;
    }

    NAV .nav-item
    {
        display         : flex;
        flex-direction  : column;
        justify-content : center;
        align-items     : center;
        width           : 100%;
    }

    NAV .nav-item H1, NAV .nav-item H1 A, NAV .nav-item UL, NAV .nav-item UL LI, NAV .nav-item UL LI A
    {
        margin : 0;
    }

    NAV .nav-item:last-child
    {
        height         : 20px;
        padding-bottom : 110px;
    }

    NAV .nav-item UL
    {
        display         : flex;
        flex-direction  : row;
        flex-wrap       : nowrap;
        justify-content : space-between;
        align-items     : center;
        width           : 80%;
        padding         : 0;
    }

    #ribbon-wrapper
    {
        margin-bottom : 30px;
        margin-left   : 0;
    }

    #ribbon:before
    {
        display : none;
    }

    MAIN
    {
        top : -80px;
    }

    MAIN .main-item
    {
        width : 80%;
    }

    MAIN #main-head H2
    {
        padding-left : 85px;
    }

    INPUT:not([type=submit])
    {
        width   : 87%;
        padding : 0 0 0 8px;
        height  : 37px;
    }
}