/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made by Sirea
 */

 :root {
  --darker : 0.85;
}

.section {
  padding:1rem;
}

nav ul li:hover,
nav ul li.active,
nav .dropdown-content li:hover,
nav .dropdown-content li.active {
  background-color: rgba(0, 0, 0, 0.1);
}
nav ul li a:hover{
  background-color: transparent;
}

#main-fab {
	position: fixed;
  bottom: 20px;
  right: 20px;
  opacity:0.25;
  transition: opacity 0.2s linear;
}
#main-fab:hover {
	opacity:1;
}


.editable:not(.widget-type-pages) {
	position:relative;
	border: 2px dashed rgba(0,0,0,.1);
	border-radius: 2px;
  padding:10px;
}

.widget .widget-options {
  display:none;
}

.widget.editable .widget-options {
  position: absolute;
  right: 25px;
  top: 25px;
}

.widget.editable .widget-options a {
  font-size: 20px;
  color: #666666;
  padding: .25rem .5rem;
  border-radius: 3px;
}

.widget.editable .widget-options .widget-type-label-group {
  background-color: #F6F6F6;
  padding: 7px;
  border-radius: 3px;
  display: inline-block;
  bottom: -2px;
  position: relative;
}

.widget.editable .widget-options .widget-type-label-group .widget-type-label {
  margin-right: 5px;
}

.widget.editable .widget-options .widget-type-label-group .widget-visibility {
  padding: 3px 5px;
  border-radius: 3px;
}

.widget.editable .widget-options .btn-option:hover {
  background-color: rgba(0,0,0,.05);
}

.widget.editable:not(.widget-type-pages):hover > .widget-options {
  display:inline-block; 
  top: 0; 
  right: 0; 
  padding: 5px;
}

.widget .new-widget-container {
  display:none;
}

.widget.editable .new-widget-container {
  display: initial;
}

.editable .editable-btn {
  position: absolute;
  top: 5px;
  right: 35px;
  padding: 2px 7px 0 7px;
}

.editable .delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 7px 0 7px;
}

.editable .editable-btn i,
.editable .delete-btn i {
  line-height: 30px;
}

.new-widget-container {
	width:100%;
}
.new-widget {
  width:100%;
  border: 2px dashed rgba(0,0,0,.1);
  color: grey;
  margin-top:10px;
  padding: 40px 20px;
  text-align: center;
  border-radius: 2px;
  background-color: rgba(0,0,0,.025);
  cursor:pointer;
}

/* Testé en prod */
#login {
	padding-top: 6rem;
}
#login .card {
	padding : 3rem;
}

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
	box-sizing: border-box;
	background-color:#FFF;
	border: 2px solid #EEE;
  border-radius: 3px;
  padding: 0 10px;
  margin-top: 10px;
}

input:not([type]):disabled,
input:not([type])[readonly="readonly"],
input[type=text]:not(.browser-default):disabled,
input[type=text]:not(.browser-default)[readonly="readonly"],
input[type=password]:not(.browser-default):disabled,
input[type=password]:not(.browser-default)[readonly="readonly"],
input[type=email]:not(.browser-default):disabled,
input[type=email]:not(.browser-default)[readonly="readonly"],
input[type=url]:not(.browser-default):disabled,
input[type=url]:not(.browser-default)[readonly="readonly"],
input[type=time]:not(.browser-default):disabled,
input[type=time]:not(.browser-default)[readonly="readonly"],
input[type=date]:not(.browser-default):disabled,
input[type=date]:not(.browser-default)[readonly="readonly"],
input[type=datetime]:not(.browser-default):disabled,
input[type=datetime]:not(.browser-default)[readonly="readonly"],
input[type=datetime-local]:not(.browser-default):disabled,
input[type=datetime-local]:not(.browser-default)[readonly="readonly"],
input[type=tel]:not(.browser-default):disabled,
input[type=tel]:not(.browser-default)[readonly="readonly"],
input[type=number]:not(.browser-default):disabled,
input[type=number]:not(.browser-default)[readonly="readonly"],
input[type=search]:not(.browser-default):disabled,
input[type=search]:not(.browser-default)[readonly="readonly"],
textarea.materialize-textarea:disabled,
textarea.materialize-textarea[readonly="readonly"],
select:disabled,
select[readonly="readonly"] {
  cursor: not-allowed;
  background-color: #F6F6F6;
  border: 2px solid #EEE;
  color: #BBB;
}

