@media only screen and (max-width 767px) {
  .content-wrapper{
    padding-top: 100px !important;
  }
}

:root {
  --darkest: #71d3aa;
  --darker: #e4e4e4;
  --dark: #d5d5d5;
  --bright: #209162;
  --brighter: #1e282c;
}


body{
  color: var(--brighter);
  font-family: 'Montserrat Alternates', sans-serif !important;
  min-height: calc(100vh);
  background-color: var(--dark);
}

.header_tools_container{
  position: fixed;
  display: block;
  top: 0px;
  right: 0px;
  z-index: 1100;
  transition: .2s;
}

.header_tools_container .glyphicon-user{
  z-index: 900;
  padding: 17px;
  border-left: 2px solid var(--dark);
  transition: .2s;
}

.header_tools{
  border-left: 2px solid var(--dark);
  padding: 0 17px;
  transition: .2s;
  display: block;
  position: fixed;
  top: 0px;
  right: -500px;
  z-index: 1100;
}

.header_tools >*{
  transition:.2s;
  float: right;
}

/* dark mode switch */
body > div.wrapper > div > section > div.header_tools_container > div > div.form-group.shiny-input-container{
  margin:15px 0px;
  width: 150px !important;
}

#manage_plan_ui{
  margin:0;
  padding:0;
}

#manage_plan_ui a,
#signout{
  margin: 8px 12px !important;
  width: 125px !important;
}

#manage_plan_ui a{
  width: 100%;
}


button.firebaseui-button{
  width: 50%!important;
}

.plans{
  display: flex;
  justify-content: center;
}

.plans_container{
  text-align: center;
  display: flex;
  flex-direction: column;
}

.plans_container>*{
  margin: 15px;
}

.plan{
  text-align: center;
  margin: 10px;
}

ul.plan{
  width: 300px;
  box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.3) !important;
  padding: 0;
}

ul.plan li{
  list-style-type:none;
  height: 50px;
  border: 0px solid rgb(82, 82, 82);
  width: 100%;
  padding: 10px;
  background-color: var(--brighter);
  color: var(--dark);
  transition: .2s;
  font-size: 1.2em;

}

ul.plan li:hover{
  background-color:var(--darkest);
  color: var(--bright);
}

ul.plan li.plan_header{
  background-color: var(--dark);
  color: var(--brightest);
  font-size: 1.5em;
  height: 50px;
}

ul.plan li.plan_price{
  letter-spacing: 2px;
}

ul.plan li.plan_payment_link a{
  display: block;
  width: 100%;
  height: 40px;
}

ul.plan li.plan_payment_link{
  background-color:var(--darkest);
  color: var(--bright);
  transition: .2s;
}


ul.plan li.plan_payment_link:hover{
  color:var(--darkest) !important;
  background-color: var(--dark);
}

.logo,
span.logo-lg {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800 !important;
}

.span_logo{
  font-weight: 800 !important;
}

.header3,
h1,h2,h3,
.main-header {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 600 !important;
}


span.logo-lg{
  display: block;
  margin: auto;
  text-align: center !important;
}

.header3{
  text-transform: uppercase;
  margin: 0px auto 10px;
}

hr{
  margin: 10px;
  border-top: 1px solid rgba(213 213 213,1);
}

tr.odd{
    background-color: var(--dark) !important;
}
tr.even{
    background-color: var(--darker) !important;
}

tr.odd,
tr.even{
  color: var(--brighter);
}

tr.selected{
  color: var(--darker) !important;
}

div.dataTables_length label,
div.dataTables_length select{
  color: var(--brighter) !important;
}

/* thead tr th{ */
thead tr{
  background: var(--dark) !important;
  color: var(--brighter) !important;
}

thead tr th{
  transition: .2s;
}
thead tr th:hover{
  color: var(--dark) !important;
  background: var(--brighter) !important;
}

h2,
h3{
  text-align: center;
}

.ht__highlight div.relative{
  color: var(--bright) !important;
}
.handsontable{
  font-size: 0.9em;
}

td.highlight.listbox.htDimmed.current{
  color: var(--bright) !important;
}

th{
  background-color: var(--darkest) !important;
}

button{
  width: 100%;
}

#save,
button{
    margin: 5px auto !important;
}

#model_table_ui button,
#model_table_ui #save{
  width: 90%;
}

.dataTables_info,
.dataTables_filter label{
  color: var(--brighter) !important;
}

code{
  color: var(--dark);
  background-color: var(--brighter);
}

a{
  color: var(--bright);
  transition: .2s;
}


.main-footer{
  background: var(--darker);
  color: var(--brighter) !important;
}

.btn{
  background-color: var(--darkest) !important;
  color: var(--brighter) !important;
  transition: 0.2s !important;
  border: 1px solid var(--dark);
  box-shadow: 1px 2px 1px rgba(0,0,0,0.2) !important;
}
.btn:hover{
  background: var(--brighter) !important;
  color: var(--darkest) !important;
}

button.btn-box-tool{
  margin: 2px;
  /* border: 1px solid var(--brighter) !important; */
}

header.main-header{
  position: fixed;
  width: 100%;
}

#sidebarCollapsed{
  position: fixed;
}

.content-wrapper{
  padding-top: 50px;
  min-height: calc(100vh) !important;
  background-color: var(--dark);
}

.content{
  background-color: var(--dark);
}

.control-sidebar-tabs {
  display:none;
}

