/*===== Page =====*/
/* Font-size in ems. To change anything, change the percent. */
/*
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
*/

/* Create global variables for text and background color */
:root {
    --color-text: #333;
    --color-text-disabled: #999;
    --color-background: #fcfcfc;
    --color-link: #333;
    --color-link-hover: #386d27;
    --color-button-text: #333;
    --color-button-background: #ddd;
    --color-button-hover-text: #fcfcfc;
    --color-button-hover-background: #386d27;
}

/* Add conditional styling for dark mode preference */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #fcfcfc;
        --color-text-disabled: #ccc;
        --color-background: #333;
        --color-link: #fcfcfc;
        --color-link-hover: #d9c215;
        --color-button-text: #fcfcfc;
        --color-button-background: #666;
        --color-button-hover-text: #fcfcfc;
        --color-button-hover-background: #386d27;
    }
}

/* Assign variables to page color and background */
html, body, form > div > div > div > div > div > div > div > div > div > div > span > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div * {
    color: var(--color-text);
    background-color: var(--color-background);
}

* {
    box-sizing: border-box;
}

html, body {
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

form {
    margin: 0 auto;
    padding: 0;
    /* width:940px; */
    width: 100%;
    height: 100%;
    min-height: 99%;
    position: relative;
    overflow: hidden;
}

div {
    margin: 0;
}

    div.clearfix {
        clear: both;
        height: 0;
        overflow: hidden;
    }

ul, ol {
    padding: 0 1.0rem;
}

/*===== Links =====*/
a:link, a:visited {
    text-decoration: underline;
    color: var(--color-link);
}

a:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}

a:focus {
    outline: none;
}

/*===== Texts =====*/
h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 2.5rem;
}

.h1-sub {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 0.72rem;
    padding-left: 0.15rem;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.7rem;
    margin: 0.5rem auto;
}

h3 {
    font-size: 1.1rem;
    font-weight: 200;
    margin: 0;
}

    h3::after {
        display: block;
        content: '';
        width: 3.0rem;
        height: 1px;
        background: var(--color-text);
        margin: 0 auto;
    }

h4 {
    font-size: 1.1rem;
    font-weight: normal;
    margin: 0;
}

.text-normal {
    font-size: 1.0rem;
    font-weight: normal;
}

.text-large {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0.5rem auto;
}

.text-small {
    font-size: 0.9rem;
    font-weight: normal;
}

.text-bold {
    font-weight: bold;
}

