/**
 * This file contains all icons styles.
 */

/* the base style for all 16x16px icons */
.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    font-size: 16px !important;
}

[class^="icon-"], [class*=" icon-"] {
    font-size: 16px !important;
}
[class^="icon-"] > *, [class*=" icon-"] > *,
a.button[class^="icon-"], a.button[class*=" icon-"]
{
    font-family: Arial, Helvetica, sans-serif !important;
}


a.icon, a:link.icon, a[class^="icon-"], a[class*=" icon-"]{
    text-decoration: none;
}

a.icon, a:hover.icon, a[class^="icon-"]:hover, a[class*=" icon-"]:hover{
    color: #45484D;
    text-decoration: none;
}

/* the style to apply for 24x24px icons*/
.icon24 {
    width: 24px;
    height: 24px;
    font-size: 24px !important;
}

/* the style to apply for 24x24px icons*/
.icon32 {
    width: 32px;
    height: 32px;
    font-size: 32px !important;
}

.icon100 {
    width: 100px;
    height: 100px;
    font-size: 100px !important;
}

/* ensure a pointer cursor on icon links */
a.icon {
    cursor: pointer;
}

/* apply the grayoutIcon class to an icon to show it in grayscale, it changes to colors on mouseover */
.grayoutIcon:hover {
    cursor: pointer;
    opacity: 1;
    filter: none;
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}

/* apply the disabled class to an icon to show it always in grayscale */
.grayoutIcon, .disabled {
    filter: grayscale(100%);
    /*-moz-filter: grayscale(100%);*/

    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   -ms-filter: grayscale(100%);
  }

.disabled {
    cursor: default !important;
    opacity: .5;
  }

/*Apply this to grouped action icons in data tables*/
.groupicons
{
    padding-right:7px;
}

/* apply this icon class for the 16x16px tooltip info icon */
.iconFieldInfo {
   opacity: .7;
   padding: 0 1px 0 1px;
}

.iconcamera2 {
    color: lightgray;
}

/* apply this icon class for the 16x16px tooltip info icon */
.iconMessageInfo {
    color: #000000;
    cursor: help;
}

/* apply this icon class for the 16x16px cell icon (Already Subscribed) */
.iconAlreadySubscribed {
    color: #E15052;
}

/* apply this icon class for the 16x16px cell icon (Remove from cart) */
.iconRemoveFromCart {
    color: #000000;
}

/* apply this icon class for the 16x16px cell icon (Remove from cart) */
.iconInfo {
     background: transparent url('Images/Icons32/info.png') center top no-repeat;
}

/*
 * The following icons are the status icons for several tables.
 * General: Active = Green, Inactive = Red, InBetween = Yellow
 */

/* Status Active, Green */
.iconUserStatus1, .iconactiverinexsite {
    color: #99cc68 !important;
}
.iconSsoUserStatus1 {
    color: #99cc68 !important;
}
.iconProductStatus1, .iconLocationOnline{
    color: #99cc68 !important;
}
.iconPackageStatus1 {
    color: #99cc68 !important;
}
.iconSubscriptionStatus1 {
    color: #9dcb6b !important;
}
.iconRegisterFormFieldIsPublished ,.iconRegisterFormFieldNotPublished{
    color: #99CC67 !important;
}
.iconLicenseFeatureStatusValid {
    color: #99cc68;
}
.iconLicenseMaintenanceStatusValid {
     color: #99cc68;
}
.iconLicenseFeatureAvailable {
      color: #99cc68;
}
.iconLicenseFeatureInUse {
   color: #99cc68;
}
.iconLicenseserverConnected {
     color: #99cc68;
}
.iconLicenseGracePeriodNotEntered {
     color: #99cc68;
}
.iconLicenseBannerGreen {
     background-color: #99cc68;
}
.iconSBCFrontEndAPIStatusAllowed {
    color: #99cc68;
}
.iconRegionValidPolygon {
    color: #9dcb6b !important;
}
/* Status Inactive, Red */
.iconUserStatus3 {
    color: rgb(255, 80, 82) !important;
}
.iconSsoUserStatus2 {
    color: #A9A9A9 !important;
}
.iconProductStatus3 {
    color: #E15052 !important;
}
.iconPackageStatus3 {
    color: #e15052 !important;
}
.iconSubscriptionStatus3, .iconSubscriptionStatus4 {
    color: #ce7c7c !important;
}
.iconProductStatus2, .iconLocationOffline, .iconinactiverinexsite {
    color: #E15052 !important;
}
.iconRegionMissingPolygon {
    color: #ce7c7c !important;
}

