/*
    DJANGO Admin styles
*/

/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    --primary: #155a96;
    --primary-light: #155a96ab;

    --secondary: #fff;
    --tertiary: #707eae;  /* #a4a8d1 */
    --message-success: rgb(61, 199, 99);

    --input-bg: #f8f8f8;
    --input-bg-disabled: #ecececb0;
    --accent: #004c98;
    --primary-fg: #fff;

    --text-primary: #fff;

    --search-bar: #f4f7fe;
    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --header-color: #fff;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--tertiary);

    --breadcrumbs-fg: var(--primary);
    --breadcrumbs-link-fg: var(--tertiary);
    --breadcrumbs-bg: var(--secondary);

    --link-fg: var(--tertiary);
    --link-hover-color: var(--primary);
    --link-selected-fg: #5b80b2;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: var(--primary);
    --default-button-bg: var(--primary);
    --default-button-hover-bg: #205067;
    --close-button-bg: var(--primary);
    --close-button-hover-bg: var(--primary);
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --font-family-primary:
        "NunitoSans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace:
        ui-monospace,
        Menlo,
        Monaco,
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Oxygen Mono",
        "Ubuntu Monospace",
        "Source Code Pro",
        "Fira Mono",
        "Droid Sans Mono",
        "Courier New",
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-family: var(--font-family-primary);
    color: var(--body-fg);
    background: var(--body-bg);
}

/* LINKS */

a:link, a:visited {
    color: var(--link-fg);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

a:focus, a:hover {
    color: var(--link-hover-color);
}

a:focus {
    text-decoration: underline;
}

a img {
    border: none;
}

a.section:link, a.section:visited {
    color: var(--header-link-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s, background 0.15s;
}

a.section:focus, a.section:hover {
    text-decoration: none;
    color: var(--link-fg);
}

/* GLOBAL DEFAULTS */

p, ol, ul, dl {
    margin: .2em 0 .8em 0;
}

p {
    padding: 0;
    line-height: 140%;
}

h1,h2,h3,h4,h5 {
    font-weight: bold;
}

h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 1.25rem;
    color: var(--body-quiet-color);
}

h2 {
    font-size: 1rem;
    margin: 1em 0 .5em 0;
}

h2.subhead {
    font-weight: normal;
    margin-top: 0;
}

h3 {
    font-size: 0.875rem;
    margin: .8em 0 .3em 0;
    color: var(--body-quiet-color);
    font-weight: bold;
}

h4 {
    font-size: 0.75rem;
    margin: 1em 0 .8em 0;
    padding-bottom: 3px;
}

h5 {
    font-size: 0.625rem;
    margin: 1.5em 0 .5em 0;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

ul > li {
    list-style-type: square;
    padding: 1px 0;
}

li ul {
    margin-bottom: 0;
}

li, dt, dd {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

dt {
    font-weight: bold;
    margin-top: 4px;
}

dd {
    margin-left: 0;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--hairline-color);
}

blockquote {
    font-size: 0.6875rem;
    color: #777;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 5px solid #ddd;
}

code, pre {
    font-family: var(--font-family-monospace);
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    overflow-x: auto;
}

pre.literal-block {
    margin: 10px;
    background: var(--darkened-bg);
    padding: 6px 8px;
}

code strong {
    color: #930;
}

hr {
    clear: both;
    color: var(--hairline-color);
    background-color: var(--hairline-color);
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

/* TEXT STYLES & MODIFIERS */

.small {
    font-size: 0.6875rem;
}

.mini {
    font-size: 0.625rem;
}

.help, p.help, form p.help, div.help, form div.help, div.help li {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}

div.help ul {
     margin-bottom: 0;
}

.help-tooltip {
    cursor: help;
}

p img, h1 img, h2 img, h3 img, h4 img, td img {
    vertical-align: middle;
}

.quiet, a.quiet:link, a.quiet:visited {
    color: var(--body-quiet-color);
    font-weight: normal;
}

.clear {
    clear: both;
}

.nowrap {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}


/* TABLES */

table {
    border-collapse: collapse;
    border-color: var(--primary);
}

td, th {
    font-size: 0.8125rem;
    line-height: 1rem;
    border-bottom: 1px solid var(--primary);
    padding: 8px;
}

th {
    font-weight: 600;
    text-align: left;
}

thead th,
tfoot td {
    color: var(--text-primary);
    padding: 5px 10px;
    font-size: 0.6875rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-right: 1px solid var(--secondary);
}

tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--hairline-color);
}

td, th:last-child {
    border-bottom: none;
    border: 1px solid var(--primary);
    border-right: 1px solid var(--primary);
}

thead th.required {
    color: var(--text-primary);
}

tr.alt {
    background: var(--secondary);
}

tr:nth-child(odd), .row-form-errors {
    background: var(--secondary);
}

tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
    background: var(--secondary);
}

