/*
* add various size css like ii-md here and combine them with the icons to get various sizes of the icons ie. ii-md ii-profile
*/
.ii-15{
    width: 15px !important;
    height: 15px !important;
    vertical-align: middle;
    display:inline-block;
}

.ii-20{
    width:20px;
    height:20px;
    vertical-align: middle;
    display:inline-block;
}

.ii-40{
    width:40px;
    height:40px;
    vertical-align: middle;
    display:inline-block;
}

.ii-25{
    width:25px;
    height:25px;
    vertical-align: middle;
    display:inline-block;
}

.ii-30{
    width:30px;
    height:30px;
    vertical-align: middle;
    display:inline-block;
}

.ii-md{
    width:28px;
    height:28px;
    vertical-align: middle;
    display:inline-block;
}
.ii-sm{
    width:22px;
    height:22px;
    vertical-align: middle;
    display:inline-block;
}
.ii-mr-8{
    margin-right:8px;
}
.ii-xxs{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display:inline-block;
}
/*ii-lg has not been defined yet*/
.ii-lg{

}
.ii-xl{
    width:100px;
    height:100px;
    vertical-align: middle;
    display:inline-block;
}

.ii-50{
    width:50px;
    height:50px;
    vertical-align: middle;
    display:inline-block;
    border-radius: 4px;
}

.ii-60{
    width:60px;
    height:60px;
    vertical-align: middle;
    display:inline-block;
    border-radius: 4px;
}

.ii-80{
    width:80px;
    height:80px;
    vertical-align: middle;
    display:inline-block;
}

.ii-xxl{
    width:100px;
    height:100px;
    vertical-align: middle;
    display:inline-block;
}

.ii-120{
    width:120px;
    height:120px;
    vertical-align: middle;
    display:inline-block;
}

.ii-200{
    width:200px;
    height:200px;
    vertical-align: middle;
    display:inline-block;
}

.ii-220{
    width:220px;
    height:220px;
    vertical-align: middle;
}

/* use as following: class="ii-center ii-md ii-checkin" */
.ii-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.disabled-text {
    color: #cccccc !important;
}
.normal-text {
    color: #464646 !important;
}
/*
* Below are all the icons we use in the system
*/
.ii-mobile-event-checkin {
    background-image:url(../img/GeneralCheck-In1.png);
    background-size:cover;
}
.ii-mobile-event-checkin:hover {
    background-image:url(../img/GeneralCheck-In2.png);
}
.ii-mobile-event-checkout {
    background-image:url(../img/GeneralCheck-Out1.png);
    background-size:cover;
}
.ii-mobile-event-checkout:hover {
    background-image:url(../img/GeneralCheck-Out2.png);
}
.ii-mobile-event-checkin-disabled {
    background-image:url(../img/EventCheckIn_OFF_Regular.png);
    background-size:cover;
}
.ii-mobile-event-checkin-disabled:hover {
    background-image:url(../img/EventCheckIn_OFF_Hover.png);
}
.ii-mobile-shift-clockin {
    background-image:url(../img/Check-In1.png);
    background-size:cover;
}
.ii-mobile-shift-clockin:hover {
    background-image:url(../img/Check-In2.png);
}
.ii-mobile-shift-clockout {
    background-image:url(../img/Clock-Out1.png);
    background-size:cover;
}
.ii-mobile-shift-clockout:hover {
    background-image:url(../img/Clock-Out2.png);
}
.ii-checkin{

    background-image:url(../img/checkin_28px.png);
    background-size:cover;
}
.ii-checkin:hover{
    background-image:url(../img/checkin_push_28px.png);
}
.ii-checkout{

    background-image:url(../img/checkout_28px.png);
    background-size:cover;
}
.ii-checkout:hover{
    background-image:url(../img/checkout_push_28px.png);
}
.ii-profile{
    background-image:url(../img/profile_white_icon_28px.png);
    background-size:cover;
}

.ii-filter-enabled-stale{
    background-image:url(../img/filter_enabled_padding.png);
    background-size:cover;
}
.ii-filter-enabled-stale-blm {
    background-image:url(../img/FilterEnabled_Hover.png);
    scale: 0.7;
    background-size:cover;
}

.ii-series-icon-blm-999 {
    background-image: url('../img/Series_999.svg');
    background-size: cover;
    width: 15px;  /* Adjust the size as needed */
    height: 15px; /* Adjust the size as needed */
    display: inline-block; /* Ensure the element can be styled */
    color:#999999;
}