/* Status InBetween, Yellow */
.iconUserStatus2 {
    color: #ffcb46 !important;
}
.iconPackageStatus2 {
    color: #FEC847 !important;
}
.iconSubscriptionStatus2 {
    color: #f6cb61 !important;
}
.iconLicenseFeatureStatusInvalid {
    color: #ffcb46 !important;
}
.iconLicenseGracePeriodEntered {
     color: #ffcb46 !important;
}
.iconLicenseBannerYellow {
     background-color: #ffcb46 !important;
}
.iconSBCFrontEndAPIStatusExceeded {
    color: #ffcb46 !important;
}

/* Status InBetween, Red */
.iconLicenseGracePeriodExpired {
     color: #FF5052 ;
}
.iconLicenseFeatureStatusFailed {
    color: #FF5052;
}
.iconLicenseMaintenanceStatusInvalid {
      color: #FF5052;
}
.iconLicenseFeatureNotFound {
     color: #FF5052;
}
.iconLicenseFeatureExceeded {
     color: #FF5052;
}
.iconLicenseFeatureNotChecked {
    color: #A9A9A9;
}
.iconLicenseBannerRed {
     background-color: #FF5052;
}
.iconSBCFrontEndAPIStatusBlocked {
    color: #A9A9A9;
}

.iconSsoUserStatus0 {
    color: #FF5052 !important;
}

/* Special, Blue */
.iconPackageStatus4{
    color: #01a5c1 !important;
}
.iconStatusConnected {
    color: #4F81BD !important;
}
.iconLicenseBannerBlue {
     background-color: #01a5c1;
}
.iconLicenseserverDisconnected {
      color: #01a5c1;
}
.iconLicenseFeatureStatusDisconnected {
    color: #01a5c1;
}
.imageSuccess {
    background: transparent url('Images/Icons32/checkmark-circleGreen.png') center top no-repeat;
}

.imageWarning {
    background: transparent url('Images/Icons32/Warning.png') center top no-repeat;
}

/* this ensures those status icons are placed in center of the table cell */
.dataTable .iconProductStatus1, .dataTable .iconProductStatus2, .dataTable .iconProductStatus3,
.dataTable .iconUserStatus1, .dataTable .iconUserStatus2, .dataTable .iconUserStatus3,
.dataTable .iconRegisterFormFieldIsPublished, .dataTable .iconRegisterFormFieldNotPublished,
.dataTable .iconPackageStatus1, .dataTable .iconPackageStatus2, .dataTable .iconPackageStatus3, .dataTable .iconPackageStatus4,
.dataTable .iconSubscriptionStatus1, .dataTable .iconSubscriptionStatus2, .dataTable .iconSubscriptionStatus3, .dataTable .iconSubscriptionStatus4,
.dataTable .iconNotificationtrue, .dataTable .iconNotificationfalse, .dataTable .iconRegionValidPolygon, .dataTable .iconRegionMissingPolygon {
    margin: 0 5px;
    display: inline-block;
}

.dataTable .iconProductStatus1, .dataTable .iconProductStatus2, .dataTable .iconProductStatus3,
.dataTable .iconRegisterFormFieldIsPublished, .dataTable .iconRegisterFormFieldNotPublished,
.dataTable .iconPackageStatus1, .dataTable .iconPackageStatus2, .dataTable .iconPackageStatus3, .dataTable .iconPackageStatus4,
.dataTable .iconSubscriptionStatus1, .dataTable .iconSubscriptionStatus2, .dataTable .iconSubscriptionStatus3, .dataTable .iconSubscriptionStatus4,
.dataTable .iconRegionValidPolygon, .dataTable .iconRegionMissingPolygon {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
}

/* make status icons a bit bigger*/
.dataTable .iconUserStatus1, .dataTable .iconUserStatus2, .dataTable .iconUserStatus3 {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
}

.iconStandardProduct {
    padding: 5px;
    vertical-align: sub;
}


a.icon .tooltip {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
}

/* heartbeat effect */
@-webkit-keyframes heartbeat {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  28% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes heartbeat {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  28% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes heartbeat {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  28% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartbeat {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  28% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
  -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
  -khtml-animation: heartbeat 1300ms ease 0s infinite normal;
  -moz-animation: heartbeat 1300ms ease 0s infinite normal;
  -ms-animation: heartbeat 1300ms ease 0s infinite normal;
  -o-animation: heartbeat 1300ms ease 0s infinite normal;
  animation: heartbeat 1300ms ease 0s infinite normal;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.iconSubscriptionRegionsMax {
    color: #9dcb6b !important;
}
.iconSubscriptionRegionsNoRegion {
    color: #ce7c7c !important;
}
.iconSubscriptionRegionsBetween {
    color: #f6cb61 !important;
}

.iconSapInconsistentWrong {
    color:#ff5052 !important;
}
.iconSapInconsistentOK {
    color: #9dcb6b !important;
}