.mdl-tabs__tab.is-active .list-icon {
  opacity: 1;
}
.mdl-tabs__tab .list-icon {
  opacity: 0.8;
}
.mdl-tabs__tab i {
  height: 36px;
  width: 34px;
  padding-right: 5px;
}

/* MDL Textfield */
.mdl-textfield {
  color: #9e9e9e;
}

.mdl-textfield__icon {
  width: 32px;
  text-align: center;
  position: absolute;
  line-height: 1.5;
}

.mdl-textfield.is-disabled .mdl-textfield__icon {
  color: rgba(0, 0, 0, 0.26) !important;
}

.mdl-textfield__icon ~ * {
  margin-left: 48px;
  width: calc(100% - 48px);
}

.mdl-textfield.is-invalid .mdl-textfield__icon {
  color: #de3226 !important;
}

.mdl-textfield__input--wide {
  width: 550px;
}

.mdl-textfield__input-small {
  width: 140px;
}

.mdl-textfield-dense {
  padding: 0px;
}

.mdl-material__icon {
  margin-right: 5px;
  display: inline-flex;
  vertical-align: middle;
}

.mdl-cell--centerd {
  width: 75%;
  margin: 0 auto;
}

.mdl-cell {
  background-color: #fff;
}

.mdl-mini-footer {
  padding: 10px;
  width: 100% !important;
  position: fixed;
  bottom: 0;
}

.mdl-layout--full-bleed-divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-layout-title {
  font-size: x-large;
}

.mdl-layout {
  /*align-items:left;*/
  overflow-y: hidden;
}

.mdl-layout--fixed-drawer > .mdl-layout__content {
  width: -moz-available;
}
.mdl-layout--fixed-drawer:not(.is-small-screen) > .mdl-layout__header {
  margin-left: 240px;
  width: calc(100% - 240px);
}

.mdl-card.mdl-shadow--2dp {
  transition: 0.15s ease-in-out box-shadow;
}
.mdl-card.mdl-shadow--2dp:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.mdl-card--full-width {
  width: 100%;
}

.mdl-card__title-large {
  min-height: 100px;
}

.mdl-card__title-image {
  height: 170px;
}

.mdl-card__title-text {
  width: 100% !important;
  padding-top: 50px;
}

.mdl-card__title-text-centered {
  margin-top: 10px;
  text-align: center;
}

.mdl-card__title-text-large {
  font-size: x-large;
  color: #fff;
}

.mdl-card__title-divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-card__subtitle-text {
  width: 100% !important;
  padding-top: 10px;
}

.mdl-card__supporting-text-full {
  width: 100%;
}

.mdl-card__supporting-text-table {
  width: 97%;
}

.mdl-card__supporting-text-span {
  font-size: medium;
  font-weight: 500;
  margin-top: 10px;
}

.mdl-card--default-size {
  min-width: 600px;
  min-height: auto;
}

.mdl-card-stretch.mdl-card {
  width: auto;
  height: auto;
  position: static;
}

.mdl--button--add {
  position: fixed;
  bottom: 45px;
  margin-bottom: 100px;
  right: 180px;
  z-index: 998;
}

.mdl-button--push-right {
  text-align: right;
}

.mdl-button--icon-small {
  margin-left: 25px;
}

.button_area {
  padding: 10px !important;
}

.mdl-dialog__title-medium {
  min-width: 300px;
  font-size: 2em;
}

.mdl-dialog--wide {
  width: 600px;
}

