.form-group {
    display: flex;
    flex-direction: column;
    padding-bottom: 0px;
}

label {
    margin-bottom: 5px;
}

input[type="text"] {
    margin-bottom: 10px;
    padding: 5px;
    font-size: 16px;
}

input[type="submit"] {
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
}


.inputLabel {
    display: inline-block;
    padding-top: 30px;
    padding-bottom: 10px;
}


.queryBoxStyle {
    font-family: 'Raleway';
    width: 98%;
    border: 1px;
}

.btnStyle {
    height: 28px;
    width: 57px;
    text-align: center;
}


.all-input {
    padding: 5px;
    background-color: white;
    border: 1px solid #C0C0C0;
    border-radius: 3px;
}

.btnWrap {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: space-evenly; /* Space between the left and right buttons */
    width: 100%; /* Ensure it takes the full width */
    padding: 5px; /* Add some padding for spacing */
    box-sizing: border-box; /* Include padding and border in element's total width */
}

.left-button {
    margin-right: auto; /* Push the button to the left */
}

.right-buttons {
    display: flex; /* Flexbox for the group of right-aligned buttons */
    gap: 10px; /* Add some spacing between the right buttons */
    margin-left: auto; /* Push the container to the right */
}





.imagecontainer_ {
    margin-left: auto;
    margin-right: 0;
}

.img_ {
    width: 85%;
    height: auto;
    padding-top: 0px;
    padding-left: 0px;
    float: left;
}


.imagecontainer {
    display: flex;
    align-items: center; /* Vertically center the contents */
    justify-content: center; /* Horizontally center the contents */
    height: 100vh; /* Make the container full height of the viewport */
}

.img {
    width: 85%; /* Adjust width as needed */
    height: auto; /* Maintain the aspect ratio */
    max-height: 80%; /* Optional: Limit the image size */
}



/* Drop down menu css */
/* Drop down menu css */
.menu-container {
    position: absolute;
    top: 10px;
    right: 10px;
}

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 9999; /* Highest priority */
}

.dropbtn {
    background-color: #009ccb;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 9999; /* Highest priority */
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: rgb(240, 240, 240);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    box-shadow: none; /* Remove shadow for simplicity on smaller screens */
    border: 1px solid #ccc; /* Example border */
    border-radius: 3px; /* Optional rounded corners */
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #2980B9;
}


.highlight-box {
    font-size: 10px;
    background-color: #f0f0f0; /* Example background color */
    border: 1px solid #ccc; /* Example border */
    border-radius: 4px; /* Optional rounded corners */
    text-align: center; /* Center the text within the button */
    padding: 10px; /* Padding inside the button */
    cursor: pointer; /* Show pointer cursor on hover */
}

    .highlight-box:hover {
        background-color: lightgrey; /* Highlight color */
    }

.saveChanges-box {
    color: white;
    width: 70px;
    background-color: dodgerblue;
    display: block;
    font-size: 10px;
    border: 1px solid #ccc; /* Example border */
    border-radius: 4px; /* Optional rounded corners */
    text-align: center; /* Center the text within the button */
    padding: 10px; /* Padding inside the button */
    cursor: pointer; /* Show pointer cursor on hover */
}

    .saveChanges-box:hover {
        background-color: #187bcd; /* Highlight color */
    }


.signin_register_dialog {
    width: 100%;
}

.signInForm {
    width: 200px;
}

.submit-like-button {
    position: relative; /* Positioning for tooltip placement */
    background-color: #f0f0f0; /* Default button background color */
    border: 1px solid #ccc; /* Default button border */
    border-radius: 4px; /* Default rounded corners */
    padding: 2px 4px; /* Padding around the circle */
    display: flex; /* Flexbox to center the circle */
    justify-content: center; /* Center the circle horizontally */
    align-items: center; /* Center the circle vertically */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* Remove default focus outline */
    font-size: 12px; /* Default font size */
    transition: background-color 0.2s, border-color 0.2s; /* Smooth transition for hover effects */
}

    .submit-like-button:hover {
        background-color: lightgrey; /* Hover background color */
        border-color: darkgray; /* Hover border color */
    }

.mobile-t-box-container {
    background-color: rgb(231, 231, 231);
    display: none;
}

