@media (prefers-color-scheme:light) {
  :root {
    --backdrop: #ffffff;
    --secondary: #d9d9d9;
    --tertiary: #bfbfbf;
    --light-gray: #646464;
    --accent2: #d65302;
    --accent1: #71ee4b;
    --accent3: #f8f37d;
    --accent4: rgb(225,58,236);
    --light-text: #1f1f1f;
    --dark-text: #ffffff;
    --btn-text: #ffffff;
    --hamburger: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    --chevron:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    --switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff' background-color='%23646464'/%3e%3c/svg%3e");

  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --backdrop: #1f1f1f;
    --secondary: #353535;
    --tertiary: #494949;
    --light-gray: #646464;
    --accent1: #71ee4b;
    --accent2: #d65302;
    --accent3: #f8f37d;
    --accent4: rgb(225,58,236);
    --light-text: #ffffff;
    --dark-text: #1f1f1f;
    --btn-text: #ffffff;
    --hamburger: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    --chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    --switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff' color='%23353535'/%3e%3c/svg%3e");
  }

}

@media screen and (min-width:576px) {
  .pagebody {
    padding-top: 5%;
  }
  .pagebody {
    padding-top: 5%;
  }
  .bracketbody {
    padding-top: 3%;
  }
  #spinners {
    padding-top: 5%;
  }
}
@media screen and (max-width: 576px) {
  .pagebody {
    padding-top: 10%;
  }
  .pagebody {
    padding-top: 10%;
  }
  .bracketbody {
    padding-top: 5%;
  }
  #spinners {
    padding-top: 10%;
  }
}

#indexlogo {
  border-radius: 96px;
  max-height: 384px;
}
.navlogo {
  border-radius: 8px;
  margin-left: 8px;
  margin-right: 8px;
}
.th1 {
  text-align: center;
  padding: 8px;
  vertical-align: bottom
}
.teamname {
  text-align: center;
  position: absolute
}
.td_team {
  text-align: left;
  padding-right: 24px;
  min-width:fit-content;
  white-space: nowrap
}
.td1 {
  text-align: center;
  width: 86px !important;
  padding: 4px;
  white-space: normal;
}
.modal-header{
  background-color: var(--secondary);
  color: var(--light-text)
}
.modal-body{
  background-color: var(--backdrop);
  color: var(--light-text);
  border-color: var(--backdrop)
}
.modal-footer{
  background-color: var(--backdrop) !important;
  color: var(--light-text);
  border-color: var(--backdrop);
  display: flex;
  align-items: center
}
.modal-backdrop.in { z-index: auto;}
.progress-bar{
  background-color: var(--accent2) !important;
}
.progress{
  background-color: var(--secondary) !important;
}
.overflow-x-auto {
  background-color: var(--backdrop) !important;
  color: var(--light-text);
  margin-bottom: 14px
}
.results {
  min-width: 20%;
  max-width: 20%;
  padding: 8px
}
#resultstable {
  width: 100%
}
.resultsbtn {
  width:100%;
  background-color: var(--secondary);
  color: var(--light-text)
}
#barcol {
  margin-bottom: 24px;
}
.btn-primary {
  background-color: var(--accent2) !important;
  color: var(--btn-text) !important;
  border-color: var(--accent2) !important;
  margin-bottom: 12px;
}
.btn-secondary{
  max-width: 178px;
  text-align: center;
  background-color: var(--light-gray);
  color: var(--btn-text);
  margin-bottom: 12px;
}
.quizbtn {
  width: 100%;
  background-color: var(--light-gray) !important;
  color: var(--btn-text) !important;
  margin: 6px;
}
.btn-check:checked + label {
  width: 100%;
  background-color: var(--accent2) !important;
  color: var(--btn-text) !important;
}
.text-primary {
  color: var(--accent1) !important
}
.text-secondary {
  color: var(--accent3) !important
}
.text-tertiary {
  color: var(--accent4) !important
}
.spinner-grow {
  margin: 8px;
}
table{
  width:fit-content;
}
.noline{
  text-align: left;
  border:none;
  padding-bottom: 6px;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: none;
  font-size: .7em;
  width: 25%;
}
.right{
  text-align: left;
  border-right: solid;
  border-collapse: collapse;
  border-top: none;
  border-left: none;
  border-bottom: none;
  padding-bottom: 6px;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: none;
  font-size: .7em;
  width: 25%;
  border-color: var(--accent2)
}
.bottom{
  text-align: left;
  border-collapse: collapse;
  border-bottom: solid;
  border-right: none;
  border-top: none;
  border-left:none;
  padding-bottom: 6px;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: none;
  font-size: .7em;
  width: 25%;
  border-color: var(--accent2)
}
.bottomright{
  text-align: left;
  border-collapse: collapse;
  border-bottom: solid;
  border-right: solid;
  border-top: none;
  border-left: none;
  padding-bottom: 6px;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: none;
  font-size: .7em;
  width: 25%;
  border-color: var(--accent2);
}
.bottomleft{
  text-align: left;
  border-collapse: collapse;
  border-bottom: solid;
  border-right: none;
  border-top: none;
  border-left: solid;
  padding-bottom: 6px;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: none;
  font-size: .7em;
  width: 25%;
  border-color: var(--accent2);
}
.bracketcard{
  min-height: 100%;
  min-width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: .8vw;
  padding: 0px;
  color: var(--light-text) !important;
  background-color: var(--secondary) !important;
}
.accountdetails{
  color: var(--light-text) !important;
  background-color: var(--tertiary) !important;
  line-height: 2;
  font-size: 1em !important;
  margin-bottom: 16px
}
.accountdetails-header {
  color: var(--light-text) !important;
  background-color: var(--secondary) !important;
  font-size: 1em !important 
}
.dropdown-menu {
  color: var(--light-text) !important;
  background-color: var(--secondary) !important;
  padding: 16px;
}
.dropdown-item {
  color: var(--light-text) !important;
  margin-top: 8px
}
.dropdown-item:hover {
  background-color: var(--accent2) !important;
}
.dropdown-divider {
  border-color: var(--accent2) !important;
  border-width: 4px;
}
.detail {
  text-align: right;
  margin-bottom: 16px;
}
.userdata {
  text-align: left;
  margin-bottom: 16px;
}

