:root {

  --dgxlgreen: #138046;

  --blueish1: #edf1f7;
  --blueish2: #6d7e98;
  --blueish3: #444d5c;

  --charminggreen: #44ab74;
  --warning: #741313;
  --consolegrey: var(--blueish3); /*#505457;*/
  --linkgrey: var(--blueish3); /*#505457;*/
  --brightred: #f32f2f;
  --tableodd: #edf1f7;
  --ctacolor: pink;

  --linkcolor: #23629f;
  --linkvisitedcolor: #6e0d9e;

  --almostblack: #222;

  --crazypink: #ec7ae0;
  --purple: #332544;

  --linkgreen: var(--consolegrey); /*#505457;*/

  --dgxlButtonSidePadding           : 6px;
  --dgxlMinButtonWidth              : 32px;
  --dgxlBorderRadius                : .25rem;
  --dgxlButtonIconColor             : #505457;
}

::placeholder {
  color: var(--blueish2);
}

/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/*---*/

body {
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  -webkit-font-smoothing: antialiased;
  margin:0;
  padding:0;

  font-size: 16px;

  counter-reset: heading-counter;

  /*background-color: #000022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='0 0 800 800'%3E%3Cg fill='none' %3E%3Cg stroke='%23026' stroke-width='17'%3E%3Cline x1='-8' y1='-8' x2='808' y2='808'/%3E%3Cline x1='-8' y1='792' x2='808' y2='1608'/%3E%3Cline x1='-8' y1='-808' x2='808' y2='8'/%3E%3C/g%3E%3Cg stroke='%23002163' stroke-width='16'%3E%3Cline x1='-8' y1='767' x2='808' y2='1583'/%3E%3Cline x1='-8' y1='17' x2='808' y2='833'/%3E%3Cline x1='-8' y1='-33' x2='808' y2='783'/%3E%3Cline x1='-8' y1='-783' x2='808' y2='33'/%3E%3C/g%3E%3Cg stroke='%23002060' stroke-width='15'%3E%3Cline x1='-8' y1='742' x2='808' y2='1558'/%3E%3Cline x1='-8' y1='42' x2='808' y2='858'/%3E%3Cline x1='-8' y1='-58' x2='808' y2='758'/%3E%3Cline x1='-8' y1='-758' x2='808' y2='58'/%3E%3C/g%3E%3Cg stroke='%23001f5c' stroke-width='14'%3E%3Cline x1='-8' y1='67' x2='808' y2='883'/%3E%3Cline x1='-8' y1='717' x2='808' y2='1533'/%3E%3Cline x1='-8' y1='-733' x2='808' y2='83'/%3E%3Cline x1='-8' y1='-83' x2='808' y2='733'/%3E%3C/g%3E%3Cg stroke='%23001e59' stroke-width='13'%3E%3Cline x1='-8' y1='92' x2='808' y2='908'/%3E%3Cline x1='-8' y1='692' x2='808' y2='1508'/%3E%3Cline x1='-8' y1='-108' x2='808' y2='708'/%3E%3Cline x1='-8' y1='-708' x2='808' y2='108'/%3E%3C/g%3E%3Cg stroke='%23001d56' stroke-width='12'%3E%3Cline x1='-8' y1='667' x2='808' y2='1483'/%3E%3Cline x1='-8' y1='117' x2='808' y2='933'/%3E%3Cline x1='-8' y1='-133' x2='808' y2='683'/%3E%3Cline x1='-8' y1='-683' x2='808' y2='133'/%3E%3C/g%3E%3Cg stroke='%23001c53' stroke-width='11'%3E%3Cline x1='-8' y1='642' x2='808' y2='1458'/%3E%3Cline x1='-8' y1='142' x2='808' y2='958'/%3E%3Cline x1='-8' y1='-158' x2='808' y2='658'/%3E%3Cline x1='-8' y1='-658' x2='808' y2='158'/%3E%3C/g%3E%3Cg stroke='%23001b4f' stroke-width='10'%3E%3Cline x1='-8' y1='167' x2='808' y2='983'/%3E%3Cline x1='-8' y1='617' x2='808' y2='1433'/%3E%3Cline x1='-8' y1='-633' x2='808' y2='183'/%3E%3Cline x1='-8' y1='-183' x2='808' y2='633'/%3E%3C/g%3E%3Cg stroke='%23001a4c' stroke-width='9'%3E%3Cline x1='-8' y1='592' x2='808' y2='1408'/%3E%3Cline x1='-8' y1='192' x2='808' y2='1008'/%3E%3Cline x1='-8' y1='-608' x2='808' y2='208'/%3E%3Cline x1='-8' y1='-208' x2='808' y2='608'/%3E%3C/g%3E%3Cg stroke='%23001949' stroke-width='8'%3E%3Cline x1='-8' y1='567' x2='808' y2='1383'/%3E%3Cline x1='-8' y1='217' x2='808' y2='1033'/%3E%3Cline x1='-8' y1='-233' x2='808' y2='583'/%3E%3Cline x1='-8' y1='-583' x2='808' y2='233'/%3E%3C/g%3E%3Cg stroke='%23001846' stroke-width='7'%3E%3Cline x1='-8' y1='242' x2='808' y2='1058'/%3E%3Cline x1='-8' y1='542' x2='808' y2='1358'/%3E%3Cline x1='-8' y1='-558' x2='808' y2='258'/%3E%3Cline x1='-8' y1='-258' x2='808' y2='558'/%3E%3C/g%3E%3Cg stroke='%23001743' stroke-width='6'%3E%3Cline x1='-8' y1='267' x2='808' y2='1083'/%3E%3Cline x1='-8' y1='517' x2='808' y2='1333'/%3E%3Cline x1='-8' y1='-533' x2='808' y2='283'/%3E%3Cline x1='-8' y1='-283' x2='808' y2='533'/%3E%3C/g%3E%3Cg stroke='%2300163f' stroke-width='5'%3E%3Cline x1='-8' y1='292' x2='808' y2='1108'/%3E%3Cline x1='-8' y1='492' x2='808' y2='1308'/%3E%3Cline x1='-8' y1='-308' x2='808' y2='508'/%3E%3Cline x1='-8' y1='-508' x2='808' y2='308'/%3E%3C/g%3E%3Cg stroke='%2300153c' stroke-width='4'%3E%3Cline x1='-8' y1='467' x2='808' y2='1283'/%3E%3Cline x1='-8' y1='317' x2='808' y2='1133'/%3E%3Cline x1='-8' y1='-333' x2='808' y2='483'/%3E%3Cline x1='-8' y1='-483' x2='808' y2='333'/%3E%3C/g%3E%3Cg stroke='%23001439' stroke-width='3'%3E%3Cline x1='-8' y1='342' x2='808' y2='1158'/%3E%3Cline x1='-8' y1='442' x2='808' y2='1258'/%3E%3Cline x1='-8' y1='-458' x2='808' y2='358'/%3E%3Cline x1='-8' y1='-358' x2='808' y2='458'/%3E%3C/g%3E%3Cg stroke='%23001336' stroke-width='2'%3E%3Cline x1='-8' y1='367' x2='808' y2='1183'/%3E%3Cline x1='-8' y1='417' x2='808' y2='1233'/%3E%3Cline x1='-8' y1='-433' x2='808' y2='383'/%3E%3Cline x1='-8' y1='-383' x2='808' y2='433'/%3E%3C/g%3E%3Cg stroke='%23013' stroke-width='1'%3E%3Cline x1='-8' y1='392' x2='808' y2='1208'/%3E%3Cline x1='-8' y1='-408' x2='808' y2='408'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
*/
}

.nav > span {
  display: flex;
}


.reseller-header {
  padding: 4rem 0;
  text-align: center;
}

.reseller-header h2 {
  margin: 0;
}


body.view-article .product-header {
  display: flex;
  align-items: center;
  font-size: .8rem;
  color: var(--linkgreen);
  justify-content: center;

/*  position: fixed;
  bottom:0;
  left: 0;
  right: 0;*/
/*  z-index: 10000;*/

  background: var(--blueish1);
  border: 1px solid var(--blueish2);
  border-radius: .25rem;
  height: 2rem;
  line-height: 2rem;

  display: none;
}

body.view-article .product-header > div {
  margin-left: .5rem;
}


.product-header .vs {
  padding: 0 1rem;
}

.product-header .logo-dgxl {
  padding-top: .4rem;
}

.product-header .logo-hot {
  margin-top: .8rem;
}

h3.compareh:before {
  counter-increment: heading-counter;
  content: counter(heading-counter) ". ";
}

.badges {
  margin-top:3rem;
  display: flex;
  justify-content: center;
  align-items:center;
}

.badges a {
  height: 54px;
}

a.badgelink {
  display: inline-block;
  border: 1px solid black;
  border-radius: 10px;
  /*width:250px;*/
  height:52px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-left: 10px;
  text-decoration: none;
  color: black;
}

a.badgelink img {
  height: 32px;
  margin-right: 10px;
}

.version {
  background: pink;
  border-radius: 4px;
  padding: 6px;
  margin-left: 16px;
  display: flex;
  align-items: center;
  font-size: 16px;

  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 99999;
}

.notice {
  background: pink;
  border-radius: 4px;
  padding: 6px;
  margin-left: 16px;
  display: flex;
  align-items: center;
  font-size: 16px;

  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 99999;
}

.badge-text-smaller {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}

.badge-text-larger {
  font-size: 20px;
  font-weight:bold;
  letter-spacing: 1px;
}

.version select {
  margin-left: 4px;
}

.eula {
  white-space: pre-line;
}

.backto {
  padding: 1rem 0;
}

#issuelist {
  padding: 2rem 0;
}

#issuelist a {
  color: var(--linkcolor);
}

#issuelist h4 {
  margin: 0;
}

#issuelist > div {
  margin-bottom: 1rem;
  display: flex;
  align-items: stretch;
}

#issuelist > div.old-issue {
  opacity: .5;
}

#issuelist .issue-count {
  background: var(--blueish1);
  border-radius: .25rem;
  display: flex;
  align-items: center;
  width: 4rem;
  text-align: right;
  justify-content: flex-end;
  font-family: monospace;
  padding: 0 .5rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.funfact {
  padding: 1rem;
  font-style: italic;
}

.loading {
  height: 300px;
  width: 100%;
  background: var(--blueish1);
  position: relative;
}

.loading .gridholder {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid var(--blueish2);
}

.warning {
  background: var(--ctacolor);
  padding: 1rem 0;
  border-radius: .25rem;
}

.warning p {
  margin: 0;
}

p {
  color: var(--almostblack);
}

p em {
  background: var(--blueish1);
  font-family: monospace;
  font-style: normal;
  font-size: .9rem;
  padding: 0 .1rem;
  white-space: pre;
}

p a,
table a {
  color: var(--linkcolor);
/*  font-weight: bold;*/
}

p a:hover,
table a:hover {
  text-decoration: none;
}

/*p a:visited,
table a:visited {
  color: var(--linkvisitedcolor);
}*/

h1, .big-text {
  font-size: 2rem;
  font-weight: bold;
}

img.icon {
  height: 3rem;
}

ul.changelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.changelog-list li {
  margin: 1rem 0;
}

ul.changelog-list li > div:first-child {
  font-weight: bold;
}

.section {
  padding: 0;
}

.logo2 {
  font-family: "Poppins", sans-serif;
  font-size:1.8rem;
}

.logo2 span {
  font-weight: bold;
  color: #138046;
}

