@c8y/style/styles/_c8y-icons.less

Styles for Cumulocity IoT applications

/* Icon Font: c8yicon */
@asset-directory: if(@use-relative-paths, '../assets', 'assets');

@font-face {
  font-family: "c8yicon-dark";
  src: url("@{asset-directory}/c8y-icon-dark.eot");
  src: url("@{asset-directory}/c8y-icon-dark.eot?#iefix") format("embedded-opentype"),
       url("@{asset-directory}/c8y-icon-dark.woff") format("woff"),
       url("@{asset-directory}/c8y-icon-dark.ttf") format("truetype"),
       url("@{asset-directory}/c8y-icon-dark.svg#c8yicon-dark") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "c8yicon-dark";
    src: url("@{asset-directory}/c8y-icon-dark.svg#c8yicon-dark") format("svg");
  }
}

@font-face {
  font-family: "c8yicon-light";
  src: url("@{asset-directory}/c8y-icon-light.eot");
  src: url("@{asset-directory}/c8y-icon-light.eot?#iefix") format("embedded-opentype"),
       url("@{asset-directory}/c8y-icon-light.woff") format("woff"),
       url("@{asset-directory}/c8y-icon-light.ttf") format("truetype"),
       url("@{asset-directory}/c8y-icon-light.svg#c8yicon-light") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "c8yicon-light";
    src: url("@{asset-directory}/c8y-icon-light.svg#c8yicon-light") format("svg");
  }
}

.c8y-icon {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 0;
  min-width: 1em;
  &:not([class^="fa-"]):not([class*=" fa-"]):not([class^="dlt-c8y-icon-"]):not([class*=" dlt-c8y-icon-"])::before{
    display: inline-block;
    font-family: "c8yicon-dark";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    width: 1.1em;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    .c8y-app-icon &{
      width: auto;
    }
  }
  &:not([class^="fa-"]):not([class*=" fa-"]):not([class^="dlt-c8y-icon-"]):not([class*=" dlt-c8y-icon-"])::after{
    display: inline-block;
    font-family: "c8yicon-light";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
  }
}

.c8y-icon-white{
  &:before{
    color:@icon-white-color-dark;
  }
  &::after{
    color: @icon-white-color-light;
  }
}

.c8y-icon-duocolor{
  &:before{
    color: @icon-dark-color-dark;
  }
  &.text-danger{
    &:before{
      color: @status-danger;
    }
  }
  &.text-warning{
    &:before{
      color: @status-warning;
    }
  }
  &.text-info{
    &:before{
      color: @status-info;
    }
  }
  &.text-success{
    &:before{
      color: @status-success;
    }
  }
  &.text-muted{
    &:before{
      color: @text-muted;
    }
  }
  &:after{
    color: @icon-dark-color-light;
  }
}


