@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;700&display=swap");


@font-face
{
    font-family  : "Aeonik-Bold";
    src          : url("../fonts/aeonik/Aeonik-Bold.woff2") format("woff2"),
    url("../fonts/aeonik/Aeonik-Bold.woff") format("woff");
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}


@font-face
{
    font-family  : "Aeonik-Light";
    src          : url("../fonts/aeonik/Aeonik-Light.woff2") format("woff2"),
    url("../fonts/aeonik/Aeonik-Light.woff") format("woff");
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}


@font-face
{
    font-family  : "Aeonik-Regular";
    src          : url("../fonts/aeonik/Aeonik-Regular.woff2") format("woff2"),
    url("../fonts/aeonik/Aeonik-Regular.woff") format("woff");
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}


:root
{
    --connect-deep-blue        : rgb(22, 62, 76);
    --connect-deep-blue-darker : rgb(18, 50, 60);
    --connect-grass            : rgb(65, 173, 73);
    --connect-light            : rgb(233, 240, 242);
    --connect-mid-teal         : rgb(0, 141, 127);
    --connect-orange           : rgb(240, 139, 29);
    --connect-silver           : rgb(215, 222, 224);
    --connect-silver-semitone  : rgba(27, 33, 35, 0.05);
    --connect-lime-green       : rgb(152, 201, 60);
    --connect-silver-tone      : rgba(27, 33, 35, 0.1);
    --connect-steel            : rgb(70, 83, 105);
    --connect-steel-α          : rgba(70, 83, 105, 0.5);
    --connect-tangerine        : rgb(253, 185, 6);
    --connect-teal             : rgb(0, 172, 161);
    --connect-teal-α           : rgba(0, 172, 161, 0.25);
    --connect-teal-αα          : rgba(0, 172, 161, 0.125);
    --connect-teal-γ           : hsl(176, 100%, 44%);

    --wbcsd-fg                 : rgb(42, 40, 37);
    --wbcsd-bg-0               : rgb(70, 92, 102);
    --wbcsd-bg-1               : rgb(195, 203, 182);
    --wbcsd-bg-2               : rgb(240, 237, 230);

    --wbcsd-ui                 : rgb(248, 120, 30);

    --active                   : var(--connect-lime-green);
    --arthur                   : rgb(158, 52, 55);
    --blockquote               : var(--connect-deep-blue);
    --body                     : rgb(255, 255, 255);
    --brand                    : var(--connect-deep-blue);
    --dark                     : rgb(51, 51, 51);
    --error                    : rgb(230, 60, 0);
    --font                     : "Inter", Helvetica, Arial, sans-serif;
    --hubspot                  : rgb(255, 122, 89);
    --airtable                 : rgb(31, 181, 238);
    --dropbox                  : rgb(0, 97, 254);
    --light                    : var(--connect-silver);
    --mid                      : rgb(165, 170, 175);
    --nexus                    : rgb(158, 52, 55);
    --piwik                    : rgb(158, 52, 55);
    --spacer                   : 20px;
    --sric                     : rgb(152, 201, 60);
    --warehouse                : var(--connect-grass);
    --acym                     : rgb(9, 121, 206);
    --sric-darker              : hsl(81, 57%, 42%);
    --ui                       : var(--connect-teal);
    --warning                  : var(--connect-orange);
    --ui-active                : var(--connect-mid-teal);
    --brand-darker             : var(--connect-deep-blue-darker);
    --brand-α                  : rgba(22, 62, 76, 0.25);

    --body-font-weight         : 400;
    --title-font-weight        : 800;
    --body-foreground          : var(--dark);
    --body-foreground-bright   : var(--dark);

    --x-light                  : var(--connect-light);
    --ui-α                     : var(--connect-teal-α);
    --ui-αα                    : var(--connect-teal-αα);

    --ui-γ                     : var(--connect-teal-γ);

    --panel                    : rgba(232, 232, 233, 1);
}


html
{
    scroll-behavior : smooth;
}


body
{
    background-color : var(--body);
    color            : var(--body-foreground);
}


body, table
{
    font-size : .875rem;
}


body, input, textarea, button, select, .ui-widget
{
    font-family : var(--font);
    font-weight : var(--body-font-weight);
}


html[data-host="aether"] #page:before,
html[data-host="dev-dc-sri-connect-com"] #page:before
{
    position       : absolute;
    inset          : 0;
    display        : block;
    content        : "";
    z-index        : 10001;
    pointer-events : none;
}


html[data-host="aether"] #page:before
{
    box-shadow : inset 0 0 0 3px rgba(220, 180, 0, 0.5);
}


html[data-host="dev-dc-sri-connect-com"] #page:before
{
    box-shadow : inset 0 0 0 3px rgba(220, 60, 0, 0.5);
}


h1, h2, h3, h4, .btn-default, .discs li, figure, q
{
    font-family : var(--font);
    font-weight : var(--title-font-weight);
}


h3, h4, h5
{
    margin : 20px 0;
}


*
{
    /*scrollbar-color : var(--body-foreground) var(--connect-silver-tone);*/
}


*::-webkit-scrollbar
{
    height           : 10px;
    width            : 10px;
    background-color : transparent;
}


*::-webkit-scrollbar-thumb
{
    background-color : var(--mid);
    border-radius    : 16px;
}


*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner
{
    background : var(--connect-silver-tone);
}


h3, .h3
{
    font-size : 1.5rem;
}


.h4, h4
{
    font-size : 1.25rem;
}


::selection
{
    background : var(--ui-α);
}


input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus
{
    background : var(--ui-α);
}


/*
h4.sticky
{
    position : sticky;
    top      : 0;
}


blockquote h4.sticky
{
    backdrop-filter : blur(4px);
    padding         : 5px 15px 5px 35px;
    margin          : -5px -15px -5px -35px;
}
*/

.visually-hidden
{
    clip        : rect(0 0 0 0);
    clip-path   : inset(100%);
    height      : 1px;
    overflow    : hidden;
    position    : absolute;
    width       : 1px;
    white-space : nowrap;
}


.__
{
    *zoom : 1;
}


.__:before,
.__:after
{
    content : " ";
    display : table;
}


.__:after
{
    clear : both;
}


pre
{
    color : var(--body-foreground);
}


pre code
{
    box-shadow : inset 0 0 0 1px currentColor;
}


input, select, textarea, button
{

    background-color : var(--body);
    border           : 1px solid var(--ui);
    color            : var(--body-foreground);
}


input:disabled, select:disabled, textarea:disabled, button:disabled
{

    background-color : var(--body);
    border           : 1px solid var(--mid);
    color            : var(--mid);
    opacity          : 0.4;
}


input:not([type="checkbox"]):not([type="radio"]), select, textarea
{

    box-shadow : 0 0 0 0 transparent;
    transition : box-shadow 0.2s ease-in-out;
}


input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus
{

    box-shadow : 0 0 0 3px var(--ui-α);
}


label[title]
{
    display       : inline-block;
    cursor        : help;
    border-bottom : 1px dotted var(--ui);
}


.cc-native
{
    cursor        : pointer;
    border-bottom : 1px dotted var(--ui);
    color         : var(--ui) !important;
}


