.xs-certify-group {
    display: block;
    width: 100%;
    padding: 5px 0px 5px 5px;
    margin: 0 0 5px 0;
    text-align: left;
    font-weight: bold; 
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size: 12pt;
    font-family: Utuntu, 'Open sans', sans-serif; 
}

.xs-certify-group a {
    text-decoration: none;
    color: #fff;
}

.xs-certify-icon-finished {
    color: #7dd893 !important; 
    font-size: 1.2em;
    padding: 3px;   
}

.xs-certify-icon-wait {
    color: #df6969 !important; 
    font-size: 1.2em;   
    padding: 3px;   
}

.xs-certify-finished {
    /* Check_Circle_Green.png */
    background: #33994d;
    color: #fff;
}

.xs-certify-wait {
    background: #b33a3a; 
    color: #fff;
}

.xs-link {
    cursor: pointer;
}

.xs-collapse {
    display: none;
}

ul.menu > li.active {
    font-weight: bold;
    text-decoration: underline;
}

.xs-breadcrumb { 
    list-style: none; 
    overflow: hidden; 
    font: 14px Sans-Serif;
}
.xs-breadcrumb li { 
    float: left; 
}
 
.xs-breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 45px;
    background: #000; /* fallback color */
    background: #1f1f1e; 
    position: relative; 
    display: block;
    float: left;
    white-space: nowrap;
    /* font-weight: bold; */
}
.xs-breadcrumb li a::after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #1f1f1e;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}
.xs-breadcrumb li a::before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;       
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
}
.xs-breadcrumb li:first-child a {
    padding-left: 20px;
}

