/* fonts */
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/rubik.woff2') format('woff2');
  font-display: swap;
}

/* reset */
* {
  box-sizing: border-box;
  padding: 0; border: 0; margin: 0;
  background: transparent;
  text-size-adjust: none; max-height: 1000000px; /* prevent font-boosting */
}
*::before, *::after {
  box-sizing: border-box;
}

/* variables */
:root {
  /* theme colors */
  /*--theme-color-a: #2187e3;*/
  --theme-color-a: #217fd3;

  /* text & link colors */
  --text-color: #2d2d2d;
  --light-text-color: #fff;
  --heading-color: #404040;
  --blur-color: #777;
  --light-blur-color: #666;
  --pale-blur-color: #888;
  --error-color: #f00;
  --success-color: #009511;
  --info-color: #0068d0;
  --link-color: #0068d0; 
  --green-color: #338833;
  --off-white-color: #dddddd;

  /* background & fill colors */
  --body-bg-color: #f1f1f1;
  --button-bg-color: #2187e3;
  --button-active-bg-color: #2187e3;
  --red-bg-color: #e34422;
  --green-bg-color: #485;
  --icon-fill-color: #555;
  --info-box-color: #e3e3ff;

  /* fonts */
  --main-font: 'Rubik', Arial, sans-serif;
  --mono-font: monospace;
  --tiny-font-size: 14px;
  --small-font-size: 15px;
  --std-font-size: 16px;
  --large-font-size: 18px;
  --small-line-height: 1.5;
  --std-line-height: 1.5625;
  --large-line-height: 1.625;
  --form-field-font-size: 15px;
  --form-field-large-font-size: 16px;
  --h1-font-size: 24px;
  --h2-font-size: 21px;
  --h3-font-size: 20px;
  --h4-font-size: 18px;
  --heading-line-height: 1.4375;

  /* dimensions */
  --min-body-width: 360px;
  --max-container-width: 960px;
  --max-narrow-container-width: 800px;

  /* borders and shadows */
  --border-color: #cbcccd;
  --dark-border-color: #b3b3b3;
  --heading-border-color: #797979;
  --button-border-color: rgba(0, 0, 0, 0.12);
  --shadow-color: #858585;
  --light-shadow-color: #bbb;
  --pale-shadow-color: #ccc;

  /* form elements */
  --input-color: #515151;
  --input-border-color: #b7b7b7;

  /* specific */
  --header-height: 52px;
  --footer-height: 46px;
}

/* general */
html {
  scroll-behavior: smooth;
  background: var(--theme-color-a);
}
body {
  width: 100%; min-width: var(--min-body-width);
  font-family: var(--main-font);
  font-size: var(--std-font-size); line-height: var(--std-line-height);
  color: var(--text-color); background: var(--body-bg-color);
}
body.admin {
  min-width: 560px;
}

/* headings */
h1 {font-size: var(--h1-font-size);}
h2 {font-size: var(--h2-font-size);}
h3 {font-size: var(--h3-font-size);}
h4 {font-size: var(--h4-font-size);}
h1, h2, h3, h4 {
  line-height: var(--heading-line-height);
  color: var(--heading-color);
}

/* multimedia */
img, video {
  display: inline-block;
  max-width: 100%;
}

/* links */
a, a:link, a:visited, a:hover, a:active {
  color: var(--link-color);
  text-decoration: underline;
  cursor: pointer;
}

/* form elements */
input, button, textarea, select {
  display: inline-block;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  font-size: var(--form-field-font-size); line-height: 1;
  font-family: var(--main-font);
  color: var(--input-color);
  background: #fff;
}
input[readonly] {
  background: var(--body-bg-color);
  cursor: default;
}
input[type="submit"], button {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  background: var(--theme-color-a); color: #fff;
  cursor: pointer;
  padding: 7px 10px;
}
input[type="submit"]:hover, button:hover,
input[type="submit"]:focus, button:focus {
  background: var(--theme-color-a);
  outline: 0;
}
button.red-bg, button.red-bg:hover, button.red-bg:focus {
  background: var(--red-bg-color);
}
button.green-bg, button.green-bg:hover, button.green-bg:focus {
  background: var(--green-bg-color);
}
input[type="file"] {
  padding: 7px 8px 8px;
}
input[type="checkbox"] {
  position: relative;
  top: 1px;
}
select {
  line-height: 1.5;
  padding: 7px;
  cursor: pointer;
}
textarea {
  min-height: 160px;
  line-height: var(--small-line-height);
  margin-bottom: -5px;
}
::placeholder {
  color: var(--pale-blur-color);
}
label {
  cursor: pointer;
}
[disabled] {
  cursor: default;
}
button[disabled] {
  background: #aaa;
}
[readonly], select[disabled] {
  background: var(--body-bg-color);
  cursor: default;
}
[readonly]:focus, [readonly]:active {
  outline: 0;
}

