.errormsg {
    color: red!important;
}
.invisible {
    visibility: hidden!important;
}
.hidden {
    display: none!important;
}

.main_content.noLeftSideBar {
    margin: 1rem 0;
    min-height: 500px;
    border:2px solid lightblue!important;
    border-radius: 0.5rem;
    overflow: hidden;

    #react_content {
        padding: 0;
    }
}
#react_content {
    height: 100%;
    width: 100%;
    padding: 1rem;
}

/* Standard button styling (colours, font sizes, etc.) */
.standard_button {
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    &.blue {
        background-color: var(--polaris_blue);
        border-color: transparent;
        color: white;
        &:hover {
            background-color: var(--polaris_dark_blue);
        }
        &:disabled {
            color: white;
        }
    }
    &.green {
        background-color: var(--polaris_green);
        border-color: transparent;
        color: white;
        &:hover {
            background-color: var(--polaris_dark_green);
        }
        &:disabled {
            color: white;
        }
    }
    &.grey, &.gray {
        background-color: var(--button_grey);
        border-color: darkgrey;
        color: #333;
        &:hover {
            background-color: var(--button_grey_hover);
        }
    }
    &.red {
        background-color: #d50000;
        border-color: transparent;
        color: white;
        &:hover {
            background-color: #ae0000;
        }
    }
    &.small {
        font-size: 12px;
    }
    &.tall {
        height: 4rem;
    }
    &:disabled {
        color: grey;
        cursor: not-allowed;
    }
}

/* The "Remove" / "Remove All" buttons. Several panels show the pair stacked, where sizing to the label
   leaves "Remove" visibly narrower than "Remove All" beside it. 8.5rem is the wider of the two rendered
   sizes, so the smaller variant (`.small`, 12px) matches the full-size one rather than sitting narrower
   in the next panel along. This is a floor, not a fixed width, so a longer label in another language
   still fits. */
.RemoveButton {
    min-width: 8.5rem;
}

/* POL-12038 - Standardized action button styling */
.TableActionsContainer {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.5rem;

    i {
        font-size: 2rem;
        cursor: pointer;
    }
    i:hover {
        filter: brightness(80%);
    }

}
.ReactRoot, .MuiModal-root, .react-modal {
    i.fa-share-alt,
    i.fa-table,
    i.fa-list-alt,
    i.fa-pencil-square,
    i.fa-envelope,
    i.fa-eye {
        color: var(--polaris_blue);
    }

    i.fa-download.disabled,
    i.fa-pencil-square.disabled {
        pointer-events: none;
        opacity: 0.5; /* optional for visual feedback */
        cursor: default;
    }

    i.fa-file-text,
    i.fa-save {
        color: var(--polaris_orange);
    }

    i.fa-map-marker-alt{
        color:#008080;
    }

    i.fa-download{
        color:#1e88e5;
    }

    i.fa-unlink,
    i.fa-eye-slash,
    i.fa-times,
    i.fa-trash{
        color:#d50000;
    }

    i.fa-bars{
        color:#000000;
    }

    i.fa-star {
        color:darkgoldenrod;
    }

    i.fa-link {
        color:blue;
    }

    i.fa-tag,
    i.fa-tags {
        color: var(--polaris_green);
    }
}

.TwoColumnFlexLayout {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    > * {
        flex: 1 1 50%;
        /* For some reason these min height/width attributes are required to make flex-basis work properly */
        min-height: 1px;
        min-width: 1px;
    }
}
@media screen and (max-width: 1200px) {
    #react_content {
        min-height: max-content;
    }
    .TwoColumnFlexLayout {
        flex-direction: column;
    }
}

.draggable {
    cursor: grab;
}
.DragOverlay {
    opacity: 0.6;
    background-color: gainsboro;
    border: 1px solid gray;
    border-radius: 0.25rem;
    padding: 0.25rem;
    width: max-content;
    cursor: grab;
}