/* Load Nunito font
Currently loading all weights; should cut back for improved latency
This method downloads each time it is needed
Note that it can also be downloaded at https://fonts.google.com/specimen/Nunito
For embedding or use in the outputs
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Creepster');

:root {
  --blue: #1119a3;
  --darkgray: #060606;
  --neongreen: #24ea19;
}

/* ************************************************************************************************** *\
   **************************************************************************************************
   
    NOTE:
    css/scaffolding.less in the bootstrap folder is setting lots of overarching element details
    One important one is that it is setting the html{} base including font-size: 10px,
    which overrides browser defaults,
    This approach resets it to respect the browser font-size setting as a base

   **************************************************************************************************
\* ************************************************************************************************** */

html {
  font-size: 100%;
}


/* This is the settings for all of the icons on buttons*/
button span.material-symbols-outlined {
  /* Set color in the action-button class for more consistency */
  /* background-color: #1119a3; 
  color: #24ea19; */
  font-size: 1.5rem;
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 200
}


/* This is the settings for all of the icons in the tab panel*/
li a span.material-symbols-outlined {
  /* Set color in the action-button class for more consistency */
  /* background-color: #1119a3; 
  color: #24ea19; */
  font-size: 1.25rem;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 200
}


body {
  background-color: #fff;
  color: #111; /* text color*/
  font-family: 'Nunito', sans-serif;
  font-size: 1.125rem; /* 18px if browser default is 16px but still respects user settings */
  font-weight: 500;
}


/* I HATE using important here, but I am struggling to override the other Settings
   May need to keep this in mind when adjusting several elements in this way
*/
.form.control, .selectize-input, .selectize-dropdown, .shiny-input-text, textarea, .btn {
  font-size: 1.125rem !important; /* 18px if browser default is 16px but still respects user settings */
}


strong {
  font-weight: 850;
}

hr {
  border-top: 4px solid black;
  /*height: 0px;
  border-radius: 2px;*/
}


hr.within-section {
  border-top: 2px solid black;
  /*height: 0px;
  border-radius: 2px;*/
}

/* Settings for the background of the tab panel area*/
.navbar{
  background-color: var(--darkgray); /*var(--blue); */
  border-radius: 15px;
  display: flex;
  margin: 0;
}

/* Settings for the page title*/
.navbar-default .navbar-brand {
    color: var(--neongreen); /*white;*/
    font-size: 2.5rem; /* 40px if browser default is 16px but still respects user settings */
    margin-top: 6px;
    font-family: 'Creepster', cursive;
    /*font-weight: 1000; /* To bold the text*/
    &:hover,
    &:focus {
  color: var(--neongreen);
}
}

.container-fluid>.navbar-header{
  margin-right: 0px;
  margin-left: 0px;
  text-align: center;
  width: 100%;
}


.navbar > .container-fluid .navbar-brand{
  width: 100%;
  text-align: center;
}





/* Settings for the boxes around tab panel titles*/
.nav>li {
    background-color: var(--darkgray); /*var(--blue); */
    border: 0px solid white; 
    /*
     OLD version that had pink outline
     background-color: #1924ea;
     border: 3px solid #df19ea; 
    */
    margin: 4px;
    border-radius: 15px;
    overflow: hidden; /* Ensures that the internal element is clipped in corner*/
}



/* Settings for the text in the NON-SELECTED tab panel titles
the default color is set in a instead of li, so overrides*/
.navbar-default .navbar-nav>li>a,
.tabbable .nav-pills>li>a {
    /* Default is #777*/
    color: #eee;
    
}

/* Settings for the hover color of NON-SELECTED tab panel titles*/
.navbar-default .navbar-nav>li>a:hover,
.tabbable .nav-pills>li>a:hover {
  color: #df19ea; /* black */
  background-color: #444; /*var(--blue); */
  text-shadow:
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,  
    -2px 0 0 #000000,
    2px 0 0 #000000,
    0 2px 0 #000000,
    0 -2px 0 #000000;
}



/* Settings for the SELECTED tab panel titles*/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.tabbable .nav-pills>.active>a, .tabbable .nav-pills>.active>a:focus, .tabbable .nav-pills>.active>a:hover{
    /* These are the defaults; have not changed them yet*/
    color: #111; /* #555 */
    background-color: #e7e7e7;
    text-shadow: 0px 0px #111;
}

div.tabbable {
  text-align: center;
}

div.tabbable div.tab-content{
  text-align: left;
}


div.tabbable ul.nav-pills {
  background-color: var(--darkgray); /*var(--blue); */
  display: inline-block !important; /* !important needed to override !important css setting from webkit-flex */
  text-align: center;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 12px;
}

/* Change the padding around the page to not lose space
   This is viable because the section divs are now adding the space instead*/
.container-fluid {
    padding-right: 5px;
    padding-left: 5px;
    margin-right: auto;
    margin-left: auto;
}