.bottomborder {
  font-weight: bold;
  border-bottom: solid; 
  border-color: var(--light-gray);
  margin-bottom: 8px;
  padding-bottom: 16px
}

.penbtn {
  border: none;
  background-color: var(--secondary) !important;
  color: var(--light-text) !important;
}
.bi-pen {
  background-color: var(--secondary) !important;
}
.card {
  color: var(--light-text);
  background-color: var(--backdrop);
}
.card-header {
  font-size:1em;
}
#finalfours {
  margin-top: 48px;
  margin-bottom: 8px;
}
select {
  background-color: var(--secondary) !important;
  color: var(--light-text) !important;
}

select option {
  background-color: var(--accent2) !important;
  color: var(--btn-text) !important;
}

select:has(option:checked:not([value])),
select:has(option:checked:not([value=""])) {
  background-color: var(--accent2) !important;
  color: var(--btn-text) !important;
}

select:has(option:checked:not([value])) option,
select:has(option:checked:not([value=""])) option {
  background-color: var(--accent2) !important;
  color: var(--btn-text) !important;
}

.quizsubmit {
  float:right;
}

.outercol {
  padding-right: 3px;
  padding-left: 3px;
}
.rd1card {
  padding: 0%;
  margin-bottom: 6px;
  max-height:fit-content;
}
.rd2card {
  padding: 0%;
  margin-bottom:3px;
  margin-top: 3px;
  max-height: fit-content 
}
.rd2row {
  max-height: 12.5%;
  min-height: 12.5%
}
.fst4card{
  padding-left: 3px;
  padding-right: 3px
}
.topspacer {
  max-height: 6.25%;
  min-height: 6.25%;
  padding: 0px;
  margin: 0px
}
.conboxrow {
  min-height: 100%
}
.conbox {
  max-height:100%;
  min-height:100%;
  padding: 0px;
  margin: 0px;
}
.conrow {
  max-height:33%;
  min-height:33%;
  padding:0px;
  margin:0px
}
.concell {
  min-height: 100%;
  max-height: 100%;
  min-width: 50%;
  max-width: 50%;
  padding: 0px;
  margin: 0px;
  
}
.top {
  border-top: solid;
  border-color: var(--accent2);
  border-width: .75;
}
.right {
  border-right: solid;
  border-color: var(--accent2);
  border-width: .75;
}
.left {
  border-left: solid;
  border-color: var(--accent2);
  border-width: .75;
}

