/* TANGORA CSS */
.ts-panel { display:flex; }
.ts-panel > * { flex:var(--ts-panelbox-flex, 1 1 auto); margin:var(--ts-panelbox-margin, 0px); padding:var(--ts-panelbox-padding, 0px); border-top:var(--ts-panelbox-bordertop, none); border-right:var(--ts-panelbox-borderright, none); border-bottom:var(--ts-panelbox-borderbottom, none); border-left:var(--ts-panelbox-borderleft, none) }
/* RESOURCE #4 BEGIN */

:root
{
    --regular_font_family: RobotoRegular;
    --bold_font_family: RobotoBold;
    
    --white: #ffffff;
    --ghost_white: #dcdada;
    --gray-light: #7f7f7f;
    --gray: #6a6a6a;
    --dark_gray: #333333;
    --border_gray: #d5d5d5;
    --border_table_gray: #efefef;
    --button_gray: #6b6b6b;
    --button_blue: #15bacd;
    --ruby_red: #ef2b2f;
    --ruby_red_trans: rgb(from var(--ruby_red) r g b / .21);
    
    --datetime_width: 165px;
    --date_width: 100px;
    
    --icon_font_family_regular: 'Icon font regular';
    --icon_font_family_solid: 'Icon font solid';
    
    --accent-color: #000f23;
    --ts-accent:#1c6b58; 
    --ts-bg:#ffffff;
    --ts-line:#DAE6DC;
    --ts-radius:10px;
    --ts-fg:#1f2933;
    --head-bg:#F5F8F6;
    --ts-line-strong:#DAE6DC; /*#b9c5ce;*/ 
    --ts-muted: #5a6b7a;
}

/**** GENERAL ****/
body,
td,
input,
textarea,
select,
button {
    color: var(--ts-fg);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: var(--regular_font_family);
}

p:empty
{
    display: none;
}

/**** NOCONTENT ****/
.data-list.one-line div:has(.nocontent)
{
    display: none;
}
.edit-bar .btn.nocontent
{
    display: none;
}

/**** FILTERS ****/
.filtering *
{
    line-height: 1.25em;
    color: var(--dark_gray);
    font-size: 14px;
}

.filtering
{
    margin-inline: -0.25em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filtering+.filtering
{
    margin-top: 10px;
}

.filtering.filtering-left > div,
.filtering.filtering-right > div
{
    width: auto;
    min-width: unset;
    flex-grow: 0;
    flex-shrink: 0;
}

.filtering.filtering-left
{
    justify-content: start;
}
.filtering.filtering-right
{
    justify-content: end;
}

.filtering > div
{
    padding: 4px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 200px;
}

.filtering div:has(input[type="checkbox"])
{
    display: flex;
    gap: 4px;
    align-items: center;
}

.filtering div:has(input[type="checkbox"]) input
{
    margin-inline-start: 16px;
}

.filtering > div > div:last-child
{
    position: relative;
}

.filtering label
{
    color: var(--gray);
    line-height: 1.6;
}
    
.filtering input[type=text],
.filtering input[type=search],
.filtering input[name=searchword],
.filtering nobr>input
{
    box-sizing: border-box;
    width: 100%;
    height: 41px;
    padding: 10px;
    margin: 0;
    border-radius: 5px;
    outline: none;
    font-size: 1em;
    line-height: 1em;
    font-weight: 300;
    background: var(--white);
    border: 1px solid var(--ghost_white);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.filtering .dateTimeBlock 
{
    position: initial;
    display: block;
    background-color: var(--white);
    outline: none;
    margin: 0;
    padding: 10px;
    height: 41px;
    width: 150px;
    border: 1px solid var(--ghost_white);
    border-radius: 5px;
    font-weight: 400;
    color: inherit;
    transform: none;
}

.filtering .dateTimeBlockWrapper
{
    display: block;
    width: 100%;
    height: auto;
}

.filtering select
{
    width: 100%;
    padding: 10px;
    margin: 0;
    border-radius: 5px;
    outline: none;
    font-size: 1em;
    line-height: 1em;
    font-weight: 300;
    line-height: 1.333em;
    background: var(--white) url(/media/imagegenerator/24x0/sort-desc.png) no-repeat calc(100% - 10px) 50%;
    background-image: -webkit-image-set(url(/media/imagegenerator/12x0/sort-desc.png) 1x, url(/media/imagegenerator/24x0/sort-desc.png) 2x);
    background-size: 12px auto;
    border: 1px solid var(--ghost_white);
    appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    -webkit-appearance: none;
}

.filtering input[type=text][id$=QS]
{
    background: var(--white) url(/media/imagegenerator/24x0/admin-search.png) no-repeat calc(100% - 10px) 50%;
    background-image: -webkit-image-set(url(/media/imagegenerator/12x0/admin-search.png) 1x, url(/media/imagegenerator/24x0/admin-search.png) 2x);
    background-size: 12px auto;
    padding-right: 25px;
}

.filtering .calBtn
{
    margin-right: 0;
    margin-top: 1px;
    width: 24px;
}

.filtering .date-interval
{
    min-width: 0;
    max-width: 321px;
}

.filtering .dateTimePicker
{
    display: block;
}

.filtering .dateTimePicker span
{
    color: var(--dark_gray);
}

.filtering .dateTimePickerInputSkin
{
    display: none;
}

.dateTimeBlock>img
{
    float: left !important;
    padding: 0 !important;
    width: 10px !important;
    height: 10px !important;
    margin-left: 0;
}

.filtering table
{
    display: block !important;
}

.filtering td
{
    vertical-align: middle;
}

.filtering input[type=button],
.filtering input[type=submit]
{
    font-family: var(--bold_font_family);
    font-weight: 300;
    font-size: 1em;
    text-transform: uppercase;
    color: var(--white);
    text-align: center;
    border: 0;
    border-radius: 5px;
    margin: 0;
    background-color: var(--button_blue);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 41px;
    line-height: 1em;
    min-width: 80px;
    padding: 10px;
    outline: none;
    cursor: pointer;
    border: 1px solid var(--button_blue);
    transition: all 300ms ease 0ms;
}
.filtering > div:has(input[type=button]),
.filtering > div:has(input[type=submit])
{
    min-width: 0;
    max-width: fit-content;
}

.filtering .quicksearchselectorbox
{
    width: 100%;
    left: 0 !important;
    top: 100% !important;
    z-index: 1;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: var(--white);
    border: 1px solid var(--ghost_white);
    margin-top: -1px;
    box-sizing: border-box;
}
.filtering div.quicksearchselectorbox ul
{
    margin: 0;
    padding: 0;
}
.filtering div.quicksearchselectorbox ul li {
    clear: both;
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--ghost_white);
    padding-block: 0.25em;
}
.filtering div.quicksearchselectorbox ul li:last-child {
    border-bottom: none;
}
.filtering div.quicksearchselectorbox ul li:hover {
    background-color: #fff8b8;
}
.filtering div.quicksearchselectorbox ul li a {
    display: block;
    text-decoration: none;
    padding: 4px;
    margin: 0;
    color: #7f7f7f;
    text-align: left;
    padding-left: 10px;
}

@media screen and (max-width: 600px)
{
    .filtering.filtering-grid.filtering-grid > div
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 8px;
    }
    .filtering.filtering-grid.filtering-grid > div > *:nth-child(1)
    {
        grid-area: 1 / 1 / 2 / 2;
        margin-inline-start: auto;
        margin-inline-end: 8px;
    }
    .filtering.filtering-grid.filtering-grid > div > *:nth-child(2)
    {
        grid-area: 1 / 2 / 2 / 3;
    }
    .filtering.filtering-grid.filtering-grid > div > *:nth-child(3)
    {
        grid-area: 2 / 1 / 3 / 2;
        margin-inline-start: auto;
        margin-inline-end: 8px;
    }
    .filtering.filtering-grid.filtering-grid > div > *:nth-child(4)
    {
        grid-area: 2 / 2 / 3 / 3;
    }
    .filtering.filtering-grid.filtering-grid > div > *:nth-child(5)
    {
        grid-area: 3 / 1 / 4 / 2;
        margin-inline-start: auto;
        margin-inline-end: 8px;
    }
    .filtering.filtering-grid.filtering-grid > div > *:nth-child(6)
    {
        grid-area: 3 / 2 / 4 / 3;
    }
}

