@font-face {
  font-family: font_R;
  src: url(red-hat-display.ttf);
}

@font-face {
  font-family: font_M;
  src: url(red-hat-display-medium.ttf);
}

@font-face {
  font-family: font_B;
  src: url(red-hat-display-bold.ttf);
}

@font-face {
  font-family: font_BL;
  src: url(red-hat-display-black.ttf);
}

$BFI1: #00a651;
$BFI2: #a6ce39;
$BG: #eff8f4;

$mainT: #193C2A;
$subT: #6d7571;
$subT_F: #6d757123;
$faded: #e9ffe4;

$colPos1: #5ABC44;
$colPos1_F: #5abc442a;
$colPos1_H: #3c882b;

$colPos2:#00A651;
$colPos2_F:#00a6501f;
$colPos2_H:#007a3b;

$colEdit: #EE8400;
$colEdit_F: #ee830031;
$colEdit_H: #c96e00;

$colView:#2F6C82;
$colView_F:#2f6c8223;
$colView_H:#1e4e5f;

$colReject: #E84D2E;
$colReject_F: #e84d2e27;
$colReject_H: #c4462c;

$colBlacklist: #262C2C;
$colBlacklist_F: #262c2c25;
$colBlacklist_H: #161d1d;

$colKeep: #5c7b7b;
$colKeep_F: #5c7b7b23;
$colKeep_H: #405353;

$colAlert: #FEC006;
$colAlert_F: #fec00650;
$colAlert_H: #d19d00;

$colInfos: #1fbbeb;
$colInfos_F: #64dbff48;
$colInfos_H: #008fbb;

$colAdmin: #a6b8eb;
$colAdmin_F: #a6bceb48;
$colAdmin_H: #2854a5;

$colEndo: #eba6dc;
$colEndo_F: #eba6dc42;
$colEndo_H: #8a1d72;

$colQuick: #889E81;
$colQuick_F: #889e813f;
$colQuick_H: #515e4d;

$colSched: #3E9F85;
$colSched_F: #3e9f8546;
$colSched_H: #1e4d40;

// SEARCH STYLE
.toolSearch {
  border-radius: 4px;
  font-size: 13px;
  color: $mainT;
  width: 200px;
  height: 35px;
  border-radius: 0;
  font-family: font_M;
  border-top: 1px solid #5c7b7b23;
  border-bottom: 1px solid #5c7b7b23;
}

.toolSearchIco {
  background: #f5f5f5;
  border-radius: 4px 0 0 4px;
  font-size: 13px;
  color: $subT;
  width: fit-content;
  height: 35px;
  padding-left: 15px;
  padding-right: 0px;
  border: 1px solid #5c7b7b23;
  border-right: 0;
}

.toolClear {
  background: $colKeep;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  color: white;
  max-width: 35px;
  min-width: 35px;
  height: 35px;
  transition: 0.4s;

  &:hover {
    transition: 0.4s;
    background: $colKeep_H;
  }
}
.fileUpload{
  // border: red 1px solid;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  margin-bottom: 8px;
  margin-top: -8px;
 
}
.fileUpload .form-control-file button{
  border: red 1px solid;
}

@media only screen and (max-width: 1400px) {
  .toolSearch {
    border-radius: 4px;
    font-size: 11px;
    color: $mainT;
    width: 200px;
    height: 30px;
    border-radius: 0;
    font-family: font_M;
    border-top: 1px solid #5c7b7b23;
    border-bottom: 1px solid #5c7b7b23;
  }

  .toolSearchIco {
    background: #f5f5f5;
    border-radius: 4px 0 0 4px;
    font-size: 11px;
    color: $subT;
    width: fit-content;
    height: 30px;
    padding-left: 11px;
    padding-right: 0px;
    border: 1px solid #5c7b7b23;
    border-right: 0;
  }

  .toolClear {
    background: $colKeep;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
    padding: 0px;
    color: white;
    max-width: 30px;
    min-width: 30px;
    height: 30px;
    transition: 0.4s;

    &:hover {
      transition: 0.4s;
      background: $colKeep_H;
    }
  }
}

