/* The sidenav */

* {
  font-display: swap;
}

.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #011f4b;
  overflow-x: hidden;
  padding-top: 20px;
}
.sidenav button{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: white;
  display: block;
  transition: 0.3s;
  border: 0px;
  background-color: transparent;
}

.sidenav button{
  outline: none;
}

.sidenav button:hover{
  color: white;
}

@media(max-width:768px){
  .sidenav {
    height: 50px;
    width: 100%!important;
  }
  #main {
    margin-left:0!important;
    margin-top:50px;
  }
  .closebtn {
    left:unset!important;
    margin-top: 0!important;
    top:-10px!important;
    right:10px!important;
  }
  .display-4 {
    font-size: 30px!important;
  }
}


/* Page content */
#main {
  transition: margin-left .5s;
  margin-left: 250px; /* Same as the width of the sidenav */
}
/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: white;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
  background-color:rgba(255,255,255,0.3);
}

.closebtn:hover{
  background-color:transparent!important;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
}

.dropdownarrow {
  opacity:0.7;
  background-image: url(https://skstyring.dk/dropdown_arrow.png);
  background-size: 10px 10px;
  height: 22px;
  width: 10px;
  margin-left: 0px;
  margin-right: 10px;
  float: right;
  background-position: center;
  background-repeat: no-repeat;
}
#togglePistol{
  cursor:     pointer;
}
#toggleRiffel{
  cursor:     pointer;
}
#skytteresPistol{
  display:    none;
}
#skytteresRiffel{
  display:    none;
}
.secondmedal{
  background-image:url("https://skstyring.dk/silver-medal.png");
  height:     60px;
  width:      60px;
  background-size:100%;
  background-repeat: no-repeat;
  margin-top:   20px;
  margin-left:  auto;
  margin-right: auto;
}
.thirdmedal{
  background-image:url("https://skstyring.dk/bronze-medal.png");
  height:     60px;
  width:      60px;
  background-size:100%;
  background-repeat: no-repeat;
  margin-top:   20px;
  margin-left:  auto;
  margin-right: auto;
}
.cover{
  height:       100%;
  width:        100%;
  position:     fixed;
  top:        0;
  left:       0;
  opacity:      0.8;
  background-color:   white;
  z-index:      -100;
}
.dropdownarrow{
  background-image: url("https://skstyring.dk/dropdown_arrow.png");
  background-size:  10px 10px;
  height:       22px;
  width:        10px;
  margin-left:    0px;
  margin-right:   10px;
  float:        right;
  background-position:center;
  background-repeat:no-repeat;
}
.page-link.active{
  color:        white!important;
}
.dato:hover{
  cursor:       pointer;
}
.dato{
  border-radius:    4px;
}
.toast{
  opacity:      1.0!important;
  background-color: white;
  min-height:     100px;
  z-index:      20001;
  min-width:      300px;
  max-width:      300px;
}
.toastWrap{
  position:     fixed;
  left:       10px; 
  bottom:       50px;
  z-index:      20000;
}
.hidden{
  display:      none;
}
.navbar-brand{
  font-family: 'Abel', sans-serif;
  color:        white!important;
  margin:       5px 20px;
}
.nav-link{
  font-family:    'Montserrat', sans-serif;
  font-size:      15px;
  color:        white!important;
  height:       65px;
  padding:      20px;
  margin-top:     0px;
  margin-bottom:    -4px;
  outline:      none;
  border:       0px;
}
.nav-link:hover{
  background-color: #007bff;
}
.table-optal td{
  padding:      0px;
}
.overlay{
  height:       100%;
  width:        100%;
  position:     fixed;
  top:        0;
  bottom:       0;
  left:       0;
  right:        0;
  background-color: rgba(0,0,0,0.8);
  z-index:      1000;
}
.overlaySM{
  height:       100%;
  width:        100%;
  position:     absolute;
  top:        0;
  bottom:       0;
  left:       0;
  right:        0;
  background-color: rgba(0,0,0,0.6);
  z-index:      1000;
}
.popup{
  position:     fixed!important;
  top:          5%;
  left:         50%;
  margin-left:    -200px!important;
  width:        400px;
  height:       auto;
  z-index:      2000;
}
.medlemmer_overview{
  width:        100%;
  overflow-x:     scroll;
  height:       auto;
}
.navbar-nav, .navbar-collapse, .navbar{
  margin:       0px;
  margin-left:    auto;
  margin-right:   auto;
  float:        none;
  text-align:     center;
  font-size:      18px;
  padding:      0px;
  border:       0px;
}
.navbottom{
  height:       30px;
  line-height:    14px;
  text-align:     center;
  background-color: #235ebc;
  color:        white;
}
.opretAftale{
  border-radius:      0px;
}
.infoRet{
  position:     fixed;
  margin:       0!important;
  top:        5%;
  left:       20%;
  width:        60%!important;
}
.info{
  position:     fixed;
  margin:       0!important;
  left:         20%;
  width:        60%!important;
}
#loginBox{
  overflow:       hidden;
}
#loginBox input{
  margin-left:      -1px;
  margin-right:     -1px;
  border-radius:      0px !important;
  width:          101%;
}
#tilbageBar{
  background-color:   #235ebc;
}
#tilbageBar:hover{
  background-color:     #007bff;
}
#loginBox select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  padding: .4em;
  padding-right: 1.5em
  width:  100%;
  border-left:none;
  border-right:none;
}
#loginBox select{
  -webkit-appearance:   none;
  border-radius:      0px !important;
}
#loginBox label{
  margin-left:      10px;
  font-weight:      bold;
}
input[type="tel"]:hover, input[type="password"]:hover, select:hover, input[type="text"]:hover, input[type="date"]:hover, input[type="email"]:hover{
  background-color:   #eff8ff;
}
.logud{
  line-height:  14px!important;
  padding:    12px!important;
  width:      100px;
  color:      white!important;
  position:   absolute;
  right:      35px;
  top:      7px;
  bottom:     7px;
}
label{
  font-weight:      normal;
  margin-bottom:      2px;
  vertical-align:     middle;
}
h2{
  font-size:        22px;
}
h3{
  font-size:        18px;
}
.up{
  margin-top:       0px;
  border-top:       0px;
}
.content{
  border-radius:      0px;
  margin-top:       0px;
  border-top:       0px;
}
.contentSecond{
  margin-top:       20px;
  background-color:     #f8f9fa;
}
.card-header:first-child{
  border-radius:      0px!important;
}
#progressOpret{ 
  text-align:       center;
}
#progressOpret .col-3{
  padding:        5px;
  background-color:   lightgrey;
}
#current{
  background-color:   #ffc107!important;
}
#done{
  background-color:   #28a745!important;
}
#hentAlert{
  display:        none;
}
@media print{
  .toast{
    display:      none;
  }
  .sidenav{ 
    display:      none;
  }
  #main{
    width:      100%;
    margin-left:0px!important;
  }
  #toastShift{
    display:      none;
  }
  #generer{
    display:      none;
  }
  #fodselsdag{
    display:      none;
  }
  #copyright{
    display:      none;
  }
  #topMenu{
    display:      none;
  }
  #print{
    display:      none;
  }
  #tilbageBar{
    display:      none;
  }
  .card{
    border:       0;
  }
  .card-header{
    display:      none;
  }
  #hentAlert{
    display:      inline-block;
  }
  #hentListe{
    display:      none;
  }
  table, tr, td, .table-striped, .table, th{
    border:       0;
  }
  #printBreak{
    page-break-before: always;
    page-break-inside: avoid;
  }
}




