.is_hidden {
    visibility : hidden;
    max-height : 0;
}

.margin_auto {
    margin-left: auto;
    margin-right : auto;
}

html *
{
   font-size: 1em;
   color: #000;
   font-family: Josefin Sans !important;
}

.text-line {
    color: rgba(var(--font-color-dark));
}

.dark-mode.text-line {
    color: rgba(var(--font-color-light));
}

.hr2 {
    border-color:rgba(var(--font-color-dark));
    margin-top : 0.5vh;
    margin-bottom : 0.5vh;
    height:1px;
}

.dark-mode.hr2 {
    border-color:rgba(var(--font-color-light));
}

.svg {
    max-height: 18px;
    max-width: 18px;
    display: inline-block;
    vertical-align: baseline;
    -webkit-filter:"";
    -moz-filter:"";
    -o-filter:"";
    -ms-filter:"";
    filter:"";
}

.dark-mode.svg {
    -webkit-filter:invert(var(--invert)) sepia(var(--sepia)) saturate(var(--saturate)) hue-rotate(var(--hue-rotate)) brightness(var(--brightness)) contrast(var(--contrast));
    -moz-filter:invert(var(--invert)) sepia(var(--sepia)) saturate(var(--saturate)) hue-rotate(var(--hue-rotate)) brightness(var(--brightness)) contrast(var(--contrast));
    -o-filter:invert(var(--invert)) sepia(var(--sepia)) saturate(var(--saturate)) hue-rotate(var(--hue-rotate)) brightness(var(--brightness)) contrast(var(--contrast));
    -ms-filter:invert(var(--invert)) sepia(var(--sepia)) saturate(var(--saturate)) hue-rotate(var(--hue-rotate)) brightness(var(--brightness)) contrast(var(--contrast));
    filter:invert(var(--invert)) sepia(var(--sepia)) saturate(var(--saturate)) hue-rotate(var(--hue-rotate)) brightness(var(--brightness)) contrast(var(--contrast));
}

.img-vert {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}

body {
    margin:0;
    padding:0;

    background-image: url("https://raw.githubusercontent.com/NoahBolohan/spirit-island-tracker/master/static/misc/Spirit_Island_Cover_Art.jpg");

    min-height: 99svh;
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;

    background-color: rgba(255,255,255,0.7);
    background-blend-mode: lighten;
}

.dark-mode-body {
    margin:0;
    padding:0;

    background-image: none;


    min-height: 99svh;

    background-color: black;
}

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

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--tertiary));
    -webkit-transition: .4s;
    transition: .4s;
    outline: 1px solid rgba(var(--font-color-dark));
}

.slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    left: 4px;
    bottom: 4px;
    background-color: rgba(var(--primary));
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: rgba(var(--primary));
}

input:focus + .slider {
    box-shadow: 0 0 1px rgba(var(--primary));
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -moz-transform: translateX(22px);
    -ms-transform: translateX(22px);
    -o-transform: translateX(22px);
    transform: translateX(22px);
}

.dark-mode.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--background-dark));
    -webkit-transition: .4s;
    transition: .4s;
}

.dark-mode.slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    left: 4px;
    bottom: 4px;
    background-color: rgba(var(--background-dark));
    -webkit-transition: .4s;
    transition: .4s;
}

.dark-mode-input:focus + .slider {
    box-shadow: 0 0 1px rgba(var(--background-dark));
}

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

.slider.round:before {
    border-radius: 50%;
    outline: 2px solid rgba(var(--font-color-dark));
}

.dark-mode.slider.round {
    outline: 1px solid rgba(var(--tertiary));
}

.dark-mode.slider.round:before {
    outline: 2px solid rgba(var(--primary));
}

.astext {
    border:none !important;
    margin:0;
    padding:0;
    cursor: pointer;
}