.p bottomspace {
    margin-bottom: 1.0rem;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-bottom {
    vertical-align: bottom;
}

/*===== Header =====*/
.header {
    margin-top: 1.0rem;
}

/*===== Company =====*/
.company img, .company h1 {
    float: left;
}

.company h1 {
    margin: 0.5rem 1.0rem 1.0rem 0.55rem;
    line-height: 1.0rem;
}

/*===== Page =====*/
.page, .page-header, .footer, .fronttext-container, herotext-container {
    width: 65rem;
    margin-left: auto;
    margin-right: auto;
}

.page {
    padding: 0 0 1.0rem 0;
}
/*===== Form =====*/
.form-content {
    width: 80%;
}

.form-entry {
    width: 100%;
    margin: 0.5rem 0;
}

.form-label {
    float: left;
    min-width: 8.5rem;
    text-align: left;
    margin: 0.5rem 0.5rem 0 0;
    font-size: 1.0rem;
}

.form-field {
    float: left;
    text-align: left;
    width: 70%;
}

.form-field-narrow {
    width: 40%;
}

div.form-field > * {
    width: 100%;
    font-family: Arial,Helvetica,sans-serif;
}

div.form-field > input, div.form-field > select {
    height: 2.0rem;
    font-size: 1.0rem;
}

.field-border {
    border: 1px solid #ccc;
}

.field-color {
    color: #333;
    background-color: #fcfcfc;
}

.field-color-req, .rc-anchor-light {
    color: #333;
    background-color: #ffffe1;
}

.field-color-err {
    color: #333;
    background-color: lightcoral;
}

input[type=submit] {
    font-family: Arial,Helvetica,sans-serif;
}

.form-msg {
    margin-top: 1.0rem;
    text-align: left;
    padding: 0.25rem;
}

/*===== Panels =====*/
.panel {
    text-align: center;
    margin: 0.25rem 0;
    padding: 0.5rem 0;
}

.panel-content {
    float: left;
    text-align: left;
    margin: 1.0rem 2.5rem;
}

.panel-content-left {
    float: left;
    width: 45%;
    text-align: center;
    vertical-align: top;
    margin: 1.0rem 0;
}

.panel-content-right {
    float: left;
    width: 55%;
    text-align: left;
    vertical-align: top;
    margin: 1.0rem 0;
}

.panel-left {
    float: left;
    width: 49.5%;
    margin: 0.25rem 0.5rem 0.25rem 0;
}

.panel-right {
    float: right;
    width: 49.5%;
    margin: 0.25rem 0 0.25rem 0;
}

.panel-front {
    width: 100%;
    height: 13.0rem;
    padding: 0; /* 1.0rem 2.0rem; */
}

.panel-round {
    border-radius: 0.5rem;
}

.panel-hero {
    width: 100%;
    height: 32rem;
    padding: 0; /* 1.0rem 2.0rem; */
    background-color: #ccc;
}

.bg-main {
    background: url(bg.webp) no-repeat #eee center;
    background-size: cover;
}

.bg-fern {
    background: url(fern.jpg) no-repeat #eee center;
    background-size: cover;
}

.bg-iris-got {
    background: url(iris_gotland.jpg) no-repeat #eee center;
    background-size: cover;
}

.bg-orkide-tokyo {
    background: url(orkide_tokyo.jpg) no-repeat #eee center;
    background-size: cover;
}

.bg-botaniska2 {
    background: url(ringve.jpg) no-repeat #eee center;
    background-size: cover;
}

.bg-about {
    background: url(iris_blue.jpg) no-repeat #eee center;
    background-size: cover;
}

.bg-saxifraga {
    background: url(saxifraga.jpg) no-repeat #eee center;
    background-size: cover;
}

.fronttext-container {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 100% !important;
    display: table;
}

.fronttext {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0.5rem;
}

.flexbox {
    display: flex;
    flex-direction: row;
    justify-content: left;
}

.herotext-container {
    display: table;
    color: #fff;
    height: 100%;
}

.herotext {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding: 0;
    width: 27rem;
}

.herotextem {
    color: #d9c215
}

.herofiller {
    width: auto;
}

/* ===== Navigation - Menu ===== */
.nav-wide {
    display: block;
    float: right;
}

.nav-narrow {
    display: none;
    float: right;
}

.menumain {
    font-size: 1.2rem;
    font-weight: normal;
}

    .menumain ul.level1 .selected {
        color: var(--color-link-hover);
    }

    .menumain a.level1 {
        margin: 0.6rem 1.4rem !important;
        padding: 0;
        border-bottom: 2px solid transparent;
    }

    .menumain .level1 .has-popup::after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        content: "\f107";
        position: absolute;
        top: 25%;
        right: 16px;
    }

    .menumain ul.level1 .li {
        display: block;
    }

    .menumain ul.level2 {
        right: -20px !important;
    }

    .menumain a.level2 {
        border-bottom: 0 !important;
        padding: 0 !important;
        margin: 1.2rem 1.4rem !important;
        transition: padding 0.3s ease;
    }

    .menumain a.level1:after {
        content: "";
        display: block;
        width: 0%;
        border-bottom: 2px solid var(--color-link-hover);
        transition: all 0.2s ease-in-out;
    }

    .menumain a.level1:hover:after {
        border-bottom: 2px solid var(--color-link-hover);
        width: 100%;
    }

    .menumain a.level2:hover {
        color: var(--color-link-hover);
        padding-left: 0.5rem !important;
        border-left: 2px solid var(--color-link-hover);
    }

