/*
Color scheme: https://www.ibm.com/design/language/color/
*/
html {
  font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
  box-sizing: border-box;
  line-height: 1.2rem;
  font-size: 14px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

p {line-height: 1.4; }
ul {
  list-style: none;
}

input,
textarea,
select {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* More friendly border */
input,
textarea,
select {
  border: 1px solid #b7b4b7;
  padding: 0.4rem 0.5rem;
}

select {
  display: block;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 1.5rem;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right .5rem top 50%;
  text-overflow: ellipsis;
  background-size: .65em auto, 100%;
}

select:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}
select option {
  font-weight:normal;
}

ul.bullets {
  list-style-type: square;
  margin: 1rem 0 0 1rem;
}

button * {
  pointer-events: none;
  white-space: nowrap;
}

img,
svg,
iframe,
video,
object,
embed {
  display: block;
  max-width: 100%;
}


.hidden,
[hidden] {
  display: none !important;
}

noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}


a, .submit-link {
  color: #4d6a99;
  text-decoration: underline;
  /*text-decoration-style: solid;*/
  /*text-decoration-color: #b7ccef;*/
}
a {
  padding: 0.2rem;
}
.submit-link {
  padding: 0;
}
td .submit-link {
  padding: 0;
  text-decoration: none;
}
body {
/*  font-size: 14px;*/
  min-width: 1280px;
  min-height: 100vh;
  overflow: auto;
  color: #001d6c;
  display: flex;
  flex-direction: column;
}

li {padding: 0.2rem; }


