/*Syntax notes
Element definitions start with a punctuation '.', and naming is made in lowercase descriptive words
example:
.tablebutton{
    var:value;
    var:value;
    var:value;
    var:value;
    var:value;
    var:value;
}
*/
/*Colors thaty are to be used dynamically in the CSS (divs, table or other elements), are defined here
They can be assigned in other css definitions like this:
.examplecssdefinition{
    background-color: var(--imgreenlight-color);
}
*/
:root{
    --main-color: #E1e6e5;
    --imhighyellow:#e4b73c;
    --immidyellow:#EFD48A;
    --imlowyellow:#F4E2B1;
    --imgreenlight-color: #A4B3B2; 
    --imgreenlightaccent-color:#E1e6e5; 
    --imgreenlighertaccent-color:#F1F6F5; 
    --imgreen-color: #67817F;
    --afeaturelink-color:#212529;
    --imgreendark-color:#234C3B;
    --imgray:#30373b;
}



/* Styling elements follow. These contain colours and fonts *********************/
/* *********** BASIC STYLING ****************************************************/

body{
    font-family:'Lexend Exa', Verdana, sans-serif;
    background:var(--imgreen-color);
    color:var(--imgreenlightaccent-color);
}
h1{
    font-family: 'Lexend Exa', Verdana, sans-serif;
    color:var(--imgreenlightaccent-color);
}
h2{
    font-family: 'Lexend Exa', Verdana, sans-serif;
    color:var(--imgreenlightaccent-color);
}
h3{
    font-family: 'Lexend Exa', Verdana, sans-serif;
    color:var(--imgreenlightaccent-color);
}
h4{
    font-family: 'Lexend Exa', Verdana, sans-serif;
    color:var(--imgreenlightaccent-color);
}

.h4{
    font-family: 'Lexend Exa', Verdana, sans-serif;
    color:var(--imgreenlightaccent-color);
}
hr.G4im {
    border-top: 1px solid var(--imgreenlight-color);
}
/************************************************************************************/
/*************************  Page div -> Main Container ******************************/
.pagecontainerdiv {
  width: 100%;
  margin: 0 auto; /* Center the div horizontally */
  background-color: var(--imgreen-color); 
  padding: 2px; 
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border-radius:15px;
}    
/*below css containers are used for the filter containers*/
.main-appbanner {
    width: 100%;
    border:1px solid var(--imgreen-color);
    box-sizing: border-box;
    text-align:left;
    /* top right bottom left*/
    margin: 0px 0px 0px 0px;
    /* top right bottom left  */
    padding: 15px 15px 1px 15px;
    background-color:var(--imgreen-color);/*IM grøn*/
    color: var(--imgreenlight-color);
}
.main-appbanneraccent {
    width: 99%;
    /* top right bottom left  imgreenlightaccent-color*/
    margin: 0px 0px 0px 0px;
    border:3px solid var(--imgreen-color);
    border-radius: 5px;
    padding: 0;
    border-collapse: collapse; background-color:var(--imgreen-color); /* IM grøn*/
    margin-bottom: 0;
    color:var(--imgreenlight-color);
}
.main-appbanneraccentalternate {
    background-color: var(--immidyellow);
    margin-bottom: 0;
    color:var(--imgreenlight-color);
}

.collapsible {
    background-color: var(--imgreen-color);
    color: var(--imgreenlightaccent-color);
    cursor: pointer;
    padding:18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 12px;
}

.imgmap {

}