.inbetween {
  margin: 5rem 0 4rem 0;
}

.inbetween h2 {
  margin: 0;
  font-family: "Poppins";
  font-size: 5rem;
  color: var(--consolegrey);
  color: black;
  font-weight: bold;
  word-break: break-word;
}

  .inbetween h2 + .limit-width-4 {
    margin-top: 1rem;
  }


/*---------------------------

  Edit Buttons
  (Codepen/JSFiddle)

---------------------------*/

.icon {
  width:  2em;
  height:  2em;
  display:  inline-block;
}

.icon.icon-codepen {

    background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkuMTg0IDYuMzg3bC0uMDE1LS4wNjctLjAxNC0uMDQtLjAyLS4wNmMtLjAwNy0uMDEyLS4wMTItLjAyNS0uMDItLjAzOGwtLjAyNy0uMDU0Yy0uMDEtLjAxMi0uMDE3LS4wMjQtLjAyNS0uMDM3LS4wMS0uMDE2LS4wMjMtLjAzLS4wMzQtLjA0N2wtLjAyOC0uMDM1LS4wNC0uMDQ0LS4wMzQtLjAzYy0uMDE0LS4wMTUtLjAzLS4wMjctLjA0Ni0uMDQtLjAxMi0uMDEtLjAyNS0uMDItLjAzNy0uMDI3bC0uMDE0LS4wMS04Ljc3My01LjcyYy0uMjc4LS4xODItLjYzOC0uMTgyLS45MTUgMEwuMzY3IDUuODU2bC0uMDE0LjAwOC0uMDM3LjAyOGMtLjAxNi4wMS0uMDMyLjAyNS0uMDQ3LjAzOC0uMDEyLjAxLS4wMjMuMDIyLS4wMzMuMDMyLS4wMTUuMDE0LS4wMjguMDMtLjA0Mi4wNDUtLjAxLjAxLS4wMi4wMjMtLjAyOC4wMzRsLS4wMzUuMDUtLjAyMy4wMzctLjAzLjA1M2MtLjAwNi4wMTQtLjAxLjAyNy0uMDE4LjA0LS4wMDguMDItLjAxNC4wNC0uMDIuMDYtLjAwNS4wMTItLjAxLjAyNi0uMDEzLjA0LS4wMDcuMDItLjAxLjA0NC0uMDE2LjA2NmwtLjAwNi4wMzVDLjAwMyA2LjQ1NyAwIDYuNDkgMCA2LjUyN3Y1LjcyMmMwIC4wMzQuMDAzLjA3LjAwOC4xMDUgMCAuMDEuMDA0LjAyMy4wMDYuMDM0bC4wMTUuMDY3Yy4wMDIuMDE0LjAwNy4wMjYuMDEuMDRsLjAyMi4wNi4wMi4wNC4wMjcuMDUzLjAyMi4wMzcuMDM1LjA1Yy4wMS4wMS4wMi4wMjIuMDI4LjAzM2wuMDQyLjA0NS4wMzIuMDNjLjAxNC4wMTQuMDMuMDI3LjA0Ni4wNGwuMDM3LjAyNi4wMTQuMDEgOC43NzQgNS43MmMuMTQuMDkyLjMuMTM3LjQ1OC4xMzcuMTYgMCAuMzItLjA0NS40NTgtLjEzNmw4Ljc3NC01LjcyMi4wMTQtLjAxYy4wMTItLjAxLjAyNS0uMDE4LjAzNy0uMDI3LjAxNy0uMDEuMDMzLS4wMjQuMDQ3LS4wMzdsLjAzNC0uMDNjLjAxNC0uMDE2LjAyOC0uMDMuMDQtLjA0NmwuMDMtLjAzNGMuMDEyLS4wMTcuMDI0LS4wMzIuMDM0LS4wNS4wMS0uMDEuMDE2LS4wMjQuMDI0LS4wMzYuMDEtLjAxOC4wMi0uMDM2LjAyOC0uMDU0bC4wMi0uMDQuMDItLjA2Yy4wMDQtLjAxMy4wMS0uMDI1LjAxMi0uMDQuMDA2LS4wMi4wMS0uMDQzLjAxNS0uMDY2bC4wMDctLjAzNGMuMDA0LS4wMzUuMDA3LS4wNy4wMDctLjEwNXYtNS43MmMwLS4wMzctLjAwMy0uMDcyLS4wMDctLjEwN2wtLjAwNi0uMDMzem0tOS41ODYgNC45MUw2LjY4IDkuMzkgOS42IDcuNDhsMi45MTggMS45MS0yLjkxOCAxLjkwN3ptLS44MjQtNS4yMmwtMy41NzcgMi4zNEwyLjMxIDYuNTNsNi40NjQtNC4yMTZ2My43NjR6TTMuNzE0IDkuMzlsLTIuMDY1IDEuMzQ4di0yLjdsMi4wNjMgMS4zNXptMS40ODMuOTdsMy41NzcgMi4zMzh2My43NjRMMi4zMSAxMi4yNDdsMi44ODctMS44ODh6bTUuMjI2IDIuMzM4TDE0IDEwLjM1OGwyLjg4NyAxLjg5LTYuNDY0IDQuMjE0di0zLjc2NHptNS4wNi0zLjMxbDIuMDY1LTEuMzV2Mi43bC0yLjA2NC0xLjM1ek0xNCA4LjQybC0zLjU3Ny0yLjM0VjIuMzE1bDYuNDY0IDQuMjE0TDE0IDguNDE2eiIgZmlsbD0iIzQ0NCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) center no-repeat,linear-gradient(transparent,transparent);
        background-size: auto, auto;
    background-size: contain;

}

.icon.icon-jsfiddle {

    background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyNCAxNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy4zNTIgMy42NWMuMTc1LS4yNy4zMy0uNTQ2LjUyLS44QzkuMDg4IDEuMjM3IDEwLjc0My4yOSAxMi44NC4wNWMzLjA3NC0uMzU0IDYuMDM3IDEuMjMgNy4yNTQgMy44NjIuNDA4Ljg4LjYgMS44MDIuNTQyIDIuNzYzLS4wMDcuMTEuMDMuMTU0LjEzNC4xOTggMS43Ny43MzggMi44NDcgMi40MiAyLjY5OCA0LjIwNi0uMTU0IDEuODQtMS42MyAzLjQxMi0zLjU4MiAzLjgxMi0uNDIuMDg2LS44NDYuMTMtMS4yNzguMDk3LS4wNjMtLjAwNi0uMTI2LS4wMDMtLjE5LS4wMDMtNC41MjQgMC05LjA1LS4wMDItMTMuNTc1IDAtLjgxNSAwLTEuNTktLjE1LTIuMzE1LS41Qy0uNjcgMTIuOTQtLjg3OCA4LjgwNCAyLjE1NiA2Ljk4OGMuMTIyLS4wNzQuMTUzLS4xMy4xMTUtLjI2NC0uNDctMS42NzIuNzgzLTMuNDEzIDIuNjE1LTMuNjQ3Ljg3NS0uMTEzIDEuNjc2LjA1NSAyLjQuNTMuMDIzLjAxNi4wNDguMDMuMDY3LjA0em0zLjA2NSA2LjY0M2MtLjExLjA4OC0uMjAyLjE2Ni0uMy4yNC0uNTE4LjM4LTEuMDk4LjUzNi0xLjc1LjQxLS41OS0uMTE0LTEuMDQzLS41NzgtMS4xMDQtMS4xMTQtLjA2My0uNTUyLjI1LTEuMDcyLjc5Ny0xLjMxLjM4LS4xNjMuNzc1LS4xNzMgMS4xNzMtLjA3LjY5LjE3NyAxLjIwNC41ODQgMS42NSAxLjA4Ny40ODQuNTQ1Ljk2IDEuMDk2IDEuNDcyIDEuNjE2IDEuMTMgMS4xNSAyLjUzIDEuNiA0LjE2MyAxLjIxOCAxLjE1My0uMjY4IDEuOTUtLjk1NiAyLjE5My0yLjA3LjI1LTEuMTMzLS4wOS0yLjEwNS0xLjExLTIuODItLjU3OC0uNDEtMS4yNDYtLjU3LTEuOTYtLjYtMS4wOTItLjA0Ny0yLjA1OC4yMjgtMi44Ni45NDUtLjAzNC4wMy0uMDg4LjA0LS4xMy4wNTdsLjU2LjYxNS41MTYuNTY2Yy4wMjMtLjAwNi4wMy0uMDA2LjAzMi0uMDA4bC4xODctLjE1Yy40OTItLjM4NSAxLjA1LS41NzUgMS43LS41LjY0NS4wNzQgMS4xNy41NjYgMS4yNDIgMS4xNzQuMDY4LjU3OC0uMzMyIDEuMTQtLjk1NCAxLjMzLS4zOTUuMTItLjc5LjEtMS4xNzgtLjAzMi0uNjQ4LS4yMi0xLjEyNi0uNjQtMS41NTYtMS4xMjgtLjQ5Ny0uNTY0LS45ODgtMS4xMzUtMS41MzQtMS42NTUtMS4wOC0xLjAyNy0yLjM5Mi0xLjQzMi0zLjkyLTEuMTItMS4xNi4yMzYtMi4zODIgMS4xNTUtMi4zOCAyLjY2MiAwIDEuMDUyLjQ2NCAxLjg1OCAxLjQyNyAyLjQwNi40Ny4yNjcuOTkuMzk0IDEuNTM2LjQzMi44MS4wNTcgMS41ODctLjA0MyAyLjI5OC0uNDQyLjMwMi0uMTcuNTc4LS4zNjcuODMtLjYwNWwtMS4wNC0xLjEzNXoiIGZpbGw9IiM0NDQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center no-repeat,linear-gradient(transparent,transparent);
        background-size: auto, auto;
    background-size: contain;

}

.edit-buttons {
  display:  flex;
/*  justify-content: flex-end;*/
  margin-top:  1rem;
  align-items: center;
}

.edit-button {
  display:  flex;
  align-items:  center;
  padding: 0 8px;
  cursor:  pointer;

  font-size: .8em;
  height: 44px;
  line-height: 41px;

  color: #000;
  background: #eaecee;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 3px;
  border-radius: 4px;
  cursor: pointer;


  padding:  0 12px;
  cursor:  pointer;

  font-size: 1em;
  height: 44px;
  line-height: 41px;

  color: #000;
  background: #eaecee;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 3px;
  border-radius: 4px;
  cursor: pointer;


  box-sizing: border-box;
  background-image: linear-gradient(#f7f8fa ,#e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--dgxlBorderRadius);
  box-shadow: rgb(255 255 255 / 60%) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
/*  display: flex;*/
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  overflow: hidden;
  padding: 0 var(--dgxlButtonSidePadding);
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  white-space: nowrap;
  /* flex-basis: var(--dgxlMinButtonWidth); */
  min-width: var(--dgxlMinButtonWidth);
  flex-grow: 0;


  margin-right: 1rem;


}



.databar {
display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
}


.databar > div {
  display: flex;
  align-items: center;
}

.github-eyecatcher {

  margin-top: 3rem;

}

.github-eyecatcher a {
  text-decoration: none;
  display: block;
  background: var(--blueish1);
  text-align: center;
  padding: 1rem 0;
  color: black;
  font-size: 1.2rem;
}

.github-eyecatcher a:hover {
  box-shadow: inset 0 0 1rem var(--blueish2);
}

.github-eyecatcher img {
  height: 3rem;
}



.urlbar {
  background: white;
/*  border-radius: 9999px;*/
  padding-left: 15px;
  border-left: 1px solid var(--blueish2);
  border-right: 1px solid var(--blueish2);
  box-sizing: border-box;
  font-size: .8rem;
  color: var(--consolegrey);
}

.examples img {
  padding: 1rem;
  border: 1px solid var(--blueish2);
/*  opacity: .5;*/
}

.example-sub {
  padding: 0 1rem;
}

.sitetitle {
  font-size: 1.2rem;
}

/* BROWSER BAR */

.browserbar {
  width: 100%;
  height: 30px;
  background: var(--blueish2);
  border-radius: 5px 5px 0 0;
/*  border-bottom: 1px solid #c7c7c7;
  border-top: 1px solid #e4e4e4;*/
  position: relative;
}
.browserbar:after,
.browserbar:before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blueish1);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  display: block;
}
.browserbar:before {
  left: 15px;
  box-shadow: 15px 0 0 0 var(--blueish1);
}
.browserbar:after {
  left: 45px;
}

