/*
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: bold;
    src: url('/static/Roboto-Bold.ttf') format('truetype'); }
*/
body {
    margin: 0;
    background: white;
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.3;
    color: gray; }
h1, h2, h3 {
    font-size: 170%;
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #101010; }
h3, h4 {
    font-size: 140%;
    font-weight: bold;
    color: gray; }
a {
    color: blue; }
a:visited {
    color: purple; }
img {
    max-width: 100%; }

header {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 2em;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: #3ccbec;
    background-image: url('/static/headerbg.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center top;
    z-index: 0;
    padding: 1.8em 15vw; }
header a,
header a:visited {
    text-decoration: none;
    color: white; }
header h1 {
    margin: 0;
    height: 1.5em;
    line-height: 1.5; }
header h1 a,
header h1 a:visited {
    color: black; }
header h1 img {
    display: block;
    margin-top: -0.2em;
    height: 1.5em;
    width: auto; }


nav {
    text-align: right; }
nav a {
    display: inline-block;
    padding: 0.1em 0.5em;
    margin-left: 0.2em;
    text-decoration: none;
    border-top: solid 2px transparent;
    border-bottom: solid 2px transparent; }
nav a:hover ,
nav .current {
    border-bottom-color: white; }

article {
    padding: 1em 15vw; }

.flash {
    width: 100%;
    padding: 0.6em 0;
    background: #8ddbb3;
    color: black;
    margin: 0 auto 1em auto;
    text-align: center; }
.flash.error {
    background: crimson;
    color: white; }
.flash:before {
    padding-right: 0.6em;
    content: '\2691'; }
.flash.section:before {
    padding-right: 0;
    content: ''; }
.flash.error:before {
    content: '\26A0'; }
.flash a {
    color: inherit; }
.flash.section {
    background: #f3ede7; }

table {
    border-top: 1px solid lightgray;
    border-spacing: 0;
    border-collapse: collapse; }
table.listing {
    border-top: 0;
    width: 100%;
    overflow: auto;
    display: block;
    margin-bottom: 1em;
    padding-bottom: 1em; }
table.listing tbody {
    width: 100%;
    display: table; }
th, .listing th {
    font-weight: normal;
    color: black;
    border-bottom: solid 2px black;
    padding: 0.5rem;
    text-align: left; }
td, .listing td {
    border-bottom: solid 1px lightgray;
    padding: 0.5em; }
.spinner {
    background-image: url('/static/spinner.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
table img {
    height: 3em;
    width: auto;
    max-width: unset; }
.break {
    overflow-wrap: anywhere; }

#admin tr:hover {
    background: ivory; }
td.Edit, td.Delete, td.View {
    text-align: center;
    padding: 0;
    width: 1%; }

dl {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    grid-gap: 0.6em 2em; }
dt {
    margin: 0; padding: 0;
    color: black; }
dd {
    margin: 0; }
dt.table, dd.table {
    grid-column: span 4; }

form table {
    width: auto;
    overflow: unset;
    padding: 0;
    margin: 0; }
form th, form td {
    padding: 0;
    border: none;
    padding-bottom: 0.6em; }
form ul {
    margin: 0;
    padding: 0;
    list-style-type: none; }
form ul label {
    cursor: pointer; }
form li.disabled label {
    color: gray; }
form .description {
    margin-top: 0.6em;
    color: #b8b8b8; }
form input[type=checkbox] + p.description {
    cursor: pointer;
    color: black;
    display: inline; }

form.postLink {
    display: inline; }
form.postLink button {
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    color: blue; }
form.postLink textarea {
    display: none; }
form.postLink input[type="submit"] {
    background: none;
    color: blue;
    min-width: inherit;
    padding: inherit;
    border: none; }
td.spinner form.postLink input[type="submit"] {
    color: transparent; }

.yes, .no, .none {
    color: rgba(0,0,0,0);
    text-decoration: none; }
.yes:before {
    color: darkturquoise;
    content: '\2714'; }
.no:before {
    color: lightcoral;
    content: '\2718'; }
.none:before {
    color: lightgray;
    content: '\2014'; }

.View a, .Edit a, .Delete input[type="submit"] {
    text-indent: -9999px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.1em;
    width: 2.2em;
    min-width: unset;
    height: 2.2em;
    padding: 0;
    border: none;
    background-color: transparent;
    text-decoration: none;
    display: inline-block; }
.View a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDI4IDQyOCI+PHBhdGggZD0iTTM3OCw2SDUwQzIyLjQsNiwwLDI4LjQsMCw1NnYzMTZjMCwyNy42LDIyLjQsNTAsNTAsNTBoMzI4YzI3LjYsMCw1MC0yMi40LDUwLTUwVjU2QzQyOCwyOC40LDQwNS42LDYsMzc4LDZ6IE0yMCw1Ni4yIEMyMC4xLDM5LjYsMzMuNSwyNi4xLDUwLjEsMjZoMzI3LjdjMTYuNiwwLjEsMzAuMSwxMy42LDMwLjEsMzAuMlYxMDZIMjBWNTYuMnogTTQwOCwzNzEuOGMtMC4xLDE2LjYtMTMuNSwzMC4xLTMwLjEsMzAuMkg1MC4xIEMzMy41LDQwMS45LDIwLDM4OC40LDIwLDM3MS44VjEyNmgzODhWMzcxLjh6Ii8+PHBhdGggZD0iTTEwOSw2M0g2OGMtNS41LDAtMTAsNC41LTEwLDEwczQuNSwxMCwxMCwxMGg0MWM1LjUsMCwxMC00LjUsMTAtMTBTMTE0LjUsNjMsMTA5LDYzeiIvPjxwYXRoIGQ9Ik0zNTksNjNoLTQxYy01LjUsMC0xMCw0LjUtMTAsMTBzNC41LDEwLDEwLDEwaDQxYzUuNSwwLDEwLTQuNSwxMC0xMFMzNjQuNSw2MywzNTksNjN6Ii8+PHBhdGggZD0iTTIwNiwyMjdoLTc0Yy01LjUsMC0xMCw0LjUtMTAsMTBzNC41LDEwLDEwLDEwaDc0YzUuNSwwLDEwLTQuNSwxMC0xMFMyMTEuNSwyMjcsMjA2LDIyN3oiLz48cGF0aCBkPSJNMjk2LDI3N0gxMzJjLTUuNSwwLTEwLDQuNS0xMCwxMHM0LjUsMTAsMTAsMTBoMTY0YzUuNSwwLDEwLTQuNSwxMC0xMFMzMDEuNSwyNzcsMjk2LDI3N3oiLz48L3N2Zz4N');
}
.Edit a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzkwLjI2IDM5MC4yNiI+PHBhdGggZD0iTTM4Ny4zMzUsNzcuMDNsLTc0LjItNzQuMWMtMy45LTMuOS0xMC4yLTMuOS0xNC4xLDBsLTYyLjksNjIuOGwtMTk1LDE5NC42Yy0xLjQsMS4yLTIuNCwyLjctMyw0LjRsLTM3LjYsMTEyLjMgYy0xLjgsNS4yLDEuMSwxMC45LDYuMywxMi43YzIuMSwwLjcsNC4zLDAuNyw2LjMsMGwxMTIuNC0zNy42YzEuNy0wLjYsMy4yLTEuNiw0LjQtM2wxOTQuNi0xOTVsNjIuOC02MyBDMzkxLjIzNSw4Ny4yMywzOTEuMjM1LDgwLjkzLDM4Ny4zMzUsNzcuMDN6IE0yNS44MzUsMzY0LjQzbDI2LjEtNzhsNTEuOSw1MS45TDI1LjgzNSwzNjQuNDN6IE0xMjIuMzM1LDMyOC40M2wtNjAuNS02MC41IGwxODEuMy0xODFsNjAuMiw2MC4yTDEyMi4zMzUsMzI4LjQzeiBNMzE3LjQzNSwxMzMuMDNsLTYwLjEtNjAuMmw0OC44LTQ4LjdsNjAsNjBMMzE3LjQzNSwxMzMuMDN6Ii8+PC9zdmc+DQ==');
}
.Delete input[type="submit"] {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDA3LjUyMSA0MDcuNTIxIj48cGF0aCBkPSJNMzM1Ljk0LDExNC45NDRINzEuNTgxYy0yLjg2LTAuMjQzLTUuNjk0LDAuNzAyLTcuODM3LDIuNjEyYy0yLjEwNywyLjAyNC0zLjA4Myw0Ljk1NC0yLjYxMiw3LjgzN2wyNy4xNjcsMjM2LjY2OSBjMy4xODYsMjYuMDkzLDI1LjQzNiw0NS42NDcsNTEuNzIyLDQ1LjQ1M2gxMzEuNjU3YzI3LjAyNiwwLjM4NSw0OS43OTEtMjAuMTA0LDUyLjI0NS00Ny4wMmwyMi40NjUtMjM2LjE0NyBjMC4xMzktMi41MzMtMC44MTEtNS4wMDUtMi42MTItNi43OTJDMzQxLjYzNCwxMTUuNjQ2LDMzOC44LDExNC43MDEsMzM1Ljk0LDExNC45NDR6IE0zMDMuMDI2LDM1OS40NSBjLTEuNjQyLDE1LjkwOS0xNS4zNjYsMjcuODAzLTMxLjM0NywyNy4xNjdIMTQwLjAyMmMtMTUuNjk0LDAuNjM3LTI5LjE4NC0xMS4wMjQtMzAuODI1LTI2LjY0NUw4My4wNzUsMTM1Ljg0MmgyNDEuMzcxIEwzMDMuMDI2LDM1OS40NXoiLz48cGF0aCBkPSJNMzc0LjA3OSw0Ny4wMjZIMjY2LjQ1NFYzMC4zMDdjMC41OC0xNi4xNDgtMTIuMDQtMjkuNzA4LTI4LjE4OC0zMC4yODhjLTAuNTMtMC4wMTktMS4wNjEtMC4wMjQtMS41OTEtMC4wMTRoLTY1LjgyOSBjLTE2LjE1Ni0wLjI5OS0yOS40OTQsMTIuNTU1LTI5Ljc5MywyOC43MTFjLTAuMDEsMC41My0wLjAwNSwxLjA2MSwwLjAxNCwxLjU5MXYxNi43MThIMzMuNDQyIGMtNS43NzEsMC0xMC40NDksNC42NzgtMTAuNDQ5LDEwLjQ0OXM0LjY3OCwxMC40NDksMTAuNDQ5LDEwLjQ0OWgzNDAuNjM3YzUuNzcxLDAsMTAuNDQ5LTQuNjc4LDEwLjQ0OS0xMC40NDkgUzM3OS44NDksNDcuMDI2LDM3NC4wNzksNDcuMDI2eiBNMjQ1LjU1NiwzMC4zMDd2MTYuNzE4aC04My41OTJWMzAuMzA3Yy0wLjU4OS00LjU3OSwyLjY0Ni04Ljc2OCw3LjIyNS05LjM1NyBjMC41NDktMC4wNzEsMS4xMDQtMC4wODYsMS42NTYtMC4wNDdoNjUuODI5YzQuNjA1LTAuMzI2LDguNjAzLDMuMTQyLDguOTI5LDcuNzQ4QzI0NS42NDMsMjkuMjAzLDI0NS42MjcsMjkuNzU4LDI0NS41NTYsMzAuMzA3IHoiLz48L3N2Zz4N');
}

#pagination {
    text-align: left; }
#pagination a:visited {
    color: blue; }
#pagination a:hover ,
#pagination a.current {
    color: inherit;
    border-bottom-color: inherit; }
