$blue-primary: #161832 !default;
$blue-secondary: #53A1FF !default;
$blue-tertiary: #5b5d6f !default;

@each $cote in top, left, right, bottom {

  @for $i from 0 through 10 {
    .margin-#{$cote}-#{$i} {
      margin-#{$cote}: 10px*$i !important;
    }
    .padding-#{$cote}-#{$i} {
      padding-#{$cote}: 10px*$i !important;
    }
  }
  .no-padding-#{$cote} {
    padding-#{$cote}: 0 !important;
  }

  .no-margin-#{$cote} {
    margin-#{$cote}: 0 !important;
  }
}

@for $i from 1 through 20 {
  .min-width-#{$i}0 {
    min-width: 10px*$i !important;
  }
  .max-width-#{$i}0 {
    max-width: 10px*$i !important;
  }
}

.no-margin {
  margin: 0 !important;
}

.pagination .btn {
  background-color: $blue-primary !important;
}

.background-blue-primary {
  background-color: $blue-primary !important;
}

.pagination .btn.disabled {
  background-color: #DFDFDF !important;
}

.pagination .btn:hover {
  background-color: $blue-secondary !important;
}

.pagination .btn-flat.no-hover {
  color: white !important
}

.no-padding {
  padding: 0 !important;
}

.uppercase {
  text-transform: uppercase;
}

.transform-none {
  text-transform: none;
}

.collection a.collection-item {
  display: flex;
  align-items: center;
}

.tabs-background-color {
  background-color: #F5F8FD;
}

.gray {
  background-color: #A0A1A4 !important;
}

.primary {
  background-color: $primary-color !important;
}

.primary-dark {
  background-color: $primary-color-dark !important;
}

.green {
  background-color: $quality-good;
}

.orange {
  background-color: $quality-medium;
}

.red {
  background-color: $quality-bad;
}

.blue {
  background-color: $quality-very-good;
}

.debit-blue-1 {
  background-color: #53a1fd !important;
}

.debit-blue-2 {
  background-color: #3f78c3 !important;
}

.debit-blue-3 {
  background-color: #1f2148 !important;
}

.color-blue {
  color: $primary-color-dark;
}

.primary-color-text {
  color: $primary-color-light;
}

.secondary-color-text {
  color: $secondary-color;
}

.font-grey {
  color: grey;
}

.font-white {
  color: white;
}

.bg-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.push-down {
  margin-top: 20px;
}

.margin-left5-right0-card {
  margin-left: 5px;
  margin-right: 0px;
}

.flex {
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
}

.inline-flex {
  display: inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: -webkit-inline-flex;
}

.table-body-color-blue {
  background-color: rgb(0, 255, 255);
}

.table-body-color-green {
  background-color: rgb(0, 254, 0);
}

.table-body-color-yellow {
  background-color: rgb(255, 254, 0);
}

.table-body-color-orange {
  background-color: rgb(255, 153, 0);
}

.table-body-color-red {
  background-color: rgb(254, 0, 2);;
}

.table-body-color-white {
  background-color: white;
}

.table-body-color-gray {
  background-color: gray;
}

.table-body-condensed {
  padding: 2px 4px !important;
}

.display-hidden {
  visibility: hidden;
}

.bold {
  font-weight: bold;
}

.reveal-small {
  padding: 0 !important;
}

.icon-table-toolbar {
  padding: 5px;
}

.export-button {
  margin-right: 50px;
}

.margin-top-7px {
  margin-top: 7px;
}

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

.dropdown-content li {
  min-height: 5px !important;
}

.dropdown-content li > a, .dropdown-content li > span {
  padding: 5px !important;
}

.icon-gray-20 {
  color: gray;
  font-size: 20px;
}

.icon-red-20 {
  color: red;
  font-size: 20px;
}

.margin-right-20 {
  margin-right: 20px;
}

.bold {
  font-weight: bold
}

.keyfigures-card {
  background-color: $secondary-color;
  color: white;
}

.color-green {
  color: green !important;
}

.first-picture {
  max-width: 250px !important;
}

.small-picture {
  max-width: 50px !important;
}

.input-field label.tinyLabel {
  font-size: 0.8rem;
}

.favorit-img {
  max-width: 30px;
}

.small-favorit-img {
  max-width: 15px;
}

.icon-color-red {
  color: red;
  font-size: 18px;
}

.icon-color-blue {
  color: blue;
  font-size: 18px;
}

.icon-color-orange {
  color: orange;
  font-size: 18px;
}

.icon-color-black {
  color: black;
}

.table-body-condensed {
  .progress {
    margin: 0 !important;
  }
}

