form {
    display: flex;
    position: relative;
    padding-left: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

form fieldset.active {
    display: flex;
}

form label  {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
    padding-right: 1rem;
    margin-top: 1rem;
}

form label.row  {
    flex-direction: row;
    align-items: start;
    margin-top: 2.7rem;
    user-select: none;
}

form label.row.single  {
    margin-top: 1rem;
}

form label.adjust {
    height: calc(100% - 2rem);
}

form label.adjust textarea {
    height: 100%;
}

form label span {
    padding-left: 2px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}

form > a {
    width: 100%;
    padding-right: 1rem;
    padding-left: .3rem;
    margin-top: 2.4rem;
    line-height: 2.4rem;
}

form input:focus, 
form select:focus,
form textarea:focus {
    border-color: var(--border-focus);
}

form input[type="date"], 
form input[type="week"],
form input[type="datetime-local"] {
    line-height: 1.28;
}

form input[type="checkbox"] {
    position: relative;
    width: 42px;
    height: 22px;
    margin: 0 .8rem 0 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-normal);
    border-radius: 20px;
    background-color: var(--bg-color-input);
    outline: none;
    transition: all .25s;
}

form input:checked[type="checkbox"] {
    outline: none;
}

form input[type="checkbox"]:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 8px;
    margin: 3px;
    top: 0;
    left: 0;
    background-color: #999;
    transition: all .25s;
}

form input:checked[type="checkbox"]:before {
    background-color: var(--primary-color);
    left: auto;
    right: 0;
}

form input[type="checkbox"] + div {
    display: inline-block;
}

form textarea {
    min-height: 2.4rem;
    height: 18rem;
    resize: vertical;
    line-height: 1.6;
    text-wrap: wrap;
    overflow-y: auto;    
}

form label.adjust{
    position: static;
}

form label.adjust > textarea {
    position: static;
}

form .get-data-window {
    position: absolute;
    left: 0;
    display: none;
    max-width: 98%;
    width: calc(100% - 1rem);
    min-height: 4.5rem;
    max-height: 8rem;
    top: 4rem;
    border: 1px solid var(--border-muted);
    background-color: var(--bg-color-input);
    z-index: 10;
    box-shadow: 1px 1px 3px 0px rgba(130, 120, 120, 0.2);
    overflow-y: auto;
    overflow-x: hidden;
}

form .get-data-window.active {
    display: block;
}

form .get-data-window > div {
    padding: .3rem .5rem;
    font-size: .85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

form .get-data-window > [data-id="0"] {
    background-color: var(--bg-color-button-secondary);
    font-weight: 600;
    border: 1px solid var(--border-muted);
    margin: 3px;
    padding: 1px 5px;
    color: var(--text-main);
    text-transform: uppercase;
    font-size: .75rem;
}

form .input-select-cancel {
    position: absolute;
    right: 1rem;
    top: -3px;
    width: 1.9rem;
    cursor: pointer;
    transition: opacity ease-in-out 0.3s;
    opacity: 0;
}

form .input-select-cancel::after {
    content: "✖";
    color: var(--red);
    font-size: .9rem;
    font-weight: bold;
    padding-left: 5px;
}

form label:hover .input-select-cancel {
    opacity: 1;
}


form .get-data-window > div:hover {
    background-color: var(--bg-color-hover);
    cursor: pointer;
}

form  select, form [data-action='form.getdata'], .drop-down-field  {
    padding-right: 40px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAADAFBMVEX6+vrgsY2NweX64LaDg7bltn5aVWSIweX64LF5WlVkjcb04LFaVVpaWlVujcYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAEAAAEAAAAZMmRAddwAAAAAAAAAAAAAAAMAAAA9CnMAAAAAAAAAAAAAAAAAAAUAAQAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZKRQAAAAAAAAAAAEAAAAAAQAAAAIAAAAY5zgY5zgAB2w1ODU1NTM+PT00OTU2NTM9VyggLDAsMj1IL1cAAmAAADsAAAAAACk1ODU1NTM+PT03OTU3NTM9VyggLDMsMz1IL1czLDQAApgAAB8AAAAAAA1ZOlg1ID0zOjgAArQAADcAAAAAACY1ODU1NTM+PT0wMDY4NTM9VyggLDYsND1IL1cAAugAADsAAAAAACg1ODU1NTM+PT0zMDY5NTM9VyggLDksNT1IL1c4LDMAAyAAAB8AAAAAAA1ZOlg2ID0zOjQAAzwAADsAAAAAACg1ODU1NTM+PT03MDY5NTM9VyggLDMsNT1IL1c2LDQAA3QAADsAAAAAACg1ODU1NTM+PT0xMTYwNjM9VyggLDcsNj1IL1c1LDQAA6wAAB8AAAAAAA1ZOlg2ID0zOjIAA8gAADcAAAAAACY1ODU1NTM+PT00MTYwNjM9VyggLDAsNj1IL1cAA/wAADcAAAAAACY1ODU1NTM+PT05MTYxNjM9VyggLDUsNz1IL1fpa83VAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAADdJREFUeNpjYBgFQxEwMkFoZhYcCljZ2EEUBycXAz4VeOTBKrjxyQNV8PDilQeq4BvooBoFFAAArV8A0MHMKv0AAAAASUVORK5CYII=);
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
}