#pagination a.prev ,
#pagination a.next {
    color: inherit;
    width: 0.6em;
    text-indent: -9999px; }
#pagination a.prev:before {
    position: relative;
    left: 9999px;
    content: '\276E'; }
#pagination a.next:before {
    position: relative;
    left: 9999px;
    content: '\276F'; }

form {
    display: grid;
    grid-template-columns: 15% 60%;
    grid-template-columns: max-content 60%;
    grid-auto-rows: minmax(2.5em, auto);
    grid-gap: 0.6em 2em;
    align-items: start; }
label {
    color: black;
    padding-top: 0.6em; }
label.required:after {
    content: ' *';
    color: crimson; }
input, textarea, select {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: 0.6em 0.4em;
    border: 2px inset #ececec;
    background: #fbfbfb; }
input[type="text"], input[type="password"], input[type="file"], textarea {
    width: 100%;
    box-sizing: border-box; }
input[type="text"][disabled],
textarea[disabled] {
    color: #a89268;
    font-style: italic;
    background: #eee9db; }
input[type="checkbox"], input[type="radio"] {
    padding: unset;
    margin: 0.8em 0.4em; }
textarea {
    max-height: 11em;
    height: 50vh; }
input[type="submit"], button {
    font-family: inherit;
    font-size: inherit;
    color: black;
    cursor: pointer;
    width: auto;
    min-width: 12em;
    padding: 0.6em 3em;
    border-style: outset;
    background: lightgray; }
input[type="submit"].processing, button.processing {
    background: #cacaca;
    border-style: inset; }
form .error {
    margin: 0.6em 0 1.2em 0;
    padding: 0.6em;
    background: crimson;
    color: white; }
.inline input {
    margin-right: 0.8em;
    width: 4em; }
.inline select {
    margin-right: 0.8em;
    width: auto; }
.multiCheckbox {
    max-height: 50vh;
    overflow: auto;
    list-style-type: none;
    padding: 0;
    border: 2px inset #ececec;
    margin: 0; }
form a img {
    margin-top: 0.6em;
    max-width: 25%;
    height: auto; }

div .pell {
    border: 2px inset #ececec; }
div .pell-actionbar {
    border-bottom: 1px solid #dedede;
    background: #f0f0f0; }
div .pell-content {
    background: white;
    padding: 0.6em 0.4em; }
div .pell-button {
    width: unset;
    min-width: 30px;
    border: 1px outset transparent;
    margin: 0.4em; }
div .pell-button:hover {
    border-color: white;
    background: #d9d9d9; }

footer {
    font-style: italic;
    font-family: serif;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 2em;
    align-items: start; 
    justify-content: space-between;    
    font-size: 86%;
    margin: 1em 15vw;
    border-top: solid 2px black; }
footer .credits a {
    font-style: italic;
    font-family: serif;
    text-decoration: none;
    color: cornflowerblue; }


section#banner {
    min-height: 250px;
    padding-right: 388px;
    position: relative; }
section#banner img {
    position: absolute;
    top: -62px;
    right: 0px;
    width: 362px;
    height: 301px; }

section#plans ul {
    list-style: none;
    padding: 0; }
section#plans > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    grid-gap: 2em; }
section#plans > ul > li {
    border-bottom: solid 1px lightgray;
    padding: 0 0 1em 0;
    background: #f4f4f4; }
section#plans .top_head {
    background-color: #3ccbec;
    background-position: 53% top;
    background-image: url('/static/headerbg.png');
    border-bottom: solid 2px black;
    color: white;
    padding-bottom: 1em;
    margin-bottom: 1em; }
section#plans h4 {
    color: white;
    line-height: 2.4;
    margin: 0; }
