unepwcmc/SAPI

// Colours

$dark-grey: #666666;
$medium-grey: #dddddd;
$light-grey: #f7f7f7;
$dark-blue: #0e76b1;
$light-blue: #00a2db;
$link-blue: #0088cc;
$warning-yellow: #c09853;

/* full_screen modal window */
.modal.shipment-form-modal.fade.in, .modal.batch-form-modal.fade.in{
  top: 0;
  left: 0;
  width: 99%;
  height: 99%;
  margin-left: 0;
  .modal-body.filters {
    max-height: 80%;
  }
}

.modal {
  /* new custom width */
  width: 940px;
  /* must be half of the width, minus scrollbar on the left (30px) */
  margin-left: -430px;
}

#downloads-modal {
  width: 500px;
  /* must be half of the width, minus scrollbar on the left (30px) */
  margin-left: -220px;
}

#loading-modal {
  width: 500px;
  /* must be half of the width, minus scrollbar on the left (30px) */
  margin-left: -220px;  
}

.loading-box {
  padding: 50px;
  text-align: center;
}

h2 {
  padding: 16px 0;
  border-bottom: 1px solid lighten($medium-grey, 6%);
  margin-bottom: 29px;
}

div.filters {
  background-color: $light-grey;
  .heading {
    background-color: $medium-grey;
    text-transform: uppercase;
    padding: 6px;
    margin: 8px;
    a {
      color: #fff;
      font-size: 17px;
    }
  }
  //.body .left {
  //  padding: 8px;
  //}
  div.left {
    padding: 8px 15px;
  }
  p {
    padding-bottom: 3px;
    border-bottom: 1px solid lighten($medium-grey, 6%);
    color: darken($medium-grey, 48%);
    font-weight: bold;
  }
  p.small {
    font-weight: lighter;
    border-bottom: none;
  }
  span.blue {
    color: steelblue;
  }
  .row01 {
    padding-top: 6px;
  }

  .popup-holder01 .popup:after {
    background: image-url('species/arrow05-dark.png') no-repeat;
    background-size: 100%;
  }
}

div.secondary-errors {
  p {
    padding-bottom: 0;
    border-bottom: 0;
    color: $warning-yellow;
    font-weight: normal;
  }
}

.inner {
  clear: left;
  div.left {
    float: left;
  }
  select {
    width: 160px;
    border: 1px solid #cccccc;
    background-color: white;
    margin: 5px 10px;
  }
  .popup-area {
    padding: 6px 0;
    margin-bottom: 6px;
    background-color: #fff;
    a { 
      color: darken($medium-grey, 54%);
      padding: 0 6px;
    }
  }
  .popup-area:hover {
    color: $link-blue;
    background-color: #fff;
    .link {
      background-color: #fff;
      color: $link-blue;
    }
    li {
      color: darken($medium-grey, 54%);
    }
  }

}

.inner.one, .inner.four {
  .filter-group {
    width: 190px;
  }
  .filter-group select {
    margin: 0;
    width: 88px;
  }
  .filter-group.time select {
    width: 87px;
  }
  .filter-group.time > select {
    margin-right: 7px;
  }
}
.inner.two, .inner.three {
  .filter-group {
    width: 190px;
  }
}
.inner.one > div.filter-group {
   width: 410px;
   select: {
    widht: 410px;
   }
}

div.popup-holder01 { 
  top: 42px;
  left: 0px;
  padding-top: 0;

  .popup:after {
    right: 78px;
    top: 0;
  }

  border: none;
  background-color : transparent;

  .popup {
    padding-top: 11px;
    border: none;
    
    div.search-block01.no-padding {
      padding: 0;
      border-radius: 0;
      background-color: $light-blue;
      border: $dark-blue solid 1px;

      strong {
        padding: 12px 4px 0 12px;
        color: #fff;
      }

      ul {
        padding: 0 0 4px 12px;
        margin: 0;
        
        li {
          border-radius: 0;
          background-color: $dark-blue;
          color: #fff;
          padding: 0 5px;
          a {
            color: #fff;
          }
        }
      }

      div.row01 {
        padding: 0;
        margin: 0;
        border-radius: 0;
        border: none;
        background: $light-blue;
        height: 39px;
        width: 246px;
        input[type="text"] {
          margin-left: 12px;
          margin-top: 12px;
          padding: 3px 8px;
          background: #fff;
          height: 21px;
          width: 218px;
        }
      }
    }

    div.list-holder {
      border-bottom: $dark-blue solid 1px;
      border-left: $dark-blue solid 1px;
      border-right: $dark-blue solid 1px;
      width: 246px;
      background-color: #ffffff;
      padding: 12px 0 0 12px;
      margin: 0;
      ul {
        margin: 0;
        list-style-type: none;
        li {
          cursor: pointer; 
          cursor: hand;
        }
        li:hover {
          color: $light-blue;
          text-decoration: underline;
        }
        li.header {
          text-transform: uppercase;
          display: block;
          font-weight: bold;
          color: #376381;
          padding: 10px 0 0 0;
          cursor: default;
        }
        li.header:hover {
          color: #376381;
          text-decoration: none;
        }
      }
    }
    
  }
}

.body.in {
  overflow:visible;
}

.heading {clear: left;}

.total-matches {
  color: $dark-grey;
  font-size: 17px;
  line-height: 60px;
}

.shipment-form-modal, .batch-form-modal {
  form {
    margin-bottom: 0;
  }
  .modal-body {
    //max-height: 680px;
    .heading {
      margin: 5px 1px;
    }
    .attribute-area {
      width: 190px;
      margin: 0 0 10px 0;
      input {
        width: 175px;
      }
      input[type="checkbox"] {
        width: 50px;
        margin: 0;
      }
      select {
        width: 190px;
        margin: 0;
        option { 
          color: $link-blue;
        }
      }
    }
    .attribute-area.year {
      height: 64px;
    }
    .attribute-area.taxon-name {
      width: 408px;
      a {
        width: 400px;
      }
    }
  }
  button {
    margin: 2px 10px;
  }
}


span.error {
  font-size: 10px;
  color: red;
}

.species_autocomplete {
  .select2-drop {
    width: 410px !important;
  }
}


.shipments-presentation-container {
  width: 941px;
  //max-height: 600px;
  overflow: auto;
  table {
    color: $dark-grey;
    font-size: 0.8em;
    border-collapse: collapse;
    td, th {
      border: 1px solid $dark-grey;
      padding: 0.2rem;
      text-align: left;
    }

    tr.-destroyed.-modified {
      background-color: #e37b83;
    }

    tr.-modified {
      background-color: #FBF588;
    }

    tbody:hover > tr:hover td {
      text-shadow: none;
      color: darken($dark-grey, 10%);
      opacity: 1;
    }
  }
}

#csv_options {
  margin: 10px;
  input {
    margin-left: 5px;
  }
}

.autocomplete {
  .select2-container, .select2-results {
    width: 190px;
  } 
}

.select2-drop.other_autocomplete {
  .select2-results {
    color: #0088cc;
  }
  .select2-results .select2-highlighted {
    color: #fff;
  }
}

.popup-area:hover .popup-holder01 { display: none; }