/************************主要配置************************/
    main {
        margin-top: 4.4rem;
        margin-bottom: 4.4rem;
        padding-top: 1.2rem;
        padding-bottom: 2.7rem;
        background-color: #fff;
        border-radius: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(19, 206, 102, 0.086);
    }

    @media (max-width: 576px) {
        main {
            margin-left: 1rem;
            margin-right: 1rem;
            padding-left: .6rem;
            padding-right: .6rem;
        }
    }

    @media (min-width: 576px) {
        main {
            margin-left: 1rem;
            margin-right: 1rem;
            padding-left: 1.6rem;
            padding-right: 1.6rem;
        }
    }

    @media (min-width: 768px) {
        main {
            margin-left: 1.5rem;
            margin-right: 1.5rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    @media (min-width: 992px) {
        main {
            margin-left: 2rem;
            margin-right: 2rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    @media (min-width: 1200px) {
        main {
            margin-left: 6rem;
            margin-right: 6rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    #mainnav {
        border-bottom: .1rem solid #ccc;
    }

    .text-gray {
        color: #ccc;
    }

    .bg-grayblack {
        background-color: #464646; /*中等暗度的灰色阴影*/
    }

    .copyemail {
        height: 1.75rem;
        padding: .25rem .5rem;
        font-size: .65em;
        color: #6c757d;
        border: 1px solid;
        border-radius: .25rem;
        border-color: #6c757d;
        background-color: #fff;
    }
    .copyemail:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    header .navbar,
    #nav-tab,
    .colortool,
    .updowntool {
        -moz-user-select:none; /*火狐*/
        -webkit-user-select:none; /*webkit浏览器*/
        -ms-user-select:none; /*IE10*/
        -khtml-user-select:none; /*早期浏览器*/
        user-select:none;
    }
/********************************************************/


/*************************navbar*************************/
    .navbar a.icon-castle {
        line-height: 45px;
        font-size: 40px;
        color: #fff;
        text-decoration: none;
    }
/********************************************************/


/***********************生成二维码***********************/
   /* #qrcodetext {
        border: 1px solid;
        border-radius: 5px;
        margin: 0 20px;
        min-height: 30px;
        font-size: 14px;
        width: 200px;
        padding: 8px 10px;
        box-sizing: border-box;
        overflow: visible;
    }
    #showqrcode, #resetqrcode {
        border: 1px solid;
        border-radius: 5px;
        font-size: 14px;
        width: 90px;
        padding: 0 10px;
        margin: 0 0 0 10px;
        height: 25px;
        cursor: pointer;
    }*/
    #outputqrcode {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
        max-width: 1040px;
        text-align: center;
    }
    #qrCodeDiv {
        margin-top: 20px;
        width: 262px;
        height: 262px;
        color: #fff;
        text-align: center;
        line-height: 260px;
    }
    .qrarea {
        border: 1px solid #000;
        background-color: #ccc;
    }
/********************************************************/


/********************解析二维码&转码*********************/
    .textarea {
        position: relative;
        opacity: 0;
        display: none;
    }
    #qrtext {
        padding: 2.3rem .75rem 1rem .75rem;
        display: block;
        width: 100%;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        overflow: auto;
    }
    #showimg {
        position: relative;
        display: none;
        opacity: 0;
        padding-top: 2.3rem;
        margin-top: 1rem;
        width: 100%;
        height: 200px;
        border: 1px solid #ced4da;
    }
    #baseimg {
        height: 100%;
    }
    #toextimg {
        height: 200px;
        display: block;
    }
    #imgbasetext {
        padding: 2.3rem .75rem 1rem .75rem;
        display: block;
        width: 100%;
        height: 200px;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        overflow-x: scroll;
    }
    .textareatips {
        position: absolute;
        font-size: .8rem;
        top: .2rem;
        left: .2rem;
        height: 1.75rem;
        /*padding: 0rem .75rem 1rem .75rem;*/
        padding: .25rem .5rem;
        pointer-events: none;
        /*border: 1px solid transparent;*/
        opacity: 1;
        border: 1px solid;
        border-radius: .25rem;
        border-color: #6c757d;
        background-color: #fff;
    }
    .textclipboard {
        position: absolute;
        top: .2rem;
        right: 1.3rem;
        height: 1.75rem;
        padding: .25rem .5rem;
        font-size: .65em;
        color: #6c757d;
        border: 1px solid;
        border-radius: .25rem;
        border-color: #6c757d;
        background-color: #fff;
        /*pointer-events: none;
        border: 1px solid transparent;*/
    }
    .textclipboard:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