tr {
    border-right: 1px solid var(--primary);
}

/* SORTABLE TABLES */

thead th {
    padding: 5px 10px;
    line-height: normal;
    text-transform: uppercase;
    background: var(--primary);
}

thead th a:link, thead th a:visited {
    color: var(--text-primary);
}

thead th.sorted {
    background: var(--primary);
}

thead th.sorted .text {
    padding-right: 42px;
}

table thead th .text span {
    /*padding: 8px 10px;*/
     padding: 1rem 1rem;
    display: block;
}

table thead th .text a {
    display: block;
    cursor: pointer;
    padding: 1rem 1rem;
}

table thead th .text a:focus, table thead th .text a:hover {
    background: var(--primary);
}

thead th.sorted a.sortremove {
    visibility: hidden;
}

table thead th.sorted:hover a.sortremove {
    visibility: visible;
}

table thead th.sorted .sortoptions {
    display: block;
    padding: 9px 5px 0 5px;
    float: right;
    text-align: right;
}

table thead th.sorted .sortpriority {
    font-size: .8em;
    min-width: 12px;
    text-align: center;
    vertical-align: 3px;
    margin-left: 2px;
    margin-right: 2px;
}

table thead th.sorted .sortoptions a {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../img/sorting-icons.svg) 0 0 no-repeat;
    background-size: 14px auto;
}

table thead th.sorted .sortoptions a.sortremove {
    background-position: 0 0;
}

table thead th.sorted .sortoptions a.sortremove:after {
    content: '\\';
    position: absolute;
    top: -6px;
    left: 3px;
    font-weight: 200;
    font-size: 1.125rem;
    color: var(--secondary);
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
    color: var(--secondary);
}

table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
    background-position: 0 -14px;
}

table thead th.sorted .sortoptions a.ascending {
    background-position: 0 -28px;
}

table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
    background-position: 0 -42px;
}

table thead th.sorted .sortoptions a.descending {
    top: 1px;
    background-position: 0 -56px;
}

table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
    background-position: 0 -70px;
}

/* FORM DEFAULTS */

input, textarea, select, .form-row p, form .button {
    margin: 2px 0;
    padding: 2px 3px;
    vertical-align: middle;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 0.8125rem;
}
.form-row div.help {
    padding: 2px 3px;
}

textarea {
    vertical-align: top;
}

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=file], textarea, select, .vTextField {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=file]:focus,
textarea:focus, select:focus, .vTextField:focus {
    border-color: var(--body-quiet-color);
}

select {
    height: 1.875rem;
}

select[multiple] {
    /* Allow HTML size attribute to override the height in the rule above. */
    height: auto;
    min-height: 150px;
}

/* FORM BUTTONS */

.button, input[type=submit], input[type=button], input[type=file]::file-selector-button, .submit-row input, a.button {
    background: var(--button-bg);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: var(--button-fg);
    cursor: pointer;
    transition: background 0.15s;
}