/* #MenuWide */
#MenuWide .popout {
    background-image: none !important;
}

    #MenuWide .popout::after {
        padding: 0;
    }

#MenuWide ul.level2 {
    background-color: var(--color-background);
    border: 1px solid #ccc;
}

#MenuWide a.level2 {
    border-bottom: 1px solid #ccc;
}

/* #MenuNarrow */
#MenuNarrow {
    background-color: #fff;
    border: 1px solid #ccc;
    height: auto;
    position: absolute !important;
    z-index: 1;
    overflow: auto;
    padding: 0;
    font-family: inherit;
    display: none;
    right: 3px;
}

    #MenuNarrow a, #MenuNarrow span {
        text-decoration: none;
        color: inherit;
        font-weight: normal;
    }

    #MenuNarrow ul {
        width: 100% !important;
        border: 1px solid #ccc;
        border-bottom: none;
    }

    #MenuNarrow li {
        padding: 0;
        margin-bottom: 0;
    }

        #MenuNarrow li > div {
            border: none;
            border-bottom: 1px solid #ccc;
        }

li:hover .dxnb-item {
    border: 1px solid transparent;
    background-color: inherit;
}

#MenuNarrow li > a:hover {
    background-color: #ccc;
}

.dxWeb_nbCollapse.dxnb-button::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f105";
    padding-left: 0.75rem;
}

/*===== Panels =====*/
.footer {
    margin-bottom: 1.0rem;
    border-top: solid 1px #ddd;
    padding: 0.5rem 0;
}

/* ?????????????????????? */
/*
.dxWeb_nbExpand {
    display: none !important;
}

img .dxWeb_nbExpand::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f107";
    padding-left: 10px;
}
*/

/*===== Price list =====*/

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

    .row .entity {
        width: 50%;
        text-align: left;
    }

    .row .price {
        width: 25%;
        text-align: end;
    }

    .row .annual-price {
        width: 25%;
        text-align: end;
    }

.price .annual-price {
    white-space: nowrap;
}

.module-item, .total, .headline {
    padding: 0.2rem 0;
}

    .module-item:hover {
        background-color: var(--color-button-background);
    }

    .module-item .price,
    .module-item .annual-price {
        color: var(--color-text-disabled);
    }

    .module-item.checked .price,
    .module-item.checked .annual-price {
        color: var(--color-text);
    }

.software, .services, .total-sum {
    margin: 1.0rem 0 0.5rem 0;
    width: 70%;
}

.headline {
    font-weight: bold;
    padding-bottom: 0;
}

.total {
    font-weight: bold;
}

.total-sum .row {
    justify-content: space-between;
}

.total-line {
    margin: 0;
}

.disabled {
    opacity: 0.7;
}

.button-group {
    margin: 1.0rem 0;
    text-align: left;
}
/*==================*/

.sitemap {
    display: none;
    float: right;
    padding-top: 0.25rem;
}

.tool-button {
    font-size: 1.6rem;
    width: auto;
    border: none;
    display: inline-block;
    padding: 0.75rem 1.1rem;
    text-align: center;
    overflow: hidden;
    color: inherit;
    background-color: inherit;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}

    .tool-button:hover {
        color: #000;
        background-color: #ccc;
    }

        .tool-button[disabled="disabled"], .tool-button:hover[disabled="disabled"], .tool-button:disabled {
            color: #ccc;
            background-color: inherit;
        }

    .tool-button span {
        font-size: 0.8rem;
        padding-left: 0.5rem;
    }

/* ===== Button ===== */
.button {
    display: inline-block;
    width: 9.0rem;
    padding: 0.4rem 1.0rem;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-button-text);
    background-color: var(--color-button-background);
    border: 1px solid #666;
    border-radius: 0.5rem;
    font-size: 1.0rem;
}

.button-autowidth {
    width: auto;
}

