:root {
  /* Colors from the OpaVote pie-chart logo */
  --opavote-blue: #3d486f;
  --light-blue: #79CBD9;
  --coral: #EB505C;
  --yellow: #F7E245;
  --green:#85C138;

  /* other useful colors */
  --light-gray: #d9e1ee;
}

/* Global stuff
-------------------------------------------------- */

p.vcenter { margin: 10px 0;}

.topm10 {
  margin-top: 10px;
}

.topm20 {
  margin-top: 20px;
}

.bottomm10 {
  margin-bottom: 10px;
}

.bottomm20 {
  margin-bottom: 20px;
}

.inline {
  display: inline-block;
}

/* Allow touch punch to work on MS devices */
.ui-draggable { -ms-touch-action: none; }

/* Display Droop threshold in help page */
.eqn {display: flex; justify-content: center; align-items: center;}
span.frac {display: inline-block; text-align: center; padding:0 5px;}
span.frac span.num {display: block; border-bottom: 1px solid;}
span.frac > span.den {display: block;}

.blue {
  background: var(--opavote-blue);
  color: #fff;
}

.blue a {
  color: #99bcdb;
}

.white {
  background: white;
}

.blue h2, .blue h3, .blue h4, .blue h5, .blue h6, .blue p {
  color: white;
}

code {
  font-size: 0.8em;
  color: var(--opavote-blue);
  display:inline-block;
  margin-left:2em;
}

samp {font-size: 0.8em;}

hr {
  border: none;
  height: 1px;
  background-color: var(--opavote-blue);
  margin: 10px auto;
}

.max-width-100px { max-width:100px; }
.max-width-250px { max-width:250px; }

.table-nonfluid {
  width: auto !important;
  margin-left:auto;
  margin-right:auto;
}

#dynamic-modal { overflow-y: scroll; }


/* Navbar
-------------------------------------------------- */

header {
  background: var(--opavote-blue);
  flex: none;
}

.navbar-brand {
  padding: 0 0;
  width: 205px;
  height: 56px;
  display: block;
}

.no-menu-header {
  margin: 15px auto;
  position: relative;
}

/* Left Navbar
-------------------------------------------------- */
.navbar-side {
  color: #fff;
  background: var(--opavote-blue);
  padding: 0 15px;
}
.navbar-side a { color: #fff; }
.navbar-side-header { margin: 15px 0; }
.navbar-side-header img {
  width: 150px;
  height: 41px;
}
.navbar-side ul, .navbar-side li { list-style: none; }
.navbar-side ul { padding-left: 15px; }
.navbar-side li {
  font-size: 1.1em;
  padding: 10px 0;
}
.navbar-side li span {margin-right: 10px;}
.navbar-side li a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color ease 0.4s;
}

.navbar-toggler {
  min-width: 10px;
  min-height: 10px;
}

@media (max-width: 767px) {
  .navbar-side {
    position: relative;
    width: 100%;
  }
  .navbar-side li {
    padding: 10px 0;
  }
  .navbar-side .navbar-toggler { display: block; }
}

@media (min-width: 768px) {
  #menu-content { display: block; }
  .navbar-side { height: 100%; }
  .navbar-side .navbar-toggler { display: none; }
}

.nav-tabs .nav-link:not(.active) {
  border-color: var(--bs-gray-400);
  background-color: var(--bs-gray-100);
}

/* Sticky footer styles
https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
-------------------------------------------------- */

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #555;
}
.content {
  flex: 1 0 auto;
}

/* Home
-------------------------------------------------- */

.try-btn, .demo-btn {
  font-size: 1.2em;
  color: var(--opavote-blue);
  padding: 10px 30px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  margin: 10px;
  border-radius: 3px;
}

.try-btn, .try-btn:hover {
  color: var(--opavote-blue);
  border: 0;
  background: #F26B72;
}

.demo-btn, .demo-btn:hover {
  color: var(--opavote-blue);
  border: 0;
  background: #8DD5E1;
}

#banner {
  height: 450px;
  background: url(/static/img/banner-bg.jpg) no-repeat;
  background-size: cover;
  background-position: center bottom;
  display: flex;
  flex-direction: column;
}

.intro {
  text-align: center;
  padding: 30px;
  color: #fff;
  /* To vertically center contents */
  flex-grow: 1;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;

}