section#about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4em; }

body.user_help section {
    padding-left: 60px; }
body.user_help h3 ,
body.user_help h4 {
    margin-left: -60px; }
body.user_help textarea {
    height: 7em; }

body.user_home_page h2 span {
    color: gray; }
body.user_home_page h3 {
    margin: 1em 0 0 0.5rem; }
body.user_home_page table.services th,
body.user_home_page table.services td {
    text-align: center;
    width: 10%; }
body.user_home_page table.services th:first-child,
body.user_home_page table.services td:first-child {
    text-align: left;
    width: 50%; }
body article pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: #a89268;
    font-style: italic;
    background: #eee9db;
    padding: 1em; }

body.git_edit .diagram {
    text-align: center; }

body.analytics_view_year #selector {
    margin: 3em;
    text-align: center; }
body.analytics_view_year #selector a {
    margin: 0 0.2em;
    color: black;
    display: inline-block;
    padding: 0.4em;
    background: #e1dcd6; }
body.analytics_view_year #selector a.on {
    background: #c1bebb; }

body.analytics_view_year #graphs {
    min-height: 58vh; }
body.analytics_view_year canvas {
    max-height: 20vh; }
p.bandwidth {
    padding-left: 100px; }
.analytics_blue:after {
    content: "\25a3";
    color: #3ccbec; }
.analytics_orange:after {
    content: "\25a3";
    color: #f28c6c; }

body.web_config textarea#requirements {
    font-family: monospace; }

.listing .pay {
    word-break: break-all;
    background: aliceblue; }
.listing .pay table {
    border: none; }
.listing .pay table td {
    border: none; }

form div.description div {
    display: none; }
form ul#register {
    margin: 0;
    padding-left: 0; }