.extraIcon {
  max-width: 35px;
  min-width: 35px;
  height: 35px;
  transition: 0.4s;
  background: #f5f5f5;
  font-size: 13px;
  color: $subT;
}

.toolDrop {
  height: 35px;
  font-size: 13px;
  color: $subT;
  box-shadow: 0;

  &:focus {
    outline-width: 0;
    outline-style: none;
    outline: none;
    box-shadow: none;
    border: 1px solid $colPos1;
  }

  &:active {
    outline-width: 0;
    outline-style: none;
    outline: none;
    box-shadow: none;
    border: 1px solid $colPos1;
  }
}

.toolDropOpt {
  padding: 10px;
}

.btn-actions {
  float: right;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  text-align: right;
  background: transparent;
  color: #c4c4c4;
  font-size: 20px;
  padding: 0px;

  &:hover {
    color: $colPos1;
  }

  // border: 1px solid red;
}

// ACTION BUTTONS
.b-positive1,
.b-positive2,
.b-edit,
.b-view,
.b-reject,
.b-blacklist,
.b-keep {
  border-radius: 0;
  border: 0px;
  width: 281px;
  height: 35px;
  color: $subT;
  background: white;
  font-size: 13px;
  padding-left: 15px;
  padding-right: 15px;
  transition: 0.2s;
  text-align: left;

  cursor: pointer;

  &:hover {
    transition: 0.2s;
    color: white;
  }
}

.bX {
  margin-right: 0px;
}

.b-positive1 {
  // color: $colPos1;
  border-left: 5px solid transparent;

  &:hover {
    color: $colPos1;
    border-left: 5px solid $colPos1;
    background: $colPos1_F;
  }
}

.b-positive2 {
  // color: $colPos2;
  border-left: 5px solid transparent;

  &:hover {
    border-left: 5px solid $colPos2;
    color: $colPos2;
    background: $colPos2_F;
  }
}

.b-edit {
  // color: $colEdit;
  border-left: 5px solid transparent;

  &:hover {
    border-left: 5px solid $colEdit;
    color: $colEdit;
    background: $colEdit_F;
  }
}

.b-view {
  // color: $colView;
  border-left: 5px solid transparent;

  &:hover {
    color: $colView;
    border-left: 5px solid $colView;
    background: $colView_F;
  }
}

.b-reject {
  // color: $colReject;
  border-left: 5px solid transparent;

  &:hover {
    color: $colReject;
    border-left: 5px solid $colReject;
    background: $colReject_F;
  }
}

.b-blacklist {
  // color: $colBlacklist;
  border-left: 5px solid transparent;

  &:hover {
    color: $colBlacklist;
    border-left: 5px solid $colBlacklist;
    background: $colBlacklist_F;
  }
}

.b-keep {
  // color: $colKeep;
  border-left: 5px solid transparent;

  &:hover {
    color: $colKeep;
    border-left: 5px solid $colKeep;
    background: $colKeep_F;
  }
}

// TAB BUTTONS
.btn-positive1,
.btn-positive2,
.btn-edit,
.btn-view,
.btn-reject,
.btn-reject,
.btn-keep,
.btn-deact {
  border-radius: 0;
  border: 0px;
  width: fit-content;
  height: 35px;
  color: white;
  font-size: 13px;
  border-radius: 4px;
  padding-left: 15px;
  padding-right: 15px;
  transition: 0.2s;
  text-align: left;

  &:hover {
    transition: 0.2s;
  }
}

@media only screen and (max-width: 1400px) {

  // TAB BUTTONS
  .btn-positive1,
  .btn-positive2,
  .btn-edit,
  .btn-view,
  .btn-reject,
  .btn-reject,
  .btn-keep,
  .btn-deact {
    border-radius: 0;
    border: 0px;
    width: fit-content;
    height: 30px;
    color: white;
    font-size: 11px;
    border-radius: 4px;
    padding-left: 11px;
    padding-right: 11px;
    transition: 0.2s;
    text-align: left;

    &:hover {
      transition: 0.2s;
    }
  }
}

.btn-deact {
  background: #cccccc;

  &:hover {
    background: #818181;
  }
}

.btn-positive1 {
  background: $colPos1;

  &:hover {
    background: $colPos1_H;
  }
}