.active, .collapsible:hover {
    background-color: var(--immidyellow);
    color:var(--imgreen-color);
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;  /*MMOL Commented as it was destroying rendering*/
    transition: max-height 0.2s ease-out;
    background-color:  var(--imgreen-color); 
}
/******************************************************************************************************************/
/********************                            Containers                          ******************************/
.main-navdropdowncontainer {
    text-align:right;
    /* top right bottom left  */
    margin: 0px 0px 0px 0px;
    width:10%;
    height: 100%;
}
.main-navtitlecontainer{
    flex:1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* top right bottom left  */
    margin: 0px 0px 0px 0px;
    /* top right bottom left  */
    padding: 0px 0px 0px 0px;
}
/*Scrollable table container*/
.scrollable-table-container {
    display:flex;
    max-height: 400px; /* Set the maximum height for the container */
    overflow-y: scroll; /* Enable vertical scrollbar when content exceeds container height */
}
/*Scrollable table container big*/
.scrollable-table-containerBig {
    display:flex;
    max-height: 100%; /* Set the maximum height for the container */
    overflow-y: scroll; /* Enable vertical scrollbar when content exceeds container height */
    /* top right bottom left*/
    margin: 0px 0px 0px 0px;
    /* top right bottom left  */
    padding: 1px 1px 1px 1px;
}
/*Scrollable table container*/
.table-container {
    max-height: 200px; /* Set the maximum height for the container */
    overflow-y: auto; /* Enable vertical scrollbar when content exceeds container height */
}
/*Scrollable table container big*/
.table-containerBig {
    max-height: 800px; /* Set the maximum height for the container */
    overflow-y: auto; /* Enable vertical scrollbar when content exceeds container height */
}
.imdetailsplitcontainer {
    position: relative;
    height: 246;
    width: 100%;
    display: flex; /* Use flexbox for side-by-side layout */
}
.imdetailsplitcontainer-center {
    position: relative;
    height: 300;
    width: 90%;
    margin:auto;
    display: flex; /* Use flexbox for side-by-side layout */
}
.imdetailsplitcontainer_tall {
    position: relative;
    height: 550;
    width: 99%;
    margin: auto;
    display: flex; /* Use flexbox for side-by-side layout */
}
.imdetailsplitcontainer_taller {
    position: relative;
    height: 900;
    width: 99%;
    margin: auto;
    display: flex; /* Use flexbox for side-by-side layout */
}
.imsplitcontainer {
    position: relative;
    /*height: 800px;*/
    width: 100%;
    display: flex; /* Use flexbox for side-by-side layout */
}
/* Sub-divs (left and right) */
.imsplitsub-div {
    overflow:auto;
    height:530px;
    position:relative;
    flex: 2; /* Equal width for both sub-divs */
    padding: 2px;
    border: 1px solid var(--imgreenlight-color);
    box-sizing: border-box;
}
.imsplitsub-center {
    overflow:auto;
    position:relative;
    flex: 2; /* Equal width for both sub-divs */
    padding: 20px;
    border: 1px solid var(--imgreenlight-color);
    box-sizing: border-box;
    
}

.imsplitsub-div70 {
    /*overflow:auto;*/
    position:relative;
    height:100%;
    width:900px;
    padding: 2px;
    border: 1px solid var(--imgreenlight-color);
    box-sizing: border-box;
    }
.imsplitsub-div80 {
    /*overflow:auto;*/
    position: relative;
    height: 100%;
    width: 1500px;
    padding: 2px;
    border: 1px solid var(--imgreenlight-color);
    box-sizing: border-box;
}
.imsplitsub-div30 {
    overflow:auto;
    position:relative;
    height:100%;
    width:500px;
    padding: 2px;
    border: 1px solid var(--imgreenlight-color);
    box-sizing: border-box;
    }
/* Optional styling for sub-divs */
.imsplitsub-div:nth-child(odd) {
    background-color:  var(--imgreen-color); 
}


/*************************************************************************************/
/****************************    G4IM Tables   ***************************************/
/*****************          Table definitions       **********************************/
/**** To define another table, please copy and then change the name of the new one ***/
.g4itable {
    width: 100%;
    /* top right bottom left*/
    margin: 0px 0px 0px 0px;
    border:0px solid var(--imgreen-color);
    padding: 0px;
    border-collapse: separate;
}
.td_position{
    background-color: var( --imgreen-color); /* IM_ grøn*/
    text-align:right;
}
.td_position:hover{
    background-color: var( --imgreen-color); /* IM_ grøn*/
}
.td_positionleft{
    background-color: var( --imgreen-color); /* IM_ grøn*/
    text-align:left;
    color:var(--imgreenlight-color);
}
.td_positionleft:hover{
    background-color: var( --imgreen-color); /* IM_ grøn*/
    text-align:left;
    color:var(--imgreenlight-color);
}
.th-header{  /*Tabel header look and feel*/
    background-color: var( --imgreen-color); /* IM_ grøn*/
    color:var( --imgreenlightaccent-color); /*IM_ æggeskal*/
    font-weight: bold;
    font-size:12px;
    border-radius: 1px;
}
.td-diff{  /*Tabel element with accent look and feel*/
    background-color: var(--immidyellow); /*IM_ gylden 2*/
    color:var(--imgray); /*IM grå 1*/
}
.td-diff:hover{  /*Tabel with accent hover effect look and feel*/
    background-color: var(--immidyellow); /*IM_ gylden 3*/
    }
    th {
        top: 0;
        position: sticky;
        }
