table tr:nth-child(odd) { background: #fff; }
table tr:nth-child(even) { background: #f2f2f2; }
tbody td,th {padding: 10px; }

:root {
  --color-primary: #65b330;
  --color-primary-hover: #4f8f25;
  --color-primary-30: #65b33030;
  --color-primary-50: #65b33050;
  --color-dark: #363636;
  --color-medium: #636363;
  --color-text-footer: #5a5956;
  --color-text: #4b4b4b;
  --color-text-muted: #6e6e6e;
  --color-text-light: #ababab;
  --color-heading-page: var(--color-text);
  --color-background: #f4f4f4;
  --color-disabled: #d2d2d2;
  --color-lightest: #fff;
  --color-darkest: #000;
  --color-error-text: #96353b;

  --dim-border-radius: 0.214rem;
  --dim-colum-gap: 0.75rem;

  --color-alert-success: var(--color-primary);
  --color-alert-warning: #ffaf4f;
  --color-alert-warning-dark: #856404;
  --color-alert-error: #fa5862;
  --color-success-border: #c3e6cb;
  --color-warning-border: #ffeeba;
  --color-warning-background: #fff3cd;
  --color-alert-background: #d4edda;

  --color-table-border: #99999d;
  --color-table-header: #8e8e93;
  --color-table-header-border: var(--color-lightest);
  --color-table-odd-row: var(--color-lightest);
  --color-table-even-row: #e7e7e7;
  --color-table-text: #2e2f30;
  --color-background-light: #bebdbd;
  --color-accordion-table-border: #cfcfcf;

  --color-search-placeholder: #8e8e93;
  --color-search-background: #e8e8e8;
  --color-border: rgba(211, 211, 211, 0.6);
  --color-border-light: #ced4da;
  --color-checkbox-background: var(--color-table-text);
  --color-checkbox-default-background: var(--color-lightest);

  --color-additional-value: var(--color-darkest);
  --color-graph-value: #69b12b;

  --color-background-primary: var(--color-lightest);
  --color-background-secondary: var(--color-background);

  --color-input-field: transparent;
}


.etable {
    border-spacing: 0 10px;
    font-family: 'Open Sans', sans-serif;
}
.eth {
    padding: 10px 20px;
    background: #00411e;
    color: #f6db92;
    border-right: 2px solid;
    font-size: 0.9em
}
.etd {
    vertical-align: middle;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    border-top: 2px solid #56433D;
    border-bottom: 2px solid #56433D;
    border-right: 2px solid #2c3034;
    border-left: 2px solid #2c3034;
}
.etd:last-child {
    border-right: 2px solid #56433D;
    text-align: center;
}
.etd:first-child {
    border-left: 2px solid #56433D;
    text-align: center;
}
.etd:nth-child(6){
    text-align: center;
}
.etd:nth-child(7){
    text-align: center;
}
.etd:nth-child(8){
    text-align: center;
}

.eprogress {
    border:0;
    width: 100%;
    height: 20px;
    border-radius: 5px;
    background: var(--color-alert-error);
    -webkit-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
}
.eprogress::-webkit-progress-bar {
    width: 100%;
    height: 20px;
    border-radius: 5px;
    background: var(--color-alert-error);
    -webkit-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 3px 1px rgba(0, 0, 0, 0.2);
}
.eprogress::-webkit-progress-value {
    border-radius: 5px;
    background: #25f682;
    background: -moz-linear-gradient(top,  #25f682 0%, #20d06e 50%, #17964f 51%, #127a40 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25f682), color-stop(50%,#20d06e), color-stop(51%,#17964f), color-stop(100%,#127a40)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25f682', endColorstr='#127a40',GradientType=0 ); /* IE6-9 */
}
.eprogress::-moz-progress-bar {
    border-radius: 5px;
    background: #25f682;
    background: -moz-linear-gradient(top,  #25f682 0%, #20d06e 50%, #17964f 51%, #127a40 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25f682), color-stop(50%,#20d06e), color-stop(51%,#17964f), color-stop(100%,#127a40)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #25f682 0%,#20d06e 50%,#17964f 51%,#127a40 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25f682', endColorstr='#127a40',GradientType=0 ); /* IE6-9 */
}

.button-1 {
    float: left;
}

.button-2 {
    margin-left: 15px;
}

.ebutton {
    padding: 0.5em 1.5em;
    background-image: linear-gradient(rgba(158,158,158,0.5), rgb(158,158,158), rgba(158,158,158,0.5));
    color: #fff;
    font-size: 0.9em;
    border: 2px solid rgb(158,158,158);
    border-radius: 0.4em;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.ebutton.eprimary { background-image: linear-gradient(rgba(63,81,181,0.5), rgb(63,81,181), rgba(63,81,181,0.5));
    border-color: rgb(63,81,181);}
.ebutton.esuccess { background-image: linear-gradient(rgba(76,176,80,0.5),  rgb(76,176,80),  rgba(76,176,80, 0.5));
    border-color: rgb(76,176,80); }
.ebutton.einfo    { background-image: linear-gradient(rgba(96,125,139,0.5), rgb(96,125,139), rgba(96,125,139,0.5));
    border-color: rgb(96,125,139); }
.ebutton.ewarning { background-image: linear-gradient(rgba(255,151,0,0.5),  rgb(255,151,0),  rgba(255,151,0,0.5));
    border-color: rgb(255,151,0); }
.ebutton.edanger  { background-image: linear-gradient(rgba(244,66,54,0.5),  rgb(244,66,54),  rgba(244,66,54,0.5));
    border-color: rgb(244,66,54); }

.eform {
    padding-top: 10px;
    padding-bottom: 0;
    padding-left: 0.2em;
    float: left;
}

dialog {
	  margin: auto;
	  position: absolute;
	  top: 0; left: 0; bottom: 0; right: 0;		  background: lightblue;
	  border: none;
	  border-radius: 1rem;
	}

.hystmodal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start; /* см. ниже */
    align-items: center;
    z-index: 99;
    /* Чтобы окно не прилипало к границе
    браузера установим отступы */
    padding:30px 0;
}

.hystmodal__wrap {
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
    min-height: 100%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.hystmodal__window {
    margin: 50px 0;
    flex-shrink: 0;
    flex-grow: 0;
    background: #fff;
    width: 600px;
    max-width: 100%;
    overflow: visible;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
    transform: scale(0.9);
    opacity: 0;
}

.hystmodal--active{
    visibility: visible;
}
.hystmodal--active .hystmodal__window{
    transform: scale(1);
    opacity: 1;
}

hystmodal__shadow{
    position: fixed;
    border:none;
    display: block;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 98;
    opacity: 0;
    transition: opacity 0.15s ease;
    background-color: black;
}
/* активная подложка */
.hystmodal__shadow--show{
    pointer-events: auto;
    opacity: 0.6;
}

.hystmodal__opened {
    position: fixed;
    right: 0;
    left: 0;
    overflow: hidden;
}

.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
    box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}

.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.navbar {
    background-color: darkblue;
}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

@media all and (max-width: 750px) {
    .topnav {
        margin: 7.5px 0px;
        width: 100vw;
    }
    body {
        padding: 0;
    }
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}

.element-1,
.element-2,
.element-3 {
    display: inline-block;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-inline: 5px;
    vertical-align: center;
    border-radius: 5px;
}

.element-1 {
    background-color: #a6fc89;
}

.element-3 {
  color: #211919;
  background-color: #b2b4ff;
}

.progress-5 {
  width:80px;
  height:40px;
  border:2px solid currentColor;
  border-right-color: transparent;
  padding:3px;
  background:
    repeating-linear-gradient(90deg, currentColor 0 10px,#000000 0 15px)
    0/0% no-repeat content-box content-box;
  position: relative;
}
.progress-5::before {
  content:"";
  position: absolute;
  top:-2px;
  bottom:-2px;
  left:100%;
  width:10px;
  background:
    -moz-linear-gradient(
        #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
    -moz-linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
    -moz-linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background:
    linear-gradient(
        #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;

  background-repeat:no-repeat;
}
.progress-5::-webkit-progress-bar {
    width: 100%;
    height: 100%;
    background: deeppink;
}
.progress-5::-webkit-progress-value {
    width: 100%;
    height: 100%;
    background: forestgreen;
}
.progress-5::-moz-progress-bar {
    width: 100%;
    height: 100%;
    background: forestgreen;
    color: springgreen;
}

.ecanvas {
    background-color: aliceblue;
}

.p-1,.p-2 {
    margin-left: 1rem;
}
.p-1 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.p-2 {
    margin-top: 0;
}

.test {
    background-color: #00ffd0;
}