@font-face
{
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;

    src: url(../fonts/Inter.woff2) format('woff2');
    unicode-range: U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}


html
{
    font-size: 16px;
}


body
{
    font-family: Inter, -apple-system, Helvetica, 'sans-serif',BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

    color: #181c32;
    /* background-color: #f9f9f9; */

    -moz-osx-font-smoothing: grayscale;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1
{
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: .5rem;
    color: var(--bs-heading-color, inherit);
}

/* NAVBAR */
.navbar-brand
{
    font-size: 1rem;
}
.navbar
{
    background-color: #1f284f !important;
}

/* MENUS */
.dropdown-menu
{
    font-size: 14px;
}
.dropdown-item
{
    color: #16325c;
}
/* to right align the carets in the menus */
.first-level-dropdown-toggle::after
{
    position: absolute;
    left: 80%;
    margin-top: .7em;
    transform: rotate(270deg);
    color: #aaa;
}
/* to right align the carets in the menus */
.second-level-dropdown-toggle::after
{
    position: absolute;
    left: 90%;
    margin-top: .7em;
    transform: rotate(270deg);
    color: #aaa;
}

/* BREADCRUMBS */
.link-secondary
{
    text-decoration: none;
    /* color: #16325c !important; */
}
.second-nav
{
    font-size: 14px;
    margin-bottom: 15px;
    padding-left: 15px;
    box-shadow: 0 1px 4px 0 #ddd;
}
/*
Disabled as the light grey is a bit too light
.breadcrumb > li:last-child > a {
    color: #999 !important;
}
*/


/* DIFF for devices::cli_config and database::compare schema */
.diffInserted {
    background: #cdebac;
}
.diffDeleted {
    background: rgb(242, 208, 211);
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}




/* General colors */
.text-oa-success {
    color:#8cc152;
}

/* Used when $user->list_table_size === 'compact' ($GLOBALS['table']), otherwise use btn-sm */
.btn-xs, .btn-group-xs > .btn {
  --bs-btn-padding-y: 0.0;
  --bs-btn-padding-x: 0.2rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 0.25rem;
}






/* The listed items in the device menu, left hand side. */
.device-menu-icon
{
    width: 18pt;
    margin-right: 10px;
}
.section_toggle:hover
{
    cursor: pointer;
    cursor: hand;
    background-color: #f5f5f5;
}




/* PANELS */
/* Used for the Advanced buttons in the panels on Collections templates */
.card-header
{
    padding-bottom: 2px;
}
/* Used in collection Defaults and collection Import. Old style. TODO - remove */
.oa-card-button
{
    border: 0;
}
.oa-icon
{
    margin-right: 10px;
}
.panel-button
{
    border: 1px solid rgba(0,0,0,.125);
}



/* FORMS */
.form_bottom
{
    margin: 0 0 1rem 0;
}
.form-control
{
    color: #16325c;
}
.form-control:disabled
{
    color: #16325c;
}
.form-control:disabled,
.form-control[readonly]
{
    opacity: 1;
    background-color: #f8f9fa;
}
.form_label
{
    font-weight: 300;
    font-size: 1rem;
    margin: 0 0 0 0;
    color: lightslategrey;
}
.form-select
{
    color: #16325c;
}
.form-select:disabled
{
    background-color: #f8f9fa;
}
.link_button
{
    font-size: 1.2rem;
    color: lightslategrey;
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: #f8f9fa;
}
.edit
{
    font-size: 1.2rem;
    color: lightslategrey;
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: #f8f9fa;
}
.edit:hover
{
    cursor: pointer;
    color: rgba(0, 0, 0, 1);
}



/* BUTTONS */
/* the custom 'devices' type button */
.btn-devices,
.btn-devices:active,
.btn-devices.active,
.btn-devices.disabled,
.btn-devices[disabled]
{
    color: #fff;
    border-color: #9265ce;
    background-color: #9265ce;
}
.btn-devices:hover,
.btn-devices:focus
{
    color: #fff;
    border-color: #9f85c0;
    background-color: #9f85c0;
}
.open .dropdown-toggle.btn-devices
{
    color: #fff;
    border-color: #9265ce;
    background-color: #9265ce;
}
.btn-close
{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 1.25rem 1rem;
}
.btn-default
{
    color: #434a54;
    border-color: #aab2bd !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active
{
    border-color: #ccd1d9;
    background-color: #ccd1d9;
}
.btn-default,
.btn-default.disabled,
.btn-default[disabled]
{
    background-color: white;
}
.btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled]
{
    border-color: #3bafda;
    background-color: #3bafda;
}
.btn-primary:hover,
.btn-primary:focus
{
    border-color: #4fc1e9;
    background-color: #4fc1e9;
}
.open .dropdown-toggle.btn-primary
{
    border-color: #4fc1e9;
    background-color: #4fc1e9;
}
.btn-danger,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled],
.btn-danger .open .dropdown-toggle.btn
{
    border-color: #da4453;
    background-color: #da4453;
}
.btn-danger:hover,
.btn-danger:focus
{
    border-color: #ed5565;
    background-color: #ed5565;
}
.open .dropdown-toggle.btn-danger
{
    border-color: #ed5565;
    background-color: #ed5565;
}
.btn-success,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled]
{
    border-color: #8cc152;
    background-color: #8cc152;
}
.btn-success:hover,
.btn-success:focus
{
    border-color: #a0d468;
    background-color: #a0d468;
}
.open .dropdown-toggle.btn-success
{
    border-color: #a0d468;
    background-color: #a0d468;
}
.btn-info,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled]
{
    border-color: #37bc9b;
    background-color: #37bc9b;
}
.btn-info:hover,
.btn-info:focus
{
    border-color: #48cfad;
    background-color: #48cfad;
}
.open .dropdown-toggle.btn-info
{
    border-color: #48cfad;
    background-color: #48cfad;
}
/* Panel Header buttons on Collections for create, import, et al */
.btn-light a
{
    font-weight: 300;
    color: #000;
}
.btn-light a:hover
{
    text-decoration: none;
}
.btn-outline-secondary a
{
    color: var(--bs-btn-color);
}



