/* BasisCMS Styles v1.16az */
/* Theme Setup 
    BasisCMS.dk
    https://htmlcolorcodes.com/colors/shades-of-gray/
    https://www.colorhexa.com/f2f4f9
    #8A9A5B Light
    #6082B6 Dark 
    #FF5733 CTA 
    Placeholder images https://placehold.co/ */

/* Custom */
a {color: #005248; }
a:hover {color: #009191; }
a:visited {color: #005248; }
h1 {padding: 0 0 1em 0; text-transform: uppercase; text-align: center;}
h2 {padding: 1em 0 0 0;}

/* font-face */
@font-face {
  font-family: 'Poppins'; src: url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); font-display: swap; }
html {font-size: 16px;}
body {background-color: #f2f4f9; margin: 0; font-family: 'Poppins', Arial; color: #36454F;}
.container {margin:0 auto; max-width: 960px;}
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.intro {margin: 0 15% 3em 15%;}
.image-right {float: right; max-width: 33%; padding: 0; margin: 0 0 1em 1em;}
.image-drop {box-shadow: 3px 2px 5px #bbb;}
.image-border {box-shadow: 0 0 5px #bbb;}
.image-half {float: right; max-width: 50%; padding: 0 0 0 1em;}
.image-full {max-width: 100%; padding: 0;}
.logo {text-align: left; width: 100%;}
.logo-img {padding-left: 32px; aspect-ratio: auto 431 / 135;}
.image-16-9 {aspect-ratio: auto 16 / 9;}
.image-4-5 {aspect-ratio: auto 4 / 5;}
.image-1-1 {aspect-ratio: auto 1 / 1;}
.image-auto {aspect-ratio: auto;}

/* Navigation */
.utility {padding: 0 2em 1em 0; text-transform: uppercase; font-size: 0.8em;}
.nav-1 {width: 100%; background-color: #fff; margin-right: 0; padding: 2em 0 0.5em 0;}
.nav-2 {width: 100%; background-color: #fff; margin-right: 0;}
menu.nav-1 {padding-inline-start: 0;}
menu:empty:not(:blank) {display: none;}
.nav-2 .nav-item-li {margin-bottom: 1em;}
.nav-item-li {display: inline; padding: 0.50em;}
.nav-item-1 {
    font-size: 1.25em; position: relative; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 0.25em; color: #000; }
.nav-item-1:visited {
    color: #000;}
.nav-item-1:hover {
    color: #009191;}
.nav-item-1::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: #009191; transition: width 0.2s ease-in-out; }
.nav-item-1:hover::after {
  width: 100%; transform: scaleX(1); cursor: pointer; }
.nav-item-1-selected {
    font-size: 1.25em; position: relative; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 0.25em; color: #000;}
.nav-item-1-selected:hover {
    color: #000;}
.nav-item-1-selected:visited {
    color: #000;}
.nav-item-1-selected::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #000; transition: width 1s ease-in-out; transition-delay: 0s;}
.nav-item-1-selected:hover::after {
  width: 20%; transform: scaleX(1); cursor: pointer; transition-delay: 1s; }
.nav-item-2 {
    font-size: 1em; position: relative; text-decoration: none; padding: 0.25em; color: #000;}
.nav-item-2:visited {
    color: #000;}
.nav-item-2:hover {
    color: #009191;}
.nav-item-2::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background-color: #009191; transition: width 0.2s ease-in-out; }
.nav-item-2:hover::after {
  width: 100%; transform: scaleX(1); cursor: pointer; }
.nav-item-2-selected {
    font-size: 1em; position: relative; text-decoration: none; padding: 0.25em; color: #000;}
.nav-item-2-selected:hover {
    color: #000;}
.nav-item-2-selected:visited {
    color: #000;}
.nav-item-2-selected::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; transition: width 1s ease-in-out; transition-delay: 0s; }
.nav-item-2-selected:hover::after {
  width: 20%; transform: scaleX(1); cursor: pointer; transition-delay: 1s; }
.link-list {
  list-style-type: none; /* remove the default disc */ }
.link-list li::before {
  content: "✓ "; /* add the ✓symbol before each list item */ }

/* Content */
.main {min-width: 360px; max-width: 960px; min-height: 100%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #fff; padding: 2em 0 0 0; box-shadow: 3px 2px 15px #aaa;}
.content {padding: 2em;}
.indent {padding: 8px 48px 8px 48px;}
.check-list::before {
  content: url('/images/check-icon.svg');
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-right: 0.5em; }
.arrow-right::before {
  content: url('/images/arrow-right.svg');
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-right: 0.5em; }
.tip::before {
  content: url('/images/tip-icon.svg');
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-right: 0.5em; 
}
.number-one::before {
  content: url('/images/1-one.svg');
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-right: 0.5em; }
.hero-container {max-width: 928px; height: auto; background: transparent; padding: 0 16px;}
.hero-image {width: 100%; height: auto;}
.hero-text {font-style: italic; font-size: 1.5em; padding: 32px 64px;}

/* Three boxes */
.three-boxes-flex { display: flex; justify-content: space-between; }
.box { width: 30%; padding: 1em; background-color: #f2f4f9; border: 1px solid #8A9A5B; margin: 1em 1em 1em 0; box-shadow: 3px 2px 5px #bbb;}
.box h4 {margin: 0;}
.last-box {margin: 1em 0 1em 0;}

/* footer */
#update {text-align: right; font-size: 0.80em;}
.lastUpdateDate {text-transform: lowercase;}
.footer {border-top: 1px solid #eee; text-align: center; padding: 16px 32px 32px 1em; font-size: 0.80em; color: #ccc; background: linear-gradient(#fff, #eee);}
.footer a {text-decoration: none; color: #ccc;}
hr {height: 1px; color: #ccc; background-color: #ccc; width: 80%; border: 1px;}

/* app */
    .form-flex-container {
      display: flex;
      flex-direction: row; /* Layout in a row for desktop */
      justify-content: space-between;
      align-items: stretch;
      border: black 1px solid;
      background: #80808025;
    }

    .form-container {
      flex: 1; /* Take up available space */
      margin: 10px; /* Add margin for spacing */
    }

    .label {
      margin-bottom: 5px;
    }

    .textarea {
      width: 100%; /* Take up full width */
    }

    .character-count {
      font-weight: bold;
    }

    .green-text {
      color: green;
    }

    .green-background {
      background-color: #00800025;
    }

    .red-text {
      color: red;
    }

    .red-background {
      background-color: #80000025;
    }

/* sitemap */
.sitemap {display:inline-block}
.sitemap:first-letter {text-transform: uppercase}

/* Web form */
input[type=text], select, input[type=email] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
font-family: 'Poppins', Arial; }
input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: 1px ridge #dedede; cursor: pointer;  font-size: 1em;
font-family: 'Poppins', Arial; }
input[type=submit]:hover { background-color: #fff; font-size: 1em; border: 1px solid #dedede; color: #000; font-family: 'Poppins', Arial;  }
#mc_embed_signup div { background-color: #f2f2f2; padding: 20px; }

/* Screen resolution responses */
/* Larger than 966px */
@media screen and (min-width: 970px) {
	.nav-1 {margin-right: -4px;}
	.container {margin:0 auto; max-width: 970px;}
} 
/* Less then 768px */
@media (max-width: 768px) {
  .three-boxes-flex { flex-direction: column; }
  .box { width: 90%; margin: 0 0 1em 0; box-shadow: none; background-color: #fff; border: 1px solid #8A9A5B;}
  .indent { padding: 0.5em 1em 0.5em 1em; }
  .last-box {margin: 0 0 1em 0;}
  .intro {margin: 0 5% 3em 5%;}
  .utility {padding: 0 2em 2em 0;}      
  .form-flex-container {
        flex-direction: column; /* Layout in a column for mobile */
    }

}

/* Pricing */
/* Hide the third column by default
table td:nth-child(3),
table th:nth-child(3) {
  display: none;
}  */
    table {
      border-collapse: collapse;
    }
    .plan table, th, td {
      border: 2px solid #005248;
    }
    .plan th, td {padding: 0.25em; vertical-align: top;}
    .plan th {background-color: #dedede;}
    .plan td:nth-child(1) {text-align: center;}
    .plan td:nth-child(4) {text-align: center;}
    .plan ul {margin-top: 0;}

/* Show the third column when the button is clicked */
#toggle-btn.active ~ table td:nth-child(3),
#toggle-btn.active ~ table th:nth-child(3) {
  display: table-cell;
}

/* Hide the fourth column when the button is clicked */
#toggle-btn.active ~ table td:nth-child(4),
#toggle-btn.active ~ table th:nth-child(4) {
  display: none;
}
.nav-2 {
  overflow: hidden;
}