.ux-np6-icon {
    text-align: center;
    cursor: pointer;
    color: #66788a;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.ux-np6-subicon {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 16px;
    width: 16px;
    line-height: 16px;
}

/* Themes (~color definitions) */
.ux-np6-icon.white {
    color: #fff;
}
.ux-np6-icon.gray {
    color: #b8c2cc;
}
.ux-np6-icon.black {
    color: #000;
}
.ux-np6-icon.error {
    color: #ff004f;
}
.ux-np6-icon.warning {
    color: #ffb600;
}
.ux-np6-icon.valid {
    color: #28dcbc;
}
.ux-np6-icon.primary {
    color: #0087FF;
}

.ux-np6-icon.navigator {
    color: #131E26;
}
.ux-np6-icon.navigator.selected {
    background-color: #0087FF;
    color: #ffffff;
}
.ux-np6-icon.navigator.hovered {
    color: #FFFFFF;
    background-color: #2EA5FF;
}

/* Corner = expert mode trigger */
.ux-np6-icon.corner {
    height: 30px !important;
    width: 35px !important;
    background-color: #c2c8d0;
    color: #fff;
    z-index: 20;
    border-radius: 0 0 0 30px;
    text-align: right;
    padding-right: 3px;
    transition-property: color, background-color;
}
.ux-np6-icon.corner.hovered {
    background-color: #3e4d52;
    color: #fff;
}

.ux-np6-icon.hovered {
    color: #2ea5ff;
}
.ux-np6-icon.pushed {
    color: #8ec6f8;
}

/* Area themes */
.ux-np6-icon.area-primary {
    background-color: #0087ff;
}


/* Custom sizes */
.mdi-40px.mdi-set, .mdi-40px.mdi:before {
    font-size: 40px;
}
.mdi-32px.mdi-set, .mdi-32px.mdi:before {
    font-size: 32px;
}
.mdi-22px.mdi-set, .mdi-22px.mdi:before {
    font-size: 22px;
}
.mdi-20px.mdi-set, .mdi-20px.mdi:before {
    font-size: 20px;
}
.mdi-16px.mdi-set, .mdi-16px.mdi:before {
    font-size: 16px;
}
.mdi-14px.mdi-set, .mdi-14px.mdi:before {
    font-size: 14px;
}
.mdi-12px.mdi-set, .mdi-12px.mdi:before {
    font-size: 12px;
}

/* Area (around the icon) size */
.ux-np6-icon.area14 {
    width: 14px;
    height: 14px;
    line-height: 14px;
}
.ux-np6-icon.area15 {
    width: 15px;
    height: 15px;
    line-height: 15px;
}
.ux-np6-icon.area16 {
    width: 16px;
    height: 16px;
    line-height: 16px;
}
.ux-np6-icon.area20 {
    width: 20px;
    height: 30px;
    line-height: 20px;
}
.ux-np6-icon.area22 {
    width: 22px;
    height: 22px;
    line-height: 22px;
}
.ux-np6-icon.area24 {
    width: 24px;
    height: 24px;
    line-height: 24px;
}
.ux-np6-icon.area28 {
    width: 28px;
    height: 28px;
    line-height: 28px;
}
.ux-np6-icon.area30 {
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.ux-np6-icon.area32 {
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.ux-np6-icon.areaGrid32 {
    width: 40px;
    height: 32px;
    line-height: 34px;
    text-align: center !important;
}
.ux-np6-icon.area34 {
    width: 34px;
    height: 34px;
    line-height: 34px;
}
.ux-np6-icon.area36 {
    width: 36px;
    height: 36px;
    line-height: 36px;
}
.ux-np6-icon.area40 {
    width: 40px;
    height: 40px;
    line-height: 40px;

}
.ux-np6-icon.area50 {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
.ux-np6-icon.area60 {
    width: 60px;
    height: 60px;
    line-height: 60px;
}

/* SubIcon */
.ux-np6-icon.withsub {
    text-align: left;
}

/* Utils */
.ux-np6-icon.disabled {
    cursor: default;
    opacity: .5;
}
.ux-np6-icon.nopointer {
    cursor: default;
}



/* Special case to NOT reproduce: Drag Icons. Too costly to change the component, we translated css' here */
.ux-DragIcon {
    position: absolute;
    width: 24px;
    height: 24px;
    background: none no-repeat 0 0 transparent;
    z-index: 10000;
}

.ux-DragDeny {
    position: absolute;
    width: 24px;
    height: 24px;
    color: #66788a; background: none; font-family: "Material Design Icons"; font-size: 24px; text-align: center;
    z-index: 10000;
}
.ux-DragDeny:before { content: '\F739'; color: #ea4747;}

.ux-DragMove {
    position: absolute;
    width: 24px;
    height: 24px;
    color: #66788a; background: none; font-family: "Material Design Icons"; font-size: 24px; text-align: center;
    z-index: 10000;
}
.ux-DragMove:before { content: '\F28D'; color: #0e5ed1; }

.ux-DragCopy {
    position: absolute;
    width: 24px;
    height: 24px;
    color: #66788a; background: none; font-family: "Material Design Icons"; font-size: 24px; text-align: center;
    z-index: 10000;
}
.ux-DragCopy:before { content: '\F415'; color: #0e5ed1; }

.ux-DragLink {
    position: absolute;
    width: 24px;
    height: 24px;
    color: #66788a; background: none; font-family: "Material Design Icons"; font-feature-settings: 'liga'; font-size: 24px; text-align: center;
    z-index: 10000;
}
.ux-DragLink:before { content: '\F336'; color: #0e5ed1; }


/* Same here with the info bubbles */
.ux-InfoBubble {
    width: 15px;
    height: 15px;
    line-height: 15px !important;
    border-radius: 50%;
    position: absolute;
    top: 14px;
    right: -4px;
    z-index: 2;
    text-align: center;
    font: bold 10px 'Roboto Bold', 'Roboto Regular', 'Roboto';
    color: white;
}
.ux-InfoBubble-Unknown {
    background-color: #B8C2CC;
}
.ux-InfoBubble-Warning {
    background-color: #f68f23;
}
.ux-InfoBubble-Error {
    background-color: #ea4747;
}
.ux-InfoBubble-Valid {
    background-color: #43b36c;
    font-family: 'Material Design Icons';
}
.ux-InfoBubble-MaxiValid {
    background-color: white;
    color: #43b36c;
    font-family: 'Material Design Icons';
    width: 28px;
    height: 28px;
    line-height: 24px !important;
    top: 2px;
    right: -4px;
    font-size: 24px;
}
.ux-InfoBubble-Valid:before, .ux-InfoBubble-MaxiValid:before {
    content: '\F12C'
}
.ux-InfoBubble-Disable-Color {
    color: #66788a;
}