/*
 * 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;
}

/*
 * Header Bar
 */
.HeaderArea {
    position         : relative;
    margin-top       : -8px;
}

.HeaderDIV {
    position         : relative;
    margin-left      : 20px;
}

.HeaderDIV button {
    width            : 100px;
    height           : 32px;
    padding-top      : 2px;
}

/*
 * CheckBoxPrependBody Body
 */
.CheckBoxPrependBody {
    width            : calc( 100% - 128px );
    height           : 38px;
    border-radius    : 0px 5px 5px 0px;
    margin           : 0px;
}

/*
 * Editable ListBox
    <div class="select-editable">
        <select id="uiSelect01" onchange="this.nextElementSibling.value=this.value" />
        <input type="number" id="uiInput01" />
    </div>

 */

 /* <div class="select-editable"> */
.select-editable {
    position         : relative;
    width            : 120px;
    height           : 30px;
    background-color : white;
    border           : solid grey 1px;
}

.select-editable select {
    position         : absolute;
    top              : 0px;
    left             : 0px;
    width            : 120px;
    height           : 30px;
    margin           : 0;
    font-size        : 18px;
    border           : none;
}

.select-editable input {
    position         : absolute;
    top              : 1px;
    left             : 1px;
    width            : 100px;
    padding-top      : 0px;
    padding-right    : 0px;
    padding-bottom   : 0px;
    padding-left     : 0px;
    font-size        : 16px;
    border           : none;
}

.select-editable select:focus, .select-editable input:focus {
    outline          : none;
}

/*
 * Custom-switch (OFF @ ON) button
 */
body {
    display            : flex;
    align-items        : center;
}

.switch-btn {
    position           : relative;
    display            : inline-block;
    width              : 50px;
    height             : 30px;
}

.switch-btn input {
    opacity            : 0;
    width              : 0;
    height             : 0;
}

.switch-slider {
    position           : absolute;
    cursor             : pointer;
    top                : 0;
    left               : 0;
    right              : 0;
    bottom             : 0;
    background-color   : gray;
    -webkit-transition : .4s;
    transition         : .4s;
}

.switch-slider:before {
    position           : absolute;
    content            : "";
    height             : 22px;
    width              : 22px;
    left               : 2px;
    bottom             : 4px;
    background-color   : white;
    -webkit-transition : .4s;
    transition         : .4s;
}

input:checked+.switch-slider {
    background-color   : #6482dc;
}

input:focus+.switch-slider {
    box-shadow         : 0 0 1px #6482dc;
}

input:checked+.switch-slider:before {
    -webkit-transform  : translateX(23px);
    -ms-transform      : translateX(23px);
    transform          : translateX(23px);
}

/* Rounded sliders */
.switch-slider.switch-round {
    border-radius      : 23px;
}
.switch-slider.switch-round:before {
    border-radius      : 50%;
}

/*
 * Custom-Input Text With UpDown Spinners
    <div class="vgs-textinput">
        <input id="input01" class="vgs-textinput" type="text" value="Default-Text"></input>
        <div class="vgs-spinners">
            <button id="previtem" class="vgs-spinner increment">&#9650;</button>
            <button id="nextitem" class="vgs-spinner decrement">&#9660;</button>
        </div>
    </div>

    // JS
    const input = document.getElementById('input01')
    var _sItems = [ "One" , "Two" , "Three" ] ;
    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-textinput"> */
.vgs-textinput {
    position          : relative;
    width             : fit-content;
    border-radius     : 3px 3px 3px 3px;
}

/* <input class="vgs-textinput"> */
.vgs-textinput {
    height            : 30px;
    outline           : none;
    border-radius     : 3px 3px 3px 3px;
}

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

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


/*
 * 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;
}

/* class="select-multiple" */
.select-multiple {
}

.select-multiple option:hover {
    width               : 100%;
    padding             : 0px;
    text-indent         : 20px;
    border-width        : 1px;
    border-color        : #dfdfdf;
    border-left-style   : solid;
    border-right-style  : solid;
    border-top-style    : solid;
    border-bottom-style : none;
    background-color    : #f8f9fc;
}

/* class="blink" 閃爍 */
.blink {
    animation: blinker 2.5s linear infinite;
    color: red;
    font-family: sans-serif;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/*
 * 側邊選單 : 添加自動隱藏
 */

.asidemenu{
	background-color: gray;
	position: absolute;
	top: 0;
	bottom: 0;
	transform: translateX(-208px);
	transition: ease .8s;
    position: fixed;
    z-index: 990;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.asideshow .asidemenu{
	transform: translateX(0);
}