@media screen and (max-width: 400px)
{
    .filtering .date-interval tbody tr
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .filtering .date-interval tbody tr td:nth-child(2)
    {
        display: none;
    }
}

/**** TABLE ****/
.table
{
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    margin-top: 1em;
    font-size: 14px;
    border-left: 1px solid var(--border_table_gray);
    width: 100%;
    background-color: var(--white);
}



.table-header
{
    text-transform: uppercase;
    font-family: var(--bold_font_family);
}

.table th,
.table td
{
    padding: 10px;
    border-right: 1px solid var(--border_table_gray);
    border-bottom: 1px solid var(--border_table_gray);
    font-weight: 400;
    text-align: left;
}

.table-header th[onclick]
{
    cursor: pointer;
}


.table-header th[data-sortorder="asc"],
.table-header th[data-sortorder="desc"]
{
    display: flex;
    align-items: center;
}

.table-header th[data-sortorder="asc"]:after,
.table-header th[data-sortorder="desc"]:after
{
    content: '';
    display: inline-block;
    float: left;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 11px;
    width: 16px;
    height: 16px;
}

.table-header th[data-sortorder="asc"]::after
{
    background-image: url(/media/imagegenerator/22x0/sort-asc.png);
    background-image: -webkit-image-set(url(/media/imagegenerator/11x0/sort-asc.png) 1x, url(/media/imagegenerator/22x0/sort-asc.png) 2x);
}

.table-header th[data-sortorder="desc"]::after
{
    background-image: url(/media/imagegenerator/22x0/sort-desc.png);
    background-image: -webkit-image-set(url(/media/imagegenerator/11x0/sort-desc.png) 1x, url(/media/imagegenerator/22x0/sort-desc.png) 2x);
}

.table tbody .table-row:nth-child(odd)
{
    background-color: rgb(249, 249, 249);
}
.table tbody .table-row
{
    position: relative;
    transform: translate(0, 0);
}
.table tbody .table-row td
{
    font-size: 14px;
}

.table-row a.table-full-row-link
{
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
}

.table-row[data-efterlyst="1"] td,
.table-row[data-abensag="Ja"] td
{
    color: red !important;
}

.table-row[data-status="22"] td
{
    font-style: italic;
    color: #a9a3a3;
}

.table tbody .table-row:nth-child(odd):hover,
.table tbody .table-row:hover
{
    background-color: #f1f1f1;
}

.table-row .date-cell
{
    width: var(--date_width);
}
.table-row .datetime-cell
{
    width: var(--datetime_width);
}

@media screen and (max-width: 800px)
{
    .table thead
    {
        display: none;
    }
    .table-row
    {
        border-bottom: 2px solid;
    }
    .table-row:first-child
    {
        border-top: 2px solid;
    }
    .table-row td
    {
        display: grid;
        grid-template-columns: 40% auto;
        align-items: center;
        gap: 8px;
    }
    .table-row td:before
    {
        content: attr(data-label) ' ';
        text-transform: uppercase;
        font-family: var(--bold_font_family);
        font-style: normal;
        word-break: break-all;
    }
    .table-row .date-cell,
    .table-row .datetime-cell
    {
        width: 100%;
    }
}

.noshadow
{
    box-shadow: unset;
}

.noborder.table,
.noborder.table .table-header
{
    border-left: unset;
}
.noborder.table th:last-child,
.noborder.table td:last-child
{
    border-right: unset;
}

.size16.table,
.size16.table tbody .table-row td
{
    font-size: 16px;
}


/**** PANELS ****/
.panel-wrapper-2-1
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.panel-wrapper-1-1
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(380px,1fr));
    gap: 20px;
}

.panel-wrapper-0-1
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


.panel-wrapper-2-1 .panel:first-child
{
    grid-column: 1 / 3;
}

.panel-wrapper-2-1 .panel:last-child
{
    grid-column: -1 / 3;
}

.panel-wrapper-1-1 .panel
{
    /*grid-column: 1 / -1;*/
}

.panel-wrapper-0-1 .panel
{
    grid-column: 2 / -1; 
}

@media screen and (max-width: 1024px)
{
    .panel-wrapper-2-1
    {
        grid-template-columns: unset;
    }
    .panel-wrapper-0-1
    {
        grid-template-columns: unset;
    }
}

.panel
{
    position: relative;
    margin-top: 40px;
    font-size: 16px;
    font-family: var(--regular_font_family);
    line-height: 1.25em;
    padding-block: 10px;
}

.panel-heading
{
    position: absolute;
    top: -15px;
    line-height: 1;
    left: 25px;
    padding: 0;
    font-size: 1em;
    text-transform: uppercase;
    font-family: var(--bold_font_family);
    font-weight: 400;
}

.panel-body
{
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    background-color: var(--white);
    height: 100%;
}

/**** DETAILS ****/
.columns
{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.columns > *
{
    width: 100%;
}

@media screen and (max-width: 800px)
{
    .columns
    {
        flex-direction: column;
        gap: 0px;
    }
}

/**** FORM ****/
.form input[type="text"],
.form input[type="password"]
{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 33px;
    padding: 5px;
    margin: 0;
    border-radius: 5px;
    outline: none;
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 300;
    background: var(--white);
    border: 1px solid #ccc;
    font-family: inherit;
    color: inherit;
}

.form input[type=text][id$=QS]
{
    background-color: var(--white);
    background-image: -webkit-image-set(url(/media/imagegenerator/12x0/admin-search.png) 1x, url(/media/imagegenerator/24x0/admin-search.png) 2x);
    background-size: 12px auto;
    padding-right: 30px;
    background-repeat: no-repeat;
    background-position: right 10px top 50%
}
.form input[type=text][id$=QS].formreq
{
    background-color: var(--ruby_red_trans);
}

.form select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 33px;
    padding: 5px;
    margin: 0;
    border-radius: 5px;
    outline: none;
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 300;
    border: 1px solid #ccc;
    background: var(--white) url(/media/imagegenerator/24x0/sort-desc.png) no-repeat right 10px top 50%;
    background-image: -webkit-image-set(url(/media/imagegenerator/12x0/sort-desc.png) 1x, url(/media/imagegenerator/24x0/sort-desc.png) 2x);
    background-size: 12px auto;
    padding-right: 30px;
    font-family: inherit;
    color: inherit;
}

.form textarea {
    resize: none;
    min-height: 2.5em;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    margin: 0;
    border-radius: 5px;
    outline: none;
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 300;
    background: var(--white);
    border: 1px solid #ccc;
    font-family: inherit;
    color: inherit;
}

