/***********************************************
 * NOTE: site_common.css
 * Linked view(s): Views/Shared/_LayoutReciever.cshtml
 * Purpose: Global layout styles used by the receiver layout.
 * Key mappings (from layout):
 *  - `body.sback`          : background image applied when an owner-specific background is active
 *  - `.left-column`        : left navigation column (tile/menu area)
 *  - `.right-column`       : main content column
 *  - `.menu-toggler`       : desktop menu toggle button
 *  - `.menu-toggler-m`     : mobile menu toggle button
 *  - `.compact` / `menucoll` (localStorage): compact menu state stored in localStorage
 *  - `.toporglogo`         : organization logo in the header
 *  - `.searchform` / `#quicksearch_div`: quick search form in header
 *  - `#LoadingDiv` / `.pageLoader`: page loader overlay
 *  - `.hidable`, `.animable`, `.scalable` : JS-driven show/hide animation utility classes used by pages
 *  - Button utility classes `.btn`, `.btn-primary`, `.btn-descreet` etc. used across layout and views
 * Notes for modernization:
 *  - Consider scoping layout-specific styles to a container class (e.g. `.layout-receiver`) to avoid bleed
 *  - CSS variables in `:root` provide centralized theming; move owner/theme overrides to a theme file
 *  - Many utility classes are globally defined; consider converting frequently reused patterns into a design-token driven system
 **********************************************/

:root {
    --main-font: Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --title-font: roboto condensed;
    --main-font-size_xl: 1.5rem;
    --main-font-size_l: 1.0rem;
    --main-font-size_m: 0.95rem;
    --main-font-size: 0.85rem;
    --main-font-size_s: 0.8rem;
    --main-font-size_xs: 0.7rem;
    --table-font-size: 0.85rem;
    --table-font-size_s: 0.8rem;
    --main-line-height: 1.25rem; /*NY - Förstör något?*/
    --normal-line-height: normal;
    --text-color-ondark: rgba(240, 240, 240, 1.0);
    --text-color-onbright: rgba(70, 70, 70, 1.0);
    --text-color-onbrighter: rgb(100, 100, 100);
    --text-color-midweak: rgba(120, 120, 120, 1.0); /*stats head*/
    --text-color-weak: rgba(140, 140, 140, 1.0);
    --text-color-link: rgb(40, 150, 221); /*stats head*/
    --text-color-link-hover: rgb(38, 115, 165); /*stats head*/
    --btn-inp-padding-x: 0.75rem;
    --btn-inp-padding-y: 0.375rem;
    --btn-inp-border-radius: 0.375rem;
    --btn-inp-font-size: 0.85rem;
    --btn-inp-line-height: 1.5rem;
    --btn-inp-font-weight: 400;
    --btn-bg: rgba(0,0,0,0.1);
    --btn-bg-primary: #008CBA;
    --btn-bg-danger: #de2d2d;
    --btn-bg-descreet: #f7f7f7;
    --btn-border-width: 1px;
    --btn-color: rgba(80, 80, 80, 1.0);
    --btn-color-primary: var(--text-color-ondark);
    --btn-color-danger: var(--text-color-ondark);
    --btn-color-descreet: var(--text-color-onbright);
    --btn-border-color: transparent;
    --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --btn-hover-color: #fff;
    --btn-hover-border-color: #808080;
    --btn-hover-bg: rgba(65, 65, 65, 0.8);
    --body-bgimg-none: url(/images/backgrounds/bg_none.png);
    --body-bgimg: url(/images/backgrounds/bg_organization.jpg);
    --box-shadow-main: 0px 1px 8px 0px rgba(80, 80, 80, 0.4);
    /*INPUT Label*/
    --input-label-color: rgba(100, 100, 100, 1.0);
    --input-label-font-size: 0.8rem;
    --input-label-padding: 0px 2px 2px 2px;
}

body {
    padding: 0;
    margin: 0;
    border: 0;
    font-family: var(--main-font);
    color: var(--text-color-onbright);
    font-size: var(--main-font-size);
    line-height: var(--main-line-height);
    background: #ffffff var(--body-bgimg-none) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    transition: background-image ease-in-out 0.3s;
    /*min-height:100lvh;*/
}
    body.sback {
        background-image: var(--body-bgimg);
    }


