@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --bg: #fff9fb;
    --surface: #ffffff;
    --text: #2a2a2a;
    --muted: #6b6b6b;
    --line: #f2e8ee;
    --gvH1: #ed05e5;
    --gvH2: #000;
    --ext: #f55182;
    --int: #98de6f;
    --red: #ff0000;
    --green: #18f52f;
    --nOkCheck: #EC7357;
    --okCheck: #7DC383;
    --shsWater: #009EE3;
    --shsSkyDarker: #1B344C;
    --shsCloudDarker: #BDD1DB;
    --shsCloudLighter: #EDF5F9;
    --shsAir: #ffffff;
    --shsRock: #2e363d;
    --shsGray: #ececec;
    --shsRed: #e84d0e;
    --shsOrange: #f39200;
    --shsGreen: #95c11e;
    --shsAling: #92c5e8;
    --shsStock: #8dd69a;

}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

.hide {
    display: none;
}

          
    .rowx > div {
        padding: 0px;
        margin-top: 0px;
        border:1px solid black;
    }

    .loggan {
        width:130px;

    }

        .logganb {
        
        margin: 0px !important;
        padding-top: 6px;
        width:50px;

    }

    .titleText {
        color: var(--shsAir) !important;
        text-align: center;
        padding: 10px;
        margin-top: 22px !important;
        font-size: x-large;
    }

    .titleTextb {
        color:black !important;
        text-align:center;
        padding:20px;
        font-size:18px;
        text-decoration:underline;

    }

    .titleTextbb {
        color:black !important;
        text-align:center;
        padding:20px;
        font-size:18px;
        width: 100% !important;
        text-decoration:underline;

    }

    .titleTextbx {
        color: #EDF5F9 !important;
        text-align: left;
        padding: 10px;
        font-weight: bolder;
        font-size: large;

    }

    .titleTextbxb {
    color: black !important;
        text-align: left;
        padding: 20px;
        font-size: 18px;
        text-decoration: none;

    }

    .titleTextbxbx {
    color: black !important;
        text-align: left;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 18px;
        text-decoration: none;

    }

        
    .top-grid > div {
        margin:10px !important;
    }

.gray {
    text-align:center;
    background-color: var(--shsOrange);
    color: var(--shsAir);
}

.graya {
    text-align: center;
    background-color: rgb(142, 188, 234);
}

.grayb {
    text-align: center;
    background-color: rgb(131, 219, 212);
}

.green {
    text-align:center;
    background-color:lightgreen;
}

.SearchList
{
    font-size:19px;
    font-weight:bold;
    list-style-type:none;
    padding:0;   
    margin:0;
    border:1px solid #cccccc;
}
       


.grid-text-new {
    padding-left: 5px;
    border:0px !important;
    height:50px;
    font-size:x-large !important;
    
 }

.grid-text-newb {
    padding-left: 0px;
    height:50px;
    border-top:1px solid #e7e7e7 !important;
    border-bottom:1px solid #e7e7e7 !important;
    
 }

.grid-text-print {
    padding-left: 5px;
    border-top:1px solid #e7e7e7 !important;
    border-bottom:1px solid #e7e7e7 !important;
    
 }

.grid-text-new-search {
    padding-left: 5px;
    text-align:center;
    color:black;
    font-size:x-large;
    height:50px;
    border-top:1px solid #e7e7e7 !important;
    border-bottom:1px solid #e7e7e7 !important;
    
 }



.grid-textc {
    padding-left: 5px !important;
    color:black !important;
   
    font-size:small !important;
    
 }



        .c-w-1 {
            height:150px;
        }
          
        .clear
{
    clear: both;
}

.footerb {
    background: #f8f8f8;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    border-top:1px solid #e7e7e7;
    height: 28px;
    text-align:center;
    color:#777777;
}

.footerc {
    background: #1b344c;
    position: fixed;
    left: 0;
    right: 0;
    bottom: -1px;
    border-top: 1px solid #BDD1DB;
    height: 75px;
    text-align: center;
    color: #BDD1DB;
}

        .main {
        
        margin-left:auto;
        margin-right:auto;
        }



