@media (min-width: 1201px) {
  /* CSS rules for screens wider than 1000px */
  #index {
    max-width:1000px;
    margin:auto !important;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 16px;
}

body {
  width: 100%;
  color: #444;
  font-family: 'Figtree', sans-serif;
  font-size: 1rem;
}

::placeholder {
   color: #938f8f;
   font-size: 0.9rem;
}
input[readonly]::placeholder {
   color: #004138;
}

#messages {
  display: block;
  position: fixed;
  top:50px;
  left: 25%;
  padding:20px;
  color: #555;
  background-color:#ffdfa3;
  border: 12px solid #fff;
  border-radius: 20px;
  margin: auto;
  width:50%;
  font-size:1.5rem;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index:1000;
}
#messages span.close {
  float:right;
  padding: 6px;
  position: absolute;
  top:0px;
  right:4px;
}
#messages span.close:hover {
  cursor: pointer;
}

.main {
  margin:0% auto;
  max-width:900px;
  position:relative;
  padding:0px 40px 40px 40px;
  text-align: center;
  display:none; /* relies on the actual page displaying .main */
}

#index {
  margin:0% 13% 0% 13%;
  padding:40px 40px 20px 40px;
  position:relative;
  font-size:1.6rem;
}
#footer-container {
  margin:0% 13% 0% 13%;
  padding:40px 40px 20px 40px;
  font-size:1.3rem;
}
#footer-container h1 {
  font-size:1.7rem;
  margin-top:20px;
  margin-bottom:10px;
}

.main p {
  margin-top: 40px;
  margin-bottom: 30px;
}

.para {
  text-align: left;
  margin-top: 40px;
  margin-bottom: 30px;
}

#footer .field {
  padding:0px 30px;
}

#howitworks .field {
  padding: 30px 30px;
  border-radius: 10px;
  margin: 0px;
  background: #fff8f0;
  color: #dd7d03;
  background: linear-gradient(215deg, rgb(249, 228, 205) 0%, rgb(255, 248, 240) 50%, rgb(247, 231, 213) 100%);
  border: 1px solid #f0c288;
  text-align:center;
}

#howitworks .icon {
  text-align:center;
  margin:10px 0;
}


h1 {
  font-size: 3.3rem;
  margin-bottom: 10px;
  font-weight:normal;
  margin: 0;
  text-shadow: 1px 1px 1px #fff;
  color: #079a85;
}

.subheader {
  padding-left:5px;
  padding-top:10px;
}

a, a:visited {
  color: #079a85;
}

a.disabled {
  pointer-events: none;
  color: #999 !important;
}

h2 {
  margin:10px 0;
  font-size: 1.7rem;
  font-weight:normal;
}

#howto-page1 h3,
#howto-page2 h3,
#howto-page3 h3 {
  color: #ff9208;
  font-size: 2.3rem;
  font-weight: normal;
}

.main h4 {
  font-weight: bold;
  font-size:1.7rem;
  padding: 12px;
  /*
  border-radius: 25px 25px 0px 0px;
  border-bottom: 1px solid #bfeae2;
  */
  color: #fff;
  background: #0ecdb1;
  text-shadow: 1px 1px 2px #a6a6a6;

/*
  background: rgb(165,247,235);
  background: linear-gradient(279deg, rgba(165,247,235,1) 0%, rgba(14,205,177,1) 100%);

  background: rgb(17,147,128);
  background: linear-gradient(279deg, rgba(17,147,128,1) 0%, rgba(14,205,177,1) 100%);

  background: rgb(14,205,177);
  background: linear-gradient(353deg, rgba(14,205,177,1) 0%, rgba(173,240,239,1) 39%, rgba(14,205,177,1) 100%);

  background: rgb(14,205,177);
  background: linear-gradient(353deg, rgba(14,205,177,1) 0%, rgba(43,255,224,1) 39%, rgba(14,205,177,1) 100%);

  background: rgb(14,205,177);
  background: linear-gradient(353deg, rgba(14,205,177,1) 0%, rgba(15,222,192,1) 39%, rgba(14,205,177,1) 100%);

  background: rgb(14,205,177);
  background: linear-gradient(328deg, rgba(14,205,177,1) 0%, rgba(15,237,205,1) 39%, rgba(14,205,177,1) 100%);
  background: linear-gradient(328deg, rgba(14,205,177,1) 0%, rgba(11,222,191,1) 39%, rgba(14,205,177,1) 100%);
*/

  /* background: rgb(14,205,177);
  background: linear-gradient(328deg, rgb(11, 174, 150) 0%, rgb(11, 222, 191) 39%, rgb(14, 176, 153) 100%);
  */
  background: linear-gradient(328deg, rgb(11, 174, 150) 0%, rgb(6, 213, 182) 39%, rgb(14, 176, 153) 100%);

}

