@charset "utf-8";
/* CSS Document */





.litepanel {background: linear-gradient(135deg, rgba(17, 16, 78, 0.7) 0%, rgba(27, 17, 88, 0.8) 100%);
    border: 1px solid #01F49F; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 12px; border-radius: 8px; transition: all 0.3s ease;}












.page-image {  border: 1px solid #fff;border-radius: 13px; overflow: hidden;}
.page-image img{object-fit:cover;max-height: 250px;width: 100%;}

.preview-image img{object-fit: cover; object-position: center;}
.preview-image {max-height: 250px;  border-radius: 13px; overflow: hidden;}
.cartheading {padding: 10px 0 0 10px;}

/** SALES & CHECKOUT CARDS **/
.panel-info{border: 2px solid #01F49F; box-shadow:0px 0px 15px rgba(1,244,159,0.9); border-radius: 13px;  overflow:hidden; position: relative;}
.scapebg h4 {margin-bottom: 0px;}
.lighten {background: rgba(255, 255, 255, 0.15);padding:25px 0; grid-gap:15px; text-shadow: 0px 0px 5px black; display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; min-width: max-content;}
.panel-info .packagecontent {padding:20px 0 10px 0; border-top:3px solid #C73FAD; display: grid; width:100%; height:100%;}

.plan_overlays .panel-info .packagecontent {height: auto !important;}

.category {border-top: 1px solid #C73FAD; padding:10px 20px; width:100%;}
.category:first-child {border-top: 0px;}
.fullpanel.padded {padding:30px;}
.ribbon-wrapper {width: 150px; height: 150px; overflow: hidden; position: absolute; top: -10px; right: -10px;}
.ribbon { font-size: 14px; font-weight: bold; color: #030832; text-align: center; text-shadow: none; transform: rotate(45deg);
  -webkit-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px;top: 45px; width: 200px;
  background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%); box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);}

/* TBD */
.pricing-tabs { width:100%;
  display: flex; justify-content: center;  align-items: center;  gap: 10px;  margin-bottom: 2em;  padding-bottom: 0;
  border-bottom: none; min-width: max-content;}
.tab-link { border-radius: 13px; padding: 6px 15px; font-size: 0.8em; font-weight: 600;
  cursor: pointer; flex: 1; white-space: nowrap; font-size: 0.75em; padding: 8px 5px;
  text-align: center;  color: #fff; background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid #00C9FF; box-shadow: 0 0 10px rgba(0, 201, 255, 0.7); transition: all 0.3s ease;}
.tab-link.active { background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
  color: #0d122b;  box-shadow: 0 0 15px rgba(146, 254, 157, 0.8); border-color: #92FE9D;}
.tab-content {display: none; animation: fadeIn 0.4s ease; }
.tab-content.active {display: block;}

article.terms h2, article.terms h3 {font-size: 1.4em;}

.tnc_overlay article.terms {padding:0px 0px;}

.faq-item { border-bottom: 1px solid #C73FAD;}
.faq-item:last-child { border-bottom: none;}
.faq-question { font-weight: 600; padding: 20px 0;width: 100%;   cursor: pointer; font-size: 1em;  outline: none; display: flex; justify-content: space-between;    align-items: center;}
.faq-question.active::after {transform: rotate(180deg);}
.faq-question:focus-visible {outline: 2px solid #01F49F; outline-offset: 2px;}
.faq-answer {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out;}
.faq-answer p { margin-bottom: 15px;}
.faq-answer ol  {
    padding-left: 30px; margin-bottom:20px;}
.faq-answer li {padding-bottom: 15px;}
.faq-answer.active {padding-top: 10px; padding-bottom: 20px;}

.faq-question .dot {transition: transform 0.3s ease-out; transform: rotate(0deg);}
.faq-question.active .dot { transform: rotate(180deg);}

.progwrap{position:fixed; top:0; width: 100%; justify-content: right;}
.progress-indicator {margin: 0px 0px; display: flex; font-weight: 400; }
.progress-step {position: relative;background-color: #242737;padding: 10px 5px 10px 10px;
    text-align: center;flex-grow: 1;}
.progress-step::after {content: ""; position: absolute; top: 0; right: -11px;
    width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 19px solid transparent;
    border-left: 13px solid #242737;z-index: 1;}
.progress-step::before {content: ""; position: absolute; top: 0; left: 0; width: 0;height: 0;
    border-top: 20px solid transparent; border-bottom: 19px solid transparent;
    border-left: 13px solid #030C38;}
.progress-step:first-child::before {display: none;}
.progress-step:first-child {padding-left: 10px; border-top-left-radius: 0px; border-bottom-left-radius: 13px;}
.progress-step:last-child::after {display: none;}
.progress-step:last-child {margin-right: 0; padding-right: 10px; border-top-right-radius: 0px; border-bottom-right-radius: 13px;}
.progress-step.is-active ,
.progress-step.is-complete{ background:linear-gradient(0deg,rgba(1, 244, 159, 1) 60%, rgba(0, 252, 252, 1) 100%); font-weight: bold; color: #030C38; }
.progress-step.is-active::after, .progress-step.is-complete::after {border-left-color: #01F49F;}
.progress-step:not(.is-complete):not(.is-active) {cursor: default;}
.progress-step.is-complete:hover {background-color: #C740AD; background:linear-gradient(0deg,rgba(199, 64, 173, 1) 60%, rgba(199, 64, 173, 1) 100%); color: #fff; cursor: pointer;}
.progress-step.is-complete:hover::after {border-left-color: #C740AD;}
.progress-step.is-active:hover {background:linear-gradient(0deg,rgba(1, 244, 159, 1) 60%, rgba(0, 252, 252, 1) 100%);color: #030C38; cursor: default;}
.progress-step.is-active:hover::after {border-left-color: #01F49F;}
.progress-step:not(.is-complete):not(.is-active) {cursor: default; color:#9E9999;}
.progress-step:not(.is-complete):not(.is-active):hover {background-color: #242737;}
.progress-step:not(.is-complete):not(.is-active):hover::after {border-left-color: #242737;}








.container, .sparkcontainer {width: 100%;}
header, main, footer {width: 100%;}

.logo {position: relative;display: inline-block;}
.logo-img {height:65px; width:auto; display: block;}
.spark3 {display: block;
  width: 55px; position: absolute; top: 7px; left: 116px; animation: sparkle-pulse 11s infinite ease-in-out;}
  @keyframes sparkle-pulse {
  0%, 90% {transform:scale(1) rotate(0deg);opacity: 1;}
  95% {transform:scale(1.2) rotate(-10deg);opacity: 1;}
  100% {transform:scale(1) rotate(0deg);opacity: 1;}}

/* LAYER CONTROL */
.tnc_overlay, .plan_overlays {z-index: 100;}
#loader {z-index: 99; }
.progwrap {z-index:90;}
.spark {z-index: 50; }
.crm-nav{z-index:6;}
footer {z-index:5}
.FULL-Form {z-index:4;}
#particles-js { z-index:3;}
.Login-Display {z-index:2;}
.Main-Content, .Main-Content-notop, .footer {z-index:1;}
#g-recaptcha-response{ z-index: -100;}
#particles-js {position:absolute; height:100%; width:100vw;}

/* ANIMATIONS */
  .spark {position: absolute;animation: sparkLoop 45s ease-in-out infinite;}
  .spark {width: 55px;  margin-top:-21px; left:75%;}

  @keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}
  @-webkit-keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}

/** Banner and form slide in behaviour **/
  .slide-in-left {opacity:0; -webkit-animation: slide-in-left 1s ease-in 0.5s forwards; animation: slide-in-left 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }
@keyframes slide-in-left {
  0% {-webkit-transform: translateX(-1000px); transform: translateX(-1000px) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}
  100% {-webkit-transform: translateX(0);transform: translateX(0) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(0);filter: blur(0); opacity: 1;}}
    @-webkit-keyframes slide-in-left {
  0% {-webkit-transform: translateX(-1000px); transform: translateX(-1000px) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}
  100% {-webkit-transform: translateX(0);transform: translateX(0) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(0);filter: blur(0); opacity: 1;}}
  .slide-out-left {opacity:0; -webkit-animation: slide-out-left 3s ease-in 0.5s forwards; animation: slide-out-left 3s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }
@keyframes slide-out-left {
  0% {-webkit-transform: translateX(0); transform: translateX(0) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(0);filter: blur(0); opacity: 1;}
  25% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(10px);filter: blur(10px); opacity: 1;}
  50% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.8;}
  75% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.4;}
  100% {-webkit-transform: translateX(-1000px);transform: translateX(-1000px) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}}
@-webkit-keyframes slide-out-left {
  0% {-webkit-transform: translateX(0); transform: translateX(0) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 1;}
  25% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(10px);filter: blur(10px); opacity: 1;}
  50% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.8;}
  75% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.4;}
  100% {-webkit-transform: translateX(-1000px);transform: translateX(-1000px);transform: translateX(0) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}}

    /** used on form help**/
.swing-in {-webkit-animation: swing-in 0.45s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in 0.45s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; opacity:0;}
.swing-out {-webkit-animation: swing-out 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
	        animation: swing-out 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both; }
  @-webkit-keyframes swing-in {
  0% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg);-webkit-transform-origin: top;transform-origin: top; opacity: 0;}
  10% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  20% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg)}
  30% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); opacity: 0.3;}
  40% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg)}
  50% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg)}
  70% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); opacity: 0.8;}
  80% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  90% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}}
