.searchTag.colorBackground {
    border: none;
}

.searchTag.large {
    font-size: .7em;
    margin: 0px;
    margin-bottom: .2em;
    padding: .4em .5em;
    border-radius: 3px;
}

.lam_rack_bulk_health_grid .bComponentQuestion.ui_bCheckBoxGroupComponentClass,
.click-grid-container {
    overflow: auto;
    display: grid;
}

.click-grid-container .details {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--text-default);
    border-bottom: 1px solid var(--border-light-contrast);
    border-top: 1px solid var(--border-light-contrast);
    padding: .4em 0;
    line-height: 1em;
}

.click_grid_detail {
    display: block;
    margin-bottom: .5em;
}

.click_grid_detail.heavy {
    font-weight: 700;
}

.click-grid-container .itemIcon img {
    height: 2em;
    opacity: .5;
}

.click-grid-container .animalType {
    font-size: .7em;
    position: absolute;
    top: 0px;
    left: 0px;
}

.click-grid-container .itemIcon .numberOfAnimals {
    font-weight: 800;
    font-size: 2em;
    color: var(--text-light);
    position: absolute;
    right: 0px;
    top: 0px;
}

.click-grid-container .heroBoxItem {
    border: 1px solid var(--border-dark-contrast);
}

.click-grid-container .heroBoxItemContainer {
    display: flex;
    flex-flow: column nowrap;
    height: calc(100% - 1em);
    margin: .5em;
}

.click-grid-container .not_charging {
    color: var(--red);
}

.click-grid-container.compact .heroBoxItemContainer {
    margin: 0px;
    width: 4.1em;
    min-width: 1em;
}

.click-grid-container .heroBoxItemContainer p:empty {
    display: none;
}

.click-grid-container .ezToolIconGroup {
    margin: auto;
    margin-bottom: 0px;
    border-left: none;
    border: none;
}


.click-grid-container.compact .ezToolIconGroup {
    display: block;
    text-align: center;
    overflow: hidden;
    border-left: none;
}

.click-grid-container .ezToolIcon {
    padding: .5em .7em;
    font-size: .8em;
    border: 1px solid transparent;
    background-color: transparent;
    left: 0;
}

.moveBox,
.locked_box {
    margin: 10px;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px);
    padding: 0px;
    background-color: rgba(240,240,240,.3);
    color: var(--text-default);
    border: 1px dashed var(--border-light-contrast);
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
}

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

.moveBox:hover,
.moveBox:focus {
    background-color: rgba(240,240,240,.9);
    color: var(--text-default);
}

.moveItems .moveBox {
    display: block;
}

.moveItems .heroBoxItemContainer > * {
    opacity: .03;
}

.moveItems .heroBoxItemContainer  h3,
.moveItems .moveThisItem .heroBoxItemContainer > *{
    opacity: 1;
}

.moveItems .moveThisItem .moveBox {
    opacity: 0;
}

.searchTag.Breedercage {
    color: #000000;
    background-color: #ee6caf;
}

.searchTag.Specialhusbandry {
    color: #000000;
    background-color: #c26ebd;
}

.searchTag.Postsurgery {
    color: #000000;
    background-color: #ff6b35;
}

.searchTag.Singlehousedanimal {
    color: #000000;
    background-color: #2d90ce;
}

.searchTag.OnTreatment {
    color: #000000;
    background-color: #ff6b35;
}

.searchTag.Donotwater {
    color: #000000;
    background-color: #29a5af;
}

.searchTag.Donotdisturb {
    color: #ffffff;
    background-color: #d00000;
}

.searchTag.Transportrequest {
    color: #ffffff;
    background-color: #3aa159;
}

.searchTag.Specialdiet {
    color: #ffffff;

    background-color: #00b098;
}

.searchTag.Donotfeed {
    color: #000000;
    background-color: #29a5af;
}

.searchTag.Donotfeedwater {
    color: #000000;
    background-color: #29a5af;
}

.searchTag.Specialwater {
    color: #000000;
    background-color: #bc76bf;
}

.heroBoxItem.isOccupied {
	background-color: var(--bg-level-3);
}

.heroBoxRibbon.fullView {
    grid-column-gap: .6em;
    grid-row-gap: 1em;
}