.mdl-list-dense {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.mdl-menu .mdl-list__item {
  min-height: 30px !important;
}

.mdl-list__item-dense {
  padding: 0px;
}

.mdl-list__item-bigger {
  font-size: large;
  font-weight: 900;
}

.mdl-list__item-clickable {
  cursor: pointer;
  padding: 10px 80px;
}
.mdl-list__item-clickable:hover {
  background-color: #eeeeee;
}
.mdl-list__item-clickable:focus {
  outline: none;
  background-color: #eeeeee;
}
.mdl-list__item-clickable:active {
  background-color: #e0e0e0;
}

.mdl-dropdown__item {
  display: block;
  border: none;
  color: rgba(0, 0, 0, 0.87);
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0 16px;
  outline-color: rgb(189, 189, 189);
  position: relative;
  overflow: hidden;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
  text-decoration: none;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mdl-dropdown__item::-moz-focus-inner {
  border: 0px;
}
.mdl-dropdown__item:focus {
  outline: none;
  background-color: #eeeeee;
}

.mdl-menu__container.is-visible .mdl-dropdown__item {
  opacity: 1;
}

.mdl-menu__link {
  color: black;
  text-decoration: none;
}

.mdl-menu--scrollable {
  max-height: 350px;
  width: 190px;
  /*overflow: hidden;*/
  overflow-y: scroll;
}

.mdl-spinner--middle {
  margin-left: 240px;
  margin-top: 25px;
}

.mdl-spinner--centerd {
  width: 75%;
  margin: 0 auto;
}

.mdl-data-table {
  width: 100%;
  border: 0px;
}

.linebreaks {
  white-space: normal;
  word-break: break-all;
}

.dataTables_wrapper {
  background-color: white !important;
}
.dataTables_wrapper .mdl-grid {
  padding: 0;
  margin: 0;
  border: 0px;
}
.dataTables_wrapper .mdl-grid:first-child {
  padding-top: 16px;
}
.dataTables_wrapper .material-icons {
  font-size: 22px;
  color: #6a963b;
  vertical-align: -6px !important;
  padding-left: 5px;
}
.dataTables_wrapper .mdl-cell {
  padding: 0;
  margin: 0;
}
.dataTables_wrapper .table_legend {
  padding: 20px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: left !important;
}

.dataTables_wrapper .mdl-cell--12-col {
  width: 100%;
}

.dataTables_filter,
.dataTables_info {
  padding: 16px;
}

.dataTables_wrapper .dataTables_length {
  padding: 17px;
}

.mdl--button--add {
  position: fixed;
  bottom: 45px;
  margin-bottom: 100px;
  right: 180px;
  z-index: 998;
}

.mdl-button--push-right {
  text-align: right;
}

.mdl-button--icon-small {
  margin-left: 25px;
}

.button_area {
  padding: 10px !important;
}

/* HEADER */
.mdl-layout__header-row .path .mdl-navigation__link {
  font-size: 22px;
  font-weight: 300;
  padding: 0 10px;
  letter-spacing: 0.02em;
  opacity: 1;
}

#support {
  padding: 0;
  margin-right: 20px;
  cursor: pointer;
}

.mdl-layout__drawer-button {
  display: none;
}

.header-with-border {
  height: 64px;
}

header.mdl-layout__header {
  width: 100%;
  margin: 0;
  grid-area: header;
  height: 76px;
  position: relative;
  z-index: 3;
  border-bottom: 1px solid #cccccc;
  background-color: #ffffff;
}
header.mdl-layout__header .mdl-layout__header-row {
  padding: 0 64px;
  height: 76px;
  background: transparent;
  justify-content: space-between;
  align-content: center;
}
header.mdl-layout__header .mdl-layout__header-row .path .mdl-navigation__link:hover {
  text-decoration: underline;
}
header.mdl-layout__header .mdl-layout__header-row .path .mdl-navigation__link.nohover:hover {
  text-decoration: none !important;
}
header.mdl-layout__header .mdl-layout__header-row .canon-logo img {
  height: 70px;
}
header.mdl-layout__header .mdl-layout__header-row .navigation {
  display: flex;
  align-items: center;
}
header.mdl-layout__header .mdl-layout__header-row .navigation #back .mdl-navigation__link,
header.mdl-layout__header .mdl-layout__header-row .navigation #home .mdl-navigation__link,
header.mdl-layout__header .mdl-layout__header-row .navigation #support .mdl-navigation__link,
header.mdl-layout__header .mdl-layout__header-row .navigation #account .mdl-navigation__link {
  color: #666666;
}
header.mdl-layout__header .mdl-layout__header-row .navigation button#about {
  color: #666666;
}

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > header.mdl-layout__header {
  width: 100%;
  margin: 0;
  z-index: 4;
  box-shadow: none;
}

