@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=GoogleSansCode:ital,wght@0,300..800;1,300..800&display=swap');


:root {
    --background-color: #f2f5f7;
    --primary-color: #00db94;
    --primary-color-hover: #02b57b;
    --dark-primary-color: #00383f;
    --secondary-color: #ff7347;
    --secondary-color-hover: #e76b44;
    --delete-color: #f52466;
    --delete-color-hover: #f75085;
    --inactive-color: #717F8D;
    --answer-rate-color: #c44721;
    --line-chart-result-color: #004736;
    --critical-color: #f52466;
    --low-value-color: #f52466;
    --mid-value-color: #febf4b;
    --high-value-color: #00db94;
    --box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /*btns*/
    --primary-btn-color: #00383f;
    --primary-btn-color-hover: #044952;
    --secondary-btn-color: #eb9440;
    --secondary-btn-color-hover: #efa966;
    /*  Text*/
    --font: 'Poppins', sans-serif;
    --font-color: #242e38;
    /*Link*/
    --link-color: #c44721;
    --link-color-hover: var(--secondary-color);
    /*Icon*/
    --icon-color: #00383f;
    --icon-background-color: #c3f9e8;
    /*Tabs*/
    --tab-hover-color: #e5e5e5;
    /*Like color*/
    --like-color: #ff7347;
    /*  Hover*/
    --hover-color: #f7f7f7;
    /*Active*/
    --active-color: #66B3FF;
    /*Not Specified*/
    --not-specified: #FCF4CF;
    /*card background hover*/
    --card-background-hover-color: #c3f9e8;
    /*notification color*/
    --notification-color: #f52466;
    /* Survey */
    --survey-accent: #4f46e5;
    --survey-accent-light: #eef2ff;
    --survey-accent-hover: #4338ca;
    --survey-success: #16a34a;
    --survey-success-light: #f0fdf4;
    --survey-danger: #dc2626;
    --survey-danger-light: #fef2f2;
    --survey-radius: 14px;
    --survey-radius-sm: 8px;
    --survey-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    /* Topbarens höjd. Används av TopBar och NavBar för att placera
       overlay-menyerna (notismenyn, användarmenyn, sidomenyn). Ändra här,
       inte på varje enskilt ställe. Topbaren blir kompakt på mobil, se
       överskrivningen nedanför. */
    --topbar-height: 70px;
}

/*
    BRYTPUNKTER – använd bara dessa två i hela projektet:

        @media (max-width: 640px)    Mobil
        @media (max-width: 1024px)   Surfplatta (och mobil)

    Komplementet uppåt skrivs @media (min-width: 641px).
    Avvikelser kräver en kommentar om varför.
*/

/* Topbaren fälls ihop till det kompakta mobilutförandet, se TopBar.razor.css. */
@media (max-width: 640px) {
    :root {
        --topbar-height: 54px;
    }
}

