:root { /* PURPLE #450B9D */
    --c-base-h: 264;
    --c-base-s: 87%;
    --c-base-l: 33%;
    --c-base: var(--c-base-h),var(--c-base-s),var(--c-base-l); /* YELLOW #FFCC00 */
    --c-action-h: 48;
    --c-action-s: 100%;
    --c-action-l: 50%;
    --c-action: var(--c-action-h),var(--c-action-s),var(--c-action-l); /* GREEN #4FCF60 */
    --c-alt-h: 128;
    --c-alt-s: 57%;
    --c-alt-l: 56%;
    --c-alt: var(--c-alt-h),var(--c-alt-s),var(--c-alt-l); /* BLACK #0E1729 */
    --c-dark-h: 224;
    --c-dark-s: 49%;
    --c-dark-l: 11%;
    --c-dark: var(--c-dark-h),var(--c-dark-s),var(--c-dark-l); /* GRAY #B3B5BC */
    --c-gray-h: 227;
    --c-gray-s: 6%;
    --c-gray-l: 72%;
    --c-gray: var(--c-gray-h),var(--c-gray-s),var(--c-gray-l); /* LIGHT #DAD4E3 */
    --c-light-h: 264;
    --c-light-s: 21%;
    --c-light-l: 86%;
    --c-light: var(--c-light-h),var(--c-light-s),var(--c-light-l); /* LIGHTER #F5F2F9 */
    --c-lighter-h: 266;
    --c-lighter-s: 37%;
    --c-lighter-l: 96%;
    --c-lighter: var(--c-lighter-h),var(--c-lighter-s),var(--c-lighter-l); /* whitest #FAF9FC */
    --c-whitest-h: 260;
    --c-whitest-s: 33%;
    --c-whitest-l: 98%;
    --c-whitest: var(--c-whitest-h),var(--c-whitest-s),var(--c-whitest-l)
}
/* FONTS */

:root {
    --font-base: "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    --fw-bold: 700;
    --fw-base: 400;
    --fz-h1: 7rem;
    --fz-h2: 5rem;
    --fz-h3: 3.6rem;
    --fz-h4: 2.6rem;
    --fz-16: 1.6rem;
    --fz-14: 1.4rem
}


@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins-Bold_20200421.woff2') format('woff2'),url('Fonts/Poppins-Bold_20200421.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins-Regular_20200421.woff2') format('woff2'),url('Fonts/Poppins-Regular_20200421.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

body {
    font-family: 'Poppins';
    padding: 10px;
    background-color: #FFF;
    margin: 0 auto 0 auto;
    font-size: 13px;
    font-weight: 400;
    overflow: auto;
}