form ul#register li {
    list-style: none; }

#choose {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-gap: 2em;
    margin: 1em 9em 3em 9em; }
#choose a {
    position: relative;
    background: #37bedd;
    border: 2px outset #000;
    color: white;
    text-align: center;
    padding: 0.6em 0.4em; }
#choose.pix a.pix:after,
#choose.boleto a.boleto:after,
#choose.card a.card:after {
    content: '';
    position: absolute;
    left: calc(50% - 20px);
    bottom: -12px;
    border-top: 12px solid #3f4c4f;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    color: inherit; }

tr.pay.boleto td {
    padding: 3em 1em; }
tr.pay.boleto p {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    color: black;
    font-family: serif;
    font-size: 110%; }
tr.pay.boleto canvas {
    height: auto;
    width: 80%; }

/* body.invoice_view_card */
.method.card .form_card_edit,
.method.card .form_card_edit td {
    border: none; }
.method.card .form_card_pay {
    margin-bottom: -1em; }
.method.card form {
    width: max-content;
    margin: 0 auto;
    grid-template-columns: 9em 18em; }
form .span2 {
    grid-column: 1/3; }
.method.card .pay {
    word-break: unset; }
.method.card .pay form {
    margin-bottom: 2em; }


@media only screen and (max-width: 900px) {

    header {
        grid-gap: 1em;
        grid-auto-flow: row;
        padding: 1.5em 8vw; }

    nav {
        text-align: left; }
    nav a {
        padding: 0.1em 0.5em;
        margin-right: 0.2em;
        margin-left: 0; }

    article {
        padding: 1em 8vw; }

    section#banner {
        padding-right: 0; }
    section#banner img {
        display: none; }

    section#plans > ul {
        grid-template-columns: 1fr; }

    section#about {
        grid-gap: 0;
        grid-template-columns: 1fr; }

    form {
        grid-template-columns: 1fr; }
    form > label {
        font-weight: bold; }

    footer {
        margin: 2em 8vw; }

}