/* GENERAL HTML */
a
{
    text-decoration: none;
    color: --bs-primary;
}
a.greyout
{
    color: #adb5bd;
}
a:hover
{
    text-decoration: underline;
}
a.dropdown-item
{
    text-decoration: none;
}
a.nav-link
{
    text-decoration: none;
}
a.btn
{
    text-decoration: none;
}
.col-xs-1
{
    width: 8.33%;
}
.delete_link:hover
{
    background-color: red;
}
.mb-2
{
    border: var(--bs-border-width) solid var(--bs-border-color);
}
.nav-link
{
    color: #333;
}
.nav-pills .nav-link.active
{
    background-color: #a1a1a1;
}
.oa-li-hover:hover
{
    cursor: pointer;
    cursor: hand;
    background-color: #f5f5f5;
}
.oa-li-hover img
{
    width: 32pt;
    padding-right: 10px;
}
.page-link
{
    color: #0245a8;
}
/* the dropdown on devices_collection to select columns */
.toggle-vis
{
    /* font-weight: bold; */
    padding: 3px 20px 3px 20px;
    color: #212529;
}
.dash-drop {
    border: 1px solid #adb5bd;
}
/* Shown on the Help pages for each Collection */
.helpImage {
    width:1100px;
    cursor:zoom-in
}


/* TABLES */
/* to pass WCAG on dataTables striped rows */
tr:nth-child(odd) a
{
    color: #064cb3;
}
tr:nth-child(odd) a.btn-primary
{
    color: #fff;
}
tr:nth-child(odd) a.btn-devices
{
    color: #fff;
}
tr:nth-child(odd) a.btn-success
{
    color: #fff;
}
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::after,
table.dataTable > thead .sorting_asc_disabled::after,
table.dataTable > thead .sorting_desc_disabled::after
{
    right: .2em;
}
/* dataTables pagination colour */
.page-item.active .page-link
{
    border-color: #8cc152;
    /* green */
    background-color: #8cc152;
}




.c_change_primary {
  animation: colorchange_primary alternate infinite;  
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  
}