.form .uploadControl {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    padding: 5px;
    margin: 0;
    border-radius: 2px;
    outline: none;
    font-size: 1rem;
    font-weight: 300;
    background: var(--white);
    border: 1px solid #888888;
    cursor: pointer;
}

.form .quicksearchselectorbox
{
    width: 100%;
    left: 0 !important;
    top: 100% !important;
    z-index: 1;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    background: var(--white);
    border: 1px solid #888888;
    margin-top: -1px;
}

.form .quicksearchselectorbox ul li
{
    border-bottom: 1px solid #888888;
}
.form .quicksearchselectorbox ul li:last-child
{
    border-bottom: none;
}

.form div.quicksearchselectorbox ul li a {
    display: block;
    text-decoration: none;
    padding: 0.25em;
    margin: 0;
}

.form div.quicksearchselectorbox ul li:hover {
    background-color: #fff8b8;
}

.form .dateTimeBlockWrapper {
    width: 140px;
}
.form .dateTimeBlock {
    width: 111px;
}

.form .sectionBoxInner
{
    height: 100%;
}

.form .dateInnerTimeBlock
{
    padding-left: 5px;
}

form .form .sectionBoxInner > div > div
{
    padding: 5px 5px;
}

.form .data-list.one-line > div
{
    justify-content: unset;
    flex-wrap: unset;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 55px;
}
.form .data-list.one-line> div>*:first-child
{
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 124px;
}
.form .data-list.one-line> div>*:last-child
{
    width: 100%;
    position: relative;
}

.form input[type="file"]
{
    position: absolute;
}

@media screen and (max-width: 400px)
{
     .form .sectionBoxInner > div > div > div
    {
        flex-direction: column;
        gap: 8px;
    }
    
    .form .data-list.one-line > div:fist-child
    .form .data-list.one-line > div:last-child
    {
        width: 100%;
        text-align: left;
    }
}

/**** FORM VALIDATION ****/
.form input[type="text"].formreq,
.form input[type="search"].formreq,
.form input[type="password"].formreq,
.form input[name="username"].formreq,
.form input[name*="filter"].formreq,
.form textarea.formreq,
.form textarea.formreq~div[id$="_editor"],
.form select.formreq,
.form .uploadControl.formreq,
.form .formreq input[type="text"],
.form .formreq input[type="search"],
.form .formreq input[type="password"],
.form .formreq input[name="username"],
.form .formreq input[name*="filter"],
.form .formreq textarea,
.form .formreq select,
.form .formreq  input.dateTimePickerInputSkin,
.form .formreq .uploadControl,
.form select.formreq~.tag-like-container>select,
.form input.formreq[type="hidden"]+div[id$="_QS"],
.form input.formreq[type="hidden"]~span>input[id$="_QS"]{
    border-color: var(--ruby_red) !important;
}

.form select.formreq,
.form textarea.formreq,
.form input.formreq,
.form .formreq .dateTimePicker .dateTimePickerInputSkin
{
    background-color: var(--ruby_red_trans);
}
.form input.formreq[type="checkbox"]+label {
    color: var(--ruby_red);
}
.form .toggle input.formreq[type="checkbox"]+label {
    color: var(--ruby_red);
}
.form .choicegroup.formreq {
    border: solid 1px var(--ruby_red);
    box-sizing: border-box;
    padding: 0.9em 0.85em;
    margin: 0;
    background-color: var(--white);
    border-radius: .14em;
}
.form span.formreq {
    display: none;
}

/**** BUTTONS ****/
div.edit-bar
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
}

.btn a,
.btn input[type="button"],
.btn input[type="submit"]
{
    /*font-weight: 300;
    font-size: 1em;
    color: var(--white);
    line-height: 1.333em;
    text-align: center;
    margin: 0;
    background-color: rgb(21, 186, 205);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    min-width: 80px;
    padding: 10px;
    outline: none;
    cursor: pointer;
    border: 1px solid rgb(21, 186, 205);
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;*/
      display: inline-block;
  margin-bottom: 1rem;
  padding: .6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--ts-accent);
  border: 1px solid var(--ts-accent);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}

.CreateButton p::before {
    content: "+";
    margin-right: .45rem;
    font-weight: 700;
}

.CreateButton .TangoraCreateButton::before {
    content: "+";
    margin-right: .45rem;
    font-weight: 700;
}

.btn a:disabled,
.btn input[type="button"]:disabled,
.btn input[type="submit"]:disabled {
    cursor: wait;
    opacity: 0.5;
}

#mergefield_main .btn-gray a.actionlink,
.btn-gray a
{
    background-color: var(--button_gray);
    color: var(--white);
    border-color: var(--button_gray);
}

.btn.btn-gray.btn-inverted a
{
    color: var(--button_gray);
}

.btn-inverted.count:not([data-count-active="0"]) a.actionlink {
    border-color: red !important;
    color: red !important;
}

.btn.btn-inverted a,
.btn.btn-inverted input[type="button"],
.btn.btn-inverted input[type="submit"]
{
    background-color: transparent;
    color: var(--button_blue);
}

.btn+.btn, .btn a+a {
    margin-left: 0px;
}

body:has(form div.form) .action-buttons
{
    display: none;
}

/**** DATA LISTS ****/
.data-list.one-line > div 
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-inline: 5px;
    padding-top: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid  var(--border_gray);
}
.data-list.one-line> div>*:first-child
{
    margin-right: 1em;
}
.data-list> div>*:first-child
{
    font-family: var(--bold_font_family);
}
.data-list.one-line> div>*:last-child
{
    text-align: right;
}

.data-list.one-line.fixed-label-width > div
{
    gap: 1rem;
    align-items: flex-start;
    padding-top: 16px;
}

.data-list.fixed-label-width > div > *:first-child
{
    min-width: 140px;
    margin-right: unset;
}
.data-list.fixed-label-width > div > *:last-child
{
    width: calc(100% - 1rem - 140px);
}

.align-right
{
    display: flex;
    padding-block: 1rem;
    padding-inline: 5px;
    justify-content: flex-end;
}

@media screen and (max-width: 400px)
{
    .data-list.fixed-label-width > div > *:last-child
    {
        width: 100%;
    }
}
/***** HISTORIK *****/
.historik
{
    margin-block-end: 10px;
    margin-inline: 5px;
    font-size: 14px;
}

.historik:first-child
{
    margin-block-start: 8px;
}

.historik > div:first-child
{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-family: var(--bold_font_family);
    margin-block-end: 5px;
    color: var(--gray-light);
}

.historik .action
{
    margin-inline-start: 10px;
    margin-block-end: 5px;
    position: relative;
    color: var(--gray);
    -webkit-font-smoothing: subpixel-antialiased;
}

.historik .action:before
{
    content: '•';
    position: absolute;
    top: 1px;
    left: -8px;
}

/**** DATAPICKER SMALL SCREEN ****/
body:has(.panel .calBtn.active) div[id$=SingleCalendar]
{
    transform: translateX(-103px);
}
body:has(.date-interval td:first-child .calBtn.active) div[id$=SingleCalendar]
{
    transform: translateX(-11px) translateY(14px);
}
body:has(.date-interval td:last-child .calBtn.active) div[id$=SingleCalendar]
{
    transform: translateX(-103px) translateY(14px);
}

