/* 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;
}




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

.widget .widget-options {
  display: none;
  z-index: 2;
}

.widget.editable .widget-options {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.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:not(.widget-type-pages).editable .widget-options {
  overflow: hidden;
}

.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.content-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;
}

.widget-type-form form input[readonly="readonly"] {
  background-color: #FFF !important;
  color: #000 !important;
  border: 0 !important;
  margin-top: 0 !important;
  cursor: default !important;
  padding: 0;
}

.widget-type-form .input-field select {
  margin-top: 30px;
}

.widget-type-form .input-field label {
  line-height: 0px;
}


.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 input {
  margin-bottom: 0 !important;
}

.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: 2;
  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-x: hidden;
  overflow-y: 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.builder-items-default {
  display: inline-block;
  width:100%;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 5px;
  padding: 15px;
  margin-top:10px;
}


.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 .tab i.right {
  margin-left: 0;
  font-size: 24px;
}

.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-group .select-wrapper .select-dropdown.dropdown-trigger {
  display: none;
}

.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:not(.widget.widget-type-vu 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;
}

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
-------------------------------------------------------------------------- */
.logo {
  margin: 20px 20px -12px 20px;
}

.widget.widget-type-pages.editable:has(.widget-options) 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>a:nth-of-type(1),
.widget.widget-type-pages.editable>.widget-options>a:nth-of-type(2) {
  display: none;
}

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

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

.page-user ul.collapsible .collapsible-body {
  padding: 2rem;
}

.page-user .collapsible-body .card .card-content {
  padding: 24px;
}

/* Utile pour permettre le DnD en première position. */
.lmdd-dummy-first-element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100px;
  z-index: -1;
}

/* 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:is(.widget-type-canvas, .widget-type-card, .widget-type-tab-card, .widget-type-collapsible).editable:hover> :first-child {
  padding-top: 50px;
  transition: .2s;
}

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

.card .card-content .widget {
  padding: 1rem;
}



/* 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 {
  cursor: pointer;
}

.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%;
}

.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
-------------------------------------------------------------------------- */
.widget.widget-type-plot-chart .learning-progress-bar {
  display: flex;
}

.widget.widget-type-plot-chart .learning-progress-bar>span {
  flex-grow: 1
}

.widget.widget-type-plot-chart .learning-progress-bar>button {
  margin-left: 10px;
}

.widget.widget-type-plot-chart .chart-container {
  position: relative;
}

.widget.widget-type-plot-chart .spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 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.widget-type-alarms tbody tr.ack {
  color: #BBB !important;
}


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

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

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

.widget.widget-type-value i.icon-large,
.widget.widget-type-value span.icon-large {
  font-size: 35px;
  font-size: 35px;
}

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

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

.widget.widget-type-button .btn-small {
  padding: 0 8px;
  font-size: 12px;
}

.widget.widget-type-button .btn-small i.left {
  margin-right: 7px;
}

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

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

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

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

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

.widget.widget-type-switch form.switch-large .switch label .lever {
  width: 56px;
  height: 26px;
  margin-top: -15px;
}

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

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

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

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



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

.widget.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;
}

/* Utile pour que le widget modale prenne la taille de son contenu. */
.modal-widget>div {
  overflow: hidden;
}

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

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


.sidenav .modal-widget.widget-type-variables li.active,
.sidenav .modal-widget.widget-type-variables .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.data-table .table-item-editor-schedule .card .card-content {
  padding: 10px 20px;
}

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

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

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

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


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

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


/* WIDGET CANVAS
-------------------------------------------------------------------------- */

.card-content>.widget.widget-type-canvas {
  padding: 0 !important;
}

.widget.widget-type-canvas .grid>.item>.widget {
  padding: 0 !important;
}

.widget.widget-type-canvas .collapsible {
  margin: 0 !important;
}

.widget.widget-type-canvas .grid {
  position: relative;
  overflow: hidden;
}

.widget.widget-type-canvas.editable .grid {
  overflow: initial;
}

.widget.widget-type-canvas.editable .item .widget-options {
  left: 0;
  width: 100%;
  overflow: visible;
  z-index: 3;
}

.widget.widget-type-canvas .grid .grid-line {
  display: none;
  position: absolute;
  background-color: #eee;
}

.widget.widget-type-canvas.editable .grid .grid-line {
  display: inline-block;
}

.widget.widget-type-canvas .grid .item {
  position: absolute;
}

/* WIDGET IMAGE
---------------------------------------------------------------------------*/

.widget.widget-type-image img.image {
  width: 100%;
}

#widget-builder img.image-preview {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.widget.widget-type-canvas .widget.widget-type-image img.image {
  width: 100%;
  height: 100%;
}

/* WIDGET COLLAPSIBLE
-------------------------------------------------------------------------- */

.card-content>.widget.widget-type-collapsible {
  padding: 0 !important;
}

.card-content>.widget.widget-type-collapsible ul.collapsible {
  margin: 0 !important;
}

ul.collapsible .collapsible-body {
  padding: 0;
  background-color: #fff;
}

ul.collapsible .collapsible-body .widget.object-type-collapsible-item.editable {
  border: 0;
}

/* Utile pour permettre le DnD en première position. */
.widget.widget-type-collapsible-item .container-draggable {
  position: relative;
}

.widget.widget-type-collapsible-item .lmdd-dummy-first-element {
  top: -50px;
}

/* WIDGET VU
-------------------------------------------------------------------------- */

.widget.widget-type-vu .select2-selection.select2-selection--single {
  border: none !important;
  outline: none !important;
}

/*  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;
  }
}