ul.segmented-control {
    list-style-type: none;
    width: auto;
    padding: 1px;
    margin: 0 auto;
    clear: none;
    color: white;
    text-align: center;
    border-radius: 4px;
    transition: 0.14s ease-in-out background;
    display: flex;
    align-items: center;
}

.segmented-control ::-moz-selection {
  background: transparent;
}

.segmented-control ::selection {
  background: transparent;
}

.segmented-control:hover {
    background-color: #e5e6e2;
}
.segmented-control li {
    background: none;
    margin: 0 2px 0 0;
    cursor: pointer;
    padding: 0;
    text-align: center;
    border-radius: 4px;
    color: #61635e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    transition: 0.14s ease-in-out background; 
    flex: 1 1 0;
    white-space: nowrap;
}
.segmented-control li:last-child {
    margin-right: 0;
}
.segmented-control li:active:not(.NB-disabled),
.segmented-control-active li:active {
    color: #303030;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);

}
.segmented-control li.NB-active,
.segmented-control-active li {
    color: #131313;
    background-color: #d5d6d2;
}

.segmented-control:hover li.NB-active {
    background-color: #c5c6c2;
}
.segmented-control li:hover:not(.NB-disabled):not(.NB-active) {
    background-color: #d5d6d2;
}
.segmented-control li.NB-disabled {
    opacity: .9;
    color: rgba(0, 0, 0, .1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    cursor: default;
}
.segmented-control li.NB-disabled .NB-task-image {
    opacity: .3;
}


.segmented-control li:first-child,
.segmented-control li.NB-first {
    margin-left: 0;
    
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.segmented-control li:last-child,
.segmented-control li.NB-last {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: none;
}

/* ============================== */
/* = Vertical segmented control = */
/* ============================== */

ul.segmented-control-vertical {
    list-style-type: none;
    width: auto;
    padding: 1px;
    margin: 0 auto;
    clear: none;
    display: block;
    text-align: center;
}

.segmented-control-vertical li {
    float: left;
    cursor: pointer;
    margin-bottom: 2px;
    width: 100%;
    padding: 0;
    clear: none;
    text-align: center;

    color: #61635e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    
}
.segmented-control-vertical li:last-child {
    margin-bottom: 0;
}
.segmented-control-vertical li:active:not(.NB-disabled),
.segmented-control-vertical-active li:active {
    color: #303030;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);

}

.segmented-control-vertical li.NB-active,
.segmented-control-vertical li.NB-active:active,
.segmented-control-vertical-active li {
    color: #303030;

}

.segmented-control-vertical li.NB-disabled {
    opacity: .9;
    color: rgba(0, 0, 0, .1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    cursor: default;
    
}
.segmented-control-vertical li.NB-disabled .NB-task-image {
    opacity: .3;
}


.segmented-control-vertical li:first-child,
.segmented-control-vertical li.NB-first {
    margin-left: 0;
    
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.segmented-control-vertical li:last-child,
.segmented-control-vertical li.NB-last {
    border-bottom: none;
    
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}