html, body {
    height: 100%;
    background-color: rgb(246, 250, 250);
}

#button-wrapper{
    display: flex;
    width:100%;
    height: 20%;
    justify-content: center;
    align-items: center;
    text-decoration-color: white;
    text-align: center;
    margin-top: 10px;
}

#submit-button,
#cancel-button { 
    text-align: center;
    background-color: rgb(87, 102, 109);
    display:inline-block;
    text-decoration-color: white;
    padding: 5px 32px;
    margin: 10px 25px;
    color: whitesmoke;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.flex-container {
	display: flex;
	width: 100%;
	height: 80%;
}

h2{
    text-align: center;
    font-size: large;
}

.flex-header {
    display: flex;
    width:100%
}

.drop-down-box{
    width: 20%;
    display: flex;
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    margin-right: 10px;
  /*  min-width: 160px;*/
}

.drop-down-box select{
    height: 30px;
    width: 160px;
    font-size: small;
    background-color: rgb(24, 153, 223);
    color: azure;
    text-align: center;
    
}

.flex-header1{
    width: 40%;
    display: flex;
    align-items: center; 
}

.flex-header1 h2{
    width: 60%;
    justify-content: flex-end;
    font-size: large;
}

.flex-header1 i{
    width: 10%;
    justify-content: flex-start;
    margin-left: 10px;
    display: none;
}

.flex-header2{
    width: 60%;
    display: flex;
    align-items: center;  
}
.flex-header2 h2{
    width: 40%;
    display: flex;
    justify-content: flex-end;
    font-size: large;
    margin-left: 30px;
}

.flex-header2 i{
    width: 30%;
    justify-content: flex-start;
    margin-left: 10px;
}

.content{
    display: flex;
    justify-content: center;
    align-items: center;
}

.local-content{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.base-content{

    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.remote-content{
    display: flex;
    justify-content: center;
    align-items: center;
}
#container.flex-item {
	width: 66.67%;
	height: 100%; 
}

#split.flex-item {
	width: calc(100% / 3);
	height: 100%; 
}

#container .monaco-editor .char-delete,
#container .monaco-editor .line-delete {
    background: rgba(40, 210, 40, 0.2);
}

#container .monaco-editor .char-insert,
#container .monaco-editor .line-insert {
    background: rgba(255, 0, 0, 0.2);
}

#split .monaco-editor .char-delete,
#split .monaco-editor .line-delete {
    background: rgba(255, 0, 0, 0.2);
}

#split .monaco-editor .char-insert,
#split .monaco-editor .line-insert {
    background: rgba(40, 210, 40, 0.2);
}

.monaco-diff-editor .diffViewport{
    display: none
}
.monaco-diff-editor .diffOverview .diffViewport {
     display: none
}
.monaco-diff-editor .diffOverview{
    display: none;
}
.monaco-diff-editor .difOverviewRuler {
    display: none;
}
.monaco-diff-editor.side-by-side.noModificationsOverlay{
    cursor: copy;
}