/* Navbar container */
.navbarX {
  overflow: hidden;
  width:100%;
  margin-left:40px;
}

/* Links inside the navbar */
.navbarX a {
  float: left;
  text-align: center;
  text-decoration: none;
  color: white;
  padding: 20px 20px;
}

/* The dropdown container */
.dropdownX {
  float: left;
  overflow: hidden;
}

.dropdown-item{
  color:        black!important;
}
.dropdown-item:active{
  background-color: #005b96;
}
.dropdown-item:hover{
  background-color: #b3cde0;
}
/* Dropdown button */
.dropdownX .dropbtnX {
  font-size: 15px; 
  position:relative;
  border: none;
  outline: none;
  color: white;
  padding: 20px 20px;
  background-color: inherit;
  font-family: 'Montserrat', sans-serif; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.navbarX a:hover, .dropdownX:hover .dropbtnX {
  color:white;
  cursor:pointer;
  background-color: #005b96;
}

/* Dropdown content (hidden by default) */
.dropdown-contentX {
  font-size: 15px; 
  display: none;
  position: absolute;
  background-color:#235ebc;
  color:white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10000;
}
/* Links inside the dropdown */
.dropdown-contentX a {
  font-size: 15px; 
  float: none;
  color: white;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.bg-success{
  background-image: none!important;
}
.bg-success:hover{
  background-image: none!important;
  background-color: #28a745!important;
}
.border-danger{
  border-radius:  0px;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-contentX a:hover {
  color:white;
}

/* Show the dropdown menu on hover */
.dropdownX:hover .dropdown-contentX {
  display: block;
}

#kobernavn{
  border:     1px solid #235ebc;
  padding:    5px;
  padding-left: 15px;
  padding-right:  15px;
  font-size:    16px;
  position:   absolute;
  top:      0px;
  right:      15px;
  background-color:#235ebc;
  color:      white;
  border-radius:  2px;
  border-top-left-radius: 0px;
  border-bottom-left-radius:0px;
  display:    none;
  z-index:    1000;
  height:     38px;
}
.cookiedisclaimer{
  position:   fixed;
  bottom:     0;
  left:     0;
  right:      0;
  background-color:#343a40;
  height:     auto;
  width:      100%;
  z-index:    20000;
  padding:    10px;
  color:      white;
  text-align:   center;
}
.popover{
  max-width:    100%;
  width:      500px;
  padding:    0px;
}
.popover-body{
  padding:    0px;
}
#popovercontent{
  display:    none;
}
.klippekort{
  background-color: #dc3545;
  color:      white;
  padding:    5px;
  width:      auto;
  text-align:   center;
}
.klipArrow{
  border-top-color:#dc3545!important;
}
.klipArrow::before{
  border-top-color:#dc3545!important;
}
.klipArrow::after{
  border-top-color:#dc3545!important;
}

#res{
  display:    table-row;
}
#res tr{
  border:     0px;
}
#res td{
  border:     0px;
}
.resRow:hover + .resCol{
  background-color: #ddd;
}
.carousel-inner{
  height:       400px;
}
.carousel-item{
  height:       400px;
}
#carouselExampleCaptions{
  height:       400px;
  overflow:     hidden;
  font-size:      20px;
}
#carouselExampleCaptions h2{
  font-size:      30px;
}
.carousel-caption{
  color:        black;
  top:          0px;
  left:0;
  right:0;
  height:       100%;
  bottom:       0px;
  background-color:rgba(255,255,255,0.7);
  padding:      20px;
  padding-top:  100px;
}
.vagt{
  height:       100px;
  width:        auto;
}
#forslag{
  padding:    5px;
  padding-left: 15px;
  padding-right:  15px;
  font-size:    16px;
  position:   absolute;
  top:      35px;
  right:      15px;
  left:     15px;
  background-color:white;
  color:      black;
  border:     1px solid #ced4da;
  border-top:   none;
  border-top-left-radius: 0px;
  border-bottom-left-radius:0px;
  z-index:    1000;
  display:    none;
  height:     auto;
  width:      auto;
  border-radius:  0px;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:4px;
}
#forslag .col:hover{
  background-color: #235ebc;
  color:white;
}
#forslagVaben{
  padding:    5px;
  padding-left: 15px;
  padding-right:  15px;
  font-size:    16px;
  position:   absolute;
  top:      35px;
  right:      15px;
  left:     15px;
  margin-bottom:  35px;
  background-color:white;
  color:      black;
  border:     1px solid #ced4da;
  border-top-left-radius: 0px;
  border-bottom-left-radius:0px;
  z-index:    1000;
  display:    none;
  height:     auto;
  width:      auto;
  border-radius:  0px;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:4px;
}
#forslagVaben a:hover{
  background-color: #c1c1c1!important;
}
.vabenSelect{
  min-width: 100%!important;
  display: block;
  padding: 5px;
}
#forslagVaben .col:hover{
  background-color: #235ebc;
  color:white;
}
.occInfoBox{
  position:     absolute;
  background-color: white;
  border-radius:    2px;
  border:       1px solid #ced4da;
  padding:      10px;
  font-size:      14px;
  margin-left:    50px;
  z-index:      2000;
  line-height:    14px;
  margin-left:    60px;
  margin-top:     0px;
  width:        200px;
  text-align:     left;
  border-radius:    4px;
}
.occInfoBox:after, .occInfoBox:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.occInfoBox:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #FFFFFF;
  border-width: 10px;
  margin-top: -10px;
}
.occInfoBox:before {
  border-color: rgba(206, 212, 218, 0);
  border-right-color: #ced4da;
  border-width: 11px;
  margin-top: -11px;
}

