html {
    height: 100%;
}
body {
    font-family: Helvetica, sans-serif;
    background-color: #F2F2F6;
    /* background-color: #FAFAFB; */
    color: #212529;
    min-height: 100%;
}

option:disabled {
    color:rgb(200, 200, 200) !important;
}

@media (min-width: 768px) {
    .modal-xl {
      width: 90%;
      max-width:1200px;
    }
}

.btn-link.active {
    text-decoration: underline;
    font-weight: bold;
}
.btn-link-danger {
    color: #A00;
}
.btn-link-danger:hover {
    color: #900 !important;
}
.btn-link {
    margin-top: -2px;
    padding-top: 0;
    padding-bottom: 0;
}
.btn-link-small {
    border: 0;
    margin: 0;
    margin-top: -2px;
    padding: 0;
}

.modal-dialog {
    margin-top: 150px;
}

.big-background {
    position: relative;
}
.big-background:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url('/img/pattern_bkg.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    z-index: -1;
}
.big-background-remove:before {
    opacity: 0;
    transition: opacity .5s;
}

#page {
    padding-bottom: 50px;
}

#loggedOutNav.bg-dark, #loggedOutNav .bg-dark {
    background-color: rgba(20, 24, 28, 0.8) !important;
}
#loggedInNav.bg-dark, #loggedInNav .bg-dark {
    background-color: #212529 !important;
}

#pageHeader {
    padding: 0;
}
#loggedInNav, #loggedOutNav {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    z-index: 9999999;
}
.navbar-text {
    margin-right: 20px;
}
.navbar-button {
    margin-top: 3px;
}
.dropdown-menu {
    background-color: transparent !important;
    background-color: #212529 !important;
}
.dropdown-item {
    color: rgba(255,255,255,.5) !important;
    background-color: transparent !important;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .dropdown-item:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .dropdown-item:hover {
    color: #FFF !important;
}

.loginView .card {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

#registerView {
    background-color: #FAFAFB !important;
    border-radius: 20px;
    padding: 20px;
}

#deviceViewUSB {
    display: none;
}

form input, form select, .commandDurationDisplayContainer, .rangeInput {
    max-width: 488px;
}

@media (max-width: 575px) {
    form label.text-right { 
        text-align: center !important;
    }
}

.connectButtonBLE, .connectButtonUSB {
    display: none;
}

#devicesContainer {
    margin-top: 0 !important;
}
#deviceConnectButtons {
    text-align: right;
    padding-top: 5px;
    padding-right: 25px;
}

.vPageBlock {
    margin-top: 25px;
    margin-bottom: 50px;
}
.vPageFooterBlock {
    margin-top: 100px;
    margin-bottom: 50px;
}
.vPageHeader {
    margin-bottom: 32px;
}

.view, .connectedDevice, .connectedWifi, .connectedBLE, .connectedUSB {
    display:none;
}
.viewContainer {
    /* width:900px; */
    margin: 0 auto;
    padding-top: 150px;
}
.deviceViewContainer {
    margin-bottom: 20px;
}
.tooltip {
    pointer-events: auto !important;
}
.deviceItemContainer {
    border-radius: 20px;
    background-color: #F6F6F6;
    overflow: hidden;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%);
}
.deviceItemLine {
    background-color: #FFF;
    padding: 20px;
    cursor: pointer;
    overflow: auto;
    clear: both;
}
.deviceItemTitle {
    max-width: 110px;
    padding: 0;
}
.deviceItemConnectionIcons {
    max-width: 120px;
}
.deviceItemConnectionIcons i:not(:last-child) {
    margin-right:10px;
}
.deviceItemExpanded {
    display: none;
    padding: 20px;
    clear: both;
    overflow: auto;
}

.clientBrowserListItem {
    padding: 10px;
    background: #FFF;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%);
}

.deviceItemInfo {
    margin-bottom: 20px;
}
.claimButton {
    margin-left: 35px;
}


.slot {
    clear: both;
    overflow: auto;
}
.slotName {
    min-width: 105px;
    padding-top: 2px;
}
.slots button {
    margin-right: 10px;
}
.slot {
    margin-bottom: 15px;
    background: #FFF;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 10%);
    border-radius: 10px;
    padding: 10px;
}
.deviceID, .deviceName {
    font-weight: bold;
}
.deviceItemStatus {
    margin-left: 10px;
    margin-right: 5px;
}