.chip
{
    cursor         : default;
    font-size      : 11px;
    padding        : 2px 4px;
    vertical-align : 1px;
    display        : inline;
    margin-right   : 3px;
    border-radius  : 4px;
    white-space    : nowrap;
}


.chip span:not(:empty)
{
    margin-left : 4px;
}


#toast
{
    position         : absolute;
    background-color : var(--brand-α);
    width            : 100%;
    z-index          : 1001;
    padding          : 0.5rem 1rem;
    backdrop-filter  : blur(10px);
    transform        : translateY(-100%);
    transition       : transform 0.3s ease-in-out;
    min-height       : 37px;
    font-weight      : bold;
}


#toast:has(.wait)
{
    height : 45px;
}


#toast:not(:empty)
{
    transform : translateY(0);
}


#toast .wait
{
    display        : inline-block;
    min-height     : auto;
    width          : 30px;
    height         : 30px;
    position       : relative;
    vertical-align : middle;
    margin-right   : 6px;
}


#toast .wait:before
{
    height : 100%;
    width  : 100%;
}


#toast .wait:after
{
    display : none;
}


#toast p
{
    margin : 0;
}


.execution-note
{
    box-shadow    : 0 0 0 1px var(--body-foreground);
    border-radius : 50px;
    padding       : 2px !important;
}


.execution-note:not(:last-child)
{

    margin-bottom : 8px !important;
}


.execution-note a
{
    color : var(--body-foreground);
}


.execution-note a:hover
{
    color          : var(--body-foreground);
    text-underline : none !important;
}


.execution-note a q
{
    background-color : var(--connect-grass);
}


h5.out
{
    font-size : 11px;
}


#log-toggle
{
    cursor   : pointer;
    height   : 18px;
    position : fixed;
    right    : 1px;
    top      : 17px;
    width    : 18px;
    z-index  : 1052;
}


label[for="log-toggle"], #log time, h5.out
{

    letter-spacing : 2px;
    opacity        : 0.35;
    text-transform : uppercase;
}


label[for="log-toggle"]
{
    color            : var(--connect-silver);
    cursor           : pointer;
    font-size        : 11px;
    margin           : 0;
    position         : fixed;
    right            : -29px;
    top              : 95px;
    transform        : rotate(90deg);
    transform-origin : 50% 50%;
    white-space      : nowrap;
    z-index          : 1052;
}


label[for="log-toggle"]:hover
{
    color : #FFFFFF;
}


#page
{
    margin-right : 20px;
    transition   : margin 500ms ease-in-out;
}


#page.full
{
    margin-left : -320px;
}


#page .sidebar
{
    transition : left 500ms ease-in-out;
}


#page.full .sidebar
{
    left : -320px;
}


#toggle-full
{
    display          : block;
    position         : fixed;
    background-color : var(--ui-α);
    left             : -8px;
    top              : 50vh;
    transform        : translateY(-50%);
    width            : 13px;
    height           : 100px;
    z-index          : 10001;
    cursor           : pointer;
    border-radius    : 0 3px 3px 0;
    transition       : all 150ms ease-in-out;
    line-height      : 100px;
    color            : #333333;
    text-align       : right;
    letter-spacing   : -1px;
    padding-right    : 1px;
}


#toggle-full:hover
{
    left             : 0;
    background-color : var(--ui);
}


#log
{
    background : var(--brand-darker);
    color      : var(--connect-silver);
    height     : 100vh;
    overflow   : auto;
    padding    : 55px 0 0;
    position   : fixed;
    right      : 0;
    top        : 0;
    transition : width 500ms ease-in-out;
    width      : 20px;
    z-index    : 1051;
}


#log-toggle:checked ~ #page
{
    margin-right : 320px;
}


#log-toggle:checked ~ label
{
    display : none;
}


#log-toggle:checked ~ #log
{
    width : 320px;
}


#log > div
{
    display   : none;
    font-size : 11px;
    padding   : 2.5px 5px 0;
    width     : 320px;
}


#log-toggle:checked ~ #log > div
{
    display : block;
}


#log > div.error
{
    color : var(--error);
}


#log > hr
{
    background : #FFFFFF;
    display    : none;
    height     : 1px;
    margin     : 5px -5px;
    opacity    : 0.2;
    width      : calc(100% + 5px);
}


#log-toggle:checked ~ #log > hr
{
    display : block;
}


.navbar
{
    justify-content : left;
}


#title
{
    color         : #FFFFFF;
    font-family   : var(--font);
    font-size     : 30px;
    padding-left  : 1rem;
    padding-top   : 7px;
    font-weight   : 200;
    white-space   : nowrap;
    text-overflow : ellipsis;
    overflow      : hidden;
    min-width     : calc(0.3 * (100% - 320px));
}


#title q
{
    width : 1.4em;
}


.modal-title q
{
    width : 1.8em;
}


#pushed-controls
{
    color : #FFFFFF;
}


aside
{
    float : right;
}


blockquote
{
    backdrop-filter : blur(20px);
    border-left     : var(--blockquote) 5px solid;
    color           : var(--blockquote);
    margin          : 0;
    padding         : 5px 15px 5px 35px;
    position        : relative;
}


blockquote.tight
{
    padding : 5px 5px 5px 10px;
}


blockquote:not(:first-child)
{
    margin-top : 1.5em;
}


blockquote:not(:last-child)
{
    margin-bottom : 1.5em;
}


blockquote:before
{
    background-color : var(--panel);
    content          : " ";
    display          : block;
    height           : 100%;
    left             : 0;
    pointer-events   : none;
    position         : absolute;
    top              : 0;
    width            : 100%;
}


blockquote > *
{
    position : relative;
    z-index  : 1;
}


blockquote > *:first-child, blockquote.processing-notes h4
{
    margin-top : 0;
}


blockquote.processing-notes > figure
{
    background-color : var(--blockquote);
    color            : var(--panel);
    position         : absolute;
    width            : 24px;
    height           : 24px;
    line-height      : 24px;
    padding          : 0;
    left             : 5px;
    top              : 5px;
    font-size        : 17px;
}


blockquote.processing-notes .tab-label q
{
    background-color : var(--connect-grass);
    margin-top       : -3px;
    margin-bottom    : -3px;
}


.processing-notes-desc
{
    margin-bottom : 3px;
}


blockquote > *:last-child
{
    margin-bottom : 0;
}


blockquote ul, blockquote ol
{
    padding-left : 0;
}


blockquote ul ul,
blockquote ul ol,
blockquote ol ul
{
    padding-left : 20px;
}


blockquote dt
{
    float : left;
    width : 40%;
    clear : both;
}


blockquote dt label
{
    margin-top : 10px;
}


blockquote dd
{
    float : right;
    width : 60%;
}


blockquote dd input[type=checkbox]
{
    margin-top : 8px;
}


blockquote.sric
{
    border-left : var(--sric) 5px solid;
    color       : var(--sric);
}


blockquote.sric:before
{
    background-color : var(--sric);
    opacity          : 0.125;
}


blockquote.sric .tab-label > i
{
    color : var(--sric);
}


blockquote.warning
{
    border-left : var(--warning) 5px solid;
}


