main.css

.google-visualization-tooltip {
  visibility: visible !important;
  width: 600px !important;
  height: 300px !important;
  opacity: 0.9 !important;
  background-color: rgb(0, 0, 0) !important;
  border-radius: 10px !important;
  transition: width 2s;
  border: solid 1px #bdbdbd;
  position: relative !important;
  font-size: 1rem !important;
  padding: 0px;
  z-index: 10;
  left: var(--x) !important;
  top: var(--y) !important;
  display: var(--v) !important;
}

.google-visualization-tooltip th {
  font-size: 0.8em;
}
#resultTable {
  height: 300px !important;
  background-color: rgb(0, 0, 0) !important;
  margin-bottom: 10px;
  border-radius: 10px !important;
  border: solid 1px #bdbdbd;
  margin: 10px;
  font-size: 15px;
}

#sankey_basic > div > div:last-child {
  height: 0px;

}
svg path[fill-opacity="0.8"] {
  fill-opacity: 1 !important;
  opacity: 0.8 !important;
}

svg path[fill-opacity="0.6"] {
  /*fill-opacity: 1 !important;
  opacity: 1 !important;*/
}

th,
td {
  padding: 15px;
  text-align: right;
  color: white;
}

td {
  font-family: "UthmanTN";
}
tr:hover {
  background-color: DodgerBlue !important;
}

tr:nth-child(even) {
  background-color: #313131;
}

#card tr:hover {
  background-color: var(--main-bg-color) !important;
}

#card tr {
  background-color: var(--main-bg-color) !important;
}

table tbody {
  overflow: auto;
}

table,
tbody {
  display: block;
  height: 200px;
}

thead,
th,
table {
  border-radius: 10px !important;
}

.my-legend .legend-title {
  text-align: left;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 90%;
}

#gradeTooltip {
  visibility: hidden;
  width: 100%;
  opacity: 0.8 !important;
  background-color: white !important;
  color: black !important;
  border-radius: 6px !important;
  transition: width 2s;
  border: solid 1px #bdbdbd;
  text-align: center;
  padding: 5px 0;
  direction: rtl;
  z-index: 10;
  top: 150%;
  left: 50%;
}

.my-legend .legend-scale ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  width: 100%;
}
.my-legend .legend-scale ul li {
  display: block;
  float: left;
  width: 6.5%;
  margin-bottom: 6px;
  text-align: center;
  font-size: 0.62em;
  list-style: none;
}
.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 15px;
  width: 100%;
}
.my-legend .legend-source {
  font-size: 0.75rem;
  color: #999;
  clear: both;
}
.my-legend a {
  color: #777;
}

.my-legend .legend-scale {
  width: 100%;
}

.my-legend {
  position: sticky;
  top: 0;
  left: 80px;
  z-index: 2;
  width: 100%;
}

.dark-mode {
  --main-color: white !important;
  --main-bg-color: #2a2e33 !important;
  background-color: #2a2e33 !important;
  color: white !important;
}

body {
  --main-color: black;
  --main-bg-color:  #FAF9F6;
  color: black;
  background-color: #FAF9F6;
  font-family: "El Messiri", sans-serif;
  height: 100%;
}

h6 {
  font-family: "El Messiri", sans-serif;
}

html {
  height: 100%;
}
.container-fluid {
  min-height: calc(100% - 100px);
}
html,
body {
  height: 100%;
  margin: 0px;
}

footer {
  margin-top: 50px;
  margin-left: 80px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switchSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switchSlider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .switchSlider {
  background-color: #2196f3;
}

input:focus + .switchSlider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .switchSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switchSlider.round {
  border-radius: 34px;
}

.switchSlider.round:before {
  border-radius: 50%;
}

text {
  font-size: 0.85rem;
  fill: var(--main-color);
  z-index: 100;
  -webkit-transform: rotate(-10deg) translateY(5px) translateX(0px);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.node_lable_box {
  font-size: 0.85rem;
  -webkit-transform: rotate(-10deg) translateY(5px) translateX(0px);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

text[text-anchor="end"] {
  -webkit-transform: rotate(-10deg) translateY(15px) translateX(130px);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.vertical-sankey /*> div > div > div > svg > g/**/ {
  transform: rotate(90deg) translate(50%, -50%);
  transform-origin: 50% 0%;
}
.vertical-sankey > div > div {
  height: 100%;
}

.vertical-sankey g {
  -webkit-perspective: 900000px;
  perspective: 900000px;
}
.vertical-sankey div.google-visualization-tooltip {
  transform-origin: 50% 50%;
  transform: rotate(90deg);
}

.vertical-sankey text {
  transform-box: fill-box;
  transform-origin: 50% 50%;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.vertical-sankey text[text-anchor="start"] {
  -webkit-transform: rotate(-135deg) translateY(0px) translateX(15px);
  /*
  -webkit-transform: rotate(90deg) translateY(35px);
  -moz-transform: rotate(90deg) translateY(35px);
  -ms-transform: rotate(90deg) translateY(35px);
  */
}

.vertical-sankey text[text-anchor="end"] {
  -webkit-transform: rotate(-135deg) translateX(15px) translateY(30px);
}

.vertical-sankey svg + div {
  position: unset !important;
}
@media (max-width: 991.98px) #sidebar.active {
  margin-left: 0 !important;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
  height: 100%;
  padding: 0px;
  position: fixed;
}
@media (max-width: 991.98px) #sidebar {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
  margin-left: -80px !important;
}

#sidebar {
  color: inherit;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

#sidebar ul.components {
  padding: 35vh 0px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

#sidebar.active ul.components li {
  font-size: 14px;
}
#sidebar ul li {
  font-size: 16px;
}

#sidebar.active ul.components li a {
  padding: 10px 0;
}
#sidebar ul li.active > a {
  background: transparent;
  color: inherit;
}
#sidebar ul li a {
  padding: 10px 30px;
  display: block;
  color: white;
}