.templateDataSet {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    background: #FFF;
    margin-bottom: 5px;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 10%);
}
.templateDataSet .btn {
    float:right;
    padding: 0 10px;
}
.roundedContainer {
    background-color: #FFF;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%);
}

.webRevealListItem {
    width: 100%;
    padding: 10px;
    background: #FFF;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%);
    border-radius: 10px;
    margin-bottom: 10px;
}

.customerWebPageItem {
    background-color: #FFF;
    border-bottom: solid 1px #ddd;
    padding: 5px;
}

#customerWebPageEditor {
    margin-top: 40px;
    display: none;
}
.imagePreview {
    max-width: 100%;
    height: auto;
}

.btn-sm {
    padding: 1px 6px;
}

.verifyGreen {
    color: #0B0;
}
.verifyRed {
    color: #F24;
}
.connectBlue {
    color: #07F;
    box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.3);
    background-color: rgba(0, 255, 255, 0.3);
}
.connectingOrange {
    color: #FA6;
}
.disconnectGrey {
    color: #888;
}

.greyout {
    color: #888;
}
.tooltip {
    pointer-events: none;
}
.text-grey {
    color: #888 !important;
}

input:focus{
    outline: 0 0 0 0  !important;
    box-shadow: 0 0 0 0 !important;
}

small {
    color: #888;
}

.positionDataInput {
    width: 70px;
}

.loginView .container {
height: 100%;
align-content: center;
}

.loginView .card{
height: 370px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}

.loginView .social_icon span{
font-size: 60px;
margin-left: 10px;
color: #007bff;
}

.loginView .social_icon span:hover{
color: white;
cursor: pointer;
}

.loginView .card-header h3{
color: white;
}

.loginView .social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.loginView .input-group-prepend span{
width: 50px;
background-color: #007bff;
color: white;
border:0 !important;
}

.loginView .remember{
color: white;
}

.loginView.remember input {
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.loginView .login_btn{
width: 100px;
}

.loginView .links{
color: white;
}

.loginView .links a{
margin-left: 4px;
}

.loginView p {
    color: #F6F6F6;
}




@media (min-width:768px) {
    .header-blue {
        padding-bottom: 120px
    }
}

.header-blue .navbar {
    background: transparent;
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    border: none
}

@media (min-width:768px) {
    .header-blue .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem
    }
}

.header-blue .navbar .navbar-brand {
    font-weight: bold;
    color: inherit
}

.header-blue .navbar .navbar-collapse {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: .5rem
}

@media (min-width:768px) {
    .header-blue .navbar .navbar-collapse {
        border-color: transparent;
        margin: 0
    }
}

.header-blue .navbar .navbar-collapse span .login {
    color: #fff;
    margin-right: .5rem;
    text-decoration: none
}

.header-blue .navbar .navbar-collapse span .login:hover {
    color: #fff
}

.header-blue .navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3)
}

.header-blue .navbar .navbar-toggler:hover,
.header-blue .navbar-toggler:focus {
    background: none
}

@media (min-width: 768px) {
    .header-blue .navbar-nav .nav-link {
        padding-left: .7rem;
        padding-right: .7rem
    }
}

@media (min-width: 992px) {
    .header-blue .navbar-nav .nav-link {
        padding-left: 1.2rem;
        padding-right: 1.2rem
    }
}

.header-blue .navbar.navbar-light .navbar-nav .nav-link {
    color: #fff
}

.header-blue .navbar.navbar-light .navbar-nav .nav-link:focus,
.header-blue .navbar.navbar-light .navbar-nav .nav-link:hover {
    color: #fcfeff !important;
    background-color: transparent;
}

.header-blue .navbar .navbar-nav>li>.dropdown-menu {
    margin-top: -5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    border-radius: 2px;
}

.header-blue .action-button,
.header-blue .action-button:not(.disabled):active {
    border: 1px solid rgb(255, 255, 255);
    border-radius: 40px;
    color: #fff;
    box-shadow: none;
    text-shadow: none;
    padding: .3rem .8rem;
    background: transparent;
    transition: background-color 0.25s;
    outline: none
}

.header-blue .action-button:hover {
    color: #fff
}

