/* Common styles for the sidebar */
.sidebar {
    height: 100vh;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    box-shadow: 0 4px 6px hsla(0, 0%, 0%, .1);
    margin-left: 50px;
}
/* Styles when the sidebar becomes visible */
.sidebar-visible {
    transform: translateX(0);
}
.example-pair-scrollable {
    overflow-y: auto;
    max-height: calc(100% - 180px); /* Adjust this value based on your layout */
}
.form-control {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.output-field {
    font-style: italic;
    color: grey;
}
.bottom-margin {
    margin-bottom: 20px;
}


#translationForm {
    padding-top: 1px;
}
h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    font-style: italic;
    color: #94999e;
}
h5 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* Specifies semibold weight */
    font-style: normal;
    font-size: 20px;
}
h4 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* Specifies semibold weight */
    font-style: normal;
    font-size: 22px;
}
.form-label {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}
.form-select {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 17px;
}
.lang-select {
    align-items: baseline;
}
.support-text {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
}
.UID-label {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
    font-weight: 600;
}
.UID {
    font-family: 'Roboto Mono', monospace;
    line-height: 1.8;
    font-weight: 500;
}
.end-padding {
    padding-bottom: 50px;
}

.outset-element {
    box-shadow: inset 0 1px 0 hsl(224, 84% 74%);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);}
.deeper-outset-element {
    box-shadow: inset 0 2px 0 hsl(224, 84% 74%);
    box-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);
}

/* Styles for the logo container */
.logo-container {
    position: absolute; /* Position it absolutely within the flex container */
    top: -3px; /* Adjust as needed to align with "Welcome to translateConext!" */
    left: 30px; /* Adjust based on desired distance from left edge */
    min-width: 200px; /* Adjust based on your logo size */
    max-width: 200px; /* Adjust based on your logo size */
}
.voc-logo-container {
    position: absolute; /* Position it absolutely within the flex container */
    top: 20px; /* Adjust as needed to align with "Vocabulary List" */
    left: 80px; /* Adjust based on desired distance from left edge */
    min-width: 200px; /* Adjust based on your logo size */
    max-width: 200px; /* Adjust based on your logo size */
}


.logo {
    max-width: 80%; /* Ensure the logo scales within the container */
    height: auto; /* Maintain aspect ratio */
}
.logo-voc {
    max-width: 40%; /* Ensure the logo scales within the container */
    height: auto; /* Maintain aspect ratio */
}
.logo-examp {
    max-width: 45%; /* Ensure the logo scales within the container */
    height: auto; /* Maintain aspect ratio */
}
.logo-support {
    max-width: 40%; /* Ensure the logo scales within the container */
    height: auto; /* Maintain aspect ratio */
}

.btn {
    border-radius: 20px;
}
.btn-primary, .btn-danger {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.05em;
}
.btn-secondary {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 18px;
    margin-left: 10px;;
}
.btn-success {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.05em;
    border-radius: 20px;
    background-color: #00cc00;
    border-color: #00cc00;
}
.btn-success.free-credit-btn {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.05em;
}
.btn-outline-success {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.05em;
    color:#00cc00;
    border-color: #00cc00;
    border-width: 2px;
    border-radius: 20px;
}
.auth-btn {
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Ensure text is centered (useful for fallback) */
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    font-style: normal;
    letter-spacing: 0.05em;
    margin-left: 2px;
    margin-right: 10px;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: hsl(0, 0%, 99%);
    /*background-color: hsl(0, 0%, 90%);*/
    color: rgba(18, 18, 19, 0.932);
    /*box-shadow: inset 0 2px 0 hsl(224, 84% 74%);*/
    /*box-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);*/
}