/* lists */
ul {
  list-style: none;
}

/* table */
table {
  width: 100%;
  background: #fff;
}
table, td, th {
  border: 1px solid var(--border-color);
  border-collapse: collapse;
  word-wrap: break-word;
}
td, th {
  padding: 7px 11px;
}

/* general classes */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.left {float: left;}
.right {float: right;}
.error {color: var(--error-color);}
.success {color: var(--success-color);}
.info {color: var(--info-color);}
.blur {color: var(--blur-color);}
.small {font-size: var(--small-font-size);}
.big {font-size: var(--large-font-size);}
.mono {font-family: var(--mono-font);}
.u {text-decoration: underline;}
.auto {margin-left: auto; margin-right: auto;}
.container {max-width: var(--max-container-width);}
.narrow-container {max-width: var(--max-narrow-container-width);}
.separator {height: 10px;}
.info-box {background: var(--info-box-color);}
button.small-button{padding: 4px 6px;}

/* avoid overflow from user input */
.error {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* loading cover */
#page-loading-cover {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0;
  z-index: 999;
}

/* icons */
.i {
  display: inline-block;
  width: 24px; height: 24px;
  fill: var(--icon-fill-color);
}
.i.move-up {
  position: relative; top: -1px;
}

/* main */
main {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding: 16px;
}

/* header */
header#top {
  height: var(--header-height);
  background: var(--theme-color-a); color: #fff;
  position: sticky; top: 0; left: 0; right: 0;
  z-index: 3;
  width: 100%; min-width: var(--min-body-width);
}
header#top > .container {
  padding: 0 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a#site-title {
  font-size: 22px; line-height: var(--header-height);
}
header#top a:link, header#top a:visited, header#top a:hover, header#top a:active {
  color: #fff;
  text-decoration: none;
}

/* footer */
footer#bottom {
  height: var(--footer-height);
  background: var(--theme-color-a); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
footer#bottom a:link, footer#bottom a:visited, footer#bottom a:hover, footer#bottom a:active {
  color: #fff;
}
.developed-by {
  line-height: var(--footer-height);
}

/* banner logo */
#banner-logo {
  width: 176px; height: 176px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 21px; margin-top: 4px;
  box-shadow: 0 0 20px var(--light-shadow-color);
}
#banner-logo img {
  width: 100%;
}

/* panels */
#panel input[type="text"], #panel input[type="number"], #panel input[type="password"], #panel input[type="email"], #panel input[type="url"], #panel input[type="file"], #panel textarea, #panel select {
  width: 100%;
}
#panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-left: auto; margin-right: auto;
}
#panel.login-panel {
  max-width: 408px;
  margin-bottom: 4px;
}
#panel h1 {
  margin: -1px -1px 5px -1px;
  width: calc(100% + 2px);
  background: var(--theme-color-a); color: #fff;
  text-align: center;
  border-radius: 4px 4px 0 0;
  font-size: 20px;
  padding: 5px 16px;
}

/* fields */
.field {
  padding: 9px 20px;
}
.field.action {
  text-align: center;
  padding: 10px 20px 21px;
}
.field.error {
  padding: 10px 20px 1px;
  overflow-wrap: break-word;
}
.field:empty {
  padding: 0;
}