.btn-positive2 {
  background: $colPos2;

  &:hover {
    background: $colPos2_H;
  }
}

.btn-edit {
  // color: $colEdit;
  background: $colEdit;

  &:hover {
    background: $colEdit_H;
  }
}

.btn-view {
  // color: $colView;
  background: $colView;

  &:hover {
    background: $colView_H;
  }
}

.btn-reject {
  // color: $colReject;
  background: $colReject;

  &:hover {
    background: $colReject_H;
  }
}

.btn-blacklist {
  // color: $colBlacklist;
  background: $colBlacklist;

  &:hover {
    background: $colBlacklist_H;
  }
}

.btn-keep {
  // color: $colKeep;
  background: $colKeep;

  &:hover {
    background: $colKeep_H;
  }
}

.bg_pos1 {
  background: $colPos1;
  color: white;

  &:hover {
    background: $colPos1;
    color: white;
  }
}

.bg_pos2 {
  background: $colPos2;
  color: white;

  &:hover {
    background: $colPos2;
    color: white;
  }
}

.bg_view {
  background: $colView;
  color: white;

  &:hover {
    background: $colKeep;
    color: white;
  }
}

.bg_edit {
  background: $colEdit;
  color: white;

  &:hover {
    background: $colEdit;
    color: white;
  }
}

.bg_reject {
  background: $colReject;
  color: white;

  &:hover {
    background: $colReject;
    color: white;
  }
}

.bg_blacklist {
  background: $colBlacklist;
  color: white;

  &:hover {
    background: $colBlacklist;
    color: white;
  }
}

.bg_keep {
  background: $colKeep;
  color: white;

  &:hover {
    background: $colKeep;
    color: white;
  }
}