.no-padding-right {
  padding-right: 0 !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

.material-icons.profilePicture {
  font-size: 8rem;
  padding-top: 1rem;
}

.responsive-img.profilePicture {
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
  font-size: 8rem;
}

.user-admin-icon {
  padding-right: 2rem;
  padding-top: 2rem;
}

.hugeProfilePicture {
  height: 18rem;
}

.material-icons.hugeProfilePicture {
  font-size: 18rem;
}

.table-slider {
  td {
    font-size: 12px;
  }

  .material-icons {
    font-size: 18px;
  }

  .selected-slider > i {
    margin-top: -5px !important;
  }
}

.divider-table-slider {
  height: 5px !important;
}

.visibility-input {
  margin-top: 0px !important;
  position: relative;
  & > [data-view-input] {
    position: absolute;
    top: 16px;
    right: 10px;
    z-index: 100;
    margin-top: 0px;
    font-size: 2.5rem;
  }
}

.clearable-input {
  margin-top: 0px !important;
  position: relative;
  & > [data-clear-input] {
    position: absolute;
    top: 5px;
    right: 0;
    font-weight: bold;
    font-size: 1.4em;
    padding: 0 0.2em;
    line-height: 1em;
    cursor: pointer;
  }

  & > input::-ms-clear {
    display: none;
  }
}

body div .aquabox-panel > .clearable-input {
  margin-top: 0px !important;
  position: initial;
  & > [data-clear-input] {
    position: relative;
  }
}

.side-nav li > a > i, .side-nav li > a > [class^="mdi-"], .side-nav li > a li > a > [class*="mdi-"], .side-nav li > a > i.material-icons {
  margin-right: 5px;
}

.maxed-with-center {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.collapsible.popout > li.sub-card-list.active + li.sub-card-list {
  box-shadow: none;
}

.sub-card-list .card-list-title.card-panel {
  background-color: $blue-secondary;
}

.block.col.s12.collapsible-body {
  display: block;
}

.material-icons.map-right-icon {
  font-size: 2.5rem;
  padding-right: 1rem;
}

ul.autocomplete-content.dropdown-content {
  z-index: 9000;
  position: absolute;
  margin-top: -10px;
}

ul.tabs.tabs-fixed-width {
  display: flex;
  margin-top: 0.75rem;
}

ul.tabs .tab a:hover, .tabs .tab a.active {
  color: #35609f
}

ul.tabs .tab a {
  color: black
}

.detail-pdf-icon {
  padding: 6.5px 9.75px 0 0;
  height: 62px;
}

.small-pdf-icon {
  height: 35px;
  padding: 0;
}

.card .card-title {
  background-color: $blue-primary;
}

.card .colorful-card {
  background-color: white;
}

.card-content {
  background-color: white;
}

.keyfigures-card .card-content {
  background-color: $blue-secondary;
  color: white;
}

div.card div.card-title {
  border-bottom: 0;
  padding-top: 5px;
  display: block;
  color: white;
}

.card .card-content .card {
  background-color: white;
}

.card .card-content div.card-title {
  border-bottom: 0;
  padding-top: 5px;
  display: block;
  background-color: rgba(125, 122, 119, 0.5);
  border-bottom: 1px solid #ccc7c7;

  a {
    color: white;
  }

  i.material-icons {
    color: white;
  }
}

div.card-title a {
  color: white;
}

div.card-title i.material-icons {
  color: white;
}

.card .card-title i.nbElements {
  font-size: 18px;
  font-weight: normal;
  color: white;
  font-style: normal;
}

.nbElementsActivated {
  font-size: 18px;
  font-weight: normal;
  color: white;
  font-style: normal;
}

.dataTables_filter input.form-control {
  background-color: white;
  color: black;
}

div.side-component div.side-content > div.active {
  padding-top: 0 !important;
}

.statusIcon {
  height: 17px;
  padding-right: 10px;
}

.collapsible-header i.material-icons.medium {
  font-size: 3rem;
}

.custom-button-paddings {
  padding: 0 1rem;
}

.hugeModal {
  width: 90%;
}

.smallModal {
    width: 40%;
}

.relative {
  position: relative;
}

.input-field input.sieau-input {
  height: 2rem;
  margin: 1px 0 6px
}

.white-text {
  color: white !important
}

body div .thin, *.thin {
  font-weight: 100;
}

.anim-hover {
  position: relative;

  &:hover, &:focus {
    &::before {
      margin: 0;
      height: 100%;
      opacity: 1;
      width: 100%;
    }
  }

  &::before {
    content: '';
    position: absolute;
    background-color: $blue-secondary;
    width: 100%;
    height: 0;
    margin: 50% 0;
    padding: 0 5px;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  /* You can add here class to customize the animation */
  &.vertical::before {
    content: '';
    width: 0;
    height: 100%;
    margin: 0 50%;
  }

  /* Here is an example to change the before background*/
  &.color-dark-blue::before {
    background-color: $primary-color;
  }
}

.non-clickable {
  cursor: default;
}

.item-disable {
  opacity: 0.3;
}

.material-icons.qualityGraphicsStationIcon {
  font-size: 2.8rem;
  border: solid 6px;
  padding: 0;
}

.picker--opened .picker__holder .picker__frame {
  top: 20%;
}

label.sieau-label {
  font-weight: 800;
}

div.graphicModalSpecialLabel {
  border-bottom: solid grey 1px;
  background-color: #d9dfe4;
}

.sieau-collapsible.popout .sub-card-list.sub-element {
  margin-left: 50px;
}

.sieau-collapsible.popout .sub-card-list.sub-element div.card-list-title {
  background-color: #97c6ff;
}

.tabs.tabs-fixed-width li.tab a.active {
  font-weight: bold;
}

body fieldset {
  border: 1px solid $blue-primary;
}

body fieldset legend {
  font-weight: bold;
  color: $blue-primary;
}

.aepTableCell {
  border: solid 1px #aaa;
}

div.row div.card.blueTableTitle div.card-title {
  background-color: $blue-primary;
}

body span.boldTableTitle {
  font-weight: bold;
  font-size: 17px;
}

body table.highlight > tbody > tr:hover > td {
  background-color: #f2f2f2 !important;
}

body table.highlight > tbody > tr > td {
  &.blue {
    background-color: #2196f3 !important;
  }

  &.green {
    background-color: #4CAF50 !important;
  }

  &.red {
    background-color: #f44336 !important;
  }

  &.orange {
    background-color: #ff9800 !important;
  }

  &.yellow {
    background-color: #ffeb3b !important;
  }

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

  &.grey.lighten-1 {
    background-color: #bdbdbd !important;
  }
}

.border-bottom-light {
  border-bottom: solid 1px #aaa !important;
}

.smallSubListTitle {
  font-size: 17px;
}

.sieau-dropdown.dropdown-content {
  top: 47px !important;
  left: 97px !important;
  width: auto !important;
  box-shadow: none;
  background-color: transparent;
}

.sieau-dropdown.active.dropdown-content.blue-arrow::before {
  content: "";
  left: 8px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  border-bottom: 10px solid $blue-secondary;
}

.sieau-dropdown-panel {
  background-color: white;
  box-shadow: -1px 8px 10px -5px rgba(0, 0, 0, 0.7);
}

.collapsible.popout .sub-card-list.disabled-element
div.card-list-title {
  background-color: #9e9e9e;
}

.hightHeightModal {
  max-height: 85%;
}

.smallHeightModal {
  max-height: 40%;
}

.rem-3-size {
  font-size: 3rem !important;
  height: 20px !important;
  line-height: 20px !important;
}

.globalSearchLineHeight {
  line-height: 18px;

}

.material-icons.inherited-line-height {
  line-height: inherit;
}

.hidden-datepicker {
  z-index: 11;
  position: absolute;
  top: 0px;
  width: 25px !important;
  height: 25px !important;
  color: transparent;
  border: 0 !important;
}

.datepicker-icon {
  z-index: 10;
  position: absolute;
  top: 1px;
  cursor: pointer;
}

.global-search-field {
  width: 100% !important;
  background-color: $blue-tertiary !important;
  transition: width 0.4s ease-in-out !important;
  transition-delay: 0.2s !important;
  position: absolute;
  right: 0;

  &:focus, &:hover {
    width: 450px !important;
  }
}

.global-search-div {
  width: 140px !important;
  height: 64px;
  position: relative;
}

body .navbar-fixed nav .nav-wrapper ul.right.hide-on-med-and-down div.sieau-dropdown.dropdown-content#globalSearchDropdown {
  right: -35 !important;
  left: inherit !important;
}

.global-search-field::placeholder {
  color: white;
}

.global-search-field:focus::placeholder {
  color: $blue-primary;
}

input.global-search-field {
  color: white !important;
  border: none !important;
  max-width: 450px !important;

  &:focus {
    color: $blue-primary !important;
    background-color: white !important;
  }
}

.global-search-icon {
  top: 0px !important;
  right: 10px !important;
  z-index: 10 !important;
  width: 20px;
  position: absolute !important;
}

.global-search-icon.active {
  color: $blue-primary;
}

.line-height-20 {
  line-height: 20px !important;
}

.piezometryTrendIcon {
  width: 50px;
}

.piezometryTrendTitle {
  font-size: 18px;
}

.referencial-table {
  .input-field label {
    color: white !important;
  }
}

.width-200 {
  width: 200px !important;
}

.flex-row {
  display: flex;

  .col-grow-1 {
    flex-grow: 1;
  }
}

.fullscreen-chart {
  width: 100vw;
  height: calc(100vh - 64px);
  position: fixed;
  top: 64px;
  left: 0;
  z-index: 1000;
  background-color: white;
  padding-left: 70px;
}

.fullscreen-map {
  width: 100vw;
  height: calc(100vh - 64px);
  position: fixed;
  top: 64px;
  left: 0;
  z-index: 1000;
  background-color: white;
  padding-left: 70px;
}

.fullscreen-map-homepage {
  width: 100vw;
  height: calc(100vh - 64px);
  position: fixed;
  top: 64px;
  left: 0;
  z-index: 1000;
  background-color: white;
}

.font-size-10 {
  font-size: 10px !important;
}

.card.smallCard .card-title {
  font-size: 14px;
}

.smallCard table.dataTable thead th {
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 14px;
}

.card.smallCard .card-title i {
  font-size: 20px;
}

.no-overflow {
  overflow: hidden;
}

.datepicker-top-0 .picker--opened .picker__holder .picker__frame {
  top: 0% !important;
}

.datepicker-top-5 .picker--opened .picker__holder .picker__frame {
  top: 5% !important;
}

.italic-label {
  font-style: italic;
}

.font-weight-normal {
  font-weight: normal;
}

.margin-left-25 {
  margin-left: 25px !important;
}

.margin-left-48 {
  margin-left: 48px !important;
}

.font-size-large {
  font-size: large !important;
}

.font-size-small {
  font-size: small !important;
}

.font-size-x-small {
  font-size: x-small !important;
}

.padding-8-10 {
  padding: 8px 10px;
}

.card-title-light-blue {
  background-color: $blue-secondary !important;
}

i.tiny.table-checkbox {
  font-size: 1.2rem;
}

i.material-icons.little {
  font-size: 1.5rem;
}

.card .card-title i.material-icons.small {
  font-size: 2rem;
}

i.material-icons.rem-2-5-size {
  font-size: 2.5rem !important;
}

.primary-btn-color > button {
  background-color: rgba(0, 188, 212, 0.5) !important;

  * {
    color: black !important;
  }
}

.selectOnTable .truncate {
  overflow: visible;
}

.validationTable tbody td h6 {
  margin: 0
}

.validationTable tbody td .input-field {
  margin: 0 !important;
}

.validationTable tbody td .input-field input.sieau-input {
  margin: 0;
}

.validationTable tbody td .select-wrapper input.select-dropdown {
  margin: 0;
  width: 200px;
}

.validationTable .select-dropdown li img {
  height: 20px;
  width: 30px;
  margin: 0;
}

li.bottom-slide-nav-link {
  position: absolute;
  width: 65px;
  bottom: 15px;
}

.navbar-fixed nav i.material-icons {
  font-size: 3rem;
}

body .datatable [type="checkbox"].filled-in.sieau-input + label {
  top: 0px;
  height: 20px;
}

.i-disabled {
  color: rgba(125, 122, 119, 0.5);
}

.chartDates-dropdown {
  display: inline-grid;
  position: absolute;
  top: -10px;
}

.qualityFilterAddIcon {
  padding-top: 14px;
}

.profileCard {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
}

.contactUserIcon {
  font-size: 2rem !important;
  line-height: 0px !important;
}

.modal.pickColorModal {
  width: 15%;
}

.productionUnitSlider table.table-slider tr td {
  padding: 0;
}

.productionUnitQualityTable td.qualitySliderPanel {
  width: 400px;
  min-width: 400px;
}

.productionUnitQualityTable td.productionUnitSliderElement .truncate {
  overflow: visible;
}

.low-case {
  text-transform: lowercase;
}

@keyframes rotateAnimation {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}


i.rotate, .rotate > i{
    animation: rotateAnimation 2s linear infinite;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.validationIcon {
  margin: 10px;
  padding: 7px;
  height: 50px;
  border-radius: 6px;
}

.validationIcon.activated {
  background-color: #7fdde9;
}

.btn.activated {
  background-color: #26a69a;
}

.validToolBtn {
  width: 42px;
  padding-left: 12px;
}

.cote-medal:hover {
  font-size: 15px;
}