/*  COLORS   */

.topbar-color{ background-color: #000000; }
/* .sidebar-color{ background-color: #222222; }   <-- see sb-admin.css to set side nav color  */
.container-bg-color{ background-color: #333333; } 

.text-color-primary{ color: #f15a24; }
.text-color-white{ color: #ffffff; }
.text-color-brightgrey{ color: #eeeeee; }
.text-color-lightgrey{ color: #cccccc; }
.text-color-midgrey{ color: #999999; }
.text-color-darkgrey{ color: #444444; }
.text-color-black{ color: #000000; }


.bg-color-lightgrey{ background-color: #aaaaaa; }
.bg-color-midgrey{ background-color: #444444; }

hr{
  border-color: #3a3a3a;
}

/*   LINKS   */
a:hover, a:visited, a:focus {text-decoration: none !important;}


/*  NAV BARS   */

.logo-img{
  height: 40px; 
  padding-left: 18px; 
  margin: -6px 0;
}

.dropdown-caret-off::after {
  display: none;
}

.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* CLOUD CONNECTION */
.cloud-connection-container{
  margin: 0 auto;
}

.cloud-connection-status{
  height: 32px;
  width: 32px;
  display: inline-block;
}

p.cloud-status-message{
  display: inline;
  color: #ffffff;
  position: relative;
  bottom: 10px;
}

.horizontal-center{
  margin: 0 auto;
  max-width: 252px;
}

/* INPUTS */

.input-dark{
  border: 0;
  outline: 0;
  box-shadow:none;
  background: transparent;
  border-radius: 0;
}

.input-dark option{
  border: 0 !important;
  outline: 0 !important;
  box-shadow:none;
  background: rgba(0, 0, 0, 0.8);
}



.btn-secondary {
    background: #555555;
    border-color: #666666;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
    background: #666666;
    border-color: #555555
}

.btn-secondary.selected{
    background: #f15a24;
    border-color: #f15a24;
}

.btn-single-active-device{
    background: #444444;
    border-color: #444444;
}

.btn-single-active-device:hover{
  cursor: default !important;
}

.btn-primary {
    background: #f15a24;
    border-color: #f15a24;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #cc4110;
    border-color: #cc4110;
}

.btn-orange {
  background: #f15a24;
  border-color: #f15a24;
  color: #ffffff !important;
}
.btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open > .dropdown-toggle.btn-orange {
  background: #cc4110;
  border-color: #cc4110;
  color: #ffffff !important;
}

.admin-menu-btn {
  /*width: 400px;*/
  text-wrap: auto;
}

.dropdown-item.active {
  background-color: #f15a24;
}

.admin .card-header{
  color: #ffffff;
  background-color: #444;
}

.card-body{
  color:  #000000;
  background-color:   #cccccc;
}

#sleep_timer_options{
  color:  #ffffff;
  background-color:   #555555; 
  width: 500px;
}

#sleep_timer_card_body{
  color:  #ffffff;
  background-color:   #555555; 
}

#sleep_timer_options_form{
  width:100%;
  margin: 0 auto;
}

#sleep_timer_options_form_row1, #sleep_timer_options_form_row2, #sleep_timer_options_form_row3{
  display: inline;
}

.color-block{
  width: 50px;
  height: 50px;
  text-align: bottom;
}

.color-circle{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.inner-color-block{
  margin-top: 20px;
  width: 40px;
  height: 24px;
  background-color: #000000;
}

.color-block-big{
  width: 100px;
  height: 100px;
}

.color-block-small{
  width: 40px;
  height: 20px;
  margin-bottom: -4px;
}

.float-right{
  float: right;
}

form#save_event_form #end_date, form#editFirmwareForm #modelNames, form#editFirmwareForm #firmwareVersion{
  color: #ffffff;
  padding-left: 15px;
}

form#save_event_form #start_time_text, form#save_event_form #end_time_text{
  color: #495057;
  background-color: #ffffff;
}

form#save_event_form a#repeat_link{
  color: #ffffff;
}

form#save_event_repeat_form input#interval{
  display: inline;
}

/*  LAYOUT   */

.pad-bot-15{ padding-bottom: 15px; }
.pad-top-15{ padding-top: 15px; }
.pad-right-15{ padding-right: 15px; }
.pad-left-15{ padding-left: 15px; }
.pad-left-30{ padding-left: 30px; }

.pad-5{padding: 5px; }

.power-off-block{
  width: 300px; 
  height: 50px;
  vertical-align: middle;
  clear:both;
}

.svg-block{
  float: left;
  width: 100%;
  height: 50px;
  padding-top: 10px;
}

.svg-label{
  width: 250px;
  height: 50px;
}

.svg-block p{ 
  display: inline;
  padding-top: 10px; 
}

.no-scroll{
  overflow:hidden;
}

.inline{
  display: inline-block;
}

.align-right{
  text-align: right;
}

#power_off_selector_group .btn svg {
  vertical-align: middle;
}

#sleep_timer_options_form_row2 label, #sleep_timer_options_form_row3 label {
  vertical-align: top;
}

#sorted-by {
  vertical-align: top;
}

.border-right {
  border-right: 1px solid #333;
}

/****************/
/* Range Slider */
/****************/
.slidecontainer {
  max-width: 400px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #444444;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f15a24;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f15a24;
  cursor: pointer;
}
.slider:disabled::-webkit-slider-thumb{
  background: #444444;
}
.slider:disabled::--moz-range-thumb{
  background: #444444;
}

.slider-text {
    position: relative;
    display: inline-block;
}

.slider-text::after {
    position: absolute;
    right: 5px;
    top: 1px;
    content: attr(data-slider-text-after);
    pointer-events: none;
    opacity: 0.6;
}

/**********************/
/* Checkbox container */
/**********************/
.checkbox-container {
  width: 180px;
  text-align: left;
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #444;
}
/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #666;
}
/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #f15a24;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox-div.disabled{
  display: none;
}