div.alternate>div:nth-of-type(odd){
  background-color:#f0f0f0;
}
tr.bg-light td{
  font-weight:  bold;
}
#skv{
  max-height:   500px;
  overflow-y:   scroll;
}
.scrollWindow{
  height:     200px;
  overflow-x:   hidden;
  overflow-y:   scroll;
  border:     1px solid #c1c1c1;
  border-radius:  4px;
  padding:    4px;
}
.antal{
  width:      300px;
  color:      white;
  border:     1px solid #005b96;
  border-radius:  2px;
  overflow:   hidden;
  text-align:   center;
  margin-left:  20px;
}
.medlemLabel{
  background-color: #005b96;
}
.floatingMenu{
  position:   fixed;
  right:      2%;
  top:      45%;
  height:     auto;
  width:      50px;
}
.arrow:hover{
  cursor:     pointer;
  opacity:    0.4;
}
.info{
  width:      50%;
  margin-left:  -25%;
}
.nav-tabs{
  height:     30px;
  border:     none;
  margin-bottom:  0px;
}
.nav-tab .nav-tab-link{
  height:     30px;
  width:      150px;
  background-color: #3d3d3d;
  color:      white!important;
  padding:    10px;
  margin-left:  3px;
  border-top-left-radius:4px;
  border-top-right-radius: 4px;
  margin-bottom:  20px;
}
.nav-tab-link:hover {
  background-color: #727272;
}
.tab-content{
  margin:     10px;
  margin-top:   -1px;
  padding:    10px;
  border:     1px solid #e0e0e0;
}
a.nav-tab-link[aria-selected=true]{
  background-color: #797c7c;
}
.nohover{
  cursor:     default;
  box-shadow:   none!important;
}
.progress{
  display:      none;
  position:     relative; 
  width:      100%;
  border:       1px solid #ddd; 
  padding:      1px; 
  border-radius:  3px; 
}
.progress-bar{ 
  background-color: #B4F5B4; 
  width:      0%; 
  height:     20px; 
  border-radius:  3px; 
}
.sorter:hover{
  cursor:     pointer;
}
.backgroundChange{
  background-color: #28a745!important;
  transition: background-color 2.00s ease-in-out;
}
.tab-pane .row:hover{
  background-color: lightgrey!important;
}