.btn-flat.disabled .red-text,
.btn-flat.btn-flat[disabled] .red-text {
  color: #b3b2b2 !important;
}

textarea.materialize-textarea {
  height:auto;
	padding: 10px;
}

select {
	margin-top: 7px;
	border: 2px solid #EEE;
  border-radius: 3px;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.input-field select,
.input-field span.sp-colorize-container {
  margin-top: 10px;
}
.input-field select + label,
.input-field span.sp-colorize-container + label {
  transform: translateY(-14px) scale(0.8);
  transform-origin: 0 0;
}

.input-field .btn {
  margin-top: 12px;
}

.input-field-error label,
.input-field-error span.helper-text,
.input-field-error input[type=password]:not(.browser-default):focus:not([readonly]) + label {
  color: red;
}

.input-field-error input {
  border-color: red !important;
}

input[type="datetime-local"]{
	font-size: 14px !important;
}

[type="checkbox"] + span:not(.lever) {
	line-height:20px;
}

select:focus {
  outline: 0;
}


/* BUTTONS 
-------------------------------------------------------------------------- */
.btn:hover, 
.btn-large:hover, 
.btn-small:hover,
.btn:focus, 
.btn-large:focus, 
.btn-small:focus, 
.btn-floating:focus {
  filter: brightness( var(--darker) );
}

/* ICON PICKER */
.material-icon-picker {
  position: absolute;
  z-index: 1;
  background: #FCFCFC;
  text-align: center;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 3px;
}

.material-icon-picker:focus {
  outline: none;
}

.material-icon-picker-prefix {
  top: .5rem;
}

.material-icon-picker .icons {
  max-width: 300px;
  max-height: 200px;
  overflow: scroll;
}

div.material-icon-picker input[type="text"] {
  width: 100%;
}

#widget-builder h5+div .mdi.left {
  margin-right: 10px;
  font-size: 20px;
  line-height: 24px;
}

.material-icon-picker .mdi {
  font-size: 30px;
  color:var(--dark-grey);
  cursor: pointer;
  border-radius: 50%;
  padding: 10px;
  margin: 3px;
  transition: .2s;
}

.material-icon-picker .mdi:hover {
  background: #ececec;
}
.iconpicker {
  padding-left: 2.5rem !important;
}

.input-field span.text-prefix {
	font-size: 16px;
  color: #999;
  right: 10px;
  top: 10px;
}

.input-field .prefix ~ input,
.input-field .prefix ~ textarea,
.input-field .prefix ~ label,
.input-field .prefix ~ .validate ~ label,
.input-field .prefix ~ .helper-text,
.input-field .prefix ~ .autocomplete-content {
	margin-left: 0;
}

.input-field.col .prefix ~ label,
.input-field.col .prefix ~ .validate ~ label {
  width: 100%;
}

.dropdown-content li a.disabled{
  cursor: not-allowed;
  background-color: #F6F6F6;
  color: #BBB;
}

.widgetnav{
  width: 50%;
  padding: 30px !important;
}

.widgetnav .row {
	margin-bottom:0;
}

.widgetnav h6 {
  margin-bottom: 0;
}

.widgetnav .row label {
	display: block;
}

.widgetnav .row select  label {
	margin-bottom: -25px;
}

.widgetnav .row .inline-radio p {
  margin-top: 5px;
}

.widgetnav .row .inline-radio p label {
  display: inline-block;
  margin-right: 30px;
}

.widgetnav span.builder-items > .row {
	background-color: #EEE;
  border-radius: 5px;
  padding: 20px 10px 0px 10px;
  margin:10px;
}

.widgetnav .row .builder-item-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
}

.widgetnav .row .builder-item-options{
  display: flex;
  justify-content: flex-end;
}


.widgetnav .row .builder-item-options a.btn-flat{
  padding: 0 10px;
}

.widgetnav .row .btn-flat.action-remove.disabled .mdi-close {
  color: #CCC !important;
}

.widgetnav span.builder-items > .row input,
.widgetnav span.builder-items > .row select,
.widgetnav span.builder-items > .row textarea {
	border-color: #DDD;
}

.widgetnav span.builder-items > .row p {
  margin-top:0;
}