@font-face {
    font-family: 'EmiliaNote';
    src: url('/Fonts/EmiliaNote.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    overflow: hidden;
}

html, body {
    touch-action: manipulation;
    font-family: var(--font);
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


    /*Hightlight*/
    *::selection {
        background-color: #FACC72;
        color: black;
    }

option:disabled {
    color: #a8a8a4;
}

.rz-dropdown-items-wrapper {
    max-height: 300px !important;
}

.material-symbols-outlined {
    font-variation-settings: 'wght' 300 !important;  /* Adjust weight from 100 to 700 */
}


.banner-icon-container .material-symbols-outlined {
    font-variation-settings: 'wght' 500 !important; /* Adjust weight from 100 to 700 */
}


/*    ToasterMessage*/
/*General*/
.rz-growl-message {
    padding-right: 20px !important;
    position: relative;
}

.rz-growl-item-container {
    position: relative;
}

/*Warning 1*/
.rz-growl-message-warning .rz-growl-icon-close {
    order: 3 !important;
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 5px;
    border-radius: 3px;
    color: #936b26;
}

    .rz-growl-message-warning .rz-growl-icon-close:before {
        position: absolute;
        top: -5px;
        right: -5px;
        padding: 5px;
        border-radius: 3px;
        color: #936b26;
    }

.rz-growl-message-warning .rz-growl-item {
    background-color: #fbeccf !important;
    display: flex !important;
    align-items: center;
    position: fixed;
    right: 10px !important;
    min-height: 60px !important;
    max-width: 300px;
}


.rz-growl-message-warning .rz-growl-message p, .rz-growl-message-warning.rz-growl-icon-close, .rz-growl-message-warning .rz-growl-image.rzi-times:before, .rz-growl-message-warning .rzi-exclamation-triangle, .rz-growl-message-warning .rz-growl-title {
    color: #936b26 !important;
}

    .rz-growl-message-warning .rz-growl-icon-close:hover {
        background-color: wheat;
    }

/*Warning 2*/

.rz-growl-message-warn .rz-growl-icon-close {
    order: 3 !important;
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 5px;
    border-radius: 3px;
    color: #936b26;
}

    .rz-growl-message-warn .rz-growl-icon-close:before {
        position: absolute;
        top: -5px;
        right: -5px;
        padding: 5px;
        border-radius: 3px;
        color: #936b26;
    }

.rz-growl-message-warn .rz-growl-item {
    background-color: #fbeccf !important;
    display: flex !important;
    align-items: center;
    position: fixed;
    right: 10px !important;
    min-height: 60px !important;
    max-width: 300px;
}


.rz-growl-message-warn .rz-growl-message p, .rz-growl-message-warn.rz-growl-icon-close, .rz-growl-message-warn .rz-growl-image.rzi-times:before, .rz-growl-message-warn .rzi-exclamation-triangle, .rz-growl-message-warn .rz-growl-title {
    color: #936b26 !important;
}

    .rz-growl-message-warn .rz-growl-icon-close:hover {
        background-color: wheat;
    }
/*   Success*/
.rz-growl-message-success .rz-growl-icon-close {
    order: 3 !important;
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 5px;
    border-radius: 3px;
    color: #936b26;
}

    .rz-growl-message-success .rz-growl-icon-close:before {
        position: absolute;
        top: -5px;
        right: -5px;
        padding: 5px;
        border-radius: 3px;
        color: #5AA985;
    }

.rz-growl-message-success .rz-growl-item {
    background-color: #d3eede !important;
    display: flex !important;
    align-items: center;
    position: fixed;
    right: 10px !important;
    min-height: 60px !important;
    max-width: 300px;
}

.rz-growl-message-success .rz-growl-message p, .rz-growl-message-success .rz-growl-icon-close, .rz-growl-message-success .rz-growl-image.rzi-times:before, .rz-growl-message-success .rz-growl-image.rzi-check, .rz-growl-message-success .rz-growl-title {
    color: #5AA985 !important;
}

    .rz-growl-message-success .rz-growl-icon-close:hover {
        background-color: #ACD4C2;
    }
/*    Error*/
.rz-growl-message-error .rz-growl-icon-close {
    order: 3 !important;
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 5px;
    border-radius: 3px;
    color: #F44336;
}

    .rz-growl-message-error .rz-growl-icon-close:before {
        position: absolute;
        top: -5px;
        right: -5px;
        padding: 5px;
        border-radius: 3px;
        color: #F44336;
    }

.rz-growl-message-error .rz-growl-item {
    background-color: #fdc5c1 !important;
    display: flex !important;
    align-items: center;
    position: fixed;
    right: 10px !important;
    min-height: 60px !important;
    max-width: 300px;
}

.rz-growl-message-error .rz-growl-message p, .rz-growl-message-error.rz-growl-icon-close, .rz-growl-message-error .rz-growl-image.rzi-times:before, .rz-growl-message-error .rzi-exclamation-check, .rz-growl-message-error .rz-growl-title {
    color: #F44336 !important;
}

    .rz-growl-message-error .rz-growl-icon-close:hover {
        background-color: #f1928b;
    }
/*text elements*/
 h3, h4, h5, h6 {
    color: var(--font-color);
    font-family: var(--font);
    margin-bottom: 0;
    font-style: normal;
}

h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--font-color);
    font-family: var(--font);
    margin-bottom: 0;
    font-style: normal;
}
h2 {
    font-family: var(--font);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0;
}
h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--font-color);
}

h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--font-color);
}

h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--font-color);
}

p {
    font-family: var(--font);
    color: var(--font-color);
    font-size: 14px;
    line-height: 19.6px;
    margin: 0;
    font-weight: 400;
    font-style: normal;
}

a {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    letter-spacing: 0.42px;
    color: var(--link-color);
    cursor: pointer;
    font-family: var(--font);
}

    a:hover {
        text-decoration: underline;
        color: var(--link-color-hover);
    }


.custom-link {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    letter-spacing: 0.42px;
    color: var(--link-color);
    cursor: pointer;
}

    .custom-link:hover {
        text-decoration: underline;
        color: var(--link-color-hover);
    }

/*Buttons*/
/*
    Knapparna hade tidigare min-width: max-content, vilket gjorde att en lång
    etikett aldrig kunde krympa och därmed sprängde smala skärmar. De får nu
    krympa till containern och växa på höjden i stället för att svämma över.
*/
.button-primary {
    background-color: var(--primary-btn-color);
    color: white;
    font-weight: 500;
    border-radius: 5px;
    padding: 0px 19px;
    min-height: 34px;
    transition: .2s ease-in-out;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5px;
}

    .button-primary:hover {
        background-color: var(--primary-btn-color-hover);
    }


