.company-logo {
    max-width: 200px;
    height: auto;
}

.text-brand {
    color: #2E529F
}

pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.data-section h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

#deviceData .card {
    transition: all 0.3s ease;
}

#devicesData pre {
    max-height: 200px;
    overflow-y: auto;
}

.custom-container {
    width: 95%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

@media (orientation: landscape) {
    .custom-container {
        width: 95%;
    }
}

#logoContainer {
    position: relative;
}

/* Place client logo on the left while keeping company logo centered */
#logoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo-left {
    position: absolute;
    left: 10px;
    max-height: 60px;
}

.company-logo {
    max-width: 200px;
    height: auto;
}

#expandBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background-color: transparent;
    border: none;
    color: #6c757d; /* Light grey color */
}

#expandBtn:hover {
    color: #272a2c; /* Darker grey on hover for better UX */
}

@media (orientation: portrait) {
    #deviceData h2 {
        text-align: center;
    }
}

#borderless-card {
    border: none;
}

.text-light-blue {
color: #2196F3;
}