.widgetnav span.builder-items .builder-item-option-collapsible {
  margin-bottom:10px;
}
.widgetnav span.builder-items .builder-item-option-collapsible .collapsible-header {
  background-color: rgba(0, 0, 0, 0.05);
}
.widgetnav span.builder-items .builder-item-option-collapsible .collapsible-header:hover {
  background-color: rgba(0, 0, 0, 0.1);
}


.widgetnav span.editor-filter > div.col.l3,
.widgetnav span.editor-filter > div.col.m6 {
  width:100%;
}
.widgetnav span.editor-filter > div.input-field.col.l3 {
  width:50%;
}

.widgetnav hr {
	border: 0;
  border-top: 2px dashed #DDD;
}

.sp-original-input-container {
	border-radius: 3px;
}

.sp-original-input-container .colorpicker {
	padding: 0 10px;
  border-radius: 4px !important;
}

.collapsible .collapsible-body.collapsible-body-empty {
  padding:0 !important;
}

.widgetnav .collapsible li  {
  border-radius: 3px;
}

.widgetnav .collapsible .collapsible-header {
  position: relative;
  border-radius: 3px 3px 0 0;
  font-size: 12px;
  line-height: 20px;
  padding: 10px;
}


.widgetnav .collapsible .collapsible-body {
  padding: 1rem;
  background: transparent;
}

.widgetnav .input-field span.helper-text {
  line-height: 16px;
  font-size: 11px;
}

.widgetnav .input-field span.helper-text .mdi {
  position: relative;
  top: 1px;
  font-size: 14px;
}

.calendar.readonly li.calendar-event:hover a {
  cursor:not-allowed;
}

.modal-content .row {
  margin-bottom:0;
}

.card-content .modal-content .row .col {
  margin: 0.5rem 0;
}

.card-content .modal-content .row .col.input-field {
  margin: 1.5rem 0 0.5rem 0;
}

.pagination li a {
  line-height: 30px !important;
}

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 5%;
  left:5%;  
}

.chip {
  border-radius: 5px;
}

.tabs .tab a:focus,
.tabs .tab a:focus.active {
  background-color: #EEE;
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: #FAFAFA;
  cursor: not-allowed;
}

.tabs.widget-builder-tabs {
  border-bottom: 1px solid #EEE;
  margin-bottom: 20px;
}


table td > a {
  color:black;
}

.mdi-information.tooltipped{
  cursor:help;
}

span.pellet{
  position: absolute;
  display: inline-block;
  top: 10px;
  width: 7px;
  height: 7px;
  background-color: red;
  border-radius: 50%;
}





.input-field label{
  line-height: 30px;
}


.input-field .input-group {
  display:flex;
  margin-top: 10px;
  background-color: #EEE;
  border-radius: 3px;
}

.input-field .input-group-field,
.input-field .input-stretch-field {
  position: relative;
  display: flex;
  width:85%;
}

.input-field .input-group-field span.select2 span.selection span.select2-selection {
  margin-top:0;
}
.input-field .input-group-field .select2-container li.select2-search--inline {
  float: none;
}

.input-field  span.select2-container--disabled span.selection span.select2-selection {
  background-color: #F6F6F6;
  border-color: #EEE;
}
.input-field.input-disabled .input-inner {
  display:none;
}

.input-field  span.select2-container--disabled span.selection span.select2-selection ul {
  padding: 0 5px 5px 5px;
}
.input-field  span.select2-container--disabled span.selection span.select2-selection li.select2-selection__choice {
  color: #BBB;
}
.input-field  span.select2-container--disabled span.selection span.select2-selection li.select2-search--inline {
  display:none;
}

.input-field .input-group-field a + input,
.input-field .input-stretch-field a + input {
  padding-right: 45px;
}

.input-field .input-group-field input,
.input-field .input-group-field select,
.input-field .input-stretch-field input {
    box-sizing: content-box;
    margin: 0;
}

.input-field .input-group select {
  height: 45px;
  box-sizing: content-box;
  margin: 0;
  padding:0 10px;
}

.input-field .input-stretch-field input:first-child {
    border-right-width: 1px;
    border-right-style: dashed;
    border-radius: 3px 0 0 3px;
}
.input-field .input-stretch-field input:first-child:focus {
    border-right-width: 1px;
    border-right-style: dashed;
}
.input-field .input-stretch-field input:last-child {
    border-left-width: 1px;
    border-left-style: dashed;
    border-radius: 0 3px 3px 0;
}
.input-field .input-stretch-field input:last-child:focus {
    border-left-width: 1px;
    border-left-style: dashed;
}
.input-field .switch {
    position: absolute;
    right: 0;
    top: -16px;
    z-index: 1;
}

