@import "fonts-BClFnVG.css";

html,
body {
    height: 100%;
    background-color: #f4f4ee;
}

.header-left {
    display: flex;
    justify-content: left;
    padding: 20px 0px 60px 10px
}

.header-right {
    display: flex;
    justify-content: right;
    padding: 20px 10px 60px 0px;
}

table {
    border: 1px solid lightgray;
    background-color: white;
    border-radius: 5px;
    border-collapse: separate;
}

img {
    width: 300px;
    height: auto;
    max-width: 100%;
}

h1 {
    padding: 25px;
    border: 0;
    margin: 0;
    align-self: center;
    font-size: 50px;
}

textarea {
    border: none;
    background-color: transparent;
    resize: none;
    height: 30vh;
    outline: none;
}

.box {
    border: 1px solid lightgray;
    border-radius: 5px;
    display: block;
    height: 30vh;
    overflow: hidden;
    padding: 0px;
}

.box-text {
    padding-top: 5%;
    text-align: center;
    background-color: white;
}

.box-input {
    border: 1px solid lightgray;
    border-radius: 5px;
}

.form-control {
    border: none;
}

.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.left {
    padding-left: 5px;
    text-align: left;
}

.right {
    padding-right: 5px;
    text-align: right;
    font-weight: bold;
}

.translate-text {
    font-family:
        'Noto Sans',
        'Noto Sans Devanagari',
        'Noto Sans Bengali',
        'Noto Sans Gujarati',
        'Noto Sans Tamil',
        'Noto Sans Telugu',
        'Noto Sans Kannada',
        'Noto Sans Malayalam',
        'Noto Sans Gurmukhi',
        'Noto Sans Myanmar',
        'Noto Sans Arabic',
        system-ui,
        sans-serif;
}

#formality {
    border: 0px;
}

#sLang {
    border: 0px;
}

#tLang {
    border: 0px;
}

/* Multi-column dropdown styles for language selection */
.dropdown-menu-languages {
    max-height: 70vh;
    overflow-y: auto;
    display: none;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 0;
    min-width: 600px;
    max-width: 95vw;
}

/* Show dropdown when it has the show class from Bootstrap */
.dropdown-menu-languages.show {
    display: grid;
}

/* Adjust columns based on viewport height */
@media (min-height: 800px) {
    .dropdown-menu-languages {
        grid-template-columns: 1fr 1fr;
        max-height: 60vh;
    }
}

@media (min-height: 1000px) {
    .dropdown-menu-languages {
        grid-template-columns: 1fr 1fr;
        max-height: 65vh;
    }
}

@media (min-height: 1200px) {
    .dropdown-menu-languages {
        grid-template-columns: 1fr 1fr 1fr;
        max-height: 70vh;
    }
}

@media (max-height: 700px) and (min-height: 600px) {
    .dropdown-menu-languages {
        grid-template-columns: 1fr;
        max-height: 50vh;
    }
}

/* Ensure dropdown items have proper spacing and don't overlap */
.dropdown-menu-languages .dropdown-item {
    white-space: normal;
    overflow: visible;
    padding: 0.25rem 1rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}