/* 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 #22 BEGIN */
:root
{
    --table-cellpadding: .5rem;
    --clr-table-background: #ffffff;
    --clr-table-header-background: #000000;
    --clr-table-border: #000000;
    --clr-table-border-inverted: #ffffff;
    --clr-table-text: #000000;
    --clr-table-text-inverted: #ffffff;
    --clr-table-text-warning: #E3692B;
    --clr-table-text-success: #2DAA55;
    --clr-table-text-error: #9E1414;
    --clr-table-row: #ffffff;
    --clr-table-row-even: #fafafa;
    --clr-table-row-hover: #efefef;
    --clr-table-text-empty: var(--clr-table-text-error);
}

.ts__table_wrapper
{
    overflow-x: auto;
    background: linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 70%) 0 100%,radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%,40px 100%,14px 100%,14px 100%;
    background-position: 0 0,100%,0 0,100%;
    background-attachment: local,local,scroll,scroll;
}

table,
table.ts__table
{
    background-color: unset;
    width: auto;
    min-width: 100%;
}

thead,
thead.ts__thead
{
    background-color: var(--clr-table-header-background);
}

thead.ts__head tr.ts__table_row th,
thead tr th,
tbody.ts__tbody tr.ts__table_row td,
tbody tr td,
tfoot.ts__tfoot tr.ts__table_row td,
tfoot tr td
{
    padding: var(--table-cellpadding);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    color: var(--clr-table-text-inverted);
}

tbody.ts__tbody tr.ts__table_row td,
tbody tr td
{
    color: var(--clr-table-text);
}

.ts__table_row th:not(:last-child)
{
    border-right-color: var(--clr-table-border-inverted);
    border-right-width: 1px;
    border-right-style: solid;
}

.ts__table_row td:not(:last-child)
{
    border-right-color: var(--clr-table-border);
    border-right-width: 1px;
    border-right-style: solid;
}

tfoot tr.ts__table_row td
{
    border-top-color: var(--clr-table-border);
    border-top-width: 1px;
    border-top-style: solid;
}

tfoot tr.ts__table_row td:not(:last-child):not(:empty)
{
    border-right-color: var(--clr-table-border);
    border-right-width: 1px;
    border-right-style: solid;
}

tbody .ts__table_row td:empty:before,
tbody .ts__table_row td div:not(.btn):empty:before
{
    /*Empty table cells should display something*/
    color: var(--clr-table-text-empty);
    content: 'ingen data';
}

tbody .ts__table_row td.btn:empty:before,
tbody .ts__table_row td div.btn:empty,
tbody .ts__table_row td div.actions >*:empty
{
    display: none;
}

thead.ts__head .ts__table_row th
{
    color: var(--clr-table-text-inverted);
    font-weight: 700;
}

.ts__tbody .ts__table_row,
tbody .ts__table_row
{
    background-color: var(--clr-table-row);
}

.ts__tbody .ts__table_row:nth-child(2n),
tbody .ts__table_row:nth-child(2n)
{
    background-color: var(--clr-table-row-even);
}

.ts__tbody .ts__table_row:HOVER,
tbody .ts__table_row:HOVER
{
    background-color: var(--clr-table-row-hover);
}
/* RESOURCE #22 END */
/* RESOURCE #23 BEGIN */
/*****
Copy this to HEAD section of the page/site

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Cantata+One&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
*****/

/*@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');*/