.card{
  border: 0px;
  box-shadow:none;
  margin:  0px;
}
.card-header{
  background-color: #03396c;
  color:  white;
}
.btn{
  margin: 0;
  height: 35px;
  line-height:7px;
  color: white!important;
}

.wmd-view-topscroll, .wmd-view {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
}

.wmd-view-topscroll { height: 20px; }

.scroll-div1 { 
  width: auto; 
  overflow-x: scroll;
  overflow-y: hidden;
  height:20px;
}
.frontpageTop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(-120deg, #021B79, #0575E6, #205E9B);
  box-shadow:0px 0px 40px 20px linear-gradient(-120deg, #021B79, #0575E6, #205E9B);
  width: 100%;
  height:505px;
  z-index:-10;
}
.bg-primary{
  background-color: #005b96!important;
}
a.bg-primary:hover {
  background-color: #005b96!important;
  opacity: 0.7;
}
h1{
  z-index:100;
}

/* begin styles for RSS Feed */

.rss-box {
 margin: 1em;
 width: 100%;
 background-color: #333333;
 border: 1px solid #000000;
 
}
.rss-items {
  margin-top:0px;
  padding:0.5em; 0.5em;
  margin-left:0px;
  color:#000000;
  width:100%;
}
p.rss-title {padding:0.5em;}
.rss-title {
  font-size: 18px;
  background-color: #000000;
  color: #f76b08;
  font-weight:bold;
  text-align: center;
}

.rss-item  {
  color:#DFDFDF;
  font-size: 12px;
  list-style:none;
  padding-bottom:1em;
}

.rss-item a {
  color:#f67b08;
  font-size: 14px;
  font-weight:bold;
}


.rss-item a:hover {
  color: #235ebc;
}


.rss-date {
  font-size: 7pt;
  color: #f76b08;
} 
/* buttons modeled from http://www.wellstyled.com/css-inline-buttons.html */

.pod-play {
 _width:12em;
 margin: 0 0.2em; padding: 0.1em 0; _padding:0;
 
 white-space:nowrap;
 text-decoration: none;
 vertical-align:middle;
 background: #fb6;
 color: black;
}
.pod-play em {
 _width:1em; _cursor:hand;
 font-style: normal;
 margin:0; padding: 0.1em 0.5em;
 background: white;
 color: #222;
}
.pod-play span {
 _width:1em; _cursor:hand;
 margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
}
.pod-play:hover {
 background: #666;
 color: white;
}
.pod-play:hover em {
 background: black;
 color: white
}

.btn {
  text-transform: unset !important;
  font-size:  14px;
}
.circleLink{
  height:     200px;
  width:      200px;
  background-color: green;
  border-radius:  100%;
  float:      right;
  color:    white;
  line-height:  40px;
  text-align:   center;
  font-size:    25px;
  padding-top:  50px;
  margin-right: 10%;
  margin-top:   20px;
  margin-bottom: 20px;
}
.circleLink:hover{
  opacity:    0.8;
}
@media print {
  .pagebreak { page-break-before: always; } 
}

/* Calendar Container */
div#calendar {
  margin: 0px auto;
  padding: 0px;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

div#calendar div.box {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  padding: 6px 20px;
  border-radius: 8px 8px 0 0;
}

