/* Forms
   ------------------------------------------ */
fieldset {
   legend {
      color: $grey;
      font: {
         size: $font-size-base;
         weight: $font-bold;
      }
      padding: 10px 0;
   }
}

/* Form Group
   ------------------------------------------ */
.form-group {
   margin-bottom: 20px;

   label {
      color: $grey;
      font-size: 12px;
      width: 100%;
   }

   .form-control {
      border: 1px solid #d5dbdb;
      background: white;
      @include border-radius(0);
      padding: 5px 10px;
      height: 40px;
      width: 100%;
      @include transition(all 0.3s ease);

      &:hover,
      &:focus {
         border: 1px solid $blue;
         box-shadow: none;
         outline: 0px;
      }

      &:disabled {
         background: #eff0f0;
         border: none;
         color: #666c70;
         font-weight: 600;
         padding: 10px;
      }

      &.form-control-calendar {
         display: inline-block;
         width: 90%;
      }

      &.form-small {
         width: 100px;
      }
   }

   textarea.form-control {
      height: 135px;
      padding: 10px;
   }

   .help-block {
      display: block;
      font-size: 11px;
      line-height: 14px;
      margin-top: 5px;
      color: #818181;
      width: 100%;
      * {
         color: #818181;
         font-size: 11px;
      }
   }

   a {
      display: block;
      line-height: 22px;
   }
}

.form-group-inline {
   display: flex;
   align-items: center;
   .btn {
      margin: 0 10px;
      line-height: 20px;
      height: 40px;
   }
}

.form-margin {
   padding-bottom: 30px;
}

.form-select {
   border: 1px solid #d5dbdb;
   background: url("../assets/svg/ico-arrow-down.svg") no-repeat center right 15px white;
   background-size: 15px;
   position: relative;
   @include transition(all 0.3s ease);

   .form-control {
      background: transparent;
      border: none;
      padding-right: 30px;
      cursor: pointer;
      -moz-appearance: none;
      -webkit-appearance: none;
      @media (min-width: $small) {
         min-width: 250px;
      }

      &--small {
         min-width: 70px;
      }

      &:hover,
      &:focus {
         border: none;
      }
   }

   &--small {
      margin-bottom: 5px;
      width: 100px;
   }

   .ui-selectmenu-button {
      padding: 10px;
   }

   &:hover,
   &:focus {
      border: 1px solid $blue;
   }
}

/* Form Group + ico
   ------------------------------------------ */
.form-input-ico {
   position: relative;
   .ico {
      border: none;
      @include position(absolute, $right: 10px, $top: 7px, $height: 25px);
   }
}

/* Form Group - ERROR
   ------------------------------------------ */
.has-error {
   label {
      color: $error;
   }

   .form-control {
      background: rgba($error, 0.015);
      border: 1px solid $error;
   }
}

/* Others
   ------------------------------------------ */
.radio-block,
.check-block {
   align-items: start;
   display: flex;
   margin-bottom: 10px;
   label {
      color: $grey;
      margin: 0 5px;
      line-height: 15px;
   }
   @media (max-width: $small) {
      margin-bottom: 15px;
   }
}

/* Buttons
   ------------------------------------------ */
.btn {
   background: $blue-dark;
   @include border-radius(0);
   @include transition(all 0.3s ease);
   color: white;
   font: {
      size: $font-size-base;
      weight: 600;
   }
   line-height: 14px;
   margin-bottom: 10px;
   text-align: center;
   padding: 10px 20px;
   width: 100%;
   max-width: 320px;

   &:hover,
   &:focus {
      background: darken($blue-dark, 10%);
      color: white;
   }

   span {
      color: white;
   }

   &.disabled,
   &:disabled {
      opacity: 0.3;
   }

   &.btn-small {
      width: auto;
   }

   &:not([href]):not([tabindex]) {
      color: white;
      &:hover,
      &:focus {
         color: white;
      }
   }

   &.btn-clic {
    border: 2px solid #0078db;
    background: #0078db;
  }
}

.btn-border {
   border: 2px solid $blue;
   background: transparent;
   color: $blue;

   &:hover,
   &:focus {
      background: $blue;
      color: white;
   }
}

.btn-white {
   border: 1px solid white;
   // background: white;
   color: white;

   span {
      color: white;
   }

   &:hover,
   &:focus {
      background: $blue;
      border: 1px solid $blue;
   }
}

.btn-blue {
   background: $blue;

   &:hover,
   &:hover {
      background: darken($blue, 10%);
   }
}

.btn-number {
   width: 40px;
}

/* Group
   ------------------------------------------ */
.btn-link {
   color: $blue;
   cursor: pointer;
   font-size: 12px;
   @include transition(all 0.5s ease);

   &:hover,
   &:focus {
      color: darken($blue, 10%);
      text-decoration: none;
   }
}

.link-change {
   display: block;
   margin: 20px 0;
}

/* Group
   ------------------------------------------ */