/**********************/
/* Color Swatch */
/**********************/

.color-swatch.disabled{
  display: none;
}

/**********************/
/* Color Blocks */
/**********************/
.add-remove-color-block.disabled{
  pointer-events: none;
}

#color_palette_edit_blocks .color-block-container.disabled{
  display: none; 
}

.palette_view_color_block.disabled{
  display: none;
}

/**************************
        Modal
***************************/
.modal-body{
  background-color: #111111;
}

.modal-content{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: transparent;
}

.modal-footer{
  background-color: #111111;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top: 0px;
}

.modal-header{
  background-color: #222222;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-bottom-color: #666666;
}

.modal-close{
  color: #ffffff;
}

.modal-success .modal-header{
  background-color: #005500;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-bottom: 0px;
}

.modal-success .modal-footer{
  background-color: #005500;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top: 0px;
}


.modal-fail .modal-header{
  background-color: #660000;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-bottom: 0px;
}

.modal-fail .modal-footer{
  background-color: #660000;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top: 0px;
}

#start_time_input_modal .modal-content, #end_time_input_modal .modal-content{
  min-height: 580px;
  max-width: 300px;
}

/*
#newDealerModal .modal-content {
  min-height: 800px;
  min-width: 1000px;
}

#newDealerAddressModal .modal-content {
  min-height: 800px;
  min-width: 1000px;
}

#editDealerAddressModal .modal-content {
  min-height: 800px;
  min-width: 1000px;
}
*/

/***********************
 * Loaders/Spinners
 ***********************/

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/**
 * For spinner in form input
 */

.loader-container {
  position: absolute;
  right: 22px;
  top: calc(50% + 5px);
}

.input-loader {
  position: relative;
  height: 20px;
  width: 20px;
  display: inline-block;
  animation: around 5.4s infinite;
}

@keyframes around {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

.input-loader::after, .input-loader::before {
  content: "";
  background: white;
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-width: 2px;
  border-color: #333 #333 transparent transparent;
  border-style: solid;
  border-radius: 20px;
  box-sizing: border-box;
  top: 0;
  left: 0;
  animation: around 0.7s ease-in-out infinite;
}

.input-loader::after {
  animation: around 0.7s ease-in-out 0.1s infinite;
  background: transparent;
}

.full-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  z-index: 10000;
}

#loader-position {
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translateY(-50%, -50%);
  transform: translateY(-50%, -50%);
}

/**
 * Form validation
 */

.has-success input{
  border-color: #3c763d;
}

.has-error input{
  border-color: #ff0000;
}

.form-error{
  color: #ff0000;
}

/**
 * Dealer
 */

div.dealer, div.locations {
  padding: 10px 0;
}

div.credentials {
  padding: 10px;
  background-color: #444;
}

.dealer ul, .credentials ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
 }

 div.headings {
  font-weight: bold;
 }

.dealer a, .dealer-review a, .credentials a {
  color: #fff;
}

.alternating-rows:nth-child(odd) {
  background-color: #444;
}

.alternating-rows:nth-child(even) {
  background-color: #333;
}

/**************************
        Ratings
***************************/
.rating {
    float:left;
    width:325px;
    /*margin-left: 10%;*/
}
.rating span.rating-label { float: left; }
.rating span { float:right; position:relative; }


/**************************
        DataTables
***************************/
.dataTables_scrollBody {
  min-height: 15vh;
}

/************************
      Others
************************/
#deviceCommunication #statisticsRefresh #errorRefresh #infoRefresh{
  height: 500px;
  overflow: auto;
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.commentBoxBubble {
  border: 1px solid #666!important;
  border-radius: 9px;
}

.greyShade {
  background-color: #AAA;
}

.commentBox {
  height: 500px;
  overflow-y: scroll;
}

.listPointer li {
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}