.c8y-icon-aab-icon-model {
  &:before {
    content: @c8y-icon-dark-aab-icon-model; 
  }
  &:after {
    content: @c8y-icon-light-aab-icon-model; 
  }
}
.c8y-icon-aab-icon-template-model {
  &:before {
    content: @c8y-icon-dark-aab-icon-template-model; 
  }
  &:after {
    content: @c8y-icon-light-aab-icon-template-model; 
  }
}
.c8y-icon-accounts {
  &:before {
    content: @c8y-icon-dark-accounts; 
  }
  &:after {
    content: @c8y-icon-light-accounts; 
  }
}
.c8y-icon-add-user {
  &:before {
    content: @c8y-icon-dark-add-user; 
  }
  &:after {
    content: @c8y-icon-light-add-user; 
  }
}
.c8y-icon-administration {
  &:before {
    content: @c8y-icon-dark-administration; 
  }
  &:after {
    content: @c8y-icon-light-administration; 
  }
}
.c8y-icon-alarm {
  &:before {
    content: @c8y-icon-dark-alarm; 
  }
  &:after {
    content: @c8y-icon-light-alarm; 
  }
}
.c8y-icon-alert-idle {
  &:before {
    content: @c8y-icon-dark-alert-idle; 
  }
  &:after {
    content: @c8y-icon-light-alert-idle; 
  }
}
.c8y-icon-alfabet {
  &:before {
    content: @c8y-icon-dark-alfabet; 
  }
}
.c8y-icon-analytic-model {
  &:before {
    content: @c8y-icon-dark-analytic-model; 
  }
  &:after {
    content: @c8y-icon-light-analytic-model; 
  }
}
.c8y-icon-analytics-builder {
  &:before {
    content: @c8y-icon-dark-analytics-builder; 
  }
  &:after {
    content: @c8y-icon-light-analytics-builder; 
  }
}
.c8y-icon-apama-epl {
  &:before {
    content: @c8y-icon-dark-apama-epl; 
  }
  &:after {
    content: @c8y-icon-light-apama-epl; 
  }
}
.c8y-icon-apama-machine-learning-workbench {
  &:before {
    content: @c8y-icon-dark-apama-machine-learning-workbench; 
  }
  &:after {
    content: @c8y-icon-light-apama-machine-learning-workbench; 
  }
}
.c8y-icon-apama-machine-learning {
  &:before {
    content: @c8y-icon-dark-apama-machine-learning; 
  }
  &:after {
    content: @c8y-icon-light-apama-machine-learning; 
  }
}
.c8y-icon-archive {
  &:before {
    content: @c8y-icon-dark-archive; 
  }
  &:after {
    content: @c8y-icon-light-archive; 
  }
}
.c8y-icon-aris {
  &:before {
    content: @c8y-icon-dark-aris; 
  }
}
.c8y-icon-atom {
  &:before {
    content: @c8y-icon-dark-atom; 
  }
  &:after {
    content: @c8y-icon-light-atom; 
  }
}
.c8y-icon-book {
  &:before {
    content: @c8y-icon-dark-book;
  }
}
.c8y-icon-bookmark {
  &:before {
    content: @c8y-icon-dark-bookmark; 
  }
}
.c8y-icon-bulb {
  &:before {
    content: @c8y-icon-dark-bulb; 
  }
  &:after {
    content: @c8y-icon-light-bulb; 
  }
}
.c8y-icon-business-rules {
  &:before {
    content: @c8y-icon-dark-business-rules; 
  }
  &:after {
    content: @c8y-icon-light-business-rules; 
  }
}
.c8y-icon-c8y-c {
  &:before {
    content: @c8y-icon-dark-c8y-c; 
  }
}
.c8y-icon-c8y-data {
  &:before {
    content: @c8y-icon-dark-c8y-data; 
  }
  &:after {
    content: @c8y-icon-light-c8y-data; 
  }
}
.c8y-icon-c8y-support {
  &:before {
    content: @c8y-icon-dark-c8y-support; 
  }
  &:after {
    content: @c8y-icon-light-c8y-support; 
  }
}
.c8y-icon-c8y {
  &:before {
    content: @c8y-icon-dark-c8y; 
  }
}
.c8y-icon-calendar {
  &:before {
    content: @c8y-icon-dark-calendar; 
  }
  &:after {
    content: @c8y-icon-light-calendar; 
  }
}
.c8y-icon-chart {
  &:before {
    content: @c8y-icon-dark-chart; 
  }
  &:after {
    content: @c8y-icon-light-chart; 
  }
}
.c8y-icon-circle-star {
  &:before {
    content: @c8y-icon-dark-circle-star; 
  }
  &:after {
    content: @c8y-icon-light-circle-star; 
  }
}
.c8y-icon-cloud-container {
  &:before {
    content: @c8y-icon-dark-cloud-container; 
  }
  &:after {
    content: @c8y-icon-light-cloud-container; 
  }
}
.c8y-icon-cockpit {
  &:before {
    content: @c8y-icon-dark-cockpit; 
  }
  &:after {
    content: @c8y-icon-light-cockpit; 
  }
}
.c8y-icon-component {
  &:before {
    content: @c8y-icon-dark-component; 
  }
  &:after {
    content: @c8y-icon-light-component; 
  }
}
.c8y-icon-connector-in {
  &:before {
    content: @c8y-icon-dark-connector-in; 
  }
  &:after {
    content: @c8y-icon-light-connector-in; 
  }
}
.c8y-icon-connector-out {
  &:before {
    content: @c8y-icon-dark-connector-out; 
  }
  &:after {
    content: @c8y-icon-light-connector-out; 
  }
}
.c8y-icon-css {
  &:before {
    content: @c8y-icon-dark-css; 
  }
}
.c8y-icon-cumulocity-iot {
  &:before {
    content: @c8y-icon-dark-cumulocity-iot; 
  }
}
.c8y-icon-data-broker {
  &:before {
    content: @c8y-icon-dark-data-broker; 
  }
  &:after {
    content: @c8y-icon-light-data-broker; 
  }
}
.c8y-icon-data-explorer {
  &:before {
    content: @c8y-icon-dark-data-explorer; 
  }
  &:after {
    content: @c8y-icon-light-data-explorer; 
  }
}
.c8y-icon-data-hub {
  &:before {
    content: @c8y-icon-dark-data-hub; 
  }
  &:after {
    content: @c8y-icon-light-data-hub; 
  }
}
.c8y-icon-data-points {
  &:before {
    content: @c8y-icon-dark-data-points; 
  }
  &:after {
    content: @c8y-icon-light-data-points; 
  }
}
.c8y-icon-design {
  &:before {
    content: @c8y-icon-dark-design; 
  }
  &:after {
    content: @c8y-icon-light-design; 
  }
}
.c8y-icon-device-connect {
  &:before {
    content: @c8y-icon-dark-device-connect; 
  }
  &:after {
    content: @c8y-icon-light-device-connect; 
  }
}
.c8y-icon-device-control {
  &:before {
    content: @c8y-icon-dark-device-control; 
  }
  &:after {
    content: @c8y-icon-light-device-control; 
  }
}
.c8y-icon-device-management {
  &:before {
    content: @c8y-icon-dark-device-management; 
  }
  &:after {
    content: @c8y-icon-light-device-management; 
  }
}
.c8y-icon-device-profile {
  &:before {
    content: @c8y-icon-dark-device-profile; 
  }
  &:after {
    content: @c8y-icon-light-device-profile; 
  }
}
.c8y-icon-device-protocols {
  &:before {
    content: @c8y-icon-dark-device-protocols; 
  }
  &:after {
    content: @c8y-icon-light-device-protocols; 
  }
}
.c8y-icon-device {
  &:before {
    content: @c8y-icon-dark-device; 
  }
  &:after {
    content: @c8y-icon-light-device; 
  }
}
.c8y-icon-dynamic-mapper {
  &:before {
    content: @c8y-icon-dark-dynamic-mapper; 
  }
  &:after {
    content: @c8y-icon-light-dynamic-mapper; 
  }
}
.c8y-icon-e2e-monitoring {
  &:before {
    content: @c8y-icon-dark-e2e-monitoring; 
  }
}
.c8y-icon-energy {
  &:before {
    content: @c8y-icon-dark-energy; 
  }
  &:after {
    content: @c8y-icon-light-energy; 
  }
}
.c8y-icon-enterprise {
  &:before {
    content: @c8y-icon-dark-enterprise; 
  }
  &:after {
    content: @c8y-icon-light-enterprise; 
  }
}
.c8y-icon-event-processing {
  &:before {
    content: @c8y-icon-dark-event-processing; 
  }
  &:after {
    content: @c8y-icon-light-event-processing; 
  }
}
.c8y-icon-events {
  &:before {
    content: @c8y-icon-dark-events; 
  }
  &:after {
    content: @c8y-icon-light-events; 
  }
}
.c8y-icon-fieldbus {
  &:before {
    content: @c8y-icon-dark-fieldbus; 
  }
  &:after {
    content: @c8y-icon-light-fieldbus; 
  }
}
.c8y-icon-find-map {
  &:before {
    content: @c8y-icon-dark-find-map; 
  }
  &:after {
    content: @c8y-icon-light-find-map; 
  }
}
.c8y-icon-firmware {
  &:before {
    content: @c8y-icon-dark-firmware; 
  }
  &:after {
    content: @c8y-icon-light-firmware; 
  }
}
.c8y-icon-grid-off {
  &:before {
    content: @c8y-icon-dark-grid-off; 
  }
  &:after {
    content: @c8y-icon-light-grid-off; 
  }
}
.c8y-icon-grid-on {
  &:before {
    content: @c8y-icon-dark-grid-on; 
  }
}
.c8y-icon-group-add {
  &:before {
    content: @c8y-icon-dark-group-add; 
  }
  &:after {
    content: @c8y-icon-light-group-add; 
  }
}
.c8y-icon-group-open {
  &:before {
    content: @c8y-icon-dark-group-open; 
  }
  &:after {
    content: @c8y-icon-light-group-open; 
  }
}
.c8y-icon-group-remote-inactive {
  &:before {
    content: @c8y-icon-dark-group-remote-inactive; 
  }
  &:after {
    content: @c8y-icon-light-group-remote-inactive; 
  }
}
.c8y-icon-group-remote-open {
  &:before {
    content: @c8y-icon-dark-group-remote-open; 
  }
  &:after {
    content: @c8y-icon-light-group-remote-open; 
  }
}
.c8y-icon-group-remote {
  &:before {
    content: @c8y-icon-dark-group-remote; 
  }
  &:after {
    content: @c8y-icon-light-group-remote; 
  }
}
.c8y-icon-group-smart-open {
  &:before {
    content: @c8y-icon-dark-group-smart-open; 
  }
  &:after {
    content: @c8y-icon-light-group-smart-open; 
  }
}
.c8y-icon-group-smart {
  &:before {
    content: @c8y-icon-dark-group-smart; 
  }
  &:after {
    content: @c8y-icon-light-group-smart; 
  }
}
.c8y-icon-group {
  &:before {
    content: @c8y-icon-dark-group; 
  }
}
.c8y-icon-java {
  &:before {
    content: @c8y-icon-dark-java; 
  }
  &:after {
    content: @c8y-icon-light-java; 
  }
}
.c8y-icon-layers {
  &:before {
    content: @c8y-icon-dark-layers; 
  }
  &:after {
    content: @c8y-icon-light-layers; 
  }
}
.c8y-icon-layout {
  &:before {
    content: @c8y-icon-dark-layout; 
  }
}
.c8y-icon-location {
  &:before {
    content: @c8y-icon-dark-location; 
  }
  &:after {
    content: @c8y-icon-light-location; 
  }
}
.c8y-icon-machine-portal {
  &:before {
    content: @c8y-icon-dark-machine-portal; 
  }
  &:after {
    content: @c8y-icon-light-machine-portal; 
  }
}
.c8y-icon-management {
  &:before {
    content: @c8y-icon-dark-management; 
  }
  &:after {
    content: @c8y-icon-light-management; 
  }
}
.c8y-icon-metering {
  &:before {
    content: @c8y-icon-dark-metering; 
  }
  &:after {
    content: @c8y-icon-light-metering; 
  }
}
.c8y-icon-mft {
  &:before {
    content: @c8y-icon-dark-mft; 
  }

}
.c8y-icon-mobile-add {
  &:before {
    content: @c8y-icon-dark-mobile-add; 
  }
  &:after {
    content: @c8y-icon-light-mobile-add; 
  }
}
.c8y-icon-mobile-config {
  &:before {
    content: @c8y-icon-dark-mobile-config; 
  }
  &:after {
    content: @c8y-icon-light-mobile-config; 
  }
}
.c8y-icon-modules {
  &:before {
    content: @c8y-icon-dark-modules; 
  }
  &:after {
    content: @c8y-icon-light-modules; 
  }
}
.c8y-icon-mycloud {
  &:before {
    content: @c8y-icon-dark-mycloud; 
  }
}
.c8y-icon-notification {
  &:before {
    content: @c8y-icon-dark-notification; 
  }
  &:after {
    content: @c8y-icon-light-notification; 
  }
}
.c8y-icon-oee {
  &:before {
    content: @c8y-icon-dark-oee; 
  }
  &:after {
    content: @c8y-icon-light-oee; 
  }
}
.c8y-icon-onnx {
  &:before {
    content: @c8y-icon-dark-onnx; 
  }
}
.c8y-icon-overviews {
  &:before {
    content: @c8y-icon-dark-overviews; 
  }
  &:after {
    content: @c8y-icon-light-overviews; 
  }
}
.c8y-icon-parameters-on {
  &:before {
    content: @c8y-icon-dark-parameters-on; 
  }
  &:after {
    content: @c8y-icon-light-parameters-on; 
  }
}
.c8y-icon-parameters {
  &:before {
    content: @c8y-icon-dark-parameters; 
  }
}
.c8y-icon-parking {
  &:before {
    content: @c8y-icon-dark-parking; 
  }
  &:after {
    content: @c8y-icon-light-parking; 
  }
}
.c8y-icon-report {
  &:before {
    content: @c8y-icon-dark-report; 
  }
  &:after {
    content: @c8y-icon-light-report; 
  }
}
.c8y-icon-reports {
  &:before {
    content: @c8y-icon-dark-reports; 
  }
  &:after {
    content: @c8y-icon-light-reports; 
  }
}
.c8y-icon-rocket {
  &:before {
    content: @c8y-icon-dark-rocket; 
  }
  &:after {
    content: @c8y-icon-light-rocket; 
  }
}
.c8y-icon-saas {
  &:before {
    content: @c8y-icon-dark-saas; 
  }
  &:after {
    content: @c8y-icon-light-saas; 
  }
}
.c8y-icon-security {
  &:before {
    content: @c8y-icon-dark-security; 
  }
  &:after {
    content: @c8y-icon-light-security; 
  }
}
.c8y-icon-shield {
  &:before {
    content: @c8y-icon-dark-shield; 
  }
  &:after {
    content: @c8y-icon-light-shield; 
  }
}
.c8y-icon-simulator {
  &:before {
    content: @c8y-icon-dark-simulator; 
  }
  &:after {
    content: @c8y-icon-light-simulator; 
  }
}
.c8y-icon-smart-rest {
  &:before {
    content: @c8y-icon-dark-smart-rest; 
  }
  &:after {
    content: @c8y-icon-light-smart-rest; 
  }
}
.c8y-icon-smart-rules {
  &:before {
    content: @c8y-icon-dark-smart-rules; 
  }
  &:after {
    content: @c8y-icon-light-smart-rules; 
  }
}
.c8y-icon-solution-accelerator {
  &:before {
    content: @c8y-icon-dark-solution-accelerator; 
  }
  &:after {
    content: @c8y-icon-light-solution-accelerator; 
  }
}
.c8y-icon-streaming-analytics {
  &:before {
    content: @c8y-icon-dark-streaming-analytics; 
  }
  &:after {
    content: @c8y-icon-light-streaming-analytics; 
  }
}
.c8y-icon-sub-tenants {
  &:before {
    content: @c8y-icon-dark-sub-tenants; 
  }
  &:after {
    content: @c8y-icon-light-sub-tenants; 
  }
}
.c8y-icon-tenant-policies {
  &:before {
    content: @c8y-icon-dark-tenant-policies; 
  }
  &:after {
    content: @c8y-icon-light-tenant-policies; 
  }
}
.c8y-icon-tools {
  &:before {
    content: @c8y-icon-dark-tools; 
  }
  &:after {
    content: @c8y-icon-light-tools; 
  }
}
.c8y-icon-tracking {
  &:before {
    content: @c8y-icon-dark-tracking; 
  }
  &:after {
    content: @c8y-icon-light-tracking; 
  }
}
.c8y-icon-usage-statistics {
  &:before {
    content: @c8y-icon-dark-usage-statistics; 
  }
  &:after {
    content: @c8y-icon-light-usage-statistics; 
  }
}
.c8y-icon-user {
  &:before {
    content: @c8y-icon-dark-user; 
  }
  &:after {
    content: @c8y-icon-light-user; 
  }
}
.c8y-icon-users {
  &:before {
    content: @c8y-icon-dark-users; 
  }
  &:after {
    content: @c8y-icon-light-users; 
  }
}
.c8y-icon-waste-bin {
  &:before {
    content: @c8y-icon-dark-waste-bin; 
  }
  &:after {
    content: @c8y-icon-light-waste-bin; 
  }
}
.c8y-icon-wm-api {
  &:before {
    content: @c8y-icon-dark-wm-api; 
  }

}
.c8y-icon-wm-b2b {
  &:before {
    content: @c8y-icon-dark-wm-b2b; 
  }

}
.c8y-icon-wm-dynamicapps {
  &:before {
    content: @c8y-icon-dark-wm-dynamicapps; 
  }
}
.c8y-icon-wm-integration {
  &:before {
    content: @c8y-icon-dark-wm-integration; 
  }
  &:after {
    content: @c8y-icon-light-wm-integration; 
  }
}

