/**
 * EKM variables and some Bootstrap overrides.
 */
:root, [data-bs-theme=light] {
  --ek-admin-color: #802020;
  --ek-navbar-border-color: #e0e7e0;
  --ek-sidebar-nav-active: #f0f9ed;
  --ek-icon-new-color: #80aa80;
  --ek-label-emph-color: var(--bs-body-color);
  --ek-label-emph-bg: #e9f5e9;
  /*--ek-hdr-color: #606060;*/
  --ek-hdr-color: #4c555a;
  --ek-hdr-border-color: #e0e7e0;
  --ek-table-td-border: #e5e5e5;
  --ek-table-th-color: #303030;
  --ek-theme-btn-color: rgb(50 50 50 / .5);
  --ek-theme-btn-bg: rgb(50 50 50 / .2);
  --ek-theme-btn-hover-bg: rgb(50 50 50 / .4);
}

[data-bs-theme=dark] {
  --ek-admin-color: #ffa0a0;
  --ek-navbar-border-color: #404440;
  --ek-icon-new-color: #80aa80;
  --ek-label-emph-color: var(--bs-body-color);
  --ek-label-emph-bg: #4f5e4f;
  --ek-hdr-color: #a0a0a0;
  --ek-hdr-border-color: #404440;
  --ek-table-td-border: #656565;
  --ek-table-th-color: #e5e5e5;
  --ek-theme-btn-color: rgb(255 255 255 / .5);
  --ek-theme-btn-bg: rgb(255 255 255 / .3);
  --ek-theme-btn-hover-bg: rgb(255 255 255 / .4);
}

/**
 * Bootstrap variable overrides.
 */
body {
  /*
  --bs-body-font-family: "Helvetica Neue",Helvetica,Roboto,system-ui,-apple-system,"Segoe UI","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-font-sans-serif: Roboto,system-ui,-apple-system,"Segoe UI","Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  */
  --bs-body-font-size: 10pt;
  --bs-body-font-weight: 300;
}

.navbar {
  --bs-navbar-padding-y: 0.1rem;
  --bs-navbar-toggler-padding-x: 0.4rem;
}

@media (max-width: 768px) {
  .navbar {
    --bs-navbar-padding-y: 0.5rem;
  }
}

.navbar-brand {
  --bs-navbar-brand-margin-end: 0px;
}

.nav-link .btn {
  --bs-btn-padding-x: 0.25rem;
}

.navbar-brand {
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-font-size: 1rem;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #76d3b4;
}

html, body {
  overflow-x: hidden;
}

.ek-theme-toggle .btn-theme-select {
  background-color: var(--ek-theme-btn-bg);
  color: var(--ek-theme-btn-color);
}
.ek-theme-toggle .theme-icon-active {
  color: var(--ek-theme-btn-color);
}
.ek-theme-toggle .btn-theme-select:hover {
  background-color: var(--ek-theme-btn-hover-bg);
}


.ek-navbar-user {
  font-size: 1rem;
}

.beta-tag {
  color: #60a060;
  font-size: .75rem;
}

.emph {
  font-weight: 500;
}

.black {
  color: #000;
}

.accordion,.ek-gateway-info {
  /*
  padding: 1rem;
  border: 1px solid var(--ek-hdr-border-color);
  border-radius: 0;
  */
  --bs-accordion-btn-padding-y: .5rem;
  --bs-accordion-btn-padding-x: .5rem;
  min-width: 36rem;
}