.circle {
    width: 10px; /* Width of the circle */
    height: 10px; /* Height of the circle */
    background-color: grey; /* Black color for the circle */
    border-radius: 50%; /* Make the div a circle */
}

.paperclip {
    width: 12px; /* Fixed width */
    height: 12px; /* Fixed height */
    background-image: url("../images/paperclip.png"); /* Reference to your image */
    background-size: contain; /* Scale the image to fit */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
}

.plus {
    position: relative; /* Allows positioning of pseudo-elements */
    width: 10px; /* Horizontal bar width */
    height: 2px; /* Horizontal bar height */
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: grey; /* Color of the plus sign */
}

    .plus::before {
        content: '';
        position: absolute;
        top: -4px; /* Center the vertical bar */
        left: 4px; /* Center the vertical bar */
        width: 2px; /* Vertical bar width */
        height: 10px; /* Vertical bar height */
        background-color: grey; /* Same color as the horizontal bar */
    }


.minus {
    width: 10px; /* Adjust width to desired size */
    height: 2px; /* Thin height to create a bar effect */
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: grey; /* Same color as before */
}

.archive-button {
    color: blue; /* Initial color */
    margin-right: 10px; /* Add space to the right of the Cancel button */
    text-decoration: none; /* Optional: removes underline styling */
    padding: 5px 10px; /* Optional: add some padding for better appearance */
}

    .archive-button:visited {
        color: blue; /* Keeps the same blue color after being clicked */
    }

.t-box-container {
    display: none;
    position: relative; /* Positioning for tooltip placement */
    border: 1px solid #ccc; /* Default button border */
    border-radius: 4px; /* Default rounded corners */
    padding: 2px 4px; /* Padding around the circle */
    justify-content: center; /* Center the circle horizontally */
    align-items: center; /* Center the circle vertically */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* Remove default focus outline */
    font-size: 12px; /* Default font size */
}

.sentienta_footer {
    padding-top: 5px;
    margin-bottom: -50px;
    text-align: center;
    font-size: 12px; /* Small font size */
    color: #666; /* Gray color for text */
    border-top: 0px solid #ddd;
    width: 100%;
    bottom: 0;
}

    .sentienta_footer a {
        color: #007bff; /* Link color */
        text-decoration: none;
    }

        .sentienta_footer a:hover {
            text-decoration: underline;
        }


/* For the early access dialog box: */
.content-overlay {
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4); /* Dark center for contrast */
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.7); /* Soft fade effect around edges */
}

    .content-overlay a {
        color: #FFD700; /* Use a bright color, like gold, for good contrast */
        text-decoration: none; /* Optional: to maintain the link style */
    }

        .content-overlay a:hover {
            color: #FFFFFF; /* You could also change the color on hover for effect */
        }

.startGuide-title {
    font-size: 30px;
}

.contentStartGuide {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 90%;
    font-size: 14px;
}

.content-overlay-startGuide {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    border-radius: 8px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6); /* Dark center for contrast */
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.7); /* Soft fade effect around edges */
}

    .content-overlay-startGuide a {
        color: #FFD700; /* Use a bright color, like gold, for good contrast */
        text-decoration: none; /* Optional: to maintain the link style */
    }

        .content-overlay-startGuide a:hover {
            color: #FFFFFF; /* You could also change the color on hover for effect */
        }


.modal-dialog {
    position: relative; /* Makes it possible to position the ::before pseudo-element */
    width: 600px;
    height: 400px;
    padding: 20px;
    color: black; /* Ensures text is readable */
    border-radius: 10px; /* Optional rounded corners */
    overflow: hidden; /* Ensures ::before doesn’t overflow */
    /* Set the border width, style, and color */
    border-width: 1px; /* Adjust this value for desired thickness */
    border-style: solid; /* Solid border (can also use dotted, dashed, etc.) */
    border-color: #ccc; /* Set your preferred color */
}

    .modal-dialog::before {
        background-image: url('../images/blue_team.jpg'); /* Replace with the path to your image */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1.0; /* Adjust transparency as needed */
        z-index: -1; /* Places it behind the content */
    }

