body {
   font-family: Arial;
   overscroll-behavior: none;
   /**compatibility*/
   touch-action: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   /*background-color: skyblue;*/
   /**style change*/
   background-color: black;
   color: white;
   margin: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}
#content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}
button {
   cursor: pointer;
   border-radius: 5px;
   color: white;
   /*border: none;
   padding: 2px 10px 2px 10px;
   height: 22px;
   background-color: navy;*/
   /**style change*/
   border: transparent;
   padding: 0.75rem 1.25rem;
   border-radius: 5px;
   background-color: green;
   vertical-align: middle;
   transition: 200ms ease-in-out;
}
button:hover {
   /*background-color: mediumblue;*/
   /**style change*/
   background-color: green;
}
button:disabled,
button:disabled:hover {
   background-color: gray;
   cursor: default;
}
.row {
   display: flex;
   align-items: center;
   /**style change*/
   background-color: #151515;
}
/**new style*/
.row:nth-child(even) {
   background-color: #000;
}
.thumb {
   width: 100%;
   /**style change*/
   filter: invert(1);
}
.rowLabel {
   flex: 2 1 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   /**style change*/
   width: 15%;
   margin-left: 3rem;
   font-weight: bold;
}
.sampleContainer {
   flex: 1 1 0;
   text-align: center;
   overflow: hidden;
   /*background-color: white;
   border-radius: 10%;
   margin: 1px;*/
   /**style change*/
   margin: 2px;
   outline: 2px solid green;
   border-radius: 5px;
   text-transform: capitalize;
   max-width: 8%;
}
.blur {
   /*filter: blur(5px);*/
   /**style change*/
   filter: invert(1) blur(5px);
}

.emphasize {
   /*background-color: yellow !important;*/
   /**style change*/
   background-color: #AA0 !important;
}

/**new style*/
input,
#instructions {
   border: transparent;
   outline: 2px solid #f60;
   padding: 0.75rem 1.25rem;
   border-radius: 5px;
   background-color: #000;
   color: white;
   vertical-align: middle;
   transition: 200ms ease-in-out;
}
#instructions {
   margin-right: 0.75rem;
}

#container {
   width: calc(100% - 500px);
}

#chartContainer {
   position: fixed;
   right: 0;
   top: 50%;
   transform: translate(0, -50%);
   /**new style*/
   z-index: 2;
   color: black;
}

#confusionContainer {
   position: absolute;
   right: 0px;
   background-color: white;
   z-index: 1;
}

#inputContainer {
   position: fixed;
   right: 500px;
   top: 50%;
   transform: translate(0, -50%);
   text-align: center;
   margin: 10px;
   /**new style*/
   z-index: 1;
}

#controlPanel {
   position: fixed;
   right: 0;
   top: 0;
   width: 500px;
   text-align: center;
   padding: 10px;
   z-index: 1;
}

#predictedLabelContainer {
   color: white;
   font-size: 30px;
   position: relative;
   z-index: 1;
}

#statistics {
   font-size: 20px;
   padding: 20px;
}

.flagged {
   background-color:red !important;
}

.infoButton {
   color: red;
   cursor: pointer;
}

.infoButton:hover .tooltipText {
   visibility: visible;
}

.tooltipText {
   color: white;
   background-color: red;
   position: absolute;
   visibility: hidden;
   font-size: small;
   border-radius: 6px;
   padding: 6px;
   font-weight: normal;
}


.back-button {
   
   background-color: green;
   color: white;
   font-size: xx-large;
   
   font-family: fantasy;

}