blockquote.warning:before, blockquote.warning var
{
    background-color : var(--warning);
}


blockquote.warning:before
{
    opacity : 0.35;
}


blockquote.warning h3, blockquote.warning h4, blockquote.warning p
{
    color : var(--warning);
}


blockquote.warning table, blockquote.warning th, blockquote.warning td
{
    border-color : var(--warning);
}


.wait
{
    min-height : 160px;
}


.dz
{
    border : 1px dashed var(--ui);
    cursor : default;
}


.dz:hover
{
    border     : 1px solid var(--ui);
    box-shadow : inset 0 0 0 2px var(--ui-α);
}


.dz.dz-drag-hover
{
    border     : 1px solid var(--ui);
    box-shadow : inset 0 0 0 5px var(--ui-α);
}


.dz-preview
{
    display : none;
}


.card
{
    background-color : var(--body);
}


.card.card-register-source .card-body
{
    height  : 95px;
    padding : 10px 46px 10px 10px;
}


.card.card-register-source i, .card.card-register-source img, .card.card-register-source aside
{
    position : absolute;
    right    : 5px;
}


.card.card-register-source i, .card.card-register-source img
{
    top   : 5px;
    width : 20px;
}


.card.card-register-source aside
{
    background    : var(--connect-steel);
    border-radius : 4px;
    bottom        : 5px;
    color         : #FFFFFF;
    font-size     : 90%;
    line-height   : 1.2;
    padding       : 2px 4px;
    text-align    : center;
}


.dz-clickable
{
    cursor : pointer;
}


.dz-clickable *
{
    pointer-events : none;
}