.browserbar span {
  padding-left: 64px;
  display: block;
  height: 30px;
  line-height: 30px;
  color: var(--blueish1);
}

.browserwrapper {
  position: relative;
}

.browserwrapper img {
  width: 100%;
  border: 1px solid var(--blueish2);
  box-sizing: border-box;
  border-radius: 0 0 4px 4px;
}

.browserwrapper > div:last-child {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  padding: 1rem 0 .25rem 0;
  background: rgba(255,255,255,1);
}

.browserwrapper a {
  font-family: "Poppins";
  color: var(--dgxlgreen);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.browserwrapper a:hover {
  text-decoration: underline;
}


.center {
    text-align: center;
}



h1 {
  color: black;
  line-height: 1.2;
  margin:0;
  font-family: "Poppins";
  font-size: 2.75rem;
}

h2 {
  font-size:1.1rem;
  font-weight: normal;
  /*  color: rgb(55,65,81);*/
  line-height: 1.2;
  color: var(--consolegrey);
}





h3 {
  color: black;/*
  font-family: "Poppins";*/
}

.section {
  position: relative;
}

.nogap {
  grid-gap: 0;
}

.wrapper {
  max-width: 1024px;
  margin: 0 auto;

  line-height: 1.6;
  padding: 0 2rem;

  width: 100%;
  box-sizing: border-box;
}

.headerwrapper {
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.demo-viewport {
  position:relative;
  box-shadow: 0 6px 4px rgb(0,0,0,.2);
  border-radius: 8px;
  overflow:hidden;
}

/*#grid {
   note: when container has border-radius, chrome has scrollbar bug ;
  height: 60vh;
}*/

.round {
  width: 1rem;
  height:1rem;
  border-radius:1rem;
  background:rgb(75,85,99);
}

.round {
  margin-right: .5rem;
}

.round:last-child {
  margin-right: none;
}

.demo-viewport-actions {
  display: flex;
  justify-content: space-around;
}

.invisible {
  visibility: hidden;
}

.demo-viewport-bar {
  background:rgb(75,85,99);
  color: rgb(229,231,235);
  border-radius:18px;
  height: 36px;
  line-height:36px;
  padding: 0 32px;
  margin: 0 1rem;
  flex-grow:1;
  text-align: center;
}

.demo-viewport-content {

  background:white;
  margin-bottom: 8px;
}

.btn {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: #138046;
    padding: .5rem 1.25rem;
    font-size: .875rem;
/*    font-weight: 600;*/
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity));
/*    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);*/

    text-decoration:none;

    font-family: "Poppins";


    border-radius: .25rem;
    font-weight: normal;

}

.btn-large {
  padding: 1rem 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;

}

.btn-large:hover {
  background: #0dc54c;
  background: pink;
  color: black;
}


.section-footer {
  border-top: 2px solid var(--blueish1);
  padding-bottom: 3rem;
}

.section-footer a,
.section-footer h3 {
}

.section-footer a {
  color: black;
}

.section-footer a:hover {
  text-decoration: underline;
}

.section-footer h4 {
  color: var(--blueish2);
  margin: 2rem 0 0 0;
}

a.mailtolink {
  color: var(--linkcolor);
  text-decoration: underline;
}

/*a.mailtolink:visited {
  color: var(--linkvisitedcolor);
}*/

address {
  margin-top: 1rem;
  font-style: normal;
  color: var(--consolegrey);
  font-size: .8rem;
}

img.footer-logo {
  height: 2rem;
  margin-top: 2rem;
} 

img.footer-vc-logo {
  height: 1rem;
  display: inline-flex;
  margin-right: .25rem;
  vertical-align: top;
}

.section-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-footer a {
  text-decoration: none;
}

.badge {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.badge a {
  color: #000;
}

.badge a:hover {
  text-decoration: underline;
}

/*.badge {
  display: inline-block;
  background: #24273f;
  color: white;
  border-radius: 8px;
  padding: 8px 12px;
}

.badge img {
  height: 2rem;
  float:left;
  margin-right: 8px;
  border-radius: 2px;
}

.badge > div {
  float: left;
}

.badge > div:last-child {
  margin-left: 12px;
}

.mono {
  font-family: monospace;
}

.featured-on {
  text-transform: uppercase;
  font-size: .6rem;
}

.featured-site {
  font-weight:bold;
  font-size:1.2rem;
}*/


/* cards */

.card img {
  height: 6rem;
  border-radius:3rem;
}



.iconbar {
/*  position: sticky;*/
  top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;

  background: white;
  padding: 2rem 0;
  margin-bottom: 1rem;
}

.iconbar div:not(.plus, .equals) {
  border: 2px solid #ddd;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}


.iconbar div.plus,
.iconbar div.equals {
  font-size: 3rem;
  opacity: .25;
  margin: 0 .5rem;
}

.iconbar img {
  width: 60px;
  height: 60px;
}

.madeinnl {
/*  background: #ddd;*/
  font-size: .8rem;
  text-align: center;
  text-transform: lowercase;
}

.madeinnl > div {
    padding: .5rem 1rem;
}



.imagewrapper {

  border: 2px solid #ddd;
  overflow: hidden;

}

.imagewrapper,
.imagewrapper img {
}

.feature-switcher {
  display: flex;
}

ul.feature-menu {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  position: relative;
  z-index: 1;

}

ul.feature-menu li {
  padding: .5rem 2rem .5rem 0rem;

    position: relative;
    overflow: hidden;
}

ul.feature-menu li div {
      white-space: pre;
}


ul.feature-menu li.active {
  border: 2px solid var(--blueish1);
  border-right-color: white;
/*  border-left-color: white;*/
  background: white;
  border-radius: .25rem 0 0 .25rem;
  text-indent: 1rem;
  font-weight: bold;
  margin-left: -1rem;
}

ul.feature-menu li.active + li {
  border-top-color: none;
}

.feature-content img {
  display: block;
  margin: 0 auto;
  position: relative;
}

.feature-content img:after {
  position: relative;
  content: 'this is a screenshot';
}

.feature-image-wrapper {
   background: var(--blueish1);
   padding: 1rem;
   border-radius: .125rem;
   box-shadow: inset 0 0 10px rgb(0,0,0,.25);
}

.feature-menu-holder {
  display: flex;
  align-items: center;
/*  flex-direction: column;
  justify-content: space-between;*/
}

a#roadmap {
  text-align: center;
  margin-right: 1rem;
  border-radius: .25rem;
  background: #eee;
  margin-bottom: 0rem;
  padding: 1rem 0 0 0;
  display: block;
}

a#roadmap img {
  width: 48px;
  height: 48px;
}

a#roadmap:hover {
   box-shadow: inset 0 0 10px rgb(0,0,0,.1);
}

.howitsmade {
  background: #444;
  color: white;
  font-family: monospace;
  padding: .25rem;
}

.frameworkbar {
  margin: 0;
  color: var(--consolegrey);
  font-size: .8rem;
  margin-top: 1rem;
  display:flex;
  justify-content: space-between;
}

.frameworkbar img {
  width: 32px;
  height: 32px;
}

.fineprint {
  color: var(--consolegrey);
  font-size: .8rem;
  margin-top: 1rem;
}

/*---------------------------

  MAILING LIST

---------------------------*/

#mailinglist {
  text-align: center;
  padding: 0;
/*  border-top: 2px solid var(--lightgrey);
*/  margin-top: 3rem;


/*background: pink;
background: radial-gradient(circle, pink 0%, white 100%);
*/

  background: var(--blueish1);
  overflow: hidden;

/*  border-top: 2px solid var(--blueish1);
  border-bottom: 2px solid var(--blueish1);
*/}

#mailinglist .container {
  position: relative;
  padding: 2rem 0;
}

#mailinglist + .section-footer {
  border-top: none;
}

#mailinglist h2 {
  margin-top: 0;
/*  color: var(--blueish2);*/
  font-size: 2rem;
  font-family: "Poppins";
/*  color: white;*/
position: relative;
color: var(--almostblack);
}

#mc_embed_signup {
  position:relative;
}

#mc_embed_signup_scroll {
/*  display: flex;
  justify-content: center;*/
}

#mailinglist input[type="email"] {
  border-radius: .25rem;
  border-width: 2px;
  border-color: rgba(0,0,0,.25);
  border-style: solid;
/*  border-right: none;*/

/*  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
*/
  font-size: 1rem;
  padding: .75rem;
  border-color: rgb(219,112,147);
  margin-bottom:.5rem;
  width: 300px;
  max-width: 75%;
}

#mailinglist input[type="email"]:focus {
/*  border-color: #0dc54c;
  border-color: red;*/
}

#mailinglist input[type="submit"]{
 display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .25rem;
  border-width: 0px;
  border-color: var(--dgxlgreen);
  --tw-bg-opacity: 1;
  background-color: #138046;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(255,255,255,var(--tw-text-opacity));
/*  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);*/

  text-decoration:none;
/*
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;*/

  cursor: pointer;
  background: rgb(219,112,147);
  border-color:black;
  border-bottom: 3px solid rgb(168,81,110);
  font-size: 1.2rem;
}

#mailinglist input[type="submit"]:hover {
/*  background: pink;
  color: black;*/


  box-shadow: 0 0 8px white;

}

/* beta label */

span.label-beta {
  background: #f9e888;
  color: #917f1f;
  border-radius: 8px;
  padding: 0 8px;
  font-size: .8em;
  display: inline-block;
  vertical-align: middle;
}

.outward-link:after {

  content: '';
  background: yellow;
  background: url(/img/external.svg);
  width: 18px;
  height: 18px;
  background-size: 18px;
  vertical-align: top;
  position: relative;
  display: inline-block;
  margin-left: 4px;

}

/* STAND OUT */


/*---------------------------

  "Standout Boxes"

---------------------------*/

/*-----------------------

  Standout
  "Did you know?"

-----------------------*/


.standout {
  background: var(--blueish1);
  border-radius:  .25rem;
  padding:  2rem;

  display:  flex;
  align-items:  center;
  margin-top:  3rem;
}

.standout img {
  margin-right:  1rem;
}

.standout p {
  margin:  0;
}

.standouticon {
  width:  2.5rem;
  height:  2.5rem;
  margin-right:  1rem;
  flex-shrink: 0;
}

.icon-lightbulb {
  background-image:  url('/img/light-bulb.svg');
}

.download-buttons {

}

.download-option {
  margin-top: 3rem;
}