@media (max-width: 560px){
    .click-grid-container.fullView .heroBoxItemContainer {
        margin: 10px;
        height: calc(100% - 20px);
        width: calc(100% - 20px);
        min-width: 60vw;
    }

    .click-grid-container {
        grid-column-gap: 10px;
    }

    .click-grid-container .searchTag {
        margin-bottom: 2px;
        margin-left: 2px;
    }
}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-yellow button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-yellow a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-yellow,
.heroBoxItem.isOccupied.container-bg-yellow {
    background-color: var(--bg-lightest-contrast-yellow);
    border: 1px solid var(--yellow);
    color: var(--text-default);
}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-turquoise button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-turquoise a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-turquoise,
.heroBoxItem.isOccupied.container-bg-turquoise {
    background-color: var(--bg-lightest-contrast-turquoise);
    border: 1px solid var(--turquoise);
    color: var(--text-default);
}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-green button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-green a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-green,
.heroBoxItem.isOccupied.container-bg-green {
    background-color: var(--bg-lightest-contrast-green);
    border: 1px solid var(--green);
    color: var(--text-default);
}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-tan button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-tan a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-tan,
.heroBoxItem.isOccupied.container-bg-tan {
    background-color: var(--bg-light-contrast-tan);
    border: 1px solid var(--tan);
    color: var(--text-default);
}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-blue button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-blue a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-blue,
.heroBoxItem.isOccupied.container-bg-blue {
    background-color: var(--bg-lightest-contrast-blue);
    border: 1px solid var(--blue);
    color: var(--text-default);

}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-red button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-red a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-red,
.heroBoxItem.isOccupied.container-bg-red {
    background-color: var(--bg-lightest-contrast-red);
    border: 1px solid var(--red);
    color: var(--text-default);
}

.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-turquoise button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-turquoise a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-green button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-green a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-tan button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-tan a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-blue button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-blue a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-red button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-red a,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-yellow button,
.click-grid-container.compact .heroBoxItem.isOccupied.container-bg-yellow a {
    border: none;
}


/* ----- compact click grid ----- */

.lam_rack_bulk_health_grid .bComponentQuestion.ui_bCheckBoxGroupComponentClass,
.click-grid-container.compact {
    grid-column-gap: .3em;
    grid-row-gap: .3em;
}

.lam_rack_bulk_health_grid .bComponentQuestion.ui_bCheckBoxGroupComponentClass{
    grid-template-columns: repeat(var(--lams-rack-grid-column-width), 1fr);
}

.lam_rack_bulk_health_grid .ui_bCheckBoxGroupComponentClass .bComponentContainer.ui_bCheckBoxComponent,
.click-grid-container.compact .heroBoxItem {
    border: 1px solid var(--border-dark-contrast);
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
}

.lam_rack_bulk_health_grid .ui_bCheckBoxGroupComponentClass .bComponentContainer.ui_bCheckBoxComponent {
    padding: 1em;
}

.click-grid-container.compact .heroBoxItemContainer {
    margin: .3em;
}

.click-grid-container.compact .heroBoxItemContainer a,
.click-grid-container.compact .heroBoxItemContainer p {
    display: none;
}

.click-grid-container .heroBoxItemContainer .heading {
    font-size: .8em;
    font-weight: 600;
    margin: 0px;
    padding: 0px;
    padding-bottom: .2em;
    width: 100%;
}

.click-grid-container .heroBoxItemContainer .ezToolIconGroup i {
    padding: 0px;
}

.click-grid-container .heroBoxItemContainer .ezToolIconGroup .buttonText,
.click-grid-container .itemName{
    height: 0px;
    width: 0px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
}

.click-grid-container .heroBoxItemContainer .ezToolIconGroup a,
.click-grid-container .heroBoxItemContainer .ezToolIconGroup button {
    display: inline;
    background-color: transparent;
    border: none;
    width: auto;
    min-width: auto;
    min-height: auto;
    height: auto;
    font-size: .7em;
    padding: .6em;
    margin-bottom: 0px;
}

.click-grid-container.compact .moveBox,
.click-grid-container.compact .locked_box {
    font-size: .6em;
    margin: 0em;
    width: 100% !important;
    height: 100%;
}

.lam_rack_bulk_health_grid .ui_bCheckBoxGroupComponentClass .bComponentContainer.ui_bCheckBoxComponent.CageOptionsCheckBoxEmpty,
.click-grid-container.compact .isOccupied {
    background-color: var(--bg-dark-level-1);
    color: var(--text-reverse);
}

.click-grid-container.compact .cage_id {
    display: none;
}

.click-grid-container.compact .isOccupied a,
.click-grid-container.compact .isOccupied button,
.click-grid-container.compact .isOccupied h3 {
    background-color: var(--bg-dark-level-1);
    color: var(--text-reverse);
}

.click-grid-parent button.gridSizeButton {
    background-color: transparent;
}

.click-grid-parent button.gridSizeButton svg {
    fill: var(--primary-color);
}

.click-grid-parent button.gridSizeButton.unselected svg {
    fill: var(--text-default);
}

/* ----- end compact click grid ----- */