@charset "utf-8";
* {
    padding:0;margin:0;box-sizing:border-box;
    outline:none;
}
html, body {
    width:100%;
    min-height: 100%;
    min-width:320px;
    font-size:14px;
    color: #CCC;
    /* background:#000; */
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

img{border:none;}
li {list-style:none}
.logo{width:180px;}
.copyright{
    pointer-events: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    line-height: 25px;
    white-space: nowrap;
    font-size: 12px;
}
a,button{
    cursor:pointer;
    color:inherit;
}
a:hover{
    text-decoration:underline;
}
button:active{
    transform:translateY(1px);
}
.hide{display:none;}

.toast-msg {
    position: fixed;
    z-index: 115;
    /* bottom: 100px; */
    top: 220px;
    left: 0;
    transform: translate3d(0, 30px, 0);
    opacity: 0;
    width: 100%;
    display: inline-block;
    text-align: center;
    pointer-events: none;
    transition: opacity 250ms, transform 250ms;
    /* font-size: 15px; */
}

.toast-msg.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.toast-msg > span {
    min-width: 50px;
    max-width: 90vw;
    display: inline-block;
    text-align: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.8);
    background: #414141;
    padding: 10px 30px;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    box-shadow: 0 0 10px 2px rgb(125 125 125 / 50%) inset, 0 0 10px 2px rgb(0 0 0);
}
i.orange{color:orange;}



.popup{
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height:100%;
    /* background:#4b4b4b; */
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
    overflow-y: auto;
    z-index: 20;
}
.popup.open{
    pointer-events: auto;
    opacity: 1;
}
.popup>.inner{
    position: absolute;
    border: 1px solid #333;
    top: 200px;
    width: 360px;
    height:350px;
    left:50%;
    background:#000;
    margin-left: -180px;
    border-radius: 15px;
    transform: translateY(30px);
    transition: transform 200ms;
    padding:20px;
    line-height: 40px;
    text-align:center;
    box-shadow: 0 0 50px 50px rgba(0,0,0,0.5);
}
.popup.open>.inner{
    transform: none;
}
.popup.open>.inner::after{
    content:"";
    display:block;
    width:100px;
    height: 130px;
    position:absolute;
    pointer-events: none;
}
.popup>.inner input{
    width: 190px;
    width: calc(100% - 20px);
}
.popup>.inner input[type=date]{
    width: 160px;
}
.popup>.inner input[type=checkbox]{
    width: 20px;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
    color:#FFF;
    color-scheme: dark;
    cursor: pointer;
}