.intro div { width:100%; }

.intro .openstv {
  max-width:500px;
  margin: 20px auto 0 auto;
  color: black;
  background-color: #fcd050;
  border: 0;
}

.intro h1 {
  color: #fff;
  font-weight: 300;
  font-size: 2.6em;
  margin: 0;
}

.intro .slogan {
  margin: 30px 0;
  color: #fff;
  font-size: 1.2em;
}

.home-band {
  padding: 50px 0;
}

.home-band h2 {
  font-size: 2.0em;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-align: center;
}

.home-band h3 {
  font-size: 1.1em;
  margin: 15px 0;
  font-weight: 600;
}

.point {
  text-align: center;
}

.point-img {
  width: 66px;
  height: 66px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 50%;
}

.point-img img {
  max-width: 100%;
}

.evenly-space {
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -webkit-flex-wrap: wrap;
}

.testimonial {
  text-align: center;
  font-size: 1.1em;
}

.user-images {
  margin-top: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.user-images div {
  width: 16%;
  padding: 0 15px;
}

.user-images div img {
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  #banner { height: auto }
  #banner .container { width: 100% }
  .points > div { margin: 10px 0 }
  .testimonial { font-size: 1.0em }
}

/* Pricing page
-------------------------------------------------- */

.pricing-panel {
  display: inline-block;
  margin: 0 auto;
}

.pricing {
  li {
    list-style-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 26" stroke-width="1.8" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> </svg>');
  }

  li::marker {
    font-size: 2.2rem;
    line-height: 0.1;
  }
}

.flex-wrap {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

/* Help page
-------------------------------------------------- */


.sidebar.nav, .sidebar .nav {
  display: block;
  width: 100;

  & ul, a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
  }


  & li > a:hover {
    text-decoration: none;
  }
}

.sidebar > li > a {
  color:#333;
  padding:4px 0px;
}

.sidebar ul > li > a {
  font-size:13px;
  color:#555;
  padding:1px 0px 1px 20px;
}

/* Console
-------------------------------------------------- */

table.simple-list {
  width: 100%;
  margin-bottom: 10px;

  td {
    border-top: none;
    border-bottom: 1px solid var(--light-gray);
  }

  th {
    color: var(--opavote-blue);
    border-top: none !important;
    border-bottom: 2px solid var(--light-blue);
  }

  tr {
    border-top: none;
  }
}

.width-150px {
  width:150px;
  margin:5px 0;
}

.intro-nux {
  max-width: 600px;
  margin: 0 auto 20px auto;
}

.intro-nux > *:last-child { margin-bottom: 0; }

.select-price {
  -webkit-appearance: menulist-button;
  height: 29px;
}

label {
  display: inline-block;
  font-weight: 700;
}

.form-check label {
  font-weight: 400;
}

.col-form-label {
  font-weight: 700;
}

form-check-label {
  font-weight: 400;
}

/* Manage pages
-------------------------------------------------- */

.manage { max-width: 1400px; }

.manage h1 {
  text-align: center;
  margin: 10px 0;
}

.manage h2 {
  margin: 10px 0;
}

/* Used to imitate form row formatting for non-form inputs. */
.form-row {
  margin-bottom:15px
}

.info-block {
  border:1px solid black;
  border-radius:4px;
  margin:0 0 10px 0;
  padding:5px 10px;
  background-color: #fce060;
}

.info-block p {
  margin-bottom: 2px;
}

.info-block p:last-child {
  margin-bottom: 0;
}

.upload-btn {
  position: relative;
  overflow: hidden;
}
.upload-btn input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px;
  direction: ltr;
  cursor: pointer;
}

.ballot-editor-template {
  display: none;
}

.editor-block {
  background-color: #e5e5e5;
  border:1px solid #e5e5e5;
  border-radius:4px;
  padding:10px;
}

div#method-options select {
  display:inline-block;
  padding-top:1px;
  padding-bottom:1px;
  height:24px;
}

div#method-options input {
  display:inline-block;
  height:24px;
  width:24px;
}

input.width100 {
  width: 100%;
  box-sizing: border-box;
}

table#blt-candidates {
  margin:0 auto 20px auto;
}

table#blt-candidates td, table#blt-candidates th {
  padding:1px 5px;
}

