.main-menu-active {
    background-color: rgba(212, 212, 212, 0.76);
}

.row-inactive {
    opacity: 0.3;
}

.error-badge {
    text-align:    center;
    line-height:   50px;
    height:        50px;
    width:         50px;
    background:    #f0506e;
    color:         #ffffff;
    border-radius: 25px;
    margin-left:   5px;
}

/* Error log */
.log-level-0 {
    background-color: rgba(255, 103, 103, 0.25);
    color:            #CC3D3D;
}

/* Warning log */
.log-level-1 {
    background-color: rgba(255, 193, 103, 0.25);
    color:            #FFBA4A;
}

/* Info log */
.log-level-2 {
    background-color: rgba(103, 179, 255, 0.25);
    color:            #ADD3FF;
}

/* Debug log */
.log-level-3 {
    background-color: rgba(209, 209, 209, 0.15);
    color:            #D1D1D1;
}

/* Fatal log */
.log-level-4 {
    background-color: rgba(204, 61, 61, 0.75);
    color:            #fff;
}

.table-fixed {
    table-layout: fixed;
}

.hidden {
    display: none;
}

.fixed-container {
    position:         fixed;
    background-color: #000000;
    top:              50%;
    left:             50%;
    max-width:        500px;
    transform:        translate(-50%, -50%);
    pointer-events:   none;
    border:           1px solid #ffffff;
    box-shadow:       0 0 3px 3px rgba(0, 0, 0, 0.25);
    z-index:          999;
}

.fixed-container > * {
    width:  100%;
    height: 100%;
}

form > div {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.log-tooltip {
    max-width:  400px;
    font-size:  15px;
    padding:    12px;
    word-break: break-all;
}

.receipts-list > li {
    white-space: pre-line;
}

.padding-inherit {
    padding: inherit;
}

.button-selected {
    background-color: #5bc53a;
    color:            #fff;
    border:           1px solid transparent;
}

.button-selected:hover,
.button-selected:focus {
    background-color: #57a836;
    color:            #fff;
}

.button-selected:active,
.button-selected.uk-active {
    background-color: #44872a;
    color:            #fff;
}

#breadcrumbs {
    background:    rgba(212, 212, 212, 0.25);
    text-align:    center;
    padding:       6px 0;
    margin-bottom: 24px;
}

#breadcrumbs li,
#breadcrumbs a {
    font-size: 16px;
    color:     #666666;
}

.navbar-height-small > div > ul > li > a {
    height: 60px !important;
}

.navigate-top {
    position:   fixed;
    bottom:     25px;
    right:      25px;
    display:    inline-block;
    padding:    5px;
    background: #f8f8f8;
}

tbody > tr > th {
    background: rgba(30, 135, 240, 0.1);
    color:      #000000 !important;
}

#config-messages-info {
    background-color: #d1e6ec;
    padding:          5px 5px 5px 10px;
}

#pagination a {
    cursor: pointer;
}

.text-pos {
    color: #008000;
}

.text-neg {
    color: #DC143C;
}

.page-link.disabled {
    pointer-events: none;
    cursor:         default !important;
    color:          #767676 !important;
}

button.cancelBtn {
    border: 1px solid #767676 !important;
    color:  #ffffff !important;
}

table.transparent-table td,
table.transparent-table th {
    background: transparent;
    padding:    0.5rem 0.75rem;
}

table.transparent-table th {
    color: #ffffff !important;
}

table.transparent-table th {
    font-weight: bold;
}

table.transparent-table.vertical th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