.form-header {
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin: 1.2rem 1rem .2rem 0;
    padding: .25rem 0 0 0;
    color: #3ba666;
    font-size: .9rem;
    font-weight: bold;   
}

[data-list-search] > div {
    overflow-x: hidden;
    overflow-y: scroll;
    resize: vertical;
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    width: 100%;
    height: 14.7rem;
    margin-top: 1rem;  
}

[data-list-search] > div > div {
    border-bottom: 1px solid #eee;
    padding: .5rem;    
}

[data-list-search] > div > div:hover {
    background-color: hsl(136, 35%, 94%);
    cursor: pointer;    
}

[data-list-search] > div > div > div:first-child {
    font-size: .8rem;
    font-weight: bold;    
}

[data-list-search] > div > div > div:last-child {
    font-size: .9rem;   
}

[data-list-search] > div > div > div {
    white-space: nowrap;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
    color: #333;
}

[data-list-search] .selected {
    background-color: #d4f1dc;
}

/******************* PHOTO GALLERY ******************/

[data-tileX-gallery] {
    display: flex;
    flex-flow: wrap;
    flex-wrap: wrap !important;
    padding: 3px;
}


[data-tileX-gallery] > figure {
    flex-grow: 1;
    min-width: 100px;
    max-width: 160px;
    background: #eee;
    position: relative;
    margin: 2px;
    border: 1px solid #eee;
    outline: none;
    cursor: pointer;
    position: relative;
}

[data-tileX-gallery] > figure::before {
    content: "";
    padding-top: 100%;
    display: block;
}

[data-tileX-gallery] > figure > img {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

[data-tileX-gallery] > figure::after {
    position: absolute; 
    content: '';
    top: -8px;
    left: -5px; 
    height: 14px;
    width: 14px;
    border: 1px solid var(--gray);
    margin: .95rem .75rem;
    background-color: white;
}

[data-tileX-gallery] > [data-grid-row-selected="1"]::after {
    background-image: url(../img/checked-on.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #FFF;
    background-size: 10px;
}

[data-tileX-gallery] > figure > .text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    font-size: 0.75rem;
    font-weight: 600;
    color: #eee;
    background-color: #293949;
    padding: 6px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
    transition: opacity .2s ease-in;
    opacity: .7;    
}

[data-tileX-gallery] > figure:hover > .text {
    opacity: .9;
}

.image-gallery {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    grid-auto-rows: 175px;
    grid-auto-flow: dense;
    padding: 5px;
}

.image-gallery.small {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: 140px;
}

.image-gallery > figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
}

.image-gallery > figure:hover {
    cursor: pointer;
}