.button-secondary {
    background-color: var(--secondary-btn-color);
    color: white;
    font-weight: 500;
    border-radius: 5px;
    padding: 8px 19px;
    min-height: 34px;
    width: max-content;
    max-width: 100%;
    transition: .2s ease-in-out;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5px;
}

    .button-secondary:hover {
        background-color: var(--secondary-btn-color-hover);

    }

.lang-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--line, #e7eaee);
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--font-color);
    transition: background 0.12s, border-color 0.12s;
}

.lang-btn.active {
    background: var(--primary-btn-color, #00383f);
    color: white;
    border-color: transparent;
}

.lang-btn:not(.active):hover { border-color: #c8cdd2; }

.button-border {
    color: var(--font-color);
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid lightgray;
    padding: 8px 19px;
    min-height: 34px;
    width: max-content;
    max-width: 100%;
    transition: .2s ease-in-out;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5px;
    background-color: white;
}

.button-border:hover {
    background-color: whitesmoke;
}

.button-delete {
    background-color: var(--delete-color);
    color: white;
    border: none;
    outline: none;
    font-family: var(--font);
    font-weight: 500;
    border-radius: 5px;
    padding: 8px 19px;
    min-height: 34px;
    width: max-content;
    max-width: 100%;
    text-align: center;
    transition: .2s ease-in-out;
    font-size: 12px;
    cursor: auto;
}

    .button-delete:hover {
        background-color: var(--delete-color-hover);
    }



.button-cancel, button-text {
    color: var(--font-color);
    border: none;
    outline: none;
    font-family: var(--font);
    font-weight: 500;
    text-align: center;
    width: max-content;
    max-width: 100%;
    padding-bottom: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid transparent;
}

    .button-cancel:hover, button-text:hover{
        border-bottom: 1px solid var(--font-color);
    }



.close-modal {
    background-color: transparent !important;
}

    .close-modal i {
        font-size: 23px;
        font-weight: 600;
        color: var(--tertiary-color);
    }

    .close-modal:hover {
        transform: scale(1.1);
    }

.rz-notification {
    z-index: 2000 !important;
}


ul {
    list-style: none;
}

li {
    font-family: var(--font);
    color: var(--font-color);
    cursor: pointer;
    font-size: 12px;
}

label {
    color: var(--font-color);
    margin-bottom: 5px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
}

td {
    padding: 10px 20px;
}


button {
    cursor: pointer;
    border: none;
    font-family: var(--font);
    background-color: transparent;
}

    button:disabled {
        cursor: default !important;
        background-color: lightgray !important;
        border-color: transparent !important;
        color: white !important;
    }



        button:disabled:hover {
            background-color: lightgray !important;
            color: white !important;
            border-color: transparent !important;
        }



    button:focus, button:focus, button:active {
        outline: none;
    }

.error-message-container {
    height: 10px;
    margin: 10px;
}

    .error-message-container .validation-message {
        color: var(--critical-color) !important;
    }

.error-message {
    color: var(--critical-color);
}

/*Todo Razor*/

/*   AddTaskDialog*/
.add-task-dialog form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-top: 2px solid var(--neutral-color);
    padding-top: 24px;
}

.add-task-dialog input, .add-task-dialog .rz-dropdown {
    width: 350px !important;
}


/*    Enps result details chart*/
.enps-results-container .rz-scheme-pastel .rz-series-0 > path:nth-child(-n + 6) {
    fill: var(--enps-detractors-color) !important;
    stroke: var(--enps-detractors-color) !important;
}

.enps-results-container .rz-scheme-pastel .rz-series-0 > path:nth-child(+n + 7) {
    fill: var(--enps-passives-color) !important;
    stroke: var(--enps-passives-color) !important;
}

.enps-results-container .rz-scheme-pastel .rz-series-0 > path:nth-child(+n + 9) {
    fill: var(--enps-promotors-color) !important;
    stroke: var(--enps-promotors-color) !important;
}

.enps-answer-rate-chart-container .rz-chart {
    height: 100%;
}

/*RadarChart*/
.radarchart-container svg {
    display: block;
    margin: auto;
}


/*Datepicker*/

.rz-calendar {
    box-shadow: none !important;
}

.rz-calendar {
    box-shadow: none !important;
}

.rz-datepicker-title .rz-dropdown {
    height: 34px !important;
}

.rz-datepicker-prev .rzi-chevron-left {
    color: var(--font-color) !important;
}

.rz-datepicker-next .rzi-chevron-right {
    color: var(--font-color) !important;
}


.rz-datepicker-header {
    background-color: white;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.rz-datepicker-next, .rz-datepicker-prev {
    display: flex !important;
    align-items: center !important;
}

.rz-datepicker-calendar td .rz-state-default:hover, .rz-datepicker-calendar td .rz-state-active, .rz-dropdown-item.rz-state-highlight, .rz-dropdown-item:hover {
    background-color: var(--hover-color) !important;
    color: black !important;
}

.rz-datepicker-calendar td .rz-state-default {
    margin: 3px !important;
    padding: 6px !important;
}


.rz-datepicker-calendar .rz-dropdown {
    box-shadow: none !important;
}

.rz-datepicker-header .rz-dropdown {
    width: 110px !important;
    border: none !important;
    box-shadow: none !important;
}

.rz-calendar .rz-inputtext {
    cursor: pointer !important;
}

.rz-datepicker-header .rz-dropdown:hover {
    box-shadow: none !important;
}

.rz-datepicker-calendar td {
    border: none !important;
}

    .rz-datepicker-calendar td .rz-state-default {
        border: 1px solid lightgray;
        border-radius: 5px !important;
    }

.rz-calendar .rz-inputtext {
    box-shadow: none !important;
}
.rz-calendar:hover .rz-datepicker-trigger {
    color: var(--secondary-color) !important;
}

/*Timepicker popup (hour/minute spinners + OK button)*/
.rz-datepicker-panel,
.rz-datetimepicker,
.rz-timepicker,
.rz-datepicker-calendar-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 8px !important;
}


.rz-hour-picker, .rz-minute-picker, .rz-second-picker {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.rz-hour-picker .rz-button,
.rz-minute-picker .rz-button,
.rz-second-picker .rz-button {
    background-color: transparent !important;
    color: var(--font-color) !important;
    border-radius: 5px !important;
    width: 22px !important;
    height: 18px !important;
    min-width: 22px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background-color .15s ease-in-out !important;
}

    .rz-hour-picker .rz-button:hover,
    .rz-minute-picker .rz-button:hover,
    .rz-second-picker .rz-button:hover {
        background-color: var(--hover-color) !important;
        color: var(--secondary-color) !important;
    }

    .rz-hour-picker .rz-button .rzi,
    .rz-minute-picker .rz-button .rzi,
    .rz-second-picker .rz-button .rzi {
        color: inherit !important;
    }

.rz-datepicker-footer {
    border-top: 1px solid var(--line, #e7eaee) !important;
    padding: 10px 12px !important;
    text-align: right !important;
}

    .rz-datepicker-footer .rz-button {
        background-color: var(--primary-btn-color) !important;
        background-image: none !important;
        color: white !important;
        font-weight: 500 !important;
        border-radius: 5px !important;
        padding: 0 19px !important;
        height: 34px !important;
        font-size: 12px !important;
        box-shadow: none !important;
        transition: background-color .2s ease-in-out !important;
    }

        .rz-datepicker-footer .rz-button:hover {
            background-color: var(--primary-btn-color-hover) !important;
        }

        .rz-datepicker-footer .rz-button .rz-button-text {
            color: white !important;
        }

/*popup drowdown*/
.rz-multiselect-panel, .lookup {
    min-width: 300px !important;

}
/*blazor input*/
input, select, .rz-dropdown, .rz-spinner, .rz-calendar .rz-inputtext, textarea {
    height: 42px;
    width: 180px;
    border-radius: 5px;
    border: 1px solid lightgray;
    padding-left: 5px;
    font-weight: 300 !important;
    background-color: white !important;
    outline: none !important;
    font-family: var(--font);
    color: var(--font-color);
    font-size: 14px;
    cursor: pointer;
    line-height: 19.6px;
}

    input:hover, textarea:hover {
        cursor: text !important;
    }

    textarea::placeholder {
        font-size: 12px !important;
    }

    input::placeholder {
        font-weight: 300 !important;
    }

    .rz-dropdown .rz-placeholder {
        color: var(--font-color) !important;
    }

input, .rz-inputtext {
    outline-color: #FACC72 !important;
}


    input::placeholder {
        font-family: var(--font);
        font-weight: 400;
        font-size: 14px;
    }





/*dropdown multiselect*/


.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td{
    background-color:var(--hover-color) !important;
}
.rz-multiselect, .rz-dropdown {
    justify-content: center !important;
}

/*removes color-profile every other row*/
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: transparent !important;
   
}
.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    color: var(--font-color) !important;
}
.rz-grid-table td {
    border-bottom: 1px solid #ededed !important;
}
/*Numeric*/
.rz-spinner-button {
    margin-right: 5px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.form-control {
    height: 35px;
    width: 188px;
}



/*ValidationSummary Dtos*/

.validation-summary .validation-message {
    color: var(--critical-color) !important;
}

.no-scroll {
    padding: 0 !important;
}

.organization-container .btn-primary:disabled, .todos-container .btn-primary:disabled {
    background-color: var(--inactive-subdued-color);
    color: white;
    border: none;
    outline: none;
    font-family: var(--font);
    font-weight: 500;
    border-radius: 5px;
    padding: 5px 20px;
    text-align: center;
    max-width: 100%;
    transition: .2s ease-in-out;
    box-shadow: none;
}

/*
Dashboard scheduler*/

.rz-event, .rz-slot {
    cursor: auto !important;
}
/*Next/Previous btns*/

.rz-paginator-element:not(.rz-state-disabled):active {
    background-image: none !important;
    box-shadow: none !important;
}

.dashboard-container .rz-scheduler-nav-prev-next .rz-button.rz-next, .rz-scheduler-nav-prev-next .rz-next.rz-paginator-element, .dashboard-container .rz-scheduler-nav-prev-next .rz-button.rz-prev, .rz-scheduler-nav-prev-next .rz-prev.rz-paginator-element {
    background-color: var(--primary-color) !important;
}


.dashboard-container .rz-scheduler-nav-prev-next .rz-button.rz-today, .rz-scheduler-nav-prev-next .rz-today.rz-paginator-element {
    display: none !important;
}

.dashboard-container .rz-scheduler-nav-views {
    display: none !important;
}



.dashboard-container .rz-scheduler-nav {
    justify-content: flex-start !important;
    gap: 20px !important;
    background-color: white;
}

.dashboard-container .rz-view-header {
    background-color: white !important;
    border: none;
    font-weight: 600 !important;
}

/************************Import users***************************/
.import-user-dialog-container #import {
    display: none;
}

/*upload color-profile image*/

.profile-container #uploadImage, .cover-image-container #uploadCoverImage, .company-details-container #uploadImage, .cover-image-container #uploadImage {
    display: none;
}

