﻿/********************************************** MODULE PROCESS ****************************************/

.module .module-content .process {
	background:url(/Teebooking/Images/filter-gradient.gif) top left repeat-x;
	height:69px;
	display:block;
	border-bottom:1px solid #dad7cc;	
}

.module .module-content .process .active .process-point  {
	background:url(/Teebooking/Images/process-active.png) top left no-repeat;
	width:32px;
	height:32px;
	display:block;
	margin-bottom:5px;
}

.module .module-content .process li .process-point {
	position:relative;
	background:url(/Teebooking/Images/process-default.png) top left no-repeat;
	width:27px;
	height:27px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 10px;
}

.module .module-content .process ul {
	padding:5px 40px;
}

.module .module-content .process li {
	float:left;
	position:relative;
	border-bottom:none;
    margin: 0 !important;
	margin-right:10px !important;
	width:110px;
	text-align:center;
	list-style-type: none !important;
}

.module .module-content .process li:last-child {
	margin-right:0;	
}

.module .module-content .process h2 {
	font-size: 11px;
	
}

#content div.main ul li {list-style-type:square;margin:2px 0 2px 1.5em;padding-left:5px;}

/* New Styles */
.ul-progressbar li {
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 1em;
    background: dodgerblue;
    margin: 0 1em;
    display: inline-block;
    color: white;
    position: relative;
}

    .ul-progressbar li::before {
        content: '';
        position: absolute;
        top: .9em;
        left: -4em;
        width: 4em;
        height: .2em;
        background: dodgerblue;
        z-index: -1;
    }



    .ul-progressbar li:first-child::before {
        display: none;
    }

.ul-progressbar .active {
    background: dodgerblue;
}

    .ul-progressbar .active ~ li {
        background: lightblue;
    }

        .ul-progressbar .active ~ li::before {
            background: lightblue;
        }

/* NEW STYLES */

/** Colors **/

ol.progress-track {
    display: table;
    list-style-type: none;
    margin: 0;
    padding: 2em 1em;
    table-layout: fixed;
    width: 100%;
}

    ol.progress-track li {
        display: table-cell;
        /*line-height: 3em;*/
        position: relative;
        text-align: center;
    }

        ol.progress-track li .icon-wrap {
            border-radius: 50%;
            top: -1.5em;
            color: #fff;
            display: block;
            height: 2.5em;
            margin: 0 auto -2em;
            left: 0;
            right: 0;
            position: absolute;
            width: 2.5em;
        }

        ol.progress-track li .icon-check-mark,
        ol.progress-track li .icon-down-arrow {
            height: 25px;
            width: 15px;
            display: inline-block;
            fill: currentColor;
        }

        ol.progress-track li .progress-text {
            position: relative;
            top: 10px;
            line-height: 16px;
        }

        ol.progress-track li.progress-done {
            border-top: 7px solid #87ba51;
            transition: border-color 1s ease-in-out;
            -webkit-transition: border-color 1s ease-in-out;
            -moz-transition: border-color 1s ease-in-out;
        }

            ol.progress-track li.progress-done .icon-down-arrow {
                display: none;
            }

            ol.progress-track li.progress-done.progress-current .icon-wrap {
                background-color: #0070c0;
            }

                ol.progress-track li.progress-done.progress-current .icon-wrap .icon-check-mark {
                    display: none;
                }

                ol.progress-track li.progress-done.progress-current .icon-wrap .icon-down-arrow {
                    display: block;
                }

            ol.progress-track li.progress-done .icon-wrap {
                background-color: #4a6a28;
                border: 5px solid #87ba51;
            }

        ol.progress-track li.progress-todo {
            border-top: 7px solid #DDD;
            color: black;
        }

            ol.progress-track li.progress-todo .icon-wrap {
                background-color: #FFF;
                border: 5px solid #DDD;
                border-radius: 50%;
                bottom: 1.5em;
                color: #fff;
                display: block;
                height: 2.5em;
                margin: 0 auto -2em;
                position: relative;
                width: 2.5em;
            }

                ol.progress-track li.progress-todo .icon-wrap .icon-check-mark,
                ol.progress-track li.progress-todo .icon-wrap .icon-down-arrow {
                    display: none;
                }