.image-gallery > figure img {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-gallery > figure > p {
    opacity: 0;
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 2px solid #4dac71;
    height: auto;
    background-color: #314353;
    color: #fafafa;
    font-size: .85rem;
    padding: .2rem .5rem;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
    transition: opacity ease-in-out 0.3s;
}

.image-gallery > figure > span {
    position: absolute;
    z-index: 1;
    margin: 0;
    top: 10px;
    left: 0;
}

.image-gallery > figure > span::before {
background-color: #FFF;
}

.image-gallery > figure:hover > p {
    opacity: 1;
}

.image-gallery .horizontal {
    grid-column: span 2;
}

.image-gallery .vertical {
    grid-row: span 2;
}

.image-gallery .big {
    grid-column: span 2;
    grid-row: span 2;
}


/********************************* TILES  *************************************/

.dashboard-container {
    background-color: var(--bg-color-medium);
    padding: .5rem;
}



[data-tile] {
    break-inside: initial;
    background: #fff;
    margin-bottom: 1.5rem;
    display: block;
    background-color: #fff;
    width: 100%;
    padding: 1rem .5rem;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 2px 5px 11px 0px rgba(100, 100, 100, 0.11);
    user-select: none;   
}

[data-tile] > .header {
    border-bottom: 1px solid var(--border-muted);
    font-size: 1.3rem;
    padding: 0 .3rem;
    color: var(--text-main);    
}

[data-tile] > .header > svg {
    transform: translate(-4px, 5px);
}

[data-tile] > .header.calendar > svg {
    fill: var(--primary-color);
}

[data-tile] > .header.todo > svg {
    fill: var(--grid-cal-deadline-color);
}

[data-tile] .sub-header {
    font-size: .8rem;
    padding: .3rem;    
}

[data-tile] > .calendar-day {
    margin: .75rem .3rem;   
}

[data-tile] .calendar-day-header {
    font-size: .9rem;
    font-weight: bold;
    color: #222;    
}

[data-tile] .calendar-day-header:hover {
    color: var(--text-link);
    cursor: pointer;
}

[data-tile] .calendar-day-holiday {
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;
    color: #ff6b6b;
}

[data-tile] .calendar-day-holiday:hover {
    color: var(--text-link);
    cursor: pointer;
}

[data-tile] .information svg {
    transform: translate(0px, 5px);
    height: 1.5rem;
    width: 1.5rem;
    fill: var(--blue);
    margin-right: .3rem;    
}

[data-calendar-event] {
    display: flex;
    gap: 1rem;
    background-color: #f1fafa;
    border-left: 3px solid #4dac71;
    border-bottom: none !important;
    margin-top: .3rem;
    margin-bottom: .75rem;
    padding: .5rem;    
}

[data-calendar-event].none {
    background-color: #fafafa;
    border-left: 3px solid #ccc; 
}

[data-calendar-event].deadline {
    background-color: snow;
    border-left: 3px solid orangered;
}

[data-calendar-event] > div {
    min-width: 5rem;
    font-size: .85rem;    
}

[data-calendar-event] > div > div:first-child {
    font-weight: 500;   
}

[data-calendar-event] > div > div:first-child svg {
    height: 1.1rem;
    width: 1.1rem;
    fill: rgb(164 27 255);
    transform: translateY(2px);
}

[data-calendar-event] > div > div:last-child {
    font-size: .75rem;
    color: #555;  
}

[data-calendar-event] > div > div:last-child svg {
    height: 1.1rem;
    width: 2rem;
    fill: var(--primary-color);
    transform: translateY(3px);
}

[data-calendar-event] .whole-day > svg {
    height: 1.2rem;
    width: 1.2rem;
    fill: #3ba666;
    transform: translateY(3px);    
}

[data-calendar-event] .alarm > svg {
    height: 1.2rem;
    width: 1.2rem;
    fill:orangered;
    transform: translateY(4px);  
}

[data-calendar-event-pointer] {
    position: relative;
    border-top: 2px solid rgb(178, 109, 224);
    height: 8px;
    margin-top: 5px;
}

[data-calendar-event-pointer].now {
    top: -36px;
    height: 1px;
}

[data-calendar-event-pointer]::before {
    top: -20px;
    left: -12px;
    position: relative;
    text-align: left;
    font-size: 1.6rem;
    width: 1rem;
    font-weight: 900;
    height: auto;
    content: "\25CF";
    color: rgb(178, 109, 224);    
}

@media only screen and (min-width: 900px) {

    [data-tile] {
        min-width: 400px;
        max-width: 1280px;
        padding: 1rem;
        width: 49%;
        margin-right: 1%;
        float: left;
    }

    .dashboard-container {
        padding: 1rem 0 1rem 1rem;
    }
}


/******************************* DOC VIEWER  **********************************/

.docviewer-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(31, 31, 31, 0.95);
  overflow: hidden;
  z-index: 10000;
  display: none;
  touch-action: none;
}