a.button {
    padding: 0.35rem 1rem;
    font-weight: bold;
}

.button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
.button:hover, input[type=submit]:hover, input[type=button]:hover,
 input[type=file]::file-selector-button:active,
 input[type=file]::file-selector-button:focus,
 input[type=file]::file-selector-button:hover {
    background: var(--button-hover-bg);
}

.button[disabled], input[type=submit][disabled], input[type=button][disabled], input[type=file][disabled]::file-selector-button {
    opacity: 0.6;
    cursor: default;
}

.button.default, input[type=submit].default, .submit-row input.default {
    border: none;
    font-weight: 400;
    background: var(--default-button-bg);
}

.button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover {
    background: var(--default-button-hover-bg);
}

.button[disabled].default,
input[type=submit][disabled].default,
input[type=button][disabled].default {
    opacity: 0.4;
}


/* MODULES */

.module {
    border: none;
    margin-bottom: 30px;
    background: var(--body-bg);
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 10px;
    padding-right: 10px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul, .module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2, .module caption, .inline-group h2 {
    margin: 0;
    padding: 8px;
    font-weight: 400;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--primary);
    color: var(--header-link-color);
}

.module caption,
.inline-group h2 {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.module table {
    border-collapse: collapse;
}

/* MESSAGES & ERRORS */

ul.messagelist {
    padding: 0;
    margin: 0;
}

ul.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    padding: 10px 10px 10px 65px;
    margin: 0 0 10px 0;
    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
    background-size: 16px auto;
    color: var(--body-fg);
    word-break: break-word;
}

ul.messagelist li.warning {
    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
    background-size: 14px auto;
}

ul.messagelist li.error {
    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
    background-size: 16px auto;
}

.errornote {
    font-size: 0.875rem;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
    border-radius: 4px;
    background-color: var(--body-bg);
    background-position: 5px 12px;
    overflow-wrap: break-word;
}

ul.errorlist {
    margin: 0 0 4px;
    padding: 0;
    color: var(--error-fg);
    background: var(--body-bg);
}

ul.errorlist li {
    font-size: 0.8125rem;
    display: block;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

ul.errorlist li:first-child {
    margin-top: 0;
    width: 250px;
}

ul.errorlist li a {
    color: inherit;
    text-decoration: underline;
}

td ul.errorlist {
    margin: 0;
    padding: 0;
}

td ul.errorlist li {
    margin: 0;
}

.form-row.errors {
    margin: 0;
    border: none;
    background: none;
}

.form-row.errors ul.errorlist li {
    padding-left: 0;
}

.errors input, .errors select, .errors textarea,
td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
    border: 1px solid var(--error-fg);
}

.description {
    font-size: 0.75rem;
    padding: 5px 0 0 12px;
}

/* BREADCRUMBS */


div.breadcrumbs {
    background: var(--breadcrumbs-bg);
    padding: 10px 0px;
    border: none;
    color: var(--breadcrumbs-fg);
    text-align: left;
}

div.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
    pointer-events: none;
}

div.breadcrumbs a:link, div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: var(--tertiary) !important;
}

div.breadcrumbs .app_name {
    color: var(--tertiary) !important;
}

div.breadcrumbs .model_name {
    font-size: 2rem;
    font-weight: bold;
}

/* ACTION ICONS */

.viewlink, .inlineviewlink {
    padding-left: 16px;
    background: url(../img/icon-viewlink.svg) 0 1px no-repeat;
}


.changelink, .inlinechangelink {
    padding-left: 16px;
    background: url(../img/icon-changelink.svg) 0 1px no-repeat;
}

.deletelink {
    padding-left: 16px;
    background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
}

a.deletelink:link, a.deletelink:visited {
    color: #CC3434; /* XXX Probably unused? */
}

a.deletelink:focus, a.deletelink:hover {
    color: #993333; /* XXX Probably unused? */
    text-decoration: none;
}

/* TOOLBAR */