.download-buttons a {

    box-sizing: border-box;
    background-image: linear-gradient(rgb(247, 248, 250), rgb(231, 233, 236));
    border-color: rgb(173, 177, 184) rgb(162, 166, 172) rgb(141, 144, 150);
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    box-shadow: rgb(255 255 255 / 60%) 0px 1px 0px inset;
    color: rgb(15, 17, 17);
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    overflow: hidden;
    padding: 0px 6px;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    white-space: nowrap;
    min-width: 32px;
    flex-grow: 0;

}

/* codeblock */

.hljs {
    padding: 1.5rem !important;
    background: #fff !important;
}

.codeblock,
.resultblock {
  margin: 3rem 0;
}

.resultblock div[id^=grid],
#demo-container div[id^=grid] {
  border: 1px solid var(--consolegrey);
}

.codeblock.codeblock-tiny {
  margin: 1.5rem 0;
}

.codeblock .lang,
.resultblock .lang {
  font-family: monospace;
  color: black;
  font-weight: bold;
  font-size: .8rem;
  text-transform: uppercase;
}

.codeblock pre {
  margin: 0;
  tab-size: 2;

}

pre {
    border: 1px solid black;
    border-radius: .25rem;
}

pre .hljs {
  background: none !important;
}

/* discount */
/*
#checkout-bar {
  position: sticky;
  bottom: 0;
  background: white;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1rem 0;

}

.products > div {
  position: relative;
  border: 1px solid #eaecee;
}

.currency-options a {
  display: inline-block;
  padding: .75rem 1rem;
  border: 2px solid #138046;
  border-radius: .25rem;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table.license-table {
  width: 100%;
  table-layout: fixed;

  height: 1px;  will be ignored 
}

table.license-table tr,
table.license-table td {
  height: 100%;
}

table.license-table h2 {
  margin-bottom: .25rem;
}

table.license-table td {
  border-bottom: 2px solid #eaecee;
}

table.license-table td:last-child {
  width: 140px;

}

table.license-table td:last-child > div {
  display: flex;
  justify-content: space-between;
  align-items:center;
  position: relative;
  height: 100%;
}

.discount {
  position: absolute;
  background: yellow;
  top: 0;
  right: 0;
}*/
table.table-buy {
  border-collapse: collapse;
  border-top: none!important;
  border-right: none;
  border-left: none;
  border-bottom: none!important
}


table.table-buy th,
table.table-buy th.repeated-license-heading {
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  position: relative;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  padding: 5px 10px;
  white-space: normal;
  vertical-align: top;
}

table.table-buy th.repeated-license-heading {
  padding-top: 32px;
  padding-bottom: 20px;
}


table.table-buy th small {
  display: block;
  font-size: .9em;
  font-weight: 400;
  color: #a0a0a0;
  margin-top: .9em
}

table.table-buy td {
  border: 1px solid #e5e5e5;
  white-space: normal;
}

table.table-buy td.contains-page-menu {
  padding: 0;
  border: none;
  padding-bottom: 2em;
  min-width: 220px
}

table.table-buy td.noborder {
  border: none;
  padding: 0;
}

table.table-buy td.selectable:hover {
  background-color: #fff
}

table.table-buy td.selectable {
  border: 1px solid #e5e5e5;
  padding: 0;
  width: 20%;
  min-width: 168px;
  height: 220px;
  overflow: hidden;
  vertical-align: top
}

table.table-buy td.selectable .price-wrapper {
  padding: 0;
  position: relative;
  min-height: 185px;
  height: 100%
}

table.table-buy td.blank {
  border: none!important
}

table.table-buy .features td {
  text-align: center;
  vertical-align: middle;
  font-size: .9em;
}

table.table-buy .features.togglable {
  display: none;
}

table.table-buy .features.togglable.features-heading {
    /* make sticky yall */
/*  position: sticky;
  top: 0;
  z-index: 1;
  background: white;*/
}

table.table-buy .features.open.togglable {
  display: table-row
}

table.table-buy .features .toggle {
  color: var(--linkcolor);
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
/*  display: block;
  margin: .8em*/
}

table.table-buy td.linkcontainer {
  padding: 1em 0;
}

table.table-buy .features .feature-group {
  text-align: left;
  border: none;
/*  text-align: left;
  padding: .4em 0 .4em;
  border: none;
  border-bottom: 3px solid #e5e5e5*/
}

table.table-buy .features .feature-group:first-child {
  font-size: 1.4em
}

table.table-buy .features .feature-group.toggle-cell {
  text-align: center;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5
}

/*table.table-buy th.repeated-license-heading {
    padding: 0;

  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  position: relative;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  vertical-align: top;
}
table.table-buy .features .feature-group {



}*/


table.table-buy .positioner {
/*  position: relative;
  border-bottom: 2px solid black;
  height: 60px;
  padding: 0 10px;*/
}

table.table-buy .features .feature {
  background: #fafafa;
  width: 18%;
  min-width: 140px;
  padding: 10px
}

table.table-buy .features .feature.first {
  padding-left: 0;
  font-size: 1em;
  background: #fff
}

table.table-buy .features .feature .yes {
  color: var(--dgxlgreen);
  display: inline-block;
/*  background: url(img/yes.png) left no-repeat;
*//*  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMy44MjYgNi45N0w4LjMzIDEyLjQ2MmMtLjA0Ny4wNDgtLjEyNi4wNDgtLjE3NCAwbC0zLjEyLTMuMTJjLS4wNDgtLjA0OC0uMDQ4LS4xMjYgMC0uMTc1bC43NTgtLjc1OGMuMDUtLjA0OC4xMjctLjA0OC4xNzUgMGwyLjI3NCAyLjI3NCA0LjY1LTQuNjQ4Yy4wNDctLjA0OC4xMjYtLjA0OC4xNzQgMGwuNzU4Ljc1OGMuMDQ4LjA0OC4wNDguMTI2IDAgLjE3NSIgZmlsbD0iIzFFQjYwQSIgb3BhY2l0eT0iLjkiLz48Y2lyY2xlIHN0cm9rZT0iIzFFQjYwQSIgY3g9IjkiIGN5PSI5IiByPSI5Ii8+PC9nPjwvc3ZnPg==) left no-repeat, linear-gradient(transparent, transparent);
*/  
  background: url('/img/checkmark.png') left no-repeat;
  background-size: 18px;
  height: 18px;
  padding-left: 25px
}

table.table-buy .features .feature .unlimited {
  display: inline-block;
  background: url(img/unlimited.png) left no-repeat;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyNCAxMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4yMTIgMTAuODhDMi4xNCAxMC44OCAwIDcuOTY0IDAgNS4zNSAwIDIuODIgMi4yMzYgMCA1LjQ0NiAwYzMuMTk0IDAgNC44IDIuNTY3IDQuODY3IDIuNjc3LjIyLjM2Mi4xMDUuODM3LS4yNTcgMS4wNTgtLjEyLjA3NC0uMjU4LjExMy0uMzk4LjExMy0uMjcgMC0uNTEzLS4xMzYtLjY1NC0uMzY1LS4xMy0uMjA0LTEuMzEtMS45NDMtMy41NTgtMS45NDMtMi4zODggMC0zLjkxIDIuMjU2LTMuOTEgMy44MSAwIDEuNjY2IDEuMzk4IDMuOTkgMy42NzYgMy45OSAyLjE0NSAwIDMuODA3LTIuMDYgNS41NjctNC4yMzhDMTIuNzEgMi43MTIgMTQuOSAwIDE4LjExMyAwYzIuNjYgMCAzLjg5NiAxLjM1IDQuNDY1IDIuNDgzLjQxLjgyLjYyIDEuODEuNjIgMi45NCAwIDEuNzMzLTEuMTczIDUuMzEtNC43OTggNS4zMS0zLjA0MyAwLTQuNjc1LTEuOTY1LTUuMjEyLTIuNjEybC0uMTA4LS4xMjVjLS4yOTMtLjI4Mi0uMzE1LS43NDYtLjA1LTEuMDU1LjE0Ni0uMTcuMzU4LS4yNy41ODMtLjI3LjE4MiAwIC4zNi4wNjcuNS4xODcuMDkyLjA4LjE2LjE2My4yNTQuMjc4LjQ2Ny41NjMgMS43MDcgMi4wNiA0LjAzMiAyLjA2IDEuMjA2IDAgMi4wNzgtLjUyNiAyLjY2My0xLjYxLjQ5OC0uOTIuNi0xLjkyNy42LTIuMTQ1IDAtLjMzNSAwLTEuMzU0LS40NTYtMi4yNjQtLjU0Ni0xLjA4Ni0xLjU4OC0xLjYzNi0zLjA5Ni0xLjYzNi0yLjQ4MyAwLTQuMjYgMi4yLTYuMTQyIDQuNTMtMS45MSAyLjM2Ni0zLjg4NCA0LjgxLTYuNzYgNC44MSIgZmlsbD0iI0EzQTNCMyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) left no-repeat, linear-gradient(transparent, transparent);
  background-size: 23px;
  height: 18px;
  padding-left: 33px
}

table.table-buy .features .toggle.off {
/*  display: none*/
}

table.table-buy tr.firstrow th {
  background: white;
}

/*table.table-buy tr.firstrow.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
}

table.table-buy tr.firstrow.sticky th {

}*/

table.table-buy .features.open .toggle.off {
  display: block
}

table.table-buy .features.open .toggle.on {
  display: none
}

table.table-buy th.first,
table.table-buy td.first {
  border-left: 0;
  border-right: 0;
  width: 28%;
  text-align: left;
  font-size: 1.3em;
  padding: 1.25rem 0;
  vertical-align: top
}


/*table.table-buy td.first div {
  margin-top: -4px
}*/

table.table-buy .icon-discount {
  width: 46px;
  height: 27px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: bottom
}

.icon.icon-discount {
  background: url(img/icon-discount.png) no-repeat;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyNCAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuOTkgMTUuNzJjMCAzLjAzIDIuMjUgNS4yOCA1LjM3IDUuMjggMy4xNSAwIDUuNC0yLjI1IDUuNC01LjI4IDAtMy4wMy0yLjI1LTUuMzQtNS40LTUuMzQtMy4xMiAwLTUuMzcgMi4zMS01LjM3IDUuMzR6bTIuNDMgMGMwLTEuNzEgMS4yLTMgMi45NC0zczIuOTcgMS4yOSAyLjk3IDNjMCAxLjY4LTEuMjMgMi45Ny0yLjk3IDIuOTctMS43NCAwLTIuOTQtMS4yOS0yLjk0LTIuOTd6TTUuMSAyMC40M3YuMjdoMi43M0wxOC40NS41NFYuM2gtMi43M0w1LjEgMjAuNDN6TTAgNS4zNGMwIDMuMDMgMi4yNSA1LjI4IDUuMzcgNS4yOCAzLjE1IDAgNS40LTIuMjUgNS40LTUuMjhDMTAuNzcgMi4zMSA4LjUyIDAgNS4zNyAwIDIuMjUgMCAwIDIuMzEgMCA1LjM0em0yLjQzIDBjMC0xLjY4IDEuMi0zIDIuOTQtM3MyLjk3IDEuMzIgMi45NyAzLTEuMjMgMi45Ny0yLjk3IDIuOTdjLTEuNzQgMC0yLjk0LTEuMjktMi45NC0yLjk3eiIgZmlsbD0iIzNDQUJGRiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) center no-repeat, linear-gradient(transparent, transparent);
  background-size: contain
}

