/* desde directorio SCR -> compilación -> sass scss:css --watch --style=compressed --no-source-map */

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 1em 0;
  letter-spacing: 0.015em;
}

.disabled {
  cursor: not-allowed !important;
}

.modal {
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;

  input, select, textarea {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
    border-radius: 4px;
    width: 100% !important;
    text-align: left;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }

  h5 {
    font-size: 1.25em;
    letter-spacing: 0.05em;
  }

  .modal-content {
    margin-top: 30%;
  }

}

div {
  &#modalFormUnblock {
    div {
      &.modal-content {
        margin-top: 18.75%;
        margin-left: -12.5%;
        width: 125%;
      }

      &.modal-footer {
        div.message-alert {
          height: 2.425em;
          display: flex;
          align-items: center;
        }
      }
    }
    hr {
      margin: 1.2em 0 0.8em 0 !important;
    }
  }

  &.items-since-raw {
    max-height: 6em;
    min-height: 2.4em;
    border: 0.0625em rgba(0, 0, 0, 0.15) solid;
    border-radius: 0.25em;
    overflow-y: auto;
    padding: 0.25em 0.5em
  }

  &.filter {
    padding-bottom: 1.25em;
  }

  &.list-actions {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
  }

  &.modal-footer {
    .btn {
      padding-left: 1em;
      padding-right: 1em;
      min-width: 6em;
    }
  }
}

span {
  &.row-rule {
    cursor: default;
    font-size: 1.1em;

    &.rule-default {
      color: #999;
    }
    &.rule-success {
      color: #449d44;
    }
    &.rule-warning {
      color: #ec971f;
    }
  }

  &.flag-alert {
    font-weight: bold;
    color: #a55;
  }
}

button {
  &.status {
    padding: 0.3em 0.625em 0.1em 0.625em !important;
    width: 5em;
  }
}

.col-7 {
    width: calc(100% / 7);
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.hide {
  display: none
}

.action {
  cursor: pointer;
}

.c-gray {
  color: rgba(0, 0, 0, 0.25);
}

.bg-selected {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

input[type=checkbox] {
  margin: auto !important;
}

.filter {
  button {
    width: 8em !important;
  }
}

.tab-header {
  font-weight: bold;
  font-size: 1.1em;
  border-bottom: 0.1em solid #ddd;
  padding: 0.325em 0;
  margin-bottom: 0.625em;
}
.tab-data-section {
  margin-bottom: 1.5em;

  &:last-child {
    margin-bottom: 2em;
  }
}

.tab-label, .tab-data {
  border-bottom: solid white 0.1em;
  padding-top: 0.55em;
  padding-bottom: 0.45em;
}
.tab-label, .tab-data, .tab-data-options {
  min-height: 2.5em;
}

.tab-data, .tab-data-options {

}
.tab-data {
  border-bottom: solid #ddd 0.1em;
}
.tab-data-options {
  padding-right: 0;
  padding-top: 0.3em;
  padding-bottom: 0.3em;

  span {
    font-size: 1em;
    margin-left: .325em;
    padding: .3em .65em .1em .65em;
    text-align: center;
    min-width: 2.75em;
    font-weight: normal;
    color: white;
    border-radius: .2em;
  }
}
.tab-data-boolean {
  span {
    width: 2.75em;
    text-align: center;
  }
}

.tab-label {
  padding-left: 2em;
}
.tab-icon {
  color: grey;
  margin-right: .2em
}

button {
  &.disable {
    background-color: #aaa !important;
    border-color: #888 !important;
  }
}

table {
  td {
    vertical-align: middle !important;

    span {
      &.mapping {
        border: 0;
        border-left: solid rgba(0,0,0,0.25) 0.07em;
        color: #a94442;
        margin-left: 0.625em;
        padding-left: 0.625em;
      }
    }

    button {
      margin-left: 0.625em;
      padding: 0.5em 1em 0.2em 1em !important;
    }
  }
}