:root{
    --color-pronodes-1: #247bbc;
    --color-pronodes-1-rgb: 36 123 188;
    --color-pronodes-2: #484b4d;
    --nam-yellow: #FFFF00;
    --led-green: #08c11d;
    --led-red: #ec3333;
/* 
    --bs-primary: #247bbc;
    --bs-primary-rgb: #247bbc; */
}

/* .alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
} */

/* don't show not loaded vue */
[v-cloak] {
  display: none;
}

.black-and-white {
  filter: grayscale(100%);
}

.monospace-text {
  /* font-family: 'Courier New', monospace; */
  font-family: "Fira Code", monospace;
  /* font-family: 'JetBrains Mono', Courier, monospace; */
 }

.bg-namada {
  background-color: var(--nam-yellow); 
}
.bg-pronodes-blue {
  background-color: var(--color-pronodes-1); 
}

.bg-led-green{
  background-color: var(--led-green); 
}
.bg-led-red{
  background-color: var(--led-red); 
}
.bg-led-green-light{
  background-color: #9aeda4;
}


.color-pronodes-blue {
  color: var(--color-pronodes-1); 
}

.color-pronodes-gray {
  color: var(--color-pronodes-2); 
}

.color-led-green{
  color: var(--led-green); 
}

.color-led-red{
  color: var(--led-red); 
}

.main-text-color{
  color: var(--bs-emphasis-color);
}

.border-pro-nodes {
  --bs-border-opacity: 1;
  /* border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; */
  /* border-color: rgba(var(--color-pronodes-1), var(--bs-border-opacity)); */

  /* border-color: var(--color-pronodes-1); */
  border-color: #91BDDD;
}


.bg-prop-ongoing{
  /* background-color: #6def7c; */
  box-shadow: inset  0  0  50px rgba(90, 239, 107, 0.5);
}


.searchbox {
  margin: 0 20px; /* vertical horisontal */
}

.mycardcommon {
  /* border-radius:  1rem; */
  /* box-shadow:  0  4px  8px  0 rgba(0,  0,  0,  0.2),  0  6px  20px  0 rgba(0,  0,  0,  0.19); */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.mycarddashboard {
  min-height:  115px;
  /* border-radius:  1rem; */
  /* box-shadow:  0  4px  8px  0 rgba(0,  0,  0,  0.2),  0  6px  20px  0 rgba(0,  0,  0,  0.19); */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-image: url('public/img/Nam_Symbol_80px.png');
  background-size: cover;
  background-position: center;
}

.mycardprop {
  min-height:  100px;
  /* border-radius:  1rem; */
  /* box-shadow:  0  4px  8px  0 rgba(0,  0,  0,  0.2),  0  6px  20px  0 rgba(0,  0,  0,  0.19); */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}


.my-short-table-dashboard {
  max-height:  300px;
}

.my-inverted-progress {
  transform: rotate(-180deg);
}

.my-inv-progress {
  transform: rotate(180deg);
}
.my-inv-progress-bar {
  transform: rotate(-180deg);
}

.my-short-fixed-table {
  height: 300px;
}

.thead-sticky th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* Цвет фона заголовка */
  z-index: 1;
}

#btn-back-to-top {
  position: fixed;
  bottom:  20px;
  left:  25px;
  display: none;
  opacity: 70%;
}

.input-color:focus {
  border-color: #5cb85c;
  box-shadow:  0  0  0  0.2rem rgba(92,  184,  92,  0.25);
}


.my-badge-green {
  color: var(--led-green);
  background-color: #9aeda4;
}

.my-badge-red {
  color: var(--led-red);
  background-color: #f8acac;
}

.my-badge-warn {
  /* color: #dd831b; */
  color: #908a47;
  /* background-color: #fff587; */
  background-color: #faed65;
}


.my-badge-pn-blue {
  color: var(--color-pronodes-1);
  background-color: #b3d0e5;
  /* border-color: var(--color-pronodes-1); */
}

.my-badge-pn-gray {
  color: var(--color-pronodes-2);
  background-color: #c3c7ca;
}


.link_stealth{
  text-decoration: none;
}

.link-stealth{
  text-decoration: none;
}