/********************************************************/


/************************图片转码************************/
    .label-alt {
        display: inline-block;
        float: left;
        font-weight: 600;
        cursor: auto;
        font-size: 14px;
        width: 100%;
        text-align: left;
    }
    #imgtobaseoption button.glow.left {
        border-radius: 4px 0 0 4px;
        border-right: 0;
    }
    #imgtobaseoption button.glow.right {
        border-radius: 0 4px 4px 0;
    }
    #imgtobaseoption button.glow.active,
    #imgtobaseoption button.glow:active {
        -webkit-box-shadow: 0 1px 0 rgb(0 0 0 / 20%) inset;
        -moz-box-shadow: 0 1px 0 rgba(0,0,0,.2) inset;
        box-shadow: 0 1px 0 rgb(0 0 0 / 20%) inset;
        color: #a8b5c7;
    }
    #imgtobaseoption button.glow:hover {
        color: #a8b5c7;
    }
    #imgtobaseoption button.glow {
        float: left;
        font-size: 14px;
        color: #313d4c;
        font-weight: 700;
        padding: 5px 10px;
        line-height: 14px;
        background: #fefefe;
        background: -moz-linear-gradient(top,#fefefe 0,#f7f7f7 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(100%,#f7f7f7));
        background: -webkit-linear-gradient(top,#fefefe 0,#f7f7f7 100%);
        background: -o-linear-gradient(top,#fefefe 0,#f7f7f7 100%);
        background: -ms-linear-gradient(top,#fefefe 0,#f7f7f7 100%);
        background: linear-gradient(to bottom,#fefefe 0,#f7f7f7 100%);
        border: 1px solid #d0dde9;
        transition: color .1s linear;
        -moz-transition: color .1s linear;
        -webkit-transition: color .1s linear;
        -o-transition: color .1s linear;
    }
/********************************************************/


/*************************toolbar************************/
    .colortool {
        width: 50px;
        height: 44px;
        position: fixed;
        bottom: 170px;
        right: 12px;
        text-align: center;
        cursor: pointer;
        z-index: 5;
    }
    .updowntool {
        width: 50px;
        height: 44px;
        position: fixed;
        bottom: 100px;
        right: 12px;
        text-align: center;
        cursor: pointer;
        z-index: 5;
    }
    .colortool a.option-box:first-child, 
    .updowntool a.option-box:first-child {
        border-top: 1px solid #e0e0e0;
    }
    .colortool a.option-box, .updowntool a.option-box {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-bottom: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
        background-color: #fff;
        text-align: center;
        height: 44px;
        cursor: pointer;
        text-decoration: none;
    }
    .colortool a.option-box span.icon, 
    .updowntool a.option-box span.icon {
        display: block;
        width: 22px;
        height: auto;
        font-size: 23px;
        color: #333;
    }
    .colortool a.option-box span.show-txt, 
    .updowntool a.option-box span.show-txt {
        color: #fff;
        font-size: 13px;
        line-height: 14px;
    }
/********************************************************/


/*************************footer*************************/
    footer,
    #footer {
        height: 80px;
        font-size: .8rem;
    }

    #footer {
        margin-left: 10%;
        margin-right: 10%;
    }

    .to_bottom {
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    #footer_right a.iconfont {
        line-height: 35px;
        font-size: 35px;
    }

    #footer_left a,
    #footer_right a {
        text-decoration: none;
    }

    #footer_left a:hover,
    #footer_right a:hover {
        color: #fff;
    }

    #showwechatqr {
        position: absolute;
        top: -190px;
        width: 180px;
        height: 190px;
        text-align: center;
        border: 1px solid;
        border-radius: .25rem;
        border-color: #6c757d;
        background-color: #fff;
        display: none;
    }

    #showwechatqr img {
        width: 150px;
        height: 150px;
    }

    #showwechatqr p {
        font-size: 16px;
        color: #000;
        margin: 0;
        padding: 0;
    }
/********************************************************/


/************************夜间模式************************/
    body.dark {
        background-color: #191919;
    }
    body.dark main {
        background-color: #000;
    }
    body.dark .colortool a.option-box, 
    body.dark .updowntool a.option-box {
        background-color: #333;
    }
    body.dark .colortool a.option-box .icon, 
    body.dark .updowntool a.option-box .icon {
        color: #ccc;
    }
/********************************************************/