@media screen and (max-width: 400px)
{
        body:has(.date-interval table td:last-child .calBtn.active) div[id$=SingleCalendar]
    {
        transform: translateX(-11px) translateY(14px);
    }
    
    .form .data-list.one-line > div.one-line-date
    {
        flex-direction: column;
        align-items: unset;
    }
}



/***** AS EXTRA STYLES *****/
.btn-icon a
{
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-icon a:BEFORE
{
    content: '';
    width: 1rem;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    mask-position: center center;
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--white);
}

.btn-request a:BEFORE
{
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDYuMjg4IiBoZWlnaHQ9IjI0MC42NTEiIHZpZXdCb3g9IjAgMCAyMDYuMjg4IDI0MC42NTEiPgogIDxwYXRoIGQ9Ik0tMzk1NC44MTgtMTA4Mi4xODJhMTAzLjEzOSwxMDMuMTM5LDAsMCwxLTM1LjgtMTI4LjI1NSw4LjYsOC42LDAsMCwxLDExLjQtNC4yMzYsOC42LDguNiwwLDAsMSw0LjIzNiwxMS40LDg1Ljk1LDg1Ljk1LDAsMCwwLDIxLjI4MiwxMDAuMjY0LDg1Ljk1LDg1Ljk1LDAsMCwwLDEwMi4xMzYsOC41OTQsODUuOTQ5LDg1Ljk0OSwwLDAsMCwzNy43MzgtOTUuM3YuMDA3YTg1Ljk0OCw4NS45NDgsMCwwLDAtNDguMDg5LTU2LjMsODUuOTQ1LDg1Ljk0NSwwLDAsMC02Ny44MTQtLjg4M2wzMC4zNzUsMzAuMzU2YTguNjA3LDguNjA3LDAsMCwxLDAsMTIuMTcxLDguNjA3LDguNjA3LDAsMCwxLTEyLjE3MSwwbC00Mi45NzQtNDIuOTc1YTguNTkxLDguNTkxLDAsMCwxLTIuNTI1LTYuMDg1LDguNTkzLDguNTkzLDAsMCwxLDIuNTI1LTYuMDg1bDQyLjk3NC00Mi45NzRhOC42LDguNiwwLDAsMSw2LjA4NS0yLjUyNSw4LjYsOC42LDAsMCwxLDYuMDg2LDIuNTI1LDguNiw4LjYsMCwwLDEsMi41MjUsNi4wODUsOC42LDguNiwwLDAsMS0yLjUyNSw2LjA4NWwtMjIuODM0LDIyLjgyNWExMDMuMTYxLDEwMy4xNjEsMCwwLDEsMTA4LjExMSwzOC40NTgsMTAzLjEzNywxMDMuMTM3LDAsMCwxLTguMzEyLDEzMi45LDEwMy4wMjYsMTAzLjAyNiwwLDAsMS03NC41LDMxLjc3NEExMDIuODQ0LDEwMi44NDQsMCwwLDEtMzk1NC44MTgtMTA4Mi4xODJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAwIDEzMDUpIi8+Cjwvc3ZnPg==);
}

.btn-bubble a:BEFORE
{
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjYuMTEyIiBoZWlnaHQ9IjIxOS40MzQiIHZpZXdCb3g9IjAgMCAyMjYuMTEyIDIxOS40MzQiPgogIDxwYXRoIGQ9Ik0tMzgxNC4yOS0xMDg2LjgzNGwtMzguNDEtMjQuNDQ5YTEyNy4yMDYsMTI3LjIwNiwwLDAsMS0zNC4wNjksNC42ODZjLTYyLjQzNywwLTExMy4yMzEtNDQuNS0xMTMuMjMxLTk5LjJzNTAuNzk1LTk5LjIsMTEzLjIzLTk5LjJhMTI4Ljg4NSwxMjguODg1LDAsMCwxLDI0LjczOSwyLjM4NSwxMjMuNzY3LDEyMy43NjcsMCwwLDEsMjIuODU1LDYuODEzLDExNy41MjYsMTE3LjUyNiwwLDAsMSwyMC4zNzQsMTAuNzI1LDEwOS40ODYsMTA5LjQ4NiwwLDAsMSwxNy4yOTIsMTQuMTIzLDEwMS4wNDUsMTAxLjA0NSwwLDAsMSwxMS42NDIsMTQuMDI1LDkzLjg2Niw5My44NjYsMCwwLDEsOC43MjIsMTUuNzM5LDg3LjE2NCw4Ny4xNjQsMCwwLDEsNy4yNTcsMzUuNCw5Mi4zNjMsOTIuMzYzLDAsMCwxLTIsMTguMzM0LDkyLjM1MSw5Mi4zNTEsMCwwLDEtNS41NCwxNy40LDkyLjM3Niw5Mi4zNzYsMCwwLDEtOC44NiwxNS45Nyw5Mi4zMTUsOTIuMzE1LDAsMCwxLTExLjY1NywxMy43MzZ2NDYuNzgyYTguMDE0LDguMDE0LDAsMCwxLTQuMTc2LDcuMDI0LDguMDM3LDguMDM3LDAsMCwxLTMuODM4Ljk3OUE4LDgsMCwwLDEtMzgxNC4yOS0xMDg2LjgzNFptLTMyLjczNS0zOS45MTYsMjkuMTg4LDE4LjU5M3YtMzUuNjM0YTguMDQxLDguMDQxLDAsMCwxLDIuNTY1LTUuODU0bC4wMTUtLjAxM2E3Ni45LDc2LjksMCwwLDAsMTAuNzM5LTExLjc4Miw3Ni45LDc2LjksMCwwLDAsOC0xMy42LDc2Ljg2LDc2Ljg2LDAsMCwwLDUuMDUzLTE0Ljk0Niw3Ni44NTMsNzYuODUzLDAsMCwwLDEuODkxLTE1LjgyM2MtLjAwNS00NS44NTgtNDMuNjA4LTgzLjE2NS05Ny4yLTgzLjE2NXMtOTcuMiwzNy4zMTEtOTcuMiw4My4xNzIsNDMuNiw4My4xNzIsOTcuMiw4My4xNzJoLjFhMTExLjEsMTExLjEsMCwwLDAsMzIuOTkxLTUuMDA1LDguMDIxLDguMDIxLDAsMCwxLDIuMzcxLS4zNThBOC4wMDcsOC4wMDcsMCwwLDEtMzg0Ny4wMjUtMTEyNi43NVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwMDAgMTMwNSkiLz4KPC9zdmc+);
}

.panel-wrapper-2-1
{
    position: relative;
}

.panel-wrapper-2-1 *:first-child
{
    grid-column: 1 / 3;
}

.panel-wrapper-2-1 *:last-child
{
    grid-column: -1 / 3;
}

.panel-heading-inner
{
    margin-inline-start: 5px;
    margin-block-end: 10px;
    font-size: 1em;
    text-transform: uppercase;
    font-family: var(--bold_font_family);
    font-weight: 400;
}

div:has(>.action-links:not(:empty))
{
    margin-block-start: 20px;
}
.action-links:empty
{
    display: none;
}

/*AMU - INDBERETNINGSSITE*/

/*Filterng*/

.filter
{
    display:flex;
    column-gap: 0.5em;
  row-gap: 0.5em;
  /*max-width: 1040px;*/
  margin: 1.5rem 0 3rem;
  padding: 0;
  color: var(--ts-fg);
  font-size: 15px;
  line-height: 1.45;
}