:root
{
    /*FONTS*/
    --font-sans: Lato, sans-serif;
    --font-serif: 'Cantata One', serif;
    
    /*ICONS*/
    --icon-chevron-down: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE0IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAuMzA4MTYyIDAuNzcwNDA5QzAuNTA1NTM3IDAuNTcyNjQ1IDAuNzczMTk5IDAuNDYxNTQ4IDEuMDUyMjkgMC40NjE1NDhDMS4zMzEzOCAwLjQ2MTU0OCAxLjU5OTA0IDAuNTcyNjQ1IDEuNzk2NDEgMC43NzA0MDlMNy4wMDYzNSA1Ljk5MjE3TDEyLjIxNjMgMC43NzA0MDlDMTIuNDE0OCAwLjU3ODI1IDEyLjY4MDcgMC40NzE5MjEgMTIuOTU2NiAwLjQ3NDMyNUMxMy4yMzI2IDAuNDc2NzI4IDEzLjQ5NjYgMC41ODc2NzIgMTMuNjkxNyAwLjc4MzI1OUMxMy44ODY5IDAuOTc4ODQ2IDEzLjk5NzYgMS4yNDM0MyAxNCAxLjUyMDAyQzE0LjAwMjQgMS43OTY2MSAxMy44OTYzIDIuMDYzMDggMTMuNzA0NSAyLjI2MjA0TDcuNzUwNDggOC4yMjk2MUM3LjU1MzExIDguNDI3MzcgNy4yODU0NCA4LjUzODQ3IDcuMDA2MzUgOC41Mzg0N0M2LjcyNzI3IDguNTM4NDcgNi40NTk2IDguNDI3MzcgNi4yNjIyMyA4LjIyOTYxTDAuMzA4MTYyIDIuMjYyMDRDMC4xMTA4NDYgMi4wNjQyMSAwIDEuNzk1OTQgMCAxLjUxNjIyQzAgMS4yMzY1IDAuMTEwODQ2IDAuOTY4MjMyIDAuMzA4MTYyIDAuNzcwNDA5WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+PC9zdmc+Cg==);
    --icon-checkmark: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4xMjEiIGhlaWdodD0iOC45NTMiIHZpZXdCb3g9IjAgMCAxMi4xMjEgOC45NTMiPgogIDxwYXRoIGlkPSJpY29uLWNoZWNrbWFyayIgZD0iTS43NSw0LjU2LDQuMDgzLDcuODkzLDEwLjc1Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjMxMSAwLjMxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo=);
    --icon-dot: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIvPgo8L3N2Zz4=);
    --icon-file-upload: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzg0IDB2MTI4aDEyOEwzODQgMHpNMzUyIDEyOEwzNTIgMEgxNzZDMTQ5LjUgMCAxMjggMjEuNDkgMTI4IDQ4VjI4OGgxNzQuMWwtMzkuMDMtMzkuMDNjLTkuMzc1LTkuMzc1LTkuMzc1LTI0LjU2IDAtMzMuOTRzMjQuNTYtOS4zNzUgMzMuOTQgMGw4MCA4MGM5LjM3NSA5LjM3NSA5LjM3NSAyNC41NiAwIDMzLjk0bC04MCA4MGMtOS4zNzUgOS4zNzUtMjQuNTYgOS4zNzUtMzMuOTQgMEMyNTguMyA0MDQuMyAyNTYgMzk4LjIgMjU2IDM5MnMyLjM0NC0xMi4yOCA3LjAzMS0xNi45N0wzMDIuMSAzMzZIMTI4djEyOEMxMjggNDkwLjUgMTQ5LjUgNTEyIDE3NiA1MTJoMjg4YzI2LjUxIDAgNDgtMjEuNDkgNDgtNDhWMTYwaC0xMjcuMUMzNjYuMyAxNjAgMzUyIDE0NS43IDM1MiAxMjh6TTI0IDI4OEMxMC43NSAyODggMCAyOTguNyAwIDMxMmMwIDEzLjI1IDEwLjc1IDI0IDI0IDI0SDEyOFYyODhIMjR6Ii8+PC9zdmc+);
    --icon-file-pdf: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNODggMzA0SDgwVjI1Nkg4OEMxMDEuMyAyNTYgMTEyIDI2Ni43IDExMiAyODBDMTEyIDI5My4zIDEwMS4zIDMwNCA4OCAzMDR6TTE5MiAyNTZIMjAwQzIwOC44IDI1NiAyMTYgMjYzLjIgMjE2IDI3MlYzMzZDMjE2IDM0NC44IDIwOC44IDM1MiAyMDAgMzUySDE5MlYyNTZ6TTIyNCAwVjEyOEMyMjQgMTQ1LjcgMjM4LjMgMTYwIDI1NiAxNjBIMzg0VjQ0OEMzODQgNDgzLjMgMzU1LjMgNTEyIDMyMCA1MTJINjRDMjguNjUgNTEyIDAgNDgzLjMgMCA0NDhWNjRDMCAyOC42NSAyOC42NSAwIDY0IDBIMjI0ek02NCAyMjRDNTUuMTYgMjI0IDQ4IDIzMS4yIDQ4IDI0MFYzNjhDNDggMzc2LjggNTUuMTYgMzg0IDY0IDM4NEM3Mi44NCAzODQgODAgMzc2LjggODAgMzY4VjMzNkg4OEMxMTguOSAzMzYgMTQ0IDMxMC45IDE0NCAyODBDMTQ0IDI0OS4xIDExOC45IDIyNCA4OCAyMjRINjR6TTE2MCAzNjhDMTYwIDM3Ni44IDE2Ny4yIDM4NCAxNzYgMzg0SDIwMEMyMjYuNSAzODQgMjQ4IDM2Mi41IDI0OCAzMzZWMjcyQzI0OCAyNDUuNSAyMjYuNSAyMjQgMjAwIDIyNEgxNzZDMTY3LjIgMjI0IDE2MCAyMzEuMiAxNjAgMjQwVjM2OHpNMjg4IDIyNEMyNzkuMiAyMjQgMjcyIDIzMS4yIDI3MiAyNDBWMzY4QzI3MiAzNzYuOCAyNzkuMiAzODQgMjg4IDM4NEMyOTYuOCAzODQgMzA0IDM3Ni44IDMwNCAzNjhWMzIwSDMzNkMzNDQuOCAzMjAgMzUyIDMxMi44IDM1MiAzMDRDMzUyIDI5NS4yIDM0NC44IDI4OCAzMzYgMjg4SDMwNFYyNTZIMzM2QzM0NC44IDI1NiAzNTIgMjQ4LjggMzUyIDI0MEMzNTIgMjMxLjIgMzQ0LjggMjI0IDMzNiAyMjRIMjg4ek0yNTYgMEwzODQgMTI4SDI1NlYweiIvPjwvc3ZnPg==);
    --icon-file-word: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMjI0IDEyOEwyMjQgMEg0OEMyMS40OSAwIDAgMjEuNDkgMCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4VjE2MGgtMTI3LjFDMjM4LjMgMTYwIDIyNCAxNDUuNyAyMjQgMTI4ek0yODEuNSAyNDBoMjMuMzdjNy43MTcgMCAxMy40MyA3LjE4IDExLjY5IDE0LjdsLTQyLjQ2IDE4NEMyNzIuOSA0NDQuMSAyNjggNDQ4IDI2Mi41IDQ0OGgtMjkuMjZjLTUuNDI2IDAtMTAuMTgtMy42NDEtMTEuNTktOC44ODNMMTkyIDMyOS4xbC0yOS42MSAxMDkuMUMxNjAuMSA0NDQuNCAxNTYuMiA0NDggMTUwLjggNDQ4SDEyMS41Yy01LjU4OCAwLTEwLjQ0LTMuODU5LTExLjY5LTkuMzA1bC00Mi40Ni0xODRDNjUuNjYgMjQ3LjIgNzEuMzcgMjQwIDc5LjA4IDI0MGgyMy4zN2M1LjU4OCAwIDEwLjQ0IDMuODU5IDExLjY5IDkuMzAxTDEzNy44IDM1MkwxNjUuNiAyNDguOUMxNjcgMjQzLjYgMTcxLjggMjQwIDE3Ny4yIDI0MGgyOS42MWM1LjQyNiAwIDEwLjE4IDMuNjQxIDExLjU5IDguODgzTDI0Ni4yIDM1MmwyMy43LTEwMi43QzI3MS4xIDI0My45IDI3NS4xIDI0MCAyODEuNSAyNDB6TTI1NiAwdjEyOGgxMjhMMjU2IDB6Ii8+PC9zdmc+);
    --icon-file-excel: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMjI0IDEyOEwyMjQgMEg0OEMyMS40OSAwIDAgMjEuNDkgMCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4VjE2MGgtMTI3LjFDMjM4LjMgMTYwIDIyNCAxNDUuNyAyMjQgMTI4ek0yNzIuMSAyNjQuNEwyMjQgMzQ0bDQ4Ljk5IDc5LjYxQzI3OS42IDQzNC4zIDI3MS45IDQ0OCAyNTkuNCA0NDhoLTI2LjQzYy01LjU1NyAwLTEwLjcxLTIuODgzLTEzLjYzLTcuNjE3TDE5MiAzOTZsLTI3LjMxIDQ0LjM4QzE2MS44IDQ0NS4xIDE1Ni42IDQ0OCAxNTEuMSA0NDhIMTI0LjZjLTEyLjUyIDAtMjAuMTktMTMuNzMtMTMuNjMtMjQuMzlMMTYwIDM0NEwxMTEgMjY0LjRDMTA0LjQgMjUzLjcgMTEyLjEgMjQwIDEyNC42IDI0MGgyNi40M2M1LjU1NyAwIDEwLjcxIDIuODgzIDEzLjYzIDcuNjEzTDE5MiAyOTJsMjcuMzEtNDQuMzlDMjIyLjIgMjQyLjkgMjI3LjQgMjQwIDIzMi45IDI0MGgyNi40M0MyNzEuOSAyNDAgMjc5LjYgMjUzLjcgMjcyLjEgMjY0LjR6TTI1NiAwdjEyOGgxMjhMMjU2IDB6Ii8+PC9zdmc+);
    --icon-file-powerpoint: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMjU2IDB2MTI4aDEyOEwyNTYgMHpNMjI0IDEyOEwyMjQgMEg0OEMyMS40OSAwIDAgMjEuNDkgMCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4VjE2MGgtMTI3LjFDMjM4LjMgMTYwIDIyNCAxNDUuNyAyMjQgMTI4ek0yNzkuNiAzMDguMUMyODQuMiAzNTMuNSAyNDguNSAzOTIgMjA0IDM5MkgxNjB2NDBDMTYwIDQ0MC44IDE1Mi44IDQ0OCAxNDQgNDQ4SDEyOGMtOC44MzYgMC0xNi03LjE2NC0xNi0xNlYyNTZjMC04LjgzNiA3LjE2NC0xNiAxNi0xNmg3MS41MUMyMzkuMyAyNDAgMjc1LjYgMjY4LjUgMjc5LjYgMzA4LjF6TTE2MCAzNDRoNDRjMTUuNDQgMCAyOC0xMi41NiAyOC0yOFMyMTkuNCAyODggMjA0IDI4OEgxNjBWMzQ0eiIvPjwvc3ZnPg==);
    --icon-file-generic: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMCA2NEMwIDI4LjY1IDI4LjY1IDAgNjQgMEgyMjRWMTI4QzIyNCAxNDUuNyAyMzguMyAxNjAgMjU2IDE2MEgzODRWNDQ4QzM4NCA0ODMuMyAzNTUuMyA1MTIgMzIwIDUxMkg2NEMyOC42NSA1MTIgMCA0ODMuMyAwIDQ0OFY2NHpNMjU2IDEyOFYwTDM4NCAxMjhIMjU2eiIvPjwvc3ZnPg==);
    --icon-file-lines: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMjU2IDB2MTI4aDEyOEwyNTYgMHpNMjI0IDEyOEwyMjQgMEg0OEMyMS40OSAwIDAgMjEuNDkgMCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4VjE2MGgtMTI3LjFDMjM4LjMgMTYwIDIyNCAxNDUuNyAyMjQgMTI4ek0yNzIgNDE2aC0xNjBDMTAzLjIgNDE2IDk2IDQwOC44IDk2IDQwMEM5NiAzOTEuMiAxMDMuMiAzODQgMTEyIDM4NGgxNjBjOC44MzYgMCAxNiA3LjE2MiAxNiAxNkMyODggNDA4LjggMjgwLjggNDE2IDI3MiA0MTZ6TTI3MiAzNTJoLTE2MEMxMDMuMiAzNTIgOTYgMzQ0LjggOTYgMzM2Qzk2IDMyNy4yIDEwMy4yIDMyMCAxMTIgMzIwaDE2MGM4LjgzNiAwIDE2IDcuMTYyIDE2IDE2QzI4OCAzNDQuOCAyODAuOCAzNTIgMjcyIDM1MnpNMjg4IDI3MkMyODggMjgwLjggMjgwLjggMjg4IDI3MiAyODhoLTE2MEMxMDMuMiAyODggOTYgMjgwLjggOTYgMjcyQzk2IDI2My4yIDEwMy4yIDI1NiAxMTIgMjU2aDE2MEMyODAuOCAyNTYgMjg4IDI2My4yIDI4OCAyNzJ6Ii8+PC9zdmc+);
    --icon-file-csv: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMjI0IDBWMTI4QzIyNCAxNDUuNyAyMzguMyAxNjAgMjU2IDE2MEgzODRWNDQ4QzM4NCA0ODMuMyAzNTUuMyA1MTIgMzIwIDUxMkg2NEMyOC42NSA1MTIgMCA0ODMuMyAwIDQ0OFY2NEMwIDI4LjY1IDI4LjY1IDAgNjQgMEgyMjR6TTgwIDIyNEM1Ny45MSAyMjQgNDAgMjQxLjkgNDAgMjY0VjM0NEM0MCAzNjYuMSA1Ny45MSAzODQgODAgMzg0SDk2QzExOC4xIDM4NCAxMzYgMzY2LjEgMTM2IDM0NFYzMzZDMTM2IDMyNy4yIDEyOC44IDMyMCAxMjAgMzIwQzExMS4yIDMyMCAxMDQgMzI3LjIgMTA0IDMzNlYzNDRDMTA0IDM0OC40IDEwMC40IDM1MiA5NiAzNTJIODBDNzUuNTggMzUyIDcyIDM0OC40IDcyIDM0NFYyNjRDNzIgMjU5LjYgNzUuNTggMjU2IDgwIDI1Nkg5NkMxMDAuNCAyNTYgMTA0IDI1OS42IDEwNCAyNjRWMjcyQzEwNCAyODAuOCAxMTEuMiAyODggMTIwIDI4OEMxMjguOCAyODggMTM2IDI4MC44IDEzNiAyNzJWMjY0QzEzNiAyNDEuOSAxMTguMSAyMjQgOTYgMjI0SDgwek0xNzUuNCAzMTAuNkwyMDAuOCAzMjUuMUMyMDUuMiAzMjcuNyAyMDggMzMyLjUgMjA4IDMzNy42QzIwOCAzNDUuNiAyMDEuNiAzNTIgMTkzLjYgMzUySDE2OEMxNTkuMiAzNTIgMTUyIDM1OS4yIDE1MiAzNjhDMTUyIDM3Ni44IDE1OS4yIDM4NCAxNjggMzg0SDE5My42QzIxOS4yIDM4NCAyNDAgMzYzLjIgMjQwIDMzNy42QzI0MCAzMjAuMSAyMzEuMSAzMDUuNiAyMTYuNiAyOTcuNEwxOTEuMiAyODIuOUMxODYuOCAyODAuMyAxODQgMjc1LjUgMTg0IDI3MC40QzE4NCAyNjIuNCAxOTAuNCAyNTYgMTk4LjQgMjU2SDIxNkMyMjQuOCAyNTYgMjMyIDI0OC44IDIzMiAyNDBDMjMyIDIzMS4yIDIyNC44IDIyNCAyMTYgMjI0SDE5OC40QzE3Mi44IDIyNCAxNTIgMjQ0LjggMTUyIDI3MC40QzE1MiAyODcgMTYwLjkgMzAyLjQgMTc1LjQgMzEwLjZ6TTI4MCAyNDBDMjgwIDIzMS4yIDI3Mi44IDIyNCAyNjQgMjI0QzI1NS4yIDIyNCAyNDggMjMxLjIgMjQ4IDI0MFYyNzEuNkMyNDggMzA2LjMgMjU4LjMgMzQwLjMgMjc3LjYgMzY5LjJMMjgyLjcgMzc2LjlDMjg1LjcgMzgxLjMgMjkwLjYgMzg0IDI5NiAzODRDMzAxLjQgMzg0IDMwNi4zIDM4MS4zIDMwOS4zIDM3Ni45TDMxNC40IDM2OS4yQzMzMy43IDM0MC4zIDM0NCAzMDYuMyAzNDQgMjcxLjZWMjQwQzM0NCAyMzEuMiAzMzYuOCAyMjQgMzI4IDIyNEMzMTkuMiAyMjQgMzEyIDIzMS4yIDMxMiAyNDBWMjcxLjZDMzEyIDI5NC42IDMwNi41IDMxNy4yIDI5NiAzMzcuNUMyODUuNSAzMTcuMiAyODAgMjk0LjYgMjgwIDI3MS42VjI0MHpNMjU2IDBMMzg0IDEyOEgyNTZWMHoiLz48L3N2Zz4=);
    --icon-file-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMjI0IDEyOEwyMjQgMEg0OEMyMS40OSAwIDAgMjEuNDkgMCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4VjE2MGgtMTI3LjFDMjM4LjMgMTYwIDIyNCAxNDUuNyAyMjQgMTI4ek05NiAyMjRjMTcuNjcgMCAzMiAxNC4zMyAzMiAzMlMxMTMuNyAyODggOTYgMjg4UzY0IDI3My43IDY0IDI1NlM3OC4zMyAyMjQgOTYgMjI0ek0zMTguMSA0MzkuNUMzMTUuMyA0NDQuOCAzMDkuOSA0NDggMzA0IDQ0OGgtMjI0Yy01LjkgMC0xMS4zMi0zLjI0OC0xNC4xMS04LjQ1MWMtMi43ODMtNS4yMDEtMi40NzktMTEuNTIgLjc5NDktMTYuNDJsNTMuMzMtODBDMTIyLjEgMzM4LjcgMTI3LjEgMzM2IDEzMy4zIDMzNnMxMC4zNSAyLjY3NCAxMy4zMSA3LjEyNUwxNjAgMzYzLjJsNDUuMzUtNjguMDNDMjA4LjMgMjkwLjcgMjEzLjMgMjg4IDIxOC43IDI4OHMxMC4zNSAyLjY3NCAxMy4zMSA3LjEyNWw4NS4zMyAxMjhDMzIwLjYgNDI4IDMyMC45IDQzNC4zIDMxOC4xIDQzOS41ek0yNTYgMHYxMjhoMTI4TDI1NiAweiIvPjwvc3ZnPg==);
    --icon-file-signature: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBkPSJNMjkyLjcgMzQyLjNDMjg5LjcgMzQ1LjMgMjg4IDM0OS40IDI4OCAzNTMuN1Y0MTZoNjIuMzRjNC4yNjQgMCA4LjM1LTEuNzAzIDExLjM1LTQuNzI3bDE1Ni45LTE1OGwtNjcuODgtNjcuODhMMjkyLjcgMzQyLjN6TTU2OC41IDE2Ny40TDUzNi42IDEzNS41Yy05Ljg3NS0xMC0yNi0xMC0zNiAwbC0yNy4yNSAyNy4yNWw2Ny44OCA2Ny44OGwyNy4yNS0yNy4yNUM1NzguNSAxOTMuNCA1NzguNSAxNzcuMyA1NjguNSAxNjcuNHpNMjU2IDB2MTI4aDEyOEwyNTYgMHpNMjU2IDQ0OGMtMTYuMDctLjI4NTItMzAuNjItOS4zNTktMzcuODgtMjMuODhjLTIuODc1LTUuODc1LTgtNi41LTEwLjEyLTYuNXMtNy4yNSAuNjI1LTEwIDYuMTI1bC03Ljc0OSAxNS4zOEMxODcuNiA0NDQuNiAxODEuMSA0NDggMTc2IDQ0OEgxNzQuOWMtNi41LS41LTEyLTQuNzUtMTQtMTFMMTQ0IDM4Ni42TDEzMy40IDQxOC41QzEyNy41IDQzNi4xIDExMSA0NDggOTIuNDUgNDQ4SDgwQzcxLjEzIDQ0OCA2NCA0NDAuOSA2NCA0MzJTNzEuMTMgNDE2IDgwIDQxNmgxMi40YzQuODc1IDAgOS4xMDItMy4xMjUgMTAuNi03LjYyNWwxOC4yNS01NC42M0MxMjQuNSAzNDMuOSAxMzMuNiAzMzcuMyAxNDQgMzM3LjNzMTkuNSA2LjYyNSAyMi43NSAxNi41bDEzLjg4IDQxLjYzYzE5Ljc1LTE2LjI1IDU0LjEzLTkuNzUgNjYgMTQuMTJDMjQ4LjUgNDEzLjIgMjUyLjIgNDE1LjYgMjU2IDQxNS45VjM0N2MwLTguNTIzIDMuNDAyLTE2LjcgOS40NTEtMjIuNzFMMzg0IDIwNi41VjE2MEgyNTZjLTE3LjY3IDAtMzItMTQuMzMtMzItMzJMMjI0IDBINDhDMjEuNDkgMCAwIDIxLjQ5IDAgNDh2NDE2QzAgNDkwLjUgMjEuNDkgNTEyIDQ4IDUxMmgyODhjMjYuNTEgMCA0OC0yMS40OSA0OC00OFY0NDhIMjU2eiIvPjwvc3ZnPg==);
    --icon-file-shield: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBkPSJNMCA2NEMwIDI4LjY1IDI4LjY1IDAgNjQgMEgyMjRWMTI4QzIyNCAxNDUuNyAyMzguMyAxNjAgMjU2IDE2MEgzODRWMjA3TDI5MS4yIDI0NC4yQzI2OS45IDI1Mi43IDI1NiAyNzMuMyAyNTYgMjk2LjJDMjU2IDM1Mi43IDI3NC45IDQ0NC4yIDM1MC4yIDUwNC40QzM0MS4yIDUwOS4zIDMzMC45IDUxMiAzMjAgNTEySDY0QzI4LjY1IDUxMiAwIDQ4My4zIDAgNDQ4VjY0ek0yNTYgMTI4VjBMMzg0IDEyOEgyNTZ6TTQyMy4xIDIyNS43QzQyOC44IDIyMy40IDQzNS4yIDIyMy40IDQ0MC45IDIyNS43TDU2MC45IDI3My43QzU3MCAyNzcuNCA1NzYgMjg2LjIgNTc2IDI5NkM1NzYgMzU5LjMgNTUwLjEgNDY0LjggNDQxLjIgNTEwLjJDNDM1LjMgNTEyLjYgNDI4LjcgNTEyLjYgNDIyLjggNTEwLjJDMzEzLjkgNDY0LjggMjg4IDM1OS4zIDI4OCAyOTZDMjg4IDI4Ni4yIDI5My4xIDI3Ny40IDMwMy4xIDI3My43TDQyMy4xIDIyNS43ek00MzIgMjczLjhWNDYxLjdDNTAwLjIgNDI4LjcgNTIzLjUgMzYyLjcgNTI3LjQgMzExLjFMNDMyIDI3My44eiIvPjwvc3ZnPg==);
    --icon-times-circle: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBpZD0iU3VidHJhY3Rpb25fMSIgZGF0YS1uYW1lPSJTdWJ0cmFjdGlvbiAxIiBkPSJNOCwxNmE4LDgsMCwxLDEsOC04QTguMDA5LDguMDA5LDAsMCwxLDgsMTZaTTUuNDExLDQuOGEuNjExLjYxMSwwLDAsMC0uNDMyLDEuMDQzTDcuMTQsOCw0Ljk3OSwxMC4xNjVBLjYxMS42MTEsMCwwLDAsNS40MTMsMTEuMmguMDA3YS42MDkuNjA5LDAsMCwwLC40MjMtLjE3MUw4LDguODY4bDIuMTYxLDIuMTYxYS42MDcuNjA3LDAsMCwwLC40MjIuMTcxaC4wMDdhLjYxMS42MTEsMCwwLDAsLjQzNS0xLjAzNUw4Ljg2OCw4bDIuMTYxLTIuMTYxYS42MTYuNjE2LDAsMCwwLC4xNzEtLjQzLjYxMi42MTIsMCwwLDAtLjYwNi0uNjA2LjYxMy42MTMsMCwwLDAtLjQyOS4xNzJMOCw3LjE0LDUuODQzLDQuOTc5QS42MTUuNjE1LDAsMCwwLDUuNDExLDQuOFoiIGZpbGw9IiNjYmQ1ZTEiLz4KPC9zdmc+Cg==);
    --icon-select: var(--icon-chevron-down);
    --icon-checkbox: var(--icon-checkmark);
    --icon-radio: var(--icon-dot);
    
    /*MISC*/
    --form-field-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
    --form-field-shadow-focus: 0 1rem 1.125rem rgba(0,0,0,.1);
    --form-fields-flow-space: 1rem;
    --form-field-transition: all .075s ease-out;
    
    /*LABEL*/
    --form-label-font-family: var(--font-sans, sans-serif);
    --form-field-font-family: var(--font-sans, sans-serif);
    --form-label-font-size: 1rem;
    --form-label-line-height: 1;
    --form-field-font-size: 1rem;
    --form-field-line-height: 1;
    --form-field-select-line-height: calc(1.2*var(--form-field-line-height));
    --form-field-textarea-line-height: calc(1.3*var(--form-field-line-height));
    
    /*FIELD DEFAULT COLOURS*/    
    --form-field-background-color: #fafafa;
    --form-field-background-color-inverted: #010101;
    --form-field-border-color: #dddddd;
    --form-field-border-style: solid;
    --form-field-text-color: #333333;
    --form-field-text-color-inverted: #eeeeee;
    --form-field-placeholder-color: #aaaaaa;
    --form-field-border-width: .125rem;
    
    /*FIELD FOCUS*/
    --form-field-outline-style: dotted;
    --form-field-outline-offset: .125rem;
    --form-field-outline-color: #aaaaaa;
    --form-field-outline-width: .125rem;
    --form-field-focus-border-color: #cccccc;
    
    /*FIELD WARNING/ERROR*/    
    --form-field-error-border-color: #880000;
    --form-field-error-text: " Fill in this field";
    --form-field-error-text-size: calc(.75*var(--form-field-font-size));
    
    /*FIELD BORDER RADIUS + LABEL MARGIN*/
    --form-field-border-radius: 0rem;
    --form-field-border-weight: .125rem;
    --form-label-margin-inline-start: var(--form-field-border-radius, 0);
    --form-label-margin-block-end: .5rem;
    
    /*FIELD DEFAULT*/
    --form-field-padding-inline-start: 1rem;
    --form-field-padding-inline-end: 1rem;
    --form-field-padding-inline: var(--form-field-padding-inline-start) var(--form-field-padding-inline-end);
    --form-field-padding-block-start: .5rem;
    --form-field-padding-block-end: .5rem;
    --form-field-padding-block: var(--form-field-padding-block-start) var(--form-field-padding-block-end);
    --form-field-padding: var(--form-field-padding-block-start) var(--form-field-padding-inline-end) var(--form-field-padding-block-end) var(--form-field-padding-inline-start);
    --form-field-margin: 0;
    --form-field-width: 100%;
    --form-field-font-size-height-ratio: 2.75;
    --form-field-height: calc(var(--form-field-font-size-height-ratio) * var(--form-field-text-size));
    
    /*BUTTON DEFAULT COLOURS*/    
    --form-button-background-color: #010101;
    --form-button-background-color-inverted: #fafafa;
    --form-button-border-color: #010101;
    --form-button-border-style: solid;
    --form-button-text-color: #cccccc;
    --form-button-text-color-inverted: #333333;
    --form-button-border-width: .125rem;
    --form-button-padding-inline-start: 1rem;
    --form-button-padding-inline-end: 1rem;
    --form-button-padding-inline: var(--form-button-padding-inline-start) var(--form-button-padding-inline-end);
    --form-button-padding-block-start: .5rem;
    --form-button-padding-block-end: .5rem;
    --form-button-padding-block: var(--form-button-padding-block-start) var(--form-button-padding-block-end);
    --form-button-padding: var(--form-button-padding-block-start) var(--form-button-padding-inline-end) var(--form-button-padding-block-end) var(--form-button-padding-inline-start);
}

