.add-substance-modal .modal {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.4);
}

.add-substance-modal .modal-input {
   width: 100%;
   border: 1px solid var(--table-border-color);
   color: var(--text-color);
   padding: 16px 12px;
   font-size: 16px;
}

.add-substance-modal .modal-input:focus {
   outline: 3px solid var(--primary-hover);
   border: none;
   box-shadow: var(--primary-hover);
}

.add-substance-modal .modal__content {
   position: relative;
   background-color: var(--bg);
   margin: 100px auto;
   padding: 32px;
   min-height: 707px;
   width: 900px;
   border-radius: 16px;
}

.add-substance-modal .modal__content h2 {
   font-family: var(--font-family);
   font-weight: 600;
   font-size: 36px;
   margin: 0;
   margin-bottom: 32px;
}

.add-substance-modal .modal__content p {
   font-weight: 700;
   font-size: 16px;
   margin: 0;
   margin-bottom: 8px;
}

.add-substance-modal .form-control:focus {
   outline: 3px solid var(--primary-hover);
   border: none;
   box-shadow: var(--primary-hover);
}

.add-substance-modal .modal__content select {
   border-color: var(--table-border-color);
   background-color: var(--bg);
   background-image: url('../img/icons/Vector.svg');
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 12px 12px;
   color: var(--text-color);
   padding: 16px 12px;
   appearance: none;
}

.add-substance-modal .modal__content select:focus,
.add-substance-modal .modal__content select:active {
   border-color: var(--table-border-color);
}

.add-substance-modal .modal__content input::placeholder {
   font-size: 16px;
}

.add-substance-modal .btn-remove {
   position: absolute;
   width: 16px;
   height: 16px;
   cursor: pointer;
   right: 10px;
   top: 50%;
   transform: translate(-50%, -85%); 
}
.add-substance-modal .visible {
   display: block;
}

.add-substance-modal .none {
   display: none;
}

.add-substance-modal .form-control:disabled {
   background-color: var(--body-background-color);
}

.add-substance-modal .search-items {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-bottom: 32px;
}

.add-substance-modal .input-group {
   position: relative;
}

.add-substance-modal .input-group input {
   font-feature-settings: 'lnum' 1 !important;
}

.add-substance-modal span {
   cursor: pointer;
}

.add-substance-modal .close {
   position: absolute;
   right: 32px;
   top: 32px;
}