.ek-gateway-info .accordion-item {
  /*
  border: 1px solid var(--ek-hdr-border-color);
  */
  border: none;
  border-radius: 5px;
  margin-bottom: .5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ek-gateway-info h4.accordion-header {
}

.ek-gateway-info h4 .accordion-button {
  font-size: 1rem;
  font-weight: 400;
  color: #606060;
  /*background-color: #f5fffc;*/
}
.ek-gateway-info h4 .accordion-button:not(.collapsed) {
  color: #606060;
  background-color: #f5fffc;
}
.ek-gateway-info h4 .accordion-button:focus {
  box-shadow: none;
}

.ek-admin h4 .accordion-button {
  color: var(--ek-admin-color);
}

a.ek-admin::before {
  color: var(--ek-admin-color);
  content: '*';
}

.ek-admin-text {
  color: var(--ek-admin-color);
}


/* Move down content because we have a fixed navbar that is 3rem tall */
body {
  /*
  font-size: 10pt;
  font-weight: 300;
  */
  padding-top: 3.5rem;
}

a {
  text-decoration: none;
}

/**
 * Device address links
 */
a.ek-device-address {
  font-size: 1rem;
  font-weight: 300;
}

a.ek-device-address .ek-device-0 {
  /*color: rgba(var(--bs-link-color-rgb), 0.3);*/
  color: #b0b0c0;
}

.ek-left {
  text-align: start;
}

.ek-device-data {
  width: auto;
  overflow-x: scroll;
}

/*
a:hover {
  text-decoration: none;
}
*/

.hidden {
  display: none;
}

.ek-main {
  padding-top: 0;
  padding-left: 1em;
  padding-right: 1em;
}


.main-section {
  margin-left: 1rem;
}

p {
  margin-bottom: .5rem;
}

h1 {
  font-size: 2rem;
/*   margin-bottom: 1rem;
  margin-top: 1.5rem;
 */
  color: var(--ek-hdr-color);
}

h2 {
  font-size: 1.75rem;
/*   margin-left: 0;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
 */
  color: var(--ek-hdr-color);
}

h3 {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.75rem;
/*   margin-left: 0;
  margin-bottom: .25rem;
  margin-top: .25rem;
 */
  color: var(--ek-hdr-color);
}

h4 {
  font-size: 1.25rem;
  font-weight: 300;
/*   margin-left: 0;
  margin-bottom: .5rem;
  margin-top: .7rem;
 */
  color: var(--ek-hdr-color);
}

/* Section headers */
.ek-header {
  margin-bottom: 1rem;
  margin-top: 1.75rem;
  border-bottom: 1px solid var(--ek-hdr-border-color);
}
.ek-header h3 {
}
.ek-hdr-subtitle {
  font-size: 1rem;
  height: 100%;
  color: var(--ek-hdr-color);
  /*
  display: inline-block;
  vertical-align: bottom !important;
  */
}

.ek-footer {
  font-size: .8rem;
  margin-top: 8rem;
}

.ek-label-emph {
  color: var(--ek-label-emph-color);
  background-color: var(--ek-label-emph-bg);
}


/* .ek-col-right {
  position: absolute;
  right: 0px;
  display: inline-block;
  text-align: right;
  padding-right: 2em;
}

.ek-account-sep {
  height: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
 */
.errormsg {
  color: red;
  margin-top: 1em;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
}

ul {
  list-style: none;
}

ul.navlist {
    overflow: hidden;
    background-color: #fafcfc;
}
ul.navlist li {
    float: left;
}
ul.navlist li a {
    display: block;
    color: #30c0c0;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-decoration: none;
}
ul.navlist li a:hover {
    background-color: #111111;
}


div.subheader {
  margin-bottom: 2em;
}

ul.kvlist {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
ul.kvlist li {
    height: 1.1rem;
}
ul.kvlist li span.key {
    display: inline-block;
    text-align: right;
    margin-right: 1rem;
    color: green;
    width: 12rem;
    white-space: nowrap;
}
ul.kvlist li span.value {
    color: #606060;
}

.copyright {
  text-align: left;
  width: 100%;
  padding: 30px 0;
  color: #606060;
  font-size: 11px;
  font-style: normal;
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial
}

#select:required:invalid {
#  color: gray;
#}
option[value=""][disabled] {
  display: none;
}
/*
option {
  color: black;
}
*/

.ek-icon-new {
  color: var(--ek-icon-new-color);
}

/*
 * Bootstrap CSS overrides
 */
.navbar {
  border-bottom: 1px solid var(--ek-navbar-border-color);
  min-height: 3.5rem;
}

.navbar-brand {
  line-height: 22px;
}

.nav-tabs .nav-link.disabled {
  color: #d0d0d0;
}
.nav-tabs .nav-link.disabled:hover {
  cursor: default;
}

.sidebar {
/*   font-family: "Roboto", sans-serif;
 */
  font-size: 1.1rem;
  font-weight: 400;
  position: fixed;
  top: 3.5rem;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 1rem;
  padding-left: .5rem;
  padding-right: 0;
  max-width: 11rem;
  min-width: 11rem;
  border-right: 1px solid var(--ek-navbar-border-color);
}

.sidebar input.ek-device-search {
  margin-left: .75rem;
  max-width: 7rem;
}

/* Sidebar navigation */

/* Active sidebar nav link */
.sidebar .nav-link {
  border-radius: 3px;
  padding-left: .8rem;
  padding-right: .8rem;
  padding-top: 7px;
  padding-bottom: 1px;
  margin-top: 1px;
}

.sidebar .nav-item .nav-link.active {
  background-color: var(--ek-sidebar-nav-active);
  border: 1px solid var(--bs-nav-link-color);
  margin-right: .7rem;
}

.sidebar .ek-sub-nav {
  font-size: 1rem;
}
.sidebar .ek-nav-heading {
  padding-left: .5rem;
  padding-top: 1em;
  padding-bottom: .5em;
}

/* make room for sidebar when sm or bigger */
@media (min-width: 768px) {
  .ek-main {
    padding-left: 13rem;  
  }
  .ek-text-right {
    text-align: right;
  }
}

/*
 * Forms
 */
 
legend {
  font-size: 12pt;
  color: #606060;
  margin-bottom: .2rem;
}

.ek-form-ctl-inline {
  display: inline-block;
}

.ek-form-ctl-num8 {
  width: 9rem;
}

.ek-form-ctl-num4 {
  width: 5rem;
}

.ek-afterlabel {
  margin-left: .5rem;
}

/* Email contact page */
.ek-email-form-input {
  width: 30em;
}


/* Material icon styling */
.icon-sm {
  font-size: 18px;
}

.icon-ek {
  color: #608060;
}


/* .form-control {
  width: auto;
} */
.form-control:disabled {
  background-color: #e0e0e0;
  color: #f0f0f0;
  border-color: #d0d0d0;
}

.form-row {
  margin-left: 1rem;
}

.ek-icon-new {
  color: var(--ek-icon-new-color);
}

/* DataTables overrides */

.dataTables_wrapper {
  color: #303030;
  font-size: 9pt;
}

.dataTables_info {
}

.dataTables_paginate .page-link {
  font-size: 9pt;
  padding: .3rem .5rem;
}
.page-item.active .page-link {
    background-color: #02d0f8;
    border-color: #02d0f8;
}

/* Subdued "no data" */
.ek-nodata {
  font-style: italic;
  color: #808080;
}


/**
 * Table styles.
 */
table {
  border-spacing: 0;
  border-top-width: 0;
  white-space: nowrap;
}

/**
 * Gateway mac address in tables.
 */
table a.ek-mac-address {
  font-size: 1rem;
}

.table tr:nth-child(even) {
    background-color: #f8f8f8;
}

.table thead th {
  font-size: .9rem;
  color: var(--ek-table-th-color);
  border-bottom: 2px solid #e0e0e0;
  font-weight: normal;
}

.table td {
  font-size: .8rem;
  font-weight: 300;
  /*
  line-height: 1.4rem;
  color: #000000;
  padding-left: 6px;
  padding-right: 4px;
  */
  padding-top: .3rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--ek-table-td-border);
}

.table.ek-data-table {
  text-align: right;
}

/*
.table.ek-data-table th {
}
*/

/* DataTables row expander button styling */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
  top: 7px;
  box-shadow: 1px 1px 2px #d0d0d0;
  background-color: #02d0f8;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
    padding-left: 2.5rem;
}