/* loading animation on buttons */
[data-active="yes"] {
  position: relative;
  text-align: center;
}
.transparent {
  color: transparent;
}
.transparent svg.i {
  fill: transparent;
}
[data-active="yes"] .i {
  position: absolute; top: 2px; left: calc(50% - 12px);
  fill: #fff;
  animation: rotating 1s linear infinite;
}
button.small-button[data-active="yes"] .i, .back-button button[data-active="yes"] .i, h2 button[data-active="yes"] .i {
  top: 1px; left: calc(50% - 10px);
  width: 20px; height: 20px;
}
.back-button button[data-active="yes"] .i {
  top: 2px;
}
@keyframes rotating {
  100% {transform: rotate(360deg);}
}
@keyframes blinking-dot {
  0% {background-color: #0f0;}
  50% {background-color: #0f0;}
  80% {background-color: transparent;}
}

/* top bar */
#top-bar {
  height: 29px;
}
#greeting {
  display: inline-block;
  line-height: 29px; height: 29px;
  max-width: calc(100% - 236px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; top: 1px; left: 1px;
}
#sms-credit-balance {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: var(--small-font-size);
  line-height: 27px;
  margin-right: 10px;
  padding: 0 7px;
}
#sms-credit-balance .n {
  font-weight: bold;
}
#sms-credit-balance svg.i {
  width: 16px; height: 16px;
  position: relative; top: 3px;
  margin-left: 2px;
}
#logout {
  padding: 0 7px;
  line-height: 27px;
}

/* contact lists */
.list-collection {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-top: 16px;
}
.list-collection.custom-list-button {
  border: 0;
  background: transparent;
  padding-top: 2px; padding-bottom: 2px;
}
.list-collection h2 {
  margin: -1px -1px 0 -1px;
  width: calc(100% + 2px);
  background: var(--theme-color-a); color: #fff;
  border-radius: 4px 4px 0 0;
  font-size: 18px;
  padding: 6px 72px 5px 14px;
  position: relative;
}
.list-collection h2 button {
  position: absolute; right: 8px; top: 5px;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 4px 8px;
}
.list-collection h2, .list-collection h3, .list-collection h4 {
  font-weight: normal;
}
ul.constituencies button, ul.wards button {
  padding: 4px 6px;
}
ul.constituencies h3 {
  padding: 16px 14px 12px;
  font-size: var(--std-font-size);
  position: relative;
  font-weight: bold;
  color: var(--icon-fill-color);
}
ul.constituencies h3 span {
  display: inline-block;
  max-width: calc(100% - 72px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ul.constituencies h3 button {
  position: absolute; right: 14px;
}
ul.constituencies > li {
  border-top: 1px solid var(--border-color);
}
ul.constituencies > li:first-child {
  border-top: 0;
}
.list-collection.curated h2 {
  margin-bottom: 14px;
}
ul.wards {
  padding: 0 14px 1px;
}
ul.wards h4 {
  font-size: var(--std-font-size);
}
ul.wards li {
  padding: 8px 10px 0;
  border-radius: 8px;
  height: 42px;
  position: relative;
  background: var(--body-bg-color);
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,0.06);
}
ul.wards a:link, ul.wards a:visited, ul.wards a:hover, ul.wards a:active {
  text-decoration: none;
}
span.ward-name {
  display: inline-block;
  max-width: calc(100% - 110px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ul.wards li span.right {
  position: absolute; right: 10px;
}

.back-button {
  padding-top: 10px;
}
.back-button button {
  padding: 5px 7px;
}

/* contact listing */
.contact-listing {
  margin-top: 15px;
}
.contact-listing th {
  background: var(--theme-color-a); color: #fff;
  border: 1px solid var(--theme-color-a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-listing tr.foot th {
  font-weight: normal;
  padding: 6px 11px;
}

/* send sms panel */
#send-sms-panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-top: 16px;
}
#send-sms-panel h2 {
  margin: -1px -1px 0 -1px;
  width: calc(100% + 2px);
  background: var(--theme-color-a); color: #fff;
  border-radius: 4px 4px 0 0;
  font-size: 18px;
  font-weight: normal;
  padding: 6px 72px 5px 14px;
  position: relative;
}
#send-sms-panel h2.pad-right-equal {
  padding: 6px 14px 5px;
}
#send-sms-panel h2 button {
  position: absolute; right: 8px; top: 5px;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 4px 8px;
}
#send-sms-panel table, #send-sms-panel table tr, #send-sms-panel table td, #send-sms-panel table th {
  border: 0;
}
#send-sms-panel table tr {
  border-top: 1px solid var(--border-color);
}
#send-sms-panel table tr:first-child, #send-sms-panel tr#action-field, #send-sms-panel tr#delivery-field, #send-sms-panel tr#dont-skip-field, #send-sms-panel tr#contact-list-name-field, #send-sms-panel tr#msg-field, #send-sms-panel tr#percent-field {
  border-top: 0;
}
#send-sms-panel textarea, #send-sms-panel input, #send-sms-panel select {
  width: 100%;
}
#send-sms-panel tr#salutation-field td, #send-sms-panel tr#contact-list-field td {
  padding-top: 14px;
}
#send-sms-panel .custom tr#msg-field td {
  padding-top: 11px;
}
#send-sms-panel tr#action-field td {
  padding-top: 10px; padding-bottom: 22px;
}
#send-sms-panel table td {
  padding: 11px 14px;
}
#send-sms-panel tr#delivery-field td {
  padding-top: 7px;
}
#action-field .error, #payment-action-field .error {
  margin-top: -4px; margin-bottom: 10px;
}
#action-field .error:empty, #payment-action-field .error:empty {
  margin-top: 0; margin-bottom: 0;
}

