/*
 * NOYTRIX TRACKING CUSTOM DROPDOWNS V19
 *
 * Replaces visible native selects only.
 * Original select remains underneath for
 * existing Tracking filtering logic.
 */


#screen-tracking
.tracking-v14-toolbar {

  overflow:
    visible
    !important;
}


/* ==========================================================
   WRAPPER
   ========================================================== */

#screen-tracking
.nx-tracking-select-v19 {

  position:
    relative;

  z-index:
    80;

  width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-v19.open {

  z-index:
    9999;
}


/* ==========================================================
   HIDE NATIVE SELECT VISUALLY
   ========================================================== */

#screen-tracking
.nx-tracking-select-native-v19 {

  position:
    absolute
    !important;

  width:
    1px
    !important;

  height:
    1px
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  opacity:
    0
    !important;

  pointer-events:
    none
    !important;

  overflow:
    hidden
    !important;
}


/* ==========================================================
   CLOSED BUTTON
   ========================================================== */

#screen-tracking
.nx-tracking-select-button-v19 {

  width:
    100%;

  min-width:
    0;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    0
    15px
    0
    17px;

  border:
    1px solid
    rgba(
      66,
      105,
      157,
      .48
    );

  border-radius:
    11px;

  outline:
    none;

  color:
    #edf4ff;

  background:
    linear-gradient(
      180deg,
      rgba(
        10,
        31,
        58,
        .98
      ),
      rgba(
        7,
        24,
        47,
        .98
      )
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .025
    );

  font:
    inherit;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color
    .16s ease,
    background
    .16s ease,
    box-shadow
    .16s ease,
    transform
    .16s ease;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-button-v19:hover {

  border-color:
    rgba(
      255,
      183,
      32,
      .48
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        13,
        37,
        67,
        1
      ),
      rgba(
        8,
        28,
        52,
        1
      )
    );
}


#screen-tracking
.nx-tracking-select-button-v19:focus-visible {

  border-color:
    rgba(
      255,
      183,
      32,
      .72
    );

  box-shadow:
    0
    0
    0
    3px
    rgba(
      255,
      183,
      32,
      .09
    );
}


#screen-tracking
.nx-tracking-select-v19.open
.nx-tracking-select-button-v19 {

  border-color:
    rgba(
      255,
      183,
      32,
      .70
    );

  background:
    #0a2341;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      255,
      183,
      32,
      .07
    );
}


#screen-tracking
.nx-tracking-select-label-v19 {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   ARROW
   ========================================================== */

#screen-tracking
.nx-tracking-select-arrow-v19 {

  flex:
    0
    0
    auto;

  width:
    24px;

  height:
    24px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    7px;

  color:
    #91a8c9;

  transition:
    transform
    .18s ease,
    color
    .18s ease,
    background
    .18s ease;
}


#screen-tracking
.nx-tracking-select-v19.open
.nx-tracking-select-arrow-v19 {

  transform:
    rotate(180deg);

  color:
    #ffbd32;

  background:
    rgba(
      255,
      183,
      32,
      .08
    );
}


/* ==========================================================
   MENU
   ========================================================== */

#screen-tracking
.nx-tracking-select-menu-v19 {

  position:
    absolute;

  top:
    calc(
      100% + 7px
    );

  left:
    0;

  right:
    0;

  z-index:
    10000;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    7px;

  border:
    1px solid
    rgba(
      67,
      108,
      162,
      .52
    );

  border-radius:
    13px;

  color:
    #edf4ff;

  background:
    linear-gradient(
      180deg,
      #0b203b,
      #07182e
    );

  box-shadow:
    0
    20px
    55px
    rgba(
      0,
      0,
      0,
      .42
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .035
    );

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(-5px)
    scale(.985);

  transform-origin:
    top center;

  transition:
    opacity
    .14s ease,
    transform
    .14s ease,
    visibility
    .14s ease;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-v19.open
.nx-tracking-select-menu-v19 {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0)
    scale(1);
}


/* ==========================================================
   OPTION
   ========================================================== */

#screen-tracking
.nx-tracking-select-option-v19 {

  width:
    100%;

  min-height:
    39px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    0
    10px
    0
    12px;

  border:
    0;

  border-radius:
    9px;

  outline:
    none;

  color:
    #aebfda;

  background:
    transparent;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.2;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
    .12s ease,
    color
    .12s ease,
    transform
    .12s ease;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-option-v19:hover,
#screen-tracking
.nx-tracking-select-option-v19:focus-visible {

  color:
    #ffffff;

  background:
    rgba(
      74,
      125,
      190,
      .14
    );
}


#screen-tracking
.nx-tracking-select-option-v19.selected {

  color:
    #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        183,
        32,
        .12
      ),
      rgba(
        255,
        183,
        32,
        .035
      )
    );
}