#index h5 {
  margin-top:30px;
  margin-bottom:5px;
  font-weight:bold;
  color: #079a85;
  font-size:1.3rem;
  cursor: pointer;
}
#index h6 {
  font-weight:normal;
  font-size:1.4rem;
}
#index #faqheader {
  cursor: pointer;
}
#index #faqheader:hover {
  text-decoration:underline;
}
#index #faqheader img, #index #featuresheader img, .loud img {
  width: 2.4rem;
}

#index ul.faq {
  list-style-position:outside !important;
  margin-left:30px !important;
}
#index ul.faq li {
  margin-top:7px !important;
  margin-bottom:7px !important;
}



ul {
  list-style-position: inside;
}
ol {
  list-style-position: outside;
}

ol li {
  margin-top:8px;
  margin-bottom:8px;
  /* color: #ea8506; */
}

ol.outey, ul.outey {
  list-style-position: outside;
  margin-left:20px;
}
ul.outey li {
  margin-bottom:12px;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
}

input:focus, textarea:focus {
  outline: 1px solid #999;
}

code {
  font-family: monospace;
  background-color: #ddf9f5;
  border:1px solid #61bfb0;
  color: #333;
  padding: 2px 5px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  line-height:1.9em;
  font-weight:normal;
  font-size:1rem;
}

.quick-help code {
  font-size:0.8rem !important;
  margin-right:3px;
}

code:hover {
  cursor: pointer;
}

.logocontainer {
  width: 250px;
  height: 250px;
  background-image: url('/tfstate-green.png');
  background-repeat: no-repeat; /* Prevents tiling */
  background-position: center; /* Centers the image */
  background-size: cover; /* Scales image to cover the div's size */
  margin:auto;
  border-radius:50%;
  box-shadow:0px 0px 7px #ccc;
}
.logo {
  width: 35%;
  margin-bottom:1em;
  outline: none !important;
  opacity:0.8;
}

#logo {
  margin-bottom:20px;
}

#logo .smaller {
  width:200px !important;
}

.logocontainer.tiny {
  margin-top:20px;
  width:100px !important;
  height:100px !important;
  box-shadow: 0px 0px 5px #9bfdef !important;
}

#overlay {
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  background: rgba(25, 86, 89, 0.57);
  -webkit-transform: scale(1.8);
  -moz-transform: scale(1.8);
  -o-transform: scale(1.8);
  transform: scale(1.8);
  backdrop-filter: blur(5px);
}

table {
  width: 100%;
  margin:0 auto;
  border-collapse: collapse;
}

#featurescontainer table {
  margin-top:10px;
  border-radius: 10px;
  border:1px solid #f0c288;
  border-spacing: 0; /* Remove spacing between cells */
  overflow: hidden; /* Ensure corners are clipped */
  border-collapse: separate;
}