/* msg controls and counters */
#msg-ctrls {
  font-size: var(--small-font-size);
}
#msg-ctrls .used, #msg-ctrls .out-of {
  font-family: var(--mono-font);
  color: var(--heading-color);
}
#msg-ctrls .used {
  color: var(--success-color);
}

/* payment popup box */
.payment-box {
  padding: 16px 20px;
  max-width: 360px;
}
.payment-box .success {
  padding-top: 10px; padding-bottom: 20px;
}
.payment-box .payment-fields {
  background: var(--body-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  max-width: 320px;
  text-align: left;
  padding: 8px 0 14px;
  margin-top: 6px; margin-bottom: 13px;
}
.payment-fields input {
  width: 100%;
}
.payment-processing-info {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  max-width: 320px;
  padding: 13px 14px 14px;
  margin-bottom: 13px;
  display: none;
}
.payment-processing-info[data-state='active'], .payment-checking-wait[data-state='active'] {
  display: block;
}
.payment-checking-wait {
  display: none;
  padding: 13px 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.payment-checking-wait svg.i {
  position: relative; top: 4px;
  width: 20px; height: 20px;
  margin-right: 3px;
}
.payment-success-box {
  padding: 36px 20px 32px;
  max-width: 360px;
}
.tick {
  display: inline-block;
  background: var(--green-color); color: #fff;
  font-size: 64px; line-height: 64px;
  width: 64px; height: 64px;
  border-radius: 50%;
  margin-bottom: 32px;
}

/* campaign listing */
.no-items {
  padding: 48px 20px 50px;
  color: var(--error-color);
  font-size: var(--large-font-size);
}
.campaign-listing li {
  padding: 11px 14px;
  border-top: 1px solid var(--border-color);
}
.campaign-listing ul li:first-child {
  border-top: 0;
}
.campaign-listing ul li:last-child {
  padding-bottom: 13px;
}
.campaign-listing a {
  font-size: 17px;
}
.sms-campaigns a:link, .sms-campaigns a:visited, .sms-campaigns a:hover, .sms-campaigns a:active {
  text-decoration: none;
}
.status {
  padding: 1px 5px 2px;
  font-size: var(--small-font-size);
  border-radius: 3px;
  background: var(--green-color); color: #fff;
  margin-left: 1px;
}
.status.status-unpaid, .status.status-paused, .status.status-stopped {
  background: var(--red-bg-color);
}

/* sms campaign panel */
#sms-campaign-panel {
  background: #fff;
  border-radius: 4px;
  margin-top: 16px;
}
#sms-campaign-panel h2 {
  background: var(--theme-color-a); color: #fff;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  font-size: 18px;
  font-weight: normal;
  padding: 6px 72px 5px 14px;
  position: relative;
}
#sms-campaign-panel h2 button {
  position: absolute; right: 8px; top: 5px;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 4px 8px;
}
.msg {
  overflow-wrap: break-word;
  word-break: break-word;
  background: var(--body-bg-color);
  font-size: var(--small-font-size);
  padding: 5px 10px;
  border-radius: 4px;
  margin: 4px 0;
  border: 1px solid var(--button-border-color);
}
.msg .placeholder {
  font-weight: bold;
  color: var(--blur-color);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--blur-color);
}
#sms-campaign-panel #msg-ctrls {
  margin-top: 5px;
}
#sms-campaign-panel button#more {
  padding: 3px 5px;
}
#sms-campaign-panel .contact-list-name {
  font-family: var(--main-font);
  text-decoration: underline;
}
.campaign-controls {
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  padding: 12px 16px 13px;
  text-align: center;
}
#campaign-progress {
  padding-left: 40px;
  position: relative;
}
#campaign-progress svg.i {
  position: absolute; left: 11px; top: 9px;
  width: 20px; height: 20px;
}
#campaign-progress span {
  font-weight: bold;
  font-family: var(--mono-font);
}