button, input, optgroup, select, textarea {
    font-family: 'Poppins';
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, select {
    text-transform: none
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button
}

    [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
        outline: ButtonText dotted 1px
    }

input {
    font-family: 'Poppins' !important;
    outline: none;
}

ul {
    width: 752px;
    margin-left: auto;
    margin-right: auto;
}

li {
    margin: 0;
    padding: 0;
    float: left;
    width: 188px;
    font-weight: normal;
    margin-bottom: 30px;
}

.orderstep {
    width: 188px;
}

.orderstep_image_left {
    float: left;
    width: 188px;
    height: 54px;
    background: url(images/orderstep_left_bg_current.png);
}

.orderstep_image_left_current {
    float: left;
    width: 188px;
    height: 54px;
    background: url(images/orderstep_left_bg_current.png);
}

.orderstep_image_right {
    float: left;
    width: 188px;
    height: 54px;
    background: url(images/orderstep_right_bg.png);
}

.orderstep_image_right_current {
    float: left;
    width: 188px;
    height: 54px;
    background: url(images/orderstep_right_bg_current.png);
}

.orderstep_image {
    float: left;
    width: 188px;
    height: 54px;
    background: url(images/orderstep_bg.png);
}

.orderstep_image_current {
    float: left;
    width: 188px;
    height: 54px;
    background: url(images/orderstep_bg_current.png);
}

.orderstep_cart {
    margin: 1px 0px 0px 76px;
}

.orderstep_text {
    float: left;
    text-align: center;
}

.orderstep_text_border {
    float: left;
    text-align: center;
    border-right: 1px solid #d7d7d7;
}

.orderstep_text_step {
    width: 187px;
    float: left;
    font-size: 13px;
}

.orderstep_text_step_bold {
    width: 187px;
    float: left;
    font-size: 14px;
    /*font-weight: var(--fw-bold);*/
}

.orderstep_text_step_current {
    width: 187px;
    float: left;
    font-size: 13px;
    color: #000000;
}

.orderstep_text_step_bold_current {
    width: 187px;
    float: left;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: #000000;
}

a.orderstep_text_link_current {
    width: 187px;
    float: left;
    font-size: 13px;
    color: #000000;
    text-decoration: none;
}

    a.orderstep_text_link_current:hover {
        width: 187px;
        float: left;
        font-size: 13px;
        color: #000000;
        text-decoration: underline;
    }

a.orderstep_text_link_bold_current {
    width: 187px;
    float: left;
    font-size: 14px;
    color: #000000;
    font-weight: var(--fw-bold);
    text-decoration: none;
}

    a.orderstep_text_link_bold_current:hover {
        width: 187px;
        float: left;
        font-size: 14px;
        color: #000000;
        font-weight: var(--fw-bold);
        text-decoration: underline;
    }




.defaultpagetext {
    margin: 15px 3px 0 3px;
}


.lookupheader {
    border: 1px solid hsl(264, 21%, 86%) !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    /*background-image: none;*/
    background: #fff;
    /*background: hsl(264, 21%, 86%);*/
}

    .lookupheader td {
        color: #000;
        background-color: #fff;
    }

.lookupresultheaderbar {
}

tr.lookupheader td {
    color: #000;
}

.lookupheader td span {
    color: #000;
}

.lookupresult {
    background: none;
}

.tablerowspacer {
    height: 5px;
    background: none;
}
/*.orderdomaintable	{margin-left:10px;}*/
.orderdomaintable {
    margin-left: auto;
    margin-right: auto;
}

.button {
    font-family: "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-family: var(--font-base);
    font-size: 13px;
    border: 0;
    padding: 10px 20px;
    width: auto;
    background: hsl(48, 100%, 50%);
    background: hsl(var(--c-action));
    color: hsl(224, 49%, 11%);
    color: hsl(var(--c-dark));
    display: inline-flex;
    align-items: center;
    /*padding: 1rem 3rem;*/
    font-weight: 700;
    font-weight: var(--fw-bold);
    border-radius: 5rem;
    text-decoration: none;
    transition: background .15s ease;
    line-height: 1.3;
    word-break: break-all;
    word-break: break-word
}

    .button:hover {
        background: hsl(calc(48 - 4), 100%, calc(50% + 5%));
        background: hsl(calc(var(--c-action-h) - 4), var(--c-action-s), calc(var(--c-action-l) + 5%))
    }

    .button:focus {
        background: hsl(calc(48 - 5), 100%, 50%);
        background: hsl(calc(var(--c-action-h) - 5), var(--c-action-s), var(--c-action-l))
    }


.backbutton {
    background-color: #0E1729;
    color: white;
}

    .backbutton:hover {
        background: hsl(224, 49%, calc(11% + 10%));
        background: hsl(var(--c-dark-h), var(--c-dark-s), calc(var(--c-dark-l) + 10%))
    }

    .backbutton:focus {
        background: hsl(224, 49%, calc(11% + 5%));
        background: hsl(var(--c-dark-h), var(--c-dark-s), calc(var(--c-dark-l) + 5%))
    }


.checkbutton {
    font-family: "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-family: var(--font-base);
    font-size: 13px;
    border: 0;
    padding: 10px 20px;
    width: auto;
    background: hsl(48, 100%, 50%);
    background: hsl(var(--c-action));
    color: hsl(224, 49%, 11%);
    color: hsl(var(--c-dark));
    display: inline-flex;
    align-items: center;
    /*padding: 1rem 3rem;*/
    font-weight: 700;
    font-weight: var(--fw-bold);
    border-radius: 5rem;
    text-decoration: none;
    transition: background .15s ease;
    line-height: 1.3;
    word-break: break-all;
    word-break: break-word
}

    .checkbutton:hover {
        background: hsl(calc(48 - 4), 100%, calc(50% + 5%));
        background: hsl(calc(var(--c-action-h) - 4), var(--c-action-s), calc(var(--c-action-l) + 5%))
    }

    .checkbutton:focus {
        background: hsl(calc(48 - 5), 100%, 50%);
        background: hsl(calc(var(--c-action-h) - 5), var(--c-action-s), var(--c-action-l))
    }


.ssldescription {
    float: left;
    width: 300px;
    line-height: 30px;
}

#results select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    text-transform: none;
    padding: 6px;
    width: 220px;
    height: 42px;
    border: 2px solid hsl(264, 21%, 86%);
    border: 2px solid hsl(var(--c-light-h), var(--c-light-s), var(--c-light-l));
    font-size: 14px;
    padding: 6px;
    font-family: 'Poppins' !important;
    font-weight: 400;
    border-radius: 0.6rem;
    outline: 0;
    transition: border-color .2s ease;
    line-height: normal;
    background-position: right 7px center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhYWdfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48ZyBpZD0iY2hldnJvbi1yaWdodF8xNF8iPjxwb2x5Z29uIHBvaW50cz0iMzksMTIuNyAzNC42LDguMyAyMCwyMi44IDUuNCw4LjMgMSwxMi43IDIwLDMxLjcgIi8+PC9nPjwvZz48L3N2Zz4=);
}