*, ::after, ::before { box-sizing: border-box;}

h1, h2, h3, h4 {font-weight: normal; font-family: var(--title-font);}

h1 {font-size: 1.7rem; line-height: 1.75rem; margin: 15px 0px;} /*margin ca21 standard*/
h2 {font-size: 1.5rem; line-height:normal; margin: 12px 0px;} /*margin ca19 standard*/
h3 {font-size: 1.2rem; line-height:normal}
h4 {font-size: 1.0rem;}

ul, li {list-style: none; margin: 0; padding: 0;}
/*Not for editors*/
.note-editable ul, .note-editable ol, .note-editable li {
    list-style: revert;
    margin: revert;
    padding: revert;
}

a {cursor:pointer; text-decoration:none; color:rgb(38, 115, 165)} 
a:hover { color:rgb(78, 158, 211)} 

@media screen and (max-width:850px) {
    h1 {font-size: 1.65rem;}
    h2 {font-size: 1.3rem;}
    h3 {font-size: 1.0rem;}
    h4 {font-size: 0.9rem;}
    :root {
        --main-font-size_xl: 1.05rem; /*(1.2rem)*/
        --main-font-size: 0.80rem; /*(0.85rem)*/
        --table-font-size: 0.6rem;
        --btn-inp-font-size: 0.80rem;
    }
}


.w-100 {width: 100%;} 
.h-100 {width: 100%;} 

/* (animations — see site_common_animations.css) */

.container { /*Används fler platser än index?*/
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px; /*max-width: 720px;*/
    width: 100%;
    padding: 0px 10px; /*lagt till på index*/
}

.ico {
    display: flex;
    justify-content: center;
    align-items: center;
}
    .ico img {
        display: flex;
        /*flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        align-self: center;*/
        justify-self: center;
        object-fit: contain;
        /*width: 20px;
        height: 20px;*/
    }  

.padded {padding: 20px;} 
.paddedw {padding-right: 20px; padding-left: 20px;}

  .nav-logo {
    font-size: 1.3rem;
    /*padding: 20px 0px;*/
    text-decoration: none;
    color: var(--text-color-ondark);
    margin: 4px 0px 0px 0px;
  } 
  .nav-logo img { max-height:30px;}

main:not(.indialog) {
    /*Blur at load*/
    /*animation-name: bluranim;
    animation-duration: 0.7s;*/
}
/*@keyframes bluranim {
    from {
        -webkit-filter: blur(50px);
        -moz-filter: blur(50px);
        -o-filter: blur(50px);
        -ms-filter: blur(50px);
    }
    to {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
    }
}*/
/* (loginnav — see _loginnav.scss) */
/*Login/out buttons*/
/*.loginnav {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    padding: 0 20px;
}
@media screen and (max-width:300px) {
    .loginnav {
        padding: 0 10px;
    }
}*/
/* (forms — see site_common_forms.css) */

/* (tables — see site_common_tables.css) */


    /*---- EXPORT TABLE DROP ----*/
/*.exportdrop {
    position: absolute;
    top: 30px;
    right: 0px;
    box-shadow: 0px 0px 2px 2px rgba(40,40,40,0.30);
    backdrop-filter: blur(5px);
    background-color: #ffffffa6;
    border-radius: 5px;
    z-index: 15;
    pointer-events: none;
    display: none;
}
.exportdrop.active {
    pointer-events:auto;
    display:block;
}
    .exportdrop .btn{
        min-height:38px;
    }*/
    /*---- EXPORT TABLE DROP - END ----*/
/* (dialog base styles — see site_common_dialogs.css) */

