//*****************************************************************************
//  (c) Copyright by Markus Mueller, Solution for All, www.s4.ch, Switzerland
//
//  All source codes, data, texts, pictures and graphs and their arrangements 
//  are subject to copyright and are the intellectual property of 
//  Solution for All Markus Müller. They may neither be copied for forwarding 
//  nor used in an amended form or non other websites nor servers nor any kind 
//  of electronic device.
//
//  (c) This Source-Code might NOT be used without any permission from M. Mueller
//
//*****************************************************************************
//
//  This enhances Bootstrap 3.3 with a searchable Drop Down List.
//  after dynamic loading of DDL the function initSearchDroptDown() must be 
//  executed again
//  requires JavaScript droptdown_with_search.js
//
//  Example HTML:
//	          <div class="col-xs-12 col-sm-6 col-md-7" style=" margin-left:0px;" align="left">
//               <div class="form-group custom-select-wrapper" style="margin-bottom:0px;">
//
//				  <select class="form-control select-with-search" name="inMType" id="inMType" onchange="javascript:configMotor();"> 
//			         <OPTION value=0>custom</option>
//	              </SELECT>
//                <div class="search-dropdown" style="display: none;">
//                   <input id="dropDownSearch" type="text" class="form-control search-input" placeholder="Search...">
//                   <ul class="option-list"></ul>
//                </div>
//	            </div>
//	          </div>
//
//
//  Revisions:
//  28.02.25  0.00  Erstellt
//*****************************************************************************/

.custom-select-wrapper {
    position: relative;
}
.search-dropdown {
    position: absolute;
    z-index: 1000;
    /*width: 100%;*/
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    overflow: hidden; /* Hides excess text */
    text-overflow: ellipsis; /* Adds ellipsis for long text */
}
.search-input {
    margin: 2px;
    width: calc(100% - 4px) !important;
}
.option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh;
    /* max-height: 300px; */
    overflow-y: auto;
}
.option-list li {
    padding: 2px 10px;
    cursor: pointer;
}
.option-list li:hover {
    background-color: #f5f5f5;
}
.option-list .no-results {
    color: #777;
    cursor: default;
}
.option-list .no-results:hover {
    background-color: transparent;
}
.option-list .disabled-option {
    /*color: #999;
    cursor: not-allowed;
    background-color: #f0f0f0;*/
    color: #777;
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;

}