/*Radzen Radial Gauge*/

.actions-overview .rz-gauge-pointer circle {
    stroke-width: 1;
    cy: 75;
    r: 4;
}

.actions-overview .rz-tick {
    display: none;
}


/**********************Todo description dialog************************/

.todo-description-dialog li {
    font-size: 12px;
}
/*****Radzen elements****/


/*Checkbox*/
.rz-chkbox-icon rzi rzi-check {
    outline: none;
    border: 2px var(--primary-hartic) solid !important;
}




/*pulse-edit*/
.pulse-edit-stepper ul {
    background-color: var(--pulse-color);
    height: 100px;
    display: flex;
    align-items: center !important;
    border-radius: 20px !important;
    justify-content: space-evenly !important;
    font-family: var(--font);
    font-size: 20px;
    min-width: 840px !important;
}

/*
    Steppern har en fast min-bredd på 840px för desktop. Under surfplatte-
    brytpunkten släpps den fri så att den inte tvingar fram horisontell scroll.
    Under mobilbrytpunkten döljs den helt (se mobilblocket längst ned).
*/
/*
    Gemensam regel för alla dialoger som bygger på bootstrap-modalens markup
    (.modal > .modal-dialog > .modal-content). Varje dialog lägger en egen klass
    på .modal-content med en fast px-bredd – 648px och 662px är vanligast, den
    bredaste är 909px – och mobilblocken i sidornas egen CSS sätter höjd men
    aldrig bredd. Fjorton av de 37 dialogerna var bredare än en 360px-skärm.

    Här kapas de bara till fönsterbredden, så att en 648px-dialog fortfarande är
    648px på en 900px surfplatta. Under mobilbrytpunkten fyller de hela bredden
    i stället, se mobilblocket längre ned.

    Selektorn är avsiktligt tre klasser djup (0,3,0). Sidornas klasser är scoped
    och får 0,2,0 plus senare källordning, så lika specificitet hade förlorat.
    Det här ersätter behovet av att rätta bredden i 37 filer var för sig.
*/
@media (max-width: 1024px) {
    .modal-dialog {
        max-width: 100%;
        min-width: 0;
    }

    .modal .modal-dialog .modal-content {
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .pulse-edit-stepper ul {
        min-width: 0 !important;
        height: auto;
        padding: 16px 0;
        font-size: 15px;
    }
}

.pulse-edit-stepper .rz-steps-number {
    color: white;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-edit-stepper .rz-state-highlight .rz-steps-number {
    color: var(--pulse-color) !important;
    background-color: white !important;
}

.pulse-edit-stepper .rz-steps-title {
    color: lightgray;
}

.pulse-edit-stepper .rz-steps-current .rz-steps-title {
    color: white !important;
}

.pulse-edit-stepper .rz-state-disabled {
    filter: opacity(0.5) !important;
}

.pulse-edit-container .rz-button:not(.rz-state-disabled) {
    margin: 0 10px;
}



.pulse-edit-container form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}


/* Radzen numeric */
.pulse-edit-item .rz-spinner {
    border-radius: var(--border-radius);
    width: 80px;
}

    .pulse-edit-item .rz-spinner input {
        text-align: center;
    }

    .pulse-edit-item .rz-spinner .rz-button {
        background-color: var(--fourth-hartic);
        border-radius: 50%;
    }




/*Card Chart  Pulse-results*/
.result-over-time-container .rz-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rz-chart {
    width: 100% !important;
    border: 0px 2px 2px 2px solid var(--pulse-color);
}


.rz-chart-tooltip {
    z-index: 1000 !important;
}

.overview-chart .rz-chart {
    height: 320px;
    width: 100%;
}

.result-over-time-element .rz-chart {
    width: 100%;
}

.enps-result-container .rz-chart {
    height: 500px;
    width: 100%;
}

.category-result-container .rz-chart {
    height: 500px;
    width: 100%;
}

.question-result-container .rz-chart {
    height: 500px;
    width: 100%;
}

.modal-body .rz-chart {
    height: 300px;
    width: 100%;
}

/*Checkbox*/
.rz-chkbox-box.rz-state-active {
    border: 1px solid #a8a8a4 !important;
    background-color: white !important;
}

    .rz-chkbox-box.rz-state-active:hover {
        border: 1px solid #a8a8a4 !important;
    }

    .rz-chkbox-box.rz-state-active span {
        color: #a8a8a4 !important;
    }

.rz-chkbox {
    width: 15px;
    height: 15px;
}

.rz-chkbox-box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    color: #a8a8a4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a8a8a4;
    cursor: pointer;
}

    .rz-chkbox-box:hover {
        background-color: white !important;
        color: #a8a8a4 !important;
        border: 1px solid #a8a8a4 !important;
        border-width: 1px !important;
    }

    .rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled)
    /* dropdown data grid*/
    .rz-lookup-search .rz-button, .rz-button.rz-primary {
        background-color: var(--primary-btn-color) !important;
    }

        .rz-lookup-search .rz-button, .rz-button.rz-primary:hover {
            background-color: var(--primary-btn-color-hover) !important;
        }


