body {

    font-family: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;

    background-color: #f8f9fa;

}



.card-body {

    padding: 40px 32px;

}



.dictionary-preview {

    font-family: 'Times New Roman', Times, serif;

    background-color: #fff;

    min-height: 600px;

    line-height: 1.6;

}



.entry-header {

    font-size: 1.5rem;

    font-weight: bold;

    color: #800000;

}



.entry-iast {

    font-style: italic;

    color: #555;

}



.entry-pos,

.entry-gender {

    font-size: 0.9rem;

    color: #666;

}



.definition-block,

.sense-block,

.compound-block,

.family-block {

    margin-bottom: 1.5rem;

    border-left: 3px solid #ddd;

    padding-left: 1rem;

}



.sense-category,

.compound-title,

.family-title {

    font-weight: bold;

    margin-bottom: 0.5rem;

}



.dynamic-block {

    border: 1px solid #ddd;

    border-radius: 0.25rem;

    padding: 1rem;

    margin-bottom: 1rem;

    background-color: #f9f9f9;

    position: relative;

}



.remove-btn {

    position: absolute;

    top: 0.5rem;

    right: 0.5rem;

}



.language-tabs .nav-tabs {

    border-bottom: 1px solid #dee2e6;

}



.language-tabs .nav-link {

    margin-bottom: -1px;

    border: 1px solid transparent;

    border-top-left-radius: 0.25rem;

    border-top-right-radius: 0.25rem;

}



.language-tabs .nav-link.active {

    color: #495057;

    background-color: #fff;

    border-color: #dee2e6 #dee2e6 #fff;

}



.tab-content {

    border: 1px solid #dee2e6;

    border-top: none;

    padding: 1rem;

    border-bottom-right-radius: 0.25rem;

    border-bottom-left-radius: 0.25rem;

}



.notes-section {

    font-size: 0.9rem;

    color: #555;

    margin-top: 1.5rem;

    border-top: 1px solid #ddd;

    padding-top: 1rem;

}



/* Make the preview container sticky on scroll */

@media (min-width: 992px) {

    #preview-container {

        position: sticky;

        top: 0;

        height: 100vh;

        overflow-y: auto;

    }



    #form-container {

        height: 100vh;

        overflow-y: auto;

    }

}



/* Styling for preview section */

.dictionary-entry {

    font-family: 'Times New Roman', Times, serif;

    line-height: 1.5;

}



.entry-heading {

    font-weight: bold;

    display: inline-block;

    color: #800000;

    margin-right: 5px;

}



.entry-pronunciation {

    font-style: italic;

    display: inline-block;

}



.entry-pos-gender {

    color: #555;

    font-style: italic;

}



/* Definition */

.defination-block {

    padding: 24px 32px;

    border: 0;

    position: relative;

}



.defination-block .remove-btn {

    top: 24px;

    right: 32px;

}



.defination-block h5 {

    margin-bottom: 1rem;

}



.defination-block .form-label {

    font-size: 0.875rem;

}



.defination-block .tab-content {

    background: #fff;

}



.definition-content {

    margin-top: 10px;

    margin-bottom: 15px;

}



/* Compound */

.compound-block {

    padding: 24px 32px;

    border: 0;

    position: relative;

}



.compound-block .remove-btn {

    top: 24px;

    right: 32px;

}



.compound-block h5 {

    margin-bottom: 1rem;

}



.compound-block .form-label {

    font-size: 0.875rem;

}



.compound-block .tab-content {

    background: #fff;

}



/* Family */

.family-block {

    padding: 24px 32px;

    border: 0;

    position: relative;

}



.family-block .remove-btn {

    top: 24px;

    right: 32px;

}



.family-block h5 {

    margin-bottom: 1rem;

}



.family-block .form-label {

    font-size: 0.875rem;

}



.family-block .tab-content {

    background: #fff;

}



.sense-category-preview {

    font-weight: bold;

    font-style: italic;

}



.compound-title-preview,

.family-title-preview {

    font-weight: bold;

    color: #800000;

}



.lang-label {

    font-weight: bold;

    color: #495057;

    border-bottom: 1px solid #e9ecef;

    margin-bottom: 5px;

    font-size: 0.9em;

    display: inline-block;

}



.sense-item,

.compound-item,

.family-item {

    margin-bottom: 15px;

    padding-left: 15px;

    border-left: 3px solid #e9ecef;

}



.definition-lang {

    margin-bottom: 8px;

}



/* Style for language badge */

.lang-badge {

    display: inline-block;

    padding: 0.25em 0.6em;

    font-size: 0.75em;

    font-weight: 500;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: 0.25rem;

    margin-right: 0.25rem;

    color: #fff;

}



.lang-badge-vi {

    background-color: #28a745;

}



.lang-badge-ja {

    background-color: #dc3545;

}



.lang-badge-en {

    background-color: #007bff;

}



/* Custom badges for other languages can be added as needed */

.dictionary-entry {

    margin-bottom: 24px;

}



.dictionary-entry .iast-entry {

    color: #1771D4;

    font-size: 40px;

    line-height: 1.2;

}



.dictionary-entry .word-devanagari {

    font-size: 17px;

    line-height: 1.5;

    display: flex;

    align-items: center;

    gap: 4px;

    color: #D78732;

}



.dictionary-entry .label-word {

    color: #98A2B3;

}



.card-language+.card-language {

    margin-top: 32px;

}



.card-language .toggle-title {

    background: #D8D2C466;

    color: #1D2939;

    display: flex;

    align-items: center;

    width: 100%;

    text-decoration: none;

    padding: 10px 16px;

    line-height: 1.4;

    font-size: 1.125rem;

    font-weight: 700;

}



.card-language .toggle-title::after {

    content: "\F286";

    font-family: bootstrap-icons !important;

    display: block;

    margin-left: auto;

    font-size: 0.8375rem;

}



.card-language .toggle-title.collapsed::after {

    content: "\F282";

}



.card-language .content-language {

    margin-top: 12px;

}



.card-language .label-preview {

    color: #667085;

    font-size: 0.8375rem;

    display: flex;

    align-items: center;

    text-transform: uppercase;

    margin-bottom: 8px;

}



.card-language .label-preview:before {

    content: "\F287";

    font-family: bootstrap-icons !important;

    font-size: 5px;

    opacity: 0.25;

    margin-right: 0.25rem;

}



.card-language .content-item {

    line-height: 1.5;

}





.card-language .content-item .gender {

    color: #1771D4;

    margin-right: 0.5rem;

}



.card-language .content-item .pos {

    color: #98A2B3;

}



.card-language .content-item .word {

    color: #995009;

    font-weight: 700;

    margin-right: 0.325rem;

    display: inline-flex;

    align-items: center;

    gap: 5px;

}



.card-language .content-item .iast {

    font-weight: 400;

}