/* 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 #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 */