@keyframes swing-in {
   0% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg);-webkit-transform-origin: top;transform-origin: top; opacity: 0;}
  10% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  20% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg)}
  30% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); opacity: 0.3;}
  40% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg)}
  50% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg)}
  70% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); opacity: 0.8;}
  80% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  90% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}}
@-webkit-keyframes swing-out {
  0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}
  10% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  20% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg)}
  30% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); opacity: 0.8;}
  40% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg)}
  50% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg)}
  70% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); opacity: 0.3;}
  80% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  90% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg);-webkit-transform-origin: top; transform-origin: top; opacity: 0;}}
@keyframes swing-out {
  0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}
  10% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  20% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg)}
  30% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); opacity: 0.8;}
  40% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg)}
  50% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg)}
  70% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); opacity: 0.3;}
  80% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  90% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg);-webkit-transform-origin: top; transform-origin: top; opacity: 0;}}

  /**used on the main banner CTA buttons**/
.BigButton{opacity:0; animation: scale 7s forwards;   animation-delay: 2s; animation-iteration-count: 1;}
  @keyframes scale {
    0% {transform: scale(0.5) ; opacity:0;}
    100% {transform: scale(1,1); opacity:1;}}
  @-webkit-keyframes scale {
    0% {transform: scale(0.5) ; opacity:0;}
    100% {transform: scale(1,1); opacity:1;}}

