.mail-bg {
    padding: 50px;
    border-radius: 3px;
    background-color: #eeeeee;
    color: #666;
    transition-property: box-shadow, transform;
    transition-duration: 350ms;
    transition-timing-function: ease;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 1000;
    @media screen and (max-width: 900px) {
        margin: 50px 10px 50px 10px;
    }
    .mail-body{
        .info{
            position: absolute;
            top: 0;
            left: 100%;
            transform: translate(20%, -0%);
            font-size: 0.8rem;
        }
        input{
            border: none;
            outline: none;
        }
        input:disabled, input:disabled + label {
            opacity: 1;
            color: #bfbfbf;
        }
        .tip{
            display: none;
            text-align: center;
            position: absolute;
            bottom: 100%;
            left:50%;
            transform: translate(-50%, 0);
            background: #1a1d20;
            color: #fff;
            padding: 0.25rem 0.5rem ;
            border-radius: 3px;
            line-height: 1.2rem;
            opacity: 1;
        }
        .tip:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            background: transparent;
            border: transparent solid 0.5rem;
            border-top-color: #1a1d20;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -2px);
        }
        input:disabled + label:hover .tip{
            display: block;
        }
        input:checked{
            background-color: #bebebe;
            border-color: #bebebe;
        }
        input:focus{
            box-shadow: 0 0 0 .25rem #d6d6d6;
        }

        .mail-preview-container{
            background-color: #fff;
            border-radius: 3px;
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
            padding: 0.2rem 0.5rem 0.5rem 0.5rem;
            textarea, textarea:focus{
                border: none;
                outline: none;
                height: 15rem;
            }
        }
        button{
            margin-top: 1rem;
            padding: 0.5rem 0.6rem;
            border-radius: 3px;
            border: none;
            outline: none;
            background-color: rgba(0, 0, 0, 0.1);
            transition: all 100ms ease-in-out;

            i{
                padding-left: 0.5rem;
            }
        }
        button:hover{
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
}

.mail-bg .mail-title {
    display: flex;
    justify-content: space-between;
    align-items: start;
    button{
        border: none;
    }
}

.mail-bg h1 {
    text-align: center;
    font-size: 60px;
    padding-bottom: 50px;
    @media screen and (max-width: 900px) {
        font-size: xx-large;
    }
}

.darker {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.49);
    top: 0;
    left: 0;
    z-index: 999;
}