@font-face{
    font-family: "manrope";
    src: url( "/library/font/Manrope/Manrope_Regular_400.otf" );
}
@font-face{
    font-family: "code";
    src: url( "/library/font/Consolas.ttf" );
}
*{ font-family: 'manrope', "微软雅黑"; }
form label.input {
    display: block;
    margin-bottom: 15px;
    position: relative;
}
form label.input p {
    padding-left: 5px;
    margin-bottom: 5px;
}
form label.input.icon input {
    padding-left: 55px;
    position: relative;
}
form label.input input, form label.input select, form label.input textarea{
    width: 100%;
    height: 40px;
    padding: 0px 15px;
    background: rgb( var( --r0 ), 0.5 );
    border: 1px solid rgb( var( --r3 ) );
    border-radius: 3px;
}
form label.input.icon i.icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgb( var(--r3) );
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
    left: 0;
}
form label.input textarea {
    height: 100px;
    padding: 15px;
    border-radius: 10px;
}
form label.input textarea[set="json"] {
    min-height: 120px;
    background: rgb( 35, 36, 31 );
    color: rgb( 200, 200, 200 );
    font-size: 13px;
    font-family: 'code';
    white-space: pre;
    overflow-x: scroll;
}
form label.input input.error, form label.input select.error, form label.input textarea.error {
    border-color: rgb( var( --r4 ) );
}
form label.input.password input{
    padding-right: 50px;
}
form label.input.password a{
    display: block;
    margin-top: -40px;
    padding: 0px 15px;
    font-size: 18px;
    line-height: 40px;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
}
form label.input ul, form div.input ul {
    padding-left: 26px;
}
form label.input ul li, form div.input ul li {
    font-size: 14px;
    color: rgb( var( --r1 ), 0.5 );
    list-style: circle;
}
form label.input ul li a, form div.input ul li a {
    font-size: 14px;
}
form div.button{
    padding-top: 20px;
}
form div.button a.button {
    float: right;
}
form div.input{
    margin-bottom: 20px;
}
form div.input p{
    display: inline-block;
    padding-left: 5px;
    margin: 0;
    line-height: 40px;
}
form div.input label.switch{
    float: right;
    display: block;
    width: 55px;
    height: 25px;
    margin-top: 8px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}
form div.input label.switch input{
    display: none;
}
form div.input label.switch input:checked+div.switchBox{
    background-color: rgb( var( --r3 ) );
}
form div.input label.switch div.switchBox{
    width: 100%;
    height: 100%;
    background-color: rgb( var( --r1 ), 0.15 );
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
form div.input label.switch div.switchBox div{
    position: absolute;
}
form div.input label.switch input:checked+div.switchBox div{
    left: calc(100% - 19px - 3px);
}
form div.input label.switch div.switchBox div{
    width: calc(25px - 6px);
    height: calc(25px - 6px);
    background-color: rgb( var( --r0 ) );
    border-radius: 50%;
    left: 3px;
    top: 3px;
}
form div.input label.tick {
    display: flex;
    width: auto;
    margin: 10px 0px 0 0;
    align-items: center;
    cursor: pointer;
}
form div.input label.tick input {
    display: none;
}
form div.input label.tick span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 5px;
    background-color: rgb( var( --r0 ) );
    border: 2px solid rgb( var( --r1 ), 0.2 );
    border-radius: 3px;
    vertical-align: middle;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
form div.input label.tick input:checked + span {
    background-color: rgb( var( --r3 ) );
}
form div.input label.tick input:checked + span:after {
    content: "\2714";
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 4px rgb( var( --r3 ) );
}