.active-pink-textarea.md-form label.active {
    color: #f48fb1;
}

.pink-textarea textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}

.pink-textarea.md-form .prefix.active {
    color: #f48fb1;
}

.active-pink-textarea.md-form textarea.md-textarea:focus:not([readonly]) + label {
    color: #f48fb1;
}

.active-amber-textarea.md-form label.active {
    color: #ffa000;
}

.amber-textarea textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #ffa000;
    box-shadow: 0 1px 0 0 #ffa000;
}

.amber-textarea.md-form .prefix.active {
    color: #ffa000;
}

.active-amber-textarea.md-form textarea.md-textarea:focus:not([readonly]) + label {
    color: #ffa000;
}

.active-pink-textarea-2 textarea.md-textarea {
    border-bottom: 1px solid #f48fb1;
    box-shadow: 0 1px 0 0 #f48fb1;
}

.active-pink-textarea-2.md-form label.active {
    color: #f48fb1;
}

.active-pink-textarea-2.md-form label {
    color: #f48fb1;
}

.active-pink-textarea-2.md-form .prefix {
    color: #f48fb1;
}

.active-pink-textarea-2.md-form textarea.md-textarea:focus:not([readonly]) + label {
    color: #f48fb1;
}

.active-amber-textarea-2 textarea.md-textarea {
    border-bottom: 1px solid #ffa000;
    box-shadow: 0 1px 0 0 #ffa000;
}

.active-amber-textarea-2.md-form label.active {
    color: #ffa000;
}

.active-amber-textarea-2.md-form label {
    color: #ffa000;
}

.active-amber-textarea-2.md-form .prefix {
    color: #ffa000;
}

.active-amber-textarea-2.md-form textarea.md-textarea:focus:not([readonly]) + label {
    color: #ffa000;
}

/*commmmeeeeeeeeents*/
/*body {
    margin-top: 20px;
}*/

.comment-wrapper .panel-body {
    max-height: 650px;
    overflow: auto;
}

.comment-wrapper .media-list .media img {
    width: 64px;
    height: 64px;
    border: 2px solid #e5e7e8;
}

.comment-wrapper .media-list .media {
    border-bottom: 1px dashed #efefef;
    margin-bottom: 25px;
}
/*responsive mode*/
@media only screen and (max-width: 400px) {
    #CommentBoxWithPub {
        flex-direction:column;
    }
    .bd-example {
        padding-top: 1rem;
    }
    #ProfileDetail {
        margin-left: 0;
    }
    
}
@media only screen and (min-width: 400px)and (max-width:574px) {
    #CommentBoxWithPub {
        flex-direction: column;
    }

    .bd-example {
        padding-top: 1rem;
    }

    #ProfileDetail {
        margin-left: 0;
    }
}
@media only screen and (min-width: 575px) and (max-width: 768px) {
    #CommentBoxWithPub {
        flex-direction: column;
    }

    .bd-example {
        padding-top: 1rem;
    }
    #ProfileDetail {
        margin-left: 2.8rem;
    }
    
}