:root {
    --shade-0-rgb: 0,0,0;
    --shade-0: rgba(var(--shade-0-rgb),1.0);
    --shade-1-rgb: 22,22,24;
    --shade-1: rgba(var(--shade-1-rgb),1.0);
    --shade-2-rgb: 33,33,36;
    --shade-2: rgba(var(--shade-2-rgb),1.0);
    --light-0-rgb: 255,255,255;
    --light-0: rgba(var(--light-0-rgb),1.0);
    --light-1-rgb: 129,129,129;
    --light-1: rgba(var(--light-1-rgb),1.0);
    --sb-bg-rgb: 30,30,30,1.0;
    --sb-bg: rgba(var(--sb-bg-rgb),1.0);
    --page-bg-rgb: 220,220,220;
    --page-bg: rgba(var(--page-bg-rgb),1.0);

    --accent-0-rgb: 226,26,50;
    --accent-0: rgba(var(--accent-0-rgb),1.0);
    --accent-1-rgb: 176,30,45;
    --accent-1: rgba(var(--accent-1-rgb),1.0);
    --accent-2-rgb: 128,38,40;
    --accent-2: rgba(var(--accent-2-rgb),1.0);

    --bs-font-sans-serif: 'Urbanist';

    --corner-radius: 1rem;
}

body{
    background: var(--shade-0);
}

.main-content{
    --radius: var(--corner-radius);
    -webkit-border-top-left-radius: var(--radius);
    -webkit-border-bottom-left-radius: var(--radius);
    -moz-border-radius-topleft: var(--radius);
    -moz-border-radius-bottomleft: var(--radius);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    background: var(--shade-0);
    background: linear-gradient(180deg, var(--shade-2) 0%, var(--shade-1) 8rem);
    margin-top: calc(var(--radius)*0.75);
    margin-bottom: calc(var(--radius)*0.75);
}

@media screen and (max-width: 575px) {
    .nav{
        --bs-nav-link-padding-y: 0.125rem;
        --bs-nav-link-padding-x: 0.5rem;
    }
}

#bg-stretcher{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--shade-0);
    z-index: -1;
}

#bg-stretcher>div.bg-right{
    --radius: var(--corner-radius);
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: calc(100% - var(--radius)*1.5);
    background: var(--shade-0);
    background: linear-gradient(180deg, var(--shade-2) 0%, var(--shade-1) 8rem);
    margin-top: calc(var(--radius)*0.75);
    margin-bottom: calc(var(--radius)*0.75);
}

.tab-content{
    width: 100%!important;
}

.tab-actions{
    width: auto;
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--accent-0-rgb),var(--bs-text-opacity))!important;
}

.tcolor-0{
    color: var(--light-0);
}

.tcolor-1{
    color: var(--light-1);
}

.sb-link{
    color: var(--light-1);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.nav-link:focus, .nav-link:hover {
    color: var(--light-0);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--light-0);
    background-color: var(--accent-0);
}

.tcinput{
    color: inherit;
}
.tcinput:hover{
    cursor: pointer;
    color: blue;
    font-weight: 800;
}
.tcinputMod{
    position: fixed;
    top: 2.5rem;
    /* height: 80vh; */
    /* width: 80vw; */
    left: 50%;
    transform: translate(-50%,0);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-inline: 1rem;
    padding-block: 1rem;
    gap: 1rem;
}
.tcinputBackdrop{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: hidden;
    background: rgba(0,0,0,.5);
}
.modText{
    width: 90vw;
    max-width: 800px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-0);
    --bs-btn-border-color: var(--accent-0);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-1);
    --bs-btn-hover-border-color: var(--accent-2);
    --bs-btn-focus-shadow-rgb: 226 , 26 , 50;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-2);
    --bs-btn-active-border-color: var(--accent-2);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--accent-0);
    --bs-btn-disabled-border-color: var(--accent-0);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-0);
    --bs-btn-border-color: var(--accent-0);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-0);
    --bs-btn-hover-border-color: var(--accent-0);
    --bs-btn-focus-shadow-rgb: 226 , 26 , 50;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-0);
    --bs-btn-active-border-color: var(--accent-0);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--accent-0);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--accent-0);
    --bs-gradient: none;
}

.tab-heading{
    color: var(--light-0);
    align-self: start!important;
    font-size: 2rem;
    line-height: 1.6rem;
    /* text-transform: uppercase; */
    /* font-stretch: extra-condensed; */
    letter-spacing: -.025rem;
    /* font-weight: 600;*/
    margin-top: .5rem;
    margin-bottom: 1.3rem;
}

.tab-heading::after{
    display: block;
    white-space: pre;
    content: "_";
    color: var(--light-0);
    margin-top: -1.75rem;
    margin-left: -0.1rem;
    /* width: 2rem; */
    font-size: 4rem;
    font-weight: 200;
}

.tab-heading-line{
    align-self: start!important;
    margin-top: -0.75rem;
    width: 2rem;
    height: 0.175rem;
    background-color: var(--light-0);
    opacity: 75%;
}

.table-dark{
    --bs-table-color: var(--light-1);
    --bs-table-bg: rgba(0,0,0,0);
    --bs-table-border-color: var(--shade-2);
    --bs-table-striped-bg: var(--shade-1);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: var(--accent-2);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: var(--accent-1);
    --bs-table-hover-color: #fff;
    color: var(--light-0);
    border-color: var(--accent-2);
}

.table-dark td{
    word-break: break-all;
}

.list-group-item {
    --bs-list-group-color: var(--light-1);
    --bs-list-group-bg: var(--shade-2);
    --bs-list-group-border-color: var(--accent-1);
}

.bg-shade-0 {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--shade-0-rgb),var(--bs-bg-opacity))!important;
}

.bg-accent-1 {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--accent-1-rgb),var(--bs-bg-opacity))!important;
}

.bg-accent-2 {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--accent-2-rgb),var(--bs-bg-opacity))!important;
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--accent-1-rgb),var(--bs-border-opacity))!important;
}

.screen-container{
    padding: 0;
    max-width: 960px;
    background: var(--accent-0);
    position: relative;
}

.screen-configure{
    padding: 0;
    max-width: 960px;
    position: relative;
}

.screen-bg{
    padding: 0;
    display: block;
    position: absolute;
    background: rgba(255,255,255,.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.screen-window, .overlay-window{
    padding: 0;
    display: block;
    position: absolute;
    background: rgba(0,0,0,.5);
    border: 2px solid #fff;
}

div.spinnercon{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: rgba(0,0,0,.5);
}

.spinner {
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    & .path {
        stroke: var(--accent-0);
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
      }
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}