.generic-bg
{

    background-color : var(--connect-grass) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.hubspot-bg, .hs-bg
{
    background-color : var(--hubspot) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.aitable-bg, .at-bg
{
    background-color : var(--airtable) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.upload-bg
{
    background-color : #1F7244;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.piwik-bg
{
    background-color : var(--piwik) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.arthur-bg
{
    background-color : var(--arthur) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.nexus-bg
{
    background-color : var(--nexus);
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.sric-bg
{
    background-color : var(--sric) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.sric-bg.sric-bg-company
{
    background-color : var(--sric-darker) !important;
}


.airtable-bg
{
    background-color : var(--airtable) !important;
    color            : #FFFFFF !important;
}


.dropbox-bg
{
    background-color : var(--dropbox) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.acym-bg
{
    background-color : var(--acym) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.warehouse-bg
{
    background-color : var(--warehouse) !important;
    color            : #FFFFFF !important;
    stroke           : #FFFFFF !important;
}


.sric-bg.acym-bg
{
    background : linear-gradient(135deg, var(--sric) 50%, var(--acym) 50%);
}


.sric-bg.hubspot-bg
{
    background : linear-gradient(135deg, var(--sric) 50%, var(--hubspot) 50%);
}


.sric-bg.airtable-bg
{
    background : linear-gradient(135deg, var(--sric) 50%, var(--airtable) 50%);
}


.hubspot-bg.airtable-bg
{
    background : linear-gradient(135deg, var(--hubspot) 50%, var(--airtable) 50%);
}


.hubspot-fg
{
    color : var(--hubspot);
}


.arthur-fg
{
    color : var(--arthur);
}


.sric-fg
{
    color : var(--sric);
}


.nexus-fg
{
    color : var(--nexus);
}


.modal-xl
{
    max-width : 85vw;
}


.modal-content
{
    background-color : transparent;
    overflow         : hidden;
}


.modal-header
{
    background    : var(--brand);
    border-bottom : none;
    border-radius : 0;
    color         : #FFFFFF;
    padding       : 0.5rem 1rem;
}


.modal-header code
{
    color : #FFFFFF;
}


.modal-header button
{
    background    : var(--ui-αα);
    border        : none;
    border-radius : 50%;
    color         : #FFFFFF;
    cursor        : pointer;
    flex-grow     : 0;
    float         : right;
    height        : 40px;
    margin        : -4px 0 -4px 4px !important;
    opacity       : 1;
    padding       : 0 !important;
    text-shadow   : none;
    width         : 40px;
}


.modal-header button:hover
{
    background : var(--ui);
    color      : #FFFFFF;
    opacity    : 1;
}


.modal-title
{
    flex-grow : 1;
    margin    : 0;
}


.modal-body
{
    background-color : var(--body);
    max-height       : 85vh;
    min-height       : 20vh;
    overflow         : auto;
    transition       : none !important;
}


.modal-body .CodeMirror
{
    height   : auto;
    position : absolute;
    inset    : 0;
}


.form-flat form
{
    display : flex;
    gap     : 5px;
}


.form-flat form label
{
    display      : inline;
    height       : 1.4em;
    margin-left  : -5px;
    margin-right : -5px;
    padding-left : 5px;
    transform    : translateY(-100%);
    width        : 1px;
}


.form-flat form input,
.form-flat form select
{
    flex : 1 1 0;
}


.cm-vw
{
    border-radius : 3px;
    box-shadow    : 0 0 0 1px var(--light);
    cursor        : pointer;
    padding       : 0 2px;
}


h4 + h6
{
    margin-top : -20px;
}


main
{
    padding : 0 !important
}


hr
{
    border : none;
    clear  : both;
    height : 40px;
    margin : 0;
}


hr.s
{
    height : 20px;
}


hr.ss
{
    height : 12px;
}


a
{
    color : var(--ui);
}


a:hover
{
    color : var(--ui);
}


a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):hover
{
    color : var(--ui);
}


q
{
    background    : #404040;
    border-radius : 50%;
    color         : #FFFFFF;
    display       : inline-block;
    font-family   : consolas, monospace;
    font-style    : italic;
    padding       : 3px;
    position      : relative;
    text-align    : center;
    width         : 27px;
    /*text-indent   : -3px;*/
}


q.process
{
    background : #FFFFFF;
    /* box-shadow : 0 0 0 1px #444444; */
    color      : #222222;
}


q:before, q:after
{
    content : "";
}


q sub
{
    background    : #000000;
    border-radius : 10px;
    bottom        : 0.2em;
    color         : #FFFFFF;
    font-size     : 50%;
    font-style    : normal;
    height        : 1.2em;
    line-height   : normal;
    position      : absolute;
    width         : 1.2em;
}


#duts q sub
{
    font-size   : 80%;
    padding     : 2px 5px;
    margin-left : 2px;
    bottom      : 0;
    width       : auto;
    height      : auto;
}


q sub:empty
{
    display : none;
}


label
{
    display : block;
}


label q
{

    font-size : 120%;
    padding   : 1px 3px;
}


code
{
    background    : rgba(0, 0, 0, 0.1);
    border-radius : 3px;
    cursor        : default;
    padding       : 1px 3px;
    user-select   : all;
    white-space   : nowrap;
    font-weight   : normal;
}


code,
code > a,
code > a:hover
{
    color : var(--body-foreground);
}


code > a
{
    text-decoration : underline;
}


.sys-error, .db-error
{
    background    : var(--error);
    border-radius : 5px;
    color         : #F2F2F2;
    margin        : 5px 0;
    padding       : 10px;
}


.db-error code
{
    white-space : normal;
}


input[type="radio"],
input[type="checkbox"]
{
    accent-color : var(--ui);
    height       : 0.9em;
    width        : 0.9em;
}


input[type="date"]
{
    font-variant-numeric : tabular-nums;
}


input[type="checkbox"] + label, input[type="radio"] + label
{
    display : inline-block;
}


input:not([type="checkbox"]):not([type="radio"]), select, textarea
{
    outline : none;
    padding : 10px;
    width   : 100%;
}


select[multiple]
{
    padding       : 0;
    border-radius : 0;
}


select[multiple] option
{
    padding : 0 10px;
}


input[type=button]
{
    background    : var(--ui);
    border        : none;
    border-radius : 3px;
    color         : #FFFFFF;
    cursor        : pointer;
}


input.inline
{
    display    : inline;
    padding    : 0.1em !important;
    text-align : center;
}


input.inline:not([size])
{
    width : 1.6em !important;
}


input.inline[size]
{

    width : unset;
}


.modal-header input.inline
{
    background : none;
    color      : #FFFFFF;
    padding    : 0 0.1em 0 !important;
    text-align : left;
}


.btn q, input[type=button] q
{
    background-color : var(--ui-γ);
    font-size        : 200%;
    height           : 40px;
    line-height      : 32px;
    margin-bottom    : -12px;
    margin-right     : 6px;
    margin-top       : -15px;
    vertical-align   : middle;
    width            : 40px;
}


.btn[disabled] q, input[type=button][disabled] q
{
    background-color : var(--body);
    box-shadow       : 0 0 0 1px var(--ui-α);
    color            : var(--ui-α);
}


.btn.btn-sm q
{
    margin-top : -12px;
}


figure q
{
    background  : rgba(0, 0, 0, 0.5);
    height      : 30px;
    left        : 50%;
    line-height : 24px;
    position    : absolute;
    top         : 5px;
    transform   : translateX(-50%);
    width       : 30px;
}


.p-3
{
    background-position : center;
    background-size     : cover;
}


.p-3.bg
{
    background-image : url("../images/bg_11.jpg");
    height           : 100%;
    width            : 100%;
}


.direct .p-3.bg.session-end
{
    max-width     : 100%;
    width         : 680px;
    padding       : 3rem !important;
    margin        : 0 auto;
    border-radius : 6px;
}


.p-3 > .p-3
{
    padding : 0 !important;
}


.p-3 .p-3 var,
.p-3 .p-3 .table-download
{
    display : none;
}


.btn-primary.disabled, .btn-primary:disabled, .btn-primary.disabled:hover, .btn-primary:disabled:hover
{
    background-color : transparent;
    border-color     : var(
            --mid);
}


table
{
    color        : var(--body-foreground);
    table-layout : fixed;
    width        : 100%;
}


.table-flow > table
{
    width : auto;
}


p.note
{
    color     : #888888;
    font-size : 12px;
}


.table-wrapper + p.note
{

    margin : 6px 0 0 45px;
}


tr.matched
{
    background : var(--active);
}


tr.matched:nth-child(2n)
{
    background : var(--active);
}


.table-wrap
{
    height   : calc(100vh - 57px);
    overflow : scroll;
}


.table-wrap table
{
    border-collapse : separate;
    border-spacing  : 0;
}


.table-wrap th, .ui-widget-content
{
    backdrop-filter : blur(10px);
    background      : var(--connect-silver-semitone);
}


.ui-widget.ui-widget-content
{
    border : none;
}


.ui-menu .ui-state-active
{
    margin : 0 !important;
}


.ui-menu .ui-menu-item-wrapper
{
    font-size : 13px;
    border    : none;
}


.ui-widget-content a
{
    color : var(--body-foreground);
}


.table-wrap th
{
    position : sticky;
    top      : 0;
    z-index  : 101;
}


img
{
    display   : block;
    max-width : 100%;
}


table
{
    border-bottom        : 1px solid var(--connect-silver-tone);
    border-right         : 1px solid var(--connect-silver-tone);
    font-variant-numeric : tabular-nums;

}


th, td
{
    border-left    : 1px solid var(--connect-silver-tone);
    border-top     : 1px solid var(--connect-silver-tone);
    padding        : 5px;
    position       : relative;
    vertical-align : top;
    /*word-break: break-all;*/
}


.table-flow th
{
    white-space : nowrap;
}


.table-flow th, .table-flow td
{
    word-break : initial;
}


th.id-cb, td.id-cb
{
    backdrop-filter : blur(10px);
    background      : var(--connect-silver-semitone);
    position        : sticky;
    /*right           : 1rem;*/
    width           : 28px;
}


th.id-cb input, td.id-cb input
{
    margin-right : 4px;
}


th
{
    border-bottom : 1px solid var(--dark);
}


th.sortable
{
    cursor : ns-resize;
}


th.sortable.sorted
{
    background-color : var(--ui-αα);
}


th.filter-scope:after
{
    content          : "\2919";
    display          : block;
    position         : absolute;
    right            : 6px;
    font-size        : 42px;
    top              : 14px;
    line-height      : 6px;
    color            : var(--ui);
    rotate           : -90deg;
    text-indent      : -21px;
    overflow         : hidden;
    width            : 9px;
    transform-origin : top left;
    height           : 13px;
}


th.sortable.sorted:before
{
    display     : block;
    position    : absolute;
    right       : 5px;
    font-size   : 10px;
    bottom      : 5px;
    line-height : 1;
    color       : var(--ui);
}


th.sortable.sorted-asc:before
{
    content : "\25b2";
}


th.sortable.sorted-desc:before
{
    content : "\25bc";
}


th.sortable:hover
{
    background-color : var(--ui-α);
}


th input[type="checkbox"], td input[type="checkbox"]
{
    transform : scale(1.35) translate(1px, 1px);
}


tr.chk-click.active,
tr.chk-click:has(:checked)
{
    background-color : var(--ui-α);
}


td.center
{
    text-align : center;
}


.table-wrapper.interactive tr:hover, tr.chk-click:hover
{
    background-color : var(--ui-αα);
    cursor           : pointer;
}


.table-wrapper
{
    padding-left : 40px;
    position     : relative;
}


blockquote .table-wrapper
{
    padding-left : 0;
}


td > .table-wrapper
{
    max-height : 20vh;
    overflow-y : auto;
}


.table-wrapper table
{
    /*table-layout : fixed;*/
}


.table-hscroll
{
    overflow-x : auto;
}


.table-hscroll:before,
.table-hscroll:after
{
    content    : "";
    position   : absolute;
    width      : 20px;
    height     : 100%;
    top        : 0;
    z-index    : 1000;
    opacity    : 0; /* Hidden by default */
    transition : opacity 0.2s ease-in-out; /* Smooth fade-in/out */
}


.table-hscroll:before
{
    left       : 40px;
    background : linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}


.table-hscroll:after
{
    right      : 0;
    background : linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
}


.table-hscroll.show-left:before
{
    opacity : 1; /* Show left gradient */
}


.table-hscroll.show-right:after
{
    opacity : 1; /* Show right gradient */
}


.table-hscroll > table
{
    width : auto;
}


.table-wrapper th
{
    white-space : nowrap;
}


.table-wrapper th.dc-tooltip
{
    text-decoration       : underline;
    text-decoration-style : dotted;
}


.table-wrapper td
{
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}


.table-wrapper.wrap-cells td
{
    overflow      : visible;
    text-overflow : unset;
    white-space   : unset;
}


.sric .table-wrapper td
{
    font-family : monospace;
    overflow    : visible;
    white-space : normal;
}


.modal-body > .p-3 > .table-wrapper
{
    max-height : calc(100vh - 50px);
}


fieldset
{

    background    : var(--connect-silver-tone);
    border-radius : 6px;
    padding       : 15px;
}


fieldset > *:first-child
{
    margin-top : 0;
}


.tabset > input
{
    display  : block; /* "enable" hidden elements in IE/edge */
    left     : -100%;
    position : absolute; /* then hide them off-screen */
}


.tabset > ul
{
    display       : flex;
    list-style    : none;
    margin-bottom : 0;
    padding       : 0;
    position      : relative;
    z-index       : 999;
}


.tabset > ul label
{
    background         : var(--connect-silver-semitone);
    border-bottom      : 2px solid;
    border-color       : transparent;
    border-right-width : 0;
    cursor             : pointer;
    display            : inline-block;
    margin             : 0 2px 0 0;
    padding            : 0.25em 1em;
}


.tabset > ul label:hover
{
    background : var(--ui-α);
}


.tabset > ul label h3, .tabset > ul label h4
{
    margin      : 0;
    opacity     : 0.5;
    font-weight : normal;
}


.tabset > ul li:first-child label
{
    border-radius : 0.5em 0 0 0;
}


.tabset > ul li:last-child label
{
    border-radius      : 0 0.5em 0 0;
    border-right-width : 1px;
}


.dependency-spinner
{
    position       : absolute;
    display        : block;
    width          : 104%;
    height         : 104%;
    top            : 50%;
    left           : 50%;
    border-top     : 1px solid var(--body-foreground);
    border-left    : 1px solid transparent;
    border-right   : 1px solid transparent;
    border-bottom  : 1px solid var(--body-foreground);
    border-radius  : 50%;
    pointer-events : none;
}


.spin
{
    transform         : translate(-50%, -50%) rotate(0deg);
    transform-origin  : center center;
    -webkit-animation : SPIN 3s linear infinite;
}


.blink
{
    opacity           : 1;
    -webkit-animation : BLINK 1s ease infinite;
}


@-webkit-keyframes BLINK
{

    50%
    {
        opacity : 0.2;
    }
}


.shake
{
    animation : SHAKE 1s cubic-bezier(.36, .07, .19, .97) both;
    transform : translateX(0);
}


.shake2
{
    animation       : SHAKE 1s cubic-bezier(.36, .07, .19, .97) both;
    animation-delay : 0.2s;
    transform       : translateX(0);
}


@keyframes SHAKE
{
    10%, 90%
    {
        transform : translateX(-0.1rem);
    }

    20%, 80%
    {
        transform : translateX(0.2rem);
    }

    30%, 50%, 70%
    {
        transform : translateX(-0.4rem);
    }

    40%, 60%
    {
        transform : translateX(0.4rem);
    }
}


.tabset > div
{
    background-color : var(--panel);
    border-radius    : 0 0.5em 0.5em 0.5em;
    position         : relative;
}


.tabset > input:nth-child(1):checked ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):checked ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):checked ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):checked ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):checked ~ ul li:nth-child(5) label,
.tabset > input:nth-child(6):checked ~ ul li:nth-child(6) label,
.tabset > input:nth-child(7):checked ~ ul li:nth-child(7) label,
.tabset > input:nth-child(8):checked ~ ul li:nth-child(8) label,
.tabset > input:nth-child(9):checked ~ ul li:nth-child(9) label
{
    background-color : var(--panel);
    border-color     : var(--ui);
}


.tabset > input:nth-child(1):checked ~ ul li:nth-child(1) label *,
.tabset > input:nth-child(2):checked ~ ul li:nth-child(2) label *,
.tabset > input:nth-child(3):checked ~ ul li:nth-child(3) label *,
.tabset > input:nth-child(4):checked ~ ul li:nth-child(4) label *,
.tabset > input:nth-child(5):checked ~ ul li:nth-child(5) label *,
.tabset > input:nth-child(6):checked ~ ul li:nth-child(6) label *,
.tabset > input:nth-child(7):checked ~ ul li:nth-child(7) label *,
.tabset > input:nth-child(8):checked ~ ul li:nth-child(8) label *,
.tabset > input:nth-child(9):checked ~ ul li:nth-child(9) label *
{
    opacity : 1;
}


.tabset > div > section
{
    display : none;
    padding : 1rem;
}


.tabset > input ~ div > section
{
    opacity    : 0;
    transition : opacity 0.3s ease-in-out;
}


.tabset > input:nth-child(1):checked ~ div > section:nth-child(1),
.tabset > input:nth-child(2):checked ~ div > section:nth-child(2),
.tabset > input:nth-child(3):checked ~ div > section:nth-child(3),
.tabset > input:nth-child(4):checked ~ div > section:nth-child(4),
.tabset > input:nth-child(5):checked ~ div > section:nth-child(5),
.tabset > input:nth-child(6):checked ~ div > section:nth-child(6),
.tabset > input:nth-child(7):checked ~ div > section:nth-child(7),
.tabset > input:nth-child(8):checked ~ div > section:nth-child(8),
.tabset > input:nth-child(9):checked ~ div > section:nth-child(9)
{
    display : block;
    opacity : 1;
}


.tabset > ul label
{
    -webkit-touch-callout : none;
    -khtml-user-select    : none;
    -moz-user-select      : none;
    -ms-user-select       : none;
    -webkit-user-select   : none;
    user-select           : none;
}


.tabset > div > section > h3:first-child
{
    margin-top : 0;
}


var, .table-download, .filter-table
{

    background : var(--connect-silver-tone);
    color      : var(--body-foreground);
    font-style : normal;
    padding    : 6px 5px;
    position   : absolute;
    margin     : 0;
}


var, .table-download
{

    border-radius : 6px 0 0 6px;
    /* color         : var(--dark); */
    min-width     : 30px;
    transform     : translateX(-100%);
}


var
{
    font-size : 80%;
    /* position : sticky; */
    top       : 0;
    /* left     : 0; */
}


var:before
{
    content : "\00D7 ";
}


.table-download
{
    /*left          : 45px;*/
}


.table-download:hover
{

    background : var(--dark);
    color      : var(--light);
}


var + .table-download
{
    padding : 2px 5px 3px 10px;
    top     : 36px;
}


td > table th
{
    position : sticky;
    z-index  : 1;
}


td > table td
{
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}


.snippet
{
    box-shadow : 0 1px 3px rgba(0, 0, 0, 0.3);
}


.card
{
    margin-bottom : 30px;
}


figure
{
    background     : var(--brand);
    border-radius  : 50%;
    color          : #FFFFFF;
    display        : inline-block;
    font-size      : 20px;
    height         : 126px;
    line-height    : 1.1;
    padding-top    : 37px;
    position       : relative;
    text-align     : center;
    vertical-align : top;
    white-space    : nowrap;
    width          : 126px;
}


figure.numeric
{

    font-size : 32px;
}


figure.sri
{
    box-shadow : 0 0 0 2px var(--sric);
}


figure.hubspot
{
    box-shadow : 0 0 0 2px var(--hubspot);
}


figure.piwik
{
    box-shadow : 0 0 0 2px var(--piwik);
}


figure.nexus
{
    box-shadow : 0 0 0 2px var(--nexus);
}


figure.access
{
    box-shadow : 0 0 0 2px var(--nexus);
}


figure.inv
{
    background : var(--body);
    color      : var(--body-foreground);
}


figcaption
{
    display     : block;
    font-size   : 12px;
    left        : 50%;
    line-height : normal;
    opacity     : 0.8;
    position    : absolute;
    bottom      : auto;
    top         : 77%;
    translate   : -50% -50%;
    white-space : normal;
    width       : 90px;
}


figure + figure
{
    margin-left : 10px;
}


.col-sm-2 figure
{
    margin           : 0 auto;
    display          : block;
    transform        : scale(0.8);
    transform-origin : top;
}


.col-sm-2 figure + figure
{
    margin-left : auto;
}


.navbar-dark, .navbar-dark .btn
{
    background-color : var(--brand) !important;
}


.navbar-brand img
{
    transform-origin : 0 50%;
    transition       : all 0.3s ease-in-out;
}


.navbar-brand i
{
    color      : rgba(255, 255, 255, 0.35);
    position   : absolute;
    top        : 50%;
    translate  : -15px -50%;
    font-size  : 150%;
    right      : 12px;
    opacity    : 0;
    scale      : 0;

    transition : all 0.3s ease-in-out;
}


.navbar-brand:hover img
{
    scale : 0.875;
}


.navbar-brand:hover i
{
    translate : 0 -50%;
    opacity   : 1;
    scale     : 1;
}


.navbar-brand, .sidebar
{
    flex      : 0 0 320px !important;
    max-width : 320px !important;
    width     : 320px !important;
}


main
{
    flex      : 0 0 calc(100% - 320px) !important;
    max-width : calc(100% - 320px) !important;
}


.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active
{
    background-color : var(--ui);
    border-color     : var(--ui);
    box-shadow       : none;
    color            : #FFFFFF !important;
    font-weight      : var(--title-font-weight);
    text-align       : left;
}


.btn-primary:hover
{
    box-shadow : 0 0 0 3px var(--ui-α);
}


.form-control-search
{
    display : none;
}


.active
{
    background-color : var(--connect-grass);
    color            : #FFFFFF;
    border-color     : #FFFFFF;
}


.dz.active:hover
{
    border-color : #FFFFFF;
}


figure.active
{
    background-color : inherit;
    box-shadow       : 0 0 0 2px var(--body), 0 0 0 3px var(--body-foreground);
}


.sidebar-sticky
{
    height          : calc(100vh - 55px);
    overflow-x      : hidden;
    overflow-y      : auto; /* Scrollable contents if viewport is shorter than content. */
    padding-top     : .5rem;
    position        : -webkit-sticky;
    position        : sticky;
    scroll-behavior : smooth;
    top             : 55px; /* Height of navbar */
}


.sidebar-sticky form
{
    margin : 0 1rem;
}


.sidebar-sticky form p
{

}


.sidebar-sticky form p:last-child
{
    margin : 0;
}


.sidebar-sticky input
{
    width : 100%;
}


.sidebar-sticky #search
{
    margin : 0 15px;
    width  : 280px;
}


#output-wrap
{
    position : relative;
}


#spinner, .wait:before, #output > label:only-child
{
    display   : block;
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%) rotate(0);
    z-index   : 101;
}


#spinner, .wait:before
{
    -moz-animation    : SPIN 3s linear infinite;
    -webkit-animation : SPIN 3s linear infinite;
    animation         : SPIN 3s linear infinite;
    background        : url(../images/turbine.png) no-repeat;
    background-size   : 100%;
    display           : none;
    height            : 180px;
    transform-origin  : center center;
    width             : 180px;
}


.wait:before
{
    content : " ";
    display : block;
    z-index : 111;
}


.wait:after
{
    content          : " ";
    display          : block;
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : var(--body);
    transition       : background-color 0.3s ease-in-out;
    opacity          : 0.75;
    z-index          : 110;
}


#output-wrap #output:empty ~ #spinner
{
    display : block;
}


#errors:empty
{
    display : none;
}


.log_last
{
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, 100px);
    width      : 80%;
    text-align : center;
    display    : none;
}


#output-wrap #output:empty ~ .log_last
{
    display : block;
}


.bi-hubspot
{
    background-image  : url(../images/hubspot.png);
    background-repeat : no-repeat;
    background-size   : contain;
    color             : var(--hubspot);
    display           : inline-block;
    height            : 1.1em;
    vertical-align    : middle;
    width             : 1.1em;
}


/*
 * Sidebar
 */

.arrow-down
{
    display      : block;
    position     : absolute;
    width        : 0;
    height       : 0;
    border-left  : 10px solid transparent;
    border-right : 10px solid transparent;
    border-top   : 10px solid var(--ui);
    left         : 50%;
    transform    : translateX(-50%);
}


.sidebar
{
    background : var(--x-light);
    bottom     : 0;
    box-shadow : inset -1px 0 0 rgba(0, 0, 0, .1);
    left       : 0;
    padding    : 0;
    position   : fixed;
    top        : 0;
    z-index    : 100; /* Behind the navbar */
}


.sidebar .nav-link
{
    color       : var(--dark);
    padding     : 4px 15px;
    position    : relative;
    transition  : background 0.3s ease-in-out;
    display     : flex;
    gap         : 0 10px;
    align-items : center;
}


.sidebar .nav-link.nav-link-admin-1, .sidebar .nav-link.nav-link-admin-1:hover
{
    color : var(--connect-orange);
}


.sidebar .nav-link.nav-link-admin-1 aside q.process
{

    box-shadow : inset 0 0 0 1px var(--connect-orange);
    color      : var(--connect-orange);
}


.sidebar .nav-link.nav-link-admin-1 aside q sub
{

    background : var(--connect-orange);
}


.sidebar .nav-link[href]:hover:not(.active)
{
    background-color : var(--connect-silver-semitone);
}


.sidebar .nav-link.active
{
    background : var(--ui-αα);
}


.sidebar .nav-link.active.loaded
{
    background : var(--ui-α);
}


.sidebar .nav-link > i:first-child
{
    background     : var(--light);
    border-radius  : 50%;
    display        : inline-block;
    font-size      : 20px;
    height         : 32px;
    margin-right   : 4px;
    padding        : 4px;
    text-align     : center;
    vertical-align : -5px;
    visibility     : hidden;
    width          : 32px;
}


.sidebar .nav-link > i:first-child:before
{
    vertical-align : unset;
}


.sidebar .nav-link aside
{
    /*display  : none;*/
    left     : 15px;
    position : absolute;
}


.sidebar .nav-link aside q
{
    background  : var(--mid);
    color       : var(--x-light);
    font-size   : 120%;
    height      : 32px;
    line-height : 32px;
    padding     : 0;
    width       : 32px;
}


.sidebar .nav-link aside q sub
{
    background : var(--mid);
    bottom     : 0;
    color      : var(--body);
    font-size  : 65%;
}


.sidebar .nav-link aside q.process
{

    background : transparent;
    box-shadow : inset 0 0 0 1px var(--mid);
    color      : var(--mid);
}


.sidebar-heading
{
    font-size      : .75rem;
    text-transform : uppercase;
}


/*
 * Navbar
 */

.navbar-brand
{
    background-color : var(--brand-darker);
    box-shadow       : inset -1px 0 0 rgba(0, 0, 0, .25);
    font-size        : 1rem;
    padding-bottom   : .75rem;
    padding-top      : .75rem;
}


.navbar .form-control
{
    border-radius : 0;
    border-width  : 0;
    padding       : .75rem 1rem;
}


.form-control-dark
{
    background-color : rgba(255, 255, 255, .1);
    border-color     : rgba(255, 255, 255, .1);
    color            : #FFFFFF;
}


.form-control-dark:focus
{
    border-color : transparent;
    box-shadow   : 0 0 0 3px rgba(255, 255, 255, .25);
}


/*
 * Utilities
 */

.border-top
{
    border-top : 1px solid #E5E5E5;
}


.border-bottom
{
    border-bottom : 1px solid #E5E5E5;
}


#register-title-page > div
{
    border        : 1px solid var(--brand);
    border-radius : var(--spacer);
    padding       : var(--spacer);
}


#register-title-page img
{
    margin : 0 auto 60px;
    width  : 40%;
}


#register-title-page .panel
{
    margin : 2cm calc(var(--spacer) * -1) 2cm;
}


a[name="asset_managers_owners_firms"] + table th:nth-child(2)
{
    width : 12.5%;
}


@-moz-keyframes SPIN
{
    100%
    {
        -moz-transform : translate(-50%, -50%) rotate(360deg);
    }
}


@-webkit-keyframes SPIN
{
    100%
    {
        -webkit-transform : translate(-50%, -50%) rotate(360deg);
    }
}


@keyframes SPIN
{
    100%
    {
        -webkit-transform : translate(-50%, -50%) rotate(360deg);
        transform         : translate(-50%, -50%) rotate(360deg);
    }
}


.infographic-table td
{
    /*text-align : center;*/
}


.tab
{
    border-radius : 4px;
    overflow      : hidden;
    width         : 100%;
}


.tab + .tab
{
    margin-top : 5px;
}


.tab > input[type="checkbox"]
{
    opacity  : 0;
    position : absolute;
    z-index  : -1;
}


.tab-label
{
    background      : var(--mid);
    cursor          : pointer;
    display         : flex !important;
    font-weight     : var(--title-font-weight);
    justify-content : space-between;
    margin-bottom   : 0;
    padding         : 10px;
    padding-left    : 20px;
}


.tab.tab-empty .tab-label span
{
    opacity : 0.25;
}


.tab-label > h3
{
    margin : 0;
    color  : var(--ui);
}


.tab-label > i
{
    color       : var(--ui);
    font-size   : 19px;
    line-height : 0.9;
    transition  : transform 0.3s ease-in-out;
}


.tab-label > aside
{
    flex-grow    : 1;
    text-align   : right;
    margin-right : 10px;
}


.tab-label:hover
{
    background-color : var(--ui-αα);
}


.tab.tab-empty .tab-label i
{
    color : var(--blockquote);
}


.tab-label:before,
.tab-label:after
{
    display : none !important;
}


.tab-content
{
    background : white;
    max-height : 0;
    /* color      : #2C3E50; */
    overflow   : auto;
    padding    : 0 10px 0 25px;
    transition : max-height 0.6s;
}


.tab-content > *:first-child
{
    margin-top  : 0;
    padding-top : 5px;
}


.tab-content > *:last-child
{
    margin-bottom  : 0;
    padding-bottom : 5px;
}


input:checked + .tab-label i
{
    transform : rotate(45deg);
}


input:checked ~ .tab-content
{
    max-height : 100vh;
    padding    : 3px 10px 3px 25px;
}


blockquote .tab-label, .tabset .tab-label
{
    background-color : var(--connect-silver-tone);
    /* color      : #333333; */
    padding          : 4px 10px;
    color            : var(--body-foreground-bright);
}


blockquote .tab-label:hover, .tabset .tab-label:hover
{
    background : rgba(0, 0, 0, 0.125);
}


blockquote .tab-content, .tabset .tab-content
{
    background-color : var(--connect-silver-semitone);
}


.read-out, .info
{

    background : var(--ui-α);
    padding    : 10px;
}


.read-out
{
    font-family : Consolas, monospace;
    white-space : pre;
}


.btn
{
    border-color : var(--ui);
    color        : var(--ui);
}


.btn-primary.focus, .btn-primary:focus
{
    box-shadow : 0 0 0 0.2rem rgba(0, 172, 161, 0.5);
}


.btn[disabled]
{
    border-color   : var(--ui-α) !important;
    color          : var(--ui-α) !important;
    pointer-events : none;
}


label + .btn
{
    padding : 10px;
}


.ui-autocomplete
{
    height     : 20vh;
    max-height : 30vh;
    /* position: sticky; */
    overflow-y : scroll;
    /* overflow: visible; */
    z-index    : 2001;
}


.ui-menu
{
    background-color : var(--connect-teal-αα);
}


.ui-menu .ui-menu-item-wrapper
{
    color : var(--body-foreground);
}


.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover
{
    background : var(--ui);
    border     : none;
    color      : #FFFFFF;
}


.template_ref
{
    display     : none;
    font-family : monospace;
    font-size   : 11px;
    opacity     : 0.4;

    padding     : 2px 0 2px 1rem;
}


#output .template_ref
{
    display : block;
}


#output .bg + .template_ref, #output iframe + .template_ref
{
    display : none;
}


.bg blockquote
{
    border-left-color : #F0F0F0;
    color             : #F0F0F0;
}


.bg blockquote:before
{
    background-color : var(--connect-silver-tone);
}


.filter-table
{
    transform        : translate(0, calc(-100% - 0px));
    border-radius    : 6px 6px 0 0;
    background-color : var(--ui-αα);
}


.filter-table input
{
    display : inline;
    padding : 0 4px !important;
    width   : 130px !important;
}


.filter-table + table td.alt
{
    background : var(--ui-α);
}


tr[data-flags="highlight"]
{
    background-color : var(--ui-α);
}


#tinymce-toolbar-container
{
    position : absolute;
}


[data-service]
{
    cursor : pointer;
}


[data-service]:not(.btn):not(button)
{
    color : var(--ui);
}


article[data-edit]
{
    position      : relative;
    padding-left  : 5px;
    padding-right : 22px;
    min-width     : 100px;
    min-height    : 31px;
}


article[data-edit] h3
{
    margin      : 5px 0;
    font-weight : normal;
    font-size   : 18px;
}


article[data-edit] ul
{
    list-style-position : outside;
    padding-left        : 16px;
}


td article[data-edit]
{
    min-height : 1.55em;
}


article[data-edit]:hover
{
    box-shadow : 0 0 0 1px var(--ui-α);
}


article[data-edit]:after
{
    color       : var(--ui);
    content     : "\F4CA";
    font-family : bootstrap-icons;
    position    : absolute;
    top         : 2px;
    right       : 5px;
    font-size   : 13px;
    font-weight : normal;
}


article[data-edit][data-edit-dirty="1"]
{
    box-shadow : 0 0 0 3px var(--ui) !important;
}


article[data-edit].mce-edit-focus, article[data-edit].mce-edit-focus:hover
{
    outline    : none;
    box-shadow : 0 0 0 3px var(--ui-α);
}


.tox, .tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea, .tox .tox-textfield, .tox .tox-toolbar-textfield, .tox .tox-button,
.tox .tox-dialog__title
{
    font-family : var(--font) !important;
}


.tox .tox-button
{
    background-color : var(--ui) !important;
}


.tox-tinymce
{
    border-radius   : 0 !important;
    transform       : translate(-3px, 0);
    backdrop-filter : blur(4px);
}


.tox.tox-tinymce-inline
{
    z-index   : 9999;
    translate : 0 -3px;
}


.tox.tox-tinymce-inline .tox-editor-header
{
    border           : none !important;
    border-radius    : 0 !important;
    background-color : var(--ui-α) !important;
}


.tox .tox-toolbar-overlord
{
    background-color : transparent !important;
}


.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary
{
    background-color : transparent !important;
}


.tox .tox-tbtn__select-label
{
    color : #FFFFFF;
}


.tox .tox-toolbar__group
{
    padding : 0 !important;
}


.tox .tox-tbtn
{
    margin        : 0 !important;
    border-radius : 0 !important;
    height        : 25px !important;
}


.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover, .tox .tox-tbtn:hover
{
    background : var(--ui) !important;
}


.tox .tox-tbtn svg
{
    fill : var(--body-foreground) !important;;
}


.tox .tox-tbtn--disabled .tox-icon,
.tox .tox-tbtn--disabled:hover .tox-icon,
.tox .tox-tbtn:disabled .tox-icon,
.tox .tox-tbtn:disabled:hover .tox-icon
{
    fill    : var(--body-foreground) !important;
    opacity : 0.35;
}


.tox .tox-menu, .tox-tinymce-aux, .tox .tox-dialog-wrap, .tox .tox-dialog
{
    z-index : 99999 !important;
}


.tox .tox-tbtn[title="Save"]
{
    width : 40px;
}


.tox .tox-tbtn[title="Save"] .tox-icon:before
{
    content       : "Save";
    color         : var(--body-foreground);
    font-size     : 12px;
    padding       : 1px 4px;
    border-radius : 20px;
    display       : inline-block;
    box-shadow    : 0 0 0 1px var(--body-foreground);
}


.tox .tox-tbtn[title="Save"] svg
{
    display : none;
}


.toolbar
{
    width          : 100%;
    display        : flex;
    flex-direction : row;
}


.toolbar + .toolbar
{
    margin-top : 4px;
}


.toolbar h3
{
    margin : 0;
}


.toolbar fieldset
{
    padding    : 3px 10px;
    background : var(--ui-α);
}


.toolbar fieldset.date-from-to
{
    min-width   : 320px;
    white-space : nowrap;
}


/*.toolbar fieldset:last-child*/
.toolbar > *:last-child
{
    flex-grow : 1;
}


.toolbar fieldset label
{
    display       : inline-block;
    margin-bottom : 0;
    line-height   : 28px;
}


.toolbar fieldset input:not([type="checkbox"]):not([type="radio"]), .toolbar fieldset select
{
    padding : 2px 3px;
    width   : auto;
    height  : 27px;
}


.toolbar fieldset input[type="radio"], .toolbar fieldset input[type="checkbox"]
{
    height         : 1.1em;
    width          : 1.1em;
    margin-right   : 3px;
    vertical-align : -2px;
}


.auto-multi-select select
{

    overflow   : visible;
    font-size  : 19px;
    margin     : 0 10px;
    width      : calc(100% - 20px);
    min-height : 35px;
    background : none;
}


.auto-multi-select select optgroup, .auto-multi-select select option
{
    padding-top    : 5px;
    padding-bottom : 5px;
    cursor         : pointer;
}


.auto-multi-select select option + *
{
    border-top : 1px dotted var(--ui);
}


.auto-multi-select select option:hover,
.auto-multi-select select option:hover:checked
{
    background : var(--ui-α) linear-gradient(0deg, var(--ui-α) 0%, var(--ui-α) 100%) !important;
}


.auto-multi-select select option:focus option:checked,
.auto-multi-select select option:checked
{
    background : var(--ui-αα) linear-gradient(0deg, var(--ui-αα) 0%, var(--ui-αα) 100%) !important;
    color      : var(--body-foreground);
}


svg.svgx, .placeholder-svgx
{

    border-radius : 4px;
    max-width     : 1200px;
    max-height    : 89.6vh;
}


.placeholder-svgx
{
    width            : 100%;
    height           : 100%;
    background-color : var(--panel);
    position         : relative;
}


svg.svgx
{
    border     : 5px solid #FFFFFF;
    background : #FFFFFF;
}


svg.svgx a > path:hover
{
    /*fill-opacity : 1;
    fill         : red;*/
    stroke        : var(--connect-teal);
    stroke-width  : 4px;
    outline       : var(--connect-teal);
    outline-width : 4px;
    transition    : stroke 0.4s;
}


.meta-edit
{
    position         : absolute;
    left             : calc(100% - 5px);
    bottom           : 0;
    padding          : 5px 5px 5px 0;
    background-color : var(--panel);
    z-index          : 101;
    text-decoration  : none;
}


.meta-edit:after
{
    color       : var(--ui);
    content     : "\F4CA";
    font-family : bootstrap-icons;
    font-size   : 13px;
    font-weight : normal;
}


@media print
{
    :root
    {
        --spacer : 1cm;
    }

    main.ml-sm-auto
    {
        flex        : none !important;
        max-width   : 100% !important;
        width       : 100% !important;
        margin-left : 0 !important;
    }

    #page
    {
        margin : 0 !important;
    }

    #page > nav
    {
        display          : block;
        background-color : transparent !important;
        color            : #000000;
    }

    #title, #pushed-controls
    {
        color : #000000;
    }

    #toast,
    #toggle-full,
    #log-toggle, #log, label[for="log-toggle"],
    #errors:empty,
    article[data-edit]:after,
    .template_ref,
    .navbar-brand,
    .d-md-block,
    .table-download,
    .filter-table,
    .tab-label > i,
    .meta-edit
    {
        display : none !important;
    }

    .modal-backdrop
    {
        right : 20px;
    }


    #output.table-wrap
    {
        overflow : visible;
        height   : auto;
    }

    .tab-content
    {
        max-height : none;
        overflow   : visible;
    }

    .tabset > div > section
    {
        display : block;
        opacity : 1;
    }
}