/* Styles specifically for the navbar logo */
.navbar-logo {
    max-height: 60px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 3px; /* space between logo and title */
}
.sidebar-icon {
    max-height: 30px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 15px; /* space between logo and title */
    vertical-align: middle; /* align it with the text */
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(10deg) brightness(105%) contrast(95%);
}
.sidebar-create-icon {
    max-height: 35px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 4px; /* space between logo and title */
    vertical-align: middle; /* align it with the text */
    position: relative;
    top: -4px;
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(10deg) brightness(105%) contrast(95%);
}
.sidebar-icon-voc {
    max-height: 25px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 10px; /* space between logo and title */
    margin-left: 2px;
    vertical-align: middle; /* align it with the text */
    position: relative; /* add this line */
    top: -2px; /* adjust this value as needed to move the icon upwards */
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(55deg) brightness(100%) contrast(95%);
}
.sidebar-icon-logo {
    max-height: 42px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: -2px; /* space between logo and title */
    margin-left: -7px;
    vertical-align: middle; /* align it with the text */
    position: relative; /* add this line */
    top: -2px; /* adjust this value as needed to move the icon upwards */
}
.sidebar-icon-support {
    max-height: 24px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 15px; /* space between logo and title */
    vertical-align: middle; /* align it with the text */
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(10deg) brightness(105%) contrast(95%);
}
.delete-icon {
    max-height: 25px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 3px; /* space between logo and title */
    vertical-align: middle; /* align it with the text */
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(10deg) brightness(105%) contrast(95%);
    position: relative; /* add this line */
    top: -2px; /* adjust this value as needed to move the icon upwards */
}
.delete-icon:hover {
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(55deg) brightness(100%) contrast(95%);
}
.edit-icon {
    max-height: 18px; /* adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-right: 3px; /* space between logo and title */
    vertical-align: middle; /* align it with the text */
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(10deg) brightness(105%) contrast(95%);
    position: relative; /* add this line */
    top: -2px; /* adjust this value as needed to move the icon upwards */
}
.edit-icon:hover {
    filter: invert(83%) sepia(2%) saturate(0%) hue-rotate(55deg) brightness(100%) contrast(95%);
}
.nav-link {
    flex-grow: 1; /* Allows the link to expand and fill space */
    white-space: nowrap; /* Prevents the text from wrapping */
    overflow: hidden; /* Hides overflow */
    text-overflow: ellipsis; /* Adds an ellipsis for overflow text */
    margin-right: 10px; /* Adds some space between the text and the delete button */
}
.delete-btn {
    padding: 0; /* Reduces padding inside the button to decrease its size */
}
.edit-btn {
    padding: 0; /* Reduces padding inside the button to decrease its size */
}

/* Success icons */
.success_icon {
    height: 25px;
    margin-right: 8px;
}
.saved-success-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: italic;
    color: #00e600;
}

/* Custom logo visibility class */
.custom-logo-visible {
    display: none !important; /* Hide by default */
}
@media (min-width: 350px) and (max-width: 767px) {
    #translation_input_field,
    #translation_output_field {
        min-width: 300px; /* Adjust this value based on your desired wrapping point */
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #translation_input_field,
    #translation_output_field {
        min-width: 557px; /* Adjust this value based on your desired wrapping point */
    }
}