.bottom {
  border-bottom: solid;
  border-color: var(--accent2);
  border-width: .75;
}
.card-text{
  margin: auto;
}
.infobutton{
  background-color: var(--backdrop);
  border: none;
  padding: none;
  margin: none;
  display: inline-block;
  color: var(--accent2);
}
.deletebutton{
  background-color: var(--backdrop);
  border: none;
  padding: none;
  margin: none;
  display: inline-block;
  color: var(--accent2);
 }
.deletebutton:hover {
  background-color: var(--secondary) !important;
}
.reset {
  text-align: center;
  margin-top: 12px;
}

.lines {
  stroke-width: 2px;
  color: red;

}
.toast-header {
  background-color: var(--accent2);
}
.toast-body {
  background-color: var(--secondary);
  color: var(--light-text)
}
.navbar {
  background-color: var(--secondary);
  margin-bottom: 0%;
}
.nav-link {
  color: var(--light-text) !important;
}
.navbar-brand {
  color: var(--light-text) !important;
}
.navbar-toggler-icon {
  background-image: var(--hamburger)
}
.accordion-button.collapsed::after {
  background-image: var(--chevron)
}
.btn-close {
  color: var(--light-text) !important;
  opacity: 1;
}
#indexlogo {
 max-width: 100%;
 margin: auto
}
.logobox {
  text-align: center;
  margin-bottom: 5%
}
.title {
  margin-top: 1%
}
html body {
  background-color: var(--backdrop);
  color: var(--light-text);
  text-align: justify
}
.intextlink {
  color: var(--accent2);
}
input[type="radio"]:checked {
  background-color: var(--accent2) !important;
}

input[type="checkbox"]:checked {
  background-image: var(--switch);
  background-color: var(--accent2) !important;
}
input[type="checkbox"] {
  backgound-color: var(--light-gray) !important;
  color: var(--light-text) !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 0 rgba(100, 100, 100, .25);
  border: var(--light-gray) !important
}
input{
  max-width:100%
}

.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

svg {
  background-color: var(--backdrop); 
  color: var(--accent2);
  fill: var(--accent2);
}
.form-switch .form-check-input {
  background-image: var(--switch);
  background-color: var(--light-gray) !important; 
}


.infobutton {
  background-color: var(--backdrop)
}

.alert {
  background-color: var(--secondary) !important;
  color: var(--light-text);
}

#picksexplainer {
  margin-bottom: 24px
}

.setcol {
  margin-bottom:14px
}
.setcol2 {
  margin-top:14px
}
.confirmation{
  margin-top:14px
}

.footer {
  margin-top:2.5% !important
}

.accordion-button {
  background-color: var(--secondary) !important;
  color: var(--light-text) !important;
}
.accordion-header {
   color: var(--light-text) !important;
}

.accordion-body {
  background-color: var(--backdrop) !important;
  color: var(--light-text) !important
}
.formlabel {
  text-align: right;
  margin-top: 14px;
}
.formfield {
  text-align: left;
  margin-top: 14px;
}
.errors {
  list-style-type: none;
  padding: 0;
}

.nav-item {
  padding-left: 14px !important
}
/* #2e2d63; */

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: none; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--secondary) !important;
    color: var(--light-text) !important;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .tooltip .arrow:before {
    border-bottom-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
  }

  .tooltip .tooltip-inner {
    background-color: var(--secondary) !important;
    color: var(--light-text) !important;
  }