﻿.new-design-progess-bar {
    background: #F9FAFB;
}

    .new-design-progess-bar .progress2.progress-left {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 110px;
        width: 90%;
        margin-left: 32px;
    }

    .new-design-progess-bar .progress2 > li {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .new-design-progess-bar .progress2.progress-right li:before {
        display: none;
    }

    .new-design-progess-bar .progress2.progress-right {
       // position: absolute;
        right: 16px !important;
       // top: 22px;
        z-index: 9999;

        position: fixed;
        top: 109px !important;
    }
        .new-design-progess-bar .progress2.progress-right li.not-travel span {
            //color: #343440;
            padding: 8px 16px;
        }

    .new-design-progess-bar .progress2 > li > span {
        display: flex;
        justify-content: center;
        color: #BFBFBF;
        font-family: NotoSans;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
    }

.new-design-progess-bar .progress2 > .not-travel > .span-travel-status {
    font-family: NotoSans;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    color: #485879;
}

.new-design-progess-bar .progress2 > .not-travel > .span-travel-status:before {
    content: '';
    background-image: url('../../Images/newDesign/Travel Status.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

    .new-design-progess-bar .progress2.progress-left .progress-info {
        display: flex;
        justify-content: center;
        margin-top: 9px;
    }

    .new-design-progess-bar .progress2 > li, .new-design-progess-bar .progress2 > li.available {
        background-color: rgba(0,0,0,0) !important;
    }

        .new-design-progess-bar .progress2 > li.not-travel {
            background-color: rgba(0,0,0,0) !important;
            margin-right: 0px;
        }

    .new-design-progess-bar .progress2 .progress-info > li.active > a,
    .new-design-progess-bar .progress2 .progress-info > li.active > a:hover {
        background-color: #12A778;
    }

    .new-design-progess-bar .progress2 .progress-info > li:not(:last-child)::before {
        // content: "Will it ever work?";
        //width: 100px;
        // height: 100px;
        // position: absolute;
        // top: 20px;
        // right: 0px;
        // z-index: 9999;
        // background: red;
        // color: black;
    }

    .new-design-progess-bar .progress2 .progress-info > li > a {
        width: 20px;
        height: 20px;
        background-color: #BFBFBF;
        position: relative;
        overflow: visible;
        margin-left: 77px;
    }

        .new-design-progess-bar .progress2 .progress-info > li > a:hover {
            background-color: #BFBFBF;
        }

        .new-design-progess-bar .progress2 .progress-info > li:first-child > a {
            margin-left: 0;
        }

    .new-design-progess-bar .progress2 .progress-info > li:not(:last-child) > a:after {
        content: ' ';
        width: 99px;
        height: 4px;
        background: #BFBFBF;
        position: absolute;
        left: 10px;
        top: 8px;
        z-index: -1;
    }

    .new-design-progess-bar .progress2 .active .progress-info > .current-page > a:after {
        position: absolute;
        left: 10px;
        top: 4px;
        z-index: -1;
    }

    .new-design-progess-bar .progress2 .progress-info > li.active > a:after,
    .new-design-progess-bar .progress2 .active .progress-info > .current-page > a:after {
        background: #12A778;
        
    }

    .new-design-progess-bar .progress2 .active .progress-info > .current-page > a {
        background: #485879;
        width: 12px;
        height: 12px;
        border-width: 4px;
        border-color: #12A778;
        border-style: solid;
    }

    .new-design-progess-bar .progress2.progress-left > li + li:before {
        background-image: url('../../Images/newDesign/ProgressBar/Arrow Right.svg');
        top: 57%;
        left: -68px;
        width: 26px
    }

    .new-design-progess-bar .progress2 > li, .new-design-progess-bar .progress2 > li.available {
        padding: 0;
        margin-right: 0;
    }

    .new-design-progess-bar .progress2 > li.active {
        background: none;
    }

        .new-design-progess-bar .progress2 > li.active > span {
            color: #485879;
        }

    .new-design-progess-bar .progress2 .progress-info > li:hover .summary-dropdown, #ctl00_contentButtons_TripNav1_spanTR:hover .summary-dropdown, .span-proposals:hover .summary-dropdown, .span-abroad:hover .summary-dropdown, .span-expenses:hover .summary-dropdown, .span-travel-status:hover .summary-dropdown {
        border: none;
        border-left: 8px solid #5D6E93;
        box-shadow: 0px 8px 16px rgb(125 151 174 / 8%), 0px 2px 6px rgb(125 151 174 / 2%), 0px 0px 1px rgb(125 151 174 / 2%);
    }


        .new-design-progess-bar .progress2 .progress-info > li:hover .summary-dropdown .title,
        .new-design-progess-bar .summary-dropdown .title {
            font-family: NotoSans;
            font-size: 18px;
            font-weight: 600;
            line-height: 24px;
            letter-spacing: 0px;
            text-align: left;
            background: white;
            padding: 0;
            margin: 0;
            padding-bottom: 12px;
            color: #343440;
        }

        .new-design-progess-bar .progress2 .progress-info > li:hover .summary-dropdown .sent-info,
        .new-design-progess-bar .summary-dropdown .dates {
            font-family: NotoSans;
            font-size: 16px;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0px;
            text-align: left;
            color: #343440;
        }

    .new-design-progess-bar .container {
        padding-left: 0px;
    }

    .new-design-progess-bar .summary-dropdown {
        left: 85%;
    }


        .new-design-progess-bar .summary-dropdown:before {
            border-color: transparent transparent transparent transparent;
        }

        .new-design-progess-bar .summary-dropdown.topLayer,
        .new-design-progess-bar .summary-dropdown.extraLayer {
            left: 50%;
        }

            .new-design-progess-bar .summary-dropdown.extraLayer#Span4 {
                left: 0%;
                z-index: 9998;
            }

            .new-design-progess-bar .summary-dropdown.secondLayer-01 {
                left: 33%;
            }

.new-design-progess-bar .summary-dropdown.secondLayer-02 {
    left: 87%;
}

.new-design-progess-bar .summary-dropdown.secondLayer-03 {
    left: 87%;
}

.new-design-progess-bar .services-info .service-ico {
    background-color: white;
}


@media(max-width: 1650px) {
    .new-design-progess-bar .progress2 .progress-info > li > a {
        margin-left: 70px;
    }

    .new-design-progess-bar .progress2.progress-left {
        grid-column-gap: 90px;
    }
}

@media(max-width: 1550px) {
    .new-design-progess-bar .progress2 .progress-info > li > a {
        margin-left: 60px;
    }

    .new-design-progess-bar .progress2.progress-left {
        grid-column-gap: 40px;
    }

    .new-design-progess-bar .progress2 .progress-info > li:not(:last-child) > a:after {
        width: 80px;
    }
    .new-design-progess-bar .progress2.progress-left > li + li:before {
        left: -39px;
    }
}

@media(max-width: 1500px) {
    .new-design-progess-bar .progress2 .progress-info > li > a {
        margin-left: 50px;
    }

    .new-design-progess-bar .progress2.progress-left {
        grid-column-gap: 60px;
    }

    .new-design-progess-bar .progress2 .progress-info > li:not(:last-child) > a:after {
        width: 70px;
    }
    .new-design-progess-bar .progress2.progress-left > li + li:before {
        left: -45px;
    }

    
}
