/*
 oranzova # FA7E27
 fialova # 80379B
 */

/* bootstrap */
:root {
    --bs-primary: #009BA4 !important;
}
.table {
    --bs-table-hover-bg: rgba(0, 155, 164, .2);
}
.text-primary {
    color: var(--bs-primary) !important;
}

/**
 * global */
html {}
body {background: #f4f4f4;color: #333;font-size: 15px;line-height: 1.6;font-family: 'Inter', sans-serif;font-weight: 400;}
body a {color: #009ba4;text-decoration: underline;}
body a:hover {color: #009ba4;text-decoration: none;}
body a:focus {outline: 0;}
body.overflow {height: 100%;overflow: hidden;}
/*main {amargin-top: 84px;padding: 40px 0;}*/
/*@media (max-width: 990px) {main {padding-top: 40px;}}*/
.input-group-text {border-radius: 0;font-size: 0.7em;}
.clear {clear: both;}


.container-fluid {padding-left: 30px;padding-right: 30px;}

.btn, .form-control, .form-select {border-radius: 0;}
.btn .fa-solid {
    /**
     * tohle mi vadi, povolim ti zaporny margin viz ms-n1 (margin start - negative) a prosim primarne vyuzivej tridy m-auto,m-,mt-,mb-,ms-,me- a pro padding p- apod. hodnoty 1-5
    margin-left: -10px;
    margin-right: 10px;
    */
    margin-left: -10px;
    margin-right: 10px;
    color: #777;
}
.btn-default {background: #FFF;border: 1px solid #DDD;border-radius: 0;color: #009ba4;padding: 0 12px;}
.btn-default:hover {background-color: #333;color: #fff;}
.btn:focus {box-shadow: 0 0 0 .25rem rgba(255, 82, 9,.25);}

.btn-primary {background: #000;color: #FFF;vertical-align: middle;padding: 10px 30px;font-size: 14px;border: 0;text-transform: uppercase;font-weight: 600;position: relative;text-decoration: none;}
.btn-primary:hover {background: #009ba4;color: #FFF;text-decoration: underline;}

.btn-secondary {background: #FFF;color: #333;padding: 10px 30px;font-size: 14px;border: 1px solid #DDD;text-transform: uppercase;font-weight: 500;position: relative;text-decoration: none;}
.btn-secondary:hover {background: #FFF;border-color: #009ba4;color: #009ba4;atext-decoration: underline;}
/*
.btn-secondary {background: #DDD;color: #333;padding: 7px 30px;font-size: 16px;border: 1px solid #FFF;text-transform: uppercase;font-weight: 400;position: relative;text-decoration: none;}
.btn-secondary:hover {background: #e83ca1;color: #FFF;text-decoration: underline;}
*/

@media (max-width: 991px) {
    .btn-primary {padding: 7px 15px;font-size: 12px;}
    .btn-secondary {padding: 7px 15px;font-size: 12px;}
}

.dropdown-menu a:focus,
.dropdown-menu a:active {
    background-color: #e9ecef;
    color: #009ba4;
}

.btn-full-center {width: 100%;text-align: center;}
.btn-size-xl {padding: 15px 30px;}
.btn-size-s {padding: 3px 8px;font-size: 11px;}

.row-30 {margin-left: -30px;margin-right: -30px;}
.row-30 > div {padding-left: 30px;padding-right: 30px;}
.row-20 {margin-left: -20px;margin-right: -20px;}
.row-20 > div {padding-left: 20px;padding-right: 20px;}
.row-10 {margin-left: -10px;margin-right: -10px;}
.row-10 > div {padding-left: 10px;padding-right: 10px;}

.narrow {width: 992px;max-width: 100%;margin: 0 auto;}
.narrow-l {width: 1160px;}
.narrow-s {width: 767px;}
.narrow-xs {width: 500px;}

@media (max-width: 991px) {
	body {font-size: 13px;}
	.container {padding-left: 10px;padding-right: 10px;}
	.row-30 {margin-left: -10px;margin-right: -10px;}
	.row-30 > div {padding-left: 10px;padding-right: 10px;}
	.row-20 {margin-left: -10px;margin-right: -10px;}
	.row-20 > div {padding-left: 10px;padding-right: 10px;}
	.row-10 {margin-left: -10px;margin-right: -10px;}
	.row-10 > div {padding-left: 10px;padding-right: 10px;}
}


/* sticky footer */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}
.footer {
    flex-shrink: 0;
}

.highlight {color: #e83ca1;}

.btn.btn-cprimary {
    background: #e83ca1;
    border: 1px solid #e83ca1;
    color: #fff;
    font-weight: 400;
    padding: 10px 35px;
    margin: 0 20px 20px 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.btn.btn-cprimary:hover,
.btn.btn-cprimary:focus {
    background: #333;
    border-color: #333;
    color: #fff;
}
.btn.btn-cprimary:focus {
    border-color: rgba(255, 82, 9,.25);
    box-shadow: 0 0 0 .25rem rgba(255, 82, 9,.25);
}
.btn.btn-cprimary.btn-inverse {
    background: transparent;
    color: #e83ca1;
}
.btn.btn-cprimary.btn-inverse:hover {
    background: transparent;
    border-color: #333;
    color: #333;
}

.form-control::placeholder,
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #777;
    opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder,
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #777;
}
.form-control::-ms-input-placeholder,
::-ms-input-placeholder { /* Microsoft Edge */
    color: #777;
}

.w-30 {
    width: 30% !important;
}
.w-10 {
    width: 10% !important;
}

/* global
 **/

/* header */
header .section-header {
    background-color: #dadfe2;
}
header .langs .dropdown-menu {
    min-width: 30px;
}
header .btn-link {background: #009ba4;color: #FFF;}
header .btn-link .fa-solid {margin: 0;color: #FFF;padding: 0;}
header .btn-link:hover .fa-solid {color: #000;}

@media (max-width: 991px) {
    header .section-logo img {width: 100px;}
}

/* main */
main {
    /*overflow: auto;*/
    /*max-height: calc(100vh - 75px - 56px);*/
}

/* footer */
footer {
    abackground-color: #dadfe2;
}


.content {}
.content h1 {font-size: 2em;line-height: 2em;margin: 20px 0 20px 0;color: #000;font-weight: 900;}
.content h2 {font-size: 24px;line-height: 32px;font-weight: 600;margin: 20px 0 20px 0;color: #009ba4;}
.content h3 {font-size: 1.6em;line-height: 1.2;margin: 15px 0 15px 0;font-weight: 600;}
.content h4 {font-size: 16px;margin: 10px 0 10px 0;}
.content img {margin: 15px 0;max-width: 100%;height: auto;}
.content img.banner {margin: 0;}
.content img.no-margin {margin: 0;}
.content img.align-left {float: left;margin: 15px 20px 15px 0;}
.content img.align-right {float: right;margin: 15px 0 15px 20px;}
.content a {}
.content a:hover {}
.content strong {font-weight: 600;}
.content p {margin: 15px 0 15px 0;}
.content table {border: 0;margin: 10px 0;border-collapse: collapse;max-width: 100%;}
.content table tr th {vertical-align: top;text-align: left;border: 0;padding: 4px 12px;border: 1px solid #DDD;font-size: 13px;background: #F1F1F1;color: #000;}
.content table tr td {border: 0;padding: 6px 10px;border: 1px solid #DDD;}
.content table p {margin: 0;}
.content ul {list-style: square;padding: 0px;margin: 15px 0 15px 20px;}
.content ul li {padding: 0 0 0 5px;}
.content ul li ul {margin: 5px 0 5px 20px;}
.content ol {list-style: decimal;padding: 0px;margin: 15px 0 15px 30px;}
.content ol li {padding: 1px 0 1px 25px;}
.content hr {border: 0;background: none;padding: 0;border-bottom: 1px solid #CCC;height: 1px;margin: 15px 0;}
.content small {font-size: 11px;}

.content .control-label {display: inline-block;color: #777;font-size: 0.9em;font-weight: 600;margin-top: 5px;}
.content .data-label {display: inline-block;width: 100px;color: #777;font-size: 0.9em;font-weight: 600;}
.content .attributes {margin: 0 0 20px 0;}
.content .attributes p {margin: 5px 0 0 0;}
.content .attributes .data-label {width: 200px;}

.content .alert {}
.content .alert .date {color: #777;display: inline-block;width: 140px;font-size: 0.9em;font-weight: 600;}
.content .messages-count {position: relative;top: -5px;left: 10px;width: 15px;height: 15px;display: inline-block;color: #FFF;font-size: 10px;text-align: center;line-height: 15px;background: #009ba4;border-radius: 100%;}

@media (max-width: 991px) {
    .content h1 {font-size: 1.6em;}
}

/* offcanvas */
.offcanvas.show {z-index: 1055;}

/* device data */
#device {
    text-align: left;
    position: relative;
    border-collapse: collapse;
    overflow: auto;
    max-height: 100%;
}
.sticky {
    position: sticky;
    top: 0;
}
#device > tbody > tr.active > td,
#device > tbody > tr > td:hover {
    cursor: pointer;
    background-color: rgba(0, 155, 164, .2);
}
#device tr[data-row-detail] {
    transition: .3s ease-in-out;
}
#device .charts-css {
    --color: rgba(0, 155, 164, 1);
    height: 200px;
    width: 100%;
    margin: 0 auto;
}
#device .charts-css td .data {
    transition-duration: 0.6s;
    transform: scale(0);
}
#device .charts-css td:hover .data {
    transform: scale(1);
}
#device .charts-css tr {
     transition-duration: 0.3s;
 }
#device .charts-css tr:hover {
    background-color: rgba(0, 0, 0, 0.2);
}
#device .charts-css tr:hover th {
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
}
#device .axes {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 250px 50px;
    grid-template-areas:
    "data-axis-1 chart data-axis-2"
    ". primary-axis .";
    background-color: #eee;
    width: 100%;
}
#device .axes > table {
    grid-area: chart;
}
#device .axes > .primary-axis {
    grid-area: primary-axis;
}
#device .axes > .data-axis-1 {
    grid-area: data-axis-1;
    writing-mode: tb-rl;
    transform: rotateZ(180deg);
}
#device .axes > .data-axis-2 {
    grid-area: data-axis-2;
    writing-mode: tb-rl;
    transform: rotateZ(360deg);
}

#device .chart-container {
    position: relative;
    height: 200px;
    width: 100%;
    margin: 0 auto;
}
#device .chart-container canvas {
    width: 100%;
    amargin: 0 auto;
}

.chart-container canvas {min-height: 60vh;}
.chart-container-auto canvas {min-height: 200px;}

.chart-container-device-day {margin: 20px 0;}
.chart-container-device-day canvas {min-height: 250px;}
#device-day {width: 100% !important;}

.section-header-item {margin: 20px 0;padding-bottom: 20px;border-bottom: 2px solid #000;}
.section-header-item h1 {margin : 0;}
.section-header-item .subtitle {color: #777;font-size: 1.1em;font-weight: 300;margin: 5px 0 0 0;}
.section-header-item .data-label {width: auto;margin-right: 12px;}

.section-devices {}
.section-devices .item {aborder-bottom: 2px solid #757575;padding: 20px;background: #FFF;}
.section-devices .item-0 {opacity: 0.5;}
.section-devices .item img {margin: 0;}
.section-devices .item h3 {margin-top: 0;}
.section-devices .item p {margin: 5px 0;}
.section-devices .item .state {}
.section-devices .item .state span {display: inline-block;width: 15px;height: 15px;border-radius: 15px;margin: 0 12px 0 0;}
.section-devices .item .state-1 {color: #71af58;}
.section-devices .item .state-1 span {background: #71af58;}
.section-devices .item .state-0 {color: #DD0000;}
.section-devices .item .state-0 span {background: #DD0000;}


.section-device {}
.section-device .device-values {}
.section-device .device-values form {margin: 0 0 20px 0;}
.section-device .device-values .value {color: #009ba4;}
.section-device .device-values .value-description {color: #777;font-size: 0.8em;}

.modal {}
.modal-content {border-radius: 0;}
.modal-header {}
.modal-header h1 {color: #000;font-weight: 600;font-size: 1.6em;}
.modal-filter {background: #dadfe2;padding: 10px;}

.device-graphs {}
.device-graphs .btn {margin-bottom: 5px;}

.nav-pills {}
.nav-pills .nav-link {border-radius: 0;color: #000;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background: #009ba4;}

.card {border: 0;border-radius: 0;}

.section-profile {}
.section-profile input.form-control {background: #f4f4f4;}
.section-profile select.form-control {background: #f4f4f4;}
.section-profile .form-check-input:checked {background: #f4f4f4;border-color: #f4f4f4;}