#featurescontainer table th {
  margin-top:20px;
  background: linear-gradient(215deg, rgb(249, 228, 205) 0%, rgb(255, 248, 240) 50%, rgb(247, 231, 213) 100%);
  padding:20px 10px 20px 10px;
  color: #ff9208;
  font-weight:normal;
  font-size:1.9rem;
  border-bottom:1px solid #f0d4b9;
}
#featurescontainer table td {
  padding:10px;
  border-bottom:1px solid #f0d4b9;
  background-color:#f4f4f4;
  font-size:1.2rem;
}
#featurescontainer table tr:last-child td {
  border-bottom: none; /* Remove the bottom border from the last row */
}
#featurescontainer table td img {
  /* position:relative;
  top:-6px; */
}


#compare {
  padding:20px;
}
#compare table {
  margin-top:10px;
}
#compare th {
  text-align:left;
  border-bottom:1px solid #999;
  padding-bottom:4px;
}
#compare td {
  padding-top:4px;
}

.calc-header {
  font-weight:bold;
  color:#dd7d03;
  text-align: center;
  font-size: 1.5rem;
}

#plans {
  width:620px;
  max-width:100%;
  border:1px solid #f0c288;
  border-radius: 15px;
  margin-top:20px;
  padding:40px 20px;
  margin:auto;
  /* overflow:hidden; prevent header corners from poking out */
  font-size: 1.2rem;
  background: linear-gradient(215deg, rgb(249, 228, 205) 0%, rgb(255, 248, 240) 50%, rgb(247, 231, 213) 100%);
}

#plans .header {
  margin:20px 20px 0px 20px;
}
#plans .field {
  text-align:left;
  margin:10px 20px 10px 20px;
  font-size: 1.4rem;
}
#plans .clump {
  display:inline-block;
  width:48%;
}

#plans select, #plans input {
  width:100% !important;
  font-size: 1.4rem !important;
}

.hidden {
  display:none !important;
}

#topmenu {
  text-align:center;
  background-color: rgba(255, 255, 255, 0.85);
  padding-right:30px;
  padding: 5px 20px 10px 20px;
  position: fixed;
  width: 100%;
  z-index: 80;
}
#topmenu::after {
  content: "";
  display: table;
  clear: both;
}
#topmenu a {
  font-size:1.2rem;
  color: #10a48f;
  font-weight: bold;
  margin-left:10px;
  text-decoration:none;
}
#topmenu a.clickedlink, #topmenu a:hover {
  color: #ff9208;
}
#topmenu h1 {
  font-size: 1.5rem;
  font-weight: normal;
  color:#10a48f;
  text-shadow:none;
  margin-top:3px;
}

#topmenu.scrolled {
  box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}

#topmenu-org-name {
  display:inline-block;
  padding-left:7px;
}

#menu {
  text-align: center;
  padding-top: 40px; /* because #topmenu is position:fixed */
  padding-bottom: 0px;
  background-color: #ffffff;
  font-size:1.6rem;
}

#footer {
  background-color: #f2f2f2;
  border-bottom: 15px solid #59bbad;
}

#menu a {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
}


/* create account page */

#account {
  background: rgba(101, 255, 205, 0.95);
  background: #80f0caf2;
  background: #a5ecd4f2;
  background-color: #c6f9e8f2;
  /* opacity: 0.95; */
  /* position: absolute;
  top: 250px;
  right: 0px;
  */
  width:500px;
  display:inline-block;
  padding:20px;
  border-radius: 20px;
  font-size: 1.3rem;
}
/* should be same width as above #account */
#resetlink {
  width:500px;
  display:inline-block;
  padding:5px;
  text-align:center;
  margin-top:10px;
}
#resetlink a:first-child {
  margin-right:10px;
}

#create-account-button {
  padding: 12px 16px 17px 16px;
}

.getstarted {
  text-align:center;
  font-size:1.7rem !important;
  padding:10px 20px !important;
  border-radius:6px;
  border:1px solid #fff !important;
  box-shadow:  0px 3px 6px #A7A7AA !important
}


span.label {
  margin-top:20px;
  margin-bottom:10px;
  display:block;
  text-align:left;
  position: relative;
}

span.label2 {
  margin-top:20px;
  margin-bottom:0px !important;
  display:block;
  text-align:left;
  position: relative;
}