.ts__form
{
    box-sizing: border-box;
    padding-inline: var(--form-field-padding-inline);
    padding-block: var(--form-field-padding-block);
}

.ts__form > *+*
{
    margin-block-start: var(--form-fields-flow-space);
}

.ts__form label
{
    display: block;
    font-family: var(--form-font-family);
    font-size: var(--form-label-font-size);
    font-weight: 700;
    line-height: var(--form-label-line-height);
    margin-inline-start: var(--form-label-margin-inline-start);
    margin-block-end: var(--form-label-margin-block-end);
}

.ts__form label.uploadControl
{
    cursor: pointer;
}

.ts__form *::placeholder
{
    color: var(--form-field-placeholder-color);
}

.ts__form select,
.ts__form textarea,
.ts__form div[id*="_editor"],
.ts__form nobr input,
.ts__form input:where([type="text"],[type="search"],[type="number"],[type="date"],[type="datetime-local"],[type="time"],[type="password"],[type="email"],[type="tel"],[type="file"],#user_10)
{
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--form-field-background-color);
    border-style: var(--form-field-border-style);
    border-width: var(--form-field-border-width);
    border-color: var(--form-field-border-color);
    border-radius: var(--form-field-border-radius-size);
    font-family: var(--form-field-font-family);
    font-size: var(--form-field-font-size);
    color: var(--form-field-text-color);
    line-height: var(--form-field-line-height);
    padding-block: var(--form-field-padding-block);
    padding-inline: var(--form-field-padding-inline);
    margin: var(--form-field-margin);
    width: var(--form-field-width);
    height: var(--form-field-height);
    transition: var(--form-field-transition);
}