#sidebar.active ul.components li a span {
  margin-right: 0;
  display: block;
  font-size: 24px;
}
@media (max-width: 991.98px) #sidebar ul li a span {
  display: block;
}
#sidebar ul li a span {
  margin-right: 15px;
}

#sidebar > ul > .icon {
  display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  #sidebar > ul > li {
    display: none;
  }
  #sidebar > ul > .icon {
    float: right;
    display: block;
  }
  #sidebar.active {
    min-width: 30px;
  }
  #sidebar ul.components {
    padding: 0px;
  }
  .my-legend {
    margin: 0px;
  }
  .container-fluid {
    margin: auto !important;
    width: 100% !important;
  }
}

nav {
  overflow: hidden;
}

.sidenav,
.sidesearch {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  color: white;

}

.sidenav a,
.sidesearch a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav .closebtn,
.sidesearch .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav,
  .sidesearch {
    padding-top: 15px;
  }
  .sidenav a,
  .sidesearch a {
    font-size: 18px;
  }
}

@font-face {
  font-family: "UthmanTN";
  src: url("font/UthmanTN_v2-0/UthmanTN_v2-0.ttf") format('truetype');
  /* Additional font properties */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "fontawesome";
  src: url("../lib/fonts/fontawesome.eot?14663396");
  src: url("../lib/fonts/fontawesome.eot?14663396#iefix")
      format("embedded-opentype"),
    url("../lib/fonts/fontawesome.woff?14663396") format("woff"),
    url("../lib/fonts/fontawesome.ttf?14663396") format("truetype"),
    url("../lib/fonts/fontawesome.svg?14663396#fontawesome") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.fa-rotate:before {
  content: "\e813";
}

.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

.dropdown-toggle {
  background-color: white;
  color: black;
}

a:hover {
  color: DodgerBlue !important;
}

.container-fluid {
  width: calc(100% - 80px);
  padding: 0px;
  margin-left: 80px;
}

.row {
  width: 100%;
  margin: 0px;
}

.bootstrap-select {
  width: 100% !important;
}

/* autocomplete tagsinput*/
.label-info {
  background-color: #5bc0de;
  display: inline-block;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  color: black;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}
#sankey_container {
  margin-bottom: 200px;
}

{
  overflow: scroll;
  position: fixed;
  left: 5%;
  bottom: 30px;
  width: 90%;
  resize: vertical;
  height: 200px;
}

#rsz th , #rsz td {
  padding: 5px;
  font-family: "UthmanTN";
  color: inherit;
  background: inherit;
}

#rsz th {
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  border-radius: 0px !important;
}

#card {
   /* Here's the trick: rotate the entire element so the resize handle is in the other corner. */
  transform: rotateZ(180deg);
  /* Note that in order to make resize: both work, an overflow is needed with anything other than visible.
     Set it to auto so we don't see scrollbars,
     but this element should never actually overflow as the only child has fixed 100% width and height.
  */
  resize: vertical;
  overflow: scroll;
  /* Need a little padding for this element for the resize handle to be clickable.
     Also note the rotation flips the directions that need padding. */
  padding: 0 8px 8px 0;
  /* Should work for position fixed or absolute, as long as it is bottom/right positioned. */
  position: fixed;
  bottom: 30px;
  right: 5%;
  /* initial size can be anything, but usually wise to set it to something sensible initially. */
  height: 200px;
  width: 90%;
  z-index: 3;
}

#rsz {
  /* Rotate everything back so content is right way up: */
  transform: rotateZ(180deg);
  /* Grow along with resizable parent: */
  width: 100%;
  height: 100%;
  /* make contents scrollable if resizable parent gets to small: */
  overflow: auto;
}

.btn-primary-outline {
  background-color: transparent;
  border-color: transparent;
}
.btn-primary-outline:hover {
  color: DodgerBlue !important;
}