input[type=text], input[type=password], input[type=number], textarea, select, .readonly-label {
  color:#333;
  margin:0;
  width: 100%;
  padding:4px;
  /* box-shadow: 0px 0px 17px rgba(0,0,0,0.1); */
  border:1px solid #ccc;
  font-family: inherit !important;
  font-size:1.3rem !important;
  letter-spacing: 0.008em;
  border-radius: 5px;
}

.password-show {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 6px;
  cursor: pointer;
  background: inherit;
  color: #079a85;
  font-size: 0.8rem;
  display: inline-block;
}

input[readonly], .readonly-label {
  color:#079a85;
  background-color: #a9edd6;
  background-color: #c6f9e8f2;
  border: 1px solid #a9edd6;
  pointer-events:none;
}

/* this style of flex is suited to blobs that stack up left to right, then descend to the next row */
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex .field {
  flex: 1 1 calc(33.333% - 60px);
}

/* this style of flex is suited to a pair of things side by side, ie 50% */
.flex .field50 {
  flex: 1 1 calc(50% - 10px);
}

input[type=number] {
  width:100px;
}

select {
  width: auto !important;
}

#account a.button {
  float:right;
}

input[type=button], input[type=submit], a.button {
  border:0px;
  font-size:1.3rem;
  font-weight:bold;
  font-family: 'Figtree', sans-serif;
  padding: 2px 15px 7px 15px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  outline:0;
  color:#fff;
  background-color:#079a85;
  background-color:#07b9a0;
  background-color:#10a48f;
  position:relative;
  display:inline-block;
  text-decoration: none;
  border-radius: 4px;
  text-shadow: 1px 1px 2px #919191;
}

#menu a.button {
  padding: 5px 18px 11px 22px !important;
  font-size: 1.3rem;
  top: 3px;
}

a.secondary-button {
  padding: 2px 15px 7px 15px !important;
  font-size: 1.3rem;
  background-color: transparent;
  color: #ff9208 !important;
  box-shadow: 0px 0px 0px;
  font-weight: bold;
  position:relative;
  display:inline-block;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
}
a.secondary-button.small {
  padding: 0px 10px 6px 10px !important;
}
#month-menu a.secondary-button {
  padding: 4px 10px 4px 10px !important;
}
a.secondary-button:hover {
  cursor: pointer;
  background: #fde5c7;
}
a.secondaryclicked {
  background: #f9d7ac !important;
}

#calc-total {
  font-weight: bold;
}

input[type=button]:hover, input[type=submit]:hover, a.button:hover {
  cursor: pointer;
  background-color: #05ceb2;
}

/* clickedbutton is for menu links (beware event handlers everywhere) .clicked is for all other generic buttons */
/* a.button:active,  */
input[type=button]:active, input[type=submit]:active, .clickedbutton, .clicked {
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.0) !important;
  background-color: #05ceb2 !important;
}


input[type=button]:disabled, input[type=submit]:disabled, a.button:disabled {
  background-color: #999 !important;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
  cursor: default;
}

#message {
  font-weight: normal;
  font-size: 1.2rem;
  display: block;
  background-color: #ddfff7;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  margin-bottom:20px;
}

.success {
  color: #079a85 !important;
}

#account .header {
  font-size: 1.8rem;
  margin: 20px 0;
  display:block;
}
#account_page_1, #account_page_2, #account_page_3 {
  margin-top:10px;
}


/* dashboard page */
.arrow {
  width: 10px !important;
  padding:0 10px 0px 10px !important;
  text-align:center;
  vertical-align:center;
}

.small {
  font-size: 15px !important;
  padding: 0px 10px 8px 10px !important;
}

.small img {
  width:20px;
  top:5px;
}

.secondary-button.tiny {
  font-size: 15px !important;
  padding: 0px 3px 8px 3px !important;
}

.vibrant {
  background-color: #f7954e !important;
}
.vibrant:hover {
  color: #fff !important;
  background-color: #f7954e !important;
}

