body {
    background-color: #edf2f7;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    padding-bottom: 25px;
}

h1 {
    color: #0c1323;
    font-weight: bold;
}

.hidden {
    display: none !important;
}

.fs-14 {
    font-size: 14px !important;
}

.btn-outline-success {
    border-width: 2px;
}

.form-switch,
.form-switch-inline {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-around !important;
  }

.wait-container {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eee;
    opacity: 0.7;
}
.wait-container-spinner {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
.wait-container-spinner.spinner:before {
    border: 4px solid #b4b5c0;
}

.smart-box {
    position: relative;
    border-radius: 15px;
    padding: 15px 20px;
    box-shadow: 0px 0px 9px -4px gray;
    display: flex;
    cursor: pointer;
    border: solid 2px transparent;
}
.smart-box.active {
    border: solid 2px #fadba0;
    box-shadow: 0px 0px 9px -4px #ffd27d;
    background-color: #fffbf5 !important;
}
.smart-box.inactive {
    background-color: #f5f5f5 !important;
}
.smart-box.inactive * {
    opacity: 0.7;
    filter: grayscale(100%);
}

.smart-icon {
    width: 40px;
    height: 40px;
    fill: #161d2c;
    background-color: #e7e7e7;
    border-radius: 50%;
    padding: 5px;
    margin-right: 10px;
}

.smart-icon-artifical-sun {
    width: 18px;
    height: 18px;
    fill: #947334;
    position: absolute;
    top: 18px;
    left: 11px;
}

.smart-box-title {
    font-size: 11px;
    font-weight: bold;
}

.smart-box-icon-wrapper {
    position: relative;
}

.smart-box-icon-alternative {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 16px;
    height: 16px;
    fill: #a7a7a7;
}
.smart-box-inline-icon {
    width: 16px;
    height: 16px;
    fill: #a7a7a7;
}
.smart-box-vertical-center {
    display: flex;
    align-content: center;
}

.smart-icon-loader {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    /*border: dashed 2px green;
    transform: rotate(381deg);*/
}
.smart-icon-loader.status-on {
    border: solid 2px #198754;
}
.smart-icon-loader.status-off {
    border: solid 2px #bb2d3b;
}
.smart-icon-loader.status-warning {
    border: solid 2px #ffca2c;
}

.smart-box-text-status {
    font-size: 14px;
}
.smart-box-content-wrapper {
    align-items: flex-start;
    height: 100%;
}

.smart-box-data {
    font-size: 11px;
}

.smart-box-floating-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    box-shadow: 0px 0px 15px -1px gray;
    /*display: none;*/
}

.smart-box-floating-menu h4 {
    padding-bottom: 3px;
    border-bottom: solid 2px #e7e7e7;
}

.smart-box-floating-menu-close-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    margin: 15px 20px;
    fill: #212529;
    cursor: pointer;
}

.greenhouse-light-scheduler-table,
.veranda-light-scheduler-table {
    max-width: 500px;
}

.greenhouse-light-scheduler-table thead th,
.veranda-light-scheduler-table thead th {
    font-size: 14px;
}

.scheduler-row .time-on,
.scheduler-row .time-off {
    width: 65px;
}


.spinner {
    border: 0 !important;
}
.spinner:before {
    content: "";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #b4b5c0;
    border-right: 2px solid transparent !important;
    width: 100%;
    height: 100%;
}

.spinner.success:before,
.spinner.status-on:before {
    border-color: #198754;
}
.spinner.warning:before,
.spinner.status-warning:before  {
    border-color: #ffca2c;
}
.spinner.danger:before,
.spinner.status-off:before  {
    border-color: #bb2d3b;
}

.spinner:before {
    -webkit-animation: animation-spinner 0.68s linear infinite;
    animation: animation-spinner 0.6s linear infinite;
}

@-webkit-keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* BEGIN :: slider */
.slidecontainer {
    width: 100%; /* Width of the outside container */
  }

  /* The slider itself */
  .slider {
    width: 250px;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    /*width: 100%;*/ /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }
/* END :: slider */