.modal-dialog-signin {
    font-family: "Raleway", sans-serif;
    position: relative; /* Makes it possible to position the ::before pseudo-element */
    width: 400px;
    height: fit-content; /* let it grow with content */
    padding-bottom: 30px;
    color: black; /* Ensures text is readable */
    border-radius: 10px; /* Optional rounded corners */
    overflow: hidden; /* Ensures ::before doesn’t overflow */
    /* Set the border width, style, and color */
    border-width: 1px; /* Adjust this value for desired thickness */
    border-style: solid; /* Solid border (can also use dotted, dashed, etc.) */
    border-color: #ccc; /* Set your preferred color */
}

    .modal-dialog-signin::before {
        background-image: url('../images/blue_team.jpg'); /* Replace with the path to your image */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1.0; /* Adjust transparency as needed */
        z-index: -1; /* Places it behind the content */
    }


.modal-dialog-startGuide {
    position: relative; /* Makes it possible to position the ::before pseudo-element */
    width: 450px;
    height: 600px;
    padding-bottom: 30px;
    color: black; /* Ensures text is readable */
    border-radius: 10px; /* Optional rounded corners */
    overflow: hidden; /* Ensures ::before doesn’t overflow */
    /* Set the border width, style, and color */
    border-width: 1px; /* Adjust this value for desired thickness */
    border-style: solid; /* Solid border (can also use dotted, dashed, etc.) */
    border-color: #ccc; /* Set your preferred color */
}

    .modal-dialog-startGuide::before {
        background-image: url('../images/blue_team.jpg'); /* Replace with the path to your image */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1.0; /* Adjust transparency as needed */
        z-index: -1; /* Places it behind the content */
    }

#startGuideList li {
    margin-bottom: 10px; /* Adds space below each item */
}

.modal-dialog-archive-titles {
    position: absolute; /* Use absolute positioning to place it relative to the page */
    top: 10%; /* Position it 10% from the top */
    left: 5%;
    right: -70%; /* Position it at the right of the page */
    width: 300px; /* Initial width */
    max-width: 500px; /* Maximum width */
    padding: 20px;
    color: black; /* Ensures text is readable */
    border-radius: 10px; /* Optional rounded corners */
    max-height: 400px; /* Set a maximum height for the dialog */
    overflow-y: auto; /* Enable vertical scrolling only if content exceeds max-height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    border-width: 1px; /* Adjust this value for desired thickness */
    border-style: solid; /* Solid border (can also use dotted, dashed, etc.) */
    border-color: grey; /* Set your preferred color */
    background-color: white; /* Optional: ensure the dialog has a visible background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow for depth */
}


.preserve-numbering {
    list-style-type: none; /* Removes default numbering */
    padding-left: 0; /* Removes extra padding */
}

    .preserve-numbering li {
        margin-left: 20px; /* Optional: adjust indentation for list items */
    }

.showTeamsTab {
    display: none;
}

.waitlist-form {
    font-family: 'Raleway';
    font-size: 18px;
    text-align: left;
    padding-left: 25px;
}

.startGuide-form {
    font-family: 'Raleway';
    font-size: 18px;
    text-align: left;
    padding-left: 25px;
}


.feedbackcontainer {
    background-color: white;
    width: 30%; /* Initial width */
    height: 98vh; /* Full viewport height */
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 50px; /* Keep padding inside the box */
    margin-top: 10px;
    box-sizing: border-box; /* Includes padding in total width */
    position: relative; /* Needed for the resize handle */
    border: 1px solid #ccc; /* Example border */
    border-radius: 3px;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

#feedbackInput {
    width: 100%; /* or a specific width, e.g., 400px */
    height: 100px; /* adjust based on the number of rows you want */
    resize: vertical; /* allows the user to resize vertically only */
}


.feedback-form {
    font-family: 'Raleway';
    font-size: 16px;
    text-align: left;
    padding-top: 25px;
    padding-left: 25px;
}