/* confirm box */
.confirm-box {
  max-width: 360px;
  padding: 30px 20px 20px;
}
.confirm-action-field {
  padding-bottom: 24px;
}

/* admin panel */
.admin-panel, .admin-panel#send-sms-panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-top: 16px;
}
.admin-panel h2, .admin-panel#send-sms-panel h2 {
  text-align: center;
  background: var(--theme-color-a); color: #fff;
  margin: -1px -1px 0 -1px;
  width: calc(100% + 2px);
  border-radius: 4px 4px 0 0;
  font-size: 18px;
  font-weight: normal;
  padding: 6px 14px 5px;
}
#manage-campaigns-button {
  position: relative;
}
#notif-dot {
  display: inline-block;
  position: absolute; top: -4px; right: -4px; z-index: 2;
  width: 14px; height: 14px;
  border-radius: 50%;
  background-color: #0f0;
  animation: blinking-dot 1.5s ease-in-out infinite;
}
.buttons-container {
  padding: 16px 16px 17px;
  max-width: 676px;
}
.buttons-container button {
  margin: 5px 3px;
}
.admin-panel #error-field {
  text-align: center;
  margin: 11px 0 0 0;
  padding: 0 16px;
}
.admin-panel #error-field:empty {
  margin: 0;
  padding: 0;
}
.admin-panel #error-field + .buttons-container {padding-top: 7px;}
.admin-panel #error-field:empty + .buttons-container {padding-top: 16px;}
#success-msg {
  padding: 30px 20px 21px;
  max-width: 400px;
}
#error-field + #success-msg {padding-top: 15px;}
#error-field:empty + #success-msg {padding-top: 30px;}
#bottom-controls {
  text-align: center;
  padding: 0 16px 22px;
}
#success-msg + #bottom-controls {}
#bottom-controls-small {
  text-align: center;
  padding: 13px 16px;
}
#top-controls {
  text-align: center;
  padding: 10px 16px 0;
  height: 41px;
  position: relative;
}
#top-controls button.left {
  position: absolute; left: 16px;
}
#top-controls button.right {
  position: absolute; right: 16px;
}
.admin-panel .sms-campaigns {
  padding: 10px 0 0;
}
.admin-panel .sms-campaigns li {
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
}
.admin-panel .sms-campaigns a {
  max-width: calc(100% - 276px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-panel .sms-campaigns button {
  float: right;
}
.admin-panel table {
  /*
  margin: 10px 16px 0;
  width: calc(100% - 32px);
  */
  margin: 10px -1px -1px;
  width: calc(100% + 2px);
}
.table-container {
  border: 1px solid var(--border-color);
  margin: 10px 0 0;
  border-radius: 4px;
}
.admin-panel .table-container table {
  margin: 0 -1px -1px;
}
.admin-panel .info-box {
  padding: 7px 12px;
  margin: 12px 16px;
  border-radius: 4px;
  border: 1px solid var(--button-border-color);
}
#success-box {
  padding: 36px 16px 30px;
  text-align: center;
}
#error-field:not(:empty) + #success-box {
  padding: 29px 16px 30px;
}