.pulse{-webkit-animation: pulse 3s ease forwards infinite; animation: pulse 3s ease forwards infinite;}
@keyframes pulse {
  0% {transform: scale(1); color: white;}
  50% {transform: scale(1.5); color: #C740AD; font-weight: bold;}
  100% {transform: scale(1); color: yellow; font-weight: normal;}}
@-webkit-keyframes pulse {
  0% {transform: scale(1); color: white;}
  50% {transform: scale(1.5); color: #C740AD;font-weight: bold;}
  100% {transform: scale(1); color: yellow;font-weight: normal;}}
  @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/*** overlaybehaviour****/
.scale-up-top {-webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
.scale-down-top {-webkit-animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}


@keyframes flashGreen {
  0% { background-color: #01F49F; }
  50% { background-color: transparent; }
  100% {background-color: #01F49F;}}
@keyframes slipOutRight {
  from {transform: translateX(0); opacity: 1; }to {transform: translateX(100%);   opacity: 0;  }}
.item-added-to-cart {  animation: flashGreen 0.6s ease-out, slipOutRight 0.5s ease-in 0.4s;  animation-fill-mode: forwards;}
.CRM-item {overflow: hidden;}

#loader {
  position: fixed; top: 0; left: 0;  width: 100%; height: 100%;
 display: flex;  justify-content: center; align-items: center;
flex-direction: column; gap:20px;}
#loader::before {
  content: "Searching...";
  font-size: 2em;  font-weight: bold;  color: #01F49F;}
  #loader::after {
  content: "";  border: 12px solid #030832; border-top: 12px solid #01F49F;
  border-radius: 50%; width: 80px; height: 80px;
  animation: spin 1.5s linear infinite;}
















/***** COLOUR CONTROL ******/
body, .crm-nav, .fullpanel, .panel-info {background: #081d47; background: linear-gradient(90deg, #160428 11%, #21226B 48%, #091F41 76%);}
.Colour-change {-webkit-animation: colour-change 11s linear infinite alternate both; animation: colour-change 11s linear infinite alternate both;}
@-webkit-keyframes colour-change {  0% {background: #160428;}50% {background: #21226B;}100% {background: #4C0E8A;}}
@keyframes colour-change-3x {  0% {background: #160428;}50% {background: #21226B;}100% {background: #4C0E8A;}}

body, .staff, .bad, .breadcrumb a.active, .tnc_overlay h2, .CRM-item span {color:#ffffff;}
 a.crm-nav-item svg path {fill:#ffffff;}
.PinkButton:hover svg path, .BigButton:hover svg path {fill:#030832;}
.crm-nav-anchor, .accounts, .orange , .owner, .good, .admin, .help-inner, .BigButton, .PinkButton, .status.addbutton{color: #030832;}
.Login-Display, .bigicon, footer .bottom, .crm-nav-item,.crm-small-nav-item, .crm-custom-nav-item {background-color: #030832; }

.BigButton, .PinkButton{border:1px solid #030832;}
.Brain-display {background-image: url(../images/banners/brain-banner-full.avif); background-repeat:  no-repeat; background-size: cover; background-position: center; background-color: #0f198a; }
.crm-nav-bottom {background-color: #222467;}

a, .success, .green {color:#01F49F;}
.status.addbutton {background-color:#01F49F;}
a:hover svg path {fill: rgb(1, 244, 159);}
.success svg path, a.crm-nav-item:hover svg path, a.crm-nav-item.active svg path {fill:#01F49F; }
.owner, .good{ background-color: #01F49F;}

.error{color:#C740AD; font-weight: 800; text-shadow: 0 0 5px #000000;}
.error svg path {fill:#C740AD; filter: drop-shadow(0px 0px 6px #000000);}
.staff, .bad, .status.addbutton:hover, a.CRM-item:hover .addbutton {background-color: #B13AA2; color:#fff; transition: 0.5s;}

.help-inner{background-color: #ccc; }
.admin {background-color: #169DFE;}
.accounts, .orange {background-color: #DAAE68;}
.highlight, .CRM-item span.highlight {color: #C7C23F; }

.slither{background: linear-gradient(90deg,rgba(185, 110, 217, 1) 0%, rgba(1, 244, 159, 1) 50%, rgba(185, 110, 217, 1) 100%); height:5px;}
.bar{background: linear-gradient(90deg,rgba(1, 244, 159, 1) 0%, rgba(185, 110, 217, 1) 100%);}

.FULL-form, .Maxwindow
{background: linear-gradient(90deg,rgba(77, 14, 139, 1) 20%, rgba(32, 99, 201, 0.5) 76%); }
/*.crm-content form .formitem:hover,*/ a.CRM-item:hover, .databutton:hover, .formitem.notice, a.formitem.hover:hover
{background: linear-gradient(90deg,rgba(76, 14, 138, 1) 0%, rgba(1, 127, 238, 1) 100%); }
a.databutton.nohover:hover{background: linear-gradient(90deg,rgba(76, 14, 138, 0) 0%, rgba(1, 127, 238, 0) 100%); }
.formmessages { display: flex; align-items: center; }
.crm-nav-anchor {background:linear-gradient(0deg,rgba(84, 145, 224, 1) 0%, rgba(164, 253, 233, 0.8) 77%);}
.lighten {background: rgba(255, 255, 255, 0.15);}

.formitem.notice {display: flex; align-items: center;}

/** BORDER COLOURS **/
.bottom {border-top: 2px solid #030C38; }
.crm-nav-anchor {border-top: 1px solid #030832;border-right: 1px solid #030832;border-left: 1px solid #030832;}
.crm-content{border-top:2px solid #C73FAD;}
.crm-content th, .crm-content td, .crm-content .formitem,
.crm-content .messages, .CRM-item, .databutton, .CRM-welcomewagon {border-bottom:1px solid #3E225F; }
.CRM-item:last-child, .databutton:last-child {border-bottom: none;}

.fullpanel{border: 2px solid #01F49F; }
.padded {padding: 20px 20px 20px 20px;}

/** SHADOWS **/
.bottom {box-shadow: inset 0 7px 3px -7px #558dc2;}
.crm-content form .formitem:hover, a.CRM-item:hover, a.databutton:hover {box-shadow:inset 0px 10px 25px rgba(32,5,58,1); }
.Login-Display {box-shadow:inset 0px -15px 25px rgba(32,5,58,1);}
.crm-nav-item, .crm-small-nav-item, .crm-plan-item, .lighten img  {filter: drop-shadow(0px 0px 6px rgba(182,112,216,0.5));}
.crm-custom-nav-item, .crm-small-custom-nav-item{filter: drop-shadow(0px 0px 6px rgba(182,112,216,0.5)); }
.crm-custom-nav-item:hover, .crm-small-custom-nav-item:hover, a.position:hover {filter: drop-shadow(0px 0px 6px rgba(1,244,159,0.9));}
.glow {filter: drop-shadow(0px 0px 6px #01F49F) drop-shadow(0px 0px 6px #01F49F); }/**deliberately doubled**/
.FULL-Form, fieldset {box-shadow:0px -4px 25px rgba(255,255,255,0.3);}
a.databutton:hover {box-shadow:0 7px 9px -7px #192733; }
.BigButton, .PinkButton {box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;}
.fullpanel, .welcomewagon, .account-options{box-shadow:0px 0px 15px rgba(1,244,159,0.9);}


/*CODE TO MAKE ACCOUNT OPTIONS IN ACCOUNTS & ACCESS ANIMATIONS WORK*/
.account-dissolve { -webkit-animation: scale 1.0s reverse; animation-iteration-count: 1; visibility: hidden; animation: scale 1.0s reverse; animation-iteration-count: 1; visibility: hidden; }
.link-dissolve { -webkit-animation: scale 0.75s reverse; animation-iteration-count: 1; animation: scale 0.75s reverse; animation-iteration-count: 1; }
.account-appear { -webkit-animation: scale 0.75s forwards; animation-delay: 0s; animation-iteration-count: 1;animation: scale 0.75s forwards; animation-delay: 0s; animation-iteration-count: 1; }
.link-appear { -webkit-animation: scale 0.25s forwards; animation-delay: 0s; animation-iteration-count: 1;animation: scale 0.25s forwards; animation-delay: 0s; animation-iteration-count: 1; }
.account-options {transition: visibility 5s ease-in-out;}
a[id*='account-options'] {overflow: hidden;transition: max-height 1.2s ease-in-out, visibility 1.2s ease-in-out;
    max-height: 0; display: block !important; visibility: hidden;}
a[id*='account-options'].show {max-height: 500px; visibility: visible;}
div[id*='account-'] {overflow: hidden;transition: max-height 1.2s ease-in-out, visibility 1.2s ease-in-out;
    max-height: 0; display: block !important; visibility: hidden; opacity: 0;}
div[id*='account-'].show {max-height: 1000px; visibility: visible; opacity: 1;}

/*CODE TO MAKE ACCOUNT OPTIONS IN ACCOUNTS & ACCESS ANIMATIONS WORK*/


.crm-content form .formitem:hover  {text-shadow: 0px 0px 5px black;}


/** GOXIT FORMS - LIGHT **/
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],textarea,select{background-color: #ffffff;}
input:-webkit-autofill{background-color: #ffffff;} input:autofill {background-color: #ffffff;}
input[type="radio"], input[type="checkbox"]  {accent-color: #030832;}
.darkform input[type="radio"], .darkform input[type="checkbox"]  {accent-color: #01F49F;}
.eye-icon svg{fill: #ccc;}
.eye-checkbox:hover .eye-icon svg { fill: #169DFE; }

input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"]textarea,select,button,.BigButton, .PinkButton, .crm-custom-nav-item, .PinkButton:hover, .BigButton:hover /**, .iconwhite svg, .iconwhite img, .iconblue svg**/{border: 1px solid #030C38;}

.PinkButton:hover, .BigButton:hover, .PinkButton.active{background:linear-gradient(0deg,rgba(201, 91, 228, 1) 80%, rgba(201, 91, 228, 1) 100%);border-radius: 28px;    box-shadow: 0 4px 15px rgba(1, 244, 159, 0.2); border:1px solid #01F49F;}

.BigButton, .PinkButton
{background:linear-gradient(0deg,rgba(1, 244, 159, 1) 60%, rgba(0, 252, 252, 1) 100%);}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="password"],input[type="number"]:hover,select:hover,textarea:hover,button:hover{box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="password"],input[type="number"]:focus,textarea:focus,select:focus,button:focus{ border: 2px solid #01F49F; box-shadow:0 7px 9px -7px #030832;}
input.PinkButton[type="submit"]:disabled  {color:#9E9999; pointer-events: none; background:linear-gradient(0deg,rgba(36, 39, 55, 1) 60%, rgba(36, 39, 55, 1) 100%); }
input[type="text"]:disabled,input[type="text"]:read-only,input[type="email"]:disabled,input[type="email"]:read-only,input[type="number"]:disabled,input[type="number"]:read-only  {background-color: #B3C5CD;}

select{ background: url(../images/icons/Dot-Down-Select.svg ); background-position: right 10px bottom 5.5px; background-repeat: no-repeat;}

.inline {width: 100%; display: flex; grid-template-columns: auto auto; align-items: center; grid-gap:10px; }
.inline input, form.inline textarea, form.inline button{display: inline-block;}
.inline input[type="submit"] {width: max-content;}

/**** Captcha FIXES *****/
#g-recaptcha-response{   margin: -78px 0 0 0 !important; height: 76px !important; opacity: 0;display: block !important;  position: absolute; left: 0; }
.g_recaptcha, #id_captcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; width:200px;}
#rc-imageselect {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; }

/********************* GOXIT FORMS ******************/

fieldset, .progwrap  {display: flex; justify-content: right;}
.fieldcontent, .progress-indicator { min-width: 100%; max-width: 100%;}

.FULL-Form, .maxcenter {width:100%; border: none;}
.fill { height: 100%;}



fieldset .fieldcontent.formheader {padding:80px 15px 60px 15px;}
.formhead {height:210px;}

fieldset {border: none;}
fieldset .fieldcontent, .progress-indicator {padding:0px 0px 0px 0px;}
input[type="radio"] {width: 20px; height: 20px;}
input[type="checkbox"] {width: 20px; height: 20px;}
label {display: flex; grid-gap:5px; align-items: center; width: 100%;}
.labelright{ /*line-height: normal; */display: flex; width: 100%;align-items: center; justify-content:space-between; grid-gap:5px;}
.multilabelright{ line-height: normal; display: flex; align-items: center; grid-gap:5px;}

/******* FONT CONTROL ******/
h1{  font-weight: 400; letter-spacing: 0.08em;}
h2 {font-weight: 400;  letter-spacing: 0.04em;}
h3, h4, .heading {font-weight: 400;  letter-spacing: 0.04em;}
h2.big, .big {font-size: 2em; font-weight: 300; /*padding-top: 10px;*/}
h3.big {font-size: 2em;}
.large {font-weight: 400; font-size: 1.6em;}
.CRM-item span, .CRM-welcomewagon span {font-weight: 300;}
p, h1, h2, h3,h4,h5 {margin-bottom: 10px;}
.CRM-item h3 {margin-bottom:0px;}
b, strong {font-weight: 600;}
h1{font-size: 1.85em; line-height: normal;}
h2 {font-size: 1.6em; line-height: normal}
h3 {font-size: 1.4em; line-height: normal}
h4, h5, .heading {font-size:1.1em; line-height:normal; font-weight: 500;}
.crm-content h4, h5, .heading  {margin-bottom: 0px;}
small {font-size: 0.9em;}
body {font-family: "Roboto", sans-serif; font-size: 0.8em;
  min-height: 100vh;display: grid; grid-template-rows: auto 1fr auto; 	margin:0; position: relative;
  letter-spacing: 0.03em; font-weight: 300;  line-height: 1.5; overflow-x: hidden;}

a {text-decoration: none; font-weight: 400; }
footer .bottom{font-size: 0.7em;}
footer{font-weight: 400;}

/******* Lists and tables  ******/
ul {margin:0;padding-left: 20px;}
li {margin:0; padding-left: 10px; margin-bottom: 10px;}
th, td {padding:5px;}
tr {width:100%;}
th, td {max-width: 50%;}

/******* Reset  ******/
* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}

.hide, .hidden, .formhelphide {display: none !important;}
.show  {display:block;}
.showflex  {display:flex;}
.wordwrap {word-wrap: break-word; word-break: break-word; max-width: 100%; overflow-wrap: break-word;}
/* force bottom right */
.botright {display:grid; justify-content: flex-end; align-items: end;}
.formitem span {color:#fff;}

/******* CORE  ******/

.bottom {padding:3px 20px; position: relative;}
.noscroll {overflow: hidden;}
.lock-scroll {overflow: hidden;}
.flex {display: flex; grid-gap:10px;}
.spacer {padding-bottom:100px;}
.padtop {padding-top: 60px;}

/******* tools  ******/
.textmid {text-align: center;}
.textright {text-align: right;}
.botright {align-self: end; align-items: end;}


/****** ICONS ******/
.iconwhite svg, .iconwhite img, .iconblue svg{border-radius: 5px; overflow: hidden;}
.iconwhite.close-menu-btn {border-radius: 5px; overflow: hidden;}
.iconblue svg, .iconwhite svg,.iconwhite img
{display: flex; align-items: center; justify-content: center; padding: 0px;  object-fit: contain;}
.iconwhite svg,.iconwhite img, .iconblue svg{height: 2em; width:2em; }

.admin-logo img.logo {height:40px;  padding:0;}
.admin-logo {width:100%; height: 100%; display: flex; justify-content:end;  flex-direction: column; flex: 1 1 100%; align-items: end; padding-bottom: 15px;}

.logo {display: grid; padding:0 0 40px 0;}
.paypage .logo {padding:40px 0 25px 20px;}
.paypage .spark3 {left:135px;top:47px;}
.padding {padding:15px 0 15px 0;}


/********************* FOOTER ******************/
.bottom  {display: grid;}
.Brappfoot {margin-top: 10px; padding-left: 145px;}
.Brappfoot a {font-weight: 600; font-size: 1em;}
.bottom .right { text-align: right !important;justify-content:end !important;}
.bottom  {display: flex; flex-direction: row; justify-content: space-between ; align-content: end; }
.bottom, .left {display:flex; align-items: end;}


/********************* MAIN ******************/
main {display: grid; grid-template-rows: auto; }
.breadcrumb a.active {font-weight: 600;}

.tnc_overlay, .plan_overlays {position: fixed;top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(4, 20, 36, 0.85);
    display: flex; justify-content: center; overflow: auto; padding-top: 15px;
    max-width: 100% !important; }
.overlaybutton {position:absolute; top:10px; right:20px; display: block;}


/****** PAGE SPECIFIC ******/
.directions {grid-area: 2 / 1;}
.loginform {max-width: max-content;}
/*** this will be converted into a modal overlay with background-color: rgba(0,0,0,0.5); and drop shadow filter: drop-shadow(11px 13px 10px #000000);**/

article, fieldset {padding:40px 20px;}
.progwrap {padding:0 20px;}
article:last-child{border-bottom: none;}
section{ padding-bottom: 20px;}

.formitem {margin-bottom:15px; display: grid; grid-gap:10px;}
.CRM-item, .CRM-welcomewagon {display: flex; grid-gap:10px;}
.CRM-item.payimg {display:block;}
.CRM-item.payimg img {margin: 5px 10px 0 0;}
.CRM-item p, .CRM-welcomewagon p{margin-bottom: 0;}
.CRM-welcomewagon .labelright {align-items: start;}
.CRM-item .buttonright, #next-button-div{justify-content: end;}
label,input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],textarea,select {flex-grow:1;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],textarea,select,button
{display: block; width: 100%; border-radius: 13px; margin:0px 8px 0px 0;padding:10px;
  box-sizing: border-box;margin-left :0; -webkit-appearance: none;}

input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="password"]:focus,input[type="number"]:focus,textarea:focus,select:focus,button:focus{outline:none;}
#Dashboard-Welcomewagon {transition: max-height 0.75s ease-in-out, visibility 0.75s ease-in-out;
    max-height: 0; visibility: hidden;}
#Dashboard-Welcomewagon.show {max-height: 1000px; visibility: visible !important;}


input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],textarea,select{background-color: #ffffff;}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="password"],input[type="number"]:focus,textarea:focus,select:focus,button:focus{outline:none; border: 2px solid #01F49F; box-shadow:0 7px 9px -7px #030832;}
input[type="text"]:disabled,input[type="text"]:read-only,input[type="email"]:disabled,input[type="email"]:read-only,input[type="number"]:disabled,input[type="number"]:read-only  {background-color: #B3C5CD;}
input[type="button"],input[type="submit"]{ padding-left:25px; padding-right: 25px;}
legend {font-weight: 600; font-size: 1em; padding: 0 20px;}

/* Password Toggle Styles */
.password-toggle { margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.password-checkbox { display: none; }
.eye-checkbox { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; font-size: 14px; }
.eye-icon { width: 17px;  height: 17px;  position: relative;  display: inline-block; }
.eye-icon svg { width: 100%; height: 100%;  transition: all 0.2s ease; }
.eye-closed { display: block; }
.eye-open { display: none; }
.password-checkbox:checked + .eye-checkbox .eye-closed { display: none; }
.password-checkbox:checked + .eye-checkbox .eye-open { display: block; }

/* Text switching for show/hide passwords */
.show-text { display: inline; }
.hide-text { display: none; }
.password-checkbox:checked + .eye-checkbox .show-text { display: none; }
.password-checkbox:checked + .eye-checkbox .hide-text { display: inline; }
.button-container { display: flex; gap: 15px; align-items: center; }

/*********** Form help ************/
.formhelp {display: flex; justify-items: center; grid-gap:5px; }
.help-inner{ width:100%;display: flex; justify-items: center; border-radius: 10px;
padding: 5px 10px 5px 10px; font-weight: 400; font-size: 0.9em; justify-content:space-between;}
.tinydot {width:10px; height:10px;}
.helpspace { margin-top: 5px;}
.help-inner p {padding-right: 10px; margin-bottom: 0px;}


/********************* DATA TABLES ******************/
.databutton {width: 100%;display: grid;align-items: center;padding: 10px 10px;grid-gap:3px;}
.data2col {grid-template-columns: 1fr 1fr;}
.data3col {grid-template-columns: 1fr 1fr 1fr;}
.databutton .datanumber {text-align: center;}
a.databutton:hover{cursor: pointer;}
.colcenter {text-align: center;}


/********************* BUTTONS ******************/
.BigButton{ opacity:0;
  animation: scale 7s forwards; animation-delay: 0.6s; animation-iteration-count: 1;
  padding: 15px 20px;  width: max-content; border-radius: 13px;  text-align: center;
  font-weight: 700;   font-size: 1.2em; display: flex;  align-items: center;  justify-content: center;
  transition: all 0.5s ease;  cursor: pointer; transition: all 1s ease; border-radius: 28px; }
.PinkButton  {  padding: 11px 18px;  border-radius: 13px;  text-align: center;  font-weight: 600;   font-size: 1.1em;
  max-width: max-content;  display: flex;  align-items: center;  justify-content: center;  transition: all 0.5s ease; }
.PinkMax {width: 100% !important; max-width: 100% !important;}
.PinkButton, .BigButton {min-width: max-content;display: flex; grid-gap:10px;}

.buttonright{display: flex; justify-content: right; align-items: center; grid-gap:15px;}
.multibutton {display: flex; justify-content: space-between; width:100%;}
.threebuttons {display: flex;justify-content: center; gap: 15px;  margin: 0px 0 0px 0; flex-wrap: wrap;}
.threebuttons .PinkButton {white-space: nowrap; display: inline-block; min-width: 100%;}
.buttonright .PinkButton.fifty, .multibutton .PinkButton.fifty {min-width:50%;}
.yesno {display: flex; gap: 15px;width:100%;}
.yesno .PinkButton {flex:1; max-width: 50%; position: relative;}
.yesno .PinkButton .buttick {position: absolute; right:10px; visibility: hidden;}
.yesno .PinkButton.active .buttick, .yesno .PinkButton:hover .buttick { visibility: visible;}
.align {align-items: center;}
.tick, .cross {width:15px; height:15px;}

/**** DISPLAY BANNERS ******/
.Login-Display {background: url(../images/banners/login-banner3.avif) no-repeat;
  background-size: auto 100%; background-position: right;  position: absolute; top:0px; left:0px;}
.Login-Display {height: 100%; width:100vw;}
main {min-height: 720px;}

/************ BLOCK STRUCTURE **************/
.Main-Content {display: grid; grid-gap:50px; padding-top:0 0 0 0; }
.Maxwindow {height:100%;}
.navspace {display: grid; grid-template-columns: 59px auto;}
.container  {margin-left: auto;  margin-right: auto;  padding: 30px 20px; align-content: start; display:flex; grid-gap:30px; flex-direction: column;}

.fluid2cols {display:grid; grid-auto-columns: auto; grid-gap:30px; grid-template-areas: "a"; align-items: start; }
.fluid2cols .lefty, .fluid2cols .righty {display: grid; grid-gap:30px;}
.twoevencols {display: grid; grid-template-columns: 1fr; grid-gap:30px; align-items: start;}
.twoevencols .lefty, .twoevencols .righty {display: grid; grid-gap:30px;}
.even3cols {display:grid; grid-template-columns: 1fr; grid-gap:30px;}

.crm-nav {width:59px;height:100vh; position: fixed; top:0; left:0; }
.crm-nav-top{padding: 25px 0 0 0;}
.crm-nav-mid{height: auto;}
.crm-nav-top, .crm-nav-bottom {width: 100%; align-items: center; display: flex; flex-direction: column; grid-gap:13px; }
.crm-nav-bottom {position: fixed; bottom:55px;width:59px; padding: 0 0 20px 0; }
.crm-nav-anchor {position: fixed; bottom:0;width:auto; padding:5px 10px 5px 5px; height:59px;
border-top-right-radius: 13px; border-top-left-radius: 13px; display: flex; grid-gap:10px; align-items: center; }
.crm-nav-anchor p{margin-bottom: 3px;}
.crm-nav-bottom .slither {width:100%;}

.crm-small-custom-nav-item {width:30px; height:30px;min-width:30px; min-height:30px;border-radius: 5px; }
.crm-small-nav-item {width:30px; height:30px;min-width:30px; min-height:30px; padding:5px;border-radius: 5px; }
.crm-nav-item {width:45px; height:45px;min-width:45px; min-height:45px; padding:7px;  border-radius: 10px; }
.crm-nav-item, .crm-small-nav-item { display:flex; flex-direction: column; transition: all 0.5s ease;
  justify-content: center; align-items: center; object-fit: contain; }

.crm-custom-nav-item {border-radius: 10px; }
.crm-custom-nav-item { width:45px; height:45px;min-width:45px; min-height:45px;
  display:flex; flex-direction: column;
  justify-content: center; align-items: center; object-fit: cover;}
  .crm-custom-nav-item img { border-radius: 10px;}
.crm-small-custom-nav-item img {border-radius: 5px;}
.crm-custom-nav-item:hover, a.crm-nav-item svg path, a.crm-nav-item:hover svg path { transition: all 0.5s ease;}

a.crm-nav-item svg, a.crm-nav-item img {width:100%;}
.crm-nav-item svg, .crm-small-nav-item img, .crm-small-custom-nav-item img {height:100%;}
.crm-location {font-size: 10px; font-weight: 700; letter-spacing: normal;}
.status {padding:3px 5px; border-radius: 5px;  min-width: 60px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: normal; word-wrap:normal; word-break:keep-all; white-space: nowrap; }
.CRM-item span.status {font-weight: 700;}
.position { display:flex;padding:10px; border-radius: 13px;  width: 150px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: normal; align-items: center; grid-gap:20px; font-size: 1em; }

.Attention {position: absolute; right:-15px; bottom:-9px; height:30px; width: 30px;}
.Photo {position: absolute; right:-4px; bottom:-2px; height:25px; width: 25px;}


.crm-top {padding:15px 10px 5px 10px; display: flex; justify-content: center; grid-gap:10px; }
.purchase-top {padding:15px 10px 15px 15px; display: flex; grid-gap:20px;}
.crm-card-top{padding:10px 10px 0 10px; display: grid;}
.crm-card-top p{font-size: 1.3em; text-align: center; align-content: center;}
.central {text-align: center; justify-items: center; display: grid; grid-gap:10px;}
.action-right {display: flex; justify-content: end;}
.crm-content{padding: 0 0 13px 0;}
.crm-content table {width:100%; border-spacing:0px; table-layout: fixed;}
.crm-content .links, .crm-content .messages {padding:10px 10px 10px 10px; }

.crm-content th {padding:10px 5px 10px 0px;}
.crm-content td {word-wrap: break-word;padding:10px 10px 10px 5px;}

.crm-content th {vertical-align: top; width: 120px; min-width: max-content;}
.crm-content .formitem, .CRM-item, .databutton {padding:10px 10px 10px 10px; margin-bottom: 0px; }
.CRM-welcomewagon, .account-options {padding:10px 10px 20px 10px; grid-gap:20px;}
.account-options, .welcomewagon {margin:10px; border-radius: 13px; padding-bottom: 13px;}
.crm-content form { margin-bottom: 15px; }
.crm-content .links, .crm-content th{font-weight: 500; text-align: right; }
.crm-content .messages {text-align: left;}
.crm-content .links {text-align: right;}

.dottext {display:flex; grid-gap:15px;padding-bottom: 0px; width:100%;}
.dotdesc p {padding-left: 40px;}
.breadcrumb .dottext {width:100%; display: flex; justify-content: end; margin-left: auto; }
.fieldcontent .dottext {margin-bottom: 10px;}
.formmessages .dottext {margin-bottom: 0px;}
.dottext h3 {margin-bottom: 0px;}
.bulletdesc p{padding-left: 18px;}
.bulletdesc {padding-bottom: 15px;}
.dot {min-width:25px; min-height:25px;max-width:25px; max-height:25px;}




.fullpanel {border-radius: 13px; max-height: max-content;}
.fullpanel.pop {max-width: 390px;}
.highlight {font-weight: 600;}




@media (min-width: 2000px)
{
  .bottom {padding: 3px 150px !important;}
  .container{width: 65% !important;}
}

@media (min-width: 1400px)
{
  .twoevencols, .fluid2cols,  .twoevencols .lefty, .twoevencols .righty, .fluid2cols .lefty, .fluid2cols .righty  {grid-gap:50px !important; }
  .crm-content .formitem, .CRM-item, .databutton, .crm-content .links  {padding:10px 30px 10px 30px; grid-gap:10px;}
  .CRM-welcomewagon {padding:30px 30px 20px 30px; grid-gap:20px;}
  .labelright {grid-gap:10px;}
  .container  { padding: 60px 60px; }
  .twocols, .container {grid-gap: 60px !important;}
 .fluid2cols {grid-gap:60px !important;}
  fieldset {display: flex; /*justify-content:center !important;*/}
  .overlaybutton {position:absolute; top:15px; right:15px; display: block;}
}


@media (min-width: 1025px) {
  .FULL-Form, .progwrap, .maxcenter {width:65% !important;}}

@media (min-width: 1024px)
{
  .Login-Display {background-image: url(../images/banners/login-banner3.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #091f41 !important; border-bottom: 1px solid #C73FAD; }
  .Login-Display{min-height: 270px !important; max-height: 270px !important;}
  main {min-height: 270px}}

@media (min-width: 1023px)
{
  h3,  .heading {font-size:1.5em;}
  h4 {font-size: 1.2em; }
  h2.big{ font-size: 2.5em;}
  h3.big{ font-size: 2.5em;}
.even3cols {display: grid; grid-template-columns: 1fr 1fr 1fr; }
.even3cols .category p:empty:before { content: ' '; white-space: pre;}
.even3cols .panel-info {height: 100%; flex-direction:column !important; }
.even3cols .packagecontent {border-top:3px solid #C73FAD !important; border-left:0px solid #C73FAD !important;}
.even3cols .packagecontent .category:last-child {margin-top: auto;}
}

@media (min-width: 913px)
{
 .fluid2cols {display:grid; grid-gap:30px; grid-template-areas: "a a" !important; justify-content: space-between;}
 .twoevencols {display: grid; grid-template-columns: 1fr 1fr; grid-gap:30px;}
 /*.twoevencols .lefty, .twoevencols .righty, .fluid2cols .lefty, .fluid2cols .righty {grid-gap:30px;}*/
  .fluid2cols .panel-info {display:flex; flex-direction:column !important; }
 .fieldcontent, .progress-indicator, .maxcenter { min-width: 633px; max-width: 633px;}/*was max 433*/

.cartheading {padding: 10px 0 0 20px;}
  .directions {grid-area: 1 / 1;}
  input[type="radio"] {width: 25px ; height: 25px;}
  input[type="checkbox"] {width: 25px; height: 25px;}
  .account-options, .welcomewagon {margin:20px;}
.crm-content .formitem, .CRM-item, .databutton, .crm-content .links {padding:10px 20px 10px 20px; margin-bottom: 0px; }
.crm-content th {padding:10px 5px 10px 0px; width:140px !important;}
.crm-content td {word-wrap: break-word;padding:10px 0px 10px 20px;}

.progress-indicator { }
.paypage .logo {padding:40px 0 25px 20px;}
.paypage .spark3 {left:135px; top:47px;}
.CRM-welcomewagon{padding: 10px 20px 10px 20px;}
.crm-top {padding:15px 20px 5px 20px;}

}


@media (min-width: 900px)
{
  h1{font-size: 1.9em; line-height: normal;}
  h2 {font-size: 1.9em; line-height: normal}
  h3 {font-size: 1.5em; line-height: normal}
  h4, h5, .heading {font-size:1.2em; line-height:normal; font-weight: 500;}
  .bottom .left {align-content: center; }
  .bottom .left {margin-top: auto; margin-bottom: auto;}}

@media (min-width: 600px)
{
 .container {width:90%;}
 .Login-Display {background-image: url(../images/banners/login-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #091f41; }
  .FULL-Form, .progwrap, .maxcenter {width:75%;}
  .container:has(.maxcenter) {align-items: center;}
  .bottom {padding: 3px 40px;}
.crm-content th {padding:10px 5px 10px 20px; width:180px;}
.crm-content td {word-wrap: break-word;padding:10px 20px 10px 20px;}

/* product panels */
.even3cols .panel-info {display:flex; flex-direction:row; }
.even3cols .panel-info .packagecontent {border-top:0px solid #C73FAD; border-left:3px solid #C73FAD;}
.even3cols .panel-info .lighten {padding:25px 20px;}
.lighten {min-width: 250px;}


}


@media (min-width: 480px)
{

.container  {padding: 30px 30px;}
.status {min-width: 72px;}
.progress-step {padding: 10px 20px 10px 30px;}
.progress-step:first-child {padding-left: 20px;}
.progress-step:last-child {padding-right: 20px;}

}

@media (min-width: 380px)
{
body {font-size: 0.9em;}

}