html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: rgb(40, 50, 84);
  min-height: 100vh;
}

@font-face {
  font-family: "MonospaceTTF";
  src: url("/images/DejavuSans.ttf") format("truetype");
}

.impact-font {
  font-family: 'Arial';
  font-weight: normal;
  transition: color .4s ease-out, background-color .4s ease-out;
  color: rgb(13, 202, 240);
}

.impact-green {
  font-weight: normal;
  color: rgb(100, 255, 100);
}

a {
  color: white;
}

.app_panel input,
.app_panel textarea,
.app_panel .select2-selection {
  background: rgb(32, 33, 35);
  color: rgb(217, 217, 227);

}

.app_panel button.btn-toggle {
  color: rgb(230, 230, 230);
}

.app_panel input:focus,
.app_panel textarea:focus {
  background: rgb(32, 33, 35);
  color: rgb(217, 217, 227)
}

.app_panel {
  background: rgb(40, 50, 84);
  color: rgb(217, 217, 227);
  display: flex;
  flex-direction: column;
  transition: color .2s ease-out, background-color .2s ease-out, opacity .2s;
}

.basic_page_wrapper {
  text-align: center;
  margin: auto;
  min-width: inherit;
  box-sizing: border-box;
}

.navbar {
  text-align: left;
  background: rgb(32, 33, 35);
}

.card {
  background-color: rgba(127, 127, 127, .15);
}

.card_shadow_md {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)
}

.card_shadow_sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)
}


.dropdown-toggle {
  outline: 0;
}

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  background-color: transparent;
  border: 0;
}

.btn-toggle:hover,
.btn-toggle:focus {
  background-color: rgb(100, 100, 100);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb%28240,240,240%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}

.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: rgb(100, 100, 100);
}

.btn-check:focus+.btn,
.btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(150, 150, 150, .3);
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold {
  font-weight: 600;
}

.lh-tight {
  line-height: 1.25;
}

.flex_shrink_wrapper {
  overflow: auto;
  flex: 1;
}

.logged_in_status {
  text-align: left;
  white-space: nowrap;
  height: 2em;
  font-size: 20px;
  text-align: left;
  overflow: hidden;
}

.form-check {
  display: inline-block;
  text-align: left;
  font-size: 1.5em;
}

.signed_out_options {
  display: none;
}

.app_signed_out .signed_out_options {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  align-self: center;
  font-size: 1.25em;
  max-width: 90%;
}

.app_signed_in .hide_if_signedin {
  display: none;
}

.google_logo {
  width: 16px;
  height: 16px;
  vertical-align: unset;
}

@media (min-width: 768px) {
  .app_signed_out .signed_out_options {
    max-width: 630px;
  }
}

.select2-container .selection {
  width: 100%
}

.select2-container {
  font-size: 22px;
  margin: 1%;
}

.label_profile_picker {
  display: inline-block;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #5c636a;
}

.list-group-item {
  color: rgb(240, 240, 240);
}

.list-group-item-action:hover {
  background-color: rgb(50, 50, 50);
  color: rgb(240, 240, 240);
}