.ts__form div[id*="_editor"]
{
    border-style: var(--form-field-border-style) !important;
    border-width: var(--form-field-border-width) !important;
    border-color: var(--form-field-border-color) !important;
    border-radius: var(--form-field-border-radius-size);
}

.ts__form textarea
{
    border-radius: var(--form-field-border-radius-size);
}

.ts__form input[type="text"]:HOVER,
.ts__form input[type="search"]:HOVER,
.ts__form input[type="number"]:HOVER,
.ts__form input[type="date"]:HOVER,
.ts__form input[type="datetime-local"]:HOVER,
.ts__form input[type="time"]:HOVER,
.ts__form input[type="password"]:HOVER,
.ts__form input[type="email"]:HOVER,
.ts__form input[type="tel"]:HOVER,
.ts__form input[type="file"]:HOVER,
.ts__form input#user_10:HOVER,
.ts__form select:HOVER,
.ts__form textarea:HOVER,
.ts__form div[id*="_editor"]:HOVER,
.ts__form nobr input:HOVER
{
    box-shadow: var(--form-field-shadow);
}

.ts__form input[type="text"]:FOCUS,
.ts__form input[type="search"]:FOCUS,
.ts__form input[type="number"]:FOCUS,
.ts__form input[type="date"]:FOCUS,
.ts__form input[type="datetime-local"]:FOCUS,
.ts__form input[type="time"]:FOCUS,
.ts__form input[type="password"]:FOCUS,
.ts__form input[type="email"]:FOCUS,
.ts__form input[type="tel"]:FOCUS,
.ts__form input[type="file"]:FOCUS,
.ts__form input#user_10:FOCUS,
.ts__form select:FOCUS,
.ts__form textarea:FOCUS,
.ts__form .dateInnerTimeBlock span:FOCUS,
.ts__form nobr input:FOCUS
{
    box-shadow: var(--form-field-shadow-focus);
    border-color: var(--form-field-focus-border-color);
    outline-style: var(--form-field-outline-style);
    outline-offset: var(--form-field-outline-offset);
    outline-color: var(--form-field-outline-color);
    outline-width: var(--form-field-outline-width);
}

