@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
.no-frame-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.large-icon-button, .large-icon-button k-button {
    color: #E51A5F !important; /* Change the color if needed */
    /* Adjust this value to increase the icon size */
    /* width: 24px;  For SVG icons */
    /*  height: 24px; For SVG icons */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    height: 32px !important;
    width: 32px !important;
}
.question-text {
    font-size: 1.1rem;
    font-weight: normal;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    /*margin-bottom: 0.5rem;*/
    max-width: 850px;
    /*line-height: normal !important;*/
}
.vertical-layout label {
    display: block; /* Each label on a new line for vertical layout */
} 
.horizontal-layout label { 
    display: inline-block; /* Inline display for horizontal layout */
    margin-right: 10px; /* Space between buttons */
}
.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-row-text {
    /* Additional styling for the text, if needed */
    font-size: 1.2rem;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid silver; 
}

.left-column {
    /* At least 16rem for the question text; when the scale does not fit beside it, the scale moves below the text. */
    flex: 1 1 16rem;
    max-width: 400px;
    padding-right: 1rem;
}

.right-column {
    /* Never narrower than the scale (shrink 0, basis = its width): instead of being squeezed into a scrolling box
       that cuts off the ends, the answer moves to its own line below the question (the row wraps). */
    flex: 1 0 auto;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap; /* Prevents unintended wrapping */
    justify-content: flex-start; /* Ensures left alignment */
    align-items: center; /* Aligns items properly */
}
.numeric-textbox {
    margin-top: auto; /* Pushes to the bottom */
    padding-bottom: 0.5rem !important;
}
.right-column-textarea {
    flex: 1;
}
/* Start Flex for Rating and Combo scale */
.section_header {
    line-height: 2;
}
.fixed-item-left {
    width: 300px;
    flex-shrink: 200; /* This ensures the column doesn't shrink below 150px */
    padding: 5px;
    vertical-align: middle;
}
.fixed-item-middle {
    width: 250px;
    flex-shrink: 0; /* This ensures the column doesn't shrink below 150px */
    padding: 5px;
    vertical-align: middle;
}
.flex-item {
    /* Assuming you want them to be equal width when side by side */
    flex: 1;
    min-width: 300px; /* Adjust this value based on the minimum width you desire for your divs */
    /* border: 1px solid black; Just to visualize */
    padding: 5px;
    box-sizing: border-box;
    /* margin: 5px; /* Optional: Adds space between items  */
    /* max-width: 450px; */
    flex-grow: 1;
}
.qst-bigger-font {
    font-size: 1.3em;
}

.qst-smaller-font {
    font-size: 0.8em;
    color: "#6C6A67";
}

/* END Flex for Rating and Combo scale */
.scale-label-left {
    text-align: left;
    padding-right: 1rem;
    min-width: 100px;
    line-height: 1.0;
}
.scale-label-right {
    text-align: right;
    padding-left: 1rem;
    min-width: 100px;
    line-height: 1.0;
}
.full-screen-window {
    width: 30% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}
.full-height-textarea {
    height: 100%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .left-column, .right-column, .right-column-textarea {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    .right-column {
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        flex-direction: column; /* Assuming you want a column layout */
    }
    .scale-label-right, .scale-label-left {
        min-width: auto;
        padding: 0;
        
    }
    .full-screen-window {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .full-screen-window .k-window-content {
        width: 100% !important;
        height: 100% !important;
    }
}



/* REST IS DEFAULT STANDARD */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.page {
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
}

.main .top-row > a, .main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.touch-radio-group {
    display: flex;
    justify-content: space-between;
    /* Other styles */
    flex-wrap: nowrap; /* Prevents unintended wrapping */
    overflow-x: auto; /* Adds scrolling if needed */
    justify-content: center; /* Aligns in the center */
    /* «safe»: when the scale is wider than the box, start at the left edge instead of centering, so the first
       options are not pushed out of reach of the scroll bar. Browsers without «safe» keep the line above. */
    justify-content: safe center;
    /* gap: 2px; Add spacing between buttons */
}

/* When the screen is too small, force the last button to wrap */
@media (max-width: 600px) {
    .touch-radio-group {
        flex-wrap: wrap; /* Allow wrapping only on small screens */
    }
    .touch-radio-button {
        width: 30px;
        height: 30px;
    }
    .na-button-wrap {
        flex-basis: 100% !important; /* Forces this button to move to next line */
        display: flex;
        justify-content: center; /* Centers horizontally */
        margin-top: 8px;
    }
    /*.flex-container {
        position: relative;*/ /* Ensure it respects viewport width */
        /*left: 0;*/ /* Align to left */
        /*right: 0;*/ /* Align to right */
        /*width: 100vw;*/ /* Forces full viewport width */
        /*max-width: 100vw;*/ /* Prevents constraints from parents */
        /*margin-left: auto !important;
        margin-right: auto !important;
    }*/
   
}

@media (max-width: 600px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
		z-index: 1;
    }

    .main > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }


    .swal2-container {
        z-index: 20000 !important; /* Adjust the value as needed */
    }

    .swal2-backdrop {
        z-index: 19999 !important;
    }
}

/* Previous / Next under the questions: a small gap between the buttons, and they wrap on narrow screens */
.survey-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Humetrica HOA (B36): the respondent's unit and manager in a {codemap} field */
.orgmapLabDiv {
    font-weight: 600;
    line-height: 1.5;
}