.lookupresult select {
    padding: 6px;
    margin: 0 0 5px 0;
    font-size: 13px;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=text] {
    /*width: 100%;*/
    height: 26px;
    border: 2px solid hsl(264, 21%, 86%);
    border: 2px solid hsl(var(--c-light-h), var(--c-light-s), var(--c-light-l));
    font-size: 14px;
    padding: 7px 9px 7px 9px;
    font-family: 'Poppins';
    border-radius: 0.6rem;
    outline: 0;
    transition: border-color .2s ease;
    line-height: normal
}

.input[type=text]:focus {
    /*border-color: hsl(calc(264 + 10), 21%, calc(86% - 25%));
    border-color: hsl(calc(var(--c-light-h) + 10), var(--c-light-s), calc(var(--c-light-l) - 25%))*/
}

.input[type=text]::-webkit-input-placeholder {
    color: hsla(224, 49%, 11%, 0.5);
    color: hsla(var(--c-dark-h), var(--c-dark-s), var(--c-dark-l), 0.5)
}

.input[type=text]::-moz-placeholder {
    color: hsla(224, 49%, 11%, 0.5);
    color: hsla(var(--c-dark-h), var(--c-dark-s), var(--c-dark-l), 0.5)
}

.input[type=text]:-ms-input-placeholder {
    color: hsla(224, 49%, 11%, 0.5);
    color: hsla(var(--c-dark-h), var(--c-dark-s), var(--c-dark-l), 0.5)
}

.input[type=text]::-ms-input-placeholder {
    color: hsla(224, 49%, 11%, 0.5);
    color: hsla(var(--c-dark-h), var(--c-dark-s), var(--c-dark-l), 0.5)
}

.input[type=text]::placeholder {
    color: hsla(224, 49%, 11%, 0.5);
    color: hsla(var(--c-dark-h), var(--c-dark-s), var(--c-dark-l), 0.5)
}

input[type=password] {
    height: 26px;
    border: 2px solid hsl(264, 21%, 86%);
    border: 2px solid hsl(var(--c-light-h), var(--c-light-s), var(--c-light-l));
    font-size: 14px;
    padding: 7px 9px 7px 9px;
    font-family: 'Poppins';
    border-radius: 0.6rem;
    outline: 0;
    transition: border-color .2s ease;
    line-height: normal
}

.input[type=password]:focus {
    border-color: hsl(calc(264 + 10), 21%, calc(86% - 25%));
    border-color: hsl(calc(var(--c-light-h) + 10), var(--c-light-s), calc(var(--c-light-l) - 25%))
}

#ddlLand {
    height: 42px;
    border: 2px solid hsl(264, 21%, 86%);
    border: 2px solid hsl(var(--c-light-h), var(--c-light-s), var(--c-light-l));
    font-size: 14px;
    padding: 6px;
    font-family: 'Poppins';
    border-radius: 0.6rem;
    outline: 0;
    transition: border-color .2s ease;
    line-height: normal
}

#vpsTable .vpsHeader {
    background-color: #ffcc00;
    font-family: Verdana;
    font-size: 13pt;
    font-weight: 300;
    padding: 5px 0 5px 10px;
    color: #000;
}

