/* all.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  user-select: none;
  -webkit-user-select: none;
  /* font-family: 'Open Sans', sans-serif; */
}

a,
a:hover,
a:visited,
a:active {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

.hiding2 {
  display: none !important;
  overflow: hidden;
}

.hiding {
  display: none;
  overflow: hidden;
}

.wrapPlease {
  white-space: pre-wrap;
}.tagSpan {

    letter-spacing: .025rem;
    font-size: 1.em;
    box-sizing: border-box;
    /* flex-basis: 100%; */
    display: inline-block;
    border-radius: .2em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-family: neo-sans, "sans-serif";
    padding: 0 .4rem;
    color: #fff;
    font-weight: 500;
    background-color: #00cdb2;
}table.spaced  {
    border-collapse: separate;
    border-spacing: 1px;
}

table.T2  {
    table-layout: fixed;
    width: 100%;
    border: 1px solid var(--tbBorder);
    border-collapse: collapse;
    background-color: var(--tbBackground);
}

.T2 td {
    -webkit-text-size-adjust: 100%;
    color: var(--tdColor);
    font-feature-settings: "liga";
    line-height: 1.7;
    font-family: var(--font-span-header);
    font-weight: 300;
    box-sizing: inherit;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--tdBorder);
    margin: 0px;
    font-size: 1rem;
    text-align: center;
}
.T2 td a {
    text-decoration: underline;
}

.T2 th {
    -webkit-text-size-adjust: 100%;
    color: var(--tdColor);
    line-height: 1.4ch;
    font-family:  monospace;
    border-collapse: collapse;
    box-sizing: inherit;
    background: var(--thBackground);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    padding: 0.20rem 0.45rem;
    border: 1px solid var(--thBorder);
    margin: 0px;
    font-size: 1rem;
}

table.T3 {
    margin-bottom: 7px;
    table-layout: auto;
}
.loader {
    border: 12px solid #f3f3f3;
    border-top: 12px solid #3498db;
    border-radius: 50%;
    height:  100px;
    aspect-ratio: 1 / 1;
    animation: spin 2s linear infinite;
}

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

#dvSpinnerContainer{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* fonts.css */
:root {
  --font-hero: 'Raleway', sans-serif;
  --font-heading2: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-span-header: "IBM Plex Mono", monospace;
  --font-body: 'Open Sans', sans-serif;
  --font-heading1: 'Berkeley Mono','Raleway',sans-serif;
}
/* colours.css */
:root[data-applied-mode="dark"],
.darkTheme {
  --main-color:  rgb(255, 255, 255);
  --main-bg-color: #202731;

  --second-bg-color : #202731;

  --third-bg-color: rgb(59, 59, 59);
  --third-color: #b96260;

  --other-bg-color: rgb(59, 59, 59);
  
  --textA: rgb(108, 221, 145); 
  --textB: rgb(255, 246, 230);
  --textC: rgb(71, 207, 237);
  
  --dashplease: rgb(255, 246, 230);

  --tbBackground: rgba(41, 41, 41, 0.8);
  --tbBorder: rgb(95, 95, 94);

  --thBorder: rgb(71, 207, 237);
  --thBackground: rgb(48, 52, 53);

  --tdBorder: rgb(95, 95, 94);
  --tdColor: rgb(255, 246, 230);
  
  --aColor  :rgb(235, 231, 231);
  --aHoverColor : rgb(184, 180, 180);
  
  --swBackground: #2196f3;
  --swBackgroundOff :rgb(200, 219, 33);
  --swBackgroundOn :rgb(219, 107, 33);
  
  --btn-outline : 136, 133, 151;

  --colour-h : rgb(108, 221, 145); 
  --colour-h3 : rgb(228, 141, 60);
  --colour-hero : rgb(241, 238, 238);
  --colour-dashLine : rgb(71, 71, 71);

  --colour-background:  rgb(224, 125, 163);
}

:root,
.lightTheme {
  --main-color: rgb(33, 37, 41);
  --main-bg-color: rgb(255, 255, 255);

  --second-colour : #e48583; 
  --second-bg-color: rgb(255, 255, 255);

  --third-bg-color: rgb(59, 59, 59);
  --third-color: rgb(48, 42, 42);
  
  --other-bg-color:rgb(144, 175, 233);

  --textA:  rgb(14, 14, 14);
  --textB: black;

  --dashplease: rgb(255, 246, 230);
  
  --tbBackground: white;
  --tbBorder: rgb(159, 159, 16);
  
  --thBorder: lightblue;
  --thBackground: white;
  
  --tdBorder: rgb(165, 170, 169);
  --tdColor: rgb(48, 52, 53);
  
  --aColor  :rgb(63, 61, 61);
  --aHoverColor : rgb(14, 14, 14);
  
  --swBackground: #ccc;

  --swBackgroundOff :rgb(33, 219, 95);
  --swBackgroundOn :rgb(219, 33, 142);

  --btn-outline : 33, 107, 219;
  --btn-outline2 : rgb(33, 107, 219);

  --colour-h : #313c4b;
  --colour-h3 : rgb(228, 141, 60);
  --colour-hero : rgb(71, 71, 71);
  --colour-dashLine : rgb(71, 71, 71);

  --colour-background:  rgb(224, 125, 125);
}/* coloursVar.css */
#dvButtons>.btn-check:checked+.btn-outline-success {
    background-color: var(--xy, rgba(var(--btn-outline)));
}