.rz-cell-data {
    border: none !important;
}

.rz-datatable {
    border: none !important;
}

.rz-multiselect-panel .rz-cell-data {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
}

.rz-multiselect-panel .rz-column-title {
    font-weight: 400 !important;
}

.rz-multiselect-panel, .rz-lookup-panel {
    border-radius: 10px !important;
}



.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder, .rz-multiselect-label-container, .rz-dropdown-label {
    font-weight: 400 !important;
    font-family: var(--font);
}

.rz-multiselect-panel .rz-grid-table {
    width: auto !important;
    min-width: 100%;
}

.rz-data-grid-data th {
    background-color: white !important;
    border: none !important;
}

.rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) {
    border-right: none !important;
}

.rz-data-grid-data tr:hover {
    cursor: pointer;
}

.rz-multiselect-panel .rz-cell-data {
    display: flex !important;
    align-items: center !important;
}

.rz-data-grid-data th {
    background-color: white !important;
}

.rz-column-title {
    padding: 0 6px !important;
}

.rz-data-grid-data td {
    padding: 0px 6px !important;
    font-size: 14px !important;
}



.rz-multiselect-panel .rz-chkbox-box {
    border-radius: 4px !important;
    height: 17px !important;
    width: 17px !important;
}

.rz-multiselect-panel .rz-grid-table thead th .rz-column-title {
    color: gray;
    font-family: var(--font);
    height:19px;
}