table.table-buy td.first.volume-discounts {
  font-size: 1.1em;
  vertical-align: middle
}

table.table-buy small {}

table.table-buy .plus {
  display: inline-block;
  width: 30px;
  text-align: center;
  margin: 0 12px 0 2px
}

table.table-buy .plus-note {
  color: #999;
  margin-left: 46px;
  margin-top: 10px;
  display: block
}

table.table-buy td.selectable {
  background-color: #fafafa
}

table.table-buy td.selected,
table.table-buy td.selected:hover {
  background-color: var(--dgxlgreen);
  color: #fff
}

table.table-buy .price .discounted,
table.table-buy .price .old {
  display: none
}

table.table-buy .cross .price .discounted.show-cross,
table.table-buy .cross .price .old,
table.table-buy .discount .price .discounted.show-discount,
table.table-buy .discount .price .old {
  display: inline-block
}

table.table-buy .cross .price .discounted.show-discount {
  display: none
}

table.table-buy .price-main {
  margin-top: 10px;
  margin-left: 60px;
  padding: 1.25rem 0;
}

table.table-buy .cross .price-main .price .old,
table.table-buy .discount .price-main .price .old {
  margin-left: 32px;
  margin-top: -10px
}

table.table-buy .cross.selected .price-main .price .old,
table.table-buy .discount.selected .price-main .price .old {
  margin-top: -10px
}

table.table-buy .cross .price .regular,
table.table-buy .discount .price .regular {
  display: none
}

table.table-buy .price span {
  display: inline-block
}

table.table-buy td.quantities {
  padding: 10px
}

table.table-buy .price .regular,
table.table-buy .price .discounted {
  font-size: 1.5em;
  font-weight: 400
}

table.table-buy .price .old {
  font-size: 1.3em;
  text-decoration: line-through;
  font-weight: 200
}

table.table-buy .price-sub .price .regular,
table.table-buy .price-sub .price .discounted {
  font-size: .9em
}

table.table-buy .price-sub .price .old {
  font-size: .9em
}

table.table-buy .price span.discount {
  height: 52px;
  width: 52px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  color: var(--dgxlgreen);
  text-align: right;
  padding-top: 2px;
  padding-right: 2px;
  display: none;

  color: white;
  color: black;

}

table.table-buy .price span.discount:after {
  height: 200%;
  width: 200%;
  position: absolute;
  top: -145%;
  left: 0;
  z-index: -1;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
  display: block;
  background-color: #fff;

  background-color: var(--dgxlgreen);
  background-color: var(--charminggreen);
  background-color: var(--ctacolor);

}

table.table-buy .cross .price span.discount.show-cross,
table.table-buy .discount .price span.discount.show-discount {
  display: block
}

table.table-buy .discount2 .price span.discount {
  display: block
}

table.table-buy .cross .price span.discount.show-discount {
  display: none
}

table.table-buy .price-sub {
  background: var(--dgxlgreen);
  background: var(--charminggreen);
  font-size: .9em;
  font-weight: 200;
  text-align: left;
  color: #fff;
/*  padding: 7px 0 7px 10px;*/
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
/*  width: 100%;
  box-sizing: border-box;*/
}

table.table-buy .price-sub-inner {
  padding: 8px;
}

table.table-buy .price-sub label.price {
  display: block;
}

table.table-buy .price-sub .price,
table.table-buy .price-sub .price .regular,
table.table-buy .price-sub .price .discounted,
table.table-buy .price-sub .price .old {
  font-size: .9em;
  font-weight: 200
}

table.table-buy .checked .price-sub {
  display: block
}

table.table-buy .checked.cross.cross-free .price-sub {
  display: none
}

table.table-buy .support-note {
  margin: .2em .2em 1em;
  font-size: .8em;
  font-weight: 700;
  color: var(--warning);
}

table.table-buy .support-included {
  color: white;
}

table.table-buy .price-license {
  text-align: center;
  font-size: .8em
}

table.table-buy .price-license a {
  color: #888;
  border-top: 1px solid #ccc;
  display: inline-block;
  padding-top: 15px;
  margin-top: 35px;
  text-align: center
}

table.table-buy .price-license a {
  color: #888;
  border-top: 1px solid #ccc;
  display: inline-block;
  padding-top: 15px;
  margin-top: 35px
}

table.table-buy .cross .price-license a,
table.table-buy .discount .price-license a {
  margin-top: 14px
}

table.table-buy .selected .price-license a {
  color: #fff
}

table.table-buy .selected.cross.cross-free .price-license a {
  color: #fff;
  border-top: 1px solid #fff;
  padding-top: 15px;
  margin-top: 14px;
  margin-left: 0;
  text-align: center
}

table.table-buy .totals td {
  border: none!important;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0
}

table.table-buy .totals td p {
  margin: 0 20px
}

table.table-buy .totals .totals-inner {
  border-left: 1px solid #e5e5e5;
  padding: 0;
  overflow: hidden
}

table.table-buy .totals .totals-inner span {
  vertical-align: middle
}

table.table-buy .totals .totals-inner .totals-sum {
  text-align: center;
  font-size: 18px
}

table.table-buy .totals .totals-inner .totals-sum #total,
table.table-buy .totals .totals-inner .totals-sum #total-currency {
  font-size: 30px;
  font-weight: 400;
  margin: 0;
}



span#total-prefix {
  margin-right: 10px;
}

table.table-buy .totals .totals-inner .totals-sum #tax-asterisk {
  font-size: 25px;
  font-weight: 400
}

table.table-buy .totals .checkout-btn {
  width: 100%;
padding:  0 12px;
  cursor:  pointer;

  font-size: 1em;
  height: 44px;
  line-height: 41px;

  color: #000;
  background: #eaecee;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 3px;
  border-radius: 4px;
  cursor: pointer;


  box-sizing: border-box;
  background-image: linear-gradient(#f7f8fa ,#e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--dgxlBorderRadius);
  box-shadow: rgb(255 255 255 / 60%) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
/*  display: flex;*/
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  overflow: hidden;
  padding: 0 var(--dgxlButtonSidePadding);
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  white-space: nowrap;
  /* flex-basis: var(--dgxlMinButtonWidth); */
  min-width: var(--dgxlMinButtonWidth);
  flex-grow: 0;


}

table.table-buy .totals .checkout-btn:hover {
  outline: 1px solid white;
  box-shadow: 0 0 4px var(--dgxlgreen);
}

table.table-buy .totals {
  background-color: #fff;
  border: 1px solid #fff
}

table.table-buy .totals td {
/*  position: sticky;
  bottom: 0;
  background-color: #fff;

  z-index: 10*/
  padding-top: 60px;
}

table.table-buy .totals .totals-inner #savepercent {
  color: #4a7ddf
}

table.table-buy .quantity-wrapper {
  padding: 15px 15px 5px;
  text-align: center;
  color: #888
}

table.table-buy .quantity-wrapper .price-license {
  clear: both;
  margin-top: 4px
}

table.table-buy .quantity-wrapper h3 {
  font-size: 1.2em;
  margin-top: 5px
}

table.table-buy .quantity-wrapper .ui-spinner {
  position: relative;
  max-width: 100px;
  display: inline-block
}

table.table-buy .disabled .quantity-wrapper {
  opacity: .4
}

table.table-buy .quantity-wrapper input.quantity {
  font-size: 1.2em;
  width: 58px;
  padding: 4px 10px;
  height: 34px;
  text-align: center;
  border: 1px solid #e3e3e3;
  color: #000;
  margin: 0
}

table.table-buy .quantity-wrapper .ui-spinner input.quantity {
  border-radius: 5px 0 0 5px;
  float: left
}

table.table-buy .quantity-wrapper .ui-spinner-button {
  color: #c1c3d3;
  width: 25px;
  height: 17px;
  display: inline-block;
  float: left;
  font-size: .7em;
  text-align: center
}

table.table-buy .quantity-wrapper .ui-spinner-button.ui-spinner-up {
  border-top: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-radius: 0 5px 0 0
}

table.table-buy .quantity-wrapper .ui-spinner-button.ui-spinner-down {
  border-bottom: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-radius: 0 0 5px 0
}


.license-name {
  display: none;
}