table.transparent-table.horizontal th {
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.contained-img {
    max-width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.darker {
    background-color: #00000066;
}

.semi-transparent-border {
    border:        1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.white-space-pre-line {
    white-space: pre-line;
}

th.min-size,
td.min-size {
    width: 1px;
}

#recent-events-auto-update {
    height:        17px;
    width:         17px;
    border-radius: 50%;
    display:       inline-block;
}

.area-pos {
    background-color: #008000;
}

.area-neg {
    background-color: #DC143C;
}

.text-small {
    font-size: 0.8rem;
}

.device-icon {
    transform: scaleX(0.85);
}

.grid-panel {
    display:       flex;
    margin:        5px 0;
    border:        1px solid #404040;
    border-radius: 3px;
}

.grid-panel > .grid-panel-box:first-of-type {
    border-right: 1px solid #404040;
    font-weight:  bold;
}

.grid-panel > .grid-panel-box {
    padding: 10px;
}

.table-header {
    background:    #1A1A1A;
    padding:       0.75rem;
    border:        1px solid #404040;
    border-radius: 3px;
    display:       flex;
    margin-bottom: 0.75rem;
}

.overview-container {
    max-height:    90px;
    line-height:   23px;
    overflow-y:    auto;
    padding:       0.35rem 1.25rem 0.35rem 0.75rem;
    border:        1px solid #404040;
    border-radius: 3px;
    white-space:   nowrap;
    display:       inline-block;
    min-width:     150px;
    min-height:    36px;
    text-align:    center;
}

.overview-container.all-synced-true {
    border: 1px solid #baff91 !important;
}

.overview-container.all-synced-false {
    border: 1px solid #ff7a7a !important;
}

.overview-container li.synced-true {
    color: #baff91;
}

.overview-container li.synced-false {
    color: #ff7a7a;
}

.overview-container::-webkit-scrollbar {
    background: #404040;
    width:      9px;
    z-index:    100;
}

.overview-container::-webkit-scrollbar-thumb {
    background:    rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.table-row-toggler {
    width:                      25px;
    height:                     25px;
    line-height:                25px;
    margin:                     -0.5rem 0 0.5rem -0.5rem;
    background:                 #02B088;
    cursor:                     pointer;
    text-align:                 center;
    font-size:                  1.75rem;
    border-bottom-right-radius: 7px;
}

.toggleable-row > td {
    border-top: 1px solid #02B088 !important;
}

.flex-label {
    display:     flex;
    align-items: center;
}

.flex-label > * {
    margin-bottom: 10px;
}

.flex-label > .label-icon {
    height:          14px !important;
    background-size: contain !important;
    margin-left:     5px;
}

#global-notification-container {
    position:   fixed;
    width:      100%;
    height:     100%;
    background: rgba(0, 0, 0, 0.75);
    z-index:    9999;
}

#global-notification {
    position:        absolute;
    width:           500px;
    height:          200px;
    left:            50%;
    top:             50%;
    background:      #1A1A1A;
    box-shadow:      0 0 7px #000;
    transform:       translate(-50%, -50%);
    border:          1px solid #404040;
    border-radius:   7px;
    display:         flex;
    flex-direction:  column;
    justify-content: space-evenly;
}

#global-notification > .title {
    font-size:   1.5rem;
    font-weight: bold;
}

#global-notification > * {
    text-align: center;
    padding:    0.75rem;
}

.passing-row > td {
    transition: 0.5s background-color linear;
}

.passing-row.highlighted > td {
    background-color: #505050 !important;
}

table .col-log-sys-component > div {
    margin-left: auto;
    max-width:   150px;
    font-size:   0.8rem;
    color:       #fff;
    text-align:  center;
}

#video-container {
    position:   relative;
    min-height: 95px;
}

#video-container.full-screen {
    position:   fixed !important;
    width:      100%;
    height:     100%;
    left:       0;
    top:        0;
    background: #000000;
    z-index:    1051;
}

.video-paused-overlay {
    position:       absolute;
    left:           50%;
    top:            50%;
    transform:      translate(-50%, -50%);
    display:        inline-block;
    background:     #ffffff25;
    color:          #ffffff75;
    padding:        20px;
    font-size:      2rem;
    border-radius:  7px;
    pointer-events: none;
}

.video-buttons-overlay {
    position:        absolute;
    display:         flex;
    justify-content: space-between;
    left:            0;
    bottom:          0;
    background:      #ffffff40;
    width:           100%;
    padding:         5px;
}

.video-buttons-overlay .video-player-btn {
    width:         35px;
    outline:       none;
    border:        none;
    padding:       8px 5px;
    color:         #02af88;
    background:    #1a1a1a;
    font-size:     0.8rem;
    border-radius: 3px;
}

.highlighted {
    color: #ffe8a1;
}

.main-table-row {
    cursor: pointer;
}

.main-table-row:hover {
    background: #545454;
}

.openable {
    background: #313131;
}

.display-none {
    display: none;
}

.component-container {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-start;
    line-height:     1.8;
}

.component-box {
    background:    #1f1f1f;
    border:        1px #696969 solid;
    border-radius: 10px;
    width:         310px;
    padding:       15px;
    margin:        25px;
    white-space:   nowrap;
}

.component-box:hover {
    cursor:     pointer;
    background: #545454;
}

.border-bottom-custom {
    border-bottom: 1px solid #3f3f3f;
}

.hr {
    border:      none;
    border-left: 3px solid #373737;
    height:      20px;
    width:       1px;
    float:       right;
}