/* Styles for screens larger than 1399px */
@media (min-width: 1400px) { /* Adjust breakpoint as needed */
    .custom-show-large { /* Previously d-none d-lg-block */
        display: block !important;
    }
    .custom-hide-large { /* Previously d-lg-none */
        display: none !important;
    }
    .custom-logo-visible {
        display: flex !important; /* Show as flex container on large screens */
    }
    .sidebar {
        transform: translateX(0);
        width: 330px;
    }
    .navbar {
        display: none !important;
    }
    .container.mt-4.flex-grow-1 {
        margin-left: 190px; /* Match the min-width and max-width of the logo container */
    }
    .nav-item {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-style: italic;
        font-size: 16px;
        display: flex; /* Aligns children (link and button) in a row */
        align-items: center;
    }
    .nav-item-pair {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        display: flex; /* Aligns children (link and button) in a row */
        align-items: center;
    }
    .modal-bottom {
        align-items: center;
    }
    .tools-comment {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-style: italic;
        font-size: 16px;
        display: flex; /* Aligns children (link and button) in a row */
        align-items: center;
        color: #55a4ff;
        padding-left: 13px;
    }
    
   
}
/* Authentication element styles */
.modal-social-divider {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
.sidebar-bottom-section {
    margin-left: 10px;
}
.free-credit-container {
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 3px;
    margin-left: -10px;
    /*background-color: #f8f9fa; /* Slightly brighter than sidebar background */
    /*background-color: #fdfeff;*/
    /*background-color: hsl(200, 10%, 94%);*/
    /*box-shadow: 0 2px 0 hsla(0, 0%, 100%, .15);*/
    /*box-shadow: inset 0 2px 2px hsla(0, 0%, 0%, 0.1);*/
}

.green-dot {
    height: 10px;
    width: 10px;
    background-color: #00e600; /* Green color */
    border-radius: 50%;
    display: inline-block;
    margin-left: 3px;
    margin-right: 5px;
}
.free-credit-summary .green-dot.logged-out,
.free-credit-summary-small .green-dot.logged-out {
    background-color: #0d6efd;/* Your specific styles here */
}
.free-credit-summary .green-dot.logged-in.no-credit,
.free-credit-summary-small .green-dot.logged-in.no-credit {
    background-color: #ff6a6a;/* Your specific styles here */
}

.free-credit-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: italic;
    color: #00e600;
}
.free-credit-text.logged-out {
    color: #0d6efd;/* Your specific styles here */
}
.free-credit-text.no-credit, .negative-credit {
    color: #ff6a6a;/* Your specific styles here */
}

.free-credit-details {
    margin-top: 10px;
    background-color: hsl(200, 10%, 94%);
    padding: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    max-height: 0px; /* Start with a max-height of 0 */
}
.free-credit-details.expand-section {
    padding: 15px;
    max-height: 700px; /* Adjust as needed */
    /* You can add other styling as needed */
}
.remaining-credit-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 22px;
}
.remaining-credit-text.logged-out {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
}
.prediction-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-style: italic;
    color: #89929b;
}

.credit-amount:not(.negative-credit) {
    color: #00cc00;
}
.credit-amount, .translation-cost {
    font-weight: bold;
}

.support-section {
    padding-top: 10px;
    margin-right: 18px;
    /*padding-bottom: 10px;*/
    /*border-top: 1px solid #dee2e6; /* A subtle line to separate from other content */
}

.support-link {
    text-decoration: none;
    color: #89929b; /* Adjust color to fit your theme */
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-left: -10px;
}

.support-link img.sidebar-icon {
    margin-right: 8px; /* Space between icon and text */
}


.free-credit-btn {
    width: 100%;
    margin-top: 10px;
    /*background-color: hsla(0, 0%, 100%, .15);*/
}

.text-danger {
    display: none;
    margin-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
}
.text-success {
    display: none;
    margin-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
}

.logged-in-text {
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    margin-right: 10px;
}