@keyframes colorchange_primary
{
  0%  {background-color: rgba(79, 193, 233, 0)}
  5%  {background-color: rgba(79, 193, 233, 0.05)}
  10% {background-color: rgba(79, 193, 233, 0.10)}
  15% {background-color: rgba(79, 193, 233, 0.15)}
  20% {background-color: rgba(79, 193, 233, 0.20)}
  25% {background-color: rgba(79, 193, 233, 0.25)}

  30% {background-color: rgba(79, 193, 233, 0.30)}
  35% {background-color: rgba(79, 193, 233, 0.35)}
  40% {background-color: rgba(79, 193, 233, 0.40)}
  45% {background-color: rgba(79, 193, 233, 0.45)}
  50% {background-color: rgba(79, 193, 233, 0.50)}

  55% {background-color: rgba(79, 193, 233, 0.55)}
  60% {background-color: rgba(79, 193, 233, 0.60)}
  65% {background-color: rgba(79, 193, 233, 0.65)}
  70% {background-color: rgba(79, 193, 233, 0.70)}
  75% {background-color: rgba(79, 193, 233, 0.75)}

  80% {background-color: rgba(79, 193, 233, 0.80)}
  85% {background-color: rgba(79, 193, 233, 0.85)}
  90% {background-color: rgba(79, 193, 233, 0.90)}
  95% {background-color: rgba(79, 193, 233, 0.95)}
  100% {background-color: rgba(79, 193, 233, 1)}
}

.c_change_warning {
  animation: colorchange_warning alternate infinite;  
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  
}

@keyframes colorchange_warning
{
  0%  {background-color: rgba(255, 193, 7, 0)}
  5%  {background-color: rgba(255, 193, 7, 0.05)}
  10% {background-color: rgba(255, 193, 7, 0.10)}
  15% {background-color: rgba(255, 193, 7, 0.15)}
  20% {background-color: rgba(255, 193, 7, 0.20)}
  25% {background-color: rgba(255, 193, 7, 0.25)}

  30% {background-color: rgba(255, 193, 7, 0.30)}
  35% {background-color: rgba(255, 193, 7, 0.35)}
  40% {background-color: rgba(255, 193, 7, 0.40)}
  45% {background-color: rgba(255, 193, 7, 0.45)}
  50% {background-color: rgba(255, 193, 7, 0.50)}

  55% {background-color: rgba(255, 193, 7, 0.55)}
  60% {background-color: rgba(255, 193, 7, 0.60)}
  65% {background-color: rgba(255, 193, 7, 0.65)}
  70% {background-color: rgba(255, 193, 7, 0.70)}
  75% {background-color: rgba(255, 193, 7, 0.75)}

  80% {background-color: rgba(255, 193, 7, 0.80)}
  85% {background-color: rgba(255, 193, 7, 0.85)}
  90% {background-color: rgba(255, 193, 7, 0.90)}
  95% {background-color: rgba(255, 193, 7, 0.95)}
  100% {background-color: rgba(255, 193, 7, 1)}
}

.c_change_danger {
  animation: colorchange_danger alternate infinite;  
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  
}

@keyframes colorchange_danger
{
  0%  {background-color: rgba(237, 85, 101, 0)}
  5%  {background-color: rgba(237, 85, 101, 0.05)}
  10% {background-color: rgba(237, 85, 101, 0.10)}
  15% {background-color: rgba(237, 85, 101, 0.15)}
  20% {background-color: rgba(237, 85, 101, 0.20)}
  25% {background-color: rgba(237, 85, 101, 0.25)}

  30% {background-color: rgba(237, 85, 101, 0.30)}
  35% {background-color: rgba(237, 85, 101, 0.35)}
  40% {background-color: rgba(237, 85, 101, 0.40)}
  45% {background-color: rgba(237, 85, 101, 0.45)}
  50% {background-color: rgba(237, 85, 101, 0.50)}

  55% {background-color: rgba(237, 85, 101, 0.55)}
  60% {background-color: rgba(237, 85, 101, 0.60)}
  65% {background-color: rgba(237, 85, 101, 0.65)}
  70% {background-color: rgba(237, 85, 101, 0.70)}
  75% {background-color: rgba(237, 85, 101, 0.75)}

  80% {background-color: rgba(237, 85, 101, 0.80)}
  85% {background-color: rgba(237, 85, 101, 0.85)}
  90% {background-color: rgba(237, 85, 101, 0.90)}
  95% {background-color: rgba(237, 85, 101, 0.95)}
  100% {background-color: rgba(237, 85, 101, 1)}
}