.docviewer-container,
.docviewer-container * {
  pointer-events: auto;
}

.docviewer-container.preview {
  display: block;
}

.docviewer-image {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  user-select: none;
  cursor: grab;
  z-index: 10001;
}

.docviewer-text {
  position: absolute;
  bottom: 0;
  background-color: #20293496;
  color: white;
  font-size: 1.5rem;
  z-index: 10002;
  width: 100%;
  text-align: center;
  padding: .5rem;
}

/* Knappene */
.docviewer-container button {
  position: absolute;
  z-index: 10002;
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  padding: 0.4rem 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

.docviewer-prev {
  bottom: 2rem;
  right: 5rem;
}

.docviewer-next {
  bottom: 2rem;
  right: 1rem;
}

.docviewer-close {
  top: 1rem;
  right: 1rem;
}

.docviewer-reset {
  top: 1rem;
  right: 5rem;
}

.docviewer-download {
  top: 1rem;
  right: 9rem;
}

.docviewer-copy {
  top: 1rem;
  right: 13rem;
}

.docviewer-msg {
    position: absolute;
    z-index: 9999;
    z-index: 10001;
    color: #c5b1b1;
    top: 45%;
    font-size: 3rem;
    width: 100%;
    text-align: center;
}



@media only screen and (min-width: 900px) {

    .docviewer-prev {
        top: 1rem;
        right: 21rem;
    }

    .docviewer-next {
        top: 1rem;
        right: 17rem;
    }    
    
    [data-tileX-gallery] > figure {
        min-width: 120px;
        max-width: 160px;
    }

    [data-tileX-gallery] > figure > .text {
        padding: 3px 6px;
        opacity: 0;    
    }
   
}

@media only screen and (min-width: 369px) {
    .width-s-1-12 { width: 8.333% !important; }
    .width-s-2-12 { width: 16.666% !important; }
    .width-s-3-12 { width: 25% !important; }
    .width-s-4-12 { width: 33.333% !important; }
    .width-s-5-12 { width: 41.666% !important; }
    .width-s-6-12 { width: 50% !important; }
    .width-s-7-12 { width: 58.333% !important; }
    .width-s-8-12 { width: 66.666% !important; }
    .width-s-9-12 { width: 75% !important; }
    .width-s-10-12 { width: 83.333% !important; }
    .width-s-11-12 { width: 91.666% !important; }
    .width-s-12-12 { width: 100% !important; }
}

@media only screen and (min-width: 500px) {
    .width-m-1-12 { width: 8.333% !important; }
    .width-m-2-12 { width: 16.666% !important; }
    .width-m-3-12 { width: 25% !important; }
    .width-m-4-12 { width: 33.333% !important; }
    .width-m-5-12 { width: 41.666% !important; }
    .width-m-6-12 { width: 50% !important; }
    .width-m-7-12 { width: 58.333% !important; }
    .width-m-8-12 { width: 66.666% !important; }
    .width-m-9-12 { width: 75% !important; }
    .width-m-10-12 { width: 83.333% !important; }
    .width-m-11-12 { width: 91.666% !important; }
    .width-m-12-12 { width: 100% !important; }
}

@media only screen and (min-width: 769px) {
    .width-l-1-12 { width: 8.333% !important; }
    .width-l-2-12 { width: 16.666% !important; }
    .width-l-3-12 { width: 25% !important; }
    .width-l-4-12 { width: 33.333% !important; }
    .width-l-5-12 { width: 41.666% !important; }
    .width-l-6-12 { width: 50% !important; }
    .width-l-7-12 { width: 58.333% !important; }
    .width-l-8-12 { width: 66.666% !important; }
    .width-l-9-12 { width: 75% !important; }
    .width-l-10-12 { width: 83.333% !important; }
    .width-l-11-12 { width: 91.666% !important; }
    .width-l-12-12 { width: 100% !important; }
}

@media only screen and (max-width: 300px) {
    .width-1-12, 
    .width-2-12, 
    .width-3-12, 
    .width-4-12, 
    .width-5-12, 
    .width-6-12, 
    .width-7-12, 
    .width-8-12, 
    .width-9-12, 
    .width-10-12, 
    .width-11-12, 
    .width-12-12 { 
        width: 100% !important; 
    }

}