.ts__form div[id*="_editor"]:FOCUS
{
    box-shadow: var(--form-field-shadow-focus);
    border: var(--form-field-border-width) var(--form-field-border-style) var(--form-field-focus-border-color) !important;
    outline-style: var(--form-field-outline-style);
    outline-offset: var(--form-field-outline-offset);
    outline-color: var(--form-field-outline-color);
    outline-width: var(--form-field-outline-width);
}

.ts__form input[type="button"],
.ts__form input[type="submit"]
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ts__form select
{
    line-height: var(--form-field-select-line-height);
    background-image: var(--icon-select);
    background-position: calc(100% - calc(1.5*var(--form-field-font-size))) 50%;
    background-size: auto calc(.75*var(--form-field-font-size));
    background-repeat: no-repeat;
    padding-block: var(--form-field-padding-block);
    padding-inline: var(--form-field-padding-inline);
}

.ts__form textarea
{
    height: 10em;
    line-height: var(--form-field-textarea-line-height);
}

.ts__form div[id*="_editor"]
{
    height: 10em !important;
    border-width: var(--form-field-border-width) !important;
    padding: var(--form-field-padding-block-start) var(--form-field-padding-inline-start) !important;
    overflow-x: scroll;
}

.ts__form input[type="text"][required],
.ts__form input[type="search"][required],
.ts__form input[type="number"][required],
.ts__form input[type="date"][required],
.ts__form input[type="time"][required],
.ts__form input[type="password"][required],
.ts__form input[type="email"][required],
.ts__form input[type="tel"][required],
.ts__form input[type="file"][required],
.ts__form input#user_10[required],
.ts__form select[required],
.ts__form textarea[required],
.ts__form input[type="text"].required,
.ts__form input[type="search"].required,
.ts__form input[type="number"].required,
.ts__form input[type="date"].required,
.ts__form input[type="time"].required,
.ts__form input[type="password"].required,
.ts__form input[type="email"].required,
.ts__form input[type="tel"].required,
.ts__form input[type="file"].required,
.ts__form input#user_10.required,
.ts__form select.required,
.ts__form textarea.required,
.ts__form input:where([type="text"], [type="search"], [type="number"], [type="date"], [type="time"], [type="password"], [type="email"], input[type="tel"], [type="file"]).formreq,
.ts__form input#user_10.formreq,
.ts__form select.formreq,
.ts__form textarea.formreq
{
    border-color: var(--form-field-error-border-color);
}

.ts__form span.formreq:after
{
    content: var(--form-field-error-text);
    font-size: var(--form-field-error-text-size);
}
/*Checkboxes*/
.ts__form input[type="checkbox"]
{
    width: 0px;
    height: 0px;
    opacity: 0;
    /*position: absolute;*/
    top: calc(-1*10rem);
    left: calc(-1*10rem);
}

.ts__form input[type="checkbox"]+label,
.ts__form input[type="checkbox"]+span>label
{
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    font-size: var(--form-label-font-size);
    font-family: var(--form-label-font-family);
    display: flex;
    align-items: flex-start;
    line-height: calc(1.4*var(--form-field-line-height));
    position: relative;
    margin-left: .125rem;
}

.ts__form input[type="checkbox"]+label:FOCUS,
.ts__form input[type="checkbox"]+span>label:FOCUS,
.ts__form input[type="checkbox"]:FOCUS+label,
.ts__form input[type="checkbox"]:FOCUS+span>label
{
    outline-style: var(--form-field-outline-style);
    outline-offset: var(--form-field-outline-offset);
    outline-color: var(--form-field-outline-color);
    outline-width: var(--form-field-outline-width);
}

.ts__form input[type="checkbox"]+label::before,
.ts__form input[type="checkbox"]+span>label::before
{
    content: '';
    border-width: var(--form-field-border-width);
    border-style: var(--form-field-border-style);
    border-color: var(--form-field-border-color);
    border-radius: .125rem;
    display: inline-block;
    position: relative;
    padding: .5rem;
    background-color: var(--form-field-background-color);
    cursor: pointer;
    margin: 0 .5rem calc(-1*.125rem) 0;
}

.ts__form input[type="checkbox"]:checked+label::after,
.ts__form input[type="checkbox"]:checked+span>label::after
{
    position: absolute;
    content: '';
    border-width: var(--form-field-border-width);
    border-style: var(--form-field-border-style);
    border-color: transparent;
    border-radius: .125rem;
    display: inline-block;
    padding: .5rem;
    cursor: pointer;
    top: 0;
    left: 0;
    background-color: var(--form-field-text-color);
    -webkit-mask-image: var(--icon-checkbox);
    mask-image: var(--icon-checkbox);
    -webkit-mask-size: 65% 65%;
    mask-size: 65% 65%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-repeat: 50% 50%;
}

/*Radio buttons*/
.ts__form input[type="radio"]
{
    width: 0px;
    height: 0px;
    opacity: 0;
    /*position: absolute;*/
    top: calc(-1*10rem);
    left: calc(-1*10rem);
}

.ts__form input[type="radio"]+label
{
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    font-size: var(--form-label-font-size);
    font-family: var(--form-label-font-family);
    display: flex;
    align-items: flex-start;
    line-height: calc(1.4*var(--form-field-line-height));
    position: relative;
    margin-left: .125rem;
}

.ts__form input[type="radio"]+label:FOCUS,
.ts__form input[type="radio"]:FOCUS+label
{
    outline-style: var(--form-field-outline-style);
    outline-offset: var(--form-field-outline-offset);
    outline-color: var(--form-field-outline-color);
    outline-width: var(--form-field-outline-width);
}

.ts__form input[type="radio"]+label::before
{
    content: '';
    border-width: var(--form-field-border-width);
    border-style: var(--form-field-border-style);
    border-color: var(--form-field-border-color);
    border-radius: 10rem;
    display: inline-block;
    position: relative;
    padding: .5rem;
    background-color: var(--form-field-background-color);
    cursor: pointer;
    margin: 0 .5rem calc(-1*.125rem) 0;
}

.ts__form input[type="radio"]:checked+label::after
{
    position: absolute;
    content: '';
    border-width: var(--form-field-border-width);
    border-style: var(--form-field-border-style);
    border-color: transparent;
    border-radius: 10rem;
    display: inline-block;
    padding: .5rem;
    cursor: pointer;
    top: 0;
    left: 0;
    background-color: var(--form-field-text-color);
    -webkit-mask-image: var(--icon-radio);
    mask-image: var(--icon-radio);
    -webkit-mask-size: 40% 40%;
    mask-size: 40% 40%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-repeat: 50% 50%;
}