.mdl-layout__header-row .path .mdl-navigation__link.active {
  font-weight: 400;
}

.mdl-layout__header-row .path .mdl-navigation__link.active:hover {
  text-decoration: none;
}

.mdl-snackbar {
  max-width: 700px;
}

.header-logo {
  height: 30px;
  opacity: 0.95;
  margin-top: -4px;
  margin-right: 6px;
}

a .header-logo {
  margin-right: 12px;
}

@media (max-width: 1250px) {
  .mdl-layout__header-row .path .mdl-navigation__link {
    font-size: 18px;
  }
}
@media (max-width: 1150px) {
  .info {
    display: none;
  }
}
@media (max-width: 650px) {
  .mdl-layout__header-row {
    padding-left: 55px;
  }
  .mdl-layout__header-row .path .mdl-navigation__link {
    font-size: 14px;
    padding: 0;
  }
  button#about {
    right: 0;
    position: absolute;
  }
}
@media (max-width: 450px) {
  .mdl-layout__header-row .path .mdl-navigation__link {
    font-size: 13px;
  }
  .path .material-icons {
    font-size: 15px;
  }
}
.drawer-printer-image {
  width: 220px;
  height: auto;
  opacity: 0.8;
  visibility: hidden;
  display: block;
}

/*MDL TOOLTIP */
.mdl-tooltip--large {
  max-width: 700px;
}

.hover-line-spacing {
  line-height: 1.8;
  padding: 4px 12px 4px 12px;
}

.mdl-tooltip {
  will-change: unset;
}

h5 {
  margin-top: 0px;
  margin-bottom: 30px;
}

.vue-app-wrapper .mdl-layout__header {
  position: fixed;
  z-index: 5;
}
.vue-app-wrapper .header {
  width: 100%;
  display: flex;
  position: fixed;
  z-index: 999;
  background: white;
}
.vue-app-wrapper .header__wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
}
@media (max-width: 999px) {
  .vue-app-wrapper .header__wrapper {
    justify-content: end !important;
  }
}
.vue-app-wrapper .header .canon-logo {
  display: block;
  width: 500px;
}
.vue-app-wrapper .header .canon-logo img {
  height: 96px;
}
@media (max-width: 999px) {
  .vue-app-wrapper .header .canon-logo {
    display: none;
  }
}
.vue-app-wrapper .header .navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 525px) {
  .vue-app-wrapper .header .navigation__item-text {
    display: none;
  }
}
.vue-app-wrapper .mdl-menu__container.is-upgraded.is-visible {
  right: 0 !important;
}

footer {
  grid-area: footer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  border-top: 1px solid #cccccc;
  height: 48px;
  z-index: 3;
  background-color: #ffffff;
}
@media screen and (max-width: 999px) {
  footer {
    font-size: 96px;
  }
}
footer .footer-left {
  justify-content: flex-start;
  padding-left: 4em;
}
@media screen and (max-width: 999px) {
  footer .footer-left {
    padding-left: 2em;
  }
}
footer .footer-right {
  justify-content: flex-end;
  padding-right: 4em;
  gap: 0.2rem;
}
@media screen and (max-width: 999px) {
  footer .footer-right {
    padding-right: 2em;
    flex-wrap: wrap;
  }
}
footer .footer-left,
footer .footer-right {
  font-size: 16px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 999px) {
  footer .footer-left,
footer .footer-right {
    font-size: 12px;
    flex: 1;
  }
}
footer a {
  color: black;
  font-weight: 400;
  text-decoration-line: none;
}

.vue-app-wrapper footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.ol_map {
  position: relative;
}

.mdl-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
}

#info_map {
  width: 100%;
  height: 400px;
}

