style.css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  user-select: none;
}
/**
background : #0e1b2a
text: #FAF7F0
smallText: #D8D2C2
**/

body {
  background-color: #0e1b2a;
  color: #FAF7F0;
}

.loading_div {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.loading_div .loading {
  position: absolute;
  top: 40%;
  left: 45%;
  width: 200px;
  height: 200px;
  border-top: 10px solid #E9EFEC;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #E9EFEC;
  border-left: 10px solid #E9EFEC;
  border-radius: 50%;
  animation: loading 1s ease infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.file1BorderColor {
  border: 3px solid rgb(72, 109, 232);
}

.file2BorderColor {
  border: 3px solid rgb(197, 83, 5);
}

.clickable {
  cursor: pointer;
}

.upload-div {
  width: 600px;
  margin: 0px auto;
  border-bottom: 2px solid #D8D2C2;
}
.each-upload {
  display: inline-block;
  vertical-align: top;
  width: 32%;
  margin: 10px auto;
  text-align: center;
  position: relative;
  padding: 5px;
  overflow: hidden;
}
.each-upload:not(:first-of-type) {
  border-left: 1px solid white;
}
.each-upload .label_file {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(20, 31, 45);
  overflow: hidden;
}

.each-upload .label_file:hover {
  background-color: rgb(25, 36, 50);
}

.each-upload .label_file .text-span {
  
}

.each-upload .label_file .str_file_name {
  display: block;
  font-size: 12px;
  height: 40px;
  overflow: hidden;
}

.each-upload .label_file .main-color {
  border-bottom: 3px solid rgb(72, 109, 232);
}

.each-upload .label_file .compared-color {
  border-bottom: 3px solid rgb(197, 83, 5);
}

.about-files {
  color: #821131;
  font-size: 14px;
  font-weight: 700;
  background: #d8d2c2;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  margin: 2px auto;
}
.about-files span {
  background-color: #821131;
  color: #d8d2c2;
  border-radius: 50%;
  font-size: 14px;
  padding: 0px 5px;
  margin-right: 5px;
}

.btn-load {
  display: block;
}

.btn-load input {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #821131;
  color: #D8D2C2;
  border: none;
  font-size: 24px;
  border-radius: 5px;
  cursor: pointer;
}

.session_info {
  width: 400px;
  margin: 10px auto;
  text-align: center;
  background: #d8d2c2;
  font-weight: 900;
  color: black;
  padding: 5px;
  border-radius: 10px;
  cursor: default;
}

.session_info .icon-svg {
  width: 24px;
  display: block;
  margin: 0px auto;
}

.session_info .each-session-info {
  display: inline-block;
  padding: 10px;
}
.session_info .each-session-info:not(:last-child) {
  border-right: 1px solid black;
}

.content {
  width: 99%;
  margin: 0px auto;
  text-align: center;
}

.content .laps {
  display: inline-block;
  width: 160px;
  height: 600px;
  margin: 10px auto;
  vertical-align: top;
  overflow-y: auto;
}

.laps .each-file-section .filename_laps {
  display: block;
  font-size: 18px;
  padding: 5px;
  font-weight: 900;
  border-radius: 5px;
}

.laps .each-file-section .lap_number {
  font-size: 11px;
}

.laps .each-file-section .main-bg {
  background-color: rgb(72, 109, 232);
  color: black;
}

.laps .each-file-section .compared-bg {
  background-color: rgb(197, 83, 5);
  color: black;
}

.laps .each-file-section .ul-style {
  list-style: none;
}

.laps .each-file-section .ul-style li {
  margin: 5px;
  font-size: 14px;
  line-height: 1.8;
}

.laps .each-file-section .lapSelector {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.laps .each-file-section .box1 {
  border: 1px solid rgb(72, 109, 232);
  cursor: pointer;
}

.laps .each-file-section .selectedBox1 {
  background-color: rgb(72, 109, 232);
}

.laps .each-file-section .box2 {
  border: 1px solid rgb(197, 83, 5);
  cursor: pointer;
}

.laps .each-file-section .selectedBox2 {
  background-color: rgb(197, 83, 5);
}

.laps .each-file-section .ul-style li:hover {
  background-color: #46464638;
  color: white;
  border-radius: 5px;
}

/* .laps .each-file-section .ul-style .selectedFile1,
.laps .each-file-section .ul-style .selectedFile2 {
  position: relative;
  background-color: #d8d2c269;
  color: white;
  font-weight: 900;
  border-radius: 5px;
} */
/* 
.laps .each-file-section .ul-style .selectedFile1::before,
.laps .each-file-section .ul-style .selectedFile2::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
}
.laps .each-file-section .ul-style .selectedFile1::before {
  background-color: rgb(72, 109, 232);
}

.laps .each-file-section .ul-style .selectedFile2::before {
  background-color: rgb(197, 83, 5);
} */

.content .track {
  display: inline-block;
  width: 30%;
  max-width: 565px;
  margin: 10px auto;
  vertical-align: top;
  position: relative;
}

.content .track_conditions {
  display: inline-block;
  width: 49.7%;
  background-color: #d8d2c2b4;
  color: black;
  border-radius: 5px;
}

.content .track_conditions:first-of-type {
  border-right: 5px solid #32312f;
}

.content .track_conditions .each-condition {
  display: inline-block;
  padding: 5px;
  font-weight: 900;
  font-size: 14px;
}

.content .track_conditions .each-condition:not(:last-child) {
  border-right: 1px solid #32312f;
}

.content .track_conditions .each-condition .cond_icon,
.content .track_conditions .each-condition .cond_value {
  display: block;
  margin: 0px auto;
}
.content .track_conditions .each-condition .cond_icon {
  width: 16px;
  height: 16px;
}

.content .track_conditions .each-condition .cond_value {
  text-align: center;
  margin-top: 5px;
}

.content .track_conditions .each-condition .cond_icon img {
  width: 100%;
}

.content .track .track-canvas {
  display: block;
  width: 100%;
  height: 550px;
  /* background-color: rgb(20, 31, 45); */
  background-color: rgb(10, 23, 38);
}

.controllers {
  width: 99%;
  direction: rtl;
  margin: 5px auto;
  text-align: right;
}

.controllers .controller {
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
  background-color: #821131;
  border-radius: 10px;
  cursor: default;
}

.controllers .controller-btn:hover {
  background-color: #821131ab;
}

.controllers .controller .controller-icon {
  display: block;
  width: 16px;
  margin: 0px auto;
}

.controllers .controller .controller-text {
  display: block;
  font-weight: 900;
  font-size: 12px;
}

.controllers .controller .split {
  display: inline-block;
}

.content .data-canvas {
  display: inline-block;
  width: 55%;
  max-width: 1040px;
  margin: 10px auto;
  vertical-align: top;
}

.content .data-canvas .each-canvas {
  width: 100%;
  height: 155px;
  margin: 0px auto;
  font-size: 0px;
}

.content .data-canvas .each-canvas .small-canvas {
  display: inline-block;
  width: 10%;
  height: 100%;
  /* background-color: #0e1b2a; */
  background-color: rgb(10, 23, 38);
  border-top: 2px solid #4a4947;
  border-right: 2px solid #4a4947;
}

.content .data-canvas .each-canvas .split-canvases {
  display: inline-block;
  width: 50%;
  height: 100%;
}
.content .data-canvas .each-canvas .split-canvases .main-canvas {
  width: 100%;
}
.content .data-canvas .each-canvas .split-canvases .small-canvas {
  display: none;
}

.content .data-canvas .each-canvas .main-canvas {
  display: inline-block;
  width: 90%;
  height: 100%;
  /* background-color: #0e1b2a; */
  background-color: rgb(10, 23, 38);
  border-top: 2px solid #4a4947;
}

.track .above-track {
  width: 100%;
  height: 120px;
}

.track .above-track .main-canvas {
  width: 100%;
  height: 100%;
  /* background-color: #0e1b2a; */
  background-color: rgb(10, 23, 38);
}

.track .above-track .small-canvas {
  display: none;
}

.tabs {
  display: block;
  width: 100%;
}

.tabs .tab {
  display: inline-block;
  width: 18%;
  height: 100%;
  background-color: #07101a;
  color: white;
  padding: 8px 10px;
  margin: 4px auto;
  border-radius: 8px;
  cursor: pointer;
}

.tabs .selected-tab {
  background-color: #245389;
}

.footer {
  width: 100%;
  height: 0px;
}