.ts__form .choicegroup > div:not(:last-child)
{
    margin-right: 1rem;
}

.ts__form nobr
{
    white-space: normal;
    display: flex;
    gap: 1rem;
}

.ts__form span[id*="filtercontrol"]
{
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.ts__form fieldset
{
    border-width: var(--form-field-border-width);
    border-style: var(--form-field-border-style);
    border-color: #fafafa;
    padding-block: 1.125rem;
}

.ts__form fieldset legend
{
    padding-inline: .5rem;
    font-family: var(--form-legent-font-family);
}

/*Input type=file hack*/
.ts__form label.uploadControl
{
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--form-field-background-color);
    border-style: var(--form-field-border-style);
    border-width: var(--form-field-border-width);
    border-color: var(--form-field-border-color);
    border-radius: var(--form-field-border-radius);
    font-family: var(--form-field-font-family);
    font-size: var(--form-field-font-size);
    color: var(--form-field-text-color);
    line-height: var(--form-field-line-height);
    padding-block: var(--form-field-padding-block);
    padding-inline: var(--form-field-padding-inline);
    margin: 0;
    width: auto;
    min-height: var(--form-field-height);
    cursor: pointer;
    transition: all .1s ease-in;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ts__form label.uploadControl:after
{
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentcolor;
    -webkit-mask-image: var(--icon-file-upload);
    mask-image: var(--icon-file-upload);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50%;
    mask-repeat: 50%;
}

.ts__form label.uploadControl:HOVER
{
    background-color: var(--form-field-background-color-inverted);
    border-color: var(--form-field-background-color-inverted);
    color: var(--form-field-text-color-inverted);
    box-shadow: var(--form-field-shadow);
}

.ts__form input[type="file"]+div
{
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.ts__form input[type="file"][name*="image"]+div
{
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
}

.ts__form .fileItem
{
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ts__form .fileItem:HOVER
{
    background-color: var(--form-field-background-color);
    cursor: move;
}

.ts__form .fileItem .uploadItemRemoveAnchor
{
    order: 10;
    display: flex;
    position: relative;
}

.ts__form .fileItem .uploadItemRemoveAnchor img,
.ts__form .fileItem .uploadItemRemoveAnchor img:HOVER,
.ts__form .fileItem .uploadItemRemoveAnchor:HOVER img
{
    content: var(--icon-times-circle);
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.ts__form .fileItem .uploadItemThumbnail
{
    content: var(--icon-file-generic);
    display: block;
    width: 2rem;
    height: 2rem;
}

.ts__form .fileItem .uploadItemThumbnail[src*='pdf']
{
    content: var(--icon-file-pdf);
}

.ts__form .fileItem .uploadItemThumbnail[src*='word']
{
    content: var(--icon-file-word);
}

.ts__form .fileItem .uploadItemThumbnail[src*='excel']
{
    content: var(--icon-file-excel);
}

.ts__form .fileItem .uploadItemThumbnail[src*='zip']
{
    content: var(--icon-file-zip);
}

.ts__form .fileItem .uploadItemThumbnail[src*='image.gif']
{
    content: var(--icon-file-image);
}

.ts__form .fileItem .uploadItemThumbnail[src*='text']
{
    content: var(--icon-file-generic);
}

.ts__form .fileItem .uploadItemThumbnail[src*='video']
{
    content: var(--icon-file-video);
}

.ts__form .fileItem .uploadItemThumbnail[src*='music']
{
    content: var(--icon-file-music);
}

.ts__form .fileItem .uploadItemThumbnail[src*='xml']
{
    content: var(--icon-file-generic);
}

.ts__form .fileItem .fileNameWrapper
{
    width: 100%;
}

.ts__form .fileItem progress
{
    width: clamp(1.25rem, 3vw, 4rem);
    height: .25rem;
}

.ts__form .fileItem progress::-moz-progress-bar,
.ts__form .fileItem progress::-webkit-progress-value,
.ts__form .fileItem progress
{
    width: clamp(1.25rem, 50vw, 4rem);
    height: .25rem;
    background-color: var(--clr-primary-500);
}

.ts__form .fileItem progress::indeterminate
{
    display: none;
}

.ts__form input[type="submit"],
.ts__form input[type="button"]
{
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    background-color: var(--form-button-background-color);
    border-style: var(--form-button-border-style);
    border-width: var(--form-button-border-width);
    border-color: var(--form-button-border-color);
    border-radius: var(--form-button-border-radius-size);
    font-family: var(--form-button-font-family);
    font-size: var(--form-button-font-size);
    color: var(--form-button-text-color);
    line-height: var(--form-field-line-height);
    padding-block: var(--form-button-padding-block);
    padding-inline: var(--form-button-padding-inline);
    width: auto;
    height: var(--form-field-height);
    transition: var(--form-field-transition);
    cursor: pointer;
}

.ts__form input[type="submit"]:HOVER,
.ts__form input[type="submit"]:FOCUS
{
    background-color: var(--form-button-background-color-inverted);
    color: var(--form-button-text-color-inverted);
    box-shadow: var(--form-field-shadow);
}


.ts__form input[type="button"].toolbar-item
{
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    background-color: var(--form-button-background-color);
    border-style: var(--form-button-border-style);
    border-width: var(--form-button-border-width);
    border-color: var(--form-button-border-color);
    border-radius: var(--form-button-border-radius-size);
    font-family: var(--form-button-font-family);
    font-size: var(--form-button-font-size);
    color: var(--form-button-text-color);
    line-height: var(--form-field-line-height);
    padding-block: var(--form-button-padding-block);
    padding-inline: var(--form-button-padding-inline);
    width: auto;
    height: var(--form-field-height);
    transition: var(--form-field-transition);
    cursor: pointer;
}

.ts__form input[type="button"].toolbar-item:HOVER,
.ts__form input[type="button"].toolbar-item:FOCUS
{
    background-color: var(--form-button-background-color-inverted);
    color: var(--form-button-text-color-inverted);
    box-shadow: var(--form-field-shadow);
}
/*Ugly date field hack below*/
.ts__form .form__date table,
.ts__form .form__date table tbody tr
{
    display: flex !important;
    gap: var(--unit-300);
}

.ts__form .form__date table tbody tr td:nth-child(2)
{
    display: none;
}

.dateTimeBlockWrapper
{
    width: 100% !important;
    display: block !important;
    position: static !important;
}

.dateTimeBlockWrapper input
{
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute;
    border-width: 0 !important;
}

.dateTimeBlock
{
    position: static !important;
    top: unset !important;
    left: unset !important;
    transform: unset !important;
    width: 100% !important;
    display: flex !important;
    color: var(--clr-primary-900) !important;
    box-sizing: border-box;
    background-color: var(--clr-primary-100);
    border-style: solid;
    border-width: var(--unit-050);
    border-color: transparent;
    border-radius: var(--unit-900);
    font-family: var(--font-regular);
    font-size: var(--unit-300);
    line-height: var(--line-height-100);
    padding: var(--unit-250) var(--unit-600) var(--unit-250) var(--unit-250);
    margin-right: 0 !important;
    height: var(--unit-form-midi);
    gap: var(--unit-300);
}

.ts__form .dateTimePicker span
{
    color: var(--form-field-text-color);
}

.ts__form .dateInnerTimeBlock
{
    display: flex;
    gap: var(--unit-100);
    padding: 0 !important;
}

.ts__form .calBtn
{
    margin-right: 0 !important;
    float: unset !important;
    width: var(--unit-500) !important;
    height: var(--unit-300) !important;
    background: currentcolor !important;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: currentcolor;
    -webkit-mask-image: var(--icon-calendar);
    mask-image: var(--icon-calendar);
    flex-shrink: 0;
    cursor: pointer;
}

.ts__form .calBtn:HOVER,
.ts__form .calBtn.active
{
    background: var(--clr-success-500) !important;
}

.dateInnerTimeBlock img[src*="clear.png"],
img[src*="clear.png"]
{
    padding: 0 !important;
    margin-right: var(--unit-100);
    content: var(--icon-times-circle);
    width: var(--unit-250) !important;
    height: var(--unit-400) !important;
    flex-shrink: 0;
    cursor: pointer;
    display: static !important;
    margin-left: calc(-1*var(--unit-250));
    margin-right: calc(-1*var(--unit-100));
}

div[id*="SingleCalendar"]
{
    width: 320px !important;
    height: 320px !important;
    border: var(--unit-050) solid var(--clr-primary-900) !important;
    z-index: 1000003 !important;
    background-color: var(--clr-white) !important;
    box-shadow: var(--shadow-300);
    border-radius: var(--unit-600);
}

.calendarWrapper
{
    padding: var(--unit-300) !important;
    color: var(--clr-primary-900) !important;
}

.calendarWrapper td
{
    /*padding: var(--unit-200) !important;*/
    /*width: var(--unit-400);*/
    /*height: var(--unit-400);*/
    color: var(--clr-primary-900) !important;
    text-align: center !important;
}

td.CalendarText,
table.CalendarHeader td
{
    padding-left: var(--unit-200);
    padding-right: var(--unit-200) !important;
    padding-block: var(--unit-200);
    font-size: var(--unit-300);
    aspect-ratio: 1/1;
}

.calendarWrapper .selectedCell
{
    border-radius: var(--unit-900);
    border-color: transparent;
    border-style: none;
    border-width: 0;
    color: var(--clr-primary-050) !important;
    background-color: var(--clr-success-500) !important;
}

.calendarWrapper .todayCell
{
    border-radius: var(--unit-900);
    border-color: transparent;
    border-style: none;
    border-width: 0;
    color: var(--clr-primary-050) !important;
    background-color: var(--clr-primary-900) !important;
}

/*table.CalendarHeader + table tbody,
table.CalendarHeader + table tbody tr
{
    display: grid;
    width: 100%;
    min-width: 290px;
}

table.CalendarHeader + table tbody
{
    grid-template-rows: repeat(7, 3rem);
}

table.CalendarHeader + table tbody tr
{
    grid-template-columns: repeat(7, 1fr);
    place-items: center;
    grid-template-rows: 2.5rem;
    gap: .5rem;
}*/

@media screen and (max-width: 40em)
{
    .ts__form .form__date.flex__wrap table,
    .ts__form .form__date.flex__wrap table tbody tr
    {
        flex-wrap: wrap;
        width: var(--unit-100-percent);
    }

    .form__width_half
    {
        width: 100%;
        max-width: 100%;
    }
}
/* RESOURCE #23 END */
/* RESOURCE #21 BEGIN */
/***** https://www.youtube.com/watch?v=5uhIiI9Ld5M *****/
/*@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');*/

:root
{
    /***** FONTS *****/
    --font-sans: Lato, sans-serif;
    --font-serif: 'Cantata One', serif;
    /***** FONT SIZES *****/
    /***** https://utopia.fyi/type/calculator/?c=320,21,1.25,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l *****/
    --step--2: clamp(0.63rem, calc(0.72rem + -0.14vw), 0.69rem);
    --step--1: clamp(0.83rem, calc(0.81rem + 0.10vw), 0.88rem);
    --step-0: clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem);
    --font-size-paragraph: clamp(1.20rem, calc(0.98rem + 1.11vw), 1.77rem);
    --font-size-h4: clamp(1.44rem, calc(1.03rem + 2.07vw), 2.50rem);
    --font-size-h3: clamp(1.73rem, calc(1.02rem + 3.52vw), 3.53rem);
    --font-size-h2: clamp(2.07rem, calc(0.93rem + 5.70vw), 5.00rem);
    --font-size-h1: clamp(2.49rem, calc(0.70rem + 8.93vw), 7.07rem);
}

h1,
h2,
h3,
h4
{
    line-height: clamp(1, 0.2+2vw, 1.3);
}

h1
{
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--font-size-h1);
}

h2
{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--font-size-h2);
}

h3
{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--font-size-h3);
}