.app-noicon {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-color: @brand-primary-dark;
  color: @brand-primary-light;
  overflow: hidden;
  margin-top: 0;
  font-size: 21px;
  line-height: 36px;
  text-transform: capitalize;
  text-align: center;
  >span {
    display: inline-block;
    overflow: hidden;
  }
  .interact-list &{
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
  }
}

// plugins icon to use in the ecosystem
.c8y-plugin-icon{
  position: relative;
  font-style: normal;
  span{
    width: 100%;
    font-size: 14px;
    line-height: 35px;
    color: @component-background-default;
    position: absolute;
    top: 0;
    display: block;
    text-align: center;
    z-index: 3;
  }

  &::before{
    .dlt-c8y-icon();
    content: @dlt-c8y-icon-plugin;
    position: relative;
    color: @text-color;
    z-index: 1;
    font-size: 1.4em;
  }
}

.app-title {
  margin: 0;
  .c8y-icon {
    font-size: 150%;
    width: 1.5em;
  }
}


.circle-icon-wrapper{
  --c8y-icon-stroke-color: @text-color;
  border-radius: 50%;
  color: white;
  width: 24px;
  aspect-ratio: 1/1;
  text-align: center;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  > i{
    font-size: 16px;
    color: @component-background-default;
  }
  &--medium{
    width: 20px;
    height: 20px;
    > i{
      font-size: 12px;
    }
  }
  &--small{
    width: 16px;
    height: 16px;
    > i{
      font-size: 10px;
    }
  }
}