select.form-select {
  background-color: rgb(52, 53, 65);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb%28240,240,240%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

select.form-select option {
  background-color: rgb(52, 53, 65);
  color: rgb(230, 230, 230);
}

.app_panel .form-check-input {
  border-color: rgb(150, 200, 150);
}

.app_panel .form-check-input:checked {
  background-color: transparent;
  color: transparent;
}

.app_panel .form-check-input:hover,
.app_panel .form-check-input:focus {
  border-color: white;
  background-color: rgb(100, 100, 50);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: rgb(200, 255, 200);
  background-color: #5c636a;
  border-color: rgb(240, 240, 240);
  border-bottom-color: transparent;
}

.nav-tabs .nav-link {
  color: #fff;
}

.btn-check:checked+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary:hover,
.btn-outline-primary:hover {
  color: rgb(200, 255, 200);
  background-color: #5c636a;
  border-color: rgb(240, 240, 240);
}

.btn-outline-primary {
  color: rgb(240, 240, 240);
  background-color: rgb(52, 53, 65);
  border-color: rgb(240, 240, 240);
}

.btn-outline-primary:focus {
  border-color: white;
  border-width: 3px;
}

.btn-outline-primary:active {
  background-color: rgb(127, 127, 127);
}

button.btn-primary {
  background-color: #198754;
  border-color:#198754; 
}

button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active {
  background-color: #146c43;
  border-color: #13653f;
}

.app_panel input[type="range"] {
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background-color: rgb(127, 127, 127);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.app_panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgb(100, 100, 100);
  cursor: pointer;
  position: relative;
  top: -5px;
}

.app_panel input[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgb(100, 100, 100);
  cursor: pointer;
  position: relative;
  top: -5px;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus i,
.navbar-light .navbar-nav .nav-link:hover i,
.navbar-light .navbar-nav .nav-link:focus svg,
.navbar-light .navbar-nav .nav-link:hover svg {
  color: rgb(255, 255, 0);
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  background-color: rgb(120, 120, 120);
}

.mobile_custom_icon_label {
  display: inline-block;
}

.text-success {
  color: rgb(100, 255, 100) !important;
}

.navbar-brand img {
  width: 100px;
  position: relative;
  top: -4px;
}

.member_profile_name {
  position: relative;
  left: 6px;
}

.menu_profile_user_image_span {
  border-radius: 50%;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.menu_profile_user_name_span {
  max-width: 300px;
  overflow: hidden;
  top: 4px;
}

@media (min-width: 992px) {
  .menu_profile_user_image_span {
    float: none;
    display: inline-block;
  }

  .menu_profile_user_name_span {
    position: relative;
    top: 4px;
  }
}


.mobile_custom_icon_label i {
  top: 3px;
  position: relative;
  font-size: 36px;
}

.mobile_custom_icon_label .add_icon {
  font-size: 36px;
}

.shared_status_not {
  color: rgb(230, 230, 230);
}

.app_panel .btn.shared_status_withusers,
.shared_status_withusers,
.shared_status_withusers.hover_yellow {
  color: rgb(190, 100, 250);
}

.app_panel .btn.shared_status_withothers,
.shared_status_withothers,
.shared_status_withothers.hover_yellow {
  color: rgb(30, 200, 200);
}

.navbar-light .navbar-toggler {
  position: fixed;
  right: 4px;
  z-index: 1000;
  top: 4px;
  color: rgb(230, 230, 230);
}


.navbar-light .navbar-toggler span {
  font-size: 2em;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-brand {
  color: rgb(230, 230, 230);
}

.hover_yellow {
  color: rgb(230, 230, 230);
}

.btn.btn-secondary.hover_yellow:focus,
.btn.btn-secondary.hover_yellow:hover,
.hover_yellow:focus,
.hover_yellow:hover {
  background-color: rgb(0,0,0);
  border-color: transparent;
  color: white;
}

.menu_dropdown_label_wrapper {
  white-space: nowrap;
  font-size: 1.25em;
  position: relative;
  top: -6px;
}

.menu_dropdown_label_wrapper.member_profile_name {
  top:0px;
}

.show_dashboard_help_button i,
.show_document_options_help i {
  position: relative;
  top: 2px;
  float: left;
}

.nav-link.dashboard_create_game .menu_dropdown_label_wrapper {
  position: relative;
}

.nav-link.show_create_modal.homepage {
  display: inline-block;
  top: 6px;
  position: relative;
}

.nav-link.dashboard_create_game_mobile.hover_yellow i,
.nav-link.dashboard_create_game.hover_yellow i,
.nav-link.show_create_modal.hover_yellow i {
  position: relative;
}

.nav-link.dashboard_create_game_mobile.hover_yellow:hover i,
.nav-link.dashboard_create_game.hover_yellow:hover i,
.nav-link.show_create_modal.hover_yellow:hover i {
  color: rgb(255, 255, 255);
}

.hover_yellow:hover svg,
.hover_yellow:hover i {
  color: rgb(255, 255, 255);
}

a.hover_yellow.show_dashboard_help_button:hover i,
a.hover_yellow.show_document_options_help:hover i {
  color: rgb(255, 255, 255);
}

.navbar .navbar-toggler span.hamburger_span,
.navbar-toggler span.hamburger_span {
  width: 44px;
  height: 44px;
  background-size: contain;
  background-position: center center;
  background-image: url('/images/logo64.png');
  display: inline-block;
  position: relative;
}

.menu_bar_doc_title_wrapper {
  display: flex;
  height: 3em;
  overflow: hidden;
  width: 100%;
}

.menu_bar_mobile_spacer {
  width: 80px;
}

@media (min-width: 992px) {
  .mobile_bar_button_wrapper {
    display: none;
  }

  .menu_bar_doc_title_wrapper {
    display: none;
  }
}

body {
  visibility: hidden;
  padding-right: 0px!important;
}

body.body_loaded {
  visibility: visible;
}

table.number {
  text-align: right;
}

table.number td {
  font-family: "MonospaceTTF";
  padding-left: 8px;
}

table.number th {
  font-weight: normal;
}

.creating_new_session .btn.btn-primary.create_game_afterfeed_button {
  background-color: transparent;
}

.navbar-nav .nav-link {
  height: 100%;
}

.signed_out_options_block {
  display: none;
  height: 0;
}

.app_signed_out .signed_out_options_block {
  display: block;
  height: unset;
}

.app_signed_out .signed_out_options_list_item {
  display: list-item;
}

.signed_in_options,
.main_container .flex_change_responsive.signed_in_options {
  display: none;
}

.app_signed_in .signed_in_options {
  display: block;
}

.app_signed_in .main_container .flex_change_responsive.signed_in_options {
  display: flex;
}

.signed_in_inline_block,
.signed_in_inline_block,
.signed_out_inline_block {
  display: none;
}

.app_signed_in .signed_in_inline_block,
.app_signed_out .signed_out_inline_block {
  display: inline-block;
}

.signed_in_list_item {
  display: none;
}

.app_signed_in .signed_in_list_item {
  display: list-item;
}

.signed_out_list_item {
  display: none;
}

.app_signed_out .signed_out_list_item {
  display: list-item;
}

div.signed_in_flex {
  display: none;
}

.app_signed_in div.signed_in_flex {
  display: flex;
}

div.signed_out_flex {
  display: none;
}

.app_signed_out div.signed_out_flex {
  display: flex;
}

a:hover {
  color: yellow;
}