#toolbar {
    padding: 8px 0 8px 0;
    margin-bottom: 15px;
    color: var(--body-quiet-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.25rem;
}

.left {
    display: flex;
    align-items: center;
}

.right {
    display: flex;
    align-items: center;
}

#changelist-search input[type="text"] {
    border: 1px solid transparent;
    border-radius: 1rem 0.5rem 0.5rem 1rem;
    background: transparent;
    margin: 0;
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    max-width: 10rem;
    color: inherit;
}

#changelist-search input[type="submit"] {
    text-indent: -999px;
    overflow: hidden;
    width: 2.2rem;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' %0Afill='%23000000bb' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    cursor: pointer;
    opacity: 0.7;
}

#changelist-search input[type="submit"]:hover {
    opacity: 1;
}

#changelist-search input[type="submit"]:focus,
#changelist-search input[type="text"]:focus {
    box-shadow: 0 0 3px 0 var(--primary);
    border-color: var(--primary);
    outline: none;
}

/* OBJECT TOOLS */

.object-tools {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.625rem;
    font-weight: bold;
    margin: 0 !important;
    height: 100%;
}

.object-tools li {
    display: block;
    margin-left: 5px;
    height: 100%;
}

.object-tools a {
    height: 100%;
    border-radius: 15px;
    padding: 0.5rem 0.75rem;
}

.object-tools a:link, .object-tools a:visited {
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-weight: bold;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.object-tools a:focus, .object-tools a:hover {
    background-color: var(--object-tools-hover-bg);
}

.object-tools a:focus{
    text-decoration: none;
}

.object-tools a.viewsitelink, .object-tools {
    background-repeat: no-repeat;
    background-position: right 7px center;
}

.object-tools a.viewsitelink {
    background-image: url(../img/tooltag-arrowright.svg);
}

/* OBJECT HISTORY */

#change-history table {
    width: 100%;
}

#change-history table tbody th {
    width: 16em;
}

#change-history .paginator {
    color: var(--body-quiet-color);
    border-bottom: 1px solid var(--hairline-color);
    background: var(--body-bg);
    overflow: hidden;
}

/* PAGE STRUCTURE */

#container {
    position: relative;
    width: 100%;
    min-width: 980px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#container > div {
    flex-shrink: 0;
}

#container > .main {
    display: flex;
    flex: 1 0 auto;
}

.main > .content {
    flex:  1 0;
    max-width: 100%;
}

.skip-to-content-link {
    position: absolute;
    top: -999px;
    margin: 5px;
    padding: 5px;
    background: var(--body-bg);
    z-index: 1;
}

.skip-to-content-link:focus {
    left: 0px;
    top: 0px;
}

#content {
    padding: 10px 40px;
}

.dashboard #content {
    width: 600px;
}

#content-main {
    float: left;
    width: 100%;
}

#content-related {
    float: right;
    width: 260px;
    position: relative;
    margin-right: -300px;
}

#footer {
    clear: both;
    padding: 10px;
}

/* COLUMN TYPES */

.colMS {
    margin-right: 300px;
}

.colSM {
    margin-left: 300px;
}

.colSM #content-related {
    float: left;
    margin-right: 0;
    margin-left: -300px;
}

.colSM #content-main {
    float: right;
}

.popup .colM {
    width: auto;
}

/* HEADER */

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    /* justify-content:flex-end; */
    align-items: center;
    padding: 10px 40px;
    background: var(--header-bg);
    color: var(--header-color);
    /* overflow: hidden; */
}
/*
#header a:link, #header a:visited, #logout-form button {
    color: var(--header-link-color);
}
*/

#header a:focus , #header a:hover {
    text-decoration: underline;
}

#branding {
    display: flex;
    align-items: center;
    justify-content: center
}

#branding img {
    height: 88px;
}

#branding h1 {
    padding: 0;
    margin: 0;
    margin-inline-end: 20px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--header-branding-color);
    padding: 0.35rem;
}