.dot {
  width: 50px;
  height: 50px;
  display: inline-flex;
  border-radius: 50%;
  background-color: @brand-primary;
  color: @gray-100;
  font-size: 24px;
  align-items: center;
  justify-content: center;
  margin: 1px 0;
  &.dot-danger {
    background-color: @status-danger;
  }
  &.dot-warning {
    background-color: @status-warning;
  }
  &.dot-success {
    background-color: @status-success;
  }
  &.dot-default{
    background-color: @gray-80;
  }
  &.dot-info{
    background-color: @status-info;
  }

  &.bg-primary-light{
    color: var(--c8y-palette-low);
  }
  &.small {
    font-size: 14px;
    width: 20px;
    height: 20px;
    line-height: inherit;
    .c8y-icon,
    .fa{
      line-height: 20px;
      font-size: 12px;
    }
  }
  &.dot-30{
    font-size: 14px;
    width: 30px;
    height: 30px;
    line-height: 32px;
  }
  &.dot-64{
    width: 64px;
    height: 64px;
  }
}

// fix notch
.dlt-c8y-icon-circle-o-notch{
  &.icon-spin {
    animation: icon-spin 1s infinite linear;
  }
}

// glyphicon - used in datepicker
.glyphicon {
  display: inline-block;
  font: normal normal normal 14px/1 '@{icon-font-family}';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  width: 1.25em;
  text-align: center;
}

.glyphicon-chevron-left {
  &:before {
    content: @dlt-c8y-icon-chevron-left;
  }
}

.glyphicon-chevron-right {
  &:before {
    content: @dlt-c8y-icon-chevron-right;
  }
}

.glyphicon-chevron-up {
  &:before {
    content: @dlt-c8y-icon-chevron-up;
  }
}

.glyphicon-chevron-down {
  &:before {
    content: @dlt-c8y-icon-chevron-down;
  }
}

.glyphicon-ok {
  &:before {
    content: @dlt-c8y-icon-check;
  }
}

.glyphicon-remove {
  &:before {
    content: @dlt-c8y-icon-times;
  }
}


c8y-icon-selector-wrapper{
  > div{
    min-width: 64px;
    min-height: @form-control-height-base;
    position: relative;
    border: 1px solid @component-border-color;
  }

  .showOnHover{
    background-color: @component-background-default;
    opacity:0;
  }
  &:hover .showOnHover{
    opacity: 1;
  }
}