span.select2 span.selection span.select2-selection {
  line-height: 0px;
  box-sizing: border-box;
  background-color: #FFF;
  border: 2px solid #EEE;
  border-radius: 3px;
  padding: 0 10px;
  margin-top: 10px;
}

span.select2 input[type=search]:not(.browser-default) {
  margin: 0;
}

span.select2 input[type=search]:not(.browser-default):focus:not([readonly]) {
  background: transparent;
  border:0;
}

span.select2 span.selection .select2-selection__choice {
  border: 0;
  border-radius: 3px;
  line-height: 20px;
  padding: 5px 10px;
  margin: 7px 5px 0 0;
}
span.select2 span.selection .select2-selection__choice__remove{
    position: relative;
    top: -1px;
    right: 2px;
    border-right: 0;
}
span.select2 span.selection .select2-selection__choice__remove:hover,
span.select2 span.selection .select2-selection__choice__remove:focus{
    background-color: transparent;
}

span.select2-dropdown {
  border: 0;
  border-radius: 0;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%)
}


.select2-search--inline,
.select2-search__field:placeholder-shown {
  width: 100% !important;
}

.input-field a.input-inner {
  position: absolute;
  z-index:2;
  font-size: 20px;
  line-height: 48px;
  -webkit-transition: color .2s;
  transition: color .2s;
  right:18px;
  background:transparent;
  border:0;
}

.input-field a.input-inner:hover i {
  color:red !important;
}

.input-field a.input-suffix {
  width: 15%;
  text-align: center;
  line-height: 48px;
  z-index:2;
  font-size: 20px;
  -webkit-transition: color .2s;
  transition: color .2s;
  background:transparent;
  border:0;
}

.input-field a.input-suffix i,
.input-field a.input-suffix.checked:hover i {
  color:#CCC;
}


.input-field .input-group.exclude a.input-suffix i,
.input-field .input-group:not(.exclude) a.input-suffix:hover i {
  color:red;
}
.input-field .input-group.exclude a.input-suffix:hover i {
  color:#F88;
}

.input-field .input-group.exclude {
  background-color: #FCC;
}
.input-field .input-group.exclude input,
.input-field .input-group.exclude span.selection span.select2-selection {
  border-color: #FCC;
}
.input-field .input-group.exclude input:focus,
.input-field .input-group.exclude span.select2.select2-container--focus span.selection span.select2-selection {
  border-color: red;
}

/* WIDGET PAGES
-------------------------------------------------------------------------- */
.widget-type-pages.editable nav .nav-wrapper {
  margin-right: 100px;
}

.widget.widget-type-pages.editable > .widget-options {
  display:inline-block;
  top: 14px;
  right: 10px;
  padding-left: 10px;
}

.widget.widget-type-pages.editable > .widget-options > span+a {
  display:none;
}

.widget-type-pages-label {
  display:none;
}

.page-user .collapsible-header {
  display: flex;
  flex-flow: row;
  align-items: center;
}

/* WIDGET CONTAINER
-------------------------------------------------------------------------- */
.widgets-list .widget-btn {
  width: 120px;
  height: 100px;
  margin-bottom: 5px;
  padding: 1rem;
  text-align: center;
  line-height: initial;
  border: 2px solid #EEE;
  border-radius: 3px;
}

.widgets-list .widget-btn.disabled {
  background-color: #EEE !important;
}
.widgets-list .widget-btn.disabled i.mdi,
.widgets-list .widget-btn.disabled span.widget-name {
  color: #AAA;
}

.widgets-list .widget-btn i.mdi {
  font-size: 2rem;
  color: #333;
}

.widgets-list .widget-btn span.widget-name {
  display: block;
  font-size: 10px;
  margin-top: 10px;
  color: #666;
  font-weight: 500;
}


/* WIDGET CARD
-------------------------------------------------------------------------- */
.card .card-content {
  padding:0;
}

.card .card-content .widget {
  padding:30px;
}



/* WIDGET TABLE 
-------------------------------------------------------------------------- */
table thead th i.mdi {
  margin: 0 1px;
  border-radius: 2px;
}