#branding h1 a {
    font-weight: bold;
    font-size: 2rem;
}

#branding h1 a:link, #branding h1 a:visited {
    color: var(--accent);
}

#branding h2 {
    padding: 0 10px;
    font-size: 0.875rem;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: var(--header-color);
}

#branding a:hover {
    text-decoration: none;
}

#logout-form {
    display: inline;
}

#logout-form button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family-primary);
}

#user-tools {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 20px;
    text-align: right;
    color: var(--primary);
}

#user-tools img {
  max-width: 2.7rem;
  vertical-align: middle;
}

#user-tools  .welcome_msg {
  display: flex;
  align-items: center;

  margin-left: 5px;
  border: 1px solid var(--primary);
  padding: 0.6rem;
  border-radius: 5px;
  cursor: pointer;
}

#user-tools, #logout-form button{
    padding: 0;
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--primary);
}

#user-tools a, #logout-form button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#user-tools a:focus, #user-tools a:hover,
#logout-form button:active, #logout-form button:hover {
    text-decoration: none;
    border-bottom: 0;
}

#logout-form button:active, #logout-form button:hover {
    margin-bottom: 1px;
}

.welcome-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;

    background-color: #fff;
    margin-left: 5px;
    margin-top: 2px;
    text-align: left;
    border: 1px solid var(--primary);
    border-radius: 0 0 0.5rem 0.5rem ;
    z-index: 100!important;
    width: 95.5%;
}

#user-tools .dropdown-content button {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* CUSTOM DOWN ARROW */

#user-tools .welcome_msg .arrow {
  border: solid var(--primary);
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  margin: 0rem 0rem 0.25rem 0.75rem;
}

#user-tools .welcome_msg .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* SIDEBAR */

#content-related {
    background: var(--darkened-bg);
}

#content-related .module {
    background: none;
}

#content-related h3 {
    color: var(--body-quiet-color);
    padding: 0 16px;
    margin: 0 0 16px;
}

#content-related h4 {
    font-size: 0.8125rem;
}

#content-related p {
    padding-left: 16px;
    padding-right: 16px;
}

#content-related .actionlist {
    padding: 0;
    margin: 16px;
}

#content-related .actionlist li {
    line-height: 1.2;
    margin-bottom: 10px;
    padding-left: 18px;
}

#content-related .module h2 {
    background: none;
    padding: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 1.125rem;
    color: var(--body-fg);
}

.delete-confirmation form input[type="submit"] {
    background: var(--delete-button-bg);
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
}

.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover {
    background: var(--delete-button-hover-bg);
}

.delete-confirmation form .cancel-link {
    display: inline-block;
    vertical-align: middle;
    height: 0.9375rem;
    line-height: 0.9375rem;
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
    background: var(--close-button-bg);
    margin: 0 0 0 10px;
}

.delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover {
    background: var(--close-button-hover-bg);
}

/* POPUP */
.popup #content {
    padding: 20px;
    z-index: 99;
}

.popup #container {
    min-width: 0;
}

.popup #header {
    padding: 10px 20px;
}

/* PAGINATOR */

.paginator {
    font-size: 0.8125rem;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 22px;
    margin: 0;
    border-top: 1px solid var(--hairline-color);
    width: 100%;
}

.paginator a:link, .paginator a:visited {
    padding: 4px 8px;
    background: #fff;
    text-decoration: none;
    color: var(--primary);
    border-radius: 4px;
}

.paginator a.page-arrow-btn {
    padding: 4px 4px;
}

.paginator a.showall {
    border: none;
    background: none;
    color: var(--link-fg);
}

.paginator a.showall:focus, .paginator a.showall:hover {
    background: none;
    color: var(--link-hover-color);
}

.paginator .end {
    /* margin-right: 6px; */
}

.paginator .this-page {
    padding: 4px 8px;
    font-weight: bold;
    font-size: 0.8125rem;
    vertical-align: top;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
}