.ii-series-icon-blm-grey {
    background-image: url('../img/Series - Grey.svg');
    background-size: cover;
    width: 18px;  /* Adjust the size as needed */
    height: 18px; /* Adjust the size as needed */
    display: inline-block; /* Ensure the element can be styled */
    color:#cccccc;
}

.ii-series-icon-blm-black {
    background-image: url('../img/Series_Black.svg');
    background-size: cover;
    width: 18px;  /* Adjust the size as needed */
    height: 18px; /* Adjust the size as needed */
    display: inline-block; /* Ensure the element can be styled */
}

.ii-series-icon-blm-white {
    background-image: url('../img/Series_White.svg');
    background-size: cover;
    width: 18px;  /* Adjust the size as needed */
    height: 18px; /* Adjust the size as needed */
    display: inline-block; /* Ensure the element can be styled */
    color: 050404;
}

.display-in-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.series-label {
    display: flex;
    overflow: hidden; 
    max-width: 250px; 
}

.series-label i {
    margin-right: 5px;  
    flex-shrink: 0;
}

.series-label span {
    display: inline-block;
    max-width: 250px;  
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  
    position: relative;
}

/* .series-label span:hover {
    animation: scrollText 5s linear infinite;  
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
} */

.padding-left-28 {
    padding-left: 28px;
}

.padding-left-40 {
    padding-left: 40px;
}

.custom-tooltip-width .tooltip {
    max-width: 500px; /* Allow the tooltip to expand as needed */
    width: auto; /* Automatically adjust the width based on content */
    white-space: normal; /* Enable text wrapping */
}

.custom-tooltip-width .tooltip-inner {
    max-width: 500px; /* Allow the tooltip to expand as needed */
    width: auto; /* Automatically adjust the width based on content */
    white-space: normal; /* Enable text wrapping */
}

.ii-filter-enabled-stale-blm:hover {
    background-image:url(../img/FilterEnabled_HoverB.png);
}
.ii-filter-enabled-no-hover{
    background-image:url(../img/FilterEnabled_Hover.png);
    background-size:cover;
}
.ii-filter-group-enabled-padding{
    background-image:url(../img/filter_group_enabled_padding.png);
    background-size:cover;
}
.ii-filter-group-disabled-padding{
    background-image:url(../img/filter_group_disabled_padding.png);
    background-size:cover;
}
.ii-filter-enabled{
    background-image:url(../img/filter_enabled.png);
    background-size:cover;
}
.ii-filter-enabled:hover{
    background-image:url(../img/filter_enabled_hover.png);
}
.ii-clear-filter{
    background-image:url(../img/clear_filter.png);
    background-size:cover;
}
.ii-qualification-grey{
    background-image:url(../img/qualification_icon.png);
    background-size:cover;
}
.ii-role-grey{
    background-image:url(../img/role_icon_grey.png);
    background-size:cover;
}
.ii-venue-location-grey{
    background-image:url(../img/venue_location_icon_grey.png);
    background-size:cover;
}
.ii-schedule-grey{
    background-image:url(../img/schedule_icon_grey.png);
    background-size:cover;
}
.ii-checkin-grey{
    background-image:url(../img/check_in_status.png);
    background-size:cover;
}
.ii-account_creation_date-grey{
    background-image:url(../img/account_creation_date.png);
    background-size:cover;
}

.ii-account-creation-how-grey{
    background-image:url(../img/account_creation_how.png);
    background-size:cover;
}

.ii-address-grey{
    background-image:url(../img/address-grey.png);
    background-size:cover;
}
.ii-address-house-grey{
    background-image:url(../img/address.png);
    background-size:cover;
}

.ii-dob-grey{
    background-image:url(../img/dob.png);
    background-size:cover;
}

.ii-bio-grey{
    background-image:url(../img/bio.png);
    background-size:cover;
}

.ii-emergency-contact-grey{
    background-image:url(../img/emergency_contact.png);
    background-size:cover;
}

.ii-emergency-contact-dark-grey{
    background-image:url(../img/emergency_contact-dark-Grey.png);
    background-size:cover;
}

.ii-gender-grey{
    background-image:url(../img/gender.png);
    background-size:cover;
}

.ii-individual-schedule-grey{
    background-image:url(../img/individual_schedule.png);
    background-size:cover;
}

.ii-nationality-grey{
    background-image:url(../img/nationality.png);
    background-size:cover;
}

.ii-phone-number-grey{
    background-image:url(../img/phone_number.png);
    background-size:cover;
}