table thead th i.mdi:hover {
  cursor:pointer;
  background-color:#EEE;
}
table.clickable-cells tbody td {
  padding: 0;
}
table.clickable-cells tbody td a:not(.dropdown-trigger) {
  display:block;
  cursor: pointer;
  padding: 15px 5px;
}

table.clickable-cells tbody td ul.pagination a {
  padding: 0 10px;
  cursor: not-allowed;
}

table.clickable-cells tbody td ul.pagination li.active a {
  background-color: #BBB;
}

table.clickable-cells tbody td .card {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

table.clickable-cells tbody td .card-content {
  padding: 0;
}

table.clickable-cells tbody td .card-content ul.pagination {
  margin: 0;
}

table.clickable-cells tbody td a span{
  display: inline-block;
}

table.clickable-cells tbody td a.forcable {
  display:inline-block;
  border-radius: 3px;
  color: #FFF;
  padding: 5px 10px;
}

.table-item-viewer {
  padding:30px;
  width: 80%;
}

.table-item-viewer .card {
  margin-top:0;
}

.table-item-viewer h3 {
  line-height: 100%;
  margin: 1rem 0;
}

.table-item-viewer h3 > span.tooltipped {
  border-radius: 5px;
  padding: 0 5px;
}
.table-item-viewer h3 > span.writable:hover {
    background-color: #EEE;
}


.table-item-viewer-code {
  display: inline-block;
  width: 100%;
  padding: 20px;
  white-space: pre-wrap;
  font-family: monospace;
  border-radius: 3px;
  background: #333;
  color: #DDD;
}

.table-item-viewer-text {
  white-space: pre-wrap;
}

.table-item-editor-code .code-editor {
  width: 100%;
  height: 400px;
}

.custom-widget-code-editor {
  width: 100%;
  height: 400px;
  box-sizing: border-box;
  background-color:#FFF;
  border: 2px solid #EEE;
  border-radius: 3px;
  padding: 0 10px;
  margin-top: 10px;
}

.table-item-viewer-list span {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  margin: 3px;
}

.table-item-viewer-list span.table-item-viewer-list-values span {
  background-color: rgba(68, 68, 68, 75%);
  color:white;
  padding: 2px 5px;
  border-radius: 2px;
  margin: 3px;
}

.table-item-viewer-filter span {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  margin: 3px;
}

.table-item-viewer-filter span.table-item-viewer-filter-values span {
  background-color: rgba(68, 68, 68, 75%);
  color:white;
  padding: 2px 5px;
  border-radius: 2px;
  margin: 3px;
}

.table-item-viewer-filter span.exclude {
  display: flex;
  background-color:#FCC;
}

.table-item-viewer-filter span.exclude i {
  color:red;
  font-size: 20px;
}

.table-item-viewer-filter span:not(.exclude) i {
  display:none;
}

.filter-area{
  background-color:#FFF;
  padding:0;
}

.filter-area .collapsible {
  border: 0;
  box-shadow: none;
  background-color: #F9F9F9;
}

.filter-area .collapsible .collapsible-header {
  border: 0;
  background-color:transparent;

  display: flex;
  align-items: center;
  padding: 10px;
}

.filter-area .collapsible .collapsible-header i {
  margin-right: 0;
}
.filter-area .collapsible .collapsible-header span.filter-prefix {
  width: 120px;
}
.filter-area .collapsible .collapsible-header span.filter-prefix i {
  margin-top: -2px;
  font-size: 18px;
  margin-right: 0.5rem;
}

.filter-area .collapsible .collapsible-header span.filter-empty {
  position: relative;
  top: -1px;
  left: -20px;
}

.filter-area .collapsible .collapsible-header span.filter-prefix + span{
  display:flex;
}

.filter-area .collapsible .collapsible-header span.filter-summary-parameter {
  display: flex;
  align-items: center;
  background-color: rgb(1 164 158 / 10%);
  padding: 2px 8px;
  border-radius: 3px;
  margin: 3px;
  height: 40px;
}

.filter-area .collapsible .collapsible-header span.filter-summary-parameter.exclude {
  background-color:#FCC;
}

.filter-area .collapsible .collapsible-header span.filter-summary-parameter.exclude i {
  color:red;
  font-size: 20px;
}

.filter-area .collapsible .collapsible-header span.filter-summary-parameter:not(.exclude) i {
  display:none;
}

.filter-area .collapsible .collapsible-header span.filter-summary-values span {
  background-color: rgba(68, 68, 68, 75%);
  color:white;
  padding: 2px 5px;
  border-radius: 2px;
  margin: 3px;
}

.filter-area .collapsible .collapsible-body {
  padding: 0.5rem 1.5rem;
  border: 0;
}
.filter-area .collapsible .collapsible-body .row {
  margin-bottom:0;
}

.filter-area .collapsible .collapsible-body .row input[type=text] {
  margin-bottom: 0;
}


/* WIDGET PLOT-CHART
-------------------------------------------------------------------------- */
.learning-progress-bar {
  display:flex;
}
.learning-progress-bar > span {
  flex-grow: 1
}
.learning-progress-bar > button {
  margin-left: 10px;
}


/* WIDGET ALARMS 
-------------------------------------------------------------------------- */
.empty-state {
  text-align:center;
  padding: 120px 0;
}
.empty-state h5 {
  margin-top: 0;
}
.empty-state .mdi {
  font-size: 50px;
  color: #CCC;
}

.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
}