/*@media only screen and (max-width:1136px) {*/
@media only screen and (max-width:700px){

  .nav > span {
    padding-left: 2rem;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 1rem;
  }

  tr.totals td {
    text-align: center;
  }

  .price-sub-inner {
        display: flex;
    flex-direction: column;
    align-items: center;
  }

  table.table-buy {
    width: 100%;
  }
  table.table-buy th.first,
  table.table-buy td.first {
    padding: 2em 0 0
  }
  table.table-buy th,
  table.table-buy td,
  table.table-buy th.first,
  table.table-buy td.first,
  table.table-buy td.selectable,
  table.table-buy .features .feature {
    display: block;
    width: 100%;
    padding: 1em;
    position: relative;

    padding: 0;


  }

  table.table-buy .features .feature {

    border-left: none;
    border-right: none;
        padding: 4px 0;

  }

  table.table-buy .features .feature span {
    padding-right: 8px;
  }

  table.table-buy td.feature-group {
    padding-top: 20px;
  }

  table.table-buy tr.verylastrow td:last-child {
    margin-bottom: 30px;
  }

    table.table-buy th.first,
  table.table-buy td.first {
    padding: 2em 0;
  }
  table.table-buy th.md-hide,
  table.table-buy td.md-hide {
    display: none
  }
  table.table-buy .features .feature {
    text-align: right
  }
  table.table-buy .features .feature.first {
    text-align: left;
    padding-top: 20px;
  }
  table.table-buy .features .feature span {
    display: block
  }
  table.table-buy td.selectable,
  table.table-buy td.selectable .price-wrapper {
    height: auto;
    padding: 0
  }
  table.table-buy .price-main {
    margin: 0;
    padding: 15px 15px 0!important
  }
  table.table-buy .price span.discount {
    height: 70px;
    width: 70px
  }
  table.table-buy .cross .price br,
  table.table-buy .discount .price br {
    display: none
  }
  table.table-buy .cross .price .discounted.show-cross,
  table.table-buy .cross .price .old,
  table.table-buy .discount .price .discounted.show-discount,
  table.table-buy .discount .price .old {}
  table.table-buy .price-sub {
    position: relative;
    top: auto;
    left: auto;
    clear: left
  }

  table.table-buy .price-license a {
    display: none;
  }

  table.table-buy .price-license {
    float: left;
    text-align: left;
    font-size: 1em;
    padding-left: 8px;
  }

/*  table.table-buy .price-license {
    text-align: left;
    float: left
  }
  table.table-buy .price-license a,
  table.table-buy .selected .price-license a {
    border-top: none;
    display: inline-block;
    padding-top: 0;
    margin-top: 4px;
    margin-left: 50px

    margin: 0;
  }*/
  table.table-buy .quantities.disabled {
    display: none
  }
  table.table-buy .quantity-wrapper {
    text-align: left
  }
  table.table-buy .quantities .price-license a {
    margin-left: 0
  }
  table.table-buy .totals .totals-inner {
    padding: 20px;
    border: none;
    text-align: center!important
  }
  table.table-buy .totals .totals-inner button {
    float: none!important;
    padding: 10px!important
  }
  table.table-buy .totals .totals-inner .totals-sum {
    float: none!important;
    width: auto;
    margin-bottom: 15px
  }

  /* hide stuff */

  .md-only {
      display: initial!important;
  }

  .md-hide {
      display: none!important;
  }

  .license-name {
    display: block;
    text-align: center;
    padding-top: 2em;
  }

  table.table-buy th.repeated-license-heading {
    display: none;
  }

  table.table-buy th.md-hide,
  table.table-buy td.md-hide {
    display: none;
  }

}
/*
table.table-buy input[type=checkbox] {
  width: 1.7em;
  height: 1.7em;
  vertical-align: middle;
  appearance: none;
  outline: none;
  -moz-appearance: checkbox;
  -webkit-appearance: none;
  background: url(img/cb.png) no-repeat;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+NjMwRDhCMEYtMzJFMC00MjM5LTg3NzEtMjFGQUVDQTQ1MjkxPC90aXRsZT48Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlPSIjM0NBQkZGIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=) center no-repeat, linear-gradient(transparent, transparent);
  background-size: cover;
  margin-top: -1px;
  margin-left: -1px
}

table.table-buy .price-sub input[type=checkbox] {
  background: url(img/cb-2.png) no-repeat;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPjU3Q0E0REVDLUFEQTktNDVDMy1BNUJBLUVDRTI0NzE0QkY2NzwvdGl0bGU+PGRlZnM+PGNpcmNsZSBpZD0iYiIgY3g9IjkiIGN5PSI5IiByPSI5Ii8+PGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJhIj48ZmVNb3JwaG9sb2d5IHJhZGl1cz0iLjUiIG9wZXJhdG9yPSJkaWxhdGUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dTcHJlYWRPdXRlcjEiLz48ZmVPZmZzZXQgZHk9IjEiIGluPSJzaGFkb3dTcHJlYWRPdXRlcjEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMzEwMTUwNTg5IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBzdHJva2U9IiNGRkYiIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjwvZz48L3N2Zz4=) center no-repeat, linear-gradient(transparent, transparent);
  background-size: cover
}

table.table-buy input[type=checkbox]:checked {
  background: url(img/cb.png) no-repeat;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPjU3Q0E0REVDLUFEQTktNDVDMy1BNUJBLUVDRTI0NzE0QkY2NzwvdGl0bGU+PGRlZnM+PGNpcmNsZSBpZD0iYiIgY3g9IjkiIGN5PSI5IiByPSI5Ii8+PGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJhIj48ZmVNb3JwaG9sb2d5IHJhZGl1cz0iLjUiIG9wZXJhdG9yPSJkaWxhdGUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dTcHJlYWRPdXRlcjEiLz48ZmVPZmZzZXQgZHk9IjEiIGluPSJzaGFkb3dTcHJlYWRPdXRlcjEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMzEwMTUwNTg5IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBzdHJva2U9IiNGRkYiIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjxwYXRoIGQ9Ik0xNi44MjYgOC45N2wtNS40OTUgNS40OTNjLS4wNDcuMDQ4LS4xMjYuMDQ4LS4xNzQgMGwtMy4xMi0zLjEyYy0uMDQ4LS4wNDgtLjA0OC0uMTI2IDAtLjE3NWwuNzU4LS43NThjLjA1LS4wNDguMTI3LS4wNDguMTc1IDBsMi4yNzQgMi4yNzQgNC42NS00LjY0OGMuMDQ3LS4wNDguMTI2LS4wNDguMTc0IDBsLjc1OC43NThjLjA0OC4wNDguMDQ4LjEyNiAwIC4xNzUiIGZpbGw9IiMzQ0FCRkYiIG9wYWNpdHk9Ii45Ii8+PC9nPjwvc3ZnPg==) center no-repeat, linear-gradient(transparent, transparent);
  background-size: cover
}

table.table-buy input[type=checkbox]:disabled {
  pointer-events: none
}*/

table.table-buy .price-sub input.check1 {
  float: left
}

.tax-info {
  padding: 15px;
  border: 1px solid #e5e5e5;
  background: #fafafa
}



/* OWN */

tr.totals a {

color: #3cabff;
    padding: 8px 15px;
    border-radius: 4px;
    background-color: #fff;
    font-weight: 400;
    text-decoration: none;
/*    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;*/
    white-space: nowrap;

background-color: var(--dgxlgreen);
    color: black;
    margin-top: 4px;
    margin-bottom: 4px;
    font-weight: 400;


  font-family: monospace;

  margin-right: 4px;


}

tr.totals a.selectedCurrency {
  outline: 2px solid var(--dgxlgreen);
}

tr.totals a:hover {
  outline: 1px solid white;
  box-shadow: 0 0 4px var(--dgxlgreen);
}


/*input[type="checkbox"] {
  display: none;
}*/

table.table-buy .price-main {
  margin: 0;
  text-align: center;
}

table.table-buy .discount .price-main .price .old {
  margin-left: 0;
}

.product-logo-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.product-version-number {
  margin-left: .5rem;
}

.product-logo {
  height: 1.5rem;
}

.price-license.md-only {
  display: none;
}

.checkout-block {
  display: flex;
  justify-content: center;
}

table.table-buy td.currentlySelected,
table.table-buy td.currentlySelected:hover {
  /*  background: blue;*/
  box-shadow: inset 0 0 0 1px var(--dgxlgreen), inset 0 0 10px var(--dgxlgreen);
  background: var(--dgxlgreen);
/*  background: #53d18e;*/
  color: white;
}

table.table-buy td.currentlySelected .price span.discount {
  /*color: var(--dgxlgreen);*/
}

table.table-buy td.currentlySelected .price span.discount:after {
  /*background: white;*/
/*  border: 2px solid white;*/
}

table.table-buy td.currentlySelected .price-sub {
  display: block;
}

/* CHECKBOX */

.bigcheck {
  height: 20px;
  width: 20px;
  position: relative;
  margin-right: .5rem;
}

.bigcheck:after {
  content: '\00D7';
  display: block;
  background: white;
  background-image: url('/img/checkmark.png');
  pointer-events: none;
  font-size: 15px;
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  color: transparent;
/*  transition: .25s all ease-in-out;
*/  border-radius: 3px;
  line-height: 20px;
  background-position: 0 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;

  border-color: var(--dgxlgreen);
}

.bigcheck:not(:checked):hover:after {
  box-shadow: inset 0 0 0 1px var(--charminggreen);
}

.bigcheck:checked:after {
  background-color: white;
  border-color: white;
  background-position: 0 0;
}

/* CHECKBOX SMALL */

.smallcheck {
  height: 16px;
  width: 16px;
  position: relative;
  margin-right: .5rem;
}

.smallcheck:after {
  content: '\00D7';
  display: block;
  background: white;
  background-image: url('/img/checkmark.png');
  pointer-events: none;
  font-size: 15px;
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  color: transparent;
/*  transition: .25s all ease-in-out;
*/  border-radius: 3px;
  line-height: 16px;
  background-position: 0 16px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;

  border-color: var(--dgxlgreen);
}

.smallcheck:hover:after {
  box-shadow: inset 0 0 0 1px var(--charminggreen);
}

.smallcheck:checked:after {
  background-color: white;
/*  border-color: white;*/
  background-position: 0 0;
}

/* CHECKOUT BTN */

.checkout-btn {
  background: var(--dgxlgreen);
}

/* CORNER */

.imageholder {
  position: relative;
}


.corner {
  height: 64px;
  width: 64px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  color: var(--dgxlgreen);
  text-align: right;
  padding-top: 2px;
  padding-right: 2px;

  color: white;
  color: black;
  font-weight: normal;

}

.corner > div {
  padding: .25rem .25rem 0 0;
  font-family: "Poppins";
}

.corner:after {
  height: 200%;
  width: 200%;
  position: absolute;
  top: -145%;
  left: 0;
  z-index: -1;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
  display: block;
  background-color: #fff;

  background-color: var(--dgxlgreen);
  background-color: var(--charminggreen);
  background-color: var(--ctacolor);

}

.content-desc {
  margin-top: 1rem;
}

.badge {
  background: var(--charminggreen);
  display: inline-block;
  margin: 0 auto;
  border-radius: .25rem;
}

.badge .icon {
  background: white;
  padding: .5rem;
  border-radius: 0 9999px 9999px 0;
  padding-right: 2rem;
}

.badge {
/*  display: none;*/
}

.event-result {
  background: var(--blueish1);
  margin-top: 12px;
  padding: 4px;
}

table.feature-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4rem;
}

table.feature-table th {
    font-weight: 500;
    font-size: 17px;
}

table.feature-table th,
table.feature-table td {



  border-top: 0;
  border-bottom: 0;
/*  border-left: 1px solid var(--dgxlgreen);
  border-right: 1px solid var(--dgxlgreen);*/
  position: relative;


  text-align: center;
  padding: 5px 10px;
  white-space: normal;
  vertical-align: top;

text-align: center;
  padding: .5rem;

}

table.feature-table tr:nth-child(odd) th,
table.feature-table tr:nth-child(odd) td {
  background: var(--tableodd);
  border-right: 4px solid white;
}

table.feature-table th.product-name {

}

table.feature-table th.product-name img {
  height: 1.2rem;
  display: block;
  margin: 0 auto;
}

table.feature-table th.product-name img.old-logo {
  height: .7rem;
  padding: .25rem 0;
}

table.feature-table td.no {
}

table.feature-table th:first-child {
  text-align: right;
}

.memeholder, .logoholder, .imgholder {
  background: var(--blueish1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-bottom: 2rem;
}

.imgholder {
  height: auto;
  padding: 1rem 0;
  margin: 2rem 0 0 0;
  display: block;
  text-align: center;
}

.imgdesc {
  font-size: .8rem;
  color: var(--blueish2);
  text-align: center;
  padding: .5rem 0;
}

.memeholder img {
  height: 200px;
  display: inline-block;
}

.logoholder img,
.imgholder img {
  max-width: 75%;
  display: inline-block;
}


ul.products-stats {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  margin: 48px 0 72px;
}

ul.products-stats li {
  flex-basis: 0;
  flex-grow: 1;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
}

ul.products-stats li img {
  width: 48px;
  height: 48px;
}

ul.products-stats li:first-child {
  margin-right: 20px;
}

ul.products-stats li.winner {
  border:  2px solid #0078ff;
}

ul.products-stats li.loser {
  border: 2px solid pink;
}

ul.products-footer li.current-product a {
  color: black;
  text-decoration: none;
}


.quote {
  color: var(--consolegrey);
  font-style: italic;
  font-size: 1.2rem;
  padding: 1rem;
}

.author {
  font-style: normal;
  font-family: "Poppins";
  font-size: 1rem;
  color: black;
}


/* demos */

.menu-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 2rem;
}

.menu-ul a {
  text-decoration: none;
  color: var(--linkgreen);
}

.menu-ul a:hover {
  text-decoration: underline;
}

.menu-ul li {
  margin: .25rem 0;
}

.menu-ul li.currentSub a {
  font-weight: bold;
  color: black;


}

.menu-ul span,
.footer-links ul span {
  background: var(--tableodd);
  text-decoration: none;
  display: inline-block;
  padding: 0 .25rem;
  border-radius: .25rem;
  color: #6d7e98;
  font-size: .8rem;
  margin-left: .25rem;
}