span.statefilechooser, span.statefiletester {
  padding: 6px 12px 10px 12px;
  display:inline-block;
  background-color: #d0f9f3;
  color: #0c9a85;
  margin:2px;
  border-radius: 15px;
  font-weight:normal;
}
span.statefilechooser:hover, span.statefiletester:hover {
  background-color:#5dd7c4;
  color: #fff;
}

span.statefilechooser.active, span.statefiletester.active {
  background-color:#0ecdb1;
  color:#fff;
  font-weight:bold;
}
span.statefilechooser.active:after {
  content: ' \2713';
}
span.statefilechooser.active:hover, span.statefiletester.active:hover {
  background-color: #78f0de;
}

#repos div.repo, #infra div.infra, #alerts div.alert, #config div.config, #profile div.profile, #plancontainer div.plancontainer {
  text-align: left;
  clear: both;
  border-top: 1px solid #a1f8eb;
  padding:16px 16px;
  overflow: auto ;
  font-size:1.2rem;;
}

#profile, #repos, #infra, #alerts, #config {
  overflow: hidden;
  border:1px solid #0ecdb1;
  border-radius:12px;
}


#repos span, #infra span, #alerts span, #config span {
  display:inline-block;
  padding:4px 10px 4px 0;
}

.noturgent {
  padding-top:4px !important;
  padding-bottom:3px !important;
}

.tracking {
  color: #0cb79e ;
  /* font-weight:bold; */
}


.fadey {
    -webkit-animation: fadeinout 1.4s linear infinite;
     animation: fadeinout 1.4s linear  infinite;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* to spin an image around */
.rotatey {
  animation: rotateCircle 5s linear infinite;
}

@keyframes rotateCircle {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(360deg);
  }
}

/* animated loading widget */
.loader {

  /*
  margin: 0 0 2em;
  height: 100px;
  margin: 0 auto 1em;
  width: 60px;
  padding: 1em;
  vertical-align: top;
  */
  text-align: center;
  display: inline;
}
.loader svg path, .loader svg rect {
  fill: #FF6700;
}


/* infra page */

#howto-page1, #howto-page2, #howto-page3 {
  text-align: left !important;
  background-color: #ffffde;
  top: 10%;
  box-shadow: 0px 0px 7px #0003;
  box-shadow: 4px 4px 5px #0003;
  overflow: hidden;
  padding: 20px 20px 0px 20px;
  display:none;
  background: rgb(255, 252, 239);
  /* background: linear-gradient(328deg, rgba(255,255,222,1) 0%, rgba(255,255,182,1) 48%, rgba(255,255,222,1) 100%); */
}

body.no-scroll {
  /*
  overflow: hidden;
  */
}

.centreofattention {
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  display: block;
  margin: 0 auto;
  max-width: 1400px;
  /*
  height: 600px !important;
  overflow: auto;
  */
  z-index: 101;
  cursor: default !important;
  border-radius: 18px;
  font-size: 1.3rem;
  /*
  overflow-y: auto !important;
  max-height: 85vh;
  */
}

#popup-menu span {
  border-top: 1px solid #ccc;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-radius: 10px 10px 0px 0px;
  padding:8px 20px;
  display:inline-block;
  background-color:#fff;
  font-size:1.2rem;
  color: #333;
}

#popup-menu span:hover {
  cursor:pointer;
}

#popup-menu span.selected {
  background-color: #fffcef !important;
  border-bottom: 0px solid #eee !important;
  top:1px;
  position:relative;
  padding-top:9px !important;
}

.popup-body {
  clear:both;
  padding:40px 10px 10px 10px;
  border-top:1px solid #ccc;
}

.pane {
  width: 48%;
  float: left;
  display: inline-block;
  padding-right: 50px;
}

.closebutton {
  float:right;
  cursor: pointer;
  font-size: 1.3rem;
  border-radius: 10px;
  border: 1px solid transparent;
  display: inline-block;
  width: 46px;
  text-align: center;
  padding: 4px 4px 6px 4px;
  top: -10px;
  position: relative;
}