.ol-reference a {
  color: rgba(0, 0, 0, 0.54);
  font-weight: normal;
  font-size: 13px;
  text-decoration: none;
  float: right;
}

.ol-control button {
  background-color: rgb(200, 200, 200) !important;
  cursor: pointer;
}

.ol-control button:hover {
  background-color: #3f51b5 !important;
}

.ol-reference a:hover {
  text-decoration: underline;
}

.fc-event-container {
  pointer-events: none;
}

.mdl-menu__item-calendar {
  height: 400px;
  width: 400px;
  pointer-events: all;
  line-height: 24px !important;
  font-size: 12px;
  padding: 0 8px;
}

.mdl-menu[for=pic__calendar-container] {
  background-color: rgba(158, 158, 158, 0.2) !important;
}
.mdl-menu[for=pic__calendar-container]:hover {
  background-color: rgba(158, 158, 158, 0.2) !important;
}
.mdl-menu[for=pic__calendar-container] :active {
  background-color: rgba(158, 158, 158, 0.2) !important;
}
.mdl-menu[for=pic__calendar-container]:focus {
  background-color: rgba(158, 158, 158, 0.2) !important;
}

.mdl-menu__item-calendar .fc-toolbar {
  margin: 0;
}

/*COLORING THE ARA DASHBOARD GROUPS*/
.indigo {
  color: #3f51b5 !important;
}

.lightgreen {
  color: #7cb342 !important;
}

.cyan {
  color: #00b2c0 !important;
}

.darkcyan {
  color: #006fb4 !important;
}

.orange {
  color: #fb8c00 !important;
}

.darkpurple {
  color: #a31a7e !important;
}

.lightgrey {
  color: #757575 !important;
}

.red {
  color: #cc0000 !important;
}

.bg-indigo {
  background-color: #3f51b5 !important;
  color: #fff !important;
}

.bg-lightgreen {
  background-color: #7cb342 !important;
  color: #fff !important;
}

.bg-cyan {
  background-color: #00b2c0 !important;
  color: #fff !important;
}

.bg-darkcyan {
  background-color: #006fb4 !important;
  color: #fff !important;
}

.bg-orange {
  background-color: #fb8c00 !important;
  color: #fff !important;
}

.bg-darkpurple {
  background-color: #a31a7e !important;
  color: #fff !important;
}

.bg-lightgrey {
  background-color: #757575 !important;
  color: #fff !important;
}

.bg-red {
  background-color: #cc0000 !important;
  color: #fff !important;
}

.bg-brown {
  background-color: #795548 !important;
  color: #fff !important;
}

#showPrinterInfo .span {
  text-align: left;
}

#showPrinterInfo:active {
  background-color: transparent !important;
}

/* General Page Style */
html,
body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

@media screen and (min-width: 450px) {
  #dashboard-grid {
    margin: 0 64px;
  }
}
@media screen and (max-width: 1300px) {
  .mdl-cell--2-col,
.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
    width: calc(24.6666666667% - 16px);
  }
}
@media screen and (min-width: 1025px) {
  .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
    padding-left: 21px;
  }
}
@media (max-width: 1500px) {
  .pic-logo-big {
    width: 90%;
    padding-left: 5%;
  }
}
main {
  display: flex !important;
  flex-direction: column;
  z-index: auto !important;
}

.artwork {
  margin-top: 30px;
}
.artwork img {
  width: 100%;
}

.search-suggestion {
  width: 180px;
}

.serial {
  cursor: pointer;
}

.large {
  width: 100%;
  display: block;
  margin-bottom: 15px;
}

.normal {
  width: 400px;
  display: inline-block;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
}

.small {
  width: 250px;
  display: inline-block;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
}

.msmall {
  max-width: 150px;
  display: inline-block;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
}

.xsmall {
  max-width: 60px;
  display: inline-block;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
  font-size: 34px;
}

.textImage {
  height: 20px;
  margin-bottom: 2px !important;
}

img.right {
  float: right;
}