.buttonLarge {

    width:100%;
    font-size:x-large;
    height:45px;

}


/*Calendar Control CSS*/
.Calendar .ajax__calendar_container   {
background-color: #f8f8f8;
border:solid 2px #e7e7e7;
width:220px;
}

.Calendar .ajax__calendar_header  {
background-color: #f8f8f8;
margin-bottom: 4px;
}

.Calendar .ajax__calendar_title,
.Calendar .ajax__calendar_next,
.Calendar .ajax__calendar_prev    {
color: #000000;
padding-top: 3px;
}

.Calendar .ajax__calendar_body    {
background-color: #ffffff;
border: solid 1px #e7e7e7;
width:210px;
}

.Calendar .ajax__calendar_dayname {
text-align:center;
font-weight:bold;
margin-bottom: 4px;
margin-top: 2px;
color: #000000;
}

.Calendar .ajax__calendar_day {
color: #000000;
text-align:center;
width:30px;
}

.Calendar .ajax__calendar_hover .ajax__calendar_day,
.Calendar .ajax__calendar_hover .ajax__calendar_month,
.Calendar .ajax__calendar_hover .ajax__calendar_year,
.Calendar .ajax__calendar_active  {
color: #000000;
font-weight: bold;
background-color: #DEF1F4;
}

 .Calendar .ajax__calendar_today   {
font-weight:bold;
}

.Calendar .ajax__calendar_other,
.Calendar .ajax__calendar_hover .ajax__calendar_today,
.Calendar .ajax__calendar_hover .ajax__calendar_title {
color: #cccccc;
}

.nav-new:hover {

    background-color:lightblue;
    
}

.nav-new {

    text-align:center !important;
    padding:0px !important;
    margin:0px !important;
    font-size:x-small;
    
}

.nav-link {
    color:var(--shsAir);
    text-align:center;
    font-size: 13px !important;
}

.new-nav{

    line-height: normal;

}

.new-nav:hover{
    background-color: #1B344C;
}

.nav-link:hover {
    color: #ffffff !important;
}


.linkbuttons{
    border:1px solid var(--shsRock);
    width: 30px;
    height: 30px;
    padding: 5px 8px 3px 8px;
    color: var(--shsRock);
    font-size:small;
    text-align:center;
    display: inline-grid;
}

.linkbuttons:hover {
    background-color: var(--shsWater) !important;
    color: var(--shsOrange) !important;
    font-weight: 600;
}

.linkbuttonsb {
    border: 1px solid var(--shsRock);
    width: 50px;
    height: 30px;
    padding: 5px 8px 3px 8px;
    color: var(--shsRock);
    font-size: small;
    text-align: center;
    display: inline-grid;
}

.linkbuttonsb:hover {
    background-color: var(--shsWater) !important;
    color: var(--shsOrange) !important;
    font-weight: 600;
}

.linkbuttonsx {
    border: 1px solid var(--shsRock);
    width: 50px;
    height: 30px;
    padding: 5px 8px 3px 8px;
    color: black;
    font-size: small;
    text-align: center;
    display: inline-grid;
}

.linkbuttonsx:hover {
    background-color: var(--shsWater) !important;
    color: var(--shsAir) !important;
}


    #foo {
        max-height: 30px;
        width: 100%;
        text-align: center;
    }

.textVert {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #000000;
    text-align: left;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    transform: rotate(180deg);
    
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
        .textVert {
                
                
                transform: rotate(0deg) !important;
        
            }

        
    }



.textHor {
    color: #000000;
    text-align: center;
    vertical-align: bottom;
}

.textvan {
    color: #000000;
    text-align: left;
    vertical-align: bottom;
    color:#ffffff;
}

.linje {
    border-right: 1px solid white;
}

.showm {
    display: none;
}


@media (max-width: 900px) {

    html {
            overflow-x: hidden;
        }
        
    .hidem {
        display: none;
    }

    li.hidem{
        display: none;
    }

    .showm {
        display: block;
    }

    


}



