/* ####################### */
/* General settings
/* ####################### */

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body, html, form, fieldset, legend, input, button, textarea, label, img, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, div, p, span, a, blockquote, address, th, td, tfoot, abbr {
    margin: 0;
    padding: 0;
    border: none;
}

/* --- Body --- */
body {
    color: #363636;
    font-size: 14px;
    z-index: 500;
    line-height: 1.4em;
    padding: 0;
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: normal;
    background: #ffffff;
    overflow-y:scroll;
}

/* --- Text elements ---*/



h1, h2, h3, h4, h5 {
    display: block;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 1.286em;
    font-weight: bold;
    margin: 20px 0 10px 0;
    color: #363636;
    text-transform: uppercase;
}

h2 {
    font-weight: bold;
    font-size: 1.143em;
    margin: 20px 0 10px 0;
    
    color: #45a0a3;
}

h3, h4, h5 {
    font-weight: bold;
    font-size: 1em;
    margin: 20px 0 5px 0;
    color: #363636;
}

p, span {
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 10px;
}

ul {
    clear: left;
    padding: 15px 40px 20px 40px;
    margin: 0 27px 15px 27px;
}


ol {
    margin-bottom: 15px;
    margin-left: 0;
    padding: 0 0 0 40px;
}

blockquote {
    text-align: center;
    padding: 0 40px 0 40px;
    margin: 0;
    display: inline-block;
}

    blockquote p {
        font-size: 1.143em;
        line-height: 1.475em;
        font-style: italic;
        font-weight: 400;
        color: #45a0a3;
        margin: 0 0 24px 0;
        display: inline-block;
    }

hr.accordion {
    border-top: 1px solid #3fd1d6;
    margin: 7px 0 0 0;
}

hr.analysdivider {
    border-top: 1px solid #45a0a3;
    margin: 0 0 7px 0;
}



/* ####################### */
/* Links
/* ####################### */

#framework a {
    float: none;
    outline: none;
    color: #45a0a3;
    font-weight: bold;
    text-decoration: none;
}

    #framework a:hover {
        color: #2f6e70;
        text-decoration: none;
    }



a.btn {
    background: #45a0a3;
    padding: 9px;
    color: #ffffff !important;
    font-weight: normal !important;
    text-transform: uppercase;
    border-radius: 3px;
}

    a.btn:hover {
        background: #2f6e70;
        cursor: pointer;
    }

/* ####################### */
/* Framework / Container
/* ####################### */

#framework {
    width: 100%;
    margin: 0 auto 0 auto;
}

#fullwidth {
    float: left;
    width: 100%;
    margin: 0 auto 0 auto;
}

/* ######################### */
/* Content / wrap
/* ######################### */

#wrap {
    width: 690px;
    z-index: 500;
    margin: 0 auto 0 auto;
}


#wrap_pages {
    width: 960px;
    z-index: 500;
    margin: 0 auto 0 auto;
}

#content {
    float: left;
    width: 100%;
    min-height: 500px;
    height: auto;
    position: relative;
    margin: 70px 0 0 0;
    padding: 0 0 50px 0;
}

#content_pages {
    float: left;
    width: 100%;
    height: auto;
    min-height: 500px;
    position: relative;
    margin: 80px 0 50px 0;
    padding: 0 0 50px 0;
}

/* ######################### */
/* Menu / Footer controls
/* ######################### */

header {
    width:100%;
    float:left;
    position:fixed;
    z-index: 1000; 
}

.topnav,
.public_topnav {
    background-color: #45a0a3;
    /*overflow: hidden;*/
    height: auto;
    min-height: 40px;
}

    .topnav a,
    .public_topnav a {
        float: left !important;
        display: block;
        color: #ffffff !important;
        text-align: left;
        padding: 10px 16px !important;
        text-decoration: none !important;
        text-transform: uppercase;
    }

        .topnav a:hover,
        .public_topnav a:hover {
            background-color: #2f6e70;
        }

    .topnav .icon {
        display: none;
    }


/* ######################### */
/* Login page - default.aspx
/* ######################### */