/* shrink DataTables form controls */
.dataTables_wrapper label {
  color: #606060;
}
.dataTables_wrapper .form-control-sm {
  padding: .1rem .5rem;
}

.dataTables_wrapper select.form-control-sm:not([size]):not([multiple]) {
  font-size: 9pt;
  height: 1.65rem; 
}

/**
 * Data API page css
 */
.data_api_url {
  padding: 1rem;
  background: #fff3e5;
  border: 1px solid #bac6ea;
  overflow: scroll;
  white-space: nowrap;
}

.w-auto {
  width: auto;
}

/**
 * Device data QOS state glyph.
 */
.ek-qos-glyph {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}

.ek-qos-error {
  border: solid 2px #bf2020;
  background-color: #f00000;
}

.ek-qos-warning {
  border: solid 2px #e86200;
  background-color: #ff7800;
}

.ek-qos-good {
  border: solid 2px #19bb19;
  background-color: #00d000;
}

.ek-qos-text {
  vertical-align: middle;
  margin-left: .3rem;
}

/**
 * Pin/state status indicator glyph.
 */
.ek-pin-state {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 50%;
}

.pin-state-high {
  border: solid 1px #30a030;
  background-color: #30a030;
}

.pin-state-low {
  border: solid 1px #30a030;
}

/**
 * Settings form CSS
 */
form .form-group {
  margin-bottom: 1rem;
}

fieldset.ek-settings-set {
	border: 1px solid #bbcdd9;
	border-radius: 10px;
	padding: 1rem 1rem 0 1rem;
}

fieldset.ek-settings-set legend {
  float: none;
	width: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/**
 * Meter page CSS
 */
#ek_device_state_timezone {
  color: #606060;
}

