body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

#root {
    padding: 0;
}

.hostNotReachable {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    position: fixed;

    top: 50%;
    left: 50%;
    translate: -50% -50%;

    width: 80vw;
}

.containerHostNotReachable {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    background-color: #f0f0f0;
    border-radius: 0px;
    border: #888 solid 1px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    text-align: center;
    overflow: hidden;
}

.notRunningInTeams {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    position: fixed;

    top: 50%;
    left: 50%;
    translate: -50% -50%;

    width: 80vw;
}

.containerNotRunningInTeams {
    /* display: flex; */
    /* flex: auto; */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    background-color: #f0f0f0;
    border-radius: 0px;
    border: #888 solid 1px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    text-align: center;
    overflow: hidden;
}

.noHostsAvailable {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    position: fixed;

    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.containerNoHostsAvailable {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    background-color: #f0f0f0;
    border-radius: 0px;
    border: #888 solid 1px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    text-align: center;
}


.message {
    padding: 0.3rem;
    font-size: clamp(1rem, 1.5vw, 2rem);
    color: #333;
}

.extrainfo {
    padding: 0.3rem;
    font-size: clamp(1rem, 1.5vw, 2rem);
    color: #333;
    margin-top: 0.5rem;
    /* specify spaces between elements */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.columnFlex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.host-list-item-template {}


.host-list-item-template-content {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    gap: 0.6rem;
}

.column {
    display: flex;
    flex-direction: column;
}

.columnHostItem {
    display: flex;
    flex: auto;
    text-align: start;
    gap: 0.1rem;
    width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fieldlabel {
    /* specify the width in percentages */
    width: 25%;
    min-width: 100px;
    /* background-color: aqua; */
    /* max-width: 200px; */
    font-weight: bold;
    color: #202326;
    text-align: left;
    margin-right: 0.5rem;
    align-items: start;
}

.fieldvalue {
    color: #F39746;
}

.rowFlex {
    display: flex;
    flex-direction: row;
}

.m42Logo {
    width: 100px;
    height: auto;
}

.hideOnSmallerDevices {
    @media (max-width: 600px) {
        display: none;
    }
}

.defaultButton {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: clamp(1rem, 1vw, 1.5rem);
    font-weight: bold;
    color: #F39746;
    background-color: #202326;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    /* Teams primary color */
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.hostSelection {
    display: none
}

.hostLoading {
    display: none;
    flex: flex;
    justify-content: center;
    align-items: center;
    position: fixed;

    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.host-list {
    margin-top: 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 67vh;
    overflow-y: scroll;
}

.host-list-item {
    cursor: pointer;
    padding: 0.6rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 3rem;
    background-color: #fdfdf9;
    transition: background-color 0.6s ease;
    list-style-type: none;
    font-size: large;

    .host-list-item-template-icon {
        width: 32px;
        height: 32px;
        background-image: url('images/data_gateway.svg');
        background-size: cover;
        background-position: center;
        transition: 0.6s ease;
    }

    /* hover but not class disabled */
    &:hover:not(.disabled) {
        background-color: #e0e0e0;

        .host-list-item-template-icon {
            background-image: url('images/data_gateway enabled.svg');
            transition: 0.6s ease;
        }
    }
}

.refreshIcon {
    filter: brightness(0) saturate(100%) invert(81%) sepia(52%) saturate(3429%) hue-rotate(329deg) brightness(102%) contrast(91%);
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.onlinestatus {
    flex: 0;
    justify-content: center;
    font-size: smaller;
}

.reacheable {
    color: #2D863D;
}

.unreacheable {
    color: #888;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.spinner {
    width: 32px;
    height: 32px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}