.commentsWidget, .csvWidget {
    display: flex;
    box-sizing: border-box;
}

.commentsWidget .wrapRolling,
.csvWidget .wrapRolling {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.commentsWidget .boxHeader,
.csvWidget .boxHeader {
    flex: 0 0 auto;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.commentsWidget .boxContent,
.csvWidget .boxContent {
    flex: 1 1 auto;
    padding: 0;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.commentsWidget .comments,
.csvWidget .csv {
    overflow: auto;
    flex: 1;
    width: 100%;
    font-size: 12px;
    padding: 20px 10px;
    box-sizing: border-box;
    margin: 0;
}

.csvEdit:hover {
background: #d8d8d8;
cursor: pointer;
}

.csv.empty {
color:#999;
text-align:center;
}

.commentsWidget {
  background: #fff;
  color: #2d3e4f;
}

.comments ol {
  list-style-type:decimal;
  margin-left: 40px;
}

.comments em {
    font-style: italic;
}

.commentsEdit:hover {
    background-color: transparent;
    cursor: pointer;
}

.comments h1 {
  margin:0.41em 0;
  text-transform:none;
  font-size:25px;
  font-weight:bold;
}

.comments h2 {
  margin:0.5em 0;
  text-transform:none;
  font-size:16px;
  font-weight:normal;
}

.comments ul {
  list-style-type:circle;
  margin-left:40px;

}

.comments li {
  display:list-item;
}

.comments p {
  margin:0.5em 0;
}

.comments a {
    color: #37b99c;
    text-decoration: underline;
}

.comment-save-status {
    font-size: 12px;
    color: #9CA1A6;
    text-align: left;
    padding: 5px 10px;
    flex: 0 0 auto;
    box-sizing: border-box;
}

#app .widgetContainer.rollingContainer .box.commentsWidget{
  width:100%;
  height:auto;
  margin-top: 5px;
  margin-bottom:5px;
  border-bottom: 1px solid #cfcfcf;
  min-height:90px;
}

.widgetContainer.rollingContainer .box.commentsWidget .wrapRolling {
  flex-direction:column;
  display:flex;
  background:#FFFFFF;
}

.widgetContainer.rollingContainer .box.commentsWidget .boxHeader {
  float:none;
  height:initial;
  width:auto;
  margin-bottom:14px;
}

.widgetContainer.rollingContainer .box.commentsWidget .boxHeader h2 {
  position:relative;
}


.widgetContainer.rollingContainer .box.commentsWidget .boxContent {
  padding:10px;
  display:flex;
  flex:1;
  flex-direction:column;
  overflow:hidden;
}

#app .widgetContainer.rollingContainer .box.commentsWidget .boxContent .comments {
  height:initial;
}

#app .widgetContainer.rollingContainer .box.commentsWidget .boxContent .mce-tinymce  {
  display:flex;
  flex-direction:column;
}
#app .widgetContainer.rollingContainer .box.commentsWidget .boxContent .mce-tinymce > .mce-container-body {
  flex:1;
  display:flex;
  flex-direction:column;
}
#app .widgetContainer.rollingContainer .box.commentsWidget .boxContent  .mce-edit-area {
  flex:1;
}

#app .widgetContainer.rollingContainer .box.commentsWidget .boxContent .mce-edit-area > iframe {
  height: 100% !important;
}

#app .widgetContainer.rollingContainer .box.commentsWidget .boxHeader {
  height:40px;
  justify-content:flex-start;
  padding-left:5px;
  background:none;
  border:0;
}

#app .widgetContainer.rollingContainer .box.commentsWidget .boxHeader h2,
#app .widgetContainer.rollingContainer .box.commentsWidget .boxHeader h2 input{
  color:#364953;
}

/* TinyMCE content: base table styling for comments */
.comments table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}

.comments table th,
.comments table td {
  border: 1px solid #dfe3e6;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.comments table thead th {
  background: #f6f8f9;
  font-weight: 600;
}

.comments table tbody tr:nth-child(even) {
  background: #fafbfc;
}