.link-disabled{
  pointer-events: none;
  text-decoration: none;
}


.form-control:focus {
  /* border-color: #ff80ff; */
  /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5); */
  border-color: #91BDDD;;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(145, 189, 221, 0.5);
}



.form-select:focus {
  /* border-color: #ff80ff; */
  /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5); */
  border-color: #91BDDD;;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(145, 189, 221, 0.5);
}

.select-borderless {
  border-color: none;
  box-shadow: none;
  outline: none;
  border: none;
}


.fixTableHead {
  overflow-y: auto;
  height: 225px;
}
.fixTableHead thead th {
  position: sticky;
  top:  0;
  /* background: #f9f9f9;*/
}

.fixAccTableHead {
  overflow-y: auto;
  max-height: 800px;
}
.fixAccTableHead thead th {
  position: sticky;
  top:  0;
  /* background: #f9f9f9;*/
}

.nowrap {
  white-space: nowrap;
}



.tx-item:hover {
  background-color: #ececec;
}


/* .your-element {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
} */
/* 
 стиль для таблицы
body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
} */

/* header, footer, section {
    padding: 50px 0;
}

header, footer {
    background: var(--color1);
    background-color: var(--color1);
}

section {
    background: var(--color2);
} */



/* body {
    background-color: powderblue;
}
  h1 {
    color: blue;
}
  p {
    color: red;
} */



.btn-custom-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-custom-toggle:hover,
.btn-custom-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}


.btn-options{
  /* padding: .25rem .25rem; */
  padding: 0rem 0.5rem;
  /* font-size: 1vw; */
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-pronodes-1);
  /* color: var(--bs-emphasis-color); */
  background-color: transparent;
}
.btn-options:hover,
.btn-options:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.param-line{
  min-height: 32px;
  color: var(--bs-emphasis-color);
  padding: 0rem 0.3rem;
  margin-bottom: 0.1rem !important; /* ? */
  padding-bottom: 0.1rem !important;
}

.param-line-title{
  min-height: 32px;
  font-weight: bold;
  color: rgba(var(--bs-emphasis-color-rgb), .55);
  padding: 0rem 0.3rem;
  margin-bottom: 0.1rem!important;
  padding-bottom: 0.1rem!important;
}


.explorer-balance {
  color: var(--color-pronodes-1);
  font-weight: bold;
  padding-right: 0.3rem!important;
}

.explorer-denom {
  color: rgba(var(--bs-emphasis-color-rgb), .55);
  padding-right: 0.5rem!important;
}


/* try to add uptime animation BEGIN */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
/* try to add uptime animation END */



  .dropdown-toggle { outline: 0; }
  
  .btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    background-color: transparent;
  }
  .btn-toggle:hover,
  .btn-toggle:focus {
    color: rgba(var(--bs-emphasis-color-rgb), .85);
    background-color: var(--bs-tertiary-bg);
  }
  
  .btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
  }
  
  [data-bs-theme="dark"] .btn-toggle::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  }
  
  .btn-toggle[aria-expanded="true"] {
    color: rgba(var(--bs-emphasis-color-rgb), .85);
  }
  .btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
  }


/* .custom-bg {
  position: relative;
  background-color: #f8f9fa;
  overflow: hidden;
}
.custom-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 70%; 
  height: 100%;
  background-color: #007bff;
  z-index: -1; /* Чтобы псевдоэлемент был под содержимым *
} */


.progress-bg {
  position: relative;
  overflow: hidden;
}
.progress-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--before-width, 0%);
  height: 100%;
  background-color: #247abc1f; /* Цвет для первых X% */
  z-index: -1;
}
.progress-bg::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--after-width, 100%);
  height: 100%;
  background-color: transparent; /* Здесь можно задать другой цвет, если он не должен быть стандартным */
  z-index: -1;
}

/* rgba(var(--color-pronodes-blue, 0, 123, 255), 0.5); */


.status-aligned {
  display: inline-block;
  min-width: 100px;
}

.text-with-progress {
  display: flex; /* Используем flexbox для выравнивания элементов в строке */
  align-items: center; /* Выравниваем элементы по центру по вертикали */
  gap: 10px; /* Расстояние между текстом и прогресс-баром */
}