.reset-message-1, .reset-message-2 {
    text-decoration: underline;
}
.modal-bottom .btn-secondary {
    margin-right: 10px;
}
/* New styles for the dropdown menu */
/* Styles for screens up to 1399px */
@media (max-width: 1399px) {
    .custom-show-large {
        display: none !important;
    }
    .custom-hide-large {
        display: block !important;
    }
    .navbar-collapse {
        position: absolute;
        top: calc(100% - 10px);
        right: 10px;
        min-width: 150px; /* Minimum width of the dropdown menu */
        max-width: 450px;
        background-color: #ffffff;
        box-shadow: 0 4px 6px hsla(0, 0%, 0%, .1);
        z-index: 1000; /* Ensure it appears above other content */
        overflow-y: auto;
    }
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Distribute space between items */
        padding-top: 20px; /* Increase top padding */
        padding-bottom: 20px; /* Increase bottom padding */
    }
    .navbar-brand {
        flex-grow: 1;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-style: italic;
        font-size: 20px;
        color: #94999e;
        white-space: normal; /* Add this line */
        line-height: 1.2; /* Adjust line height to manage spacing between lines */
        padding: 0 15px; /* Ensure text doesn't touch the icons */
        max-width: 65%; /* Adjust based on your preference */
        margin: 0 auto; /* Centers the navbar-brand in the available space */
        overflow: hidden;
    }
    h5 {
        font-size: 16px;
    }
    .form-label {
        font-size: 15px;
    }
    .form-select {
        font-size: 16px;
    }
    /* Styles for the dropdown menu entries */
    .navbar-nav .nav-link {
    padding-left: 10px;
    }
    .nav-item {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-style: italic;
        font-size: 16px;
        padding-right: 10px;
        display: flex; /* Aligns children (link and button) in a row */
        align-items: center;
        color: #495057;
    }
    .nav-item-pair {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding-right: 10px;
        display: flex; /* Aligns children (link and button) in a row */
        align-items: center;
        color: #495057;
    }
    .tools-comment {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        padding-right: 10px;
        display: flex; /* Aligns children (link and button) in a row */
        align-items: center;
        color: #94999e;
    }
    #navbar-comment {
        max-width: 290px;
        padding: 9px;
        padding-left: 13px;
    }
    #navbarSupportLink {
        color: #94999e;
    }
    .modal-bottom .btn {
        align-self: start;
    }
    @media (prefers-color-scheme: dark) {
        .nav-item {
            color: #ADB5BD;
        }
    
    }
    .logo-voc-small-screens {
        /*position: absolute; /* Absolute positioning */
        /*left: 15px; /* Align with the main content padding or as needed */
        /*top: 50%; /* Center vertically */
        top: 100%;
        /*transform: translateY(-50%); /* Adjust vertical centering */
        /*max-width: 35px; /* Adjust size as needed, not sure if 35 or 40 */
        max-width: 30px; /* Adjust size as needed */
        height: auto;  /* Maintain aspect ratio */
        margin-left: 12px; /* wasn't part or "Logo and Title Row for Small Screens" */
    }
    .logo-examp-small-screens {
        top: 100%;
        max-width: 35px; /* Adjust size as needed */
        height: auto;  /* Maintain aspect ratio */
        margin-left: 12px; /* wasn't part or "Logo and Title Row for Small Screens" */
    }
    .page-title-small {
        text-align: center; /* Center the title text */
        width: 100%; /* Allow the title to be centered in the whole row */
        padding-left: 50px; /* Adjust so the text doesn't overlap the icon */
        padding-right: 50px; /* Symmetric padding for aesthetic balance */
        font-size: 20px; /* Adjust the size as needed */
    }

    /*Styles for navbar auth elements*/
    .additional-container {
        background-color: white; /* Same as navbar background */
        text-align: right;
        padding: 10px;
    }

    .free-credit-text {
        margin-right: 8px;
    }

    .free-credit-container-small {
        /*display: inline-block;*/
        cursor: pointer;
    }

    .free-credit-summary-small {
        /* Style similar to large screen */
        margin-top: 5px;
    }

    .free-credit-details-small {
        display: inline-block;
        text-align: left;
        margin-top: 25px;
        background-color: #f8f9fa;
        padding: 0px;
        border-radius: 10px;
        transition: max-height 0.3s ease-out;
        overflow: hidden;
        max-height: 0px; /* Start with a max-height of 0 */
        max-width: 422.45px;
    }
    .free-credit-details-small.expand-section {
        padding: 15px;
        max-height: 900px; /* Adjust as needed */
        /* You can add other styling as needed */
    }

    .remaining-credit-text {
        font-size: 18px;
    }

    .auth-btn-container-small {
        background-color: #f8f9fa;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -22px;
        padding-top: 5px;
        padding-bottom: 8px;
        padding: 15px;
        box-shadow: 0 4px 6px hsla(0, 0%, 0%, .1);
    }

    .auth-btn {
        /* Style similar to large screen */
        background-color: white;
    }

    .logged-in-text {
        font-size: 15px;
        font-style: normal;
    }
}
/*
@media (prefers-color-scheme: dark) {
    .sidebar-icon {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    .sidebar-icon-voc {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    .sidebar-create-icon {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    .logo-voc-small-screens {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    .logo-examp-small-screens {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    @media (max-width: 1399px) {
        .sidebar-icon-support {
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }
    }
}*/