.closebutton:hover {
  color: #ff8060;
  cursor: pointer;
  border: 1px solid #ff8060;
}

.ai-example {
  color: #fff;
  font-size:1rem;
  background-color: #333;
  padding:24px;
  border-radius: 18px;
}

.extra-info-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 900px;
  height: 500px;
  color: #fff;
  font-size:0.8rem;
  background-color: #333;
  z-index: 9999;
  overflow-y: scroll;
  padding:24px;
  border-radius: 18px;
  display:none;
}

.extra-info-popup h3 {
  font-weight: normal !important;
}

.hide {
  display:none;
}

#pp_buttons {
  margin-top: 40px;
  text-align:center;
  max-width:200px;
}

.same_as_planchooser {
  display: inline-block;
  width: 31%;
  margin: 1% 1% 1% 0%;
}

#index .loud {
  color: #ff9208;
  font-weight: normal;
  text-align: center !important;
  font-size: 2.7rem;
  display: block;
  max-width: 70%;
  margin: auto;
}

.cloudlogo {
  height:80px;
  margin:10px;
  border-radius: 10px;
  padding: 10px;
  background: #eaeaea;
}

a.hint, a.hint:visited {
  color: #008875 !important;
}


/* sometimes we use <img src=/button-thing.svg> sometimes we inline the <svg> code */
a.button img, a.button svg, .help svg, .svg {
  top:5px;
  position:relative;
  width: 1.5rem;
}

.help .svg {
  cursor: pointer;
}

#menu a.button svg {
  top:4px !important;
}

h4 svg {
  top: 3px;
  position: relative;
  height:24px;
  width:24px;
}

.config-box h1 .help .svg {
  top: 3px;
  position: relative;
}

/* these are also SVGs */
.main h4 img {
  top: 4px;
  position: relative;
  height: 24px;
  width:24px;
}

.config-box {
  /* border-radius: 8px 8px 8px 8px !important; */
  display: inline-block;
  width: 48%;
  width: calc(50% - 10px);
  float:left;
  background: #fff;
  /* box-shadow: 0px 0px 4px #ffa42f; */
  box-shadow: 0px 1px 4px #b1b1b1;
  padding: 12px;
  border-radius: 5px;

}

.config-box.short {
  margin-bottom: 20px;
}

.config-box.tall {
  height:220px;
  margin-bottom: 20px;
  overflow:auto;
}
#config-box-infra, #config-box-frequency {
  margin-right: 20px;
}
#config-state-expand:hover {
  cursor:pointer;
}

.config-box h1 {
  font-size: 1.7rem;
  margin-bottom:10px;
}
.config-box select, .config-box input {
  margin-right:8px;
}

#config-state-search {
  width:100px;
  padding:1px 4px;
  display:inline-block;
  border:1px solid #ff9208;
  font-size:0.9rem !important;
}

#config-state-search::placeholder {
  color: #ff9208;
  font-weight:bold;
}

.help {
}

.popup {
  position: fixed;
  display: none;
  top: 18px;
  left: calc(50% - 250px);
  background-color: #fff;
  border: 1px solid #aaa;
  border: 8px solid #ffcd8e;
  padding: 20px;
  z-index: 1000;
  width: 500px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 2px 2px 5px #bbb;
  font-size:1.4rem;
}

.help h1 {
  font-size: 1.7rem;
  margin-bottom:30px;
  color: #ff9208;
  font-weight:bold;
}

.config_info {
  min-width:203px;
}

.config_info_2 {
  float: right;
  padding: 16px 20px 20px 20px !important;
  margin-top: 10px;
  display: inline-block;
  clear: right;
  width:300px;
  background-color: #c6f9e8f2;
  border-radius:10px;
  font-size:0.9rem;
}

/* first span */
#scan-results > div > span:first-child {
  margin-right:15px;
  display:inline-block;
  width:180px;
  white-space:nowrap;
  /* overflow-y:hidden; */
}

/* all spans, except the first span */
#scan-results > div > span:not(:first-child) {
}