.footer-links a img {
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

/* 2 COLS */

.twocols {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.twocol1 h3 {
  color: var(--consolegrey);
}



/*.twocol1 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.twocol1 a {
  border-bottom: 1px solid var(--lightgrey);
  padding: .25rem 0;
  display: block;
  color: var(--dgxlgreen);
  text-decoration: none;
}

.twocol1 a:hover {
  background: var(--lightgrey);
}*/

/*.twocol2 {
  border-left: 2px solid #ddd;
  padding: 3rem 0 3rem 3rem;
  margin-left: -2px;
}*/

.usedby {
  text-align: center;
  padding: 0;
}

.logos {
  display: flex;
  align-items:  center;
  justify-content: center;
  gap: 2rem;
  overflow-x: scroll;
  overflow-y: hidden;

}

.logos > div {
  height:  5rem;
  display:  flex;
  align-items:  center;
  justify-content: center;
  transition:  transform .1s ease-in;
}

.logo-piktochart img {
  height:  1.8rem;
}

.logo-amcharts img {
  height:  7rem;
}

.logo-optiwise img {
  height:  1.75rem;
}

.logo-runops img {
  height:  3.25rem;
}

.logo-resource img {
  height: 2rem;
}

.logos > div:hover {
  transform:  scale(1.2);
}

#homepage-buttons {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  left: 0;
  right: 0;

  display: none;
}

#homepage-buttons button {

}

.twocol1 a {
  text-decoration: none;
  color: var(--linkgreen);
}

.twocol1 ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  list-style: none;
}

.twocol1 li {
      margin: .25rem 0;
}

.twocol1 a:hover {
  text-decoration: underline;
}

.twocol1 li.active a {
  font-weight: bold;
}



.twocol1 h3 {
  color: var(--consolegrey);
}

#demo-content {
  padding: 2rem 0 0 0;
}

/*#demo-content p:not(:first-child) {
  text-indent: 1rem;
}*/

#demo-content p {
}

.twocolfloat1 h2,
.twocolfloat2 h2,
.twocol2 h2,
.twocol1 h2,
.section:not(.section-1) .wrapper h2 {
/*  font-family: "Poppins";*/
  font-weight: normal;
/*  text-transform: lowercase;
*/  color: black;
  font-size: 2.25rem;
}

.twocolfloat1 h2:first-child,
.twocolfloat2 h2:first-child,
.twocol2 h2:first-child,
.twocol1 h2:first-child,
.section:not(.section-1) .wrapper h2:first-child {
  margin-top: 0;
}


.twocolsfloat h2 + h3,
.twocols h2 + h3 {
  margin-top: 0;
}

.twocolfloat h2 span {
  background: var(--tableodd);
  border-radius: .25rem;
  padding: 0 .25rem;
  font-size: .8em;
  color: #6d7e98;
}

.twocolfloat h3,
.twocol h3 {
  font-weight: normal;
  color: var(--blueish2);
  font-family: sans-serif;
  font-size: 1rem;
  margin: 2rem 0 0 0;
  font-weight: bold;
  color: black;

}

.twocolfloat1 h3,
.twocol1 h3 {
  font-family: "Poppins";
  font-weight: normal;
  font-size: 1rem;
  color: var(--dgxlgreen);
  text-transform: uppercase;
}



 /* DEMOS */

.custom-file-input[type="file"] {
  height: 0;
  overflow: hidden;
  width: 0;
}

.custom-file-input[type="file"] + label {

  padding:  0 12px;
  cursor:  pointer;

  font-size: 1em;
  height: 44px;
  line-height: 41px;
  display: inline-block;
  margin: 0;

  color: #000;
  background: #eaecee;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 3px;
  border-radius: 4px;
  cursor: pointer;
  font-family: monospace;

  box-sizing: border-box;

/*  
  background: #f15d22;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: inherit;
  font-weight: 600;
  margin-bottom: 1rem;
  outline: none;
  padding: 1rem 50px;
  position: relative;
  vertical-align: middle; */


  padding:  0 12px;
  cursor:  pointer;

  font-size: 1em;
  height: 44px;
  line-height: 41px;

  color: #000;
  background: #eaecee;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 3px;
  border-radius: 4px;
  cursor: pointer;


  box-sizing: border-box;
  background-image: linear-gradient(#f7f8fa ,#e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--dgxlBorderRadius);
  box-shadow: rgb(255 255 255 / 60%) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
/*  display: flex;*/
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
/*  overflow: hidden;*/
  padding: 0 var(--dgxlButtonSidePadding);
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  white-space: nowrap;
  /* flex-basis: var(--dgxlMinButtonWidth); */
  min-width: var(--dgxlMinButtonWidth);
  flex-grow: 0;



  
}

.custom-file-input[type="file"] + label:hover {
  background: #cad1d6;
}


div.highlight {

    line-height: 1.8em;
    font-size: 1.2rem
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    color: black;

  font-weight: bolder;
  background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, rgba(130, 255, 173,0.1) 93%, rgba(130, 255, 173,0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(130, 255, 173,0.3) 7.9%, rgba(130, 255, 173,0) 15%);
  padding: 0.6em 1rem;
/*  margin-left: -.5rem;*/
  -webkit-box-decoration-break: clone;
/*  margin: 0;*/
  border-radius: .5rem;
  text-shadow: -12px 12px 9.8px rgba(130, 255, 173,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
 
  font-weight: normal;

}

.highlight a {
  color: black;
}


.twocol2 h3,
.twocolfloat2 h3 {
  font-size: 1.5rem;
  font-weight: normal;
}

.twocol1 h3,
.twocolfloat1 h3 {
  margin-bottom: 1rem;
}

.twocolfloat pre {
  max-height: 300px;
  overflow:auto;
  font-size: .8rem;
  border: 1px solid var(--consolegrey);
  background: #fff;
}



.button,
.resultblock button:not([class^="dgxl-"]) {
  padding:  0 12px;
  cursor:  pointer;

  font-size: 1em;
  height: 44px;
  line-height: 41px;

  color: #000;
  background: #eaecee;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 3px;
  border-radius: 4px;
  cursor: pointer;


  box-sizing: border-box;
  background-image: linear-gradient(#f7f8fa ,#e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--dgxlBorderRadius);
  box-shadow: rgb(255 255 255 / 60%) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
/*  display: flex;*/
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  overflow: hidden;
  padding: 0 var(--dgxlButtonSidePadding);
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  white-space: nowrap;
  /* flex-basis: var(--dgxlMinButtonWidth); */
  min-width: var(--dgxlMinButtonWidth);
  flex-grow: 0;


}

.resultblock button:not([class^="dgxl-"]) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.edit-button:hover,
.button:not(.currency-btn):hover {
  background:  #cad1d6;
}

.edit-button .icon {
  margin-right:  8px;
}

.edit-buttons > form {
  /*margin-left: 8px;*/
}

.demo-image {
  position: relative;
}

.demo-image img {
  width: 100%;
}

.inbetween h3 {
  margin-top: 0;
}

.comparebetween {
  text-align:center;
}

.comparebetween img {
  height: 2rem;
}

.section-compare {
  text-align: center;
  padding: 3rem 0 2rem 0;
}

.section-compare img {
  display: inline-block;
  margin: 0 auto;
}

a.comparecircle {
  border: 2px solid var(--blueish1);
  display: inline-block;
  margin: 0 auto;
  border-radius: .25rem;
/*  padding: .5rem 1rem;*/
  text-decoration: none;
  color: var(--blueish2);
  position: relative;
  overflow:hidden;
  width: 300px;
  height: 5rem;
 /* line-height: 6rem;*/
}

a.comparecircle {
  line-height: 4rem;
}

a.comparecircle:not(.comparecircle-inactive) {
  line-height: 6rem;
}

img.home-logo-hot {
  width: 65%;
  padding-top:1rem;
}

img.home-logo-jspreadsheet {
  width: 50%;
}

img.home-logo-aggrid {
  width: 65%;
}

a.comparecircle:not(.comparecircle-inactive):hover {
  border-color: var(--blueish2);
}

h3.ontheblock {
  font-weight: normal;
  font-family: sans-serif;
  line-height: 1.4;
}

.ribbon {
  position: absolute;
    top: 50%;
    left: -10px;
    right: -10px;
    margin-top: -1rem;
    background: yellow;
    background: var(--blueish1);

    background: pink;
    color: black;
    height: 2rem;
    line-height: 2rem;
    transform: rotate(-7.5deg);
    transform-origin: 100% 0%;
    /*box-shadow: 0 1px 5px rgb(0 0 0 / 50%);*/
    border: none;
    text-transform: uppercase;
}

/* HEADER */


#header {
/*   background-color: #fff; */
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  /* position: fixed; */
  /* width: 100%; */
  z-index: 3;
  overflow:  hidden;
}

#header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
/*   background-color: #fff; */
}

#header li a {
  display: block;
  height:  50px;
  line-height:  50px;
/*  border-left: 1px solid #eaecee;*/
  text-decoration: none;
}



#header li:first-child a,
#header li:last-child a {
  border-left:  none;
}

#header li a {
/*  padding-left: 20px;*/
/*  font-family: monospace;*/
/*  text-transform: uppercase;*/
  font-weight:  normal;
  color: var(--linkgrey);
}

#header li:not(.buyMenuOption) a:hover {
/*  background-color: #eaecee;*/
  text-decoration: underline;
}

#header li.buyMenuOption a:hover div {
  background: pink;
  color: black;
}

#header li:last-child a {
/*  height: 58px;*/
}

#header .headerwrapper > div:first-child {
  float: left;
  display: flex;
  align-items: center;
  line-height: auto;
  padding: auto;

  padding: 0 0 0 2rem;
}

/* menu */

#header a.mainlogoholder {
  display: block;
  padding: 1rem 0;
}

#header a.mainlogoholder img {
  height: 2rem;
  display: block;
}

#header .nav {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

#header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  width: 18px;
  padding: 0 2rem;
  height: 4rem;
  position: relative;
  user-select: none;
}

#header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#header .menu-icon .navicon:before,
#header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

#header .menu-icon .navicon:before {
  top: 5px;
}

#header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

#header .menu-btn {
  display: none;
}

#header .menu-btn:checked ~ .nav {
  max-height: 400px; /* 50px per menu item+58px for last */
}

#header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

#header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

#header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

#header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
#header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

#header li.buyMenuOption a {
  padding: 0;
}

#header li.buyMenuOption a div {
  font-weight:  bold;
  background: yellow;
  border-radius: .25rem;
  padding: 0 1rem;
  height: 2.5rem;
  line-height: 2.5rem;
  top: .75rem;
  position: relative;
  color: white;
  background: var(--dgxlgreen);

}

/* #header li.buyMenuOption a:hover {
  background: transparent;
}

#header li.buyMenuOption a:hover div {
  background: blue;
} */

#header li.currentPage a {
  /*background:  #f4f4f4;*/
  font-weight: bold;
  color: black;
}

.feature-list ol {
  list-style: none;
  margin: 0;
  padding: 0;

}

.feature-list li {
  background: var(--blueish1);
  padding: 1rem;
  border-radius: .25rem;
  margin-bottom: 1rem;
}


  /* SELECT */

  .selectbox {
    padding: 2rem 0;
  }

