html, body {
    height: 100%;
}
body {
    background-image: url('../Images/bg1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

*, *:focus {
    -webkit-tap-highlight-color: transparent;
}

.ul_wizard {
    padding: 7px 0 0 0;
    margin: 0;
    display: flex;
    align-items: center;
    list-style-type: none;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px #fff;
}
    .ul_wizard > li {
        flex: 1;
        text-align: center;
        position: relative;
        color: #333;
    }
        .ul_wizard > li:after {
            content: '';
            position: absolute;
            top: 25%;
            left: 0;
            right: 0;
            height: 2px;
            background-color: rgba(221, 221, 221, 0.58);
            box-shadow: 0 1px 2px #eee;
            z-index: 0;
        }
        .ul_wizard > li > div:nth-child(1) {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background-color: #ddd;
            margin: 0 auto;
            padding-top: 9px;
            font-size: 1rem;
            position: relative;
            z-index: 1;
        }
        .ul_wizard > li > div:nth-child(2) {
            width: 55px;
            height: 40px;
            margin: 0 auto;
            text-align: center;
            font-size: 0.7rem;
        }
        .ul_wizard > li.current {
            color: blue;
        }
            .ul_wizard > li.current > div:nth-child(1) {
                background-color: #98dfff;
                box-shadow: 0 1px 3px #98dfff;
            }
        .ul_wizard > li.passed {
            color: green;
        }
            .ul_wizard > li.passed > div:nth-child(1) {
                background-color: #8ce825;
                box-shadow: 0 1px 3px #8ce825;
            }

.div_box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px #fff;
    padding-top: 9px;
    padding-bottom: 9px;
}

.div_footer_buttons {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 7px;
    background-color: #fefefe;
    box-shadow: 0 0 7px #ddd;
}
    .div_footer_buttons > a.btn {
        flex: 1;
        font-size: 0.9rem;
        padding: 9px 0 7px 0;
        border-radius: 10px;
    }
        .div_footer_buttons > a.btn:nth-child(1) {
            margin-left: 2px;
        }
        .div_footer_buttons > a.btn:last-child {
            margin-right: 2px;
        }

.div_inline_buttons {
    padding: 7px;
    background-color: #fefefe;
    text-align: center;
}
    .div_inline_buttons > a.btn {
        font-size: 0.9rem;
        padding: 9px 15px 7px 15px;
        border-radius: 10px;
    }


.div_wellcome_1 {
    text-align: center;
    font-size: 1.3rem;
    color: green;
}
.div_wellcome_2 {
    text-align: center;
    font-size: 1.1rem;
    color: #00a500;
}

.div_hint_1 {
    text-align: center;
    font-size: 1rem;
    color: #0053ff;
}

.div_hint_2 {
    text-align: center;
    font-size: 1rem;
    color: #0053ff;
}

.div_header {
    color: #00a03f;
    text-align: center;
    text-shadow: 0 1px 1px #a1ff29;
    border-bottom: 1px dotted #00c100;
}
    .div_header > div {
        display: inline-block;
        position: relative;
        border-bottom: 1px solid #00c100;
    }
        .div_header > div:after {
            content: '::.';
            margin-right: 5px;
        }
        .div_header > div:before {
            content: '.::';
            margin-left: 5px;
        }

.ul_service_type {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
    .ul_service_type > li {
        flex-basis: 1;
        width: 33.3333%;
        text-align: center;
        padding: 2px;
        cursor: pointer;
        user-select: none;
    }
        .ul_service_type > li > div {
            border: 1px solid #adadad;
            border-radius: 7px;
            transition: all 0.2s;
        }
            .ul_service_type > li > div > div[rel="icon"] {
            }
                .ul_service_type > li > div > div[rel="icon"] > img {
                    width: 50px;
                }
            .ul_service_type > li > div > div[rel="title"] {
                margin-top: -12px;
                margin-bottom: 7px;
            }
        .ul_service_type > li:hover {
        }
            .ul_service_type > li:hover > div {
                background-color: #eee;
            }
        .ul_service_type > li:active {
        }
            .ul_service_type > li:active > div {
                background-color: #e4e4e4;
            }

        .ul_service_type > li.selected {
            color: #fff;
        }
            .ul_service_type > li.selected > div {
                border-color: #008aff;
                background: linear-gradient(0deg, rgba(30,131,255,1) 0%, rgba(95,167,255,1) 100%); 
                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            }