.pic--color__white {
  background-color: #fff;
}

.link-disabled {
  pointer-events: none !important;
  cursor: default !important;
  color: #757575 !important;
}
.link-disabled--header {
  color: #bbb !important;
}

.vertical-align-mdlicon {
  vertical-align: -6px !important;
  margin-left: 10px !important;
}

.pic-logo-big {
  padding-left: 15%;
  margin-top: 70px;
  width: 70%;
  height: auto;
}

.bg-grey {
  background-color: #9e9e9e !important;
  color: #fff !important;
}

.pic-header-div {
  font-size: 16.5px;
  word-wrap: break-word;
  height: 115px;
  padding: 0 10px 0 10px;
  max-width: 240px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pic-logo-text {
  word-wrap: break-word;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  padding-left: 10px;
  font-size: 18px;
}

.left-cell-padding {
  padding-left: 10% !important;
}

.options label span {
  font-size: 15px;
}
.options .details {
  display: block;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.34);
}
.options label {
  height: auto;
  margin-top: 2px;
}

.formDescriptionText {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  padding: 10px 0px 10px 0px;
  color: #3f51b5;
}

.sortable {
  list-style: none;
  padding-left: 20px;
  /*background: yellow;*/
  border: 1px solid #3f51b5;
  min-height: 30px !important;
}
.sortable li {
  font-size: 16px;
  margin: 5px 10px 5px 0px;
}

.grab {
  padding: 3px 10px 3px 10px;
  cursor: pointer;
}
.grab:hover {
  background-color: #ececec;
}

.border-red {
  border: 1px solid #cc0000 !important;
}

.list-icon {
  height: 28px;
  margin-right: 2px;
}

#favlists {
  padding: 20px;
}

#dynlists {
  padding: 20px;
}

#favnew,
#dynnew {
  margin: 0px 10px 0px 0px;
}

#favedit,
#dynedit {
  margin: 0px 10px 0px 0px;
}

#favremove,
#dynremove {
  margin: 0px 10px 0px 0px;
}

#saveButton {
  margin: 0px 20px 0px 0px;
}

#cancelButton {
  margin: 0px 20px 0px 0px;
}

.filter-warning {
  margin-top: 10px;
  margin-left: 15px;
  padding-right: 10px;
  line-height: 17px;
}

.errorSpanMessage {
  color: #cc0000;
}

#selectAllCheckbox {
  background-color: #ececec;
  width: 300px;
}

#search-suggestions li {
  display: block;
  white-space: normal;
}
#search-suggestions li span {
  display: inline-block;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchfav-list,
.searchfav-dynlist {
  margin-left: 0 !important;
}

/*#search-suggestions li button {
  float: none !important;
}*/
#favorite-lists li span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.printerselection-disabled {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  opacity: 0.25;
}

.printerselection-normal {
  text-decoration: none;
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

.card-title {
  padding-top: 18px;
  display: block;
  color: #000000;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  overflow: hidden;
  margin: 0;
}
.card-title:hover {
  cursor: pointer;
}

.card-pos {
  padding: 0;
  margin: 0;
  width: 100%;
}

.table-title {
  font-family: "Open Sans", verdana, arial, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
  fill: rgb(68, 68, 68);
  opacity: 1;
  padding: 5px;
  font-weight: normal;
  white-space: pre-line;
  visibility: inherit;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
}

/* Config Section */
.config_section {
  width: calc(100% - 16px);
  min-height: 100px !important;
  margin-top: 20px;
  margin-left: 8px;
  margin-right: 8px;
}
.config_section .divider {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  border-left: 1px solid white;
}

.config_section_content {
  width: 100% !important;
}

/* collapsed for drawer filter and containers */
.collapsed .arrow {
  transform: rotate(180deg);
  margin-top: 3px;
}

/* paginate of the paginate input data tables extension */
.paginate_page {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 16px;
}

.paginate_of {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 16px;
}

#families option {
  color: #424242;
}
#families option:disabled {
  color: #bdbdbd;
}