#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.hidden{
    display: none !important;
}


 .navbar {
     background-color: var(--shsOrange) !important;
     color: #1B344C !important;
     margin-bottom: 0px !important;
     border: 1px solid var(--shsOrange) !important;
     min-height: 30px !important;
 }

 .nav-link {
     color: #1B344C !important;
 }

 .nav>li>a {
     padding: 5px 10px !important;
 }

 .logganbxx {
     width: 20px !important;
     padding-top: 0px !important;
     margin-top: -5px !important;

     padding-bottom: -5px !important;
     margin-bottom: -5px !important;
     line-height: -5px;
 }

 .dropdown-menu::after {
     background-color: #1B344C !important;
     color: #ffffff !important;
 }

 .nav-linkb::before {

     background-color: #1B344C !important;
     color: #ffffff !important;

 }

 .ac-list {
     margin: 0;
     padding: 6px 0;
     border: 1px solid #ddd;
     border-radius: 10px;
     background: var(--shsCloudDarker);
     box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
     max-height: 320px;
     overflow: auto;
 }

 .ac-item {
     padding: 10px 12px;
     border-bottom: 1px solid var(--shsRock);
     cursor: pointer;
     white-space: nowrap;
 }

 .ac-item:last-child {
     border-bottom: 0;
 }

 .ac-item-hover {
     background: var(--shsAling);
 }

 .ac-item-hover:hover {
     background: var(--shsWater);
    padding: 10px 12px;
    cursor: pointer;
    white-space: nowrap;
 }

 .ac-item:not(.ac-item-hover) {
     background: var(--shsCloudDarker);
 }

 /* wrapper om du vill ha scroll på mindre skärmar */
 .grid-wrap {
     width: 100%;
     overflow-x: auto;
     margin: 20px 0;
     border-radius: 16px;
     box-shadow: 0 8px 24px rgba(27, 52, 76, 0.08);
 }

 /* själva gridview-tabellen */
 .shs-grid {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     background-color: var(--shsCloudLighter);
     font-family: 'Poppins', sans-serif !important;
     font-size: 14px;
     color: var(--shsRock);
     min-width: 700px;
     margin-top: 12px;
 }

 /* header */
 .shs-grid th {
     background: linear-gradient(135deg, var(--shsSkyDarker), var(--shsWater));
     color: var(--shsAir);
     text-align: left;
     font-weight: 600;
     padding: 14px 16px;
     border: none;
     white-space: nowrap;
     position: sticky;
     top: 0;
     z-index: 1;
 }

 /* rundade hörn header */
 .shs-grid th:first-child {
     border-top-left-radius: 16px;
 }

 .shs-grid th:last-child {
     border-top-right-radius: 16px;
 }

 /* celler */
 .shs-grid td {
     border-bottom: 1px solid var(--shsCloudDarker);
     background: var(--shsAir);
     vertical-align: middle;
 }

 /* varannan rad */
 .shs-grid tr:nth-child(even) td {
     background: var(--shsCloudLighter);
 }

 /* hover */
 .shs-grid tr:hover td {
     background: #dff1fb;
     transition: background 0.18s ease;
    color: var(--shsOrange) !important;
    font-weight: 600 !important;
 }

 /* sista raden */
 .shs-grid tr:last-child td:first-child {
     border-bottom-left-radius: 16px;
 }

 .shs-grid tr:last-child td:last-child {
     border-bottom-right-radius: 16px;
 }

 /* länkar i grid */
 .shs-grid td a {
     color: var(--shsWater);
     text-decoration: none;
     font-weight: 600;
 }

 .shs-grid td a:hover {
     color: var(--shsSkyDarker);
     text-decoration: underline;
 }

 /* om du vill markera aktiva rader */
 .shs-grid tr.active-row td {
     background: #eef8df !important;
 }

 /* liten badge-stil */
 .grid-badge {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.2;
     white-space: nowrap;
 }

 .grid-badge.active {
     background: var(--shsStock);
     color: #1f4d2a;
 }

 .grid-badge.inactive {
     background: var(--shsGray);
     color: var(--shsRock);
 }