.row {
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.image_one {
    float: right;
    width: 180px;
    height: 180px;
    margin: 0 450px 0 0;
    padding: 0;
    background: #45a0a3;
    border: 1px solid #ffffff;
}

    .image_one h1 {
        font-size: 3.2em;
        font-family: 'Times New Roman', Times, serif;
        font-style: italic;
        text-align: center;
        padding: 40px 0 10px 0;
        color: #ffffff !important;
    }

    /*.image_one p.om{
            padding: 32px 81px 88px 81px;
            
            margin: 0;
            color: #ffffff !important;
            text-decoration: none;
            z-index: 999;
        }*/

    .image_one:hover {
        background: #2f6e70;
    }

    .image_one p.om {
        font-size: 1.8em !important;
        font-family: 'Times New Roman', Times, serif;
        font-style: italic;
        text-align: center;
        color: #ffffff;
        z-index: 500;
    }

.image_four {
    float: left;
    width: 180px;
    height: 180px;
    margin: 0 0 0 180px;
    padding: 0 0 0 0;
    background: #45a0a3;
    border: 1px solid #ffffff;
}

.main_row {
    float: left;
    width: 100%;
    height: 180px;
    margin: 0;
    padding: 0;
}

    .main_row .image_two {
        width: 180px;
        height: 180px;
        float: left;
        position: relative;
        margin: 0 auto 0 auto;
        padding: 0;
        background: #45a0a3;
        border: 1px solid #ffffff;
    }


    .main_row .login_container {
        width: 330px;
        height: 180px;
        float: left;
        position: relative;
        margin: 0 auto 0 auto;
        padding: 0 0 20px 20px;
        background: #45a0a3;
        border: 1px solid #ffffff;
    }

        .main_row .login_container h1 {
            color: #ffffff !important;
        }

        .main_row .login_container ul.login_content {
            width: 100%;
            clear: left;
            font-size: 0.875em;
            font-weight: normal;
            line-height: 1.475em;
            color: #363636;
            padding: 0 25px 0 0;
            list-style: none;
            margin: 0;
        }


            .main_row .login_container ul.login_content li {
                width: 100%;
                float: left;
                height: 35px;
                padding: 7px 0 7px 0;
                color: #363636 !important;
                /*background: #f5f5f5;*/
                margin: 10px 0 0 0;
                border-radius: 3px;
            }

                .main_row .login_container ul.login_content li a.btn_mobile {
                    width: 100%;
                    float: left !important;
                    height: 35px;
                    padding: 11px 10px 10px 10px;
                    color: #393939 !important;
                    margin: 10px 0 0 0;
                    border-radius: 3px;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    background: #ffffff;
                    box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.75);
                    -webkit-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.75);
                    -moz-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.75);
                }

                .main_row .login_container ul.login_content li a.btn_bank {
                    width: 100%;
                    float: left !important;
                    height: 35px;
                    padding: 11px 10px 10px 10px;
                    color: #393939 !important;
                    margin: 10px 0 0 0;
                    border-radius: 3px;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    background: #ffffff;
                    box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.75);
                    -webkit-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.75);
                    -moz-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.75);
                }

                    .main_row .login_container ul.login_content li a.btn_bank:hover,
                    .main_row .login_container ul.login_content li a.btn_mobile:hover {
                        background: #f5f5f5;
                        text-decoration: none !important;
                    }

    .main_row .image_three {
        width: 180px;
        height: 180px;
        float: left;
        position: relative;
        margin: 0 auto 0 auto;
        padding: 0;
        background: #45a0a3;
        border: 1px solid #ffffff;
    }

#footer {
    width: 100%;
    float: left;
    position: relative;
    padding-left: 10px;
    margin-top: 50px;
}

#footer p {
    margin-bottom: 0;
}

#href_integrity {
    margin-left: 145px;
}

#href_infosec {
    margin-left: 20px;
}


/* ######################### */
/* Support page - support.aspx
/* ######################### */
/* ######################### */
/* errorpage - felsida.aspx
/* utloggad.aspx
/* ######################### */
/*.message_logout
        {
            float:left;
            width: 100%;
            height:120px;
           
            background: #aad3ed;  
            border-radius: 11px;
            padding: 50px 20px 0 20px;
            color: #363636;
            box-shadow: 0 1px 2px rgb(128, 128, 128);
        }*/
a.btn.logout {
    float: left;
    position: relative;
    width: auto;
    top: 30px;
}

/*a.error.btn
{
    bottom:58px;
    right: 20px;
    position:absolute;
}*/

/* ######################### */
/*  Footer
/* ######################### */

/* footer-elementet - ingen position här, hanteras av inre divs */
footer {
    width: 100%;
    float: left;
}

/* Standard-footer inre div: position fixed */
#ctrlFooter_footer,
#ctrlPublicFooter_footer {
    float: left;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: auto;
    padding: 15px 15px 0 15px;
    background-color: #363636;
    color: #ffffff;
    font-size: 0.786em;
}

    #ctrlFooter_footer .footer_wrap,
    #ctrlPublicFooter_footer .footer_wrap {
        width: 960px;
        margin: 0 auto 0 auto;
        z-index: 500;
    }

.footer_content {
    width: 70%;
    height: auto;
    position:relative;
    float:left;
}
.footer_content_right {
    width: 30%;
    height: auto;
    position: relative;
    float: right;
    text-align:right;
}