.input-group {
   border: 1px solid #1d242c;
   margin-bottom: 10px;
   max-width: 170px;

   .form-control {
      border: none;
      font-size: 18px;
      height: 35px;
      text-align: center;
   }

   .input-group-btn {
      button {
         background: white;
         height: 35px;
         padding: 0;
         margin: 0;

         span {
            color: $blue;
            font-size: 20px;
         }

         &:hover,
         &:focus {
            background: transparent;
            border: none;
         }
      }
   }
}

/* Content Submit
   ------------------------------------------ */
.content-submit {
   margin-top: 40px;
   @media (max-width: $medium) {
      @include position(fixed, $bottom: 10px, $width: 90%, $height: auto);
      margin: 0;
      z-index: 100;
      .btn {
         margin: 0;
         margin-bottom: 5px;
      }
      a,
      a span {
         font-size: 12px;
      }
   }
}

.details-submit {
   margin-top: 20px;
   @media (max-width: $medium) {
      align-items: flex-start !important;
      width: 100%;
      padding: 0;
      text-align: left;
   }
}

/* Login Form
   ------------------------------------------ */
.login-form {
   border: 1px solid #414141;
   padding: $spacing;

   @media (max-width: $large) {
      padding: $spacing;
   }
}

/* Filters
   ------------------------------------------ */
.filter {
   width: 100%;

   p {
      font-weight: 600;
      margin: 10px 10px 10px 0;
   }

   span {
      cursor: pointer;
      color: $blue;
      flex: 1 100%;
      font-size: 11px;
      margin: 5px;
      text-align: right;
      @include transition(all 0.5s ease);
      &:hover,
      &:focus {
         color: darken($blue, 20%);
      }
   }

   .item-filtro {
      margin-bottom: 5px;
      margin-left: 20px;
      flex: 1 !important;
      max-width: 260px;

      .form-control {
         width: 100%;
      }

      &.item-filtro-last {
         @media (min-width: $small) {
            margin-left: auto;
         }
      }

      &.item-filtro-first {
         @media (min-width: $small) {
            align-items: center;
            display: flex;
            margin: 0 auto 0 0;
            h2 {
               margin: 0;
            }
         }
      }
   }

   .filters {
      flex-wrap: wrap;
      display: flex;
      justify-content: flex-end;
      margin: 40px 0;
      width: 100%;

      @media (max-width: $large) {
         justify-content: flex-start;
         p {
            flex: 1 100%;
         }
      }

      @media (max-width: $small) {
         flex-direction: column;
         .item-filtro {
            margin: 0 0 0.5rem 0;
            max-width: 100%;
         }
      }
   }
}

/* Quit border FIrefox
   ------------------------------------------ */
a:active,
a:active * {
   outline: none !important;
   -moz-outline-style: none !important;
}

a:focus,
a:focus * {
   outline: none !important;
   -moz-outline-style: none !important;
}

.search input:-webkit-autofill,
.search input:-webkit-autofill:hover,
.search input:-webkit-autofill:focus,
.search input:-webkit-autofill:active {
   -webkit-text-fill-color: white !important;
   transition: background-color 5000s ease-in-out 0s;
}

*:focus {
   border-color: inherit !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
}

.box-disabled {
   background: #eff0f0;
   border: none;
   color: #666c70;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   padding: 10px;
   height: 40px;
   width: 100%;
}

/* --- campo select con span --- */

.selection {
   display: block;
   border: 1px solid #d5dbdb;
   background-color: #fff;
   position: relative;
}
.select2-container--default .select2-selection--single {
   -webkit-border-radius: 0;
   padding: 5px 10px;
   height: 40px;
   width: 100%;
   background: transparent;
   padding-right: 30px;
   cursor: pointer;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
   border: 0;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--single:focus {
   border: none;
}
.selection:hover,
.selection:focus {
   border: 1px solid #006cd8;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
   border-color: transparent;
   border-style: none;
   border-width: 0;
   height: 15px;
   width: 15px;
   left: 50%;
   margin-left: -19px;
   margin-top: 0;
   position: absolute;
   top: 50%;
   background: url(../assets/svg/ico-arrow-down.svg) no-repeat center center #fff;
   background-size: contain;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
   text-indent: -9999px;
   background: url(../assets/svg/ico-close.svg) no-repeat center center #fff;
   background-size: contain;
   width: 10px;
   height: 10px;
   margin-top: 10px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
   border: 1px solid #d5dbdb;
   outline: 0;
}
.select2-results__option {
   font-size: 11px;
   line-height: 14px;
   margin-top: 5px;
   color: #818181;
}

.select2-dropdown {
   border: 1px solid #d5dbdb;
   border-radius: 0;
}

/* --- campo archivo --- */

input[type="file"] {
   display: block;
   border: 1px solid #d5dbdb;
   background-color: #fff;
   -webkit-border-radius: 0;
   padding: 5px 10px;
   height: 40px;
   width: 100%;
   margin-bottom: 4px;
}

// Button + Label
button {
   label {
      margin-bottom: 0;
   }
}