.xs-breadcrumb li:nth-child(2) a        { background:        #2f2f2e; }
.xs-breadcrumb li:nth-child(2) a::after { border-left-color: #2f2f2e; }
.xs-breadcrumb li:nth-child(3) a        { background:        #3f3f3e; }
.xs-breadcrumb li:nth-child(3) a::after { border-left-color: #3f3f3e; }
.xs-breadcrumb li:nth-child(4) a        { background:        #4f4f4e; }
.xs-breadcrumb li:nth-child(4) a::after { border-left-color: #4f4f4e; }
.xs-breadcrumb li:nth-child(5) a        { background:        #5f5f5e; }
.xs-breadcrumb li:nth-child(5) a::after { border-left-color: #5f5f5e; }
.xs-breadcrumb li:last-child a          { background:        #6f6f6e; }
.xs-breadcrumb li:last-child a::after   { border-left-color: #6f6f6e; } 

.xs-breadcrumb li a:hover { 
    background: #8f8f8e; 
}

.xs-breadcrumb li a:hover::after { 
    border-left-color: #8f8f8e; 
}

.xs-breadcrumb li:last-child a:hover {
    background: #8f8f8e;
}
    
.xs-breadcrumb li:last-child a:hover::after {
    border-left-color: #8f8f8e;     
}

a.xs-select {
    background: #32910d !important;
}

a.xs-select:after {
    border-left-color: #32910d !important;
}

a.xs-select:hover {
    background: #3db10f !important;
}

a.xs-select:hover::after {
    border-left-color: #3db10f !important;    
}

/* Flödesindiktator */

body {
    counter-reset: section;
    }
    
    
    .tsbluebg{background-color:#3a3d7e;color:white}
    .tsgreenbg{background-color:#5DA148;color:white}
    
    .breadcrumb-counter-nav {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    list-style: none;
    background: #3a3d7e;
    }
    
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item {
    position: relative;
    -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    padding: 1rem 2rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item:hover {
    background: #5DA148;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item::before {
    counter-increment: section;
    content: counter(section);
    position: relative;
    background: #5DA148;
    color: #fff;
    right: 0.5rem;
    border-radius: 50%;
    padding: 0.2em 0.6em;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current {
    background: #5DA148;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1rem;
    width: 0;
    height: 0;
    border-top: 1.75rem solid transparent;
    border-bottom: 1.75rem solid transparent;
    border-left: 1rem solid #5DA148;
    z-index: 300;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item.current::before {
    background-color: #3a3d7e;
    }
    
    .breadcrumb-counter-nav .breadcrumb-counter-nav-item a {
    color: #fff;
    /* font-size: 1.275rem; */
    }
    
    @media only screen and (max-width: 52em) {
        .breadcrumb-counter-nav {
            -webkit-flex-direction: column;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
    }
    
    @media screen and (max-width:52em){
        .breadcrumb-counter-nav .breadcrumb-counter-nav-item {
            position: relative;
            -webkit-flex: 1 0 auto;
                -ms-flex: 1 0 auto;
                    flex: 1 0 auto;
            padding: 1rem 2rem;
            text-align: left;
            vertical-align: middle;
            cursor: pointer;
        }
    }
    
    /* Kurspilar */
    
    .progress-indicator {
      list-style: none;
      width: 100%;
      margin: 0 auto;
      padding: 0;
      display: table;
      table-layout: fixed;
    }
    
    .progress-indicator > li {
      position: relative;
      display: table-cell;
      text-align: center;
      font-size: 1.5em;
      line-height: 0px;
    }
    
    .progress-indicator > li span {
      position: absolute;
      color: #e6e6e6;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      font-weight: 600;
      font-size: 0.875rem;
      letter-spacing: 0.05px;
      text-transform: uppercase;
    }
    
    .progress-indicator > li::before {
      content: attr(data-step);
      display: block;
      margin: 0 auto;
      background: #e6e6e6;
      width: 1.5em;
      height: 1.5em;
      text-align: center;
      margin-bottom: 0.25em;
      line-height: 1.5em;
      border-radius: 100%;
      position: relative;
      z-index: 1000;
    }
    
    .progress-indicator > li::after {
      content: '';
      position: absolute;
      display: block;
      background: #e6e6e6;
      width: 100%;
      height: 0.15em;
      top: 50%;
      -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
              transform: translateY(-100%);
      left: 50%;
      margin-left: 1.5em\9;
      z-index: 0;
    }
    
    .progress-indicator > li:last-child:after {
      display: none;
    }
    
    
    .progress-indicator > li.is-complete {
      color: #1779ba;
    }
    
    .progress-indicator > li.is-complete::before, .progress-indicator > li.is-complete::after {
      color: #fefefe;
      background: #1779ba;
    }
    
    .progress-indicator > li.is-complete span {
      color: #1779ba;
    }
    
    .progress-indicator > li.is-current {
      color: #4eabe9;
    }
    
    .progress-indicator > li.is-current::before {
      color: #fefefe;
      background: #4eabe9;
    }
    
    .progress-indicator > li.is-current span {
      color: #4eabe9;
    }
    
    
    .progress-indicator > li:last-child::before  {
      content: attr(data-step);
      display: block;
      margin: 0 auto;
      background: #139BBF;
      width: 2.8em;
      height: 2.8em;
      text-align: center;
      margin-bottom: 0.25em;
      line-height: 2.8em;
      border-radius: 100%;
      position: relative;
      z-index: 1000;
      color: white;
    }

    /* DAVID LEFT ALIGN */
    .progress-indicator > li::before,
    .progress-indicator > li:last-child::before {
        margin: 0 0;
    }

    .progress-indicator > li::after {
        left: 0;
    }

    /* JONAS FIRST ARROW */
    .arrow-nav li {
      display: inline-block;
    }
    .arrow-nav a {
      background: #ddd;
      color: #333;
      display: block;
      height: 2em;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 1em;
      line-height: 2.2em;
      padding: 0 6px;
      padding-left: 1.3em;
      position: relative;
      text-align: center;
      text-decoration: none;
      /* width: 9em; */
    }
    .arrow-nav a:before, .arrow-nav a:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      border-top: 1em solid transparent;
      border-bottom: 1em solid transparent;
    }
    .arrow-nav a:before {
      border-left: 1em solid #fff;
      left: 0;
    }
    
    .arrow-nav a:after {
      border-left: 1em solid #ddd;
      left: 100%;
      width: 0;
      height: 0;
      z-index: 2;
    }
    
    
    
    .arrow-nav .active a {
      background: #3a3d7e;
      color: #fff;
    }
    .arrow-nav .active a:after {
      border-left: 1em solid #3a3d7e;
    }
    
    .firstarrow a:before {
      border-left: 0em solid #fff;
      left: 0;
    }