#text-box {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 500px;
 height: 300px;
 border-radius: 20px;
 text-align: center;
 background: white;
 font-family: Arial;
 font-size: 20px;
 font-weight: bold;
}

#text-box .start-text {
 display: none;
}

#text-box .stop-text {
 display: none;
}

#text-box .play-icon {
 width: 20px;
 height: 20px;
 vertical-align: middle;
 margin-left: 10px;
}

#text-box .pause-icon {
 width: 20px;
 height: 20px;
 vertical-align: middle;
 margin-left: 10px;
}

#text-box .recording-icon {
 width: 20px;
 height: 20px;
 vertical-align: middle;
 margin-left: 10px;
}

#text-box .text-box-input {
 width: 100%;
 height: 200px;
 resize: none;
 margin-top: 50px;
 padding: 10px;
 border: none;
 border-radius: 20px;
 background: rgba(0, 0, 0, 0.1);
 font-size: 20px;
}

#text-box .text-box-button {
 position: absolute;
 bottom: 20px;
 right: 20px;
 width: 100px;
 height: 50px;
 background: rgba(0, 0, 0, 0.1);
 border: none;
 border-radius: 20px;
 color: white;
 font-size: 20px;
 font-weight: bold;
}

#text-box .text-box-button:focus {
 background: rgba(0, 0, 0, 0.2);
}

#text-box .text-box-button:hover {
 background: rgba(0, 0, 0, 0.3);
}