/**
 * ioStack page CSS
 */
.ek-binary2 {
  margin-left: .4rem;
  #font-style: italic;
  color: #80a080;
}

div.ek-iostack-dio {
  border: solid 1px var(--bs-border-color);
  border-radius: 5px;
  padding: .75rem 1rem;
}

.ek-iostack-dio table {
  padding: 0;
}
.ek-iostack-dio tr {
  padding: 0;
  background-color: #ffffff;
}

.ek-iostack-dio th {
  text-align: center;
}

/*table.ek-iostack-dio-table tr th.ek-iostack-dio-label {*/
.ek-iostack-dio th[scope="row"] {
  text-align: left;
  padding-right: .5rem;
  font-weight: normal;
}

.ek-iostack-dio td {
  #border: solid 1px #000;
  padding: 5px 3px 0px 3px;
}

.ek-iostack-dio td.ek-iostack-dio-label {
  padding-right: 1rem;
  text-align: left;
}

.ek-iostack-dio td div {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 50%;
}

.ek-iostack-dio td.ek-iostack-dio-pin div {
  border: solid 1px #30a030;
}
.ek-iostack-dio td.ek-iostack-dio-pin div.ek-iostack-dio-high {
  background-color: #30a030;
}
.ek-iostack-dio td.ek-iostack-dio-pin div.ek-iostack-dio-low {
  border: solid 1px #30a030;
}


/**
 * Trigger CSS
 */

section.trigger-pane {
  --rubric-bg-color: #e1edf7;
  --rubric-border-color: #bbcdd9;
  --subrubric-bg-color: #f1fcfd;
  --subrubric-border-color: #d2e9f0;
}

/*
table.ek-trigger-table th,td {
  padding-right: 1rem;
}

table.ek-trigger-table thead tr {
  border-bottom: 1px solid #c0c0c0;
}

table.ek-trigger-table th {
  font-size: 1rem;
  font-weight: 500;
  color: #303030;
  padding-left: .2rem;
  padding-right: 1rem;
}

table.ek-trigger-table .ek-icon-new,.ek-icon-edit,.ek-icon-delete {
  position: relative;
  top: -3px;
}

table.ek-trigger-table tr:nth-child(even) {
  background-color: #ffffff;
}

table.ek-trigger-table tr.active {
  background-color: var(--rubric-bg-color);
}
*/

select#trigger_template_list {
  #background-color: #f3feff;
}

div.ek-trigger-template-selection {
  padding: .1rem .5rem 0px .75rem;
  background-color: #f3fff3;
  border: 1px solid #d0f0d0;
  border-radius: 10px;
}

div.ek-trigger-form-description {
}

form#ek_trigger_form fieldset.tr-condition {
  background-color: var(--rubric-bg-color);
}

form#ek_trigger_form fieldset.tr-action {
  background-color: var(--rubric-bg-color);
}

form#ek_trigger_form fieldset.fieldset-sub {
	border: 1px solid var(--subrubric-border-color);
	border-radius: 8px;
	padding: 1rem 1rem 0 1rem;
  background-color: var(--subrubric-bg-color);
  margin-bottom: 1rem;
}

form#ek_trigger_form .condition-supertype {
  font-size: 1rem;
}

form#ek_trigger_form div.ekm-note-warning {
  /*font-size: 10pt;*/
  color: #303030;
  border: 1px solid #ffb5b5;
  background-color: #fff4f4;
  border-radius: 8px;
  padding: .5rem;
}

/**
 * Icon buttons (used by trigger UI)
 */
div.ek-icon-button {
  display: inline-block;
  cursor: pointer;
  padding: .1rem .6rem .4rem .5rem;
  font-size: 1.5rem;
}
div.ek-icon-button:hover {
  background-color: #d9f3d9;
  border-radius: 5px;
}
div.ek-icon-button .ek-icon-glyph {
  vertical-align: middle;
}
div.ek-icon-button div.ek-icon-legend {
  display: inline;
  font-size: 1rem;
  padding-left: .3rem;
}

.ek-icon-button-sm {
  display: inline-block;
  cursor: pointer;
  padding: .1rem;
}

.ek-icon-button-sm:hover {
  background-color: #ddd;
  border-radius: 3px;
}

.ek-icon-button-sm .ek-icon-glyph {
  vertical-align: bottom;
  font-size: 1rem;
}

.ek-icon-new {
  color: #80aa80;
}

.ek-icon-edit {
  color: #6070e0;
}

.ek-icon-delete {
  color: #d07080;
}