/************* TABEL DESIGN ***********************/
 .g4itable_plain {
    width: 100%;
     /* top right bottom left*/
    margin: 0px 0px 0px 0px;
    border:1px solid var(--imgreen-color);
    padding: 0px;
    border-collapse: separate;
 }
 .g4itable_center {
    width: 50%;
     /* top right bottom left*/
    margin: auto;
    border:1px solid var(--imgreen-color);
    padding: 0px;
    border-collapse: separate;
 }
 
 .th-plain{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:10px;
        border: 0px solid black;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreenlightaccent-color);  
        color:var(--imgray);
        border-radius:1px;
}  
 .td-plain{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:10px;
        border: 0px solid black;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreenlightaccent-color);  
        color:var(--imgray);
        border-radius:1px;
} 
 .td-plain-link{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:10px;
        border: 0px solid black;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreenlightaccent-color);  
        color:var(--imgray);
        border-radius:1px;
        cursor: pointer;
} 

.td-plain-list{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:11px;
        border: 0px solid var(--imgreenlightaccent-color);  
         /* top right bottom left*/
        margin: 0px 0px 0px 5px;
        padding: 0px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreenlightaccent-color);  
        color:var(--imgray);
        border-radius:1px;
}
.th-plain,.td-plain:hover { /*Tabel element hover look and feel*/
    background-color: var(--imgreen-color);  /*IM_ lys grøn*/
    color:var(--imgreenlightaccent-color);
 }