.modalText {
  font-size: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: $colPos2_H;

  
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.modalEdit:disabled {
  border: 0px;
  border: 1px solid #ebebeb;
  background: #fafafa !important;
  font-size: 11px;
  border-radius: 4px;
  padding: 8px 20px;
  margin-bottom: 16px;
  height: 35px;
  width: 100%;
}

.modalEdit {
  width: 100%;
  height: 35px;
  border-radius: 4px;
  border: 0px;
  border: 1px solid $subT_F;
  background: white !important;
  font-size: 11px;
  padding: 8px 20px;
  margin-bottom: 16px;

  &:focus {
    outline: hidden;
    outline-width: 0;
    outline-style: none;
    background: $colPos1_F !important;
    border: 1px solid $colPos1;
  }
}
.b-custom-control-sm .custom-file-label,
.input-group-sm .custom-file-label .modalEdit{
  width: 100%;
  height: 35px;
  border-radius: 4px;
  border: 0px;
  border: 1px solid $subT_F;
  background: white !important;

}
@media only screen and (max-width: 1400px) {
  .modalEdit:disabled {
    height: 30px;
  }
  
  .modalEdit {
    height: 30px;
  }
  .b-custom-control-sm .custom-file-label,
  .input-group-sm .custom-file-label .modalEdit{
    height: 30px;
  
  }
}

// .b-custom-control-sm .custom-file-label,
// .input-group-sm .custom-file-label .modalEdit {
//   width: 100%;
//   height: 30px;
//   border-radius: 4px;
//   border: 0px;
//   border: 1px solid $subT_F;
//   background: white !important;
//   font-size: 11px;
//   padding: 8px 20px;
//   margin-bottom: 16px;

//   &:focus {
//     outline: hidden;
//     outline-width: 0;
//     outline-style: none;
//     background: $colPos1_F !important;
//     border: 1px solid $colPos1;
//   }
// }

.inputDone {
  outline: hidden;
  outline-width: 0;
  outline-style: none;
  border: 1px solid $colPos1;
}

.noMargin {
  margin: 0;
}

.text-main {
  color: $mainT;
  padding: 1.5px;
  white-space: nowrap;
  height: fit-content;
  text-align: left;
  // border: 1px solid gray;
}
.text-main-center {
  color: $mainT;
  padding: 1.5px;
  white-space: nowrap;
  height: fit-content;
  text-align: center;
  // border: 1px solid gray;
}

.text-sub {
  // border: 1px solid gray;
  text-align: left;
  color: $subT;
  padding: 1.5px;
  white-space: nowrap;
  height: fit-content;
}

.text-sub2 {
  // border: 1px solid gray;
  color: $subT;
  padding: 1.5px;
  font-size: 11px;
  white-space: nowrap;
  height: fit-content;
}

.text-sub-pill,
.text-sub2-pill,
.text-pos1-pill,
.text-pos2-pill,
.text-view-pill,
.text-edit-pill,
.text-reject-pill,
.text-blacklist-pill,
.text-keep-pill,
.text-infos-pill,
.text-alert-pill,
.text-endo-pill,
.text-quick-pill,
.text-sched-pill,
.text-admin-pill {
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  width: fit-content;
  border-radius: 4px;
  white-space: nowrap;
}

.text-sub-pill {
  color: $subT;
  background: $subT_F;
  max-width: 300px;
  font-size: 10px;
  text-align: left;
  padding-left: 7px;
  padding-right: 7px;
}

.text-sub2-pill {
  color: $subT;
  background: $subT_F;
  max-width: 300px;
  font-size: 10px;
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}

@media only screen and (max-width: 1400px) {

  .text-sub-pill,
  .text-sub2-pill,
  .text-pos1-pill,
  .text-pos2-pill,
  .text-view-pill,
  .text-edit-pill,
  .text-reject-pill,
  .text-blacklist-pill,
  .text-keep-pill,
  .text-infos-pill,
  .text-alert-pill,
  .text-endo-pill,
  .text-quick-pill,
  .text-sched-pill,
  .text-admin-pill {
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: center;
    width: fit-content;
    border-radius: 4px;
    white-space: nowrap;
  }

  .text-sub-pill {
    color: $subT;
    background: $subT_F;
    max-width: 300px;
    font-size: 10px;
    text-align: left;
    padding-left: 7px;
    padding-right: 7px;
  }

  .text-sub2-pill {
    color: $subT;
    background: $subT_F;
    max-width: 300px;
    font-size: 10px;
    text-align: left;
    padding-left: 7px;
    padding-right: 7px;
    white-space: nowrap;
  }
}

.text-pos1-pill {
  color: $colPos1;
  background: $colPos1_F;
}

.text-pos2-pill {
  color: $colPos2;
  background: $colPos2_F;
}

.text-view-pill {
  color: $colView;
  background: $colView_F;
}

.text-edit-pill {
  color: $colEdit;
  background: $colEdit_F;
}

.text-reject-pill {
  color: $colReject;
  background: $colReject_F;
}

.text-blacklist-pill {
  color: $colBlacklist;
  background: $colBlacklist_F;
}

.text-keep-pill {
  color: $colKeep;
  background: $colKeep_F;
}

.text-infos-pill {
  color: $colInfos;
  background: $colInfos_F;
}

.text-alert-pill {
  color: $colAlert_H;
  background: $colAlert_F;
}

.text-admin-pill {
  color: $colAdmin_H;
  background: $colAdmin_F;
}

.text-endo-pill {
  color: $colEndo_H;
  background: $colEndo_F;
}

.text-quick-pill {
  color: $colQuick_H;
  background: $colQuick_F;
}

.text-sched-pill {
  color: $colSched_H;
  background: $colSched_F;
}

.stage {
  text-transform: capitalize;
  // font-weight: bold;
  display: flex;
  align-items: center;
  white-space: nowrap;
  // height: 20px;
}

.stage span {
  font-size: 50px;
}

.text-subb {
  color: $subT;
}

.text-pos1 {
  color: $colPos1;
}

.text-pos2 {
  color: $colPos2;
}

.text-view {
  color: $colView;
}

.text-edit {
  color: $colEdit;
}

.text-reject {
  color: $colReject;
}

.text-blacklist {
  color: $colBlacklist;
}

.text-keep {
  color: $colKeep;
}

.text-infos {
  color: $colInfos;
}

.text-alert {
  color: $colAlert;
}

.noWarp {
  white-space: nowrap;
}

input.vdatetime-input {
  width: 456px;
  border-radius: 4px;
}