.button:link, .button:visited {
    text-decoration: none;
}

.button:hover {
    color: var(--color-button-hover-text);
    background-color: var(--color-button-hover-background);
    box-shadow: 0 0.5rem 1.0rem 0 rgba(0,0,0,0.2),0 0.5rem 1.0rem 0 rgba(0,0,0,0.19)
}

.button-trial {
    display: inline-block;
    width: auto;
    height: 2.2rem;
    padding: 0.5rem 1.0rem;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: #fcfcfc !important;
    x background-color: #386d27;
    border: 1px solid #666;
    border-radius: 0.5rem;
    font-size: 1.0rem;
}

    .button-trial:link, .button-trial:visited {
        text-decoration: none;
    }

    .button-trial:hover {
        color: #fcfcfc;
        background-color: #666;
        box-shadow: 0 0.5rem 1.0rem 0 rgba(0,0,0,0.2),0 0.5rem 1.0rem 0 rgba(0,0,0,0.19)
    }

.button-hero {
    display: inline-block;
    width: 12rem;
    height: 2.2rem;
    padding: 0.5rem 1.0rem;
    margin: 0.25rem;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 1.0rem;
}

    .button-hero:link, .button-hero:visited {
        text-decoration: none;
    }

    .button-hero:hover {
        color: #fff !important;
        background-color: #bca612;
        border: 1px solid #bca612;
    }

.button-trial-hero {
    color: #333;
    background-color: #d9c215;
    border: 1px solid #d9c215;
}

    .button-trial-hero:link, .button-trial-hero:visited {
        color: #333;
    }

.button-demo-hero {
    color: #fff;
    background-color: transparent;
    border: 1px solid #d9c215;
}

    .button-demo-hero:link, .button-demo-hero:visited {
        color: #fff;
    }

.panel-link {
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-background);
}

    .panel-link:link, .panel-link:visited {
        text-decoration: none;
    }

    .panel-link:hover {
        color: var(--color-button-hover-text);
        background-color: var(--color-button-hover-background);
    }

.panel-testimonial {
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    border: solid 1px var(--color-button-background);
    border-radius: 0.5rem;
    align-self: stretch;
}

.panel-membership {
    text-align: center;
    margin: 0.25rem 0.25rem;
    padding: 0.25rem 0.25rem;
    background-color: #fcfcfc;
    border: solid 2px #eee;
}

/* ===== Expand/collapse ===== */
.expand-panel {
    /* border: 1px solid #70a349; */
    margin: 0.25rem 0;
    padding: 0.5rem 7.0rem;
}

.expand-panel-versions {
    /* border: 1px solid #70a349; */
    margin: 0.25rem 0;
    padding: 0.5rem 0;
}

.collapse {
    display: none;
    border-top: 1px solid #f0f0f0;
    padding: 0 2.0rem;
}

.user-list p {
    margin: 0 0 1.0rem 0;
}

.user-recent {
    font-size: 1.1rem;
}

.region {
    width: 100%;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.25rem;
    text-align: left;
    cursor: pointer;
}

    .region a {
        text-decoration: none;
    }

    .region img {
        width: 3.75rem;
        height: 3.75rem;
        border: none;
    }

    .region span {
        display: inline-block;
        text-align: left;
        vertical-align: top;
        min-width: 6.0rem;
        margin-top: 1.0rem;
        font-size: 1.3rem;
    }

    .region i {
        margin: 1.25rem 0.6rem;
    }

.envir {
    width: 100%;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.25rem;
    text-align: left;
    cursor: pointer;
}

    .envir a {
        text-decoration: none;
    }

    .envir span {
        display: inline-block;
        text-align: left;
        vertical-align: super;
        min-width: 6.0rem;
        margin-top: 1.3rem;
        font-size: 1.3rem;
    }

    .envir i {
        margin: 1.25rem 0.6rem;
    }

        .envir i:first-child {
            vertical-align: super;
        }