#screen-tracking
.nx-tracking-select-option-v19.selected:hover {

  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        183,
        32,
        .17
      ),
      rgba(
        255,
        183,
        32,
        .06
      )
    );
}


#screen-tracking
.nx-tracking-select-option-label-v19 {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   CHECK
   ========================================================== */

#screen-tracking
.nx-tracking-select-check-v19 {

  width:
    24px;

  height:
    24px;

  flex:
    0
    0
    24px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    7px;

  color:
    #ffbd32;

  background:
    rgba(
      255,
      183,
      32,
      .09
    );

  opacity:
    0;

  transform:
    scale(.72);

  transition:
    opacity
    .12s ease,
    transform
    .12s ease;
}


#screen-tracking
.nx-tracking-select-option-v19.selected
.nx-tracking-select-check-v19 {

  opacity:
    1;

  transform:
    scale(1);
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (
  min-width: 1200px
) {

  #screen-tracking
  .nx-tracking-select-menu-v19 {

    min-width:
      100%;
  }

}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (
  max-width: 1199px
) {

  #screen-tracking
  .nx-tracking-select-button-v19 {

    height:
      46px;
  }


  #screen-tracking
  .nx-tracking-select-menu-v19 {

    max-height:
      260px;

    overflow-y:
      auto;
  }

}


/* ==========================================================
   NOYTRIX TRACKING
   RESTORE ORIGINAL TOOLBAR GEOMETRY
   DO NOT TOUCH DROPDOWN MENU DESIGN
   ========================================================== */

@media (min-width: 1200px) {

  #screen-tracking
  .tracking-v14-toolbar {

    display:
      grid
      !important;

    grid-template-columns:
      minmax(0, 1fr)
      210px
      210px
      54px
      !important;

    column-gap:
      10px
      !important;

    row-gap:
      0
      !important;

    align-items:
      stretch
      !important;

    justify-content:
      stretch
      !important;

    width:
      100%
      !important;

    max-width:
      100%
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* both custom dropdown containers */

  #screen-tracking
  .tracking-v14-toolbar
  > .nx-tracking-select-v19 {

    width:
      210px
      !important;

    min-width:
      210px
      !important;

    max-width:
      210px
      !important;

    margin:
      0
      !important;

    justify-self:
      stretch
      !important;

    align-self:
      stretch
      !important;
  }


  /* closed buttons — original large size */

  #screen-tracking
  .tracking-v14-toolbar
  .nx-tracking-select-button-v19 {

    width:
      210px
      !important;

    min-width:
      210px
      !important;

    max-width:
      210px
      !important;

    height:
      48px
      !important;

    min-height:
      48px
      !important;

    margin:
      0
      !important;

    padding-left:
      17px
      !important;

    padding-right:
      14px
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* custom menu follows button width */

  #screen-tracking
  .tracking-v14-toolbar
  .nx-tracking-select-menu-v19 {

    width:
      210px
      !important;

    min-width:
      210px
      !important;

    max-width:
      210px
      !important;

    left:
      0
      !important;

    right:
      auto
      !important;
  }

}