/* WIDGET ALARMS 
-------------------------------------------------------------------------- */
.widget-type-alarms tbody tr.ack {
  color: #BBB !important;
}


/* WIDGET VALUE
-------------------------------------------------------------------------- */
.widget-type-value strong {
  display:block;
}

.widget-type-value span.small {
  font-size: 15px;
}

.widget-type-value span.medium {
  font-size: 25px;
}

.widget-type-value span.big {
  font-size: 35px;
}

.widget-type-value.editable {
  z-index: 0;
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px dashed rgba(0,0,0,.1);
  margin: 3px 0;
  border-radius: 2px;
}

.widget-type-value.editable .widget-options {
    right: 5px;
    top: 3px;
}

.widget-type-value.editable .editable-btn {
  position: relative;
  right: 0;
  top: 0;
  padding: 2px 7px 0 7px;
}

.widget-type-value.editable .delete-btn {
  position:relative;
  top: 0;
  right: 5px;
  padding: 2px 7px 0 7px;
}

.widget-type-value.editable .editable-btn i,
.widget-type-value.editable .delete-btn i {
  line-height: 30px;
}

.widget-type-value.editable>.editable-btn{
  margin-left: auto;
}


/* WIDGET LED
-------------------------------------------------------------------------- */
.widget-type-led strong {
  display:block;
}

.widget-type-led i.led-small,
.widget-type-led span.led-small {
  font-size: 15px;
  font-size: 15px;
}

.widget-type-led i.led-medium,
.widget-type-led span.led-medium {
  font-size: 25px;
  font-size: 25px;
}

.widget-type-led i.led-big,
.widget-type-led span.led-big {
  font-size: 35px;
  font-size: 35px;
}

.widget-type-led.editable .widget-options {
  right: 5px;
  top: 3px;
}

/* WIDGET BUTTON
-------------------------------------------------------------------------- */
.widget-type-button .btn {
  display: inline-flex;
  flex-direction: row-reverse;
}

.widget-type-button .btn-small {
  padding: 0 8px;
  font-size: 12px;
}
.widget-type-button .btn-small i.left {
  margin-right: 7px;
}

.widget-type-button .btn-large {
  font-size: 25px;
  font-weight: 300;
}

/* WIDGET VALUE
-------------------------------------------------------------------------- */
.widget-type-switch form.small span.switch-off,
.widget-type-switch form.small span.switch-on {
  font-size: 12px;
}

.widget-type-switch form.medium span.switch-off,
.widget-type-switch form.medium span.switch-on {
  font-size: 15px;
}

.widget-type-switch form.big span.switch-off,
.widget-type-switch form.big span.switch-on {
  font-size: 20px;
}

.widget-type-switch form.medium .switch label .lever {
  width: 40px;
  height: 20px;
  margin-top: -3px;
}

.widget-type-switch form.big .switch label .lever {
  width: 56px;
  height: 24px;
  margin-top: -5px;
}

