.srInput-div {
     display: inline-block;
     line-height: inherit;
     position: relative;
     overflow: visible;
}
/*width:auto;height:auto;text-align:inherit;vertical-align: middle;*/

.srInput-star {
     width: 20px;
     height: 20px;
     display: inline-block;
     background: transparent url("srInput/star_off.png");
     background-size: 90%;
     background-position: center;
     background-repeat: no-repeat;
}
.srInput-star.sr-selected {
     background-image: url("srInput/star_on.png");
}
.srInput-star.srInput-star-half.sr-selected {
     background-image: url("srInput/star_half.png");
}

.srInput-checkbox,
.srInput-radio,
.srInput-checkbox:focus,
.srInput-radio:focus {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
     vertical-align: middle;
     margin: auto auto;
     background-color: #fff;
     color: #000;
     cursor: pointer;
     border: 1px solid #000;
     border-radius: 2px;
     background-size: contain;
     background-position: center center;
     background-repeat: no-repeat;
}
.srInput-radio,
.srInput-radio:focus {
     width: 20px;
     height: 20px;
     vertical-align: middle;
     margin: auto auto;
     background-color: #fff;
     color: #000;
     cursor: pointer;
     border: 1px solid #000;
     border-radius: 10px;
}

.srInput-checkbox[value="1"] {
     background-image: url("srInput/checked.png");
}
.srInput-radio[value="1"] {
     background-image: url("srInput/radio.png");
     background-size: 90%;
     background-position: center;
}

.srInput-toggle {
     width: 52px;
     height: 20px;
     line-height: 20px;
     background: #fff;
     margin: auto auto;
     border-radius: 2px;
     position: relative;
     vertical-align: middle;
     border: 1px solid #000000;
     cursor: pointer;
}
.srInput-toggle:before {
     content: "Yes";
     font-size: 12px;
     color: #27c819;
     position: absolute;
     left: 3px;
     z-index: 0;
     font-weight: 700;
}
.srInput-toggle:after {
     content: "No";
     font-size: 12px;
     color: #c81919;
     position: absolute;
     right: 3px;
     z-index: 0;
     font-weight: 700;
}
.srInput-toggle.srInput-toggle-onoff:before {
     content: "On";
}
.srInput-toggle.srInput-toggle-onoff:after {
     content: "Off";
}
.srInput-toggle input {
     visibility: hidden;
     display: none;
}
.srInput-toggle-label {
     display: block;
     width: 22px;
     height: 14px;
     border-radius: 2px;
     transition: all 0.4s ease;
     cursor: pointer;
     position: absolute;
     top: 2px;
     left: 2px;
     z-index: 1;
     background: #bababa;
     pointer-events: none;
     background-image: -ms-linear-gradient(bottom, #bababa 0, grey 100%);
     background-image: -moz-linear-gradient(bottom, #bababa 0, grey 100%);
     background-image: -o-linear-gradient(bottom, #bababa 0, grey 100%);
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #bababa), color-stop(1, grey));
     background-image: -webkit-linear-gradient(bottom, #bababa 0, grey 100%);
     background-image: linear-gradient(to top, #bababa 0, grey 100%);
}
.srInput-toggle-label.srInput-checked {
     left: 26px;
}

#srInput-modal-back {
     position:fixed;
     left:0;right:0;top:0;bottom:0;
     background: rgba(0, 0, 0, 0.5);
     pointer-events:all;
     z-index: 9998;
     display: flex;
}

#srInput-modal {
     position: fixed;
     top: 100px;
     left: 50%;
     transform: translateX(-50%);
     min-width:300px;
     max-width:600px;
     background: white;
     display: flex;
     z-index: 9999;
     flex-direction: column;
     padding: 8px;
     gap:8px;
     font-family: sans-serif;
     overflow-y: auto;
     border-radius:4px;
     font-size: 12px;
     max-height:calc(100vh - 200px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border: 1px solid #000;
}
#srInput-modal-search {
     display:flex;
     width:100%;
     flex-direction:column;
     align-items:stretch;     
     justify-content:center;
     flex: 0 0 auto;
}
#srInput-modal-input {
     width: 100%;
     font-size: 12px;
     height:30px;line-height:30px;
     padding: 2px 4px;
}

#srInput-modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex: 0 0 auto;
}
#srInput-modal-title {
     font-size: 14px;
     font-weight: bold;
}
#srInput-modal-close {
     cursor: pointer;
     border: 0;
     background-image: url("srInput/close_black.png");
     height:24px;
     width:24px;
     background-size: 70%;
     background-repeat:no-repeat;
     background-position: center;
}
#srInput-modal-options {
     list-style: none;
     padding: 0;
     margin: 0;
     max-height:400px;
     overflow-y:auto;
     border: 1px solid #ccc;
     border-radius:4px;
     flex:1 1 auto;
}
#srInput-modal-options li {
     padding:0 4px;
     min-height:30px;
     line-height:30px;
     text-align:left;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
}
#srInput-modal-options li:nth-child(even) {
     background-color: #f9f9f9;
}
#srInput-modal-options li:hover,
#srInput-modal-options li.srInput-selected {
     background-color: #f0f0f0;
}

.sr-hide {
     display: none;
     visibility: hidden;
}

.srInput-view,
.srInput-clear {
     width: 20px;
     height: 20px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 90%;
     cursor: pointer;
}
.srInput-view {
     background-image: url("srInput/input-view.png");
     right: 25px;
}
.srInput-clear {
     background-image: url("srInput/input-clear.png");
     right: 3px;
}

.sr-100p {
     width: 100%;
}
.sr-95p {
     width: calc(100% - 5px);
}

.sr-valign-top {
     vertical-align: top;
}
.sr-valign-middle {
     vertical-align: middle;
}
.sr-valign-bottom {
     vertical-align: bottom;
}