.box-header.with-border{
      border-bottom: 1px solid var(--dark);
}

.box{
  background-color: var(--darker);
  color: var(--brighter);
}

.box-title{
  color: var(--brighter) !important;
}

.box-body h3{
  font-size: 15px;
  margin: 0;
}

.box-tools{
  width: 45% !important;
}

.box-tools button{
  height: 25px;
}

.sidebar-menu{
    margin-top: 4px;
}

.sidebar-menu .active a{
    border-radius: 0 3px 3px 0;
}

.well,
.sidebar-menu .active a,
#sidebarCollapsed,
.box,
.logo,
.navbar-static-top{
  box-shadow: 1px 2px 1px rgba(0,0,0,0.2) !important;
}

::selection {
  background-color: var(--bright);
  color: var(--darker);
}
::-moz-selection {
  background-color: var(--bright);
  color: var(--darkest);
}

.logo svg g{
  fill: var(--brighter) !important;
  stroke: var(--brighter) !important;
}

.logo,
.sidebar-toggle,
.navbar{
  color: var(--brighter) !important;
  background-color: var(--darker) !important;
  border-color: var(--dark) !important;
  border-right-width: 2px !important;
}

ul.nav-pills{
      display: flex !important;
      justify-content: center !important;
}

.nav-pills li a{
  font-size: 1.4em;
  transition: .1s;
  color: var(--brighter);
}
.nav-pills li.active a{
  border-top: 3px solid #afafaf !important;
  background: var(--darker) !important;
  color: var(--brighter) !important;
}
.nav-pills li a:hover{
  border-top: 3px solid #afafaf !important;
  background: var(--darker) !important;
}

#model_table_ui .row div{
  padding-right: 0;
}

.handsontable th,
.handsontable td{
  border-color: var(--darker) !important;
  color: var(--brighter) !important;
  margin: 0 !important;
}
.handsontable tr td{
  background-color: var(--dark);
}

.listbox:hover{
  background-color: var(--dark);
  color: var(--brighter) !important;
}

.dataTables_length select{
  color: black;
}

table.dataTable.display tbody td{
  border-top: 0px !important;
}

.trans_test_ui .well{
  top: 70px !important;
}

/* .plotly text{
  fill: var(--brighter) !important;
} */

.selectize-input::after{
  border-color: var(--brighter) !important;
}

.selectize-dropdown,
.selectize-input{
  background-color: var(--dark) !important;
  color: var(--brighter) !important;
  border: 1px solid var(--dark) !important;
  box-shadow: 1px 2px 1px rgba(0,0,0,0.2) !important;
}

input[type='number'],
input[type='text']:not(.shiny-colour-input){
  border-left: 1px solid var(--brighter) !important;
  background-color: var(--dark) !important;
  color: var(--brighter) !important;
  border: 1px solid var(--dark);
  box-shadow: 1px 2px 1px rgba(0,0,0,0.2) !important;
}

.dataTables_wrapper table{
  margin-top: 10px !important;
}
#data_summary th{
  display: none;
}

.charts_ui hr{
  margin: 30px;
}

#charts_ui > div.col-sm-8 > div > div.box-body{
  height: calc(100vh - 100px);
  overflow-x: hidden;
  overflow-y: scroll;
}

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
  height: 10px;
  width: 10px;  
  background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: var(--darkest);
}

.well{
  background-color: var(--darker) !important;
  border: 0px solid black;
  color: var(--brighter) !important;
}


.well h3{
  text-align: center;
  margin: 10px 0 15px;
  font-size: 2em;
}

.loader {
  min-height: 40px !important;
}

#custom_trans_plot{
  position: fixed;
  top:57px;
  width: 62% !important;
}

div.wtHider{
  margin: 0 auto;
}

.disabled_switch::before{
  opacity: 0.1 !important;
}

/* Backups */

#download_model_backup{
  display: flex;
  justify-content: center;
  padding: 30px;
}

/* Optim */

#download_plan_ui{
  display: flex;
  justify-content: center;
  padding: 30px;
}

/* COLORS: */

button.btn.radiobtn.btn-default.active{
  color: var(--dark) !important;
  background-color: var(--bright) !important;
}


/*
#636363
#b400da
#ff006e
#6a000d
#ff5c00
#fff200
#8f9d35
#33eea0
#006a53
#143fba
*/


/* :root { */
  /* dark */
  /* --darkest: #151c1f;
  --darker: #1E282C;
  --dark: #222d32;
  --bright: #209162;
  --brighter: #b8c7ce; */

  /* lite */
  /* :root {
    --darkest: #cfcfcf;
    --darker: #e4e4e4;
    --dark: #d5d5d5;
    --bright: #222d32;
    --brighter: #1e282c;
  } */


  /* extra bright */
  /* --darkest: #00b2ff;
  --darker: #ff0909;
  --dark: #00ff57;
  --bright: #fbb53e;
  --brighter: white; */

  /* basic */
  /* --darkest: #888888;
  --darker: #ffffff;
  --dark: #ffffff;
  --bright: #fbb53e;
  --brighter: #000000; */

  /* seppia */
  /* --darkest: #7d776c;
  --darker: #e4e4e4;
  --dark: #cdd1ab;
  --bright: #462400;
  --brighter: #222d32; */


  /* google */
  /* --darkest: #34A853;
  --darker: #FFFFFF;
  --dark: #F8F9FA;
  --bright: #FBBC05;
  --brighter: #000000; */

/* } */