.reset-box {
    height: 90%;
    width: 95%;
    border: 1px solid;
    border-color: #dcdcdc;
    text-align: center;
    margin: 16px;
}

.no-account-reset-box {
    height: 88%;
    margin: 16px;
}

.reset-box-header {
    height: 15%;
    text-align: center;
    border-bottom: 2px solid;
    border-color: #b7b7b7;
    padding-top: 20px;
    color: #005886;
    font-size: 1.2rem;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
}

.no-reset-box-header {
    height: 24%;
}

.header-img {
    height: 85%;
    width: 7%;
}

.reset-btn {
    width: 80%;
    height: 44px;
    border-radius: 10px;
}

.btn-area {
    padding: 20px 0;
}

.btn-area > a {
    text-decoration: none;
}

.btn-area > a:hover {
    text-decoration: underline;
}

.reset-btn-color,
.reset-btn-color:hover,
.reset-btn-color:focus,
.reset-btn-color:active {
    background-color: #000000;
    border-color: #000000;
    border: 1px solid #000000 !important;
}

.btn-icon {
    float: left;
    font-size: 1.7rem;
}

.btn-text {
    padding-top: 4px;
}

.input-area {
    width: 80%;
    margin: 0 15px 15px 0;
    margin-left: auto;
    margin-right: auto;
}
.input-layout {
    margin: 0 23px 23px 0;;
}


@media screen and (max-width: 979px) {
    .reset-box-header {
        font-size: 0.9rem !important;
    }

    .no-reset-box-header {
        font-size: 0.9rem !important;
        height: 23%;
    }
}

@media screen and (max-width: 767px) {
    .no-account-reset-box {
        height: 90%;
    }

    .reset-box-header {
        font-size: 1.2rem !important;
        height: 13% !important;
    }

    .no-reset-box-header {
        font-size: 1.2rem !important;
        height: 21% !important;
    }
    .sp-btn-font {
        font-size: 1rem;
    }
}

@media screen and (max-width: 479px) {
    .reset-box-header {
        font-size: 1rem !important;
    }

    .no-reset-box-header {
        font-size: 1rem !important;
        white-space: nowrap;
    }
}