/* Set rows to align at the bottom*/
.row {
    display: flex;
    flex-flow: column nowrap;
    flex-direction: row;
    align-items: flex-end;
}


/* Set action button colors */
.action-button, .bslib-task-button{
  background-color: var(--darkgray); /*var(--blue); */
  color: var(--neongreen);
  border-radius: 12px;
}


.action-button:hover, .action-button:focus, .action-button:active,
.bslib-task-button:hover, .bslib-task-button:focus, .bslib-task-button:active,
.bslib-task-button:disabled:hover, .bslib-task-button:disabled:focus, .bslib-task-button:disabled:active{
  background-color: var(--neongreen);
  color: var(--darkgray); /*var(--blue); */
}

/*******************************************************
**** Get select, text, and action buttons to lineup ****
*******************************************************/

/* Set bottom margin of all containers */
.shiny-input-container, .action-button, , .bslib-task-button {
  margin-bottom: 11px !important;
}

/* Subtract off 5 px from the bottom of selectize inputs
   I'm not sure where it comes from, but there are are an extra 5 px on these
*/
.selectize-control {
  margin-bottom: -5px !important;
}





/* Ones I had set before */
.bucket-list-header {font-weight: bold;}
.rank-list-title {
  font-weight: bold;
  font-size: 1.25rem; /* 20px if browser default is 16px but still respects user settings */
  margin: 0px;
}
.bucket-list-container {min-height: 25px;}
.container-fluid {max-width: 1200px;}


.datatables {
  background-color: #fff;
  padding: 5px;
  margin: 5px;
}

.my-shiny-table {
  background-color: #fff;
  padding: 5px;
  margin: 5px;
}

.lineup-section {
  background-color: #f1f1f1;
  border-radius: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

.lineup-subsection {
  background-color: #d8d8d8;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

.lineup-subsubsection {
  background-color: #f9f9f9;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}


/* Set the rules for all rows; likely just vertical alignment*/
/* Does not seem to be working the way I want */
/*
.row {
   display: table-cell;
   vertical-align: middle;
}
*/





/* Apparently need both rules applied here to equal specificity, then div. to override */


/* This is setting the inner-most boxes where the items are placed  */
.default-sortable div.rank-list{
  background-color: #fff;
}


/* This is setting the items (players) tiles themselves*/
.default-sortable .rank-list-container .rank-list-item {
  padding: 5px;
  margin: 5px;
  background-color: #c8c8c8;
  color: black;
  border: 1px solid black;
  border-radius: 8px;
  /* Previous version */
  /* padding:5px;
  margin:5px;
  background-color: #eee;
  color: black; */
}


/* This is setting the box that goes around the position title and the boxes for placement */
/* NOTE: need the div. to override the css set for them by default*/
div.default-sortable.rank-list-container{
  background-color: var(--darkgray); /*var(--blue); */
  color: white;
  border-radius: 12px;
  border-color: black;
  padding: 2px;
}


/* This is setting the empty containers so they don't look different*/
.default-sortable div.rank-list.rank-list-empty {
    border-style: none;
    /* border-color: #ddd; */
}


/* This is the setting that controls a bucket list (set of rank_lists) */
/* Default is transparent bg and I mostly just wanted to adjust spacing */
div.default-sortable.bucket-list-container {
  padding: 1px;
  margin: 3px;
}



button.create_button {
  color: var(--neongreen);
  background-color: var(--darkgray); /*var(--blue); */
  border-radius: 15px;
  padding: 10px;
  margin: 6px;
}

div.create_table table tr td{
  vertical-align: middle;
}


.button_row {
  display: flex;
  justify-content: space-between;
}



/* Formatting for tables within modals*/
.modal-table {
  border-collapse: collapse;
}

.modal-table th, td {
  padding: 2px 6px 2px 6px;
}

.modal-table th {
 border-bottom: 2px solid gray;
}

.modal-table tr {
 border-bottom: 1px solid gray;
}

.modal-table tr:last-child {
 border-bottom: none;
}


.modal-table-div {
  overflow: auto;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 650;
}


.navbar-default .navbar-toggle {
  border-color: var(--neongreen);
  position:absolute;
  top: 0px;
  right:0px;
  &:hover, &:focus{
    background-color: var(--darkgray);
  }
  .icon-bar {
    background-color: var(--neongreen);
  }
}


.container-fluid ul.nav-underline {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  float: none;
  display: block !important; /* !important needed to override !important css setting from bslib; Note needed container-fluid as well to get more specific */
}

.navbar-nav>li {
  float: left;
}

.test-holder {
  padding-right: 15px;
  padding-left: 15px;
  display: inline;
}


#curr_team-label {
  display: none;
}



.header-add-width {
  line-height: 0px;
  margin: 0;
  color: white;
  color: rgba(1, 1, 1, 0);
}

.header-add-width p {
  line-height: 0px;
  margin: 0;
}

.header-holder hr {
  margin: 0;
}

.header-holder h2 {
  margin: 0;
}