header {
  /*background-color: #f8f9ff;*/
  color: #4d6a99;
  /*border-bottom: 1px solid #d0e2ff;*/
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
header img {
  /*float: left;*/
  /*height: 30px;*/
  /*width: 40px;*/
  height: 2.5rem;
}
header .org-name { padding-left: 1rem; }
header .org-name strong a { text-decoration: none; }
header .org-name strong a:hover { text-decoration: underline; }
header .trial-ending { background-color: #fffab3; border-radius: 3px; }


#switch-form { padding-left: 1rem; }
  #switch-form select {
    float: left;
    font-weight: bold;
    background-color: transparent;
    border: none;
    min-width: auto;
  }
  #switch-form button { margin: 0.3rem 0.5rem 0.36rem; }

.announcement {
  flex: 1 auto;
  text-align: center;
}

form {
  display: inline;
}
.submit-link {
background:none!important;
border:none;
font: inherit;
cursor: pointer;
display: inline;
}

header em {
  color: #E81B00;
  font-weight: bold;
  font-style: normal;
}

header ul { float: left; }
header ul li { display: inline-block; }
/*header a, header .submit-link { text-decoration: none; }*/
/*header a:hover, header .submit-link:hover { text-decoration: underline; }*/
header .button {
  font-weight: bold
}
.limits-exceeded,
.subscription-expired {
    background-color: #fff8f8;
    padding: 3px;
    border: 1px solid #ffe0e0;
    text-decoration: none;
    border-radius: 3px;
    color: #ff5050;
  }
.answered-tickets {
  padding: 3px;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid #eee9b9;
  background-color: #fffff4;
  color: #ffa500;
}
main {
 display: flex;
 flex-direction: row;
 flex: 1;
}

main h1 {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
}

main h2 {
  font-size: 1.3rem;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
  font-weight: normal;
}

.sidemenu-container {
  /*background-color: #f8f9ff;*/
  display: flex;
  flex-direction: row;
  padding-right: 2rem;
  /*border-right: 1px solid #f8f8ff;*/
}

.sidemenu {
  /*margin-top: 2px;*/

  /*border-top: 10px solid #edf5ff;*/
  /*border-right: 1px solid #eef;*/
  display: flex;
  flex-direction: column;
  /*width: 15rem;*/
  /*width: 15rem;*/
  /*box-shadow: inset -1px 0 1px #f5f5f5;*/
  /*background-color: #fdfdfd;*/
  /*overflow: hidden;*/
}
.sidemenu li a { text-decoration: none; color: #4d6a99; }
.sidemenu li a:hover { text-decoration: underline; }
/*.sidemenu li { background-color: #fafafa; }*/
.sidemenu li.secondary a { color: #95a0b3; }

.sidemenu ul:first-of-type { flex: 1 auto; }
/*.sidemenu ul { padding: 0.4rem 0; }*/
.sidemenu li > ul { padding-bottom: 0; }
.sidemenu > ul > li { padding: 0.6rem 1rem; }
/*.sidemenu ul li > ul li { padding: 0.4rem 0.8rem; }*/
/*.sidemenu ul.advices { margin-top: 0.4rem; border-top: 1px solid #e5f0ff; }*/

.sidemenu li.active.submenu { background-color: #f5f5f9; border-left-color: #dfdff0;  }
/*.sidemenu li.active.submenu a { color: #0043ce; }*/


.sidemenu li.submenu { border-left: 5px solid #dfdff0;  margin-left: 1rem;}

.sidemenu li.submenu.tag-ref { border-left: 2px solid #dfdff0; /*background-color: #edf5ff;*/ text-transform: capitalize;  }
.sidemenu li.submenu.tag-ref a { text-decoration: none; color: #a2a9b0; }


.sidemenu li.disabled span {
  padding: 0.2rem;
  color: #ccc;
}


.container {
  flex: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  /*border-left: 1px solid #edf5ff;*/
  /*border-bottom: 2px solid #edf5ff;*/
  /*border-top: 1px solid #edf5ff;*/
  background-image: url(/images/logo_bg.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
  /*background-color: #edf5ff;*/
}
.inner-container {
  flex: 1 auto;
  /*border-top: 1px solid #f8f8f8;*/
  padding: 0 2.5rem 1.5rem 2.5rem;
}

.sticky-header {
  padding: 0.5rem;
  position: sticky;
  /*top: 1rem;*/
  margin-bottom: 1rem;
  background-color: #fffcef;
  border-radius: 2px;
  border: 1px solid #ffe3a8;
  color: #bb8c34;
}
.sticky-header.info {
  background-color: #fffcef;
  color: #bb8c34;
  border: 1px solid #fff7df;
  border-left: 4px solid #fff7df;
}

.sticky-header button { font-weight: bold; }

.context-help{
  background-color: #fdfdfd;
  padding: 1rem 2rem;
  width: 50ch;
  min-width: 50ch;
  color: #4d6a99;
  /*border-left: 1px solid #dfdff0;*/
  /*border-top: 1px solid #d0e2ff;*/
  /*background-color: #fdfefa;*/
  /*box-shadow: inset 1px 0 1px #f5f5f5;*/
}
.context-help ul {
  list-style: square;
  margin: 1rem 1rem;
}
.context-help li {
  margin-bottom: 1rem;
}

.context-help h4 {
  margin-top: 1.5rem;
}

.sidemenu li {
  /*width: 15rem;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidemenu li.active {
  /*background-color: #edf5ff;*/
  /*background-color: #d0e2ff;*/
  /*border-bottom: 1px solid #eef;*/
  /*border-left: 1px solid #eef;*/
}
/*.sidemenu li.submenu-parent.active:after,
.sidemenu li.active:after,
.sidemenu li.active.submenu:after {
  content: "";
  border: solid #0043ce;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
}
*/


.sidemenu li.active a {
  text-decoration: none;
  font-weight: bold;
  color: #001d6c;
}
.sidemenu li.active.submenu-parent:after {
  /*display: none;*/
  /*background-color: #d0e2ff;*/
}

/*.sidemenu li.submenu.create.active { background-color: #defbe6; }*/
.sidemenu li.submenu.create a { color: #24a148; }
.sidemenu li.active.create a { color: #001d6c; }
.sidemenu li.active.create:before { border-color: #007e00; }


/*.sidemenu li.delete.active { background-color: #fff1f1; }*/
.sidemenu li.delete a { color: #ff8389; }
.sidemenu li.delete.active a { color: #001d6c; }
.sidemenu li.active.delete:before { border-color: #ff8389; }


span.separator {
  color: #dfdff0;
  font-weight: normal !important;
}


footer {
  /*border-top: 1px solid #d0e2ff;*/
  /*background-color: #edf5ff;*/
  display: flex;
  flex-direction: row;
  padding: 1rem;
  color: #4d6a99;

}
/*footer .status { flex: 1 auto; }*/
footer .copyright { text-align: center; flex: 1 auto;}
.copyright img { display: inline-block; margin-bottom: -0.25rem; }
.status .ok { color: #4ca64c; }

label {
  white-space: nowrap;
  color: #001141;
}
label em {
  color: #a2a9b0;
  font-weight: normal;
  font-style: normal;
}
label span {
  display: block;
  font-weight: bold;
}
.required:before {
  content: '* ';
  color: red;
}
label span.inline {
  display: inline;
}
label span.help-block {
  display: inline-block;
  color: #e04c4c;
}
.wrap-words {
  word-break: break-all;
}
.important {
  padding: 1rem;
  border: 1px solid #eee9b9;
  background-color: #fffff4;
}
h4 {max-width: 60ch}
p { max-width: 60ch; }
p { margin-bottom: 0.8rem; }
form p.subsection { margin-left: 1.7rem; margin-top: 0.5rem; }

form p { margin-top: 1rem; }
h4 { margin-top: 2rem; }
h4.title { margin-top: 0; }

.introduction {
  color: #555;
  margin: 1.5rem 0 2rem;
}

.explanation {
  color: #333;
  margin: 2rem 0 1rem;
}
.action {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #dfdff0;
  /*background-color: #fafafa;*/
  /*text-align: right;*/
}

img.qr_code {
  padding: 3rem;
  border: 1px solid #dadce0;
  width: 20rem;
}
span.totp_code {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
  display: block;
  width: 20rem;
  border: 1px solid #dadce0;
  border-top: none;
  padding: .3rem;
}


input[type='text']:disabled,
input[type='email']:disabled {
  background-color: #f6f6f6;
  color: #aaa;
}
input[type='date'],
input[type='text'],
input[type='email'],
input[type='number'],
input[type='tel'],
input[type='password'],
textarea,
select {
  border: 1px solid #dfdff0;
  /*background-color: #fefefe;*/
  box-shadow: inset 1px 1px 2px #f8f8f8;
  border-radius: 2px;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
textarea,
select {
  min-width: 20rem;
}
.date-select select {
  width: 8rem;
  display: inline-block;
}
input[type='date'],
input[type='number'] {
  width: 10rem;
}

textarea::placeholder,
input::placeholder {
  color: #bbc1d2;
}

textarea:disabled {
  background-color: #fafafa;
  border-color: #ddd;
  color: #ccc;
}
textarea {
  width: 100%;
}
.StripeElement {
  max-width: 20rem;
  /*min-width: 20rem;*/
  padding: 8px 7px 6px;
  border: 1px solid #c3c5ca;
  background-color: #fefefe;
  box-shadow: inset 1px 1px 2px #eee;
  border-radius: 2px;
}

.alert {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #444;
  border-radius: 2px;
}
.alert-error {
  background-color: #fff8f8;
  color: #e04c4c;
  border: 1px solid #ffe0e0;
}
.alert-info {
  background-color: #f6fff4;
  border: 1px solid #cfefcf;
  color: #84bb84;
}
.alert-warning {
  background-color: #fffcef;
  color: #bb8c34;
  border: 1px solid #fff7df;
}
.alert span { flex: 1 auto; }
.alert-fade-out {
  background-color: white;
  transition: background 2s ease-out;
 }

table {
  margin: 0.5rem 0 1rem;
  /*border: 1px solid #edf5ff;*/
  border-collapse: collapse;
  /*max-width: 1024px;*/
  /*table-layout: fixed;*/
  /*width: 100%;*/
}
.container table { min-width: 60ch;
 }

table tr {
  padding: 0;
  border-top: 1px solid #f5f5f9;
}
table tr:last-of-type {
  border-bottom: 1px solid #f5f5f9;
}


tr.alt {
  /*background-color: #edf5ff;*/
}

th {
  padding: 0.5rem;
}

td {
  padding: 0.5rem;
}

table ul { margin-top: 1rem; }

th,
td.truncate {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

th.min,
td.min {
  width: 1%;
}
thead th {
  text-align: left;
  background-color: #f5f5f9;;
  /*background-color: #edf5ff;*/
}
tbody th:first-of-type {
  text-align: left;
  background-color: #f5f5f9;
}
/*thead th:first-of-type { border-left: 1px solid #dfdff0; }*/
/*thead th:last-of-type { border-right: 1px solid #dfdff0; }*/
table td small {
  color: #aaa;
}
tfoot th {
  font-weight: normal;
  /*background-color: #f6f2ff;*/
}
tfoot th.actions a {
  font-weight: bold;
}

th.actions,
td.actions {
  text-align: right;
  overflow: visible;
  white-space: nowrap;
}

button span {
  display: inline;
  font-weight: normal;
}
.center th,
.center td { text-align: center; }


.actions .delete {
  color: #ff8389;
}
.actions .add-new {
  color: #24a148;
}

.date-select select {
  min-width: inherit;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}
.centered form {
    max-width: 50%;
}

.light { color: #a2a9b0; }
.light a { text-decoration: none; color: #a2a9b0; }
.light a:hover { text-decoration: underline; }
.italic { font-style: italic; }
.no-break { white-space: nowrap; overflow:visible; }

.check-info,
.check-warning,
.check-fail { border-bottom: none; }
.check-ok span { font-weight: bold; color: green; }
.check-fail span { font-weight: bold; color: red; }
.check-info span { font-weight: bold; color: blue; }
.check-warning span { font-weight: bold;  color: orange;}
.check-explanation td { color: #a2a9b0; }
.check-ok p,
.check-fail p,
.check-info p,
.check-warning p,
.check-explanation p { margin: 0; max-width: 60ch;}

.check-actions { font-weight: normal; text-align: right; overflow: visible; white-space: nowrap; }

.punycode { font-weight: normal; font-family: monospace; font-size: 0.9rem; color: #a2a9b0; background-color: #fdfcd6; padding: 2px 3px; border-radius: 3px; }

h4 {
  border-bottom: 1px solid #dfdff0;
  margin-bottom: 0.6rem;
}
h3 { margin: 0.5rem 0; }
h3 sup { font-weight: normal; text-transform: none; }

h3.table-title {
  text-transform: capitalize;
  /*font-size: 0.8rem;*/
  /*color: #aab;*/
  margin: 1.5rem 0 0.5rem;
}
main h3:first-of-type { margin-top: 0; }
/*main h4 { margin-top: 1rem; }*/


.field-prefix {
  position: absolute;
  margin-left: -0.7rem;
  color: #777;
  font-weight: normal;
}
.textarea-postfix,
.field-postfix {
  display: inline;
  color: #aaa;
  font-weight: normal;
  font-size: small;
}
.textarea-postfix {
  vertical-align: top;
}


.api-token,
.invitation-link,
.transfer-code {
  margin-top: 1rem;
  display: inline-block;
  font-weight: bold;
  padding: 1rem;
  border: 1px solid #dadce0;
  background-color: #fafafa;
  max-width: 60ch;
  word-wrap: break-word;
}

.ticket-body { padding: 1rem 0 0.8rem 0; }
.message-body em,
.ticket-body em { display: block; margin-bottom: 0.5rem; color: black;}
.message-body { padding: 1rem 0 0.5rem 1rem; }
.ticket-body h4 { border-bottom: 0; }
.ticket-message-form { margin-top: 1rem; }
.ticket-message-form textarea { width: 60ch; }
.ticket-message-form .action { margin-top: 0.8rem; }

.green { color: #24a148; }
.true:before { content: "●"; color: #12bb68; }
.red { color: #ec6f8a; }
.false:before { content: "×"; color: #ec6f8a; }


/* Overlay spinner */
#overlay{ position: fixed; z-index: 999999; width: 100%; height: 100%; background-color: #FFF; left: 0; top: 0; opacity: 0.9; display: none; text-align: center; }
#overlay span {
  margin: 50vh auto;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #2F8AFF;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {to { -webkit-transform: rotate(360deg); }}
@-webkit-keyframes spin {to { -webkit-transform: rotate(360deg); }}

.addresses-filter {
  text-align: right;
  /*margin-bottom: 1rem;*/
}

.button,
.action button {
  text-decoration: none;
  display: inline-block;
  border:1px solid #aaa;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  padding: 0.3rem 0.5rem 0.36rem;
  /*min-width: 5em;*/
  font-size: 14px;
  background-color: #f7f7f7;
  border: 1px solid #A3A3A0;
  box-shadow: inset 0 -1px 0 0 #E5E6E1, inset 0 1px 1px 0 #FFFFFF;
  border-radius: 2px;
  text-shadow: 1px 1px 1px #fdfdfd;
  color: #2f2f2f;
}
.pricing button {
  cursor: pointer;
}
.button:active,
.action button:active {
  transform: translateX(1px) translateY(1px);
}
.button:hover,
.action button:hover {
}
.action button {
    font-weight: 700;
    margin-right: 1rem;
}

.action button[disabled] {
  border-color: #ddd;
  color: #ddd;
}
button.green,
.button.green {
  background-color: #f5ffed;
  color: #007e00;
  font-weight: 600;
}

button.red,
.button.red {
  background-color: #fff1f1;
  color: #ff8389;
  border-color: #ff8389;
}

.action .button.red {
 font-size: 14px;
 font-weight: bold;
 margin-right: 1rem; 
}


#card-expiry { display: inline-block; width: 15ch; }
#card-cvc { display: inline-block; width: 15ch;}
#card-errors { color: #ffaaaa; }
.payment-form { border: none; border-collapse: unset; max-width: 30ch;}
.payment-form td { padding: 0.4rem 0; }



a[target="_blank"]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

.backup-code-2fa { font-family: monospace; }

.registration-logo { margin: 1rem 0 2rem; }

.admin-panel {
  display: inline-block !important;
  margin-left: 8px;
}
.admin-pagination>li {
display: inline !important;
margin: 0.2ch;
}
.admin-pagination>li.active>a {
  color: red;
}

.admin-pagination>li>a {
  color:#444544;
}
#number_of_pages {
  color: #616161;
  line-height: 1.4;
}

.admin-message-body {
  width: auto;
  overflow: hidden;
  word-wrap: break-word;
}

.admin-message-text{
  color: black;
}



.breadcrumbs {
  margin-bottom: 2em;
}

.tag-block {
  margin-top: 1rem;
  padding: 0.5rem;
}
.tag-title {
  text-transform: capitalize;
}



.tag {
  background-color: #f4f4f4;
  border-radius: 3px;
  padding: 2px;
  text-decoration: none;
  border: 1px solid #ddd;
  color: #999;
  font-size: small;
}
.tag.orange {
  background-color: #fff9ed;
  border: 1px solid #ffe3a8;
  color: #e5a497;
}
.tag.green {
  background-color: #f6fff4;
  border: 1px solid #cfefcf;
  color: #84bb84;
}

.upgrade-required {
  padding: 0.5rem;
  margin-bottom: 2rem;
  border: 1px solid #ffe3a8;
  background-color: #fff9ed;
  border-radius: 2px;
  color: #bb8c34;
}
.upgrade-required .button { font-weight: bold;}



/* When jumping to anchor-hash, we'll highlight the block for a few seconds so
   the visitor knows where to look at */
@keyframes highlight { 0% { background-color: #FEF9D8; } 100% { background-color:; } }
.highlight { animation: highlight 3s; }


.trial-reminder { color: red; }

.right { text-align: right; }