.default-container{
  @include responsive(mbtb){padding: 5rem 10px}

  padding-left: 18vw;
  padding-top: 5rem;
  padding-right: 20px;
  min-height: 100vh;
  //background: $white;
}
.wrapper{
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  margin: .5%;
  min-height: 250px;
}

.section-wrapper{
  @include responsive(mb){overflow-x: auto;}
  width: 99%;
  min-height: 300px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  margin: .5% 1% .5% .5%;
}
.section-wrapper.auto-height{
  min-height: unset;
  height: auto;
}
.half-section-wrapper{
  //float: left;
  width: 49%;
  min-height: 300px;
  display: inline-block;
  padding: 10px;
  background: $white;
  box-shadow: $shadow-low;
  margin: .5% .5%;

}
.title-section-wrapper{
  @include responsive(mb){overflow-x: auto;}
  width: 99%;
  padding: 20px 10px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  margin: .5% 1% .5% .5%;
}
.modal-input{
  padding: 10px;
  border: 1px solid $gray;
  outline: none;
  border-radius: 5px;
  color: $black;
}
.form-group{
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;

}
.backdrop{
  position: fixed;
  z-index:9999;
  background: rgba(0,0,0,0.8);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: none;
  .center-processing{
    @include absolute(50%,unset,unset,50%);
    @include transform(translate(-50%,-50%));
    color: $white;
    font-size: 60px;
    text-align: center;
    p{
      font-size: 25px;
    }
  }
}
span.link{
  &:hover{
    color: $default-color;
    cursor: pointer;
  }
}

.fa-spinner {
  -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); } }
.filter select{
  padding: 5px 10px;
  outline-color: $default-color;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  width: 100%;
  height:3.5rem;
  box-shadow: $shadow-low;
}
form{
  label{
    margin: 0;
    display: block;
    color: $black;
    font-size: 18px;
    //color: $default-color;
    //font-weight: bold;
  }
  input,select {
    padding: 5px 10px;
    outline-color: $default-color;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    width: 100%;
    height: 3.5rem;
    box-shadow: $shadow-low;
  }
  input[type='submit']{
    width:auto;
    height: auto;
  }
  textarea{
    border-radius: 5px;
    padding: 5px 10px;
    outline-color: $default-color;
    border: 1px solid #d6d6d6;
    width: 100%;
    height: 150px;
  }
}
.input-file{
  border:1px dashed #d6d6d6;
  background: #fbf6ff;
  height: 150px;
}
.list-img{
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.select-display{
  .img-holder{
    position: relative;
    &:hover{
      .delete{
        display: block;
      }
    }

  }
  input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .check{
    //display: block;
    @include absolute(0,0,unset,unset);
    width: 25px;
    height:25px;
    background: #ececec;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;

  }
  .delete{
    display: none;
    @include absolute(0,unset,unset,0);
    width: 25px;
    height:25px;
    background: #a4130d;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }

  /* IMAGE STYLES */
  input[type=radio] + img {
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    &:hover{
      border:2px solid #ececec;
      box-shadow: $shadow-low;
    }

  }

  /* CHECKED STYLES */
  input[type=radio]:checked + img {
    border: 2px solid $default-color;
    box-shadow: $shadow;
  }
  input[type=radio]:checked + img + .check{
    //display: block;
    background: $default-color;
  }
}
.modal{
  .fa-exclamation-circle{
    color: #c5330c;
    font-size: 60px;
    box-shadow: $shadow;
    border-radius: 100%;
  }
  .fa-exclamation-triangle{
    color: #c5330c;
    font-size: 60px;
    border-radius: 100%;
  }
  .fa-question-circle{
    color:$blue;
    font-size: 60px;
    border-radius: 100%;
  }

  .modal-header{
    @include background-linear((to bottom,$light-blue 25%,$blue, $light-blue));
    font-weight: bold;
    p,h1,h2,h3,h4,h5,h6{
      color: white;
      text-transform: capitalize;

    }
  }
}
#offerModal{
  .modal-content{
    background: $body;
  }
}

div.dataTables_wrapper div.dataTables_filter input{
  width: 360px;
  @include responsive(mb){width:270px}

  max-width: 100%;
  border: 1px solid $default-color;
  border-radius: 5px;
  padding: 5px;
  outline: none;
}
div.dataTables_wrapper div.dataTables_length select{
  border: 1px solid $default-color;
  border-radius: 5px;
  padding: 5px;
  outline: none;
}
div.dataTables_wrapper div.dataTables_length label,div.dataTables_wrapper div.dataTables_info{
  font-size: 15px;
}
div.dataTables_wrapper .dataTables_length{
  float: left;
  @include responsive(mb){float: unset}

}
div.dataTables_wrapper div.dataTables_filter{
  float: right;
  @include responsive(mb){float: unset}

}
.paginate_button{
  padding: 0 8px;
  outline: none;
  &:hover{
    cursor: pointer;
  }
}
.paginate_button.current{
  font-weight: bold;
  color: $default-color;
}
.offer-icon{
  font-size: 24px;
  @include flex-line(flex-start,center);
  i{
    color: #67ad80;
    border-radius: 100%;
    box-shadow: $shadow;
    &:hover{
      color: #359c39;
      cursor: pointer;
    }
  }
  i.fa-minus-circle{
    color: #eba58d;
    &:hover {
      color: #c24e44;
    }

  }

}
table{
  i{
    font-size: 22px;
    color:#6f7a94;
    &:hover{
      color: #4a5163;

    }
  }
}
.filter{
  label{
    @include responsive(mb){width: 100%}
  }
  select {
    width: 180px;
    max-width: 50%;
    margin-bottom: 20px;
  }
}
.op{
  color: $light-gray;
  font-size: 14px;
  text-decoration: line-through;

  line-height: 1;
}
.abbr{
    position: relative;
    .full-name{
        @include absolute(-40px,unset,unset, 0);
        padding: 8px;
        font-size: 14px;
        background: rgba(0,0,0,0.8);
        color: white;
        border-radius: 5px;
        display: none;
        width: max-content;
        z-index: 100;
    }
    &:hover{
        .full-name{
            display: block;
        }
    }

}