.filter .wrapper
{
    width: 100%;
    display: flex;
    gap: 0.5em; 
    align-items: end;   
}

.filter .wrapper > div
{
    width:100%;
}

.filter .wrapper div.btn
{
    width:auto;
}

.filter .wrapper div.btn input
{
    margin-bottom:0;
}

.filter .wrapper div.dateTimeBlock
{
    width:160px;
}

.filter table
{
    display: block !important;
}

.filter input
{
    width: 100%;
    padding: .5rem .65rem;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--ts-fg, #1f2933);
    background: var(--ts-bg, #ffffff);
    border: 1px solid var(--ts-line);
    border-radius: 6px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.filter select,
.paper select
{
    width: 100%;
    padding: .55rem .65rem;
    margin: 0;
    border-radius: 6px;
    outline: none;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    line-height: 1.333em;
    background: var(--ts-bg) url(/media/imagegenerator/24x0/sort-desc.png) no-repeat calc(100% - 10px) 50%;
    background-image: -webkit-image-set(url(/media/imagegenerator/12x0/sort-desc.png) 1x, url(/media/imagegenerator/24x0/sort-desc.png) 2x);
    background-size: 12px auto;
    border: 1px solid var(--ts-line);
    appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    -webkit-appearance: none;
}

.filter label
{
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ts-muted, #5a6b7a);
}

/*Detalje oppætning*/

.ButtonBar
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:0.25em;
}

.btn.outline a
{
    color: var(--ts-accent);
    background: none;  
}

.paper
{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ts-bg);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius);
    overflow: hidden;    
    font-size: 1rem;
    color: var(--ts-fg);  
    margin: 1rem 0;
}

.paper a
{
    color: var(--ts-fg);
}

.paper .btn a
{
    color: #fff;
}

#mergefield_main .paper td
{
    color: var(--ts-fg);
}

.paper-header
{
    background:var(--head-bg);
    padding: 0.7rem 0.85rem;
    text-transform: uppercase; 
}

.paper.user > div.paper-header p,
.paper.log > div.paper-header p
{
    font-weight: 600;
}

.paper > div,
.columns > .paper > div
{
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--ts-line);  
    display: flex;
    justify-content: space-between;
    align-items: baseline;
/*    gap: 20px;
    display: grid;
    grid-template-columns: 130px 1fr;*/
}

form .columns > .paper > div
{
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--ts-line);  
/*    display: flex;
    justify-content: space-between;*/
    align-items: baseline;
    gap: 20px;
    display: grid;
    grid-template-columns: 150px 1fr;
}

.login > div
{
    padding: 0.7rem 0.85rem;  
}

.paper.user > div[type=createbutton]
{
    padding: 0.7rem 0.85rem;  
    display: flex;
    justify-content: end;
    align-items: baseline;
}

.paper.user > div,
.paper.log > div  
{
    Border:none;
    display:block;
}

.paper div:first-child,
.login div:first-child
{
    font-weight: 600;
}

.paper.user div:first-child,
.paper.log div:first-child,
.paper div.dateInnerTimeBlock,
.paper div.o22l-36010 div
{
    font-weight: 100;
}

.columns
{
    display: flex;
    gap: 1rem; 
}