h4
{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--font-size-h4);
}

p,
p.section,
ul,
ol,
li
{
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--font-size-paragraph);
}

ul,
ol
{
    list-style-position: outside;
    margin-inline-start: var(--list-indent, 2rem)
}

#mergefield_main > * + *,
:where(ul,
ol) > * + *
{
    margin-top: var(--flow-space, 1em);
}

i,
em
{
    font-style: italic;
}

b,
strong
{
    font-weight: 700;
}

i b,
em b,
i strong,
em strong,
b i,
b em,
strong i,
strong em
{
    font-style: italic;
    font-weight: 700;
}
/* RESOURCE #21 END */
/* RESOURCE #34 BEGIN */
body a
{
    color: #222222;
}

.data-list
{
    margin-block-end: 1.5rem;
    /*padding-block-end: 1.5rem;*/
    display: grid;
    gap: .5rem;
}

.data-list:after
{
    content: '';
    display: block;
    background-color: #ddd;
    width: calc(100% +1.5rem);
    height: 3px;
    margin-inline-start: -1.5rem;
    margin-block-start: 1.5rem;
}

.data-list > div
{
    display: flex;
    gap: 1em;
}

.data-list > div > div:first-child
{
    width: 10em;
    font-weight: 700;
    flex-shrink: 0;
}

.data-list > div:has( > div:last-child:empty)
{
    display: none;
}
details.details
{
    --font-size: 1.5rem;
    --bg-color: #ddd;
    position: relative;
    padding-inline-start: calc(1.5 * var(--font-size));
    padding-block-end: var(--font-size);
}

details.details details.details
{
    padding-inline-start: 0;
}

details.details summary::marker,
details.details summary::-webkit-details-marker
{
    display: none;
}

details.details summary
{
    /*padding-inline-start: calc(.5 * var(--font-size));*/
    font-size: var(--font-size);
    position: relative;
    line-height: 1;
    cursor: pointer;
}

details.details:not(:last-child) summary
{
    padding-block-end: var(--font-size);
}

details.details summary:before
{
    content: '';
    width: var(--font-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: block;
    box-sizing: border-box;
    background-color: var(--bg-color);
    position: absolute;
    top: 0;
    left: calc(-1.5 * var(--font-size));
}

details.details[open] summary:after
{
    content: '–';
    position: absolute;
    color: #222;
    font-size: var(--font-size);
    top: calc(-.05 * var(--font-size));
    left: calc(-1.5 * var(--font-size));
    line-height: 1;
    text-align: center;
    width: var(--font-size);
    z-index: 3;
}

details.details:not([open]) summary:after,
details.details details.details:not([open]) summary:after
{
    content: '+';
    position: absolute;
    color: #222;
    font-size: var(--font-size);
    top: calc(-.067 * var(--font-size));
    left: calc(-1.5 * var(--font-size));
    line-height: 1;
    text-align: center;
    width: var(--font-size);
    z-index: 3;
}

details.details:before
{
    content: '';
    display: block;
    position: absolute;
    width: 3px;
    height: calc(100% - var(--font-size));
    top: var(--font-size);
    left: calc(.45 * var(--font-size));
    background-color: var(--bg-color);
}

details.details details.details:before
{
    left: calc(-1 * var(--font-size) - 2px);
}

details.details:after
{
    content: '';
    display: block;
    position: absolute;
    width: calc(1 * var(--font-size));
    height: 3px;
    top: calc(.45 * var(--font-size) - 1px);
    left: 0;
    z-index: 2;
    background-color: var(--bg-color);
}

details.details details.details:after
{
    width: calc(1.75 * var(--font-size));
    left: calc(-2.35 * var(--font-size));
}

details.details details.details
{
    margin-inline-start: 2rem;
}

.ts__form .images:not(:has(input))
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    gap: 10px;
}

.ts__form .images img:not(.uploadItemRemove)
{
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

/*overwrite default form styles */
.ts__form input[type="file"]+div
{
    flex-direction: row;
}

.ts__form .files:not(:has(input))
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ts__form .files input[type="file"]+div
{
    flex-direction: row;
}

.ts__form.filtering
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 20px;
}

.ts__form.filtering > *+*
{
    margin-block-start: unset;
}

.ts__form
{
    padding-inline: 0;
}

.ts__form div[id*="_editor"]
{
    height: 20em !important;
}

.ts__form:not(tr) > *:has(> *+*:empty)
{
    display: none;
}

form[name="tangoraform"] :is(.details, .tabs)
{
    display: none;
}

thead.ts__head tr.ts__table_row th,
thead tr th,
tbody.ts__tbody tr.ts__table_row td,
tbody tr td,
tfoot.ts__tfoot tr.ts__table_row td,
tfoot tr td
{
    white-space: unset;
    vertical-align: baseline;
}


/**** TYPOGRAPHY FIX ****/
p,
p.section,
ul,
ol,
li
{
    --font-size-paragraph: 1rem;
}

/**** TABS ****/
.tabs
{
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid #000000;
    margin-block-end: 1rem;
    align-items: stretch;
}

