/*
 * Globals
 */

:root {
  /* Typeface */
  --font-family-primary-rm: 'Montserrat', sans-serif;
  --font-family-secondary-rm: 'Open Sans', sans-serif;

  /* Pallete */
  --bg-color-rm: #1a1a1a;
  --font-family-primary-rm: #fff;
  --font-color-muted-rm: #c5c5c5;

  --color-primary-rm: #007cc4;
  --color-primary-muted-rm: #d2e8ff;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: var(--color-primary-rm);
}

/* Typeface */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-family-primary-rm);
}

p,
a,
li {
  font-family: var(--font-family-primary-rm);
}

/* Links */

a,
a:focus,
a:hover {
  color: var(--color-primary-muted-rm);
}
/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: var(--bg-color-rm);
}

body {
  display: -ms-flexbox;
  display: flex;
  color: var(--font-family-primary-rm);
  /* text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5); */
}

input,
select,
textarea {
  border-radius: 17px !important;
}

.form-control {
  border: 0px solid #ced4da;
}

.form-control:disabled {
  background-color: #141414;
}

code {
  color: #e15636;
}

.jn-bg-dark {
  background-color: #202020;
}

/* Global Modal Styles */
.modal-content {
  background-color: #2b2929;
}

.close {
  text-shadow: none;
  color: #747e8a;
}

.jn-muted-bg {
  background-color: var(--color-primary-muted-rm) !important;
}

.jn-text-body {
  font-size: 1.1rem;
  font-weight: 300;
}

.jn-active {
  background-color: var(--color-primary-rm) !important;
  border-color: var(--color-primary-rm) !important;
  color: #fff !important;
  font-weight: bold;
}

.jn-subheading {
  width: 70%;
}

/* Core UI Inputs */

.btn {
  padding: 0.65rem 1rem;
}

.btn-secondary {
  background-color: var(--color-primary-rm);
  border-color: var(--color-primary-rm);
}

.form-control:focus {
  /* border-color: var(--color-primary-rm); */
  /* border-width: 1px; */
  box-shadow: 0 0 0 0.2rem var(--color-primary-rm);
}

.cover-container {
  max-width: 66em;
}

.cover-heading {
  font-size: 3rem;
}

#splash-screen-section {
  min-width: 80vw;
  margin: auto;
}

#primary-content-section {
  margin-left: auto;
  margin-right: auto;
}

/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand,
.splash-brand {
  margin-bottom: 0;
  font-family: 'Libre Barcode 128 Text', cursive;
  font-size: 3rem;
  color: #fff;
}

.brand-hilight,
.masthead-brand span,
.splash-brand span {
  color: #90bef1;
}

.nav-masthead .nav-link {
  padding: 0.25rem 0.5rem;
  font-weight: 500;
  color: var(--font-color-muted-rm);
  background-color: transparent;
  border-bottom: 0.25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

#nav-user-display-pic {
  max-width: 27px;
  border-radius: 50%;
  margin-right: 3px;
}

#user-profile-menu {
  padding-left: 0.5rem;
  font-size: 0.8rem;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}

/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}

/* Builder */
.rm-builder {
  width: 80%;
  margin: 0 auto;
}

/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, 0.5);
}

/* Info Icon */
.fa-info-circle {
  padding-left: 0.25rem;
  color: var(--font-color-muted-rm);
}
.popover,
#rm-inject-modal {
  color: #3f3f33;
}

#rm-inject-modal h3 a {
  color: #007bff;
}
.modal-footer {
  justify-content: center;
}

.switch_dropdown {
  cursor: pointer;
}

.switch_dropdown:hover {
  text-decoration: underline;
}

/* Vendor Overides */
.twitter-typeahead {
  display: block !important;
}

.tt-menu {
  font-size: 1.25rem !important;
  background-color: #ffffffee !important;
  color: black !important;
  width: 100% !important;
  min-height: 80%;
  border-radius: 4px !important;
  border: 1px solid var(--color-primary-rm) !important;
  font-family: var(--font-family-secondary-rm);
}

.tt-selectable:hover {
  background-color: var(--font-color-muted-rm);
}

.tt-suggestion {
  padding-left: 17px;
}

.tt-suggestion:first-child {
  padding-top: 5px;
}

.tt-suggestion:last-child {
  padding-bottom: 5px;
}

.tt-cursor {
  background-color: var(--color-primary-muted-rm);
}

.tt-highlight {
  color: var(--color-primary-rm);
}

/* Template Page */
.fa-edit:hover {
  text-decoration: underline;
  cursor: pointer;
  color: #e15636;
}

#field-list-container {
  width: 80%;
}

#editor-field {
  width: 12rem;
}

.db-item-edit {
  color: #766e6e;
}

.db-item-edit:hover {
  color: #e15636;
}

#editor-remove-btn {
  background-color: #dc3545;
  border-color: #dc3545;
}
#editor-remove-btn:hover {
  background-color: #e9636f;
  border-color: #e9636f;
}

#editor-cancel-edit {
  background-color: #e15636;
  border-color: #e15636;
}

#editor-cancel-edit:hover {
  background-color: #ee866e;
  border-color: #ee866e;
}

/* Guide Page */
.list-group > div > div > small {
  font-weight: bold;
}

/* Particle Bacground Ajustment */
#particles-js {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  filter: blur(6px);
}

#content-body {
  position: relative;
  padding: 50px;
}

/* Toast Styles */

#jn-toast {
  visibility: hidden;
  min-width: 226px;
  color: #fff;
  border-radius: 32px;
  padding: 16px;
  position: fixed;
  z-index: 1051; /* BS Modals are set to 1050 */
  left: 50%;
  top: 30px;
}

/* Toast Disyplay Image */
#user-display-pic {
  max-width: 55px;
  border-radius: 50%;
  margin-right: 11px;
  background-color: #fff;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#jn-toast.show {
  visibility: visible; /* Show the snackbar */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

.jn-fadeIn {
  -webkit-animation: fadein 1s;
  animation: fadein 1s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    top: 30px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    top: 30px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

/* Switches  */
.jn-switch {
  position: relative;
  display: inline-block;
  width: 33px;
  height: 20.5px;
}

.jn-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.jn-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #575858;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.jn-switch-slider:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .jn-switch-slider {
  background-color: var(--color-primary-rm);
}

input:focus + .jn-switch-slider {
  box-shadow: 0 0 1px var(--color-primary-rm);
}

input:checked + .jn-switch-slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}