.paginator a:focus, .paginator a:hover {
    color: white;
    background: var(--link-hover-color);
}

.base-svgs {
    display: none;
}

.paginator .disabled, .paginator .disabled:hover {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: gray;
}

.admin-filter-MemberType select {
  height: 36px;
  width: 9rem;
  border: 1px solid var(--primary);
  font-size: 0.9rem;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.Missing-Details {
    text-align: left;
    color: var(--primary);
    font-family: var(--font-family-primary);
}

.Missing-Details p {
    margin: 5px 0;
    margin-bottom: 15px;
}

.Missing-Details label {
    display: block;
    margin-bottom: 5px;

}


.confirmation-button {
    margin-top: 10px;
    text-align: center !important;
}


.Missing-Details input[type="button"] , .Update-Contact-Numbers input[type="button"]{
    background:red;
    cursor: pointer;
}

.Missing-Details input[type="radio"] , .Update-Contact-Numbers input[type="button"]{
    margin-left:12px;

}

.Missing-Details input[type="radio"]
{
    appearance: none;
    background-color: #fff;
    margin-top: 1px;
    font: inherit;
    color: var(--primary);
    width: 0.9rem;
    height: 0.9rem;
    border: 0.1rem solid var(--primary);
    border-radius: 50%;
    transform: translateY(-0.075rem);
    display: inline-grid;
    gap: 0.5rem;
    padding: 0.1rem;
}

.Missing-Details input[type="radio"]:checked::before {
    transform: scale(1);
    opacity: 1;
}

.merge-employee, .merge-employee-error  {
    color: var(--primary);
}

.Missing-Details .member-type-disabled{
     color: #446787;
     opacity:0.3;
}

.Missing-Details input[type="radio"]::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0);
    transition: 50ms all ease-in-out;
    box-shadow: inset 1em 1em var(--primary);
    opacity: 0;
}

.Missing-Details .choices{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.Missing-Details .email{
    text-align:center;
}


.Missing-Details .email input[type="email"]:focus , .Missing-Details .email input[type="email"]{
    outline: 1px solid var(--primary);
}

.Missing-Details .error-messages , .Update-Contact-Numbers .error-messages {
    display: block;
    color: var(--error-fg);
    font-weight: bold;
    text-align: center;
}

.Missing-Details input[type=email]{
    width: 55%;
    /*border: 1px solid var(--primary);*/
}


.field-missing_action {
   padding: 4px !important;
}


/* Add this CSS to your styles */
#employee-found {
    text-align: center;
}

.modal__btn-container {
    margin-top: 20px; /* Add some top margin for spacing */
}

.modal__btn-primary {
    background: var(--button-bg);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: var(--button-fg);
    cursor: pointer;
    transition: background 0.15s;
}

.modal__btn-secondary {
    background-color: red;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    color: var(--button-fg);
    cursor: pointer;
    transition: background 0.15s;
}

#manual-data-sync-button {
    display: flex;
    align-items: center;
    padding: 0px 10px !important;
}

.rotating {
    cursor: not-allowed;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

.loader {
    z-index: 999;
    left: 50%;
    margin-left: -1.4rem;
    font-size: 10px;
    border: .8em solid #155a9624;
    border-left: .8em solid #155a96;
    animation: spin 1.1s infinite linear;
}
.loader, .loader:after {
    border-radius: 50%;
    width: 2.8rem;
    height: 2.8rem;
    display: block;
    position: fixed;
    top: 50%;
    margin-top: -2rem;
}

@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.htmx-indicator {
    opacity: 0;
    visibility:hidden;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity:1
    visibility: visible;
}

.htmx-request.htmx-indicator {
    opacity:1
}

.close-message-modal {
    position: absolute;
    top: 5px;
    right: 21px;
    cursor: pointer;
    color: white;
    font-size: 1.6rem;
    font-weight: bold;
}