.tabs .TangoraDetailsButton
{
    display: block;
    padding-block: .5rem;
    padding-inline: 1rem;
    border-bottom: 3px transparent #000000;
    color: #000000;
}

.tabs span.TangoraDetailsButton,
.tabs a.TangoraDetailsButton:HOVER
{
    border-bottom: 3px solid #000000;
    text-decoration: none;
}

/**** BUTTONS ****/
.actions:not(td>div)
{
    margin-block-end: 1rem;
}

input[type="button"].btn,
a.btn,
.btn a
{
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    background-color: var(--form-button-background-color);
    border-style: var(--form-button-border-style);
    border-width: var(--form-button-border-width);
    border-color: var(--form-button-border-color);
    border-radius: var(--form-button-border-radius-size);
    font-family: var(--form-button-font-family);
    font-size: var(--form-button-font-size);
    color: var(--form-button-text-color);
    line-height: var(--form-field-line-height);
    padding-block: 5px;
    padding-inline: 10px;
    width: auto;
    height: var(--form-field-height);
    transition: var(--form-field-transition);
    cursor: pointer;
}

.btn a[class*='Delete']
{
    background-color: #CD0000;
    border-color: #CD0000;
    color: #ffffff;
}

.btn :is(a[class*='Create'], a[class*='Edit']) 
{
    background-color: #008000;
    border-color: #008000;
    color: #ffffff;
}

input[type="button"].btn:HOVER,
a.btn:HOVER,
.btn a:HOVER,
input[type="button"].btn:FOCUS,
a.btn:FOCUS,
.btn a:FOCUS
{
    background-color: var(--form-button-background-color-inverted);
    color: var(--form-button-text-color-inverted);
    box-shadow: var(--form-field-shadow);
    text-decoration: none;
}

/**** DRAWING APP ****/
:root 
{
    --color-grey-000: #000000;
    --color-grey-100: #222222;
    --color-grey-500: #aaaaaa;
    --color-light: #ffffff;
    --app-background-color: var(--color-grey-500);
    --canvas-background-color: var(--color-grey-100);
    --stage-background-color: var(--color-light);
    --font-regular: system-ui, helvetica, arial, sans;
    --font-size-base: 12px;
}

#ada 
{
    background-color: var(--app-background-color);
}

canvas 
{
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-light);
    height: 600px;
}

#toolBox 
{
    background-color: var(--color-light);
    box-shadow: 0 0 10px #00000080;
    padding: 10px;
    position: sticky;
    top: 10px;
    left: 10px;
    display: grid;
    gap: 10px;
    max-width: 100px;
    border-radius: 8px;
    z-index: 10;
}

#toolBox .colors 
{
    --_scale: 0.7;
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

#toolBox .colors input[type="color"] 
{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--_scale) * 100%);
    height: calc(var(--_scale) * 100%);
}

#toolBox .colors input[type="color"]#fillColor 
{
    top: unset;
    left: unset;
    right: 0;
    bottom: 0;
}

#toolBox .colors input[type="checkbox"]#stroke 
{
    position: absolute;
    top: 0;
    left: 0;
}

#toolBox .colors input[type="checkbox"]#fill 
{
    position: absolute;
    right: 0;
    bottom: 0;
}

#toolBox .colors button#swapColors 
{
    position: absolute;
    left: 0;
    bottom: 0;
    appearance: none;
    padding: 4px;
    margin: 0;
    border: none;
    border-radius: none;
    background-color: var(--color-light);
    cursor: pointer;
}

#toolBox :is(.btn-canvas, #randomColors)
{
    width: 100%;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-inline: 5px;
    padding-block: 3px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-grey-000);
    box-shadow: none;
    background-color: var(--color-light);
    font-size: var(--font-size-base);
}

#toolBox :is(select,input[type="number"])
{
    line-height: unset;
    background-position: 95% center;
    background-size: 12px auto;
    
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
    background-color: unset;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    border-radius: 2px;
    font-family: initial;
    font-size: .75rem;
    color: #000000;
    line-height: initial;
    padding-block: 2px;
    padding-inline: 2px;
    margin: initial;
    width: initial;
    height: initial;
    transition: initial;
}

#toolBox input[type="checkbox"]
{
    width: unset;
    height: unset;
    opacity: unset;
}

#toolBox input[type="checkbox"]#stroke
{
    top: 0;
    left: 0;
    right: unset;
    bottom: unset;
}

#toolBox input[type="checkbox"]#fill
{
    top: unset;
    left: unset;
    right: 0;
    bottom: 0;
}
/* RESOURCE #34 END */
/* RESOURCE #37 BEGIN */
/**** ICONS ****/
:root
{
    --icon-chevron-back: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0OCIgZD0iTTMyOCAxMTJMMTg0IDI1NmwxNDQgMTQ0Ii8+PC9zdmc+);
    --icon-delete: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTExMiAxMTJsMjAgMzIwYy45NSAxOC40OSAxNC40IDMyIDMyIDMyaDE4NGMxNy42NyAwIDMwLjg3LTEzLjUxIDMyLTMybDIwLTMyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTgwIDExMmgzNTIiLz48cGF0aCBkPSJNMTkyIDExMlY3MmgwYTIzLjkzIDIzLjkzIDAgMDEyNC0yNGg4MGEyMy45MyAyMy45MyAwIDAxMjQgMjRoMHY0ME0yNTYgMTc2djIyNE0xODQgMTc2bDggMjI0TTMyOCAxNzZsLTggMjI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMyIi8+PC9zdmc+); 
    --icon-add: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTI1NiAxMTJ2Mjg4TTQwMCAyNTZIMTEyIi8+PC9zdmc+);
    --icon-edit: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTM4NCAyMjR2MTg0YTQwIDQwIDAgMDEtNDAgNDBIMTA0YTQwIDQwIDAgMDEtNDAtNDBWMTY4YTQwIDQwIDAgMDE0MC00MGgxNjcuNDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiLz48cGF0aCBkPSJNNDU5Ljk0IDUzLjI1YTE2LjA2IDE2LjA2IDAgMDAtMjMuMjItLjU2TDQyNC4zNSA2NWE4IDggMCAwMDAgMTEuMzFsMTEuMzQgMTEuMzJhOCA4IDAgMDAxMS4zNCAwbDEyLjA2LTEyYzYuMS02LjA5IDYuNjctMTYuMDEuODUtMjIuMzh6TTM5OS4zNCA5MEwyMTguODIgMjcwLjJhOSA5IDAgMDAtMi4zMSAzLjkzTDIwOC4xNiAyOTlhMy45MSAzLjkxIDAgMDA0Ljg2IDQuODZsMjQuODUtOC4zNWE5IDkgMCAwMDMuOTMtMi4zMUw0MjIgMTEyLjY2YTkgOSAwIDAwMC0xMi42NmwtOS45NS0xMGE5IDkgMCAwMC0xMi43MSAweiIvPjwvc3ZnPg==);
}

/**** BUTTONS ****/
.button:hover
{
    background-color: #ffffff;
}

.button a
{
    border: 1px solid #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;  
    padding: 8px 16px;
    background-color: #000000;
    transition: all .1s ease-in; 
}
.button input
{
    border: 1px solid #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.25;  
    padding: 8px 16px;
    background-color: #000000;
    transition: all .1s ease-in;
    cursor: pointer; 
}

.button a:hover
{
    text-decoration: unset;
    color: #000000;
    background-color: #ffffff;
}

.button a:before
{
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: currentcolor;
}

.button-back a:before
{
    content: '';
    display: block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: currentcolor;
    -webkit-mask-image: var(--icon-chevron-back);
    mask-image: var(--icon-chevron-back);
}

.button-add a:before
{
    content: '';
    display: block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: currentcolor;
    -webkit-mask-image: var(--icon-add);
    mask-image: var(--icon-add);
}

.button-edit a:before
{
    content: '';
    display: block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: currentcolor;
    -webkit-mask-image: var(--icon-edit);
    mask-image: var(--icon-edit);
}

.button.button-delete a
{
    background-color: #CD0000;
    border-color: #CD0000;
}
.button.button-delete a:hover
{
    background-color: #F72A29;
    color: #ffffff;
}
.button-delete a:before
{
    content: '';
    display: block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: currentcolor;
    -webkit-mask-image: var(--icon-delete);
    mask-image: var(--icon-delete);
}
.button.button-save input
{
    background-color: #27A243;
    border-color: #27A243;
    color: #ffffff;
}

.button.button-save input:hover
{
    background-color: #ffffff;
    color: #27A243;
}
/* RESOURCE #37 END */