select[sel-nr-single]:disabled + div[data-nr-single-container] {
   pointer-events: none !important;
   background-color: #e9ecef !important;
}

select[sel-nr-single]:required + div[data-nr-single-container] {
   background-color: #FFF59D;
}

div[data-nr-single-container].form-select {
  /* border: none !important; */
  /* padding: 0 !important; */
  /* background: none !important; */
}

div[data-nr-single-container]:has(div[data-nr-main-sel-active]), div[data-nr-main-sel-active]  {
   background-color: #EDFFFE !important;
}

div[data-nr-single-container] {
   width: 100%;
   /* height: 100%; */
   /* position: relative; */
}


div[data-nr-main-sel] {
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: inherit;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* con ste 3 dichiarazioni l'utente non riesce a selezionare il testo */
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
 }
 
 div[data-nr-main-sel].invalid {
   border: 2px solid red;
 }

 div[data-nr-single-select-maintext] {
   overflow: hidden;
   text-overflow: ellipsis;
 }

div[data-nr-options] {
   display: block;
   min-width: max-content;
   position: absolute;
   background-color: white;
   padding: 0.25rem;
   z-index: 1066;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

div[data-nr-single-results] {
   width: 100%;
   max-height: 250px;
   overflow-y: auto;
   resize: vertical;
}

/* con questo imposto che quando ci sia l'evento resize (che aggiunge l'attributo "style" al div) allora non ci sia più una max-height */
div[data-nr-single-results][style] {
   max-height: none;
}

div[data-nr-noresult] {
   width: 100%;
   padding: 5px;
   font-style: italic;
}

div[data-nr-single-search-container] {
   display: flex;
   width: 100%;
   gap: 5px;
   align-items: center;
}

input[data-nr-single-search] {
   margin-top: 5px;
   margin-bottom: 5px;
}

input[data-nr-single-search]:focus {
   border-color: #ced4da !important;
   outline: 0 !important;
   box-shadow: none !important;
}

button[data-nr-single-close] {
   display: none;
}

div[data-nr-single-optgroup] {
   font-size: 15px;
   padding: 5px;
   font-weight: bold;
   color: #777777;

   /* con ste 3 dichiarazioni l'utente non riesce a selezionare il testo */
   user-select: none; /* Standard syntax */
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
}

div[data-nr-single-option] {
   font-size: 15px;
   padding: 5px;
   padding-top: 3px;
   padding-bottom: 3px;
   cursor: pointer;

   /* con ste 3 dichiarazioni l'utente non riesce a selezionare il testo */
   user-select: none; /* Standard syntax */
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
}

div[data-nr-single-option-active] {
   background-color: #ccffff !important;
}

div[data-nr-single-option]:hover {
   background-color: #e9ecef !important;
}

div[data-nr-single-option]:focus {
   background-color: #e9ecef !important;
   border: 0 !important;
   outline: none !important;
   overscroll-behavior: none; /*   <--- the trick    */
}

 div[data-nr-single-option-maintext] {
   width: 100%;
}

 div[data-nr-single-option-subtext] {
    color: #777777;
    font-size: 12px;
    width: 100%;
 }

 i[data-nr-single-icon] {
   transform : scale(1.2);
   display : inline-block;
   cursor: pointer;
 }

 i[data-nr-single-icon]:hover {
   color: red;
 }

 /* tooltip */
 .tooltip-validate-sel-nr-single.show {
   opacity: 1;
 }
 
.tooltip-validate-sel-nr-single .tooltip-inner  {
   border: 1px solid grey;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   background-color: white;
   color: black;
}

.tooltip-validate-sel-nr-single .tooltip-inner {
   max-width: 1000px;
   display: flex;
   justify-content: center;
   align-items: center;
   max-height: 45px;
}

.tooltip-validate-sel-nr-single .tooltip-inner i  {
   color: orange;
   display: inline-block;
   transform: scale(1.7);
   padding: 15px;
}

.tooltip-validate-sel-nr-single .tooltip-arrow {
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


/* IN CASO FOSSI SU DISPOSITIVI PIU' PICCOLI */
@media (max-width: 768px) and (max-width: 1000px) {
   div[data-nr-options] {
      display: block;
      position: fixed;
      background-color: white;
      padding: 0.25rem;
      z-index: 1066;
      /* box-shadow: 5px 5px 50px 50px rgba(0,0,0,0.65); */
      height: calc(90vh - 70px) !important;
      width: calc(100vw - 40px) !important;
      left: 8px !important;
      top: 0 !important;
      bottom: 0 !important;
      margin: auto 0 !important;
      right: 20px !important;
   }

   body:has(div[data-nr-options]:not([hidden])):before {
      content: "";
      display: block;
      position: fixed;
      background-color: #0000007e;
      z-index: 1055; /* 1055 per evitare che nei modali scavalchi il menu dove si seleziona */
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
   }

   input[data-nr-single-search] {
      font-size: 18px;
   }

   div[data-nr-single-results] {
      width: 100%;
      max-height: calc(90vh - 70px - (1.5em + .75rem + 2px) - 0.25rem - 10px - .375rem);
      overflow-y: auto;
      resize: none;
      width: inherit;
   }

   div[data-nr-single-option] {
      font-size: 18px;
      border-bottom: 1px solid lightgrey;
      padding-bottom: 5px;
      padding-top: 5px;
      width: inherit;
   }

   div[data-nr-noresult] {
      font-size: 18px;
   }

   body:has(div[data-nr-options]:not([hidden])) {
      overflow-y: hidden !important;
   }

   button[data-nr-single-close] {
      display: flex;
   }
}