﻿body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size:16px;
}

/*  Home page  */
.module {
    min-height: 35vh;
    border-radius: .375rem;
}

/*  Sign up page  */
.under-construction {
   
    height: 500px;
  font-size:60px;

    display: flex;
    justify-content: center;
    align-items: center;

}
/*  Login page  */
.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

/* ============== Nav =========================================== */
.nav-link svg, .dropdown-item svg {
    fill: var(--bs-primary)
}

.dropdown-item.active svg, .dropdown-item:active svg {
    fill: rgba(var(--bs-light-rgb));
}

.dropdown-item svg .icon-bg {
    fill: red;
}


.dropdown-item.active .icon-bg {
}



/* Arrow back to previous page nav */
.btn-back {
    --bs-btn-back-color: #000;
    --bs-btn-back-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
    --bs-btn-back-opacity: 0.75;
    --bs-btn-back-hover-opacity: 0.85;
    --bs-btn-back-focus-shadow: 0 0 0 0.25rem rgba(14, 173, 5, 0.25);
    --bs-btn-back-focus-opacity: 1;
    --bs-btn-back-disabled-opacity: 0.25;
    --bs-btn-back-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    font-size: x-large;
    padding: 0.25em 0.25em;
    color: var(--bs-btn-back-color);
    background: transparent var(--bs-btn-back-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: var(--bs-btn-back-opacity);
}

    .btn-back:hover {
        color: var(--bs-btn-back-color);
        text-decoration: none;
        opacity: var(--bs-btn-back-hover-opacity);
    }

    .btn-back:focus {
        outline: 0;
        box-shadow: none;
        opacity: var(--bs-btn-back-focus-opacity);
    }

    .btn-back:disabled, .btn-back.disabled {
        pointer-events: none;
        user-select: none;
        opacity: var(--bs-btn-back-disabled-opacity);
    }

.btn-back-white {
    filter: var(--bs-btn-back-white-filter);
}

[data-bs-theme=dark] .btn-back {
    filter: var(--bs-btn-back-white-filter);
}



/* Add the "caret-off" class to any "dropdown-toggle" classes to remove the dropdown caret*/
.dropdown-toggle.caret-off::after,
.dropdown-toggle.caret-off::before {
    display: none;
}

input {
    caret-color: var(--bs-body-bg);
}


.accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-btn-bg);
}

.accordion-item {
    border-width: 0;
}

.accordion-body {
    padding-top: 0;
    padding-bottom: 0;
}


/* Footer     */
footer {
}


/*  ==== Custom Plantrak device type styles ============================ */


/* ========== RESERVOIR styles ==================== */
/*  Reservoir range slider styles */

.form-range-reservoir:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(11, 181, 216, 0.25);
}

.form-range-reservoir:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(11, 181, 216, 0.25);
}

.form-range-reservoir::-webkit-slider-thumb {
    background-color: #0bb5d8;
}

    .form-range-reservoir::-webkit-slider-thumb:active {
        background-color: #9de1ef;
    }

.form-range-reservoir::-moz-range-thumb {
    background-color: #0bb5d8;
}

    .form-range-reservoir::-moz-range-thumb:active {
        background-color: #9de1ef;
    }


/*  Reservoir checkbox styles */
.form-check-reservoir:focus {
    border-color: #9de1ef;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(11, 181, 216, 0.25);
}

.form-check-reservoir:checked {
    background-color: #0bb5d8;
    border-color: #0bb5d8;
}

/*  Reservoir form-control styles */
.form-control-reservoir:focus {
    box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(11, 181, 216, 0.25);
}


/* ========== ROOT styles ==================== */
/*  Root range slider styles */
.form-range-root:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(186, 136, 60, 0.25);
}

.form-range-root:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(186, 136, 60, 0.25);
}

.form-range-root::-webkit-slider-thumb {
    background-color: var(--bs-brown);
}

    .form-range-root::-webkit-slider-thumb:active {
        background-color: var(--bs-light-brown);
    }

.form-range-root::-moz-range-thumb {
    background-color: var(--bs-brown);
}

    .form-range-root::-moz-range-thumb:active {
        background-color: var(--bs-light-brown);
    }


/*  Root checkbox styles */
.form-check-root:focus {
    border-color: var(--bs-light-brown);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(186, 136, 60, 0.25);
}

.form-check-root:checked {
    background-color: var(--bs-brown);
    border-color: var(--bs-brown);
}


/*  Root form-control styles */
.form-control-root:focus {
    box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(186, 136, 60, 0.25);
}


/* ========== CONTROLLER styles ==================== */
.power-btn {
    border-radius: 4rem;
    width: 4rem;
    color: rgba(255, 255, 255, 0.75);
}

    .power-btn:hover {
        color: rgba(255, 255, 255, 0.75);
    }

.power-on {
    box-shadow: 0 0 .5rem .15rem #0ead05;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--bs-white);
}

    .power-on:hover {
        border-color: rgba(255, 255, 255, 0.75);
        color: var(--bs-white);
    }


.btn-power-off {
}

.btn-check:checked + .btn-power-off {
    color: var(--bs-white-50);
    border-color: var(--bs-primary);
    background-color: transparent;
}

.btn-power-on {
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active,
.btn:first-child:active, .btn.active, .btn.show {
}

.btn-check:checked + .btn-power-on {
    border-color: var(--bs-white);
    background-color: var(--bs-primary);
    color: var(--bs-white-50);
}


/*===========  Tables  ======================   */
.table-dark {
    --bs-table-bg: transparent;
}



/* =====   Incrementing numeric input and buttons      ===================*/
input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}



/* =====   Erics added for sensors from index.html      ===================*/

.loading-templates {
    font-size: 10px;
    opacity: .5;
}

.content {
    margin:1px;
    font-size:larger;
}
.data-point {
    font-size: 30px;
  
}
.data-field {
    font-size: 14px;
    color:navy;
}

.data-point-text {
    font-size: large;
}
.data-point-img {
    border: 1px solid black;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    margin:20px;
}