/*--- Schema dialog*/
.schema-dialog {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.schema-dialog .field {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-radius:5px;
    padding:3px 10px;
    border:1px dashed #eee;
}
.schema-dialog .field textarea{
    min-width:100%;
    height:10ch;
}
.schema-dialog .field > label {
    padding-right: 5px;
    display: inline-block;
    width: 150px;
}

/*Help icon ----------------*/
    .helpico {
        display: inline-block;
        cursor: pointer;
        height: auto; width: 30px;
        vertical-align: middle;
        /*filter: brightness(60%);*/
        margin: -3px 0px 0px 0px;
    } .helpico::before {
            display: block;
            content: " ";
            height: 18px; /*80%*/ width: 18px;
            margin:0px auto; padding:0px;
            background: url(../images/icos/actico_help.png);
            background-size: contain; 
            vertical-align: middle;

            filter: brightness(60%);
        }

/*.helpico.ondark { filter: brightness(60%);}*/
    /*.helpico:hover {filter: brightness(20%);}*/
    .helpico:hover::before {filter: brightness(20%);}

/*Fieldsets defaults -----------*/
    fieldset {border: none; padding: 0; margin: 0;}


/* (dropdown — see _dropdown.scss) */
/* (dialog iframe — see site_common_dialogs.css) */
/* (tabs buttons — see site_common_buttons.css) */


/*--- More Info --- */
.moreinfo {
    position:relative;
    cursor:pointer;
}
.moreinfo_hover {
    display:none;
    position:absolute;
    background-color:#ffffff;
    border:1px solid #808080;
    padding:5px;
}
    .moreinfo_hover img {
        float: left;
    }
.moreinfo:hover .moreinfo_hover {
    display: block;
    z-index: 10;
}
/*--- More Info END --- */

/*--- EMPTY TABLE OVERLAY ---*/
.emptyable {
    position: relative;
}

    .emptyable .emptymsg {
        display: none;
    }

    .emptyable.empty .content-box {
        filter: blur(2px);
        pointer-events: none;
        /*opacity:0.7;*/
    }

    .emptyable.empty .emptymsg {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        max-width: 90%;
        background-color: rgba(255,255,255,0.90);
        border-radius: 10px;
        text-align: center;
        box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.90);
    }

    .hideempty.empty {
        display:none;
    }
/*--- EMPTY TABLE OVERLAY END ---*/

/*--- Scrollbar --- */

/*Only force scroll y for webkit browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        overflow-y: scroll;
    }
        /* width */
        body::-webkit-scrollbar{
            width: 6px;
        }
        /* Track */
        body::-webkit-scrollbar-track {
            background-color: #7d7d7d;
        }
        /* Handle */
        body::-webkit-scrollbar-thumb {
            background: #535353;
        }
            /* Handle on hover */
            body::-webkit-scrollbar-thumb:hover {
                background: #222;
            }

    /*The device has a low accuracy pointer (like a finger on a touchscreen)*/
    @media (pointer: coarse) {
        body::-webkit-scrollbar{
            width: 4px;
        }
    }
}

/*--- Scrollbar END --- */

/*------------------------------------------------------*/
/*MEDIA ------------------------------------------------*/

@media screen and (max-width:900px) {
    /*    body, .topbtn, .popupbtn, .botbtn, .botbtn_dark {
        font-size: .78rem;}

    .col_xs {width: 3rem !important;}
    .col_s {width: 4.5rem !important;}*/
    /*    .contenttop h2, h2, h3, h4, h1 {
        font-size: 0.85rem;}

    .inlineitem.item2 {width: 99.6%;}
    .inlineitem.item3 {width: 49.6%;}
    .inlineitem.item4 {width: 33%;}
    .inlineitem.item5 {width: 24.6%;}*/
}
/*@media screen and (max-width:500px) {
    .hide500 {
        display:none;
    }
}
@media screen and (max-width:600px) {
    .hide600 {
        display: none;
    }
}*/
/*@media screen and (max-width:850px) {
    .hide850 {display: none;}

    th, td {padding: 8px 4px;}
    .col_xs {max-width: 70px;}
    .col_status {max-width: 52px;}
    .btnholder {width: 40px; max-width:40px;}
    tr .status span {display: none;} 
    tr .status {text-align:center; } 
}

@media screen and (max-width:650px) {

}

@media screen and (max-width:450px) {
    td { padding: 8px 2px; font-family: var(--title-font);}
    .padded {padding: 10px;} 
    .paddedw {padding-right: 10px; padding-left: 10px;} 
}

@media screen and (max-width:380px) {
    td, th {
        padding: 8px 2px;
        font-size: 0.7rem !important;
    }
    .col_status {max-width: 44px;}
    .btnholder {width: 30px; max-width:30px;}
}*/