#revision_history_container {
     padding: 0px;
     flex-direction: row;
     height: 800px;
}

.revision_history_left_sidebar {
     width: 300px;
     z-index: 2;
     background: #f2f2f5;
     box-shadow: 0px 1px 9px rgba(0,0,0,0.3);
     position: relative;
}
.revision_history_left_sidebar::after {
     content: '';
     height: 60px;
     top: 0px;
     width: 12px;
     position: absolute;
     right: -10px;
     background: #f2f2f5;
     opacity: 0.0;
}

.revision_history_content_container {
     background: lightcoral;
     width: calc(100% - 300px);
     display: flex;
     flex-direction: column;
}

.revision_history_content_container_top_header {
     width: 100%;
     height: 60px;
     background: #f2f2f5;
     box-shadow: 0px 1px 9px rgba(0,0,0,0.3);

     display: flex;
     align-items: flex-end;
     z-index: 1;
     overflow: hidden;
}

.revision_history_content_container_top_header > span:first-child {
     margin-left: 20px;
}
.revision_history_content_container_top_header > span {
     /* padding: 8px 20px;
     background: lightgray;
     margin-right: 20px; */

     position: relative;
     display: inline-block;
     color: inherit;
     text-decoration: none;
     padding: .3em 1em 0;
     margin: 0 -.3em;
     cursor: pointer;

     height: 30px;
     display: flex;
     align-items: center;
}
.revision_history_content_container_top_header > span::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
     border-bottom: none;
     border-radius: .5em .5em 0 0;
     /* background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0)); */
     box-shadow: 0 0.15em white inset;
     transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
     transform-origin: bottom;
     /* border: .1em solid rgba(0,0,0,.4); */
     background-color: white;
     box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
}
.revision_history_content_container_top_header > span[selected]::before {
     /* background-color: #eee; */
     /* margin-bottom: -.08em; */
     background-color: #5273F1;
}
.revision_history_content_container_top_header > span > .number_of_changes {
     font-size: 12px;
     background-color: #efd8d8;
     color: #a94442;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     right: 2px;
     top: -6px;

     font-family: Arial Black;
     color: #fff;
     background-color: #e2a4a4;
     background: #ff312c;
     /* color: #96120f; */
     transition: all 200ms ease-in;
     box-shadow: 1px 1px 6px rgba(0,0,0,0.7);
}
.revision_history_content_container_top_header > span[selected] > .number_of_changes {
     transform: scale(1.05);
}
.revision_history_content_container_top_header > span[selected] {
     z-index: 2;
     color: #FFF;
}

.revision_history_content_script_table, .revision_history_content_script_attributes {
     width: 100%;
     height: calc(100% - 60px);
     background: #f8f9ff;
     display: none;
     overflow: hidden;
     overflow-y: auto;
}

.revision_history_content_script_table[selected], .revision_history_content_script_attributes[selected] {
     display: block;
}

.revision_history_content_script_table {}
.revision_history_content_script_attributes {

}

.revision_history_left_sidebar_top_content {
     height: 200px;
     /* background: rgba(0,0,0,0.2); */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
     padding: 20px;
}
.revision_history_left_sidebar_top_content > p {
     text-align: center;
     font-size: 19px;
}
#restore_history_button {
     width: 150px;
}

.revision_history_list_container {
     height: calc(100% - 240px);
     overflow: hidden;
     overflow-y: auto;
}

.revision_history_list {
     padding: 0px;
     list-style: none;
     margin: 0px;
}

.revision_history_list_item {
     height: 50px;
     background: lightgray;
     display: flex;
     align-items: center;
     cursor: pointer;
     margin-bottom: 4px;
     background: white;
     transition: all 300ms ease-out;
}

.revision_history_list_item[selected] {
     /* background: #E6EAFC; */
     background: #5273F1;
     color: #FFF;
}

.revision_history_list_item:hover {
     /* background: #e8ebf7; */
     background: #dfe2ef;
     color: #000;
}

.revision_history_list_item[selected] > .revision_history_list_item_slected_icon {
     opacity: 1.0;
}

.revision_history_list_item_title_container {
     display: flex;
     flex-direction: column;
     width: calc(100% - 20px);
     padding-left: 20px;
}

.revision_history_list_item_date { font-size: 17px; }
.revision_history_list_item_number_changes { font-size: 13px; }
.revision_history_list_item_changed_by { font-size: 13px; cursor: pointer; transition: all 200ms ease-out; }
.revision_history_list_item_changed_by:hover { color: #5273F1; }

.revision_history_list_item_slected_icon {
     width: 50px;
     /* background: deeppink; */
     text-align: center;
     opacity: 0.0;
     /* color: #5273F1; */
     color: #FFF;
}

#loadRevisionHistoryButton {
     padding: 20px 100px;
     background: #3B70EB;
     color: white;
     border-radius: 41px;
}

.cell_changed, .cell_changed.edited {
     background: #ffeb3b;
}

.cell_changed.added {
     background: #6bc56e;
}

.cell_changed.deleted {
     background: #ea645a;
}

.row_changed {
     background: orange;
}

.row_changed.moved {
     background: lightyellow;
}

.row_changed.added {
     background: #b6ffb9;
}

.row_changed.deleted {
     background: #ffbcb7;
}