#dvButtons>.btn-outline-success:hover {
    background-color: var(--xy, rgba(var(--btn-outline)))
}

#dvMenuButtons>.btn-check:checked+.btn-outline-success {
    background-color: var(--xy, rgba(var(--btn-outline)))
}

#dvMenuButtons>.btn-outline-success:hover {
    background-color: var(--xy, rgba(var(--btn-outline)))
}

body {
    font-family: var(--font-body);
    background-color: var(--main-bg-color);
    color: var(--main-color);
}

h1 {
    color: var(--colour-h);
}

h2 {
    color: var(--third-color);
}

h3 {
     color: var(--colour-h3 );
}

h4 {
    color: var(--colour-h);
}

.card {
    color: var(--main-color)
}

.btn-check:focus+.btn-outline-success,
.btn-outline-success:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-outline), 0.5);
}

.btn-check:checked+.btn-outline-success:focus,
.btn-outline-success:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-outline), 0.5);
}

.btn-outline-success:hover {
    background-color: rgb(var(--btn-outline));
    border-color: rgb(var(--btn-outline));
}

.btn-check:active+.btn-outline-success,
.btn-check:checked+.btn-outline-success,
.btn-outline-success.active,
.btn-outline-success.dropdown-toggle.show,
.btn-outline-success:active {
    background-color: rgb(var(--btn-outline));
    border-color: rgb(var(--btn-outline));
}

.btn-outline-success {
    color: rgb(var(--btn-outline));
    border-color: rgb(var(--btn-outline));
}

footer .content-bottom .footer-references a {
    color: var(--aColor);

}

footer .content-bottom .footer-references a:hover {
    color: var(--aHoverColor);
}

header {

    background-color: var(--second-bg-color);
    border-bottom: 1px solid rgba(39, 202, 80, 0.1);
}

footer .content-bottom {
    background-color: var(--second-bg-color);
    color: var(--textA);
    /* background-color: rgb(255 255 255 / 43%); */
    /* border-top: 1px solid rgb(26 120 97 / 90%); */
}

footer {
    border-top-color: var(--colour-dashLine);
}

header {
    border-bottom-color: var(--colour-dashLine);
}

.secondary-colour {
    background-color: var(--second-bg-color);
}

.other-bg-color {
    background-color: var(--other-bg-color);
}

.hero {
    font-family: var(--font-hero);
    color: var(--colour-hero);
}

.heading2 {
    font-family: var(--font-heading2)
}

btn-check:checked+.btn-outline-primary {
    background-color: var(--btn-outline2)
}

.btn-outline-primary:hover {
    background-color: var(--btn-outline2)
}

#spHeaderText {
    font-family: var(--font-heading1)
}/* style.css */
.no {
  /* background-color: #645bdf; */
  color: white;
}

.yes {
  background-color: #e659ab;
}


header {
  font-family: Courier;
  font-size: 21px;
}

footer {
  font-family: Courier;
  font-size: 21px;
}

.link_off,
.link_on {
  position: relative;
  color: #fff;
  text-decoration: none;
  letter-spacing: .5px;
  margin-right: 10px;
  color: #95bac6;
  font-weight: 600;
}

.link_off:active,
.link_off:focus,
.link_off:hover,
.link_on:active,
.link_on:focus,
.link_on:hover {
  text-decoration: none;
  color: var(--headeraColor) !important;
}

.link_off:active::after,
.link_off:focus::after,
.link_off:hover::after,
.link_on:active::after,
.link_on:focus::after,
.link_on:hover::after {
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 2;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  border-radius: 6px;
}

.link_on {
  color: var(--headeraColor)  !important;
}

.link_on::after {
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 2;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #e7f3ff;
  border-radius: 6px;
}

footer .content-bottom {
  font-size: 0.9rem;
}

footer a {
  text-decoration: none !important;
}

footer .content-bottom .footer-references a {
  font-weight: 600;
}

