body {
    font-family: Arial;
    font-size: 1vw;
}
/* https://codepen.io/denilsonsa/pen/oNZWRJ */
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald);

/****************************************/
/* Styling rules, such as font and colors */
.date-as-calendar {
font-variant: normal;
font-style: normal;
font-weight: normal;
font-family: "Helvetica", "Arial", sans-serif;

/* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
vertical-align: top;

/* margin: 1ex; */

color: black;
background: white;
background : linear-gradient(to bottom right, #FFF 0%, #EEE 100%);

/*border: 1px solid #888;*/
border: 1px solid #8FD6BD;
/*border-radius: 3px;*/
overflow: hidden;
/*box-shadow: 2px 2px 2px -2px black;*/
}
.date-as-calendar .weekday,
.date-as-calendar .day,
.date-as-calendar .month,
.date-as-calendar .year {
text-align: center;
line-height: 1.0;
}
.date-as-calendar .month {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
/*background: #B11;
background : linear-gradient(to bottom right, #D66 0%, #A00 100%);*/
background : linear-gradient(to bottom right, #8FD6BD 0%, #00B0B9 100%);
color: white;
}

/****************************************/
/* Layout rules using position: absolute and pixels. */
.position-pixels.date-as-calendar {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.position-pixels.date-as-calendar .weekday,
.position-pixels.date-as-calendar .day,
.position-pixels.date-as-calendar .month,
.position-pixels.date-as-calendar .year {
display: block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1em;
}
.position-pixels.date-as-calendar .month {
top: 0px;
font-size: 12px;
padding: 2px 0;
}
.position-pixels.date-as-calendar .weekday {
top: 16px;
font-size: 10px;
}
.position-pixels.date-as-calendar .day {
top: 26px;
font-size: 24px;
}
.position-pixels.date-as-calendar .year {
top: 50px;
font-size: 14px;
}

/****************************************/
/* Layout rules using position: absolute and relative dimensions using em. */
.position-em.date-as-calendar {
display: inline-block;
position: relative;

width: 4em; 
height: 4em; 
}
.position-em.date-as-calendar .weekday,
.position-em.date-as-calendar .day,
.position-em.date-as-calendar .month,
.position-em.date-as-calendar .year {
display: block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1em;
}
.position-em.date-as-calendar .month {
top: 0px;
font-size: 0.75em;
padding: 0.1em 0;
}
.position-em.date-as-calendar .weekday {
top: 1.6em;
font-size: 0.6125em;
}
.position-em.date-as-calendar .day {
top: 1.1em;
font-size: 1.5em
}
.position-em.date-as-calendar .year {
bottom: 0px;
font-size: 0.87750em;
}

/****************************************/
/* Layout rules using display: inline-flex and relative dimensions using em. */
.inline-flex.date-as-calendar {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;

width: 4em; 
height: 4em; 
}
.inline-flex.date-as-calendar .weekday,
.inline-flex.date-as-calendar .day,
.inline-flex.date-as-calendar .month,
.inline-flex.date-as-calendar .year {
display: block;
flex: 1 1 auto;
}
.inline-flex.date-as-calendar .month {
order: 1;
font-size: 0.75em;
padding: 0.1em 0;
}
.inline-flex.date-as-calendar .weekday {
order: 2;
font-size: 0.6125em;
}
.inline-flex.date-as-calendar .day {
order: 3;
font-size: 1.5em;
}
.inline-flex.date-as-calendar .year {
order: 4;
font-size: 0.87750em;
}

/****************************************/
/* Multiple sizes. */
.date-as-calendar.size0_5x {
font-size: 8px;
}
.date-as-calendar.size0_75x {
font-size: 12px;
}
.date-as-calendar.size1x {
font-size: 16px;
}
.date-as-calendar.size1_25x {
font-size: 20px;
}
.date-as-calendar.size1_5x {
font-size: 24px;
}
.date-as-calendar.size1_75x {
font-size: 28px;
}
.date-as-calendar.size2x {
font-size: 32px;
}
.date-as-calendar.size3x {
font-size: 48px;
}

.grid-container {
    display: grid;
    grid-template-columns: 5% 5% auto;
    gap: 10px;
    padding: 10px;
    border: 1px solid #00B0B9;
}

.grid-formal {
    line-height: 2vw;

}

.grid-container > div, .grid-container > time {
    padding: 10px;
    border: 1px solid #8FD6BD;
}

time {
    cursor: pointer;
}

.grid-clock {
    text-align: center;
    position: relative;
}

.centercenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.hidden {
    display: none;
}

.grayout {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: gray;
    z-index: 999;
}

.event {
    height: 70%;
    width: 70%;
    background-color: white;
    z-index: 1000;
    overflow: scroll;
}

.oppdattert {
    border: 0px solid red;
    color: gray;
    float: right;
    font-size: 0.7em;
}

 /* The sidepanel menu */
 .sidepanel {
    display: none;
    height: 250px; /* Specify a height */
    width: 340; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 10px;
    right: 10px;
    /*background-color: #111;  Black*/
    background: linear-gradient(to bottom right, #8FD6BD 0%, #00B0B9 100%);
    /*overflow-x: hidden;  Disable horizontal scroll */
    overflow: scroll; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    /*transition: 0.5s;  0.5 second transition effect to slide in the sidepanel */
  }
  
  /* The sidepanel links */
  .sidepanel a, .event a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    /*color: #818181;*/
    color: black;
    display: block;
    transition: 0.3s;
    white-space: nowrap;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidepanel a:hover, .event a:hover {
    color: #f1f1f1;
  }
  
  /* Position and style the close button (top right corner) */
  .sidepanel .closebtn, .event .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  /* Style the button that is used to open the sidepanel */
  .openbtn {
    font-size: 1.3em;
    cursor: pointer;
    /*background-color: #111;*/
    background-color: white;
    color: white;
    padding: 10px 15px;
    border: none;
    position: fixed;
    top: 10px;
    right: 10px;
  }
  
  /*.openbtn:hover {*/
  .openbtn {
    background: linear-gradient(to bottom right, #8FD6BD 0%, #00B0B9 100%);
    color: black;
  }

  #qr_origo {
    height: 3vw;
    width: auto;
    padding-left: 20px;
  }
  /*Slutt sidepanel menu */