/**=====================
     21. Select 2 CSS Start
==========================**/
.select2{
  max-width: 100%;
}
.add-post {
  #cke_text-box {
    border: 1px solid $light-semi-gray;
  }
  form {
    .m-checkbox-inline {
      label {
        margin-bottom: 0;
      }
    }
    .form-group {
      margin-bottom: 30px;
      .form-control {
        border: 1px solid $light-semi-gray;
      }
      .col-form-label {
        padding-bottom: 0;
        padding-top: 0;
        .select2-container--default {
          margin-top: 10px;
          max-width: 100%;
          .selection {
            .select2-selection {
              .select2-search__field {
                padding: 2px;
              }
            }
          }
          .select2-selection--multiple {
            border: 1px solid $light-semi-gray;
            max-width: 100%;
            .select2-selection__rendered {
              li {
                margin-top: 6px !important;
              }
            }
          }
        }
      }
    }
  }
  .dropzone {
    margin-bottom: 30px;
  }
}
.select2-drpdwn {
  .select2-selection {
    border-radius: 0!important;
    border-color: $light-gray!important;
    height: 40px!important;
    padding: 5px;
  }
  .form-control{
    border-radius: 5px;
  }
  .form-control-primary {
    border-color: $primary-color;
    color: $primary-color;
  }
  .form-control-secondary {
    border-color: $secondary-color;
    color: $secondary-color;
  }
  .form-control-success
  {
    border-color: $success-color;
    color: $success-color;
  }
  .form-control-info
  {
    border-color: $light-font;
    color: $light-font;
  }
  .form-control-warning
  {
    border-color: $warning-color;
    color: $warning-color;
  }
  .form-control-danger
  {
    border-color: $danger-color;
    color: $danger-color;
  }
  .form-control-inverse
  {
    border-color: $dark-color;
    color: $dark-color;
  }
  .form-control-primary-fill {
    background-color:$primary-color;
    color:$white;
    &:focus{
      background-color:$primary-color;
    }
  }
  .form-control-secondary-fill {
    background-color:$secondary-color;
    color: white;
    &:focus{
      background-color:$secondary-color;
    }
  }
  .form-control-success-fill{
    background-color:$success-color;
    color:$white;
    &:focus{
      background-color:$success-color;
    }
  }
  .form-control-info-fill
  {
    background-color: $light-font;
    color: $white;
    &:focus{
      background-color: $light-font;
    }
  }
  .form-control-warning-fill
  {
    background-color: $warning-color;
    color: $white;
    &:focus{
      background-color: $warning-color;
    }
  }
  .form-control-danger-fill
  {
    background-color: $danger-color;
    color: $white;
    &:focus{
      background-color: $danger-color;
    }
  }
  .form-control-inverse-fill
  {
    background-color: $dark-color;
    color: $white;
    &:focus{
      background-color: $dark-color;
    }
  }
}

//colors
$color_bon_jour_approx: #e0e0e0;
$color_cape_cod_approx: #424242;
.selection{
  .select2-selection{
    font-family: $font-rubik, $font-serif;
    border-radius: 5px !important;
    .select2-search__field{
      margin-top: 0;
      padding: 0px 0 0 15px;
    }
  }
}
.select2-container--classic {
  .select2-selection--multiple {
    .select2-selection__choice {
      padding: 2px 6px !important;
      margin-top: 0 !important;
      background-color: $primary-color !important;
      border-color: darken($primary-color , 10%) !important;
      color: $white;
      margin-right: 8px !important;
    }
    .select2-selection__choice__remove {
      color: $white !important;
      float: right;
      margin-left: 0.5rem;
    }
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: $color_bon_jour_approx !important;
    color: $color_cape_cod_approx !important;
  }
  .select2-results__options .select2-results__option[aria-selected=true] {   
    color: $white !important;
  }
}
.select2-container--default {
  .select2-selection--single{
    .select2-selection__arrow {
      top: 7px !important;
      right: 10px !important;
    }
  }
  .select2-selection--multiple {
    .select2-selection__choice {
      padding: 2px 6px !important;
      margin-top: 0 !important;
      background-color: $primary-color !important;
      border-color: darken($primary-color , 10%) !important;
      color: $white;
      margin-right: 8px !important;
    }
    .select2-selection__choice__remove {
      color: $white !important;
      float: right;
      margin-left: 0.5rem;
    }
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: $color_bon_jour_approx !important;
    color: $color_cape_cod_approx !important;
  }
  .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: $primary-color !important;
    color: $white !important;
  }
}
.select2-results > .select2-results__options{ 
  border: 1px solid $light-gray;
}

/**=====================
     21. Select 2 CSS Ends
==========================**/