.ul-blank {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.spirit_select_list_item {
    list-style:none;
    display: inline-block;
    width: 25%;
    padding: 1px;
}

.adversary_select_list_item {
    list-style:none;
    display: inline-block;
    width: 25%;
    padding: 1px;
}

.element_img_col {
    position: relative;
    display: inline-block;
  }

.element_img {
    object-fit: cover;
    width: auto;
    height: 35px;
    opacity: 0.3;
}

.element_img_text_overlay{
    position: absolute;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;

    font-size: 35px;
    color: white;
    margin: 0;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
}

.wrapper {
    display: flex;
}

.wrapper section {
    padding: 0px;
    flex: 1;
    display: flex;
}

.wrapper section:last-child {
    margin-left: -45vw;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background: center/cover;
}

/* Modals */
.modal-content {
    border:rgba(var(--font-color-dark)) 1px solid;
    background-color: rgba(var(--background-light));
    color: rgba(var(--font-color-dark));
}

.modal-title {
    color: rgba(var(--font-color-light));
}

.modal-header {
    background-color: rgba(var(--background-dark));
    border-bottom-color: rgba(var(--font-color-dark));
}

.settings-label {
    color: rgba(var(--font-color-dark));
}

.dark-mode.modal-content {
    border:rgba(var(--font-color-light)) 1px solid;
    background-color: rgba(var(--background-dark));
    color: rgba(var(--font-color-light));
}

.dark-mode.modal-title {
    color: rgba(var(--font-color-light));
}

.dark-mode.modal-header {
    background-color: rgba(var(--background-dark));
    border-bottom-color: rgba(var(--font-color-light));
}

.dark-mode.settings-label {
    color: rgba(var(--font-color-light));
}

/* Cards */
.card {
    border:rgba(var(--font-color-dark)) 1px solid;
}

.card-header {
    background-color: rgba(var(--background-dark));
    border-bottom-color: rgba(var(--font-color-dark));
    color: rgba(var(--font-color-light));
}

.card-body {
    background-color: rgba(var(--background-light));
    color: rgba(var(--font-color-dark));
}

.dark-mode.card {
    border:rgba(var(--font-color-light)) 1px solid;
}

.dark-mode.card-header {
    background-color: rgba(var(--background-dark));
    border-bottom-color: rgba(var(--font-color-light));
    color: rgba(var(--font-color-light));
}

.dark-mode.card-body {
    background-color: rgba(var(--background-dark));
    color: rgba(var(--font-color-light));
}

/* Tables */
.table-background {
    background-color: rgba(var(--primary));
    color: rgba(var(--font-color-dark));
    border: 1px solid rgba(var(--font-color-dark));
}

.table-body {
    background-color: rgba(var(--tertiary))!important;
    color: rgba(var(--font-color-dark));
    border: 1px solid rgba(var(--font-color-dark));
}

.table-header {
    background-color: rgba(var(--primary))!important;
    color: rgba(var(--font-color-dark));
}

.dark-mode.table-background {
    background-color: rgba(var(--background-dark))!important;
    color: rgba(var(--font-color-light));
    border: 1px solid rgba(var(--primary));
}

.dark-mode.table-body {
    background-color: rgba(var(--background-dark))!important;
    color: rgba(var(--font-color-light));
    border: 1px solid rgba(var(--primary));
}

.dark-mode.table-header {
    background-color: rgba(var(--background-dark))!important;
    color: rgba(var(--font-color-light));
}

/*Buttons*/
.btn {
    color: rgba(var(--font-color-dark))!important;
    outline: 1px solid rgba(var(--font-color-dark));
}

.btn:hover {
    outline: 1px solid rgba(var(--font-color-dark));
}


.btn:focus {
    outline: 1px solid rgba(var(--font-color-dark));
}

.dark-mode.btn {
    color: rgba(var(--font-color-light))!important;
    outline: 1px solid rgba(var(--font-color-light));
}

.dark-mode.btn:hover {
    outline: 1px solid rgba(var(--font-color-light));
}


.dark-mode.btn:focus {
    outline: 1px solid rgba(var(--font-color-light));
}

.btn-outlineless {
    outline: none;
}

.btn-outlineless:hover {
    outline: none;
}

.btn-outlineless:active {
    outline: none;
}

.btn-outlineless:focus {
    outline: none;
}

.btn-outlineless:disabled {
    outline: none;
}

.dark-mode.btn-outlineless {
    outline: none;
}

.dark-mode.btn-outlineless:hover {
    outline: none;
}

.dark-mode.btn-outlineless:active {
    outline: none;
}

.dark-mode.btn-outlineless:focus {
    outline: none;
}

.dark-mode.btn-outlineless:disabled {
    outline: none;
}

.btn-lock-elements {
    background-color:rgba(var(--primary));
}

.btn-lock-elements:hover {
    background-color:rgba(var(--primary),0.5);
}

.btn-lock-elements:active {
    background-color:rgba(var(--primary))!important;
}

.btn-lock-elements:focus {
    outline: 1px solid rgba(var(--font-color-dark))!important;
    background-color:rgba(var(--primary));
}

.btn-lock-elements:disabled {
    background-color:rgba(var(--primary));
    opacity: 0.7;
}

.dark-mode.btn-lock-elements {
    background-color:rgba(var(--background-dark));
    outline: 1px solid rgba(var(--primary));
}

.dark-mode.btn-lock-elements:hover {
    background-color:rgba(var(--background-dark),0.5);
}

.dark-mode.btn-lock-elements:active {
    background-color:rgba(var(--background-dark))!important;
}

.dark-mode.btn-lock-elements:focus {
    outline: 1px solid rgba(var(--primary))!important;
    background-color:rgba(var(--background-dark));
}

.dark-mode.btn-lock-elements:disabled {
    background-color:rgba(var(--background-dark));
    opacity: 0.7;
}

.btn-reset-elements {
    background-color:rgba(var(--secondary));
}

.btn-reset-elements:hover {
    background-color:rgba(var(--secondary),0.5);
}

.btn-reset-elements:active {
    background-color:rgba(var(--secondary))!important;
}

.btn-reset-elements:focus {
    outline: 1px solid rgba(var(--font-color-dark))!important;
    background-color:rgba(var(--secondary));
}

.btn-reset-elements:disabled {
    background-color:rgba(var(--secondary));
    opacity: 0.7;
}

.dark-mode.btn-reset-elements {
    background-color:rgba(var(--background-dark));
    outline: 1px solid rgba(var(--secondary));
}

.dark-mode.btn-reset-elements:hover {
    background-color:rgba(var(--background-dark),0.5);
}

.dark-mode.btn-reset-elements:active {
    background-color:rgba(var(--background-dark))!important;
}

.dark-mode.btn-reset-elements:focus {
    outline: 1px solid rgba(var(--secondary))!important;
    background-color:rgba(var(--background-dark));
}

.dark-mode.btn-reset-elements:disabled {
    background-color:rgba(var(--background-dark));
    opacity: 0.7;
}

.btn-settings {
    background-color:rgba(var(--tertiary));
    vertical-align: middle;
}

.btn-settings:hover {
    background-color:rgba(var(--tertiary),0.5);
}

.btn-settings:active {
    background-color:rgba(var(--tertiary))!important;
}

.btn-settings:focus {
    outline: 1px solid rgba(var(--font-color-dark))!important;
    background-color:rgba(var(--tertiary));
}

.btn-settings:disabled {
    background-color:rgba(var(--tertiary));
    opacity: 0.7;
}

.dark-mode.btn-settings {
    background-color:rgba(var(--background-dark));
    vertical-align: middle;
    outline: 1px solid rgba(var(--tertiary));
}

.dark-mode.btn-settings:hover {
    background-color:rgba(var(--background-dark),0.5);
}

.dark-mode.btn-settings:active {
    background-color:rgba(var(--background-dark))!important;
}

.dark-mode.btn-settings:focus {
    outline: 1px solid rgba(var(--tertiary))!important;
    background-color:rgba(var(--background-dark));
}

.dark-mode.btn-settings:disabled {
    background-color:rgba(var(--background-dark));
    opacity: 0.7;
}

.btn-reset-page {
    background-color:rgba(var(--danger));
}

.btn-reset-page:hover {
    background-color:rgba(var(--danger),0.5);
}

.btn-reset-page:active {
    background-color:rgba(var(--danger))!important;
}

.btn-reset-page:focus {
    outline: 1px solid rgba(var(--font-color-dark))!important;
    background-color:rgba(var(--danger));
}

.btn-reset-page:disabled {
    background-color:rgba(var(--danger));
    opacity: 0.7;
}

.dark-mode.btn-reset-page {
    background-color:rgba(var(--background-dark));
    outline: 1px solid rgba(var(--danger));
}

.dark-mode.btn-reset-page:hover {
    background-color:rgba(var(--background-dark),0.5);
}

.dark-mode.btn-reset-page:active {
    background-color:rgba(var(--background-dark))!important;
}

.dark-mode.btn-reset-page:focus {
    outline: 1px solid rgba(var(--danger))!important;
    background-color:rgba(var(--background-dark));
}

.dark-mode.btn-reset-page:disabled {
    background-color:rgba(var(--background-dark));
    opacity: 0.7;
}

.btn-innate-tier {
    background-color:rgba(var(--background-dark));
}

.btn-innate-tier:hover {
    background-color:rgba(var(--background-dark),0.5);
}

.btn-innate-tier:active {
    background-color:rgba(var(--background-dark))!important;
}

.btn-innate-tier:focus {
    outline: 1px solid rgba(var(--font-color-dark))!important;
    background-color:rgba(var(--background-dark));
}

.btn-innate-tier:disabled {
    background-color:rgba(var(--background-dark));
    opacity: 0.7;
}

.dark-mode.btn-innate-tier {
    background-color:rgba(var(--background-dark));
    outline: 1px solid rgba(var(--background-light));
}

.dark-mode.btn-innate-tier:hover {
    background-color:rgba(var(--background-dark),0.5);
}

.dark-mode.btn-innate-tier:active {
    background-color:rgba(var(--background-dark))!important;
}

.dark-mode.btn-innate-tier:focus {
    outline: 1px solid rgba(var(--background-light))!important;
    background-color:rgba(var(--background-dark));
}

.dark-mode.btn-innate-tier:disabled {
    background-color:rgba(var(--background-dark));
    opacity: 0.7;
}

/* .plus-border {
    --b: 5px;
    --c: #0000 90deg,rgba(var(--font-color-dark)) 0;
    width: 6vw;
    aspect-ratio: 1;
    z-index: 2;
    vertical-align: middle;
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.plus-inner {
    --b: 4px;
    --c: #0000 90deg, rgba(var(--font-color-light)) 0;
    width: calc(6vw - 2px);
    align-self: center;
    aspect-ratio: 1;
    position: fixed;
    z-index: 3;
    vertical-align: middle;
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.dark-mode.plus-border {
    --c: #0000 90deg,rgba(var(--font-color-light)) 0;
}

.dark-mode.plus-inner {
    --c: #0000 90deg,rgba(var(--background-dark)) 0;
} */

.plus {
    --b: 5px;
    --c: #0000 90deg, rgba(var(--font-color-dark)) 0;
    width: 6vw;
    align-self: center;
    aspect-ratio: 1;
    z-index: 2;
    vertical-align: middle;
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.dark-mode.plus {
    --c: #0000 90deg,rgba(var(--font-color-light)) 0;
}

/* .minus-border {
    --b: 5px;
    --c: #0000 180deg,rgba(var(--font-color-dark)) 0;
    width: 6vw;
    aspect-ratio: 1;
    z-index: 2;
    vertical-align: middle;
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.minus-inner {
    --b: 4px;
    --c: #0000 180deg, rgba(var(--font-color-light)) 0;
    width: calc(6vw - 2px);
    align-self: center;
    aspect-ratio: 1;
    position: fixed;
    z-index: 3;
    vertical-align: middle;
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.dark-mode.minus-border {
    --c: #0000 180deg,rgba(var(--font-color-light)) 0;
}

.dark-mode.minus-inner {
    --c: #0000 180deg,rgba(var(--background-dark)) 0;
} */

.minus {
    --b: 5px;
    --c: #0000 180deg, rgba(var(--font-color-dark)) 0;
    width: 6vw;
    align-self: center;
    aspect-ratio: 1;
    z-index: 2;
    vertical-align: middle;
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.dark-mode.minus {
    --c: #0000 180deg,rgba(var(--font-color-light)) 0;
}

.close-x {
    --b: 5px;
    --c: #0000 90deg, rgba(var(--font-color-dark)) 0;
    width: 6vw;
    align-self: center;
    aspect-ratio: 1;
    z-index: 2;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background:
        conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
        calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
        calc(50%  + var(--b))   calc(50%  + var(--b));
}

.dark-mode.close-x {
    --c: #0000 90deg,rgba(var(--font-color-light)) 0;
}