.selectbox select {

   appearance: none;
   background-color: transparent;
   border: none;
   padding: 0 1em 0 0;
   margin: 0;
   width: 100%;
   font-family: inherit;
   font-size: inherit;
   cursor: inherit;
   line-height: inherit;
   z-index: 1;
   outline: none;
}
 .selectbox select::-ms-expand {
   display: none;
}

 .select {
   display: grid;
   grid-template-areas: "select";
   align-items: center;
   position: relative;
   min-width: 5rem;
   border: 1px solid var(--consolegrey);
   border-radius: 0.25em;
   padding: 0.25em 0.5em;
   font-size: 1.25rem;
   cursor: pointer;
   line-height: 1.1;
   background-color: #fff;
   background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}
 .select select, .select::after {
   grid-area: select;
}
 .select:not(.select--multiple)::after {
   content: "";
   justify-self: end;
   width: 0.8em;
   height: 0.5em;
   background-color: var(--consolegrey);
   clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
 .selectbox select:focus + .focus {
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   border: 2px solid var(--dgxlgreen);
   border-radius: inherit;
}
 .selectbox select[multiple] {
   padding-right: 0;
  /* * Safari will not reveal an option * unless the select height has room to * show all of it * Firefox and Chrome allow showing * a partial option */
   height: 6rem;
  /* * Experimental - styling of selected options * in the multiselect * Not supported crossbrowser */
}
 .selectbox select[multiple] option {
   white-space: normal;
   outline-color: var(--dgxlgreen);
}
 .select--disabled {
   cursor: not-allowed;
   background-color: #eee;
   background-image: linear-gradient(to top, #ddd, #eee 33%);
}
 .selectbox label {
   font-size: 1.4rem;
   font-weight: 500;
}
 .select + label {
   margin-top: 2rem;
}


/* PHONE ONLY */

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

  #header li.buyMenuOption {
    margin-bottom: 2rem;
  }

a.comparecircle {
  width: 100%;
}

.edit-buttons {
  display: none;
}

  .desktop-only {
    display: none;
  }

  #header ul {
    padding: 0 2rem;
  }

  .section1flex > div {
    padding: 3rem 0;
  }

  .inbetween {
    padding: 0 2rem;
  }

  .inbetween.nopadding {
    padding: 0;
  }

  .logos {
    justify-content: flex-start;
  }

  .inbetween.nopadding .wrapper {
    padding: 0;
  }

  .inbetween h2 {
    font-size: 3rem;
  }



/*  .limit-width-1,
  .limit-width-2,
  .limit-width-3,
  .limit-width-4 {
    padding: 0 2rem;
  }*/

  .section-1 #grid {
    height: 400px;
    border: 1px solid grey;
    box-shadow: 0 0 4px black;
  }

  .feature-content-holder img {
    max-width: 100%;
  }

  .twocolfloat2 h2 {
    display: none;
  }

  .section:not(.section-1) .wrapper h2.style-mobile {
    /* style as select label */
    font-size: 1.4rem;
    font-weight: 500;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    padding: 2rem 0;
    margin: 0;
  }

  .section:not(.section-1) .wrapper h2.style-mobile + p {
    margin-top: 0;
  }

  .examples > div {
    margin-bottom: 2rem;
  }

}

/* DESKTOP ONLY */

@media only screen and (min-width:701px){

  .reseller-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.reseller-list > div {
  text-align: left;
  border: 1px solid var(--tableodd);
  border-radius: .25rem;
  padding: 1rem;
}


  .comparebar {
display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
}

.examples {
/*  display: flex;
  margin: 0 -1rem;
  justify-content: space-around;
*/
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.examples > div {
/*  flex-grow: 0;
  margin: 0 1rem;*/
/*  width: 400px;*/
}

  .inbetween h2 {
  text-align: center;

  }

  .feature-list li {
      min-height: 12rem;
  }

  .feature-list h4 {
  min-height: 6rem;
}

  .mobile-only {
    display: none;
  }

  .section-regular {
    padding-top: 1rem;
  }

  /* HEADER */


/*  #header li.buyMenuOption a div {
    margin: 0;
    padding:  0 20px
  }*/

  #header .headerwrapper > div:last-child {
    padding: 0 2rem 0 0;
  }

  #header li {
    float: left;
  }

  #header li a {
    height:  4rem;
    line-height:  4rem;
    padding-left:  1rem;
    padding-right:  1rem;
  }

/*  #header .logo {
    padding:  0;
    background-position: 0 50%;
    width:  200px;
    background-size:  200px;
  }*/

  #header {
    box-shadow: none;
  }

  #header .nav {
    clear: none;
    float: right;
    max-height: none;

    display: flex;
    align-items: center;
  }

  #header .menu-icon {
    display: none;
  }

  /* SECTION 1 */

  .section-1 {
    min-height: calc(100vh - 4rem);
    background: white;

    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }

  .section1flex {
    display: grid;
    grid-gap: 4rem;
    grid-template-columns: 3fr 5fr;
/*    align-items: center;*/
    box-sizing: border-box;
    min-height: calc(100vh - 300px);
  }

  .section1flex .col1 {
    display: grid;
    align-items: center;
  }

  .section1flex .col2 {
    position:relative;
    height:100%;
  }

  .section1flex .col2 #grid {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    border:1px solid grey;
  }

  /* WIDHT LIMITERS */

  .limit-width-1 {
  /*  width: 70%;*/
    margin: 0 auto;
  }

  .limit-width-2 {
  /*  width: 60%;*/
    margin: 0 auto;
  }

  .limit-width-3 {
    width: 100%;
    max-width: 600px;

    margin: 0 auto;
  }

  .limit-width-4 {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    text-align: center;
  }


  .twocolsfloat {

  }

  .twocolfloat1 {
    float: left;
    width: 25%;
    padding-bottom: 3rem;
  }

  .twocolfloat2 {
    width: 75%;
    float: left;
  }

  .twocolsfloat:after {
    content: '';
    display: table;
    clear: both;
  }

  /* FEATURE LIST */

  .feature-list i {
    background: transparent;
    display: inline-block;
    margin: 0 auto;
    border-radius: 16px;
    font-size: 1.2rem;
    text-align: center;

    width: 32px;
    height: 32px;
    background: white;
    margin-top: -2rem;
  }

  .feature-list ol {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;


  }

  .feature-list p {
    color: var(--consolegrey);
  }

  .feature-list img {
    width: 100px;
    height: 100px;
  /*  border-radius: 50px;
    border: 2px solid #ddd;
    padding: 4px;
    box-sizing: border-box;*/

  }

  .feature-list h4 {
    font-size: 1.5rem;
    margin: 0;
    font-family: "Poppins";

  }

  .feature-list h4 + div {
    margin-top: -1rem;
  }

  .feature-list li {
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    padding: .5rem 1rem;

    background: var(--blueish1);
  }

  /* WHATS NEW IN V2? */


  .feature-content-holder {
    padding: 3rem 0 3rem 3rem;
    border-left: 2px solid var(--blueish1);
    flex-grow: 1;
    margin-left: -2px;
    position: relative;
  }

  .feature-content-holder:before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 2px;
    height: 48px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  }

  .content-section {
    position: relative;
  }

  .feature-content-holder:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 2px;
    height: 48px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  }

  /* FOOTER */

  .footer-flex {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    padding-top: 1rem;
  }

  .footer-flex > div {
       
  }

  .footer-links {
    flex-grow:1;
  }

}




/* CONTROLS */

.controls b.mod, .controls-table b.mod,
.controls b.act, .controls-table b.act {
    width: 60px;
}

.controls b, .controls-table b {
  background: var(--blueish1);
  padding: 2px 4px;
  border-radius: 2px;
  white-space: nowrap;
  margin: 4px 0;
  display: inline-block;
  width: 20px;
  text-align: center;
  font-weight: normal;
}

.controls i, .controls-table i {
  font-style: normal;
  background: var(--blueish1);
  padding: 2px 4px;
  border-radius: 2px;
  margin: 4px 0;
  display: inline-block;
  width: 20px;
  text-align: center;
}

/*
  COMPARRRE
*/

.dgxl, .hot {
  height: 300px;
}

.dgxl.gridIsReady,
.hot.gridIsReady {
  border: 1px solid #aaa;
  z-index: 1;
}

.hot.gridIsReady {
  overflow: scroll;
}

.dgxl-link, .hot-link {
  border: 2px solid var(--blueish1);
  height: 300px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.dgxl-link:hover, .hot-link:hover {
  border-color: var(--dgxlgreen);
}

.sub {
  margin-bottom: 2rem;
  font-size: .8rem;
  padding: .5rem 0;
}

/* VIEW COMPARE */

body.view-table #header {
  display: none;
}

body.view-table .compare-content,
body.view-table .compare-header {
  max-width: none;
  padding: 0;
    background: var(--blueish1);
}

body.view-table .compare-header {
  z-index: 2;
}

body.view-table .sub {
  margin-bottom: 0;
}



.compare-header .bar {
  background: var(--blueish1);
  border: 1px solid var(--blueish2);
  border-radius: .25rem;
  cursor: pointer;
  height: 2rem;
  line-height: 2rem;
  box-sizing: border-box;
}

.compare-header .bar:hover {
  background: pink;
  border-color:red;
}

body.view-table .compare-header .bar {
  text-align: center;
  border-radius: 0;
}

.blocks > div,
.databar > div,
.comparebar > div {
  /* prevent grid item from overflowing */
  min-width: 0;
}


body.view-table .blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
}

body.view-table .blocks > div {
  background: white;
    padding: 1.5rem;
}

body.view-table #mailinglist,
body.view-table .section-footer {
  display: none;
}

body.view-table h3.compareh {
  position: sticky;
  top: 5rem;
  background: var(--blueish1);
  color: var(--blueish2);
  margin: 0;
  height: 2rem;
  line-height: 2rem;
  padding: 0 1.5rem;
  font-size: 1.2rem;
/*  border-bottom: 2px solid var(--blueish2);
  border-top: 2px solid var(--blueish2);*/
  text-align: center;
  z-index: 2;
}

body.view-table .wrapper {
  max-width: unset;
  padding: 0;
}

body.view-table .twocolfloat1 {
  display: none;
}

body.view-table .twocolfloat2 {
  width: 100%;
  float: none;
}

/*body.view-compare h2:before {
  position: absolute;
  bottom: 100%;
  background: red;
  z-index: 100000;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  text-align: center;
}*/

body.view-table .compare-header {
  position: sticky;
  z-index: 3;
  top: 0;
    box-shadow: 0 0 4px var(--blueish2);
}

body.view-table .product-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
  position: relative;
}

body.view-article .compare-header .bar {
  text-align: center;
}

body.view-table .product-header .vs {
  font-size: 1rem;
  font-weight: bold;
  padding: 0;
  position: absolute;
  background: var(--blueish1);
  color: var(--blueish2);
  left: 50%;
  margin-left: -1rem;
  width: 2rem;
  height: 2rem;
  text-align: center;
  top: 50%;
  border-radius: 1rem;
  margin-top: -1rem;
  display:flex;
  align-items: center;
  justify-content: center;
}


.product-header > .product-block {
  background: white;
  height: 3rem;
  padding: 0 .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
/*  border-bottom: 2px solid #eaeaea;*/
  box-sizing: border-box;
}

body.view-table {
  padding: 0;
}

body.view-table .funfact {
  text-align: center;
  background: pink;
/*  color: white;*/
background:white;
border-top: 2px solid var(--blueish1);
/*  border-top: 2px solid rgba(0,0,0,.25);
  border-bottom: 2px solid rgba(0,0,0,.25);*/

}

body.view-table .spanner {
  background: white;
  padding: 1.5rem;
  border-bottom: 2px solid var(--blueish1);
}

body.view-table .spanner > * {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

body.view-table h2 {
  display: none;
}

body.view-table .section-regular {
  padding-top: 0;
}

body.view-table .memeholder {
  margin-bottom:0;
}

/* MAILING LIST ANIMATION */


.area{
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
   
    
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;

   background: #E3E3FF;
   background: black;
   background: pink;
   background: white;
   background: var(--blueish1);
   background: pink;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
    padding:0;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}