.rz-multiselect-panel .rz-column-title-content {
    height: 18px !important;
    font-weight: 500 !important;
}

.rz-dropdown-panel {
    border-radius: 10px !important;
    overflow: hidden;
}

.rz-multiselect-panel .rz-column-title {
    font-weight: 400 !important;
}

.rz-multiselect-panel .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content) > td, .rz-multiselect-panel .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background-color: white !important;
}

.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data {
    color: #333333;
}

.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td {
    background-color: var(--hover-color) !important;
}
/*Paginator*/
rz-paginator-page, .rz-paginator-next, .rz-paginator-last, .rz-paginator-first, .rz-paginator-prev {
    background-color: var(--neutral-color) !important;
    color: var(--tertiary-color) !important;
    border-radius: 50%;
}


.rz-paginator {
    padding: 0px !important;
    padding-top: 20px !important;
}


    .rz-paginator.rz-align-center {
        background-color: #f3f5f7;
    }


.rz-paginator-page.rz-state-active {
    background-color: #505860 !important;
    color: white !important;
    border: none !important;
}

.rz-button.rz-state-disabled, .rz-state-disabled.rz-paginator-element {
    opacity: 0.2 !important;
}

.rz-paginator-next, .rz-paginator-last, .rz-paginator-first, .rz-paginator-prev {
    background-color: transparent !important;
    color: var(--tertiary-color) !important;
}


