/* Light/Dark theme selection */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

body,
html {
  /*
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-family: 'Poppins', sans-serif;
  */

  font-family: 'Roboto', sans-serif;
  font-family: 'Raleway', sans-serif;
  min-width: 300px;
}

body {
  --shadow-color-1: rgba(0, 0, 0, 0.12);
  --sva-red-color-1: #c00;
  --selected-item-bg-color-1: #f3f3f3;
  --selected-item-bg-color-1: #cfcece;

  --primary-color: rgb(70, 70, 70);
  --primary-bg-color: white;
  --primary-anchor-color: #795d0b;
  --primary-button-bg-color: #cc9a0e;
  --primary-button-bg-color-hover: #dfba52;

  --header-color: #0d0d0d; /* var(--primary-color);*/
  --header-bg-color: white; /*var(--primary-bg-color);*/
  --footer-color: #cfcdcd;
  --footer-bg-color: #424040;

  --color-1: rgb(115, 113, 113);
  --bg-color-1: #f7f6f4;
  --hover-color-1: #e8e6e6;
  /*--border-color-1: rgb(70, 70, 70);*/
  --border-color-1: rgba(0, 0, 0, 0.1);
  --anchor-color-1: #5d7fe5;

  --color-2: rgb(42, 41, 41);
  --bg-color-2: #f3f3f3;
  --border-color-2: rgba(70, 70, 70, 0.1);
  --anchor-color-2: #809fff;

  --color-3: #6b2323;
  --bg-color-3: #d6d5d5;
  --border-color-3: rgb(70, 70, 70);
  --anchor-color-3: #809fff;

  --color-4: #625150;
  --bg-color-4: #c4c0c0;
  --border-color-4: rgb(70, 70, 70);
  --anchor-color-4: #809fff;
}

body.dark-theme {
  --shadow-color-1: rgba(0, 0, 0, 0.2);
  --sva-red-color-1: #ff4e45;
  --selected-item-bg-color-1: #212121;
  --selected-item-bg-color-2: #0c0c0c;

  --primary-color: #cfcdcd;
  --primary-bg-color: #141313; /* #282828;  #353535;*/
  --primary-anchor-color: #d7ba65;
  --primary-button-bg-color: #a88509;
  --primary-button-bg-color-hover: #e4c265;

  --header-color: #c7c6c4; /* #fff;*/ /*var(--primary-color);*/
  --header-bg-color: #0a0a0a; /*var(--primary-bg-color);*/

  --color-1: #807d7d;
  --bg-color-1: #1f1f1f; /*#383b3d;*/
  --hover-color-1: #424140;
  /*--border-color-1: #eceae1;*/
  --border-color-1: rgba(255, 255, 255, 0.1);
  --anchor-color-1: #d7ba65;

  --color-2: #ededed;
  --bg-color-2: #191919; /*#4c4c4c;*/
  --border-color-2: rgba(255, 255, 255, 0.1);
  --anchor-color-2: #d7ba65;

  --color-3: #b18484;
  --bg-color-3: #2d2222; /*#0b0b0b;*/
  --border-color-3: #b9b6ae;
  --anchor-color-3: #d7ba65;

  --color-4: #9c9595;
  --bg-color-4: #2b2b2b;
  --border-color-4: #b9b6ae;
  --anchor-color-4: #d7ba65;
}

/* Global : common theme independent vars */
body {
  --main-content-left-padding: 16px;
  --main-content-top-padding: 10px;
  --main-content-extra-wide-width-limit: 1600px;
  --main-content-max-width: 1200px;
  --content-max-width-l1: 900px;
  --content-max-width-l2: 600px;
}

/* Global styles */
body {
  color: var(--primary-color);
  background: var(--primary-bg-color);
}

body,
html {
  height: 100%;
  margin: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  font-size: 22px;
  margin: 0;
  padding: 0;
}
h2 {
  font-size: 21px;
  margin: 0;
  padding: 0;
}
h3 {
  font-size: 20px;
  margin: 0;
  padding: 0;
}
h4 {
  font-size: 19px;
  margin: 0;
  padding: 0;
}
h5 {
  font-size: 18px;
  margin: 0;
  padding: 0;
}
h6 {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

a {
  color: var(--primary-anchor-color);
  text-decoration: none; /* No underline*/
  font-weight: 400;
}
a:hover {
  color: var(--primary-anchor-color);
  text-decoration: underline;
  font-weight: 400;
}

/* Common Styles for centre placement */
.centered {
  margin: 0 auto;
  padding: 0 1em;
  width: 100%;
}

@media screen and (min-width: 52em) {
  .centered {
    max-width: var(--main-content-max-width);
  }
}

/* Style for buttons and input-type-submit which appears as button*/
.ts-tooltip {
  position: relative;
}

.ts-tooltip .ts-tooltip-text {
  visibility: hidden;
  max-width: 200px;
  font-size: 12px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: -75%; /* Position above the button */
  left: 110%;
  opacity: 0;
  transition: opacity 0.3s;
}

.ts-tooltip:hover .ts-tooltip-text {
  visibility: visible;
  opacity: 1;
}

button,
input[type='submit'] {
  color: var(--primary-color);
  background: var(--primary-button-bg-color);
  font-size: 12px;
  padding: 2px 6px 2px 6px;
  border: 1px solid rgb(149, 149, 149);
  border-radius: 4px;
}

.transparent-button-s1 {
  /*color: var(--primary-button-bg-color);*/
  background: none;
  margin: 0;
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}

.text-only-button-s1 {
  color: var(--primary-anchor-color);
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.text-only-button-s2 {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

button:hover,
input[type='submit']:hover,
.transparent-button-s1:hover,
.text-only-button-s1:hover,
.text-only-button-s2:hover {
  color: black;
  background: var(--primary-button-bg-color-hover);
  text-decoration: none; /* underline;*/
  font-weight: 400;
}

button:disabled,
input[type='submit']:disabled,
.transparent-button-s1:disabled,
.text-only-button-s1:disabled,
.text-only-button-s2:disabled {
  background: rgba(200, 200, 200, 0.5); /* Light grey background with 50% opacity */
  color: #ccc;
  cursor: not-allowed;
}