.blt-editor input {
  border:0;
  outline:0;
  padding:0;
  text-align:center;
}

.voter-list ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.btn-brand-icon {
  vertical-align: middle;
  margin-right: 0.35em;
}

.tiebreak-name {
  margin-right: 20px;
  white-space:nowrap;
}

/* Election page
-------------------------------------------------- */

.width-sm {
  max-width: 750px;
}

.election-bg {
  background-color: #dddddd;
}

.election h1, .election h2 {
  text-align: center;
  margin: 10px 0;
}

.chunk {
  background: var(--bs-body-bg);
  padding: 1rem;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.25rem;

  &:first-child {
    margin-top: 0.25rem;
  }
}


.election button {
  margin:2px 5px 3px 0;
  padding:3px 8px;
}

div.ballot-wrapper {
  text-align:center;
  margin: 0 0 10px 0;
  max-width:100%; /* prevents overflow */
}

.candidate-list {
  display:inline-block;
  vertical-align:top;
  text-align:left;
  margin-right:10px;
  max-width:100%;
}

.candidate-list ul {
  padding: 0 0;
}

.candidate-list ul li {
  white-space:nowrap;
  overflow:hidden;
}

.ballot-box {
  border: 2px solid #000000;
  border-radius:3px;
  padding: 0px;
  display:inline-block;
  vertical-align:top;
  text-align:left;
  position:relative;
  max-width:100%;
}

.ballot-box p:first-child, .candidate-list p:first-child {
  margin:0 5px;
  font-weight:bold;
}

.ballot-box ol {
  margin: 10px 0px;
  padding: 0px 10px 0px 30px;
  list-style-type:none;
}

.ballot-box ol li {
  height:28px;
  margin: 4px 0;
  padding: 3px 5px;
  border: 1px solid black;
  background-color: #fcd050;
  min-width:60px;
  white-space:nowrap;
  overflow:hidden;
  cursor: move;
  cursor: -webkit-grab;
  cursor:    -moz-grab;
  cursor:         grab;
}

.ballot-box ol li:active {
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

.ballot-box ul li {
  white-space:nowrap;
  overflow:hidden;
}

.choose-one ul {
  margin: 10px 0px;
  padding: 0px 10px 0px 10px;
  list-style-type: none;
}

.choose-one ol {
  display:none;
}

.choose-one ul li {
  height:28px;
  margin: 4px 0;
  padding: 4px 0 4px 25px;
  min-width:60px;
  cursor:pointer;
}

li.empty {
  background:url('/static/img/box-combined.png') no-repeat 0 0;
}

li.checked {
  background:url('/static/img/box-combined.png') no-repeat 0 -28px;
}

#locale {
  display:inline-block;
  position: absolute;
  right: 15px;
  height: 56px;
  line-height: 56px;
}

#locale select {
  background-color: #dddddd;
  vertical-align: middle;
}

/* Reports
-------------------------------------------------- */

@media print {
  .results {
    font-size:0.6em !important;
  }
}

.results h1, .results h2 {
  text-align: center;
}

.results hr {
  height: 1px;
}

.my-pill {
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid var(--opavote-blue);
  border-radius: 4px;
  text-align: center;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--opavote-blue);
  color: #fff;
}

.my-pill a:hover {
  color: #ff5252;
}

.my-pill a,
.my-pill a:focus {
  color: #fff;
}

table.results {
  border-collapse:collapse;
}

table.results tr td {
  border: 1px solid black;
}

table.results tr:first-child td {
  border-top: none;
  border-bottom: 2px solid black;
  font-weight: bold;
  word-break: break-all;
}

table.results tr td:first-child {
  border-left: none;
  border-right: 2px solid black;
  font-weight: bold;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.wins { background-color:#87cf32 }
td.loses { background-color:#f36565 }
td.ties { background-color:#aaaaaa }

.expired {
  max-height: 300px;
  overflow: hidden;
  padding: 0 0;
}

.expired img { width: 100%; }

/* Admin page
-------------------------------------------------- */

table.admin {
  border-collapse:collapse;
  width: 100%;
}

table.admin, table.admin td, table.admin th {
  border: 1px solid black;
}

/* Stripe
-------------------------------------------------- */

.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid black;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

/* Trix Editor */
trix-toolbar {
  .custom-trix-button-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    overflow-x: auto;
  }
}