.white-pink {
    margin-left: auto;

    margin-right: auto;
    width: 80%;
    background: #fff;

    padding: 30px 30px 20px 30px;

    box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;

    -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;

    font: 12px Arial, Helvetica, sans-serif;

    color: #666;

    border-radius: 10px;

    -webkit-border-radius: 10px;
}

.white-pink h1 {
    font: 24px 'Trebuchet MS', Arial, Helvetica, sans-serif;

    padding: 0px 0px 10px 40px;

    display: block;

    border-bottom: 1px solid #f5f5f5;

    margin: -10px -30px 10px -30px;

    color: #969696;
}

.white-pink h1 > span {
    display: block;

    font-size: 11px;

    color: #c4c2c2;
}

.white-pink label {
    display: block;

    margin: 0px 0px 5px;
}

.white-pink label > span {
    float: left;

    width: 20%;

    text-align: right;

    padding-right: 10px;

    margin-top: 10px;

    color: #969696;
}

.white-pink input[type='text'],
.white-pink input[type='email'],
.white-pink textarea,
.white-pink select {
    color: #555;

    width: 70%;

    padding: 3px 0px 3px 5px;

    margin-top: 2px;

    margin-right: 6px;

    margin-bottom: 16px;

    border: 1px solid #e5e5e5;

    background: #fbfbfb;

    height: 25px;

    line-height: 15px;

    outline: 0;

    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);

    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}

.white-pink textarea {
    height: 100px;

    padding: 5px 0px 0px 5px;

    width: 70%;
}

.white-pink .button {
    -moz-box-shadow: inset 0px 1px 0px 0px #fbafe3;

    -webkit-box-shadow: inset 0px 1px 0px 0px #fbafe3;

    box-shadow: inset 0px 1px 0px 0px #fbafe3;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d));

    background: -moz-linear-gradient(center top, #ff5bb0 5%, #ef027d 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');

    background-color: #ff5bb0;

    border-radius: 9px;

    -webkit-border-radius: 9px;

    -moz-border-border-radius: 9px;

    border: 1px solid #ee1eb5;

    display: inline-block;

    color: #ffffff;

    font-family: Arial;

    font-size: 15px;

    font-weight: bold;

    font-style: normal;

    height: 40px;

    line-height: 30px;

    width: 100px;

    text-decoration: none;

    text-align: center;

    text-shadow: 1px 1px 0px #c70067;
}

.white-pink .button:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0));

    background: -moz-linear-gradient(center top, #ef027d 5%, #ff5bb0 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');

    background-color: #ef027d;
}

.white-pink .button:active {
    position: relative;

    top: 1px;
}

.white-pink select {
    /* background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #fbfbfb 0%, #e9e9e9 100%);

    background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #e9e9e9)); */

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    text-indent: 0.01px;

    text-overflow: '';

    width: 70%;

    line-height: 15px;

    height: 30px;
}
.border {
    width: 210px;
    height: 210px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* text-align: center; */
    /* vertical-align: middle; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto;
}
::-webkit-scrollbar {
    display: none;
}
ruby {
    font-size: 20px;
    margin: 5px;
}
rt {
    color: #fbafe3;
    font-size: 18px;
    margin: 5px;
}
.wordpop {
    display: flex;
}
.flex1 {
    flex: 1;
}
.flex2 {
    flex: 2;
    overflow: scroll;
    height: 300px;
}