/* commented: old values in pixels */
#dkrapp-wrapper-pathline .pathline-wrapper {
    position: relative;
    display: block;
    width: 96%;
    margin: 2vmin auto 2vmin;
    /*margin: 20px auto 26px;*/
    padding: 10px;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container,
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* commented: old values in pixels */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li {
    position: relative;
    display: flex;
    width: 100%;
    height: 4vmin;
    /*height: 40px;*/
    text-align: center;
}

/* commented: old values in pixels */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-lines {
    position: absolute;
    height: 2px;
    top: 2vmin;
    /*top: 19px;*/
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-lines.dkrapp-linet-right {
    width: 50%;
    right: 0;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-lines.dkrapp-linet-left {
    width: 50%;
    left: 0;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-lines.dkrapp-linet-both {
    width: 100%;
    left: 0;
    right: 0;
}

/* commented: old values in pixels */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-numbers {
    position: relative;
    display: block;
    border-radius: 50%;
    width: 4vmin;
    height: 4vmin;
    /*width: 2em;*/
    /*height: 2em;*/
    margin: 0 auto;
    text-align: center;
    line-height: 4vmin;
    /*line-height: 40px;*/
    font-size: 2vmin;
    /*font-size: 20px;*/
    font-weight: bold;
}

/* commented: old values in pixels */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-texts {
    position: absolute;
    display: block;
    left: -30%;
    right: -30%;
    text-transform: uppercase;
    font-size: 1.55vmin;
    /*font-size: 12px;*/
    font-weight: bold;
    overflow: hidden;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-texts.dkrapp-text-top {
    top: -4.5vmin;
    /*top: -40px;*/
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li > span.dkrapp-circles-texts.dkrapp-text-bottom {
    top: 4.5vmin;
    /*top: 50px;*/
}


/* *********************** */
/*  And now..the colours!! */
/* *********************** */

/* steps's labels default color */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles .dkrapp-circles-texts {
    color: #9d9d9b;
}

/* steps's numbers default color */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles .dkrapp-circles-numbers {
    color: #333333;
    border: 1px solid;
}

/* steps's circles default colors */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-0 .dkrapp-circles-numbers {
    background-color: #43bab8;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-1 .dkrapp-circles-numbers {
    background-color: #45bab7;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-2 .dkrapp-circles-numbers {
    background-color: #57BEAA;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-3 .dkrapp-circles-numbers {
    background-color: #8fc885;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-4 .dkrapp-circles-numbers {
    background-color: #d4D556;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-5 .dkrapp-circles-numbers {
    background-color: #f3d63f;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-6 .dkrapp-circles-numbers {
    background-color: #f6c334;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-7 .dkrapp-circles-numbers {
    background-color: #f3a327;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-8 .dkrapp-circles-numbers {
    background-color: #f18d20;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-9 .dkrapp-circles-numbers {
    background-color: #f08329;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-10 .dkrapp-circles-numbers {
    background-color: #ef7644;
}

/* steps's lines default backgrounds */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-0 .dkrapp-circles-lines {
    background: linear-gradient(to right, #43bab8, #45bab7);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-1 .dkrapp-circles-lines {
    background: linear-gradient(to right, #45bab7, #45bab7, #57BEAA);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-2 .dkrapp-circles-lines {
    background: linear-gradient(to right, #57BEAA, #57BEAA, #8fc885);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-3 .dkrapp-circles-lines {
    background: linear-gradient(to right, #8fc885, #8fc885, #d4D556);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-4 .dkrapp-circles-lines {
    background: linear-gradient(to right, #d4D556, #d4D556, #f3d63f);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-5 .dkrapp-circles-lines {
    background: linear-gradient(to right, #f3d63f, #f3d63f, #f6c334);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-6 .dkrapp-circles-lines {
    background: linear-gradient(to right, #f6c334, #f6c334, #f3a327);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-7 .dkrapp-circles-lines {
    background: linear-gradient(to right, #f3a327, #f3a327, #f18d20);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-8 .dkrapp-circles-lines {
    background: linear-gradient(to right, #f18d20, #f18d20, #f08329);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-9 .dkrapp-circles-lines {
    background: linear-gradient(to right, #f08329, #f08329, #ef7644);
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-circles-10 .dkrapp-circles-lines {
    background: linear-gradient(to right, #ef7644, #ef7644);
}

/* future steps's opacity */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el {
    opacity: 0.5;
}

/* future steps's numbers default background */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el .dkrapp-circles-numbers {
    background-color: #333333;
}

/* future steps's numbers colors&border */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-1 .dkrapp-circles-numbers {
    border-color: #45bab7;
    color: #45bab7;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-2 .dkrapp-circles-numbers {
    border-color: #57BEAA;
    color: #57BEAA;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-3 .dkrapp-circles-numbers {
    border-color: #8fc885;
    color: #8fc885;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-4 .dkrapp-circles-numbers {
    border-color: #d4D556;
    color: #d4D556;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-5 .dkrapp-circles-numbers {
    border-color: #f3d63f;
    color: #f3d63f;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-6 .dkrapp-circles-numbers {
    border-color: #f6c334;
    color: #f6c334;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-7 .dkrapp-circles-numbers {
    border-color: #f3a327;
    color: #f3a327;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-8 .dkrapp-circles-numbers {
    border-color: #f18d20;
    color: #f18d20;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-9 .dkrapp-circles-numbers {
    border-color: #f08329;
    color: #f08329;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-future-el.dkrapp-circles-10 .dkrapp-circles-numbers {
    border-color: #ef7644;
    color: #ef7644;
}

/* current step's label color */
#dkrapp-wrapper-pathline .pathline-wrapper ul.pathline-container li.dkrapp-circles.dkrapp-current-el .dkrapp-circles-texts {
    color: white;
}


/* ************************* */
/*  That strange arrow stuff */
/* ************************* */

#dkrapp-wrapper-pathline .pathline-wrapper ul.dkrapp-shadow-arrows {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    width: 50px;
    top: 0;
    bottom: 0;
    left: -20px;
    padding: 0;
    margin: 0;
    /*background-color: purple;*/
    list-style-type: none;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.dkrapp-shadow-arrows > li {
    position: relative;
    width: 10px;
    height: 40px;
    padding: 0;
    margin: 0;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.dkrapp-shadow-arrows > li.dkrapp-rect:first-child {
    background-color: #385c5b;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.dkrapp-shadow-arrows > li.dkrapp-rect {
    background-color: #3d8483;
}

#dkrapp-wrapper-pathline .pathline-wrapper ul.dkrapp-shadow-arrows > li.dkrapp-triang-right {
    border-left: 16px solid #43bab8;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}


/* ************************** */
/*  Current step's big number */
/* ************************** */

#dkrapp-wrapper-pathline .bigstepnum-wrapper.bigstepnum-wrapper-style-default {
    position: relative;
    margin: 0;
}

#dkrapp-wrapper-pathline .bigstepnum-wrapper.bigstepnum-wrapper-style-default > ul,
#dkrapp-wrapper-pathline .bigstepnum-wrapper.bigstepnum-wrapper-style-default > ul > li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#dkrapp-wrapper-pathline .bigstepnum-wrapper.bigstepnum-wrapper-style-default > ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* commented: old values in pixels */
#dkrapp-wrapper-pathline .bigstepnum-wrapper.bigstepnum-wrapper-style-default > ul > li {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 4vmin;
    /*height: 40px;*/
    text-align: center;
}

/* commented: old values in pixels */
#dkrapp-wrapper-pathline .bigstepnum-wrapper.bigstepnum-wrapper-style-default > ul > li > .dkrapp-bignumb-number {
    position: absolute;
    width: 4.2vmin;
    height: 4.2vmin;
    font-size: 3.2vmin;
    /*width: 40px;*/
    /*height: 40px;*/
    /*font-size: 30px;*/
    font-weight: bold;
    line-height: 4vmin;
    /*line-height: 40px;*/
    border-radius: 50%;
}


/* ******************************** */
/*  Current step's pre/next buttons */
/* ******************************** */


#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li {
    min-width: 150px;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

/* only for prev buttons */
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev:after {
    position: absolute;
    content: " ";
    top: 0;
    left: -25px;
    width: 25px;
    height: 40px;
    border-right: 25px solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

/* only for next buttons */
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next:after {
    position: absolute;
    content: " ";
    top: 0;
    right: -25px;
    width: 25px;
    height: 40px;
    border-left: 25px solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}


/* Anchors' colours' */
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li > a {
    color: #333333;
    text-transform: uppercase;
}


/* Triangles' colours */
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-1:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-1:after {
    border-left-color: #45bab7;
    border-right-color: #45bab7;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-2:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-2:after {
    border-left-color: #57BEAA;
    border-right-color: #57BEAA;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-3:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-3:after {
    border-left-color: #8fc885;
    border-right-color: #8fc885;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-4:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-4:after {
    border-left-color: #d4D556;
    border-right-color: #d4D556;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-5:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-5:after {
    border-left-color: #f3d63f;
    border-right-color: #f3d63f;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-6:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-6:after {
    border-left-color: #f6c334;
    border-right-color: #f6c334;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-7:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-7:after {
    border-left-color: #f3a327;
    border-right-color: #f3a327;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-8:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-8:after {
    border-left-color: #f18d20;
    border-right-color: #f18d20;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-9:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-9:after {
    border-left-color: #f08329;
    border-right-color: #f08329;
}

#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-prev.bgcolour-10:after,
#dkrapp-slide-footer .prevnext-btns-wrapper.prevnext-btns-wrapper-style-default > ul > li.dkrapp-prevnext-btn-next.bgcolour-10:after {
    border-left-color: #ef7644;
    border-right-color: #ef7644;
}


/* ************************************************** */
/*  Middle lines for big number and prev/next buttons */
/* ************************************************** */

.dkrapp-middle-line:before {
    height: 2px;
    width: 100%;
    position: absolute;
    content: " ";
    background-color: #999999;
}