.td-plain-link:hover { /*Tabel element hover look and feel*/
    background-color: var(--imgreen-color);  /*IM_ lys grøn*/
    color:var(--imgreenlightaccent-color);
 }

 .th-plainForm{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:10px;
        border: 1px;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreen-color);  
        color:var(--imgreen-color);
        border-radius:1px;
}  
 .td-plainForm{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:10px;
        border: 1px;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreen-color);  
        color:var(--imgreenlightaccent-color);
        border-radius:1px;
}  
 .th-plainForm-big{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:12px;
        border: 1px;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreen-color);  
        color:var(--imgreen-color);
        border-radius:1px;
}  
 .td-plainForm-big{  
        /*Tabel element look and feel*/
        font-family: Verdana, sans-serif;
        font-size:12px;
        border: 1px;  
        padding: 1px; /* ALR  changed padding from 10 to 1*/
        background-color:var(--imgreen-color);  
        color:var(--imgreenlightaccent-color);
        border-radius:1px;
}  
.imform-label{  
        /*Tabel element look and feel*/
        /*font-family: Verdana, sans-serif;*/
        font-size:10px;
}  
/*****************************************************************************************************/
/************************************    BUTTONS         *********************************************/
/*********************         Default G4IM button ALR   *********************************************/
input[type=file]::file-selector-button {
    background-color: var(--imgreenlight-color); /* Green */
    border: 1px solid var(--imgreenlight-color);
    border-radius: 5px;
    color: black;
    padding: 2px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

    input[type=file]::file-selector-button:hover {
        background-color: #81ecec;
        border: 2px solid #00cec9;
    }
.button {
  background-color: var(--imgreen-color); /* Green */
  border: none;
  color: white;
  padding: 2px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.buttong4im {
  background-color: var(--imgreenlight-color); 
  color: black; 
  border: 1px solid var(--imgreenlight-color);
  border-radius:5px;
}
.buttong4im:hover {
  background-color: var(--immidyellow);
  color: black;
}
/****************************************************************************************************/
/******************************        FORMS elements               *********************************/
.appfilter-dropdown-basic{
    width:  185px;
    height: 20px;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: none;
    color: var(--imgreendark-color);
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius:2px;
    
}
.appfilter-timeselector-basic{
    width:  185px;
    height: 20px;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: none;
    color: var(--imgreendark-color);
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius:2px;
}
.appfilter-input-basic{
    width:  185px;
    height: 20;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: none;
    color: var(--imgreendark-color);
    font-size: 10;
    margin: 2px 2px;
    cursor: pointer;
}

.appfilter-dropdown-req{
    width:  185px;
    height: 20px;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: dashed;
    border-color: var(--imhighyellow);
    color: var(--imgreendark-color);
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius:2px;
    
}
.appfilter-timeselector-req{
    width:  185px;
    height: 20px;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: dashed;
    border-color: var(--imhighyellow);
    color: var(--imgreendark-color);
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius:2px;
}
.appfilter-input-req{
    width:  185px;
    height: 20;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: dashed;
    border-color: var(--imhighyellow);
    color: var(--imgreendark-color);
    font-size: 10;
    margin: 2px 2px;
    cursor: pointer;
}
.appfilter-input-basic-big{
    width:  185px;
    height: 30;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: none;
    color: var(--imgreendark-color);
    font-size: 14;
    margin: 2px 2px;
    cursor: pointer;
}
.appfilter-input-req-big{
    width:  185px;
    height: 30;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: dashed;
    border-color: var(--imhighyellow);
    color: var(--imgreendark-color);
    font-size: 14;
    margin: 2px 2px;
    cursor: pointer;
}
.appfilter-dropdown-req-big{
    width:  185px;
    height: 30px;
    background-color: var(--imgreenlightaccent-color); /* color*/
    border: dashed;
    border-color: var(--imhighyellow);
    color: var(--imgreendark-color);
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 14;
    margin: 2px 2px;
    cursor: pointer;
    border-radius:2px;
}

/*Filter banner css definitions, used accross all filters (at least after cleanup)*/
/* Add styling for the filter items */
.appfilter-row {
    display: flex;
    justify-content: flex-start;
    border-radius:5px;
}
.appfilter-item {
    display: flex;
    flex-direction: column;
    border-radius:5px;
    align-items: flex-start; /* Align items to the right */
    margin-right: 10px; /* Adjust margin as needed */
    margin-bottom: 2px;
}
.appfilter-item label {
    margin-bottom: 5px;
}
/* Add styling for the filter buttons */
.appfilter-row:last-child {
    justify-content: flex-start;
    margin-top: 10px;
    width: 300px;
}
@media (max-width: 992px) {
    .image-box {
        height:600px;
    }
}
@media (max-width: 768px) {
    .image-box {
        height:450px;
    }
}



/* NAVIGATION MENU CSS */
nav {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    border: 2px solid var(--imgreenlight-color);
    border-radius: 30px;
    animation: slide-in 1s ease-out;
    z-index: 2;
}

ul {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0 30px;
    list-style-type: none;
    li:not(:last-child){
    margin-right: 40px;
}
  li{
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 10px;
    transition: background 0.2s;
    a{
      color: var(--imgreenlight-color);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    ul{
      visibility: hidden;
      opacity: 0;
      position: absolute;
      display: block;
      margin: 12px -12px;
      padding: 0;
      background: var(--imgreenlightaccent-color);/*#f4e2b1;*/
      border: 2px solid var(--imgreenlightaccent-color);
      border-right: 2px solid var(--imgreenlightaccent-color);
      border-bottom: 2px solid var(--imgreenlightaccent-color);
      border-radius: 5px;
      transition: opacity 0.2s, visibility 0.2s;
      li{
        margin: -2px 0 0 -2px;
        width: calc(100% - 20px);
        line-height: 1.7;
        a{
          color: var(--imgreen-color);
        }
      }
    }
    &:hover {
      background: var(--imgreenlight-color);
      border: 2px solid var(--imgreenlight-color);
      border-right: 2px solid var(--imgreenlight-color);
      border-bottom: 2px solid var(--imgreenlight-color);
      a {
        color: var(--imgreen-color);
      }
      ul {
        visibility: visible;
        opacity: 1;
        box-shadow: 0px 3px 5px 2px var(--imgreen-color);
        li {
          a {
            color: var(--imgreen-color);
          }
        }
      }
    }
  }
}

@keyframes slide-in {
  0% {
    top: -50px;
  }
  40% {
    top: 20px;
  }
  70% {
    top: 10px;
  }
  100% {
    top: 15px;
  }
}

.tooltip {
 position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--imgreenlight-color);
  color: var(--imgrey);
  text-align: center;
  border-radius: 2px;
  padding: 4px;

  /* Position the tooltip */
  position: relative;
  left:20px;
  top:40;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/***************** REPORT CANVAS STYLES ***************************/
/************  Made with basic configuration and 3 examples of division of layout *******/
/* BASIC target  areas */
.item1 { grid-area: repfilter; }
.item2 { grid-area: repleft1; }
.item3 { grid-area: repcenter1; }
.item4 { grid-area: repright1; }
.item5 { grid-area: repleft2; }
.item6 { grid-area: repcenter2; }
.item7 { grid-area: repright2; }
.item8 { grid-area: footer; }

/* GRID 1 content fields html*/
/*<div class="grid-container1">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item8"></div>
</div>*/
.grid-container1 {
    display: grid;
    grid-template-areas:
    /* filter row, large left, long center 1, half center 2 and right2 and footer*/
    'repfilter repfilter repfilter'
    'repleft1  repleft1 repleft1'
    'repleft1  repleft1 repleft1'
    'footer  footer footer';
    background-color:var(--imgreenlight-color);
    text-align: center;
    padding: 2px 0;
    width:98%;
    /*height:98%;*/
    /*height:25%;*/
    height:auto;
    margin:auto;
}

/* GRID 2 content rows html*/
/*<div class="grid-container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item5"></div>
  <div class="item8"></div>
</div>*/
.grid-container2 {
    display: grid;
    grid-template-areas:
    'repfilter repfilter repfilter'
    'repleft1  repleft1 repleft1'
    'repleft2  repleft2 repleft2'
    'footer  footer footer';
    background-color:var(--imgreenlight-color);
    text-align: center;
    padding: 2px 0;
    width:98%;
    /*height:98%;*/
    height:auto;
    margin:auto;
}
/* GRID 3 content fields html*/
/*  <div class="grid-container3">
        <div class="item2">2</div>
        <div class="item3">3</div>  
        <div class="item8">6</div>
    </div>
*/
.grid-container3 {
  display: grid;
  grid-template-areas:
  /* filter row, large left, long center 1, half center 2 and right2 and footer*/
    'repleft1  repcenter1 repcenter1'
    'repleft1  repcenter1 repcenter1'
    'footer  footer footer';
    background-color:var(--imgreenlight-color);
    text-align: center;
    padding: 0px 0;
    width:100%;
    /*height:98%;*/
    height:auto;
    margin:auto;
}
/* GRID 4 content fields html*/
/* <div class="grid-container4">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>  
  <div class="item6"></div>  
  <div class="item7"></div>
  <div class="item8"></div>
</div>*/
.grid-container4 {
  display: grid;
  grid-template-areas:
  /* filter row, large left, long center 1, half center 2 and right2 and footer*/
    'repfilter repfilter repfilter'
    'repleft1  repcenter1 repcenter1'
    'repleft1  repcenter2 repright2'
    'footer  footer footer';
    background-color:var(--imgreenlight-color);
    text-align: center;
    padding: 2px 0;
    width:98%;
    /*height:98%;*/
    height:auto;
    margin:auto;
}

.grid-container1 > div {
  background-color:var(--imgreen);
  text-align: center;
  padding: 2px 0;
  border-style:dotted;
  Border-color:fff;
  font-size: 12px;
}
.grid-container2 > div {
  background-color:var(--imgreen);
  text-align: center;
  padding: 2px 0;
  border-style:dotted;
  Border-color:fff;
  font-size: 12px;
}
.grid-container3 > div {
  background-color:var(--imgreen);
  text-align: center;
  padding: 0px 0;
  border-style:none;
  Border-color:000;
  font-size: 10px;
}
.grid-container4 > div {
  background-color:var(--imgreen);
  text-align: center;
  padding: 2px 0;
  border-style:dotted;
  Border-color:fff;
  font-size: 12px;
}