#vpsTable .vpsCell .euroField {
    float: left;
    color: #ffcc00;
    font-size: 11px;
    vertical-align: top;
}

#vpsTable .vpsCell .thePrice {
    float: right;
    position: relative;
    color: #ffcc00;
    font-size: 20px;
    padding: 0;
    margin-top: -3px;
    margin-left: 3px;
    margin-bottom: -3px;
    vertical-align: top;
}

#results {
    padding: 0 40px 0 40px;
}


#customerTable {
    color: #000;
    padding: 0;
    width: inherit;
}

    #customerTable .cusHeader {
        color: #450B9D;
        font-family: Poppins;
        font-size: 14pt;
        font-weight: 700;
        padding: 20px 30px 20px 30px;
        white-space: nowrap;
    }

    #customerTable .cusHeaderNormal {
        color: #707070;
        font-family: Poppins;
        font-size: 14pt;
        font-weight: 300;
        padding: 20px 0 20px 30px;
        border: solid 1px #ddd;
        border-radius: 3px;
        white-space: nowrap;
    }

#eherkenningAdditional .cusHeader {
    color: #450B9D;
    font-family: Poppins;
    font-size: 14pt;
    font-weight: 700;
}

#orderOverview .cusHeader {
    color: #450B9D;
    font-family: Poppins;
    font-size: 14pt;
    font-weight: 700;
}

#orderOverview .orderrow {
    color: Black;
    height: 22px;
    text-decoration: none;
    font-size: 13px;
}

#orderOverview .orderrowtotal {
    color: Black;
    height: 22px;
    text-decoration: none;
    font-size: 13px;
}

#orderOverview input[type="text"] {
    padding: 5px 9px 5px 9px !important;
    margin-top: 10px !important;
}


#customerTable [type="radio"]:checked,
#customerTable [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    #customerTable [type="radio"]:checked + label,
    #customerTable [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }

     #customerTable [type="radio"]:checked + label
     {
         font-weight:bold;
     }

        #customerTable [type="radio"]:checked + label:before,
        #customerTable [type="radio"]:not(:checked) + label:before {
            content: '';
            /*position: absolute;
            left: 0;
            top: 0;*/
            width: 18px;
            height: 18px;
            border: 2px solid hsl(264, 21%, 86%);
            border: 2px solid hsl(var(--c-light));
            border-radius: 50%;
            background: #fff;
        }

        #customerTable [type="radio"]:checked + label:after,
        #customerTable [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 10px;
            height: 10px;
            background: hsl(266, 37%, 96%);
            background: hsl(var(--c-light));
            border: 1px solid hsl(264, 21%, 86%);
            border: 1px solid hsl(var(--c-light));
            /*position: absolute;*/
            /*top: 5px;
            left: 5px;*/
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        #customerTable [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        #customerTable [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
            background:#666;
        }



.spinner {
    /*margin: 0 auto;*/
    margin: -200px auto 0 auto;
    height: 64px;
    width: 64px;
    animation: rotate 0.8s infinite linear;
    border: 5px solid #ffcc00;
    border-right-color: transparent;
    border-radius: 50%;
}

#forgotpw {
    width: 752px;
    margin-left: auto;
    margin-right: auto;
}

.specialprice {
    color: Green;
    font-weight: bold;
}

.lookupresultResp {
    display: none;
}

.lookupresult_price {
    text-align: right;
    padding-right: 35px
}

.arrow-steps .left_chev {
    background-color: #ffcc00;
}

.arrow-steps .left_chev_first {
    background-color: #ffcc00;
}

.arrow-steps .right_chev_last {
    background-color: #ffcc00;
}

.arrow-steps .center_chev {
    background-color: #ffcc00;
}

.arrow-steps .right_chev {
    background-color: #ffcc00;
}


.arrow-steps .next {
    background-color: #ffcc00;
}

.arrow-steps .previous {
    background-color: #ffcc00;
}





@media(max-width:755px) {
    #results {
        padding: 0;
    }

        #results select {
            font-size: 16px !important;
            width: 90% !important;
        }

    #customerTable input[type=text] {
        border-radius: 0 !important;
    }

    #orderOverview input[type="text"] {
        padding: 5px !important;
    }

    .spinner {
        margin: 0 auto;
    }
}