.ii-tshirt-size-grey{
    background-image:url(../img/tshirt-grey.png);
    background-size:cover;
}

.ii-tshirt-size-light-grey{
    background-image:url(../img/tshirt-grey.png);
    background-size:cover;
}

.ii-lighten {
    filter: brightness(0.5) invert(1);
}

.ii-tshirt-size-dark-grey{
    background-image:url(../img/tshirt-size.png);
    background-size:cover;
}

.ii-event-waiver-grey{
    background-image:url(../img/waiver.png);
    background-size:cover;
}
.ii-event-manager-white{
    background-image:url(../img/event-manager.png);
    background-size:cover;
}

.ii-event-staff-white{
    background-image:url(../img/event-staff.png);
    background-size:cover;
}

.ii-event-filter-grey{
    background-image:url(../img/Schedule_Event.png);
    background-size:cover;
}

.ii-colour-picker{
    background-image:url(../img/colour-picker-icon.png);
    background-size:cover;
}
.ii-address-grey{
    background-image:url(../img/address-grey.png);
    background-size:cover;
}
.ii-email-icon-grey{
    background-image:url(../img/email-icon-grey.png);
    background-size:cover;
}

.ii-phone-icon-grey{
    background-image:url(../img/phone-icon-grey.png);
    background-size:cover;
}

.ii-profile-blank-icon-white{
    background-image:url(../img/profile-blank-icon-grey.png);
    background-size:cover;
}

.ii-timezone-icon-grey{
    background-image:url(../img/timezone-icon-grey.png);
    background-size:cover;
}

.ii-event-icon-grey{
    background-image:url(../img/event-icon-grey.png);
    background-size:cover;
}

.ii-website-icon-grey{
    background-image:url(../img/website-icon-grey.png);
    background-size:cover;
}

.ii-question-mark-orange{
    background-image:url(../img/question_mark_1_status.png);
    background-size:cover;
}
.ii-question-mark-orange:hover{
    background-image:url(../img/question_mark_2_status.png);
}

.ii-question-mark-blue{
    background-image:url(../img/help_16.png);
    background-size:cover;
}

.ii-custom-grey{
    background-image:url(../img/Custom.png);
    background-size:cover;
}
.ii-custom-question-grey{
    background-image:url(../img/customQuestion.png);
    background-size:cover;
}
.ii-custom-sub-question-grey{
    background-image:url(../img/subQuestion.png);
    background-size:cover;
}

.ii-dragdrop-grey{
    background-image:url(../img/Drag&Drop.png);
    background-size:cover;
}

.ii-profilephoto2-grey{
    background-image:url(../img/ProfilePhoto2.png);
    background-size:cover;
}

.ii-star-grey{
    background-image:url(../img/Star.png);
    background-size:cover;
}

.ii-address-grey{
    background-image:url(../img/address.png);
    background-size:cover;
}

.ii-reg-questions-grey{
    background-image:url(../img/RegQuestions.png);
    background-size:cover;
}

.visit-help-desk{
    background-image:url(../img/Question.png);
    background-size:cover;
}

.get-a-demo{
    background-image:url(../img/Demo.png);
    background-size:cover;
}

.go-to-shop{
    background-image:url(../img/Shop.png);
    background-size:cover;
}

.ii-oops-icon{
    background-image:url(../img/2000px_Broken_heart.png);
    background-size:cover;
}

.ii-add-icon-2{
    background-image:url(../img/Icon_Add2.png);
    background-size:cover;
    height: 30px;
    width: 30px;
}

.ii-add-icon-2:hover{
    background-image: url(../img/Icon_Add3.png);
    background-size:cover;
    height: 30px;
    width: 30px;
}

.ii-RoleTag-sm {
    background-image:url(../img/RoleTag-sm.png);
    background-size:cover;
    height: 16px;
    width: 16px;
    image-rendering: pixelated;
}
.ii-RoleTag-white {
    background-image:url(../img/RoleTag_White.png);
    background-size:cover;
    height: 18px;
    width: 18px;
}

.ii-sf-sm {
    background-image:url(../img/logo.svg);
    background-size:cover;
    height: 32px;
    width: 46px;
    image-rendering: pixelated;
}

.ii-RoleTag-dark-grey {
    background-image:url(../img/RoleTag.png);
    background-size:cover;
    height: 18px;
    width: 18px;
}

.ii-hover:hover {
    cursor: pointer;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.ii-series svg {
    width: 100%;
    height: auto;
}