.header-blue .navbar .form-inline label {
    color: #d9d9d9
}


.listSearchContainer {
    border-radius: 10px;
    background-color: #EEE;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 10%);
}
.listSearch {
    padding: 5px;
    border-radius: 10px 10px 0 0;
    clear: both;
    overflow: auto;
    background-color: #DDD;
}
.searchFilterButton {
    float: right;
    padding: 0 5px;
    margin: 0;
}

.searchInput {
    height: 26px;
    border-radius: 5px;
    border: 1px solid #888;
}
.searchFilterList {
    color: #666;
    display: inline;
    line-height: 26px;
}
.searchFilterContainer {
    background-color: #FFF;
    color: #444;
    border-radius: 5px;
    padding-left: 4px;
    display: inline-block;
    margin-right: 10px;
    line-height: 21px;
}
.filterField {
    font-weight: bold;
}
.filterValue {
    font-weight: bold;
}
.searchFilterRemoveButton {
    background-color: #F24;
    color: #FFF !important;
    border-radius: 0 5px 5px 0;
    padding: 2px 4px;
    cursor: pointer;
    margin-left: 5px;
}

.context-menu-list {
    box-shadow: none;
    border: 1px solid #f3f3f3
}
.context-menu-list {
    position: absolute;
    display: inline-block;
    min-width: 13em;
    max-width: 26em;
    padding: .25em 0;
    margin: .3em;
    font-family: inherit;
    font-size: inherit;
    list-style-type: none;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: .2em;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5)
}
.context-menu-item {
    position: relative;
    padding: 0.5em 6em;
    color: #2f2f2f;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
}
.context-menu-list .context-menu-item.context-menu-hover {
    background-color: #212529;
    color: #fff
}
.context-menu-separator {
    padding: 0;
    margin: .35em 0;
    border-bottom: 1px solid #e6e6e6
}

.searchFilterModal select, .searchFilterModal input:not([type='checkbox']) {
    height: 30px;
}
.searchFilterModal input[type='checkbox'] {
    margin: 10px;
    line-height: 15px;
}
.searchFilterModal input[type='checkbox']:not(:checked):after {
    content: ' false';
    margin-left: 20px;
}
.searchFilterModal input[type='checkbox']:checked:after {
    content: ' true';
    margin-left: 20px;
}
.searchFilterModal input {
    margin-top: 1px;
}

table.pageListTable {
    border-collapse: collapse;
    min-width: 100%;
    font-family: Arial, Helvetica, sans-serif
}
tr.pageListTableHeader th, tr.pageListTableRow td {
    border: 1px solid #DDD;
    padding: 3px 6px;
}
tr.pageListTableRowExpansion td {
    border: 1px solid #DDD;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
}
tr.pageListTableHeader th {
    text-align: left;
    background-color: #3b7bc4;
    color: #FFF;
    cursor: pointer;
}
tr.pageListTableRow {
    cursor: pointer;
    background-color: #FFF;
}
tr.pageListTableRow.odd {
    background-color: #F2F2F2;
}
tr.pageListTableRow:hover {
    background-color: #DDF !important;
}
tr.pageListTableRow.expanded {
    background-color: #CCF !important;
}
tr.pageListTableRowExpansion {
    box-shadow: inset 0  5px 5px -5px #444, 
                inset 0 -5px 5px -5px #444;
}
tr.pageListTableRow.expanded td {
    border-bottom: none;
}
tr.pageListTableRow.expanded:hover {
    background-color: #DDF !important;
}

.pageList {
    background-color: #FFF;
    overflow: auto;
}
.pageListItem {
    padding: 2px 10px;
    min-height: 44px;
    line-height: 40px;
}
.pageListItem:not(:last-child) {
    border-bottom:1px solid #AAA;
}
.pageOptions {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
.paginationButtonContainer {
    flex: 1;
    justify-content: space-between;
    text-align: center;
}
a.paginationButton {
    cursor: pointer;
    text-decoration: underline !important;
    color: #444 !important;
}
a.paginationButton.disabled {
    cursor: default !important;   
    text-decoration: none !important;
    color: #888 !important;
}

.adminButtonLine {
    margin: 10px 0;
}
.adminButtonLine .btn {
    margin-right: 10px;
}