*/
/*Radzen Scheduler Survey-overview*/
.survey-overview-container .rz-scheduler {
    border-radius: var(--border-radius);
}

.survey-overview-container .rz-scheduler-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    background-color: var(--survey-color) !important;
}

.survey-overview-container .rz-scheduler-nav-views {
    display: none;
}


.rz-scheduler-nav-title {
    color: white !important;
}

.survey-overview-container .rz-scheduler-nav-prev-next {
    background-color: var(--survey-color) !important;
    margin-right: 15px;
}

.survey-overview-container .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active, .rz-scheduler-nav-views .rz-primary.rz-state-active.rz-paginator-element {
    background-color: white;
    color: gray;
}

.survey-overview-container .rz-scheduler-nav-prev-next .rz-button.rz-next, .rz-scheduler-nav-prev-next .rz-next.rz-paginator-element,
.survey-overview-container .rz-scheduler-nav-prev-next .rz-button.rz-prev, .rz-scheduler-nav-prev-next .rz-next.rz-paginator-element {
    background-color: white;
    color: gray;
}

.survey-overview-container .rz-event-content {
    background-color: var(--survey-color) !important;
    border: 1px solid var(--survey-color);
}

    .survey-overview-container .rz-event-content:hover {
        background-color: white !important;
        color: var(--survey-color);
        cursor: pointer;
    }

.survey-overview-container .rz-scheduler-nav-prev-next .rz-button.rz-today, .rz-scheduler-nav-prev-next .rz-today.rz-paginator-element {
    background-color: white;
    color: gray;
}

.survey-overview-container .rz-slot {
    cursor: pointer;
}

/*Dashboard Scheduler*/


.rz-dialog {
    border-radius: 15px !important;
}

.rz-event-list .rz-event {
    padding: 5px;
}

/*Base Modal*/
.modal {
    width: 100%;
}


.modal-dialog {
    margin: auto;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 250px;

}

.modal-content {
    border: none;
    border-radius: 6px;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items:center;

}


.edit-team-container .rz-chkbox-box rz-state-active {
    background-color: var(--fourth-hartic);
}

/*Todo page*/

.rz-sortable-column .rzi-sort:hover {
    cursor: pointer;
}

.rz-sortable-column .rzi-sort {
    color: var(--tertiary-color) !important;
    margin-left: 3px;
}

.Select-completed-backgroundcolor {
    background-color: forestgreen !important;
}


select:focus option:focus {
    background: red !important;
}

.action-data-cell-70 {
    width: 80%
}

.action-data-cell-15 {
    width: 25%;
}



/*Answer pulse slider*/

.rz-slider {
    border-radius: 20px !important;
    height: 15px !important;
}

.take-pulse-dialog-container .rz-steps {
    width: 100% !important;
    height: 100% !important;
}

.rz-steps ul, .answer-survey-dialog .rz-steps ul {
    display: none;
}

.take-pulse-dialog-container .rz-steps .rz-widget-content {
    overflow: visible !important;
}


/*Answer eNPS*/

.answer-enps-dialog .rz-slider-horizontal .rz-slider-range {
    background-color: var(--primary-hartic);
}


/* Komplementet till mobilbrytpunkten: centrerad dialog från 641px och uppåt. */
@media (min-width: 641px) {

    .modal-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }
}