#mdlUserLoginField {
  width: 350px;
}

#mdlPasswordLoginField {
  width: 350px;
}

#profile_table table tr td {
  padding: 20px;
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(0, 0, 0, 0.54);
  font-size: 1rem;
  line-height: 18px;
  overflow: hidden;
  padding: 16px 16px;
  width: 90%;
}
#profile_table table tr:last-child {
  border-bottom: 0px;
}
#profile_table table tr:first-child {
  border-top: 0px;
}

#help-contact_table table {
  table-layout: fixed;
  margin-left: 10px;
  width: 40%;
  overflow: hidden;
}

#help-contact_table td,
tr,
th {
  border: none;
  text-align: left;
}

#help-contact_table td:first-child {
  width: 70px;
}

#help-contact_table td:nth-child(2) {
  width: auto;
}

#drawer-obfuscator {
  position: fixed;
  background-color: black;
  height: 0px;
  width: 100%;
  z-index: 99999;
  opacity: 0.4;
  margin-top: 15px;
  visibility: hidden;
}

.container-obfuscator {
  position: fixed;
  background-color: black;
  height: 0px;
  width: 100%;
  z-index: 99999;
  opacity: 0.4;
  visibility: hidden;
}

.text-overflow-350 {
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-330 {
  max-width: 330px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-700 {
  max-width: 700px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-680 {
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-100 {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-80 {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-200 {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-180 {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color: #bbdefb !important;
}

.expandable_table {
  padding-left: 50px;
}

.expandable_table tr th {
  text-align: left;
}

.expandable_table tr td {
  text-align: left;
}

.no-pointer-events {
  pointer-events: none;
}

.head_history {
  color: rgb(63, 81, 181);
}

.head_history:hover {
  text-decoration: underline;
  cursor: pointer;
}

.position_history {
  color: rgb(63, 81, 181);
}

.position_history:hover {
  text-decoration: underline;
  cursor: pointer;
}

.modular_table {
  border: 1px solid rgb(224, 224, 224);
  width: 100%;
}

.modular_table_first_column {
  width: 15%;
}

.modular_table_second_column {
  width: 85%;
}

td.child {
  white-space: normal;
}

#modal-tables label {
  height: auto;
}

#modal-graphs label {
  height: auto;
}

#modal-custom label {
  height: auto;
}

.p-component {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
}

.family-label {
  font-size: 20px;
  line-height: 20px;
  flex: 0 1 auto;
  color: #cc0000;
}

#StatusGrid {
  flex-grow: 1;
}
#StatusGrid .container {
  padding: 0.75rem;
}

@media screen {
  #StatusGrid {
    overflow-y: auto;
    padding: 0 1rem;
  }
  .rotate {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  @-moz-keyframes spin {
    100% {
      -moz-transform: rotate(-360deg);
    }
  }
  @-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(-360deg);
    }
  }
  @keyframes spin {
    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
}
:not(#app).mdl-layout .mdl-layout__content {
  height: calc(100% - 76px - 48px);
}

#app.mdl-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 76px 1fr 48px;
  grid-template-areas: "header" "main" "footer";
}
#app.mdl-layout.mdl-layout--fixed-drawer {
  display: grid;
  grid-template-columns: 256px 1fr;
  grid-template-rows: 76px 1fr 48px;
  grid-template-areas: "header header" "drawer main" "footer footer";
}
#app.mdl-layout main.mdl-layout__content {
  background-color: var(--surface-100) !important;
  grid-area: main;
  margin: 0;
}

#list-management-dialog .p-dialog-content {
  flex-grow: 1;
  padding: 0;
  overflow-y: hidden;
}
#list-management-dialog .p-dialog-content .p-splitter {
  border: none;
}

.display_none {
  display: none;
}

@media only screen and (max-width: 1400px) {
  .header__wrapper #back span {
    display: none;
  }
  .header__wrapper #home {
    display: none;
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
  .header__wrapper #account span {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .header__wrapper #account span {
    display: none;
  }
}