#ctrlFooter_footer .footer_content a,
#ctrlPublicFooter_footer .footer_content a {
    float: none;
    outline: none;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

    #ctrlFooter_footer .footer_content a:hover,
    #ctrlPublicFooter_footer .footer_content a:hover {
        color: #45a0a3;
    }

#footerBottom {
    float: left;
    width: 100%;
    position: relative;
    height: 10px;
    background-color: #000000;
}

/* ####################### */
/* Whitelabel
/* ####################### */

/* Baserat på LabPortalen MudTheme och MainLayout.razor
/* ####################### */

/* --- CSS-variabler (motsvarar MudTheme PaletteLight) --- */
:root {
    --wl-primary:           #00665C; /* Primär färg                  */
    --wl-primary-hover:     #00473F; /* Hover för primärknappar      */
    --wl-secondary:         #009688; /* Sekundär färg                */
    --wl-secondary-hover:   #006B60; /* Hover för sekundära knappar  */
    --wl-appbar-background: #EEEEEE; /* Colors.Gray.Lighten3         */
    --wl-appbar-text:       #000000; /* Colors.Shades.Black          */
    --wl-info:              #FFFFFF; /* Colors.Shades.White          */
    --wl-error:             #C62828; /* Colors.Red.Darken2           */
    --wl-warning:           #ffc500;
}

/* --- Layout --- */
.whitelabel-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* --- Huvudinnehåll --- */
.whitelabel-main-content {
    flex: 1 0 auto;
    padding: 2px 16px;
}

/* --- Typografi (motsvarar MudTheme Typography.Default) --- */
.whitelabel-container,
.whitelabel-container * {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.0075em;
}

/* --- Rubrik --- */
.whitelabel-headline {
    color: #00695C;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: none;
}

/* --- Informationstext --- */
.whitelabel-infotext {
    color: #000000;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* --- Whitelabel inloggningssektion --- */
.whitelabel-login-section {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 37.5rem;
}

/* Informationstext ovanför knappen - motsvarar MudText i LabPortalen.App */
.whitelabel-bankid-info {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* BankID-knapp - matchar exakt MudButton i LabPortalen.App
   Size.Medium: font-size:1.125rem; padding:1rem; border-radius:0.75rem; justify-content:start */
.whitelabel-btn-bankid {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 50%;
    padding: 1rem;
    background-color: var(--wl-primary);
    border-radius: 0.75rem;
    border: none;
    color: #ffffff !important;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 0.0892857143em;
    line-height: normal;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.whitelabel-btn-bankid:hover,
.whitelabel-btn-bankid:focus {
    background-color: var(--wl-primary-hover);
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
}

/* Ikon - matchar mud-button-icon-start med padding-inline-start: 2px */
.whitelabel-btn-bankid-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: #ffffff;
    flex-shrink: 0;
    padding-inline-start: 2px;
}

/* --- Whitelabel-container centrerad vertikalt --- */
.whitelabel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 128px); /* 64px header + 64px footer */
    padding: 2rem 1rem;
}

/* ######################### */
/* Whitelabel header
/* ######################### */

.topnav.whitelabel-header,
.public_topnav.whitelabel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 16px !important;
}

.topnav.whitelabel-header a,
.public_topnav.whitelabel-header a {
    float: none !important;
}

.topnav.whitelabel-header .header-logo,
.public_topnav.whitelabel-header .header-logo {
    /*order: -1;*/ /* Säkerställer att loggan alltid visas först */
    max-height: 40px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ######################### */
/* Whitelabel header - nav-länkar hover och aktiv flik
/* ######################### */

/* Hover - mörkare nyans av HexColor_Secondary */
.public_topnav.whitelabel-header a.header-nav-link:hover,
.topnav.whitelabel-header a.header-nav-link:hover {
    background-color: var(--wl-nav-hover-bg) !important;
    text-decoration: none !important;
}

/* Aktiv flik - border-bottom i HexColor_Primary */
.public_topnav.whitelabel-header a.header-nav-link.header-nav-active,
.topnav.whitelabel-header a.header-nav-link.header-nav-active {
    border-bottom: 0.25rem solid var(--wl-nav-active-border) !important;
    background-color: var(--wl-nav-hover-bg) !important;
}

/* TABLET (600px–1279px) */
@media (min-width: 600px) and (max-width: 1279px) {
    .header-logo         { max-height: 32px; }
    .whitelabel-logo     { max-height: 32px; }
    .whitelabel-headline { font-size: 1.5rem; }
    .whitelabel-infotext-border { padding: 1rem; }
}

/* MOBILE (≤599px) */
@media (max-width: 599px) {
    .topnav.whitelabel-header,
    .public_topnav.whitelabel-header {
        flex-wrap: wrap;
        min-height: auto;
        padding: 8px;
    }
    .whitelabel-header .header-logo   { max-height: 32px; }
    .whitelabel-header .header-nav-first { margin-left: 0; }
    footer.whitelabel-footer           { min-height: auto; padding: 8px 16px; }
    footer.whitelabel-footer .whitelabel-footer-center { flex-direction: column; gap: 0.5rem; }
}

/* ######################### */
/* Whitelabel footer
/* ######################### */

footer.whitelabel-footer {
    background-color: var(--wl-appbar-background);
    color: var(--wl-appbar-text);
    width: 100%;
    min-height: 64px;
    /* display: flex !important; */
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem 0.5rem;
    box-sizing: border-box;
    float: none !important;
}

/* Centrerad rad med jämnt mellanrum */
footer.whitelabel-footer .whitelabel-footer-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 0.25rem 0.5rem;
    flex-wrap: wrap;
}

