/*
 * Class for Debug
 */
._DebugBorderR {
    border           : solid red 1px;
}

._DebugBorderG {
    border           : solid green 1px;
}

._DebugBorderB {
    border           : solid blue 1px;
}

._DebugBorderY {
    border           : solid yellow 1px;
}

._DebugBorderGray {
    border           : solid #505050 1px;
}

/*
 For File " ui_comboselect.js "

 * Custom-Input Text With DropDown List And UpDown Spinners
	<div class="vgs-textdropdown">
		<select id="uiSelect01" onchange="this.nextElementSibling.value=this.value">
            <option value="Item01" selected>Item01</option>
            <option value="Item02">Item02</option>
            <option value="Item03">Item03</option>
		</select>
		<input id="uiInput01" type="text"></input>
		<div class="vgs-textdropdown-spinners">
			<button id="previtem" class="vgs-textdropdown-spinner increment">&#9650;</button>
			<button id="nextitem" class="vgs-textdropdown-spinner decrement">&#9660;</button>
		</div>
	</div>
    
    // JS
    const input = document.getElementById('uiInput01')
    var _sItems = [ "Item01" , "Item01" , "Item03" ] ;
    var _iIdx = 0 ;
    const increment = () => {
        _iIdx ++ ;
        if ( _iIdx >= _sItems.length ) {
            _iIdx = _sItems.length - 1 ;
        }
        input.value = _sItems[ _iIdx ] ;
    }
    const decrement = () => {
        _iIdx -- ;
        if ( _iIdx <= 0 ) {
            _iIdx = 0 ;
        }
        input.value = _sItems[ _iIdx ] ;
    }
    document.getElementById('previtem').addEventListener('click', increment)
    document.getElementById('nextitem').addEventListener('click', decrement)
 */

 /* <div class="vgs-textdropdown"> */
 .vgs-textdropdown {
    position         : relative;
    width            : 300px;
    height           : 30px;
    background-color : white;
    border           : none;
    border-radius    : 3px 3px 3px 3px;
}

/* <select id="uiSelect01" onchange="this.nextElementSibling.value=this.value"> */
.vgs-textdropdown select {
    position         : absolute;
    top              : 0px;
    left             : 0px;
    width            : 300px;
    height           : 30px;
    margin           : 0;
    font-size        : 18px;
    border           : solid gray 1px;
    border-radius    : 3px 3px 3px 3px;
}

/* <input id="uiInput01" type="text"></input> */
.vgs-textdropdown input {
    position         : absolute;
    top              : 1px;
    left             : 1px;
    width            : 270px;
    height           : 28px;
    padding-top      : 0px;
    padding-right    : 0px;
    padding-bottom   : 0px;
    padding-left     : 0px;
    font-size        : 16px;
    border           : none;
    border-radius    : 3px 0px 0px 3px;
}
.vgs-textdropdown select:focus, .vgs-textdropdown input:focus {
    outline          : none;
}

/* <div class="vgs-textdropdown-spinners"> */
.vgs-textdropdown-spinners {
    position         : absolute;
    right            : 0;
    top              : 50%;
    display          : flex;
    flex-direction   : column;
    width            : fit-content;
    margin           : 0px 16px 0px 0px;
    transform        : translateY(-50%);
}

/* <button id="previtem" class="vgs-textdropdown-spinner increment">&#9650;</button> */
/* <button id="nextitem" class="vgs-textdropdown-spinner decrement">&#9660;</button> */
.vgs-textdropdown-spinner {
    font-size        : 11px;
    border           : none;
    width            : 13px;
    height           : 14px;
    padding          : 0px 0px 0px 0px;
}
.vgs-textdropdown-spinner:hover {
    background       : lightgrey;
}


/*
 *   LED Class
 */

.led-red {
    width: 24px;
    height: 24px;
    background-color: #F00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, #441313 0 2px 12px;
}

.led-yellow {
    width: 24px;
    height: 24px;
    background-color: #FF0;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #808002 0 2px 12px;
}

.led-green {
    width: 24px;
    height: 24px;
    background-color: #ABFF00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0) 0 0px 0px 0px, inset #304701 0 -1px 9px, #304701 0 2px 12px;
}