//@import 'foundation_and_overrides';
//@import "foundation";
//@import "foundation/components/global";
//@import "foundation/components/alert-boxes";
@import "red_base/variables";
@import "red_base/mixins";

table{
   th{
      text-align:center !important;
   }
   width:90%;
   margin-left:auto ;
   margin-right:auto ;
}

.warning{
   text-shadow:1px 2px 2px 1px black;
}

.error{
   text-shadow:1px 2px 2px 1px black;
}

.vertical {
   list-style: none;
   li {
      display: inline;
   }
}

.inline{
   display:inline;
}

.justify{
   text-align:justify;
}


.header {
   Background: $headerbg;
   height: $headerHeight;
}

footer {
   Background: $darkbg;
   width:100%;
   min-height:60px;
   position:relative;
   margin: 0 auto;
   color:$lightgray;

   div{
      padding:20px 60px;
      font-size:14px;
      a{
         color:$lightgray;
      }
   }
}

fieldset {
  border-radius: $border-radius;
  background: #fff;

  legend {
    color: $darkgray;
    padding: 10px 10px 20px 10px;
    background: none;
  }
  .row {
    padding-bottom: 20px;

  }

}

.form {
   line-height:25px;
   img {
      padding :5px;
   }
   .submit{
      text-align:center;
   }
}


$table-list-line-height: 40px;
/*
  <.table-list>
    .buttons
    .details
*/
.table-list{
   ul:not(.button-group){
      border-top:2px solid $lightergray;
      border-bottom: 5px solid $hover-box;
      list-style: none;
      border-radius: $border-radius;
      overflow: hidden;

      li:not(.btn) {
         min-height: $table-list-line-height;
         line-height: $table-list-line-height;
         border-left: solid 1px $lightergray;
         border-right: solid 1px $lightergray;
         border-bottom: solid 1px $lightergray;
         background-color: $verylightgray;
         opacity: 0.8;
         padding-left: 20px;
         padding-right: 20px;
         color: lighten(black, 20%);
         overflow: hidden;

           // TODO: Create a mixin for user-select;
         -webkit-user-select: none;
         -moz-user-select: none;
         -khtml-user-select: none;
         -ms-user-select: none;
         -o-user-select: none;
         &.selected {
            background: $selected-bg;
         }
         &:hover.selected{
            background: darken($selected-bg, 5%);
         }
       .show_details {
          display: block;
          @include transition(display 300ms linear 0ms);
       }
       .hide_details {
          display: hide;
          @include transition(display 300ms linear 0ms);
       }
       .title {
          display: inline;
          position: absolute;
          width: 75%;
          height: $table-list-line-height;

       }
       .buttons {
          margin-top: -$table-list-line-height;
          opacity: 0;

          @include transition(opacity 300ms linear 0ms);
       }
       i {
          font-size: 1.2em;
          width: 1em;
          height: 1em;
          text-align: center;
       }
       a{
          color: $darkgray;
       }
       span.btn > a {
          color: white;
       }
       &.table-header {
          background: white;
          padding-top: 5px;
          opacity: 1;
       }
       .overload{
          display:none;
          height:300px;
       }
       &:first-child{
          border-top:solid 1px #E6E6E6;
       }
       &:hover {
            //opacity: 1;
          background: white;
          overflow: hidden;

          & > .buttons {
             opacity: 1;
             @include transition("opacity 300ms linear 0ms");
          }
       }
       div:not(.pagination) {
          padding-right:10px;
          padding-left:10px;
       }
       &.table-summery {
          opacity: 1;
          background: white;
          .small-text {
             font-size: 0.8em;
             padding: 0 10px;
          }

          .pagination {
            display: inline-block;
            font-size: 1em;
            padding-top: $table-list-line-height / 6;
            input {
              text-align: center;
              display: inline;
              width: 1.6em;
              padding: 0 0.1em;
              margin: 0;
              font-size: 1.1em;
              height: 1.2em;
              background: lighten($lightergray, 5%);
              border: 1px solid $lightergray;
            }
              .label {
                text-align: center;
                position: relative;
                font-size: 0.7em;
              }
          }

       }
       .details{
          font-size:0.9em;
          margin: 0 1em;
          padding:1em 0;
          .button-group{
             background-color:$lightergray;
             border-radius: 1em 1em 0 0;
          }
        }
    }
 }
}

.table {
   background: white;
   border-radius: $border-radius;
   -webkit-font-smoothing: antialiased;
   width: auto;
   overflow: auto;
   display: block;
   th {

   }
}

.clearmargin {
   margin-left: 0 !important;
   margin-right: 0 !important;
}

.clearpadding {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

.pointer {
   cursor: pointer;
}

.delete-icon {
   color: $alizarin;
}

#flash {
   padding: 10px 5px;
   border-radius: $border-radius;
   margin: 10px auto;
   display: none;
   cursor: pointer;
   &.error {
      background: $alizarin;
      border: 1px solid darken($alizarin, 5%);
      color: white;
   }
   &.warning {
      background: $sun_flower;
      border: 1px solid darken($sun_flower, 5%);
      color: white;

   }
   &.success {
      background: $emerald;
      border: 1px solid darken($emerald, 5%);
      color: white;

   }
}


.search-bar{
  margin-top: 10px;
  input[type="search"]{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px !important;
  }

  button[type="submit"]{
    border-top-right-radius:5px !important;
    border-bottom-right-radius:5px;
  }
}


#mainloader {
  .text {
    margin: 20% auto;
    width:40%;
    text-align: center;
    color: #4f4f4f;
    h5 { color: #4f4f4f;}
  }
}


.red {
  background-color: $alizarin;
  color: white;
}

.green {
  background-color: $emerald;
  color: white;

}

.yellow {
  background-color: $sun_flower;
  color: white;
}

.blue {
  background-color: $peter_river;
  color: white;
}
.lightgray {
  background-color: $lightgray;
}
.lightergray {
  background-color: $lightergray;
}
.rounded {
  border-radius: $border-radius;
}

.text-4x {
  font-size: 4em;
}
.text-2x {
  font-size: 2em;
}

.elabel {
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  padding: 0.1875em 0.625em 0.25em;
  font-size: 0.75em;
}

.debug_dump {
  margin: 10px auto;
  width: 80%;
  padding: 15px;
  background: #efefef;
  border: 1px #dfdfdf solid;

}

input {
  &.has-error {
    border: 1px solid $alizarin;
    &:focus {border: 1px solid $alizarin;}
  }
}

.progressbar {
  width: 100%;
  height: 3px;
  background: #eee;
  border: 1px solid #e0e0e0;
  text-align: center;
  font-size: 12px;
  color: $darkgray;

  .filler {
    position: absolute;
    top: 0px;
    float: left;
    left: 0;
    height: 100%;
  }

}

.progressbar-container {
  padding-top: 20px;
}
.text-error {
  color: $alizarin;
}