footer .content-bottom .footer-references a:hover {
  text-decoration: none;
}

.searchBox {
  margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {

  .two-button-header a {
    margin-bottom: 0.1rem;
  }
}

.two-button-header {
  flex-wrap: wrap;
}

.opinion {
  font-style: italic;
}

.word {

    display: inline-block;
    border-radius: .2em;
    text-align: center;
    text-decoration: none;
    padding: 0 .4rem;
    color: #fff;
    background-color: #b5d8d8;
}

.two-buttons {
    width: 50%;
}

footer {
    border-top-width: 1px ;
    border-top-style: dashed ;
}

header {
    border-bottom-width: 1px ;
    border-bottom-style: dashed ;
}/* frame.css */
body {
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
}

footer .content-bottom {
    width: 100%;
    /* height: 57px; */
    padding: 0.2em 0;
}

img.logo {
    width: 255px;
    height: auto;
}

main {
    display: grid;
    grid-template-rows: auto 1fr;
    flex: 1 1 auto;
}

#dvContainer {
    display: grid;
    grid-template-rows: auto 1fr;
}

.content {
    margin: auto auto;
    padding: 0 20px;
    max-width: 1200px;
}

.myCss {
    text-align: center;
}table.T2 {
    table-layout: auto;
    width: 100%;
    border: 1px solid var(--tbBorder);
    border-collapse: collapse;
    background-color: var(--tbBackground);
}

.border-primary {
    border-color: green !important;
}

#cpSwitchBox {
    display: none;
    overflow: hidden;
}

:root {

    --main-color: #2e3031;
    --main-bg-color: #6db3db;
    --main-bg-color: #fbfdff;

    --second-colour: #e48583;
    --second-bg-color: rgba(230, 224, 224, 0.918);

    --third-bg-color: rgb(59, 59, 59);
    --third-color: rgb(48, 42, 42);

    --textA: rgb(14, 14, 14);
    --dashplease: rgb(255, 246, 230);

    --tbBackground: white;
    --tbBorder: rgb(159, 159, 16);

    --thBorder: lightblue;
    --thBackground: white;

    --tdBorder: rgb(165, 170, 169);
    --tdColor: rgb(48, 52, 53);

    --aColor: rgb(122, 122, 122);
    --aHoverColor: rgb(14, 14, 14);

    --btn-outline: 33, 107, 219;
    --btn-outline2: rgb(33, 107, 219);
    --swBackgroundOff: rgb(33, 219, 95);
    --swBackgroundOn: rgb(219, 33, 142);

    --color: hsl(263, 45%, 45%);

    --footeraColor :  #b43c3c;
    --headeraColor :  #b43c3c;
}

.word {

    display: inline-block;
    border-radius: .2em;
    text-align: center;
    text-decoration: none;
    padding: 0 .4rem;
    color: #fff;
    background-color: #b5d8d8;
}

.detail-row {
    background-color: #e6ebf5 !important
}

btn-check:checked+.btn-outline-primary {
    background-color: var(--btn-outline2)
}

.btn-outline-primary:hover {
    background-color: var(--btn-outline2)
}

.table {
    table-layout: fixed;
}


:root {
    --geography: rgb(48, 52, 53);
    --music: black;
    --design: pink;
    --computing: brown;
    --pe: orange;
    --art: blue;
    --history: green;
    --english: red;
    --science: purple;

    --correct: rgb(16, 180, 16);
    --incorrect: red;

    --ai: rgb(80, 153, 172);
    --data: black;
    --python: pink;
    --weather: brown;
    --market: orange;
    --industry: blue;
    --modelling: green;
    --terminology: red;
    --gas: purple;
    --fundamentals :rgb(35, 197, 149);

    --correct: rgb(16, 180, 16);
    --incorrect: red;
}

.oval-radio {
    -webkit-appearance: none;
    appearance: none;
    width: 2.2rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.25);
    background: #fff;
    cursor: pointer;
}

.oval-radio:checked {
    background: var(--radio-color, #5e5e5e);
}

.oval-radio:hover {
    box-shadow: 0 0 0 3px rgba(20, 27, 20, 0.14);
}

.oval-radio-disabled.ishighlight {
    border: 2px solid var(--correct);
    box-shadow: 0 0 0 3px var(--correct);
}

.oval-radio-disabled {
    -webkit-appearance: none;
    appearance: none;
    width: 2.2rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.25);
    background: #fff;
}

.oval-radio-disabled:checked {
    background: var(--radio-color, #5e5e5e);
}

.asset {
    max-width: 100%;
}

.asset-container {
    padding : 0.5rem;
}

h3 {
    color: rgb(228, 141, 60);
    padding-top: .9em;
}