/** ARRAY DROPDOWN - start **/
.dropdown {
  display: flex;
  flex-direction: row;
  font-size: 0.9vw;

  z-index: 1;

  position: absolute;
}

.dropdown > label {
  margin: 0 0.2vw;
  color: var(--light-text);
}

.dropdown-wrapper {
    display: flex;
    flex-direction: column;
  
    min-width: 6vw;
    width: fit-content;
    /* padding: 0 0.2vw; */
  
    background: linear-gradient(0deg, #242424, #242424), linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    color: var(--app-name);
    border-radius: 0.2vw;
  }
  
  .select-wrapper {
    width: auto;
    height: 1.7vw;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 0.2vw;
    padding-right: 0.3vw;
  
    cursor: pointer;
  }
  
  .select-wrapper-selected-value {
    font-size: 0.7vw;
    padding: 0.25vw;
    margin-right: 0.2vw;

    display: flex;
    flex-direction: row;
  }
  .select-wrapper-selected-value > .inside-label {
    color: var(--less-light-border-color);
    margin-right: 0.3vw;
  }
  .select-wrapper-selected-value > .selected-value-text {
    padding-top: 0.05vw;
  }
  
  .dropdown-chevron {
    text-align: center;
    font-size: 0.5vw;
    margin-top: 0.6vw;

    color: var(--less-light-border-color);
  }
  
  .options-wrapper {
    width: 100%;
  }
  
  .options-wrapper > .no-items-found {
    font-size: 0.7vw;
    padding: 0.17vw 0.6vw 0.17vw 0.6vw;
  }

  .option-child {
    cursor: pointer;
    
    padding: 0.17vw 0.8vw 0.17vw 0.45vw;
    min-height: 1.7vw;
    border-radius: 0.2vw;
    font-size: 0.7vw;
  }
  
  .option-child > p {
    display: flex;
    flex-direction: row;
  }
  .option-child > p > .icon {
    font-size: 0.65vw;
    padding-top: 0.35vw;
    margin-left: 0.5vw;
  }
  
  .option-child:hover {
    background-color: var(--black-two-opaque-color);
  }

  /** ARRAY DROPDOWN - end **/

  /** LARGE MODAL WITH FOOTER - start **/
  .large-footer-modal {
    display: flex;
    overflow: hidden !important;
    border-radius: 0.2vw;
    
    position: absolute;
    outline: none;
    z-index: 999999;
    opacity: 1;

    left: 60%;  
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);  
    transition: all 0.3s linear;
  }
  
  .large-footer-modal-dialog {
    /* min-height: 8vw; */
    width: 33vw;
    height: 35vw;
    display: flex;
    position: relative;
  }
  
  .large-footer-modal-content {
      display: flex;
      position: relative;
      flex-direction: column;

      width: 100%;
      pointer-events: auto;
      
      background-color: var(--tile-color);
      box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(255, 255, 255, 0.15);
      background-clip: padding-box;
      border-radius: 0.2vw;
      
      outline: none;
      border: 0.08px solid var(--light-border-color);
  }
  
  .large-footer-modal-body {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    font-size: 0.8vw;
    font-weight: 300;
    /* border: 0.08px solid var(--light-border-color); */
  }

  /** HEADER - start **/
  .large-footer-modal-body > .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    height: 2.1vw;
    padding: 0.4vw;
    border-bottom: 0.1px solid var(--light-border-color);
  }

  .large-footer-modal-body > .header > .heading-title-wrapper {
    display: flex;
    flex-direction: row;
    padding: 0.2vw;
  }
  .large-footer-modal-body > .header > .heading-title-wrapper > .info-icon {
    margin-right: 0.5vw;
    color: var(--blue-color);
    font-size: 0.75vw;
  }
  .large-footer-modal-body > .header > .heading-title-wrapper > p {
    font-size: 0.7vw;
    font-weight: 600;
    margin-top: -0.15vw;
  }
  .large-footer-modal-body > .header > div > .close-icon {
    color: var(--less-light-border-color);
    padding-right: 0.2vw;
    cursor: pointer;
  }
  /** HEADER - end **/

  /** BODY - start **/
  .large-footer-modal-body > .large-footer-modal-body-data {
    display: flex;
    flex-direction: column;

    height: 30.5vw;
    padding: 1.2vw 1.8vw;
  }

  
  /** BODY - end **/

  /** FOOTER - start **/
  .large-footer-modal-body > .large-footer-modal-footer {
    background-color: var(--footer-color);
    height: 2.3vw;
  }
  /** FOOTER - end **/
  /** LARGE MODAL WITH FOOTER - end **/