/* Responsive adjustments for phone display */
@media (max-width: 768px) {
    html, body {
        min-height: 80vh; /* Ensure the full viewport height */
        overflow: auto; /* Allow regular scrolling */
    }

    /* iOS Safari-specific fix for shrinking address bar */
    @supports (-webkit-touch-callout: none) {
        html, body {
            min-height: 100vh; /* Ensure the full viewport height */
            overflow: auto; /* Allow regular scrolling */
        }
    }

    .leftcontainer {
        display: none;
        width: 0%;
        height: 93%;
        float: left;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px;
        box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    }

    .middlecontainer {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Align content at the bottom */
        width: 100%;
        height: 80vh; /* Use viewport height to maintain consistency */
        padding: 5px;
        margin-top: 5px;
        box-sizing: border-box; /* Ensure padding is included in height/width */
    }

        .middlecontainer #code-container {
            margin: 0 auto; /* Center in the middlecontainer */
        }

    .rightcontainer {
        display: none;
    }

    /*
    .middlecontainer, .rightcontainer {
        position: relative; 
    }
    */

    .form-group {
        background-color: rgb(240, 240, 240);
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .logoStyle {
        display: none;
    }

    .showTeamsTab {
        display: none;
    }

    .menu-container {
        display: flex; /* Use Flexbox for horizontal layout */
        align-items: center; /* Center items vertically */
        justify-content: space-between; /* Spread items across the width */
        padding: 0px 0px; /* Add padding for spacing */
        width: 100%; /* Full width */
        position: relative; /* Ensure correct stacking context */
    }

    .phone_logo {
        display: block;
    }

    .phone_logoImage {
        width: 100%; /* Set the width */
        aspect-ratio: 1; /* Maintain a 1:1 aspect ratio */
        object-fit: contain; /* Scale the image to fit within the container */
        display: flex; /* Ensure the image is treated as a block element */
        align-items: center; /* Center items vertically */
        mix-blend-mode: multiply; /* Other browsers */
        padding-left: 5px;
        height: 50px;
        -webkit-mix-blend-mode: multiply; /* Safari */
        mix-blend-mode: multiply; /* Other browsers */
    }

    .phone_logoTitle {
        font-size: 14px; /* Reduce font size for smaller screens */
        text-align: left; /* Align text to the left for a typical mobile layout */
        margin: 0 auto; /* Add horizontal margin for breathing room */
        display: none;
    }

    .dropbtn {
        padding: 10px 13px; /* Increase padding for easier touch interaction */
        font-size: 14px; /* Slightly smaller font size */
        z-index: 9999; /* Highest priority */
    }

    .dropdown-content {
        background-color: rgb(240, 240, 240);
        min-width: 100%; /* Full width for better usability on mobile */
        position: static; /* Position it in the flow of the document */
        box-shadow: none; /* Remove shadow for simplicity on smaller screens */
        border: 1px solid #ccc; /* Example border */
        border-radius: 3px; /* Optional rounded corners */
        z-index: 9999; /* Highest priority */
        position: absolute;
    }

        .dropdown-content a {
            padding: 12px 15px; /* Increase padding for easier tapping */
            font-size: 14px; /* Adjust font size for mobile readability */
        }

    .mainMenuHideDropElement {
        display: block;
    }

    .leftcontainer {
        display: flex;
        width: 0%;
        height: 93%;
        float: left;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px;
        box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    }

    .textbox-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border: 0px solid #C0C0C0;
        overflow: hidden; /* Prevent scrollbars here */
        position: relative; /* Required for .textbox to position correctly */
        margin-top: 5px;
        margin-left: 0px;
        height: 80%;
    }

    .textbox {
        background-color: rgb(245, 245, 245);
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        display: flex;
        flex-direction: column-reverse; /* Keep the reversed order */
        box-sizing: border-box;
        padding: 8px;
        overflow-y: auto; /* Enable scrolling here */
        height: 100%; /* Ensure it fills the parent's height */
        position: absolute; /* Ensure it fits inside the parent */
        width: 100%; /* Match the width of the container */
    }

    .all-input {
        padding: 5px;
        background-color: rgb(245, 245, 245);
        border: 1px solid #C0C0C0;
        border-radius: 3px;
    }

    .submit-like-button {
        position: relative; /* Positioning for tooltip placement */
        background-color: rgb(231, 231, 231);
        border: 1px solid #ccc; /* Default button border */
        border-radius: 4px; /* Default rounded corners */
        font-size: 16px; /* Default font size */
    }

    .left-button {
        font-size: 14px;
        padding: 6px 6px 6px 6px;
        margin-right: auto; /* Push the button to the left */
    }

    .circle {
        margin: 6px;
        width: 13px; /* Width of the circle */
        height: 13px; /* Height of the circle */
    }

    .paperclip {
        margin: 6px;
        width: 16px; /* Fixed width */
        height: 18px; /* Fixed height */
    }

    .plus {
        margin: 6px;
        width: 13px; /* Horizontal bar width */
        height: 2px; /* Horizontal bar height */
    }

        .plus::before {
            top: -6px; /* Center the vertical bar */
            left: 5px; /* Center the vertical bar */
            width: 3px; /* Vertical bar width */
            height: 14px; /* Vertical bar height */
        }


    .minus {
        margin: 6px;
        width: 13px; /* Adjust width to desired size */
        height: 2px; /* Thin height to create a bar effect */
        background-color: grey; /* Same color as before */
    }

    .t-box-container {
        display: none;
    }

    .mobile-t-box-container {
        width: auto;
        display: flex;
        position: relative; /* Positioning for tooltip placement */
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: rgb(231, 231, 231);
        border: 1px solid #ccc; /* Default button border */
        border-radius: 4px; /* Default rounded corners */
        font-size: 16px; /* Default font size */
        transition: background-color 0.2s, border-color 0.2s;
    }

    .archive-button {
        color: blue; /* Initial color */
        margin-right: 10px; /* Add space to the right of the Cancel button */
        text-decoration: none; /* Optional: removes underline styling */
        padding: 5px 10px; /* Optional: add some padding for better appearance */
    }

        .archive-button:visited {
            color: blue; /* Keeps the same blue color after being clicked */
        }


    .faqcontainer {
        background-color: white;
        width: 95%; /* Initial width */
        height: 90%; /* Full viewport height */
        padding: 20px;
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 5px;
        margin-bottom: 50px;
        border-radius: 3px;
    }

    .img {
        position: absolute;
        width: 25%;
        height: auto;
        padding-top: 200px;
        padding-left: 0px;
        margin-left: -30%;
        float: left;
        z-index: 9999; /* Ensure it's on top */
    }

    .highlight-box { /* Manage Teams button */
        font-size: 0.7em;
        padding: 5px; /* Padding inside the button */
    }

    .modal-dialog {
        margin-left: 0px;
        width: 80vw;
        height: 65vh;
    }

    .modal-dialog-signin {
        margin-left: 5%;
        width: 80vw;
    }

    .modal-dialog-startGuide {
        position: relative; /* Makes it possible to position the ::before pseudo-element */
        width: 450px;
        height: 500px;
        padding-bottom: 30px;
        margin-top: 20%;
        width: 85vw;
    }

    .startGuide-title {
        font-size: 24px;
    }

    .contentStartGuide {
        padding: 0px;
        width: 315px;
        margin-left: -20px;
        font-size: 14px;
    }

    .modal-dialog-archive-titles_ {
        top: 10%;
        left: -50%;
    }

    .modal-dialog-archive-titles {
        position: fixed; /* Position relative to the viewport */
        top: 30%; /* Center vertically */
        left: 18%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Shift back by half its width and height */
        width: 300px; /* Set width */
        max-width: 300px; /* Max width */
        padding: 20px; /* Inner padding */
        background-color: white; /* Background color */
        border-radius: 10px; /* Optional rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
        z-index: 9999; /* Ensure it's on top */
    }

    .feedbackcontainer {
        background-color: white;
        width: 95%; /* Initial width */
        height: 80vh; /* Full viewport height */
        padding-top: 5px;
        margin-left: 5px;
        margin-top: 20px;
    }

    .feedback-form {
        width: 100%;
        padding-left: 10px;
    }

    #feedbackInput {
        width: 100%; /* or a specific width, e.g., 400px */
        height: 100px; /* adjust based on the number of rows you want */
        resize: vertical; /* allows the user to resize vertically only */
    }


    .waitlist-input {
        font-size: 1.3em;
        width: 95%;
    }


    .signInForm {
        width: 200px;
        font-size: 16px;
    }

    .sentienta_footer {
        display: none;
    }

    .code-close-button {
        font-size: 18px;
        padding: 7px;
        padding-bottom: 5px;
    }

    .code-copy-button {
        font-size: 18px;
        padding: 7px;
    }

    .saveChanges-box {
        margin-left: 15px;
        display: inline-block;
        padding: 5px; /* Padding inside the button */
    }

    .startGuide-form {
        padding-left: 0px;
        font-size: 14px;
    }


    .waitlist-form {
        padding-left: 0px;
    }
}