:root {
    --bs-primary: #2c3e50;
    --bs-secondary: #3498db;
    --bs-secondary: #3498db;
    --bs-light: #ecf0f1;
    --bs-dark: #2c3e50;
    --accent: #9b9b9b;
    --gulfarven: #eaca33;
}

html {
  font-size: 14px;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #e3e3e3;
  margin-bottom: 60px;
}

a {text-decoration: none; }

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.btn-primary {
    background-color: var(--gulfarven) !important;
    border-color: var(--gulfarven) !important;
    color:black;
}
.btn-primary:hover {color:#555555; }

select option:hover, option:focus {  background: plum;}

/* forms */
label { font-weight: bold; color: #333333; }
.control-label {font-weight: bold; color: #333333; }
.labelrm { margin: 0 10px 0 0; }
.labelrmn { font-weight: normal !important; margin: 0 10px 0 0; }  /*kun brukt i spesifikasjonavuttak-dialog */
/*.form-control, ::picker(select), .form-control::-webkit-scrollbar {appearance: base-select; -webkit-appearance: base-select; background-color: lightyellow; color:#000000;}*/
.form-control {background-color: #d6d6d6; color:#000000;}
.form-control:focus {background-color: lightyellow; box-shadow:0 0 transparent,-0.6em 0 1em #eaca33; outline: 3px solid #eaca33; border:none;border-radius: .5rem;}
.form-control option {background-color: lightyellow;}
.form-control option:hover {background-color: var(--gulfarven);}
.form-control:disabled, .form-control[readonly] {background-color: #cccccc; opacity: .6;}
.form-group {margin-bottom: 10px;}
.form-check-input:checked {background-color: black; border-color: var(--gulfarven);}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    /* box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; */
    box-shadow: 0 0 transparent, -0.6em 0 1em #eaca33; outline: 3px solid #eaca33;
}



.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #666666;
}
.navbar {
    background-color: var(--bs-primary) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.navbar-brand, .nav-link {
    color: white !important;
}

.nav-link:hover { color: yellow !important; opacity: 0.9; }

        
.dropdown-menu {
    background-color: var(--bs-primary);
}
        
.dropdown-item {
    color: white;
}
        
.dropdown-item:hover {
    background-color: #eaca33;
}
.dropdown-item a {
    color: #d2ba4d !important;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}
        
.card:hover {
    transform: translateY(-5px);
}

        
.btn-primary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
        
.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}
.btn-outline-secondary {
    color: black;
    border-color: #6c757d;
}



.table {color:black;}  
.table th {
    background-color: var(--bs-primary);
    color: white;
}
        
footer {
    background-color: var(--bs-dark);
    color: white;
    padding: 20px 0;
    margin-top: 40px;
}

.modal-header {background-color: #cccccc;}
.modal-content {background-color:#eeeeee;}

.closebutt {font-size:1.5em;font-weight: bold;line-height: 1; color: #666666; margin:0 0 0 10px !important;}
.closebutt:hover { color: #000; text-decoration: none; cursor: pointer; } 

.input-container { display: flex; align-items: center; }
.group-container {gap: 20px; flex-wrap: wrap; align-items: start;} /* modifiserer input-container */

/* detailsview for deler (en Bootstrap-dialog) */
#gridtemplate { display: grid; width: 100%; height: 100%; grid-template:
        [header-left] "a a a" auto [header-right]
        [right-left] "b c d" 20px [right-right]
        [midten-left] "b c d" 1fr [midten-right]
        [footer-left] "e e e" 0 [footer-right]
        / 2fr 5fr 1fr; }
cont1 { background-color: beige; grid-area: a; }
cont2 { grid-area: d; padding: 16px 0 0 0; }
cont3 { grid-area: b; padding: 10px 20px 0 7px; }
cont4 { grid-area: c; padding: 10px 20px 0 0; }
cont5 { grid-area: e; }
.detailsviewpicture { width: 100%; }
#databladlink { margin: 0 10px 0 0; font-size: 1.2em;}
#bruksabvisningslink { margin: 0 10px 0 0; font-size: 1.2em; }
cont3 p { margin: 0; }
#gridtemplate a {color: grey; font-weight: bold;}

/* Generert liste i del-lager */
.grid-container { display: grid; grid-template-columns: repeat(4,400px); grid-gap: 10px; align-items: start; }
.grid-item { display: grid; grid-template-columns: 1fr; /*  1fr 1fr=to like vide columns */ border: 1px solid #cccccc; padding: 10px; }
.grid-item:hover { background-color: #efefe0 !important; }
.nested-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; }
/*.nested-grid:hover { background-color: #eeeeee !important; }*/
.nested-grid-item { /* nested grid items */ }
.bga { background-color: cornsilk;}
.custa { margin:0 18px 0 0; width:90px; display:inline;}
.custa:hover { background-color: var(--gulfarven); color:black; }
#levfilterfelt:hover { cursor: pointer; }

/* Edit view for deler */
#deledittemplate { display: grid; width: 100%; height: 100%; grid-template:
        [header-left] "a a a" auto [header-right]
        [right-left] "b c d" 20px [right-right]
        [midten-left] "b c d" 1fr [midten-right]
        [footer-left] "e e e" 0 [footer-right]
        / 2fr 5fr 1fr; }
cont1 { background-color: beige; grid-area: a; }
cont2 { grid-area: d; padding: 16px 0 0 0; }
cont3 { grid-area: b; padding: 10px 20px 0 7px; }
cont4 { grid-area: c; padding: 10px 20px 0 0; }
cont5 { grid-area: e; }
#deledittemplate a { color: grey; font-weight: bold; }

.knapp { height: 36px; display: inline-block; position: relative; top: -6px; vertical-align: baseline; text-align: center; font-size: .9rem; font-weight: 500; background-color: #eaca33; color: black; border-radius: 5%; margin: 0 0 0 7px; padding: 6px 10px 0 10px; border: 1px solid black;border-radius:5px;}
.knapp:hover { background-color: #eaca33; color:#666666; }
.hto { font-size: 2rem; font-weight: 500; }
.smalints { width: 50px; }
.datohfelt { width: 120px; margin-right: 10px; }
.buttonmargin { width: 50px; margin: 0 10px 0 0; }

table tr:hover {background-color: lightcyan; }

/* Kalender ---------------- */
    .calendar-page
    {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        box-sizing: border-box;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background-color:#eeeeee;
    }

    .calendar-header
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .calendar-header span
    {
        font-size: 1.1rem;
        opacity: 0.8;
    }

    .calendar-ukedager
    {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: 3rem;
        border-radius: 0.5rem;
        border: 1px solid #000;
        overflow: hidden;
        height:2.5rem;
        margin:0;
    }

    .calendar-day-name
    {
        background: #333333;
        color:#ffffff;
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        font-size: 1.1rem;
        font-weight: 600;
        text-align: center;
    }

    .calendar-day-name:last-child
    {
        border-right: none;
    }

    .calendar-grid
    {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: minmax(2.5rem, auto);
        border: 1px solid #000;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .calendar-cell
    {
        background: #dddddd;
        border-right: 2px solid #eee;
        border-bottom: 2px solid #eee;
        display: flex;
        flex-direction: column;
        padding: 0.25rem;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    .calendar-cell:nth-child(7n)
    {
        border-right: none;
    }

    .calendar-day-number
    {
        font-size: .9rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        align-self: flex-end;
    }

    .calendar-day-outside
    {
        background: transparent;
        color: #aaa;
    }

    .calendar-events
    {
        flex: 1;
        overflow-y: auto;
        padding-right: 0.1rem;
    }

    .calendar-event
    {
        font-size: 0.75rem;
        line-height: 1.2;
        margin-bottom: 0.25rem;
        padding: 0.2rem 0.25rem;
        border-radius: 0.35rem;
        border: 1px solid #ddd;
        /*background-color: #fdfdfd;*/
        background-color: #ffffee;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .calendar-event:hover
    {
        /*background-color: #feffbd;*/
        background-color: lightcyan;
    }

    .calendar-event-header
    {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        font-weight: 600;
    }

    .calendar-event-time
    {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        color:red;
    }

    .calendar-event-body
    {
        margin-top: 0.15rem;
    }

    .calendar-badge
    {
        display: inline-block;
        font-size: 0.65rem;
        padding: 0.05rem 0.35rem;
        border-radius: 999px;
        border: 1px solid #ccc;
        margin-right: 0.25rem;
        white-space: nowrap;
    }

    .calendar-status-active
    {
        border-color: #1f8b4c;
    }

    .calendar-events::-webkit-scrollbar
    {
        width: 6px;
    }

    .calendar-events::-webkit-scrollbar-thumb
    {
        border-radius: 999px;
        background: #ccc;
    }

    @@media (max-width: 768px)
    {
        .calendar-header

    {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .calendar-day-name
    {
        font-size: 0.7rem;
    }

    .calendar-day-number
    {
        font-size: 0.8rem;
    }

    .calendar-event
    {
        font-size: 0.7rem;
    }

    }
/* Kalender slutt ---------------- */

@media print { 
    .noprint { visibility: hidden; }
    }