/** {box-sizing: border-box;}*/


@media (max-width: 905px) {
    .offcanvas-collapse {
        position: fixed;
        top: 56px; /* Height of navbar */
        bottom: 0;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        background-color: var(--gray-dark);
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .offcanvas-collapse.open {
        -webkit-transform: translateX(-1rem);
        transform: translateX(-1rem); /* Account for horizontal padding on navbar */
    }
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px 15px 15px 15px;
    margin-bottom: 10px;
}

.nav-scroller .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    color: gray;
}


.nav-underline .nav-link:hover {
    color: #00b0f0;
}

.nav-underline .active {
    font-weight: 500;
    color: gray;
}

.text-white-50 {
    color: rgba(255, 255, 255, .5);
}

.bg-purple {
    background-color: var(--purple);
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(136, 136, 136, .65);
}

.lh-100 {
    line-height: 1;
}

.lh-125 {
    line-height: 1.25;
}

.lh-150 {
    line-height: 1.5;
}

.wrapper {
    margin: 0 auto;
}

.wrapper ul {
    overflow: hidden;
    margin: 0 -10px;
    padding: 0;
    list-style: none;
}

.wrapper li {
    float: left;
    width: calc(25% - 20px);
    margin: 0 10px 20px 10px;
    padding: 1em;
}

#chart-separator {
    padding-top: 25px;
}


/*Base styles which will be subclassed*/

/*Style for very large screens.
max-width = if device is less than or equal do
min-width = if device is greater than or equal do
*/
@supports (display: grid) {
    .wrapper ul {
        overflow: hidden;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: 0px;
        margin: 0;
    }

    .wrapper li {
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 10px;
    }
}

.pad-container {
    padding: 10px;
    border-radius: 0px 0px 21px 21px;
    background: #00b0f0;
}

.pad-container-special {
    padding: 10px;
    border-radius: 0px 0px 21px 21px;
    background: #b1b1b1;
}

.pad-container-dev {
    padding: 10px;
    border-radius: 0px 0px 21px 21px;
    background: #8dc482;
}

.facility-container-header {
    padding: 5px 1px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    background-color: #1590ef;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    border-color: #ffffff;
    border-width: 1px;
    text-align: center;
    color: white;
}


.statistics-container-header {
    padding: 5px 1px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ef7617;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    border-color: #ffffff;
    border-width: 1px;
    text-align: center;
    color: white;
}
.statistics-container-body {
    padding-bottom: 10px;
    /*padding-left: 5px;*/
    /*padding-right: 5px;*/
    border-radius: 0px 0px 21px 21px;
    background: #e5b293;
}
.stat_facility_text{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: black;
}
.stat_dismiss_text{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: darkgreen;
}
.stat_false_alarms_text{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: darkred;
}
.stat_chart_views_text{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: black;
}

.facility-container-header-special {
    padding: 5px 1px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    background-color: #5a5858;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    border-color: #ffffff;
    border-width: 1px;
    text-align: center;
    color: white;
}

.facility-container-header-dev {
    padding: 5px 1px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    background-color: #004800;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    border-color: #ffffff;
    border-width: 1px;
    text-align: center;
    color: white;
}


@keyframes blink {
    50% {
        border-color: #ff0000;
        border-width: 2px;
    }
}

.pad-item {
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 15px 15px 15px 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100px;
    max-height: 100px;
    min-height: 80px;
    margin: 0 auto;
    /*background-color: #00b0f0;*/
}

.pad-item-alarm {
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 15px 15px 15px 15px;
    padding-top: 5px;
    padding-bottom: 10px;
    width: 100px;
    max-height: 100px;
    min-height: 80px;
    margin: 0 auto;
    /*background-color: #00b0f0;*/
    animation: blink .5s step-end infinite alternate;
}

.pad-item-name {
    font-size: 10px;
    color: white;
    text-align: center;
}

.pad-item-first-line {

}

.pad-item-number {
    font-size: 18px;
    color: white;
    text-align: center;
    padding-left: 15px;
    float: left;
    width: 80%;
}

.pad-item-alert-ball {
    /*font-size: 15px;*/
    max-width: 9px;
    max-height: 9px;
    min-width: 9px;
    min-height: 9px;
    float: left;
    border: 1px solid black;
    background-color: #a7a6a6;
    border-radius: 15px 15px 15px 15px;
}

.alert-ball-dark-blue-3m {
    background-color: #003a72;
}
.alert-ball-dark-blue-5m {
    background-color: #003a72;
}

.alert-ball-dark-blue-3m:before {
   content: "3m";
   font-size: 0.6rem;
   color: black;
}
.alert-ball-dark-blue-5m:before {
   content: "5m";
   font-size: 0.6rem;
   color: black;
}

.alert-ball-blue {
    background-color: dodgerblue;
}
.alert-ball-blue:before {
   content: "15s";
   font-size: 0.6rem;
   color: white;
}
.alert-ball-orange {
    background-color: orange;
}
.alert-ball-orange:before {
   content: "15m";
   font-size: 0.6rem;
   color: white;
}

.alert-ball-red {
    background-color: red;
}
.alert-ball-red:before {
   content: "30m";
   font-size: 0.6rem;
   color: white;
}
.chart-controls {
    text-align: center;
}

