/**
    사용자 입력 도구
    form, fieldset, legend, input, textarea, button, select, option, label

*/
button{
    cursor: pointer;
    color:var(--button-text-color);
    
}




input{
    width:calc(100% - 4px);
    border-radius: 0px;
    outline: 0px;
    padding:4px 2px;
    border:0px;
    background-color: var(--input-bg-color);
    color:var(--input-text-color);
    border:1px solid var(--input-border-color);
}

input:focus{



}
input[type='date']{
    border:0px;
}

textarea{
    background-color: var( --textarea-bg-color);
    color: var(--textarea-text-color);
    
    resize: none;
    width:calc(100% - 4px);
    border-radius: 0px;
    border:0px;
    outline: 0px;
    padding:4px 2px;
    margin:10px 0px;
    min-height: 200px;

}
textarea:focus{



}




button.dark-scheme{

    --height:25px;
    position: relative;
    display: inline-block;
    background-color:transparent;
    vertical-align: middle;
    font-size: 0px;
    height: var(--height);
    width:var(--height);
    border:0px;
    cursor: pointer;
}

button.dark-scheme::before{
    content:'';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;  
    height: 8px;
    margin-top: -4px;
    margin-left: -4px;
    
    background-color: rgb(69, 90, 100);
    border-radius: 50%;
    
    transition: transform .8s ease-in-out;  
    will-change: transform;

}
button.dark-scheme::after{
    content:'';
    display: inline-block;
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiBzdHlsZT0id2lkdGg6IDEwMCU7IGhlaWdodDogMTAwJTsgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwcHgsIDBweCwgMHB4KTsiPg0KICA8ZGVmcz4NCiAgICA8Y2xpcFBhdGggaWQ9Il9fbG90dGllX2VsZW1lbnRfMTA0Ij4NCiAgICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMCIgeT0iMCI+PC9yZWN0Pg0KICAgIDwvY2xpcFBhdGg+DQogIDwvZGVmcz4NCiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSwwLDAsLTEsMTIsMTIpIiBvcGFjaXR5PSIxIiBzdHlsZT0iZGlzcGxheTogYmxvY2s7Ij4NCiAgICAgIDxnIG9wYWNpdHk9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwwKSI+DQogICAgICAgIDxwYXRoIGZpbGw9InJnYig2OSw5MCwxMDApIiBmaWxsLW9wYWNpdHk9IjEiIGQ9IiBNMCw2IEMtMy4zMDk5OTk5NDI3Nzk1NDEsNiAtNiwzLjMwOTk5OTk0Mjc3OTU0MSAtNiwwIEMtNiwtMy4zMDk5OTk5NDI3Nzk1NDEgLTMuMzA5OTk5OTQyNzc5NTQxLC02IDAsLTYgQzMuMzA5OTk5OTQyNzc5NTQxLC02IDYsLTMuMzA5OTk5OTQyNzc5NTQxIDYsMCBDNiwzLjMwOTk5OTk0Mjc3OTU0MSAzLjMwOTk5OTk0Mjc3OTU0MSw2IDAsNnogTTgsLTMuMzA5OTk5OTQyNzc5NTQxIEM4LC0zLjMwOTk5OTk0Mjc3OTU0MSA4LC04IDgsLTggQzgsLTggMy4zMDk5OTk5NDI3Nzk1NDEsLTggMy4zMDk5OTk5NDI3Nzk1NDEsLTggQzMuMzA5OTk5OTQyNzc5NTQxLC04IDAsLTExLjMxMDAwMDQxOTYxNjcgMCwtMTEuMzEwMDAwNDE5NjE2NyBDMCwtMTEuMzEwMDAwNDE5NjE2NyAtMy4zMDk5OTk5NDI3Nzk1NDEsLTggLTMuMzA5OTk5OTQyNzc5NTQxLC04IEMtMy4zMDk5OTk5NDI3Nzk1NDEsLTggLTgsLTggLTgsLTggQy04LC04IC04LC0zLjMwOTk5OTk0Mjc3OTU0MSAtOCwtMy4zMDk5OTk5NDI3Nzk1NDEgQy04LC0zLjMwOTk5OTk0Mjc3OTU0MSAtMTEuMzEwMDAwNDE5NjE2NywwIC0xMS4zMTAwMDA0MTk2MTY3LDAgQy0xMS4zMTAwMDA0MTk2MTY3LDAgLTgsMy4zMDk5OTk5NDI3Nzk1NDEgLTgsMy4zMDk5OTk5NDI3Nzk1NDEgQy04LDMuMzA5OTk5OTQyNzc5NTQxIC04LDggLTgsOCBDLTgsOCAtMy4zMDk5OTk5NDI3Nzk1NDEsOCAtMy4zMDk5OTk5NDI3Nzk1NDEsOCBDLTMuMzA5OTk5OTQyNzc5NTQxLDggMCwxMS4zMTAwMDA0MTk2MTY3IDAsMTEuMzEwMDAwNDE5NjE2NyBDMCwxMS4zMTAwMDA0MTk2MTY3IDMuMzA5OTk5OTQyNzc5NTQxLDggMy4zMDk5OTk5NDI3Nzk1NDEsOCBDMy4zMDk5OTk5NDI3Nzk1NDEsOCA4LDggOCw4IEM4LDggOCwzLjMwOTk5OTk0Mjc3OTU0MSA4LDMuMzA5OTk5OTQyNzc5NTQxIEM4LDMuMzA5OTk5OTQyNzc5NTQxIDExLjMxMDAwMDQxOTYxNjcsMCAxMS4zMTAwMDA0MTk2MTY3LDAgQzExLjMxMDAwMDQxOTYxNjcsMCA4LC0zLjMwOTk5OTk0Mjc3OTU0MSA4LC0zLjMwOTk5OTk0Mjc3OTU0MXoiPjwvcGF0aD4NCiAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=');
    background-position:center;
    background-repeat: no-repeat;
     transition: transform .8s ease-in-out;  
    will-change: transform;
    transform-origin: center center;

}

button.dark-scheme.dark::before{

    /*transform:translateX(-4px) scale(130%);  */
 
    transform: translateX(-4px) scale(1.3);
    transform: translate(-4px, 0px) scale(1.3);
}
button.dark-scheme.dark::after{
    transform: rotate(450deg);
   
}
select{
  
    border-radius: 2px;
    background-color: var(--select-bg-color);
    color:var(--select-text-color);
    border:1px solid var(--select-border-color);
    outline: none;
    margin:0px 0px;
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: right;
}