/* whitelabel-footer-version deltar normalt i flexraden */
footer.whitelabel-footer .whitelabel-footer-center .whitelabel-footer-version {
    display: flex;
    align-items: center;
}

/* Neutraliserar <p>-taggen från ctrlCopywrite - ENBART i whitelabel-footern */
footer.whitelabel-footer .whitelabel-footer-center .whitelabel-footer-version p {
    display: inline;
    margin: 0;
    font-size: 0.875rem;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    color: #000000;
    line-height: normal;
    white-space: nowrap;
}

/* Alla länkar i whitelabel-footer-center: understrukna, svarta, normalvikt */
#framework footer.whitelabel-footer .whitelabel-footer-center a,
#fullwidth footer.whitelabel-footer .whitelabel-footer-center a {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    color: #000000 !important;
    text-decoration: underline !important;
    white-space: nowrap;
    font-weight: normal !important;
}

#framework footer.whitelabel-footer .whitelabel-footer-center a:hover,
#fullwidth footer.whitelabel-footer .whitelabel-footer-center a:hover {
    color: #000000 !important;
    opacity: 0.75;
    text-decoration: underline !important;
}

/* Whitelabel-footer: vit text för mörka bakgrundsfärger */
#framework footer.whitelabel-footer .whitelabel-footer-center.whitelabel-footer-light a,
#fullwidth footer.whitelabel-footer .whitelabel-footer-center.whitelabel-footer-light a {
    color: #ffffff !important;
}

#framework footer.whitelabel-footer .whitelabel-footer-center.whitelabel-footer-light a:hover,
#fullwidth footer.whitelabel-footer .whitelabel-footer-center.whitelabel-footer-light a:hover {
    color: #ffffff !important;
    opacity: 0.75;
}

#framework footer.whitelabel-footer .whitelabel-footer-center.whitelabel-footer-light p,
#fullwidth footer.whitelabel-footer .whitelabel-footer-center.whitelabel-footer-light p {
    color: #ffffff !important;
}

.signing-icon {
    font-size: 36px;
    margin-bottom: 6px;
    color: #45a0a3;
}

/* ####################### */
/* SynlabDrugForm - Remissvisning (PatientPortalen)
   ID 8324 i ReQtest. 20260427 //Annika Aversten */
/* ####################### */

.referralInfo.synlabDrugForm {
    padding: 10px 0;
}

.referral-fields {
    margin-bottom: 12px;
}

.referral-field {
    margin-bottom: 6px;
    font-size: 14px;
}

.referral-section {
    margin-bottom: 14px;
}

/* Panel stor - analystabell utan linjer */
.referral-panel-table {
    border-collapse: collapse;
    width: auto;
    margin-top: 6px;
    table-layout: auto;
}

.referral-panel-table td {
    border: none !important;
    padding: 2px 16px 2px 0 !important;
    font-size: 13px;
    vertical-align: top;
    white-space: nowrap;
}

/* Tilläggsanalyser */
.referral-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}

.referral-list li {
    font-size: 13px;
    padding: 2px 0;
}

/* Signering samtycke - ikoner */
.signing-icons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.signing-icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--signing-primary-color, #45a0a3);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 100px;
    min-height: 80px;
}

.signing-icon {
    font-size: 36px;
    margin-bottom: 6px;
    color: var(--signing-primary-color, #45a0a3);
}

.signing-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--signing-primary-color, #45a0a3);
}

.signing-date {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

/* Signaturbild (Touch) */
.signing-signature-box {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 4px;
    background-color: white;
}

.signing-signature-img {
    max-width: 150px;
    max-height: 80px;
    height: auto;
}

/* Vaccin-ikoner i analysöversikten */
.analysis-vaccines-icon {
    font-size: 16px;
    /*vertical-align: middle;*/
    margin-right: 8px;
    margin-top: 4px;
    color: var(--signing-primary-color, #45a0a3);
}