.connection-tile {
    width: 135px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: $connection-tile-bg;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.19);
    border-radius: 8px;
    & .connection-title {
        text-align: center;
        color: $connection-tile-title;
        opacity: 0.7;
        font-size: 15px;
        font-weight: 100;
    }
    & .connection-button {
        cursor: pointer;
        color: gray;
        font-size: 40px;
        min-height: 56.8px;
        &.connected {
            color: #17A34A;
        }
        &.connecting {
            color: $connection-tile-title;
        }
        &:hover {
            opacity: 0.8;
        }
    }

    & .sub-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 11px;
    }

    & .overlay-button {
        color: #ffd602;
        font-size: 50px;
        &.connected {
            color: #17A34A;
        }
    }
}

.connection-panel-modal .modal-dialog {
    width: 625px;
}

.connection-icon {
    position: relative;
    color: white;
    font-size: 16px;
    .status-bubble {
        position: absolute;
        bottom: -4px;
        right: -8px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        border: 2px solid $connection-status-bubble-border;
        font-size: 8px;
        color: $connection-status-bubble-border;
        display: flex;
        justify-content: center;
        align-items: center;
        &.connected {
            background: lightgreen;
        }
        &.disconnected {
            background: grey;
        }
        &.warning {
            background: gold;
        }
    }
}