/* Header Section */
div#calendar div.header {
  line-height: 50px;
  vertical-align: middle;
  position: relative;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div#calendar div.header button:hover {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

div#calendar div.header button#left {
  margin-left: 0px;
}

div#calendar div.header button#right {
  margin-right: 0px;
}

div#calendar div.header span.title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  flex: 1;
}

a#prev:hover, a#next:hover {
  opacity: 1;
}

/* Calendar Content */
div#calendar div.box-content {
  border-top: none;
  margin-top: 0;
  padding: 15px;
  background: #f8f9fa;
}

/* Day Labels */
div#calendar ul.label {
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

div#calendar ul.label li {
  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  height: auto;
  line-height: 1;
  text-align: center;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: white;
  border-radius: 6px;
  float: none;
}

/* Date Cells */
div#calendar ul.dates {
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 15px;
}

div#calendar ul.dates li {
  margin: 0;
  padding: 8px;
  list-style-type: none;
  min-height: 100px;
  font-size: 14px;
  font-weight: 500;
  background-color: white;
  color: #212529;
  text-align: right;
  position: relative;
  border-radius: 6px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  float: none;
  line-height: 14px;
  vertical-align: top;
  width: auto;
  height: auto;
}

div#calendar ul.dates li:hover {
  box-shadow: 0 4px 12px rgba(0, 91, 150, 0.15);
  border-color: #005b96;
}

/* Empty/Masked cells */
div#calendar ul.dates li.mask {
  background-color: #e9ecef;
  opacity: 0.5;
  pointer-events: none;
}

/* Holiday styling */
div#calendar ul.dates li.bg-danger {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  border-color: #ff6b6b;
}


div#calendar ul.dates li.bg-success {
  background: linear-gradient(135deg, #e8f9f0 0%, #d4f1e3 100%)!important;
  border-color: #4caf50;
}

div#calendar ul.dates li.bg-warning {
  background: linear-gradient(135deg, #fffaeb 0%, #fff4d6 100%)!important;
  border-color: #ff9800;
}

div#calendar ul.dates li.bg-info {
  background: linear-gradient(135deg, #e3f2fd 0%, #d0e8fa 100%)!important;
  border-color: #2196f3;
}




/* Week numbers styling */
div#calendar ul.dates li span[style*="bottom:2px"],
div#calendar ul.dates li span[style*="bottom:4px"] {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

div#calendar ul.dates li span[style*="bottom:2px"] {
  left: 6px;
  bottom: 6px;
  background: #005b96;
  color: white;
}

/* Holiday name styling */
div#calendar ul.dates li span[style*="bottom:4px"] {
  bottom: 6px;
  right: 6px;
  color: #dc3545;
  background: white;
  border: 1px solid #dc3545;
}