/*
    Mediaqueries för radzen dropdowntables.
    Låg tidigare på 768px, alltså i ett spann där sidomenyn fortfarande var
    desktop – tabellerna reflowade innan resten av layouten gjorde det.
    Ligger nu på surfplattebrytpunkten.
*/
@media (max-width: 1024px) {
    /*    Dropdown table*/
    /*    titel för varje rad och checkbox för välj alla på varje rad*/
    .rz-datatable-reflow .rz-data-row > td .rz-column-title {
        display: none !important;
    }

    .rz-datatable-reflow .rz-data-row > td {
        display: revert !important;
    }

    .rz-datatable-reflow .rz-data-row {
        display: revert !important;
    }

    .dropdown-row {
        gap: 0 !important;
    }

    .rz-data-row td {
        /*      display: flex !important;*/
    }

    .rz-cell-data {
        width: 100% !important;
    }

    .checkbox-container {
        justify-content: flex-end !important;
    }

    .rz-multiselect-panel .rz-datatable .rz-data-grid-data tr {
        height: 50px !important;
    }

    .rz-dropdown-panel {
        width: auto !important;
        min-width: auto !important;
    }

    /*
        iOS zoomar in sidan när ett fält med font-size under 16px får fokus,
        och zoomar inte ut igen. 16px på alla inmatningsfält förhindrar det.

        Låg på 640px till 2026-08-24. iPad zoomar på exakt samma villkor som
        iPhone, så regeln skyddade bara telefoner – flyttad till surfplatte-
        brytpunkten. Desktop behåller sina mindre storlekar.

        OBS: den här regeln är `input, textarea` osv, alltså 0,0,1 i
        specificitet. Varje scoped `.field input` blir efter Blazors
        omskrivning `.field input[b-xxxxx]`, alltså 0,2,1, och vinner trots
        källordningen. Sidor som sätter egen fältstorlek måste därför upprepa
        regeln i sin egen .razor.css. Se skanningsskriptet i MOBILVY.md.
    */
    input, textarea, select,
    .rz-inputtext, .rz-textarea, .rz-dropdown-label, .rz-datepicker-input,
    /* Måste matcha basregelns tvåklassiga selektor (se "blazor input"
       längre upp), annars vinner den på specificitet trots källordningen. */
    .rz-calendar .rz-inputtext {
        font-size: 16px;
    }

    /*
        Tryckytor. Knapparna är 34px höga på desktop, vilket är under de 44px
        som krävs för att träffas säkert med tummen. min-height och inte height,
        så att en lång etikett fortfarande kan göra knappen högre.

        Låg på 640px till 2026-08-24. Flyttad hit av samma skäl som 16px-regeln
        ovan: en surfplatta är en pekskärm på exakt samma villkor som en telefon.
        Uppmätt i svarsdialogen vid 768 låg "Skicka svar" och "Föregående" på
        34px och "Avbryt" saknade tryckyta helt.
    */
    .button-primary, .button-secondary, .button-border, .button-delete {
        min-height: 44px;
    }

    /*
        .button-cancel är en textknapp med understrykning och kan inte bara
        göras 44px hög – då hamnar linjen långt under texten. Tryckytan läggs
        därför i ett pseudoelement, som inte påverkar layouten. Samma teknik
        som hamburgaren i TopBar.
    */
    .button-cancel {
        position: relative;
    }

        .button-cancel::after {
            content: "";
            position: absolute;
            inset: -13px -10px;
        }

    /*
        "Tillbaka"-knappen är en klasslös <button> i .back-btn-container och
        mäter 46x17. Mönstret delas av 14 sidor, så tryckytan läggs här i
        stället för i var och en. Pseudoelement av samma skäl som ovan: knappen
        ska se likadan ut, bara vara lättare att träffa.
    */
    .back-btn-container button {
        position: relative;
    }

        .back-btn-container button::after {
            content: "";
            position: absolute;
            inset: -14px -10px;
        }
}


/*Mobil*/
@media (max-width: 640px) {
    /*
        Gemensam mobilregel för alla dialoger som bygger på bootstrap-modalens
        markup (.modal > .modal-dialog > .modal-content). Varje dialog lägger en
        egen klass på .modal-content med en fast px-bredd – 648px och 662px är
        vanligast – och mobilblocken i sidornas egen CSS sätter höjd men aldrig
        bredd. Fjorton av dialogerna var därför bredare än en 360px-skärm och
        klipptes av .modal, som är position: fixed med overflow.

        Selektorn är avsiktligt tre klasser djup (0,3,0). Sidornas klasser är
        scoped och får 0,2,0 plus senare källordning, så en enklare selektor
        eller lika specificitet hade förlorat. Det här ersätter behovet av att
        rätta bredden i 37 filer var för sig.
    */
    .modal .modal-dialog .modal-content {
        width: 100%;
        padding: 16px;
    }

    .body-container{
        margin-bottom:50px !important;
    }

    /*   Radzen*/
    .rz-multiselect-panel {
        width: auto !important;
        left: 0 !important;
    }

    /* 100% och inte 100vw – 100vw räknar in den vertikala scrollbaren
       och ger därmed horisontell scroll. Gäller alla bredder här nedan. */
    .rz-lookup-panel {
        width: 100%;
    }
    /*    Dashboard*/
    .dashboard-container .rz-scheduler-nav {
        flex-wrap: nowrap !important;
    }

        .dashboard-container.rz-scheduler-nav .rz-scheduler-nav-prev-next {
            margin: 0 !important;
        }

        .dashboard-container .rz-scheduler-nav .rz-scheduler-nav-title {
            justify-content: flex-start;
        }



    /*  Wellbeing result*/

    .individual-result-container .rz-data-grid {
        width: 700px !important;
    }

    .individual-result-container .rz-paginator {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .register-page form {
        height: auto !important;
    }

    .profile-container .rz-dropdown {
        width: auto !important;
    }

    .pulse-edit-stepper ul, .answer-survey-dialog ul {
        display: none;
    }

 

    .add-team-container .rz-dropdown {
        width: 100% !important;
    }

    .register-page form {
        width: 100% !important;
    }


    .rz-multiselect-panel {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0px !important;
        left: 0 !important;
    }

    .rz-scheduler a.rz-event-list-btn:before {
        content: 'Se fler';
    }
}