#scan-results a:hover {
  cursor: pointer;
}

.login-account-options {
  font-size:0.8rem;
}

.login-account {
  background-color: #c6f9e8f2;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  height:200px;
  min-width: calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
  font-size:1rem;
}

.login-account h1 {
  font-size:1.2rem;
}
.login-account h2 {
  font-size:1rem;
}

.user_label_link {
  text-decoration: underline dashed;
  cursor: pointer;
}

.inactive {
  background-color: rgb(242, 242, 242) !important;
  color: #999 !important;
}
.inactive a {
  color: #777 !important;
}

.login-account a {
  font-weight: normal;
}


#invite, #credit, #api_token {
  width:80%;
  margin-right:2px;
}

.mandatory-star {
  font-size:90%;
  font-weight:bold;
  color:red;
  position:relative;
  top:-3px;
  font-style:normal;
}


/* The config activation slider */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  margin-left:20px;
  float:right;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 12px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #06d2b3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}
/* end slider */

.bubble-cloud {
  padding: 30px 20px;
  border-radius: 50%;
  border: 1px solid #079a85;
  display: inline-block;
  margin: 10px auto 0px auto;
  box-shadow: 0px 2px 8px #378e828c;
  text-decoration: none;
  background:#fff;
}
.bubble-cloud:active {
  background: radial-gradient(circle, rgb(255, 255, 255) 65%, rgb(89, 187, 173) 100%);
}
.bubble-cloud:hover {
  box-shadow: 1px 1px 2px #b4d5d0;
}
.bubble-cloud img {
  top:3px;
  position:relative;
}

.badge {
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  padding: 3px 4px;
  display:inline-block;
  margin-right:5px;
  width: 6.5rem;
  text-align:center;
  position:relative;
}

.badge:hover {
  border: 1px solid #888;
}

.progress {
    width: 100%;
    height: 1.3rem;
    background: #f3f3f3;
    border: 1px solid #ccc;
    margin-top:4px;
    position: relative;
    text-align: center;
    border-radius:4px;
    white-space:nowrap;
}
.progress-bar {
    height: 100%;
    background: #ccc;
    width: 0%;
    color: #333;
    line-height: 100%; /* Same as the height of the progress bar */
    text-align:left;
    padding-left:3px;
}
.progress-bar, #extra-info-popup-timer {
    font-size:0.8rem;
    font-family: "Courier New", Courier, monospace;
}
.progress-bar span {
  top:5px;
  position:relative;
}

#apidocs h3 {
  font-size:1.6rem !important;
  margin-top:30px;
  margin-bottom:15px;
}


.codeblock {
  font-size:0.8rem !important;
  margin-top:10px;
  display: flex;
  border-radius: 5px;
  background-color: #eee;
}
.codeblock pre {
  font-size:0.8rem !important;
  background-color: #eee;
  white-space: pre-wrap;
  padding:10px;
}

.codeblock span.panel {
  width: 80%;
  padding:20px;
  vertical-align:top;
  display:inline-block;
}
.codeblock span h1 {
  font-size:1.4rem;
  margin-top:10px;
  margin-bottom:20px;
  padding:10px;
  border-radius: 5px;
  background:#e0e0e0;
}

.codeitem.selected {
  font-weight:bold;
  text-decoration:none;
}
.codeitem.selected:before {
  content: "➤ "
}


#theme-chooser:hover {
  cursor:pointer;
}



/* animation for the header title */
#nametitle {
  font-weight:bold;
  font-size:6rem;
  background: 50% 100% / 50% 50% no-repeat
             radial-gradient(ellipse at bottom, #079a85, #79dbcd, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reveal 1500ms ease-in-out forwards 200ms,
             glow 1500ms linear 1 1500ms;
}

@keyframes reveal {
  80%{
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}

@keyframes glow {
  40% {
    text-shadow: 0 0 8px #75ecdb;
  }
}

.trademark {
  font-size:1.2rem;
  position:relative;
  top:-34px;
}