/* Event/Occurrence styling */
div#calendar a {
  color: black;
  text-decoration: none;
}

div#calendar a.occInfo {
  cursor: pointer;
  display: block;
}

div#calendar a.occInfo span.badge {
  display: block;
  text-align: left;
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.3;
  padding: 4px 6px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div#calendar a.occInfo span.badge:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 10;
  white-space: normal;
}

/* Event Info Popup */
.occInfoBoxCal {
  position: absolute;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  padding: 15px;
  font-size: 14px;
  z-index: 2000;
  line-height: 1.5;
  margin-left: 100px;
  margin-top: -25px;
  width: 250px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.occInfoBoxCal:after,
.occInfoBoxCal:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.occInfoBoxCal:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #ffffff;
  border-width: 10px;
  margin-top: -10px;
}

.occInfoBoxCal:before {
  border-color: rgba(206, 212, 218, 0);
  border-right-color: #dee2e6;
  border-width: 11px;
  margin-top: -11px;
}

/* Current day highlight */
div#calendar ul.dates li[id*="li-"] {
  position: relative;
}

/* Today indicator */
div#calendar ul.dates li.today {
  border: 2px solid #005b96;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

div#calendar ul.dates li.today::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #005b96 transparent transparent;
  border-radius: 0 6px 0 0;
}

/* Calendar Responsive Design */
@media (max-width: 768px) {
  div#calendar div.box {
    padding: 15px;
  }

  div#calendar div.header {
    height: auto;
    line-height: normal;
  }

  div#calendar div.header span.title {
    font-size: 16px;
  }

  div#calendar div.header button {
    padding: 8px 12px;
    font-size: 12px;
  }

  div#calendar ul.dates {
    gap: 6px;
  }

  div#calendar ul.label {
    gap: 6px;
  }

  div#calendar ul.dates li {
    min-height: 80px;
    font-size: 13px;
  }

  div#calendar ul.label li {
    font-size: 11px;
    padding: 10px 0;
  }

  div#calendar a.occInfo span.badge {
    font-size: 10px;
    padding: 3px 5px;
  }

  .occInfoBoxCal {
    width: 200px;
    margin-left: 50px;
  }
}

@media (max-width: 576px) {
  div#calendar {
    border-radius: 0;
  }

  div#calendar div.box {
    border-radius: 0;
    padding: 12px;
  }

  div#calendar div.box-content {
    padding: 10px;
  }

  div#calendar ul.dates {
    gap: 4px;
  }

  div#calendar ul.label {
    gap: 4px;
  }

  div#calendar ul.dates li {
    min-height: 70px;
    font-size: 12px;
    padding: 6px;
  }

  div#calendar ul.label li {
    font-size: 10px;
  }
}

/* Calendar Print styles */
@media print {
  div#calendar {
    box-shadow: none;
    border: 1px solid #dee2e6;
  }

  div#calendar div.box {
    background: white !important;
    color: black !important;
  }

  div#calendar div.header button {
    display: none;
  }

  div#calendar div.header span.title {
    color: black !important;
  }

  div#calendar ul.dates li:hover {
    transform: none;
    box-shadow: none;
  }

  .occInfoBoxCal {
    display: none;
  }
}

#gennemfortTable td{
  font-size:    16px;
}

table#udregner td{
  vertical-align: middle;
}

#vabenoptal td{
  vertical-align: middle;
}

.flashingGreen {
 animation: flashingGreen 2s infinite alternate;
}