.btn-chart-control {
    width: 100px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.last-n-days-load-button-holder {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /*background-color: lightblue;*/
    /*color: black;*/
}

#loading-be-patient{
    visibility: hidden;
    margin-top: 50px;
}

#loading-be-patient-p{
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.5;
    color: #dc3545;
}

.last-n-days-load-button {
    text-align: center;
    width: 300px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.btn-primary-red {
    color: #fff;
    background-color: #dd2212;
    border-color: #c80707;
}

.btn-primary-red:hover {
    color: #fff;
    background-color: #ba1506;
    border-color: #c80707;
}


.pad-item-status {
    font-size: 13px;
    color: white;
    text-align: center;
}

.pad-item-undetected {
    background-color: #a7a6a6;
}

.table-inapp-manual {
    border-spacing: 2px;
    border-collapse: collapse;
    min-width: 100%;
}

.table-inapp-manual td, .table-inapp-manual th {
    padding: 5px;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    /* font-size: 15px; */
    text-align: center;
}

.inapp-manual-title {
    font-size: 20px;
    color: #2566f0;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.inapp-manual-contact {
    color: #00b0f0;
    font-weight: bold;
}

.manual-pad-base {
    max-width: 50px;
    min-width: 50px;
    border: 1px solid rgba(0, 0, 0, 0.8);
    float: left;
    min-height: 50px;
    border-radius: 5px 5px 5px 5px;
    border: 1px;
    border-color: white;
}

.manual-pad-button-text {
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    color: white;
}

.manual-pad-button-text-black {
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    color: black;
}

.inapp-manual-description-text {
    font-family: Verdana;
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding-top: 10px;
}

.pad-item-occupied {
    background-color: #92d150;
}

.pad-item-before-first {
    background-color: #00b0f0;
}

.pad-item-before-second {
    background-color: #00b0f0;
}

.pad-item-before-third {
    background-color: #00b0f0;
}

.pad-item-before-fourth {
    background-color: #00b0f0;
}

.pad-item-before-fifth {
    background-color: orange;
}

.pad-item-after-fifth {
    background-color: #c72114;
}

.pad-item-standby {
    background-color: #ffffff;
    border: 1px solid black;
    color: black;
}

.black-text{
    color: black;
}

.pad-item-error {
    background-color: rgba(215, 215, 215, 1);
    color: black;
}


.pad-legend {
    padding-right: 10px;
    font-size: 15px;
    max-width: 90px;
    min-width: 50px;
    min-heigth: 50px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.8);
    float: left;
}


.table td, .table th {
    padding: .2rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    /*font-size: 15px;*/
    text-align: center;
}


.table-sensor-list {
    font-size: 14px;
}

.table-user-interactions {
    font-size: 14px;
}

.table-alerts {
    font-size: 14px;
}

/* Style for screens up to 1021px
max-width = if device is less than or equal do
min-width = if device is greater than or equal do
 */
@media (max-width: 1250px) {
    @supports (display: grid) {
        .wrapper ul {
            overflow: hidden;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-gap: 20px;
            margin: 0;
        }

        .wrapper li {
            width: auto;
            min-height: auto;
            margin: 0;
            padding: 0;
        }
    }

    .pad-container {
        /*background: green;*/
    }

    .pad-item {

    }


    .pad-item-number {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .pad-item-name {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}


/*Style for phones
max-width = if device is less than or equal do
min-width = if device is greater than or equal do
*/
@media (max-width: 750px) {
    @supports (display: grid) {
        .wrapper ul {
            overflow: hidden;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            margin: 0;
        }

        .wrapper li {
            width: auto;
            min-height: auto;
            margin: 0;
            padding: 0;
        }

        .pad-container {
            /*background: yellow;*/
        }

        .pad-item {
            width: 80px;
            max-height: 80px;
            padding-top: 10px;
            padding-bottom: 20px;
        }

        .pad-item-number {
            font-size: 10px;
            padding-top: 0px;
            padding-bottom: 2px;
        }

        .pad-item-name {
            padding-top: 0px;
        }

        .pad-item-number {
            font-size: 14px;
        }

        .pad-item-status {
            font-size: 12px;
        }

    }
}


.bootstrap-table .table:not(.table-condensed), .bootstrap-table .table:not(.table-condensed) > tbody > tr > td, .bootstrap-table .table:not(.table-condensed) > tbody > tr > th, .bootstrap-table .table:not(.table-condensed) > tfoot > tr > td, .bootstrap-table .table:not(.table-condensed) > tfoot > tr > th, .bootstrap-table .table:not(.table-condensed) > thead > tr > td {
    /*padding: 2px;*/
    padding: 1px;
}







table.stat_table {
  /*background-color: #EEE7DB;*/
  width: 100%;
  text-align: center;
  /*border-collapse: collapse;*/
}
table.stat_table td, table.stat_table th {
  padding: 3px 2px;
  padding-top: 8px;
  width: 100px;
}
table.stat_table td {
  /*border-bottom: 1px solid #AAAAAA;*/
  padding: 3px 2px;
  padding-top: 8px;
  width: 100px;
}

table.stat_table tbody td {
  font-size: 13px;
}
table.stat_table tr:nth-child(even) {
  /*background: #F5C8BF;*/
}
table.stat_table thead {
  background: #f38e42;
}
table.stat_table thead th {
  font-size: 15px;
  /*font-weight: bold;*/
  color: #FFFFFF;
  text-align: center;
}