.paper input,
.login input
{
    width: 100%;
    padding: .5rem .65rem;
    font-family: inherit;
    font-size: inherit;
    font-weight: 100;
    line-height: inherit;
    color: var(--ts-fg);
    background: var(--ts-bg);
    border: 1px solid var(--ts-line);
    border-radius: 6px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.paper input[type="checkbox"]
{
    width:auto;
    margin-right: 6px;
}

.login
{
    max-width: 500px;
}

.login input[type="checkbox"] {
    width: auto;
}

table.paper-table thead tr
{
    text-transform: uppercase;
    border-bottom: 1px solid var(--ts-line)        
} 

table.paper-table thead tr th
{
    padding:0.7rem 0.85rem;
}

table.paper-table tbody tr
{
    border-bottom: 1px solid var(--ts-line);
}

table.paper-table tbody tr td
{
    padding:0.7rem 0.85rem;
}

table.paper-table tbody tr:nth-child(even)
{
    background-color: var(--head-bg);
}

#mergefield_main table.paper-table .section
{
    color: var(--ts-fg);
}

.ts-ownerpicker button.ts-ownerpicker-item
{
    background: var(--ts-bg);
    color: var(--ts-fg);
    border: none;
    font-size: 14px;
    text-align: left;
    padding: 0.65rem 0rem 0rem 0rem;
    font-weight: 100;
    display: block;
}

.ts-ownerpicker
{
    margin-top: 0.9em;  
}

.ts-ownerpicker ul
{
   padding-inline-start: 25px; 
}

.ts-form .ts-field.o-11l1box5:has(input:user-invalid),
.ts-form .ts-field.o-11l1box10:has(input:user-invalid),
.ts-form .ts-field.o-11l1box16:has(input:user-invalid),
.ts-form .ts-field.o-11l1box17:has(input:user-invalid)
{
    margin-left: 0;
    padding-left: 0.85rem;
    border-left: none;
}

.ts-form .ts-field .choicegroup input[type="radio"]
{
    box-shadow:none;
}

form .columns > .paper > div.hide
{
    display:none;
}
/* RESOURCE #4 END */
/* RESOURCE #2 BEGIN */
/* ==========================================================================
   ts-form – generisk formularvisning, uafhængig af side og modullayout.

   Markører, der forventes i layoutet:
     .ts-form              på layoutets rod
     .ts-form-group        på hver kolonne/sektion
     .ts-field             på hver feltboks (sætter renderen allerede)
     .ts-field--wide       felt der skal spænde alle kolonner
     .ts-form-actions      wrapper om gem/annuller
     data-field="<navn>"   på feltboksen (valgfri, se nedenfor)

   Kolonner opstår af sig selv: hver .ts-form-group er en kolonne, og antallet
   følger bredden. To grupper giver to kolonner på en bred skærm og én på en
   smal, uden modifier og uden at filen ved, hvor mange grupper der er.

   Dobbelt klasse (.ts-form.ts-form) på box-model-reglerne, fordi renderen
   indsætter sit eget .o-NlM{width;margin;padding;float} EFTER /user/css.ashx.
   Med samme specificitet vinder den senere regel.

   Farver læses fra --ts-*, hvis siden definerer dem, ellers fallback. Der
   defineres bevidst ingen variabler her – så ville de overskrive sidens.
   ========================================================================== */

.ts-form.ts-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: 1.75rem;
  row-gap: 1.5rem;

  max-width: 1040px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
  color: var(--ts-fg, #1f2933);
  font-size: 15px;
  line-height: 1.45;
}

/* Alt andet end grupperne går på tværs. Fail-open: en boks, filen ikke
   kender, havner i fuld bredde frem for i en tilfældig kolonne. */
.ts-form > * { grid-column: 1 / -1; }
.ts-form > .ts-form-group { grid-column: auto; }
.ts-field--wide { grid-column: 1 / -1; }

/* --- grupper ----------------------------------------------------------- */

.ts-form-group {
  background: var(--ts-bg, #ffffff);
  border: 1px solid var(--ts-line, #d8e0e6);
  border-radius: var(--ts-radius, 10px);
  padding: 1.5rem 1.5rem .5rem;
  box-shadow: 0 1px 2px rgba(16, 32, 45, .05);
}

/* Overskrift fra data-title, så teksten bor i layoutet og ikke i et
   stylesheet – den kan oversættes og læses af skærmlæsere. Inert indtil
   attributten sættes; uden den vises ingen overskrift. */
.ts-form-group[data-title]::before {
  content: attr(data-title);
  display: block;
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--ts-accent, #1c6b58);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ts-accent, #1c6b58);
}

/* --- felter ------------------------------------------------------------ */

.ts-form .ts-field { margin: 0 0 1rem; }

/* Caption-cellen styler captions. Fordi reglen er bundet til cellen og ikke
   til label-elementet, rammer den aldrig de labels, der hører til radioknapper
   og afkrydsningsfelter – de bor i kontrol-cellen. Så er der intet at trække
   tilbage bagefter. */
.ts-form .ts-field > div:first-child { margin-bottom: .3rem; }

.ts-form .ts-field > div:first-child label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ts-fg);
}

/* feltnavne kommer fra databasen i småt; ::first-letter virker kun på
   blokelementer, derfor på den blokke label i caption-cellen */
.ts-form .ts-field > div:first-child label::first-letter {
  text-transform: uppercase;
}

/* Kontrol-cellen styler kontroller. Undtagelser frem for positivliste: en
   ny felttype fra renderen – url, search, number – bliver stylet af sig selv,
   hvor en liste over typer ville have tabt den tavst.
   Listeformen af :not() frem for kædede :not(). Kædet ville give denne regel
   specificitet (0,9,1) – hver :not() tæller sit argument med – og så taber
   alle tilstandsregler nedenfor uden at nogen opdager det. Listeformen tæller
   som én, så reglen lander på (0,3,1) og kan overskrives normalt. */
.ts-form .ts-field input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="image"], [type="file"]),
.ts-form .ts-field select,
.ts-form .ts-field textarea {
  width: 100%;
  padding: .5rem .65rem;

  /* Longhands frem for "font: inherit": shorthanden nulstiller også
     font-variant-numeric, så tabular-nums på chip og øremærke ville blive
     slået ihjel af en regel, der intet har med cifre at gøre. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  color: var(--ts-fg, #1f2933);
  background: var(--ts-bg, #ffffff);
  border: 1px solid var(--ts-line-strong, #b9c5ce);
  border-radius: 6px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.ts-form .ts-field select   { padding-right: .4rem; max-width: 100%; }
.ts-form .ts-field textarea { min-height: 5rem; resize: vertical; }

/* Datovælgerens synlige felt har sin egen bredde fra /lib/dateTimePicker.css
   og bliver derfor smallere end de øvrige felter. Bevidst ikke normaliseret
   her: vælgerens kalenderknap er placeret ud fra den bredde. Skal det se ens
   ud, hører rettelsen hjemme i vælgerens eget stylesheet. */

/* Renderen sætter .o-NlM :focus{outline:none} – synlig fokus tilbage.
   Bredt igen: alt fokuserbart i en feltboks, undtagen dem der har deres
   egen markering længere nede. */
.ts-form .ts-field input:not([type="checkbox"], [type="radio"]):focus,
.ts-form .ts-field select:focus,
.ts-form .ts-field textarea:focus {
  border-color: var(--ts-accent, #1c6b58);
  box-shadow: 0 0 0 3px var(--ts-accent-ring, rgba(28, 107, 88, .18));
  outline: 2px solid transparent;   /* synlig i Windows High Contrast */
  outline-offset: 2px;
}

.ts-form input::placeholder { color: #9aa7b2; }

/* --- valg: radiogrupper og afkrydsning ---------------------------------
   Renderens wrapper-divs har inline float:left. Som flex-items ignoreres
   float pr. spec, så inline-stilen neutraliseres uden !important og uden
   clearfix – og den kollapsede forældrehøjde forsvinder.
   ---------------------------------------------------------------------- */

.ts-form .choicegroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.5rem;
  min-height: 2.35rem;
}

.ts-form .choicegroup > div,
.ts-form .choicegroup > div > div { display: flex; align-items: center; }

.ts-form .choicegroup input[type="radio"],
.ts-form input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0 .45rem 0 0;
  accent-color: var(--ts-accent, #1c6b58);
}

/* Labels i kontrol-cellen får ikke caption-styling, men platformens eget
   stylesheet sætter label{display:block} globalt – målt på siden. Uden
   display:inline ville teksten lande under afkrydsningsfeltet i stedet for
   ved siden af. Det er en undtagelse fra platformen, ikke fra denne fil. */
.ts-form .choicegroup label,
.ts-form .choicelabel {
  display: inline;
  margin: 0;
  font-size: .95rem;
  cursor: pointer;
}

.ts-form .labelbeforechoice { cursor: default; }

.ts-form .choicegroup input[type="radio"]:focus-visible,
.ts-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ts-accent, #1c6b58);
  outline-offset: 2px;
}

/* Afkrydsningsfelter har både en label over feltet og en .choicelabel ved
   siden af, med samme tekst. Den øverste skjules, så rækken læses som
   "[ ] Neutraliseret" på én linje. :has frem for boksnummer, så reglen
   følger feltet og ikke dets plads i layoutet. Fejler åbent. */
/*.ts-form .ts-field:has(input[type="checkbox"]) > div:first-child { display: none; }*/

.ts-form .ts-field:has(input[type="checkbox"]) > div:last-child {
  display: flex;
  align-items: center;
  min-height: 2.35rem;
}

/* --- feltboksens struktur -----------------------------------------------
   Renderen lægger caption og kontrol i hver sin div inde i .ts-field, og
   .ts-label sidder på boksen når der er en caption. Det er en garanteret
   struktur, som kan bruges uden at tilføje noget i layoutet.
   ---------------------------------------------------------------------- */

.ts-form .ts-field > div:first-child { /* caption-celle */ }
.ts-form .ts-field > div:last-child  { /* kontrol-celle */ }

/* felter uden caption skal ikke efterlade et hul hvor overskriften ville stå */
.ts-form .ts-field:not(.ts-label) > div:first-child { margin-bottom: 0; }

/* Afkrydsningsfeltets caption-celle skjules (se nedenfor), så marginen
   ville ellers efterlade et spring i kolonnen. */

/* Vandret variant: caption til venstre, kontrol til højre. Mulig netop fordi
   de to celler altid er der – kræver ingen markører i layoutet. */
.ts-form--horizontal .ts-field {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  align-items: baseline;
  column-gap: .75rem;
}

.ts-form--horizontal .ts-field label { margin-bottom: 0; }

/* --- feltbaserede regler ------------------------------------------------
   Renderen sætter data-fieldname på feltboksen. Det er den markør, der skal
   bruges: den er uafhængig af feltets plads i layoutet, hvor boksnumre
   skifter, når felter flyttes – hvilket er sket tre gange i dette layout.

   Værdierne skrives med unicode-escapes, så filen ikke afhænger af, at
   tegnsættet er UTF-8 hele vejen fra ressourcen til browseren.
   \00F8 = ø, \00E6 = æ
   ---------------------------------------------------------------------- */

.ts-form .ts-field [data-fieldname="chip"] input,
.ts-form .ts-field [data-fieldname="\00F8rem\00E6rke"] input,
.ts-form .ts-field[data-fieldname="chip"] input,
.ts-form .ts-field[data-fieldname="\00F8rem\00E6rke"] input,
.ts-form .ts-field [data-type="number"] input {
  font-variant-numeric: tabular-nums;
}

/* --- obligatoriske felter -----------------------------------------------
   To markører, fordi renderen ikke sætter dem konsekvent: label.required på
   caption-labelen, og [required] på kontrollen. Begge peger på samme ::after,
   så et felt med begge får én stjerne, ikke to.

   Kontroller bag en skin – datovælger, quicksearch – har label.required men
   ingen [required], så de fanges kun af den første selektor. Det er også
   grunden til at browserens egen validering ikke stopper dem ved gem.
   ---------------------------------------------------------------------- */

.ts-form .ts-field label.required::after,
.ts-form .ts-field:has([required]) > div:first-child label::after {
  content: " *";
  margin-left: .15rem;
  color: var(--ts-required, #b3261e);
  font-weight: 700;
}

/* Renderen sætter .formreq på kontroller uden gyldig værdi, først ved
   valideringsforsøg – målt: 0 forekomster ved indlæsning. Den kan sidde på
   selve kontrollen eller på en wrapper, når feltet er en skin (datovælger,
   quicksearch), så begge dækkes. Skjulte inputs undtages: de bærer værdien
   for skinnen og har ingen kant at markere. */
.ts-form .ts-field input.formreq,
.ts-form .ts-field select.formreq,
.ts-form .ts-field textarea.formreq,
.ts-form .ts-field .formreq input:not([type="hidden"]),
.ts-form .ts-field .formreq select,
.ts-form .ts-field input:user-invalid,
.ts-form .ts-field select:user-invalid,
.ts-form .ts-field textarea:user-invalid {
  border-color: var(--ts-required, #b3261e);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .15);
}

/* En wrapper med .formreq har sjældent selv en kant; markeringen skal ligge
   på den synlige kontrol indeni. Her sikres, at wrapperen ikke tegner en
   halv ramme omkring det hele. */
.ts-form .ts-field div.formreq {
  border-color: transparent;
  box-shadow: none;
}

/* Hele feltet markeres, ikke kun kontrollen. For simple regler følger der
   ingen besked med fra serveren, så markeringen er hele forklaringen – og
   en rød kant alene forsvinder let i en kolonne med femten felter.

   :has() rammer uanset om .formreq sidder på kontrollen eller på en wrapper.
   Fejler åbent: uden :has() står kantmarkeringen ovenfor tilbage. */
.ts-form .ts-field:has(.formreq),
.ts-form .ts-field:has(input:user-invalid) {
  /* bjælken trækkes ud i gruppens venstre margen, så feltets indhold
     bliver stående på linje med de øvrige felter */
  margin-left: -1.5rem;
  padding-left: calc(1.5rem - 3px);
  border-left: 3px solid var(--ts-required, #b3261e);
}

.ts-form .ts-field:has(.formreq) > div:first-child label,
.ts-form .ts-field:has(input:user-invalid) > div:first-child label {
  color: var(--ts-required, #b3261e);
}

.ts-form .ts-field:has(.formreq) input:not([type="hidden"]),
.ts-form .ts-field:has(.formreq) select,
.ts-form .ts-field:has(.formreq) textarea {
  background: var(--ts-required-bg, #fdf3f2);
}

/* Markeringen dukker op efter et gemforsøg, ikke mens man skriver, så et
   kort pulsslag gør det tydeligt at noget er sket. Respekterer systemets
   indstilling for reduceret bevægelse. */
@media (prefers-reduced-motion: no-preference) {
  .ts-form .ts-field:has(.formreq) {
    animation: ts-formreq-pulse .5s ease-out 1;
  }
}

@keyframes ts-formreq-pulse {
  from { background: var(--ts-required-bg, #fdf3f2); }
  to   { background: transparent; }
}

/* :user-invalid frem for :invalid – ellers ville hvert tomt felt stå rødt
   fra det øjeblik formularen åbnes. Fejler åbent: uden understøttelse
   vises blot ingen markering, og .formreq dækker stadig efter gemforsøg. */

/* --- tilstande sat af scripts ------------------------------------------ */

.ts-form .ts-field.ts-hidden { display: none; }

.ts-form .ts-field input.ts-locked {
  background: var(--ts-panel, #f4f7f8);
  color: var(--ts-muted, #5a6b7a);
  border-style: solid;
  border-color: #e5e5e5;
  cursor: not-allowed;
}

.ts-form .ts-field input.ts-invalid,
.ts-form .ts-field input.ts-invalid:focus {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .15);
}

/* --- handlinger --------------------------------------------------------- */

.ts-form-actions { text-align: right; margin-top: .25rem; }

.ts-form .actionlink,
.ts-form button,
.ts-form input[type="submit"] {
  display: inline-block;
  width: auto;
  padding: .65rem 1.6rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--ts-accent, #1c6b58);
  border: 1px solid var(--ts-accent, #1c6b58);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}

.ts-form .actionlink:hover,
.ts-form button:hover,
.ts-form input[type="submit"]:hover { filter: brightness(1.12); }

.ts-form .actionlink:focus-visible,
.ts-form input[type="submit"]:focus-visible {
  box-shadow: 0 0 0 3px var(--ts-accent-ring, rgba(28, 107, 88, .18));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ts-form input[type="submit"]:disabled,
.ts-form input[type="submit"].ts-blocked {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

/* --- quicksearch --------------------------------------------------------
   Platformens egen dropdown. JS indsætter den som søskende til inputtet og
   sætter inline position/left/top ud fra offsetParent-kæden, altså i
   dokumentkoordinater. Derfor sættes her kun udseende – og der må ikke
   lægges position:relative (eller transform/filter/will-change) på nogen
   forfader, ellers lander den forkert.
   ---------------------------------------------------------------------- */

.quicksearchselectorbox.quicksearchselectorbox {
  width: 300px;
  max-width: calc(100vw - 2rem);
  padding: .25rem;
  background: var(--ts-bg, #fff);
  border: 1px solid var(--ts-line-strong, #b9c5ce);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 32, 45, .16);
  z-index: 50;
}

.quicksearchselectorbox.quicksearchselectorbox ul { margin: 0; padding: 0; list-style: none; }
.quicksearchselectorbox.quicksearchselectorbox ul li { border: 0; }

.quicksearchselectorbox.quicksearchselectorbox ul li a {
  display: block;
  margin: 0;
  padding: .45rem .6rem;
  border-radius: 5px;
  color: var(--ts-fg, #1f2933);
  font-size: .95rem;
  text-decoration: none;
}

.quicksearchselectorbox.quicksearchselectorbox ul li a:hover,
.quicksearchselectorbox.quicksearchselectorbox ul li a:focus {
  background: var(--ts-accent, #1c6b58);
  color: #fff;
  outline: none;
}

/* --- smalle skærme ------------------------------------------------------ */

@media (max-width: 860px) {
  .ts-form-group { padding: 1.25rem 1.25rem .25rem; }
}
/* RESOURCE #2 END */
/* RESOURCE #5 BEGIN */
/* ==========================================================================
   ts-table – generisk tabelvisning, uafhængig af side og modullayout.

   Sættes på <table>. Alle selektorer bliver inde i tabellen: intet her
   afhænger af, hvor tabellen ligger, eller hvad der står omkring den.

   Dobbelt klasse (.ts-table.ts-table) på box-model-reglerne, fordi renderen
   indsætter sit eget .bNlM{background;width:100%} EFTER /user/css.ashx.
   Med samme specificitet vinder den senere regel, og en enkelt klasse taber.

   Farver læses fra --ts-*, hvis siden definerer dem, ellers fra fallback.
   Der defineres bevidst ingen variabler her – så ville de overskrive
   sidens egne.

   Modifiers (tilvalg, sættes ved siden af ts-table):
     ts-table--centered   hugger indholdet og centrerer sig selv
     ts-table--compact    tættere rækker til lange lister
     ts-table--striped    skiftevis baggrund
   ========================================================================== */

.ts-table.ts-table {
  width: 100%;
  border-collapse: separate;   /* collapse slår border-radius ihjel */
  border-spacing: 0;
  background: var(--ts-bg, #ffffff);
  border: 1px solid var(--ts-line, #d8e0e6);
  border-radius: var(--ts-radius, 10px);
  overflow: hidden;            /* klipper hjørnerne på første/sidste række */
  font-size: .95rem;
  color: var(--ts-fg, #1f2933);
}

#mergefield_main .ts-table.ts-table td,
#mergefield_main .ts-table.ts-table .section
{
    color: var(--ts-fg);
}

.ts-table.ts-table a
{
      color: var(--ts-fg);
}

/* --- hoved ------------------------------------------------------------- */

.ts-table tbody td,
.ts-table thead th {
  /* Ingen ombrydning: en række der bliver to linjer høj er svær at skimme,
     og kolonnerne holder ikke øjet. Tabellen er width:auto, så den vokser i
     stedet – containeren begrænser og scroller om nødvendigt. */
  white-space: nowrap;
}

.ts-table thead th {
  padding: .7rem .85rem;
  text-align: left;
  /*font-size: .78rem;*/
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  /*color: var(--ts-muted, #5a6b7a);*/
  color: var(--ts-fg);
  background: var(--head-bg);
  border-bottom: 1px solid var(--ts-line);
  white-space: nowrap;
}

/* feltnavne kommer fra databasen i småt; ::first-letter virker kun på
   blokelementer, derfor på cellens indre div hvis den findes */
.ts-table thead th::first-letter,
.ts-table thead th > div::first-letter { text-transform: uppercase; }

/* --- rækker ------------------------------------------------------------ */

.ts-table tbody td {
  padding: .65rem .85rem;
  border-top: 1px solid var(--ts-line, #d8e0e6);
  vertical-align: top;
}

/* rammen tegnes med border-top, så første række ikke får en dobbeltstreg
   under hovedet */
.ts-table tbody tr:first-child td { border-top: 0; }

.ts-table tbody tr:hover td { background: var(--ts-panel, #f4f7f8); }

/* Tomme celler får en tankestreg. Renderen lægger indholdet i en indre div,
   som er helt tom uden whitespace, så :empty rammer. Uden det ser rækken ud,
   som om noget er faldet ud af visningen. */
.ts-table tbody td:empty::before,
.ts-table tbody td > div:empty::before {
  content: "–";
  color: #9aa7b2;
}

/* --- feltbaserede kolonner ---------------------------------------------
   Inert indtil renderen sætter data-field på cellerne. Positionsbaserede
   selektorer undgås med vilje: kolonnenumre skifter, så snart nogen flytter
   et felt i layoutet.
   ---------------------------------------------------------------------- */

.ts-table [data-field="chip"],
.ts-table [data-field="oeremaerke"],
.ts-table [data-type="number"] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ts-table [data-type="number"],
.ts-table [data-type="amount"] { text-align: right; }

/* --- modifiers ---------------------------------------------------------- */

.ts-table--centered.ts-table--centered {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.ts-table--compact tbody td { padding: .4rem .7rem; }
.ts-table--compact thead th { padding: .45rem .7rem; }

.ts-table--striped tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ts-panel, #f4f7f8) 55%, transparent);
}

/* --- smalle skærme ------------------------------------------------------
   Tabellen kan ikke pakkes ind i en scroll-container uden at røre markuppet,
   så den scroller selv. display:block koster den semantiske tabelvisning i
   nogle skærmlæsere, derfor kun under brudpunktet.
   ---------------------------------------------------------------------- */

@media (max-width: 720px) {
  .ts-table.ts-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}
/* RESOURCE #5 END */
/* RESOURCE #6 BEGIN */
/* ==========================================================================
   DKR – Indberet kat, listevisning (pageid 11, modullayout o11l11)
   Containeren, "Viser N emner" og Opret-knappen.
   Selve tabellen styles af ts-table.css og er ikke nævnt her.

   DOM (verificeret i browseren):
     div.o11l11
       ├── div > div > span.section        "Viser N emner:"
       ├── div > a.actionlink.TangoraCreateButton   "Opret"
       └── ... > table.ts-table

   Variablerne defineres her og arves ned i tabellen, så ts-table.css kan
   holde sig til var(--ts-*, fallback) uden at kende siden.

   Specificitet: modullayoutet indsætter .o11l11{width;margin;padding} EFTER
   /user/css.ashx, så box-model-reglen har dobbelt klasse.
   ========================================================================== */

.o11l11 {
  --ts-fg: #1f2933;
  --ts-muted: #5a6b7a;
  --ts-line: #d8e0e6;
  --ts-bg: #ffffff;
  --ts-panel: #f4f7f8;
  --ts-accent: #1c6b58;
  --ts-accent-ring: rgba(28, 107, 88, .18);
  --ts-radius: 10px;

  color: var(--ts-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* Dobbelt klasse er påkrævet: modullayoutet indsætter
   .o11l11{width:100%;margin:0;padding:30px} EFTER /user/css.ashx, og med
   samme specificitet vinder den. Uden dette bliver containeren fuld bredde,
   tabellen centrerer sig selv, og teksten og knappen bliver i venstre kant.

   fit-content gør containeren lige så bred som sit bredeste barn – tabellen –
   så hele blokken centreres under ét og de tre elementer flugter. */
.o11l11.o11l11 {
  width: fit-content;

  /* Tabellen har fået flere kolonner, end 1040px kan rumme uden ombrydning.
     min() giver plads op til 1600px, men aldrig mere end vinduet minus luft
     i siderne. */
  max-width: min(1600px, 100% - 2rem);

  margin: 1.5rem auto 3rem;
  padding: 0 1rem;

  /* Bliver tabellen alligevel bredere end loftet, scroller den her frem for
     at skubbe hele siden ud i bredden. */
  overflow-x: auto;
}

/* --- "Viser N emner:" og Opret på samme linje ------------------------- */

.o11l11 .section {
  display: inline-block;
  margin-bottom: .75rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ts-muted);
}

.o11l11 .TangoraCreateButton {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--ts-accent);
  border: 1px solid var(--ts-accent);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}

.o11l11 .TangoraCreateButton::before {
  content: "+";
  margin-right: .45rem;
  font-weight: 700;
}

.o11l11 .TangoraCreateButton:hover { filter: brightness(1.12); }

.o11l11 .TangoraCreateButton:focus-visible {
  box-shadow: 0 0 0 3px var(--ts-accent-ring);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* --- smalle skærme ---------------------------------------------------- */

@media (max-width: 720px) {
  /* på smalle skærme fylder tabellen bredden og scroller selv, så
     containeren skal ikke hugge indholdet */
  .o11l11.o11l11 {
    width: auto;
    padding: 0 .75rem;
  }
}
/* RESOURCE #6 END */