@keyframes flashingGreen {
  from {background-color: #00b300;}
  to {background-color: #006600;}
} 

.collapseLink {
  width: 100%;
  text-align: left;
}

.collapsed {
  .card-body {
    padding: 0;
  }
}

.products {
  border-radius: 4px;
}

@media (max-width: 768px) {
  #forslagVaben {
    width: 100vw!important;
    margin-left: -54vw!important;
  }

  .card.popup {
    width: 100vw!important;
    margin-left: 0!important;
    left: 0!important;
  }

  .products {
    flex-direction: column;
  }

  .product-tabs {
    display: flex;
    width: 100%!important;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 5px;

    .product-tab {
      width: 25%!important;
      border-radius: 4px;
      flex: 25%;
    }
  }

  .products-tab-content {
    margin-left: 0!important;
  }

  #gennemfortTable {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.product-tabs {
  border-radius: 4px;
  overflow: hidden;
  height: min-content;
}
.product-tab {
  background-color: #3d3d3d;
  color: white;
  padding: 8px 10px;
  width: 100%;
  border-bottom: 1px solid #c1c1c1;
}
.product-tab:last-of-type {
  border-bottom: none;
}
.product-tab:hover {
  opacity: 0.8;
  cursor: pointer;
}
.product-tab.active {
  opacity: 0.8;
}
.products-tab-content {
  margin-left: 10px;
  border: 1px solid #c1c1c1;
  padding: 10px;
  border-radius: 4px;
}
.btn-primary, .btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:focus, .btn-primary.dropdown-toggle:active, .btn:active {
  background-color: #005b96!important;
}
.btn-primary:hover, .btn-primary.dropdown-toggle:hover {
  background-color: #6497b1!important;
}
.bg-danger {
  background-color: #e20202!important;
}
li.bg-danger {
  background-color: #dc3545!important;
}
.border-danger {
  border: 1px solid #a70000!important;
}
.bg-light {
  background-color: #ededed!important;
}
.bg-dark {
  background-color: #03396c!important;
}
.bg-success, .badge-success, .btn-success {
  background-color: #1d9d1f!important;
}
.btn-success:hover, a.bg-success:hover {
  background-color: #22bc25!important;
}
table.table-hover tbody tr:hover {
  background-color: #e9f3f9;
}
.float-right:hover img {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: bell-shake 1s ease-in-out infinite;
}
@keyframes bell-shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  70% { transform: rotate(3deg); }
  80% { transform: rotate(-3deg); }
  90% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  background-color: #03396c!important;
}
@media (min-width: 991px) {
  .frontpage_card_1 {
    margin-left:-50px;
    margin-top:50px;
    margin-bottom:-50px;
    box-shadow: 5px 5px 4px 4px #03396c;
  }

  .frontpage_card_2 {
    box-shadow: 5px 5px 4px 4px #03396c;
  }

  .frontpage_card_2_img {
    margin-left:-50px;
    margin-bottom:50px;
    margin-top:-50px;
    width: calc(100% + 50px);
    box-shadow: 5px 5px 4px 4px #03396c;
    flex: 1;
    max-width: 100%;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
  }
  .price_card {
    box-shadow: 5px 5px 4px 4px #03396c;
  }
}
.fordeling {
  z-index: 99999999;
}
.filter-dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -40vw!important;
  margin-top: -40vh;
  background: white;
  border-radius: .25rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  z-index: 9999999;
  width: 80vw;
  max-height: 80vh;
  overflow: hidden;
}
.filter-dialog-body {
  padding: 15px;
  max-height: 60vh;
  overflow-y: auto;
}
.filter-dialog-footer {
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  text-align: right;
}
.filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.filter-row .filter-category {
  flex: 1;
  margin-bottom: 0;
}
.filter-category {
  margin-bottom: 12px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 8px;
  background: #fafafa;
}
.filter-category-title {
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
  border-bottom: 2px solid #ededed;
  padding-bottom: 3px;
}
.filter-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 8px;
}
.filter-checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  padding: 2px;
}
.filter-checkbox-wrapper label {
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 0;
}
.filter-checkbox {
  flex-shrink: 0;
  cursor: pointer;
}
.category-actions {
  float: right;
  font-size: 13px;
}
.category-actions a {
  margin-left: 8px;
  cursor: pointer;
  color: #007bff;
}
.category-actions a:hover {
  text-decoration: underline;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dropdown-toggle {
  text-align: center;
}
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
  }
  .filter-category-grid {
    grid-template-columns: 1fr;
  }
}

.bg-danger-light {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  border: 2px solid #ff6b6b;
}
.bg-warning-light {
  background: linear-gradient(135deg, #fffaeb 0%, #fff4d6 100%);
  border: 2px solid #ff9800;
}
.bg-success-light {
  background: linear-gradient(135deg, #e8f9f0 0%, #d4f1e3 100%);
  border: 2px solid #4caf50;
}

.profile-preview {
  display: none;
  position: absolute;
  top: 0%;
  left: 100%;
  margin-left:200px;
  z-index: 1000;
  background: white;
  padding: 5px;
}
.dropVaelg {
  position: relative;
}
.dropVaelg:hover .profile-preview {
  display: block;
}