.widget-type-switch form.medium .switch label .lever:before,
.widget-type-switch form.medium .switch label .lever:after {
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.widget-type-switch form.big .switch label .lever:before,
.widget-type-switch form.big .switch label .lever:after {
  width: 30px;
  height: 30px;
}

.widget-type-switch form.medium .switch label input[type=checkbox]:checked + .lever:before, 
.widget-type-switch form.medium .switch label input[type=checkbox]:checked + .lever:after {
  left: 18px;
}

.widget-type-switch form.big .switch label input[type=checkbox]:checked + .lever:before, 
.widget-type-switch form.big .switch label input[type=checkbox]:checked + .lever:after {
  left: 26px;
}



/* WIDGET CALENDAR 
-------------------------------------------------------------------------- */
.widget-type-calendar .calendar {
  display: inline-block;
  width:100%;
}

.widget-type-calendar.editable {
  padding-top: 40px;
}

span.calendar-label {
  color: white;
    border-radius: 3px;
}

.btn-move-calendar {
  height: 33px;
}

.calendar-month + ul {
  margin:0;
}

.calendar-month .btn-move-calendar {
  position: relative;
    margin-top: -3px;
}

.calendar-month-events-day > span {
    padding: 15px;
}

li.monthtoweek {
    padding-left: 20px;
    border-radius: 8px 0 0 8px;
}

li.monthtoweek > span {
    margin-left: -10px;
    background-color: #DDD;
    padding: 8px 10px;
    border-radius: 50%;
}

li.monthtoweek:hover > span {
  color:#FFF;
}

/* WIDGET DEVICES MODAL
-------------------------------------------------------------------------- */
.modal-header,
.modal-header-options {
  display: flex;
  align-items: center;
}
.modal-header-title {
  flex-grow: 1;
}
.modal-header-options button {
  margin-left:10px;
}


/* WIDGET VARIABLES MODAL
-------------------------------------------------------------------------- */
table td a {
  display:block;
}

.tabs .tab .badge {
    background-color: red;
    font-size: .8rem;
    color: white;
    border-radius: 3px;
    min-width: 10px;
}

table thead th a.btn-flat {
  top: -1px;
  padding: 0 10px;
}

table tbody th {
  width: 200px;
}

td a.forcable {
  display:inline-block;
  border-radius: 3px;
  color: #FFF;
  padding: 5px 10px;
}

.widget-type-variables-modal .card .card-content {
  padding: 24px;
}

.widget-type-variables-modal .card .card-content .widget {
  padding: 0px;
}


.sidenav .widget-type-variables-modal li.active, 
.sidenav .widget-type-variables-modal .collapsible-body {
  background-color:inherit;
}
.select-field {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.select-field label {
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-14px) scale(0.8);
  transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  font-size: 1rem;
  cursor: text;
}

.select-field select {
  margin-top:10px;
}


/* WIDGET TABLE MODAL
-------------------------------------------------------------------------- */

.widget-type-table .table-item-editor-schedule .card .card-content {
  padding: 10px 20px;
}

.widget-type-table-modal td .card {
  box-shadow: none;
  background: transparent;
}

.widget-type-table-modal td .card .input-field ul.pagination {
  margin: 0;
}

.widget-type-table-modal td .card .input-field ul.pagination li a {
  cursor: not-allowed;
}

.widget-type-table-modal td .card .input-field ul.pagination li.active a {
  background-color: #BBB;
}


/* WIDGET CUSTOM
-------------------------------------------------------------------------- */

.widget-type-custom var {
  font-style: unset;
}



/*  RESPONSIVE
-------------------------------------------------------------------------- 
-------------------------------------------------------------------------- 
-------------------------------------------------------------------------- */

@media (max-width: 992px) { 
  .widgetnav {
    width: 80%;
    padding: 30px !important;
  }
  .table-item-viewer {
    padding:15px 5px 5px 5px;
    width: 90%;
  }
  .table-item-viewer h4 {
    font-size: 1.5rem;
    line-height: 100%;
    margin: 1rem 0;
  }
  table.responsive-table tbody tr:last-child {
    display: inline-block;
    background-color: #FFF;
  }
  table.responsive-table tbody tr td:last-child {
    text-align:center;
  }
  table.responsive-table tbody tr td:last-child .btn-flat {
    float: none !important;
  }
  table.responsive-table thead tr th {
    width: auto !important;
  }
  table.responsive-table td.truncated {
    max-width: 150px;
  }
}


@media (max-width: 576px) { 
  .widgetnav {
    width: 90%;
    padding: 15px !important;
  }
  .widgetnav .row .btn-flat.action-remove {
    top: 10px;
    right: 10px;
  }
}