:root{
  --background-color: #555;
  --pa-grey: #7e8184ff;
  --pa-red: #8e171bff;
  --white: #ffffffff;
  --btn-primary-bg-color: #4adbc8ff;
  --btn-primary-bg-color-hover: lch(from var(--btn-primary-bg-color) calc(l - 10) c h);
  --btn-primary-border-color: lch(from var(--btn-primary-bg-color) calc(l - 10) c h);
  --btn-primary-txt-color: lch(from var(--btn-primary-bg-color) calc(l - 60) c h); /*#222; */
  --primary-highlight-color: var(--btn-primary-bg-color);
  --primary-highlight-color-hover: lch(from var(--primary-highlight-color) calc(l - 10) c h);


  /* SCSS Gradient */
  /* $gradient-top: linear-gradient(0deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-right: linear-gradient(90deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-bottom: linear-gradient(180deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-left: linear-gradient(270deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-top-right: linear-gradient(45deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-bottom-right: linear-gradient(135deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-top-left: linear-gradient(225deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  $gradient-bottom-left: linear-gradient(315deg, #000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);
  gradient-radial: radial-gradient(#000000ff, #7e8184ff, #8e171bff, #ffffffff, #4adbc8ff);  */
}




body {
  background-color: var(--background-color);
  overflow:hidden;
}

.btn-primary {
  color: var(--btn-primary-txt-color);
  background-color: var(--btn-primary-bg-color);
  border-color: var(--btn-primary-border-color);
}

.btn-primary:hover {
  color: var(--btn-primary-txt-color);
  background-color: var(--btn-primary-bg-color-hover);
  border-color: var(--btn-primary-border-color);
}

.btn-primary:focus, .btn-primary.focus {
  color: var(--btn-primary-txt-color);
  background-color: var(--btn-primary-bg-color-hover);
  border-color: var(--btn-primary-border-color);
  box-shadow: 0 0 0 0.1rem var(--btn-primary-border-color);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: var(--btn-primary-bg-color);
  border-color: var(--btn-primary-border-color);
  opacity:.4;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: var(--btn-primary-txt-color);
  background-color: var(--btn-primary-bg-color-hover);
  border-color: var(--btn-primary-border-color);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.1rem var(--btn-primary-border-color);
}



pre {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}
.light-link {
  color:#96c9ff;
}
.nav-item {
  position: relative;
}
.nav-tabs .nav-link {
  color:black;
}
.nav-tabs .nav-link:hover {
  color:#444;
}
.center {
  text-align: center;
}
.finger {
  cursor:pointer;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}
.hidden{
display:none;
}
.search_bar_small {
display: none;
}
.hor_scroll {
flex-wrap:nowrap;
overflow-x:scroll;
overflow-y:hidden;
padding-left:50px;
}

@media (min-width: 375px){
.search_bar_small{
  display:block;
}
.search_bar_large{
  display:none;
}
}

@media (min-width: 700px){
.modal-lg, .modal-xl {
  max-width: 650px;
}
}
@media (min-width: 800px){
.modal-lg, .modal-xl {
  max-width: 750px;
}
}
@media (min-width: 992px){
.modal-lg, .modal-xl {
  max-width: 950px;
}
.search_bar_small{
  display: none;
}
.search_bar_large {
  display: block;
}
}
@media (min-width: 1650px){
.container {
max-width: 1600px;
}
}
@media (min-width: 2000px) {
.container {
  max-width: 1500px;
}
}

.full_container{
width: 100vw;
position:absolute;
top:65px;
bottom:0px;
left:0px;
right:0px;
overflow:auto;
}
.fixed-top{
width:100vw;
}

.navbar-collapse {
text-align: center;
}

#dashboard_container {
margin-top:0px;
padding-left:10px;
padding-right:10px;
padding-bottom: 50px;
width:fit-content;
margin-left:auto;
margin-right:auto;
}

.search_bar_container {
float: right;
margin-left: auto;
margin-right: 5px;
width: calc( 100% - (170px + 60px) );
max-width: 230px;
}

.column_header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--background-color);
margin-bottom: 0;
padding-bottom: .5rem;
width: calc(100% + 10px);
padding-right: 10px;
}

.modal{
color:black;
}


.main_modal_load_spinner {
width: 6rem;
height: 6rem;
margin-top: 10vh;
}

#main_modal .modal-header .close {
margin-left:-1rem;
}

#navbar_background_cover {
background-color: black;
opacity: 50%;
position: fixed;
width: 100vw;
height: 100vh;
z-index: 1000;
}


#tab_content {
height: calc(100vh - 56px - 63px - 42px - 35px);
}
@media (max-width: 576px){
#tab_content {
height: calc(100vh - 56px - 85px - 42px - 35px);
}
}
#tabs .nav-item .active {
background-color:#6c757d;
color:white;
border: none;
}

#tabs .nav-item {
border-top: 1px solid #6c757d;
border-right: 1px solid #6c757d;
border-left: 1px solid #6c757d;
border-top-right-radius: 9px;
border-top-left-radius: 9px;
}

.tab_container {
position:relative;
z-index:10;
}

.tab_container .tab_collapse .nav-item {
width:100%;
text-align:center
}

.tab_container .tab_collapse {
position: absolute;
background: white;
z-index: 10;
width: 100%;
}

.tab_container .tab-toggler {
display: inline-block;
margin-right: 0px;
margin-left: auto;
}

.tab_container #tab_header {
width: calc( 100% - 50px );
text-align:center;
}


@media (min-width: 1400px){
.tab_container .tab-toggler {
display: none;
}

.tab_container .tab_collapse .nav-item {
width:fit-content;
}

.tab_container .tab_collapse{
position:relative;
display: flex !important;
flex-basis: auto;
}

}

.icon_button{
padding:0;
border:none;
background:none;
}