.toast-ent .toast-header {
    background-color: var(--bs-success-bg-subtle);
    --bs-border-color: var(--bs-primary-border-subtle);
    color: var(--bs-success-text);
}

.toast-pro .toast-header {
    background-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text);
}

.toast-perm .toast-header {
    background-color: var(--bs-danger-bg-subtle);
    --bs-border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger-text);
}

.toast-success .toast-header {
    background-color: var(--bs-success-bg-subtle);
    --bs-border-color: var(--bs-success-border-subtle);
    color: var(--bs-success-text);
}

.toast-failure .toast-header {
    background-color: var(--bs-danger-bg-subtle);
    --bs-border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger-text);
}


@media (prefers-color-scheme: dark) {
    .nav-link
    {
        color: #fff;
    }

    .toast-body {
        background: #ddd;
    }

    .table > :not(caption) > * > * {
      padding: 0.5rem 0.5rem;
      background-color: #333;
      border-bottom-width: var(--bs-border-width);
      box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    }

    .table-striped > tbody > tr:nth-of-type(2n+1) > * {
        --bs-table-accent-bg: #333;
        color: var(--bs-table-striped-color);
    }
    div.dataTables_wrapper div.dataTables_length label {
        color: white;
    }
    div.dataTables_wrapper div.dataTables_filter label {
        color: white;
    }
    .form-select {
       color: white;
    }
    .dropdown-item {
        color: white;
    }
    .second-nav {
        color: white;
    }
    .card-body {
        color: white;
    }
    .modal-body {
        color: white;
    }
    .form-control {
        color: var(--bs-secondary-color);
        opacity: 1;
    }
    .form-control:disabled, .form-control[readonly] {
        opacity: 1;
        background-color: #333;
        color: white;
    }
    .edit {
        font-size: 1.2rem;
        color: white;
        border: var(--bs-border-width) solid var(--bs-border-color);
        background-color: #333;
    }
    .form-select:disabled {
        background-color: #333;
        color: white;
    }
    .section_toggle:hover
    {
        cursor: pointer;
        cursor: hand;
        background-color: #444;
    }
    .mb-2
    {
        border-color: #888;
        color: white;
        background-color: #555;
    }
    .link_button
    {
        font-size: 1.2rem;
        color: white;
        border: var(--bs-border-width) solid var(--bs-border-color);
        background-color: #333;
    }
    .btn-light a
    {
        font-weight: 300;
        background-color: #999;
    }
    .btn-light a:hover
    {
        text-decoration: none;
    }
    .btn-outline-secondary a
    {
        color: var(--bs-btn-color);
    }
}


/*
body {
   background-color: #000;
   background-image: url("/images/background.png");
   background-position: right bottom;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100% 100% ;
   color: white !important;
}

.navbar {
    background-color: transparent !important;
    background: rgba(0,0,0,0.4) !important;
    opacity: 1.2;
    font-family: verdana;
    font-size: 1.2rem;
}

.navbar-brand {
    font-size: 1.2rem;
}

.second-nav {
    background-color: transparent !important;
    background: rgba(0,0,0,0.2) !important;
    opacity: 1.2;
    font-family: verdana;
    font-size: 1rem;
    box-shadow: none;
}

.link-secondary {
    color: white !important;
}

.dropdown-toggle {
    color: white !important;
}

.dash-drop {
    border: 1px solid white !important;
}

.form-control-sm {
    border: 1px solid white !important;
}

.btn-outline-secondary {
    border: 1px solid white !important;
    color: white !important;
}

.btn-light {
    background: rgba(0,0,0,0.2) !important;
    color: white !important;
}

.card-header {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
}

code {
    color: white;
    font-weight: bold;
}

.text-danger {
    color: hwb(0 56.5% 5.5%) !important;
}

.card {
    background-color: transparent !important;
}