@font-face {
    font-family: 'BaseSansSerif';
    src: url('/www_utils/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 200 900;
}

@font-face {
    font-family: 'Roboto';
    src: url('/www_utils/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 200 900;
}

html {
  font-family: 'BaseSansSerif', Arial, Helvetica;
  font-size: 13pt;
  color: #404040;
  line-height: normal;
}

body {
  margin: 0;
  background: #f3f3ec;
}

* {
    box-sizing: border-box;
}


a[class=""], a[class=""]:visited, a[class=""]:active, a[class=""]:link {
    color: #3080c0;
    text-decoration: none;
}

a[class=""]:hover {
    color: #60b0ff;
    text-decoration: underline;
}

a.aux, a.aux:visited, a.aux:active, a.aux:link {
    font-size: 11pt;
    color: #3080c0;
    text-decoration: none;
}

a.aux:hover {
    color: #60b0ff;
    text-decoration: underline;
}



.comment {
    font-size: 0.7rem;
    color: #205090;
}


h1 {
    font-family: Roboto;
    font-size:28pt;
    font-weight: 400;
    text-shadow: none;
    color: #5070c0;
    margin: 1.5rem 0;
    letter-spacing: 0.8px;
}

h2 {
    font-family: Roboto;
    font-size: 20pt;
    font-weight: 400;
    text-shadow: none;
    color: #5699f0;
    text-shadow: none;
    margin: 1.5rem 0 0.6rem 0;
    letter-spacing: 0.8px;
}


h1 > i {
    vertical-align: middle;
    font-size: 1.5em;
    margin-right: 0.3em;
}

h2 > i {
    vertical-align: middle;
    font-size: 1.2em;
    margin-right: 0.25em;
}

.app label {
    color: #707070;
}


.stripe {
    width: 100%;
    padding: 30px 0;
}

.bg-white {
    background: white;
}

.bg-gray {
    background: #f3f3ec;
}

.main {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
    background: none;
}

div > h1 {
    margin-top: 0;
}

div > h2 {
    margin-top: 0;
}

div.message {
    margin-top: 10px;
}

.alert {
    padding: 15px;
    margin: 20px 0;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert h4 {
    margin-top: 0;
    color: inherit;
}
.alert .alert-link {
    font-weight: bold;
}
.alert > p,
.alert > ul {
    margin-bottom: 0;
}
.alert > p + p {
    margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
    padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success hr {
    border-top-color: #c9e2b3;
}
.alert-success .alert-link {
    color: #2b542c;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-info hr {
    border-top-color: #a6e1ec;
}
.alert-info .alert-link {
    color: #245269;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-warning hr {
    border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
    color: #66512c;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-danger hr {
    border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
     color: #843534;
}

.alert i {
    font-size: 1.4rem;
    margin-right: 8px;
    color: #a94442;
}


.dump {
    font-size: 10pt;
    background: #fffff5;
    border: 1px solid #e0e0e0;
    padding: 0 8px;
    margin: 10px 0;
}

table.data th {
    text-align: right;
    padding: 0 5px;
}

div.bullet {
    display: inline-block;
    width: 50px;
    height: 1.2rem;
    position: relative;
}

div.bullet::after {
    font-family: Arial, Helvetica;
    content: '\2022';
    color: #a0a0a0;
    font-size: 14pt;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    width: 100%;
}

/* jconfirm pop-up boxes and errors */

.jconfirm-holder {
    max-width: 70%;
    margin: auto;
}

.jconfirm-box {
    min-width:400px;
}

.jconfirm-content-pane .cell {
    margin: 1px;
}

.jconfirm-content-pane .cell i {
    margin-right: 1rem;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    text-align: left;
    max-width: 580px;
}

.msg-info {
    color: #0090ff;
}

.msg-error {
    color: #ff3000;
}

.exception-detail-caption {
    color: #ff8000;
    font-family: Roboto;
    font-weight: 700;
}

.exception-detail-value {
    color: #b04646;
    font-family: Roboto;
    font-weight: 600;
}

.exception-details pre {
    font-weight: normal;
    color: #995050;
}

.exception-detail-value + .exception-detail-caption {
    margin-top: 10pt;
}