.require {
    width: 100%;
    margin: 0;
    text-align: left;
    cursor: pointer;
}

    .require span {
        display: inline-block;
        text-align: left;
        vertical-align: super;
        margin: 0 0 0 0.5rem;
        font-size: 1.3rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
    }

.note {
    width: 100%;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.25rem;
    text-align: left;
    cursor: pointer;
}

    .note a {
        text-decoration: none;
    }

    .note span {
        display: inline-block;
        text-align: left;
        vertical-align: super;
        min-width: 6.0rem;
        margin-top: 0.5rem;
        font-size: 1.0rem;
    }

    .note i {
        margin: 0.5rem 0.6rem;
    }

        .note i:first-child {
            vertical-align: super;
        }

.far {
    vertical-align: top;
    margin-right: 0.25rem;
}

.far-green {
    color: #70a349;
}

.list-icon {
    float: left;
    text-align: center;
    width: 3.75rem;
}

.list-text {
    float: left;
    text-align: left;
    width: 80%;
    margin-bottom: 1.25rem;
}

.fa-quote-left {
    font-size: 0.8rem;
}

.fa-quote-right {
    font-size: 0.8rem;
}

.fa-external-link-alt::before, .fa-file-download::before {
    padding-left: 0.5rem;
}

.people {
    width: 40%;
    margin: 1.0rem 1.0rem 1.0rem 0;
}

div.staticmap {
    float: left;
    width: 40%;
}

div.statictext {
    float: right;
    width: 58%;
}


/* ===== MEDIA definitions ===== */
@media print {
    html, body, textarea {
        background-color: #fff;
        font-size: 90%;
    }

    form .page-header, .page, .footer, .fronttext-container, herotext-container {
        width: 100%;
    }

    form {
        margin: 0.5rem 0.5rem;
    }

    .herotext {
        padding-left: 1.0rem
    }

    .noprint {
        display: none;
    }

    .print-expand {
        display: block !important;
    }

    .print-break-before {
        break-before: always;
        padding-top: 1.0rem;
    }
}

@media only screen and (min-width: 75rem) {
    .page, .page-header, .footer, .fronttext-container, herotext-container {
        width: 70rem;
    }
}

@media handheld,only screen and (max-width: 75rem) {
    .people {
        width: 100%;
    }
}

@media handheld,only screen and (max-width: 65rem) {
    html, body, textarea {
        font-size: 100%;
    }

    html, body {
        height: auto;
    }

    .nav-wide {
        display: none;
    }

    .nav-narrow {
        display: block;
    }

    .bg-main {
        background-position: unset;
    }

    .page, .page-header, .footer, .fronttext-container, herotext-container {
        width: 97%;
    }

    form {
        min-height: 100%;
    }

    .panel {
        padding: 0.5rem 1.0rem;
    }

    .panel-front, .panel-hero {
        padding: 0 !important;
    }

    .expand-panel {
        padding: 0.5rem 1.0rem;
    }

    .software, .services, .total-sum {
        margin: 1.0rem 0 0.5rem 0;
        width: 100%;
    }

    .form-content {
        width: 100%;
    }

    .form-entry {
        width: 100%;
    }

    .form-label {
        min-width: 0;
        text-align: left;
        margin: 0.25rem 0;
    }

    .form-field {
        width: 100%;
    }

    div.staticmap {
        width: 100%;
    }

    div.statictext {
        width: 100%;
    }
}

@media handheld,only screen and (max-width: 50rem) {
    .panel-front {
        height: auto;
    }

    .panel-left, .panel-right {
        float: left;
        width: 100%;
    }

    .panel-content-left, .panel-content-right {
        float: left;
        width: 100%;
    }

    .panel-content {
        margin: 0 0.25rem;
    }

    .flexbox {
        flex-direction: column;
    }

    .people {
        width: 100%;
    }

    .button-hero {
        width: 90%;
    }
}

@media handheld,only screen and (max-width: 40rem) {
}

@media handheld,only screen and (max-width: 30rem) {
}