@font-face {
  font-family: "SansPro";
  font-display: swap;
  src: url('https://d122f4822rob2u.cloudfront.net/fonts/SourceSansPro-Regular.ttf');;
}

@font-face {
  font-family: "Roboto-Medium";
  font-display: swap;
  font-weight: 500;
  src: url('https://d122f4822rob2u.cloudfront.net/fonts/Roboto-Medium.ttf');;
}



@font-face {
  font-family: "righteous";
  font-display: swap;
  src: url('https://d122f4822rob2u.cloudfront.net/fonts/Righteous-Regular.ttf');;
}

html{
  scroll-padding-top: 90px;
  font-family: 'SansPro';
  font-size: 1.0em;
}


.boldBody{
  font-size: 1.1em;
}

.lightBody{
  font-size: 1.1em;
}

.rising-dots-container {
  position: relative;
  overflow: hidden;
  /*  ↑ transparent → opaque in the first 60 px from the top   */
  mask-image:        linear-gradient(to bottom, transparent 0, #000 60px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
}

.rising-dots-container img {
  position: relative; /* Ensure image is positioned for layering */
  z-index: 2; /* Bring image above the dots */
}

.rising-icon {
  position: absolute;
  bottom: 0;
  font-size: 1rem;        /* tweak size to taste */
  color: rgb(145, 145, 145);
  animation: rise 4s linear forwards;
  pointer-events: none;   /* optional: icons don’t intercept clicks */
  z-index: 1;             /* stay behind main content */
}

/* existing keyframes */
@keyframes rise {
  0%   { transform: translateY(0);       opacity: 1; }
  80%  {                                 opacity: 1; }
  100% { transform: translateY(-400px);  opacity: 0; }
}


#topBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #AA00FF; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 13px; /* Increase font size */
}

.darkhover {
  -webkit-filter: brightness(100%);
  cursor: pointer;
}

.darkhover:hover {
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.darkhover-selected {
  -webkit-filter: brightness(80%);
}


@media only screen and (max-width: 500px) {
  .save_menu{
    max-width: calc(100vw - 40px); 
    overflow-x: auto;
  }
}
@media only screen and (min-width: 500px) {
  .save_menu{
    max-width: 400px; 
    overflow-x: auto;
  }
}


#topBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


.underground{
  background-color: #191308;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)),
  url('images/index_background2.svg');
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  font-family: 'SansPro';
  font-size: 1.1em;

  }

  .dubai{
    
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
    url('images/dubai.gif');
    width: 100%;
    min-height: 800px;
    background-position: center;
    background-size: cover;
  }

  .stars{
    background-color: #191308;
    background-image: url('images/stars.svg');
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    }

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


  .grass_bg{
    background-color: #191308;
    background-image: url('images/grass_bg.png');
    background-attachment: fixed;
    background-size: cover;
    }

.active_1{
  background-color: lightgoldenrodyellow;
}

.btn-outline-light:hover{
  color: black !important;
}

.btn-outline-light:focus{
  color: black !important;
}



  .tooltip-inner {
    color: black;
    background-color: rgb(255,255,255, 0);
    opacity: 0.5;
  }

  .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgb(255,255,255, 0);
  }

  .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgb(255,255,255, 0);
  }

  .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: rgb(255,255,255, 0);
  }

  .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgb(255,255,255, 0);
  }


.search-table-outer {
  overflow-x: auto;
  /* border:1px solid grey; */
  padding-top: 10px;
  padding-bottom: 10px;
}

.search-table th{ min-width: 100px; padding:3px }
.search-table td{ min-width: 100px; padding:3px }


  .btn-primary.darkmenu.selected{
    border: 2px solid black;
    background-color: 	#E8C7DE;
    color: black
  }



  .btn-primary.darkmenu:hover {
    color:black;
    background-color: white;
    border-color: black; /*# set the color you want here*/
  }

  .btn-primary.darkmenu{
    background-color: #292b2c;
    border: 1px solid grey;
  }

.ctr{
  margin-top: 150px; 
  margin-bottom: 150px;
}

.ctr2{
  margin-top: 80px; 
  margin-bottom: 80px;
}

.ctr3{
  margin-top: 120px; 
  margin-bottom: 120px;
}

.ctr4{
  margin-top: 40px; 
  margin-bottom: 40px;
}

.ctr5{
  margin-top: 220px; 
  margin-bottom: 40px;
}

.fixed_alert{
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 92%;
  animation: slidedown 0.2s 0.2s ease-out forwards;
}
@keyframes slidedown {
  to {
    top: 47px;
  }
}


.break {
  width: 100%;
}

  .w100 {
    font-weight: 100;
    font-size: 1.0em;
  }

  @media only screen and (min-width: 800px) {  
    .w400 {
      font-weight: 400;
      font-size: 1.6em;
    }  
  }

  @media only screen and (max-width: 800px) {  
    .w400 {
      font-weight: 400;
      font-size: 1.2em;
    }  
  }
  

  @media only screen and (min-width: 800px) {  
    .w300 {
      font-weight: 400;
      font-size: 1.4em;
    }  
  }

  @media only screen and (max-width: 800px) {  
    .w300 {
      font-weight: 400;
      font-size: 1.2em;
    }  
  }

  @media only screen and (min-width: 800px) {     
    .w600 {
      font-weight: 400;
      font-size: 3em;
    }
  }

  @media only screen and (max-width: 800px) {  
    .w600 {
      font-weight: 400;
      font-size: 1.6em;
    }  
  }

  @media only screen and (min-width: 800px) {     
    .w700 {
      font-weight: 600;
      font-size: 3em;
    }
  }

  @media only screen and (max-width: 800px) {     
    .w700 {
      font-weight: 600;
      font-size: 2em;
    }
  }  


  @media only screen and (min-width: 800px) {     
    .w800 {
      font-weight: 800;
      font-size: 3.5em;
    }
  }

  @media only screen and (max-width: 800px) {     
    .w800 {
      font-weight: 800;
      font-size: 2.5em;
    }
  }  

  .w900 {
    font-weight: 900;
  }  

  @media only screen and (max-width: 800px) {  
    .accordtext {
      font-weight: 400;
      font-size: 1.1em;
    }  
  }


.white{
color:white;
}

.lightblue {
  color:#3CFEFE;
}

.purple {
  color: #AA00FF
}

.lightgrey{
  background-color: #E5E4E4;
  border: 2px solid grey;
}

.btn-secondary.selected{
  color: black;
  border: 1px solid black !important;

}


.selected{
  background-color: #E5E4E4;
  border: 3px solid black;
}

.selected:hover{
  border: 3px solid black !important;
}


.selected1{
  background-color: #E5E4E4;
  border: 3px solid black;
}



.selected0{
  background-color: #f1f0ef;
  border: 1px solid black;
}

.databaseSelected{
  display: none;
}

.selected2{
  background-color: white;
  border: 1px solid black;
}

.selected3{
  background-color: white;
  border: 2px solid black;
}

.selected3:hover{
  background-color: white;
  border: 2px solid black !important;
}

.selected4{
  background: rgba(255, 255, 255, 0.2) !important;
}

.selected5{
  background: white !important;
  /* make button look selected */
  border: 1px solid black !important;
  color: black !important;
  /* shadow */
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.selected6{
  background-color: white;
  border-color: black;
  color: #000;
}


.font-primary {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  color: transparent; /* Make the text color transparent */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* For Safari */
  --tw-gradient-from: #9CACFF;
  --tw-gradient-to: rgb(214 173 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #D6ADFF, var(--tw-gradient-to);
  --tw-gradient-to: #D7B8FF;
}

.font-primary-darker {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  color: transparent; /* Make the text color transparent */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* For Safari */
  --tw-gradient-from: #3556ff;
  --tw-gradient-to: rgb(214 173 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #a042ff, var(--tw-gradient-to);
  --tw-gradient-to: #994aff;
}


.font-primary-dark{
  color: #793EC7 !important;
}


.btn-primary {
background: linear-gradient(135deg, #5271ff, #7b5cff); /* CalcForge Home mockup gradient */
border-color: transparent;
color: #ffffff; /* White text for high contrast */
}
.btn-primary:hover {
  color: white;
  background: #3b58cc; /* Slightly darker blue on hover */
  border-color: transparent;
}
.btn-primary:focus {
color: white;
background: #3b58cc; /* Slightly darker blue on hover */
border-color: transparent;
}


.btn-primary.selected {
  color:black !important;
  background-color: #d6d7f2; /* 50% transparent purple */
  border: 1px solid black;
}

.btn-primary.disabled{
  background-color: rgb(88, 88, 88) !important;
  border: 1px solid black !important;
}

.btn-primary:disabled{
  background-color: rgb(88, 88, 88) !important;
  border: 1px solid black !important;
}

.btn-outline-dark:hover{
  color:black !important;
  background-color: #d6d7f2; /* 50% transparent purple */
  border: 1px solid black;
}



.beam_control
{
  width: 300px;
  height: 400px;
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -100%);
  border: solid black 2px;
}

.beam_control_sub
{
  position: absolute;
  top: 20%;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  text-align: center;
}

.closebeam
{
  position: absolute;
  top: 0%;
  left: 75%;
}

.lightgrey:hover {
  color: black;
  background-color: white;
  border: 2px solid black;

}


.btn_dark_database {
  color: white;
  border-color: white;
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .2s ease-out;
}

.btn_dark_database:hover {
  color: white;
  border-color: white;
  background: rgba(255, 255, 255, 0.2) !important;
}



.btn-dark-1 {
  display: block;
  color: white;
  border-color: white;
  background: linear-gradient(to right, white 50%, #28242c 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .2s ease-out;
}

.btn-dark-1:hover {
  display: block;
  color: black;
  border-color: white;
  background-position: left bottom;

}

.no-border {
  border: 0;
  box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}


.btn-primary2
{
  background-color: #0275d8;
  color: white;
}



.form-control{
  border-color: black;
}

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

@media only screen and (min-width: 1200px) {
  .pt-10 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1200px) {
  .pt-10 {
    padding-top: 30px;
  }
}

.animated1 {
	height:200px;
  margin: 0;
	padding: 0;
	overflow: hidden;
}
.animated2 {
	margin: 0 !important;
	padding: 0 !important;
  width:100%;
}
.wrapper {
	height: 300px;
	width: 100%;
	background: #110425;
	overflow: hidden !important;
}

.active_dark {
  color: #D8D8D8	 !important;
}

.active_dark:hover {
  color: white !important;
}

.rails {
	position: relative;
  overflow:hidden;
	bottom: -70px;
	height: 315px;
	width: 1920px;
	background: url('images/rails.png');
	background-repeat: repeat-x;
	background-position: top center;
	background-size: contain;
	animation: translateX 5s infinite linear both;
}
.train {
	position: relative;
	bottom: 250px;
	height: 315px;
	width: 1500px;
  left: 35%;
  transform: translateX(-50%);
	background: url('images/train.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}

.lights {
	position: relative;
	bottom: 630px;
	height: 315px;
	width: 1920px;
	background: url('images/lights.png');
	background-repeat: repeat-x;
	background-position: top center;
	background-size: contain;
	animation: translateX 4s infinite linear both;
}


.results {
  max-width: 2000px;
}

@keyframes translateX {
	0% {background-position: 0px 0px;}
	100% {background-position:  1920px 0px;}
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar1 {
  background:transparent;
}

.viewportheight {
  min-height:87vh;
}

.viewportheight2 {
  min-height:93vh;
}

.predictorcolour {
 background-color: #F6F0F9;
}

.open{
  position: relative;
  animation-fill-mode: forwards;
  animation-name: move;
  animation-duration: 0.5s;
}

.curveborder {
  border-radius: 10px;
}

.flex-fixed-width-item {
  flex: 0 0 360px;
}

@keyframes move {
  from {
      left: 110%;
  }
  to {
      left: 0%;
  }
}

.fade-in-slow{
  -webkit-animation: 0.2s ease 0s normal forwards 1 fadein;
  animation: 0.2s ease 0s normal forwards 1 fadein;
  opacity:1
}

.fade-in-slow2{
  -webkit-animation: 0.2s ease 0s normal forwards 1 fadein;
  animation: 0.2s ease 0s normal forwards 1 fadein;
  opacity:1
}

.fade-in-slow3{
  -webkit-animation: 1s ease 0s normal forwards 1 fadein;
  animation: 1s ease 0s normal forwards 1 fadein;
  opacity:1
}

.fade-in-slow4{
  -webkit-animation: 1s ease 0s normal forwards 1 fadein;
  animation: 1s ease 0s normal forwards 1 fadein;
  opacity:1
}

@keyframes fadein{
  0% { opacity:0; }
  75% { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadein{
  0% { opacity:0; }
  75% { opacity:0; }
  100% { opacity:1; }
}

.fade-in-fast{
  -webkit-animation: 0.1s ease 0s normal forwards 1 fadein;
  animation: 0.1s ease 0s normal forwards 1 fadein;
  opacity:1
}

@keyframes fadein{
  0% { opacity:0; }
  33% { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadein{
  0% { opacity:0; }
  33% { opacity:0; }
  100% { opacity:1; }
}

.good:hover {
  background-color: #4CAF50; /* Green */
  color: black;
}

.average:hover {
  background-color: yellow; /* Yellow */
  color: black;
}

.poor:hover {
  background-color: red; /* Red */
  color: black;
}

@media only screen and (min-width: 1200px) {
.chart_height
{
  height: 75vh
}
}

@media only screen and (max-width: 1200px) {
  .chart_height
  {
    height: 35vh
  }
  }

     

  @media only screen and (min-width: 1200px) {
    .form_height
    {
      height: 75vh
    }
    }  


.detailed_button
{
  background-color: #df9eff;
  border-color: black; 
  color:black;

}

.detailed_button:hover {
  color:black;
  background-color: #f3dbff;
  border-color: black; /*# set the color you want here*/
}

.form_summary {
  width: 30px; 
}

#menuarrow {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #AA00FF;
  width: 35px;
  height: 50px;
  z-index:15;
  display: flex;
  align-items: center;

}

.menu_text {
  display: flex;
  text-align: center;
  margin:auto;
}

#load{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: black;
}

.rotate {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
}

.rotate-rotated {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
/*
.flash {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.5s;
}



.flash1 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.6s;
}

.flash2 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.7s;
}

.flash3 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.8s;
}

.flash4 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 2.9s;
}

.flash5 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.1s;
}

.flash6 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.2s;
}

.flash7 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.3s;
}

.flash8 {
  animation-name: glowing;
  animation-duration: 0.2s; 
  animation-iteration-count: 1;
  animation-play-state: running; 
  animation-timing-function: ease-out; 
  animation-delay: 0.4s;
}
*/

@keyframes glowing {

  0% { color: white; background-color: #28242c; border-color: white; }
  20% { color: #808080; background-color: #949296; border-color: #808080; }  
  30% { color: black; background-color: white; border-color: black; }
  60% { color: black; background-color: white; border-color: black; }
  80% { color: #808080; background-color: #949296; border-color: #808080; }
  100% { color: white; background-color: #28242c; border-color: white; }
}

.circle {
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 50%
}

.dropdown-menu {
  max-height: 500px;
  overflow-y: auto;
}

.bg-transparent {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.google-button {
  display:block;
  margin:auto;
  border-width: 0;
  background: white;
  color: #737373;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  padding: 0;}
  
.google-button:hover {
    box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1);
  }
  
    
.google-button__icon {
  display: inline-block;
  vertical-align: middle;
  margin: 8px 0 8px 8px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
}

.google-button__icon--plus {
  width: 27px;
}

.google-button__text {
  display: inline-block;
  vertical-align: middle;
  padding: 0 12px;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Roboto',arial,sans-serif;
}

.g-sign-in-button {
  margin: 10px;
  display: inline-block;
  width: 240px;
  height: 50px;
  background-color: #4285f4;
  color: #fff;
  border-radius: 1px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
  transition: background-color .218s, border-color .218s, box-shadow .218s;
}
.g-sign-in-button:hover {
  cursor: pointer;
  -webkit-box-shadow: 0 0 3px 3px rgba(66,133,244,.3);
  box-shadow: 0 0 3px 3px rgba(66,133,244,.3);
}
.g-sign-in-button:active {
  background-color: #3367D6;
  transition: background-color 0.2s;
}
.g-sign-in-button .content-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}
.g-sign-in-button img {
    width: 18px;
    height: 18px;
}
.g-sign-in-button .logo-wrapper {
   padding: 15px;
   background:#fff;
   width: 48px;
   height: 100%;
   border-radius: 1px; 
   display: inline-block;
}
.g-sign-in-button .text-container {
    font-family: Roboto,arial,sans-serif;
    font-weight: 500;
    letter-spacing: .21px;
    font-size: 16px;
    line-height: 48px;
    vertical-align: top;
    border: none;
    display: inline-block;
    text-align: center;
    width: 180px;
}


.google-button__text2 {
  display: inline-block;
  vertical-align: middle;
  padding: 0 4px;
  font-size: 14px;
  font-family: 'Roboto',arial,sans-serif;
  color: white;
}

.google-button__icon2 {
  display: inline-block;
  vertical-align: middle;
  margin: 8px 0 8px 8px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
}

.google-button2 {
  height: 38px;
  border-width: 0;
  background: white;
  color: #737373;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  padding: 0;}
  
.google-button2:hover {
    box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1);
    background-color: #5d95f0 !important;
  }

  .fade_in_fast{
    -webkit-animation: 0.5s ease 0s normal forwards 1 fadein;
    animation: 0.5s ease 0s normal forwards 1 fadein;
    opacity:1
  }

  .fade_in_slow{
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
    opacity:1
  }

  .helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }



  @keyframes glowing2 {
    0% { box-shadow: 0 0 -5px #e3d6f3; }
    40% { box-shadow: 0 0 10px #e3d6f3; }
    60% { box-shadow: 0 0 10px #e3d6f3; }
    100% { box-shadow: 0 0 -5px #e3d6f3; }
  }
  
  .button-glow {
    animation: glowing2 3000ms infinite;
  }

@media only screen and (min-width: 700px) {
  .earth_holder
  {
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
    height: 600px
  }

  .earth{
    height: 730px
  }

}

@media only screen and (max-width: 700px) {
  .earth_holder
  {
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
    height: 300px
  }
  
  .earth{
    height: 400px
  }

}

.button_data{
  min-width: 150px;
}

.primary_selected_discipline{
  background-color: #E8C7DE !important;
  color: black !important;
}

.primary_selected_type{
  background-color: #E8C7DE !important;
  color: black !important;
}

.primary_selected_type2{
  background-color: #E8C7DE !important;
  color: black !important;
}

.report_image{
  max-width: 200px;
  max-height: 300px;
}

.report_image:hover{
  max-width: 210px;
}

.report_data{
  min-height: 390px;
}

.greyed{
  color:gray !important;
}

.text-grey{
  color: #d3d3d3;
}

.text-danger{
  display: none;
  margin-left: auto;
  margin-right: auto;

}

.btn-success{
  background-color: #559E55;
  color: white;
}

@media only screen and (max-width: 500px) {
  iframe[src*=youtube] {
    width: 330px;
    height: 200px;
  }
}

.big-image {
  height: 310px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/excavation_photo.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_bearing {
  height: 300px;
  width: 100%;
  position: relative;
  background: none;
}

.big-image_piling {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/piling.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_retaining {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/retaining_wall.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_database {
  height: 450px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/database_bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_slope {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/slope.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.big-image_steel {
  height: 300px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 100%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/steel_frame_bg.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_frame {
  height: 250px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/frame_background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.big-image_beam {
  height: 250px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://civilsaistatic.s3.ap-southeast-1.amazonaws.com/beam_bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlay2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}




.overlay p {
  margin: 0;
}

.selected_border{
  border-width: 1;
  border-color: black !important;
}

.initial_hidden{
  display: none;
}

.table_hidden{
  display: none;
}

.show_important{
  display: block !important;
}

.pastel_green{
  background-color: #C1E1C1;
}

.dark_gradient{
  background: linear-gradient(#212529, 70%, #141414) !important;
}

.dark_gradient_inverse{
  background: linear-gradient(#141414, 70%, black) !important;
}

.frame_img {
  position: relative;
  display: inline-block;
}

.frame_overlay {
  position: absolute;
  top: 30px;

  right: 30px;
  z-index: 5;
}

.frame_overlay2 {
  position: absolute;
  top: 40px;
  right: 25px;
  z-index: 5;
}



.frame_overlay3 {
  position: absolute;
  top: 40px;
  left: 60px;
}

.frame_overlay4 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
}


.slick-slide {
  margin: 0px 20px;
}


.slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -khtml-user-select: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-tap-highlight-color: transparent;
}

.slick-list {
 position: relative;
 display: block;
 overflow: hidden;
 margin: 0;
 padding: 0;
}

.slick-list:focus {
 outline: none;
}

.slick-list.dragging {
 cursor: pointer;
 cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
   -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
}

.slick-track {
 position: relative;
 top: 0;
 left: 0;
 display: block;
}
.slick-track:before,
.slick-track:after {
 display: table;
 content: '';
}
.slick-track:after {
 clear: both;
}
.slick-loading .slick-track {
 visibility: hidden;
}

.slick-slide {
 display: none;
 float: left;
 height: 100%;
 min-height: 1px;
}
[dir='rtl'] .slick-slide {
 float: right;
}
.slick-slide img {
 display: block;
  margin: auto;
  max-width:200px;
  max-height:70px;
  width: auto;
  height: auto;
}
.slick-slide.slick-loading img {
 display: none;
}
.slick-slide.dragging img {
 pointer-events: none;
}
.slick-initialized .slick-slide {
 display: block;
}
.slick-loading .slick-slide {
 visibility: hidden;
}
.slick-vertical .slick-slide {
 display: block;
 height: auto;
 border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
   display: none;
}

a[type='button'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.canvas_section
{
    display: block;
    margin: 0 auto;
}

.tableFixHead          { overflow: auto; height: 90vh; }
.tableFixHead thead td { position: sticky; top: -2px; z-index: 1; font-weight: bold;}
.tableFixHead thead th { position: sticky; top: -2px; left: -2px; z-index: 20; font-weight: bold;}

.tableFixHeadMin          { overflow: auto;}
.tableFixHeadMin thead td { position: sticky; top: -2px; z-index: 1; font-weight: bold;}
.tableFixHeadMin thead th { position: sticky; top: -2px; left: -2px; z-index: 20; font-weight: bold;}



.nav-tabs .nav-item-item{
  color: purple;
}

.render_offscreen{
  position: absolute !important; top: -3000px !important;
}

.stick_column{
  position:sticky !important; 
  left: -2px !important;
}

.button_strike:hover{
  text-decoration: line-through;
  background:none;
  color:white !important;
}

.form_strike:hover{
  text-decoration: line-through;
  color:black !important;

}

.menu_holder{
  visibility: hidden;
  position: fixed;
  top: 70px;
  right: 10px;
  z-index: 5;
  width: 150px; height: 60px;
}

.inline_menu{
  display: inline-block;
}


.calculator_category:hover{
  background-color: #585c64;
}

.calculator_category{
  background: none;
}

.calculator_selected{
  background-color: #585c64;
}


.index_title{
  /* font family bold maven pro */
  font-family: 'Roboto-Medium', sans-serif;
}




.canvas_align{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);               
}


.fingerprint {
  width: 100%;
  height: 100%;
}

.fingerprint.scanning::after {
  content: '';
  position: absolute;
  width: 75%;
  height: 8px;
  background-image: linear-gradient(to bottom,
    rgba(170, 184, 190, 0),
    rgba(170, 184, 190, .8));
  animation: scanning 1.5s linear infinite;
}

@keyframes scanning {
    100% { transform: translate(0, 300px); }
}


.heading-with-image {
  display: table;  
}

.heading-with-image span {
  display: table-cell;
  vertical-align: middle;
}

.heading-with-image span:first-child {
  padding-right: 16px;
}

.hero-divider {
  min-height: 50vh;
  position: relative;
}

.hero-divider .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-center-image {
  border-radius: 5px;
  margin: 0 auto;
  display: block;
}

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}

  .accordion-button-darkmode::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }

  .stars-banner {
    background-image: url('images/stars-banner.svg');
    border-image: linear-gradient(#793EC7, black) 100 !important;
    /* shift background image down */
    background-position: 0px 50px;
    border-style: solid;
    border-right: none;
    border-left: none;

  }
  
  .primary-darkmode {
    color: #b899e1;
    text-decoration: none;
}

.primary-darkmode:hover {
  color: #e3d6f3;
  text-decoration: none;
}

.calculatorHeading {
  margin-top: 100px;
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  .calculatorHeading {
    margin-top: 100px;
  }
}

/* .database_holder{
  min-height: 350px;
} */


.border-gradient-thin{
  border-radius: 0px;
  border-image: linear-gradient(#680070, #00596f) 10 !important;
  border-width: 2px;
  border-style: solid;
}

.border-gradient{
  border-radius: 0px;
  border-image: linear-gradient(#F577FF, #49DBFF) 10 !important;
  border-width: 5px;
  border-style: solid;
}


/* ─── Unordered lists with custom icons ─────────────── */
ul.customList,
ul.customList-cross {
  list-style: none;          /* remove default bullets */
  margin: 0;
  padding-left: 0;
}

ul.customList li,
ul.customList-cross li {
  position: relative;        /* anchor the pseudo-icon  */
  padding-left: 1.75em;      /* room for the icon      */
  margin-block: 0.35em;      /* tidy vertical rhythm   */
  line-height: 1.4;
}

/* ─── Shared pseudo-icon rules ──────────────────────── */
ul.customList li::before,
ul.customList-cross li::before {
  position: absolute;
  left: 0;
  top: 0.15em;               /* vertical alignment tweak */
  width: 1em;                /* fixes inconsistent widths */
  font-size: 1em;
  font-family: "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  line-height: 1;            /* keeps icon height tight  */
  text-rendering: optimizeLegibility;
}

/* ✔︎  CHECKMARK list  ----------------------------------*/
ul.customList li::before {
  content: "\2714\FE0E";     /* check + variation selector—text style */
  color: #34b233;            /* the green you wanted */
}

/* ✖︎  CROSS list  --------------------------------------*/
ul.customList-cross li::before {
  content: "\2716\FE0E";     /* cross + variation selector—text style */
  color: #000;               /* original black (change if you prefer) */
}


b{
  font-family: 'SansPro';
  font-size: 1em;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


@media (max-width: 992px) {
  /* Style for screens smaller than "lg" */
  .border-end-lg {
    border-right: none !important;
  }
}

.modal-content{
  border-radius: 10px;
}

.card{
  border-radius: 10px;
}

.card-header{
  background: none;
  border-radius: 10px;
}

.card-footer{
  background: none;
  border-radius: 10px;
}

.min_col_width{
  min-width: 70px;
}

.min_col_width_lg{
  min-width: 150px;
}



@media only screen and (max-width: 1000px) {
  .fe_canvas{
    height: 40vh
  }
}
@media only screen and (min-width: 1000px) {
  .fe_canvas{
    height: 70vh
  }
}

.blur_text {
  filter: blur(2px);
  user-select: none;
  pointer-events: none;
}

.codes_select:hover{
  cursor: pointer !important;
}

.youtube_border:hover{
  /* make border color white */
  border: 1px solid white;
  /* border radius 5 */
  border-radius: 10px;
  overflow: hidden;
}


.upload-area {
  border: 2px dashed #b4b4b4;
  border-radius: 5px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  background-color: #e9edf0;
}

.upload-area-active:hover {
  border: 2px dashed #868686;
  background-color: #eff2f4;
}

.upload-area-active{
  cursor: pointer;
}

.upload-area-small {
  border: 2px dashed #b4b4b4;
  border-radius: 5px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  background-color: #e9edf0;
  min-height: 95px;
  width: 100%;
}

.upload-area-dark {
  border: 2px dashed #4d4d4d;
  border-radius: 5px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  max-width: 500px;
  background-color: rgba(100, 100, 100, 0.08);
}

.upload-area-dark-active:hover {
  background-color: rgba(100, 100, 100, 0.16);
}

.upload-area-dark-active{
  cursor: pointer;
}



.loading-holder {
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  background-color: #f7f7f8;
  display: block;
  max-width: 100%;
  padding: 20px 12px;
  word-wrap: break-word;
  position: relative;
}

/* Add this if you want to differentiate user and AI messages */
.message-holder {
  background-color: #f0f0f0;
  max-width: 100%;
  padding: 20px 20px;
  word-wrap: break-word;
}


.message-holder-row{
  max-width: 100%;
  position: relative;
}

.message{
  display:block;
  margin: auto;
}

.user-message {
  border: none;
  background-color: #ffffff;
  border-top: 1px solid #d3d3d3;
}

.ai-message {
  border-top: 1px solid #d3d3d3;
  background-color: #f7f7f8;
}


.progress-bar {
  background-color: #b899e1;
}

.chat-input-shadow {
  border: 1px solid lightgrey;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.vh-100{
  height: calc(100vh - 52px) !important;
}

.min-vh-100{
  min-height: calc(100vh - 52px) !important;
}


.gpt_input {
  width: 100%;
  font-size: 18px !important;
  min-height: 1em; 
  resize: none;
  box-sizing: border-box;
  border: 1px solid #ccc;
  box-shadow: none !important;
}

/* #titleholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
} */



.pdf-icon{
  color:#971a26 !important;
}

.scrollable-tbody {
  height: 35vh;
  overflow: auto;
  display: block;
  min-width:100%;
}

.table.scrollabletable tbody {
  display: block;
}

.table.scrollabletable thead,
.table.scrollabletable tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.scrollable-thead {
  width: calc(100% - 15px) !important; /* 17px is a common width for scrollbars */
}


.modalSideMenu {
  padding-top: 0px;
  max-width:120px;
}

.modalSideMenu .btnSelected {
  background-color: #343a40 !important;
}

.modalSideMenu .btn {
  background-color: transparent;
  z-index: 9999 !important;
  border-radius: 5px;
  outline: 0 !important;
  padding-top: 8px;
  font-size: 1em;
  border: none;
}

.modalSideMenu .btn:hover {
  background-color: #343a40;
  color: #28242c;
  border: none;
}

.bg-black{
  background-color: black;
}

.btn-outline-light.dimmed {
  border: #000;
  background-color: transparent;
}

.btn-outline-light.dimmed:hover {
  background-color: #343a40;
  border: none;
  color: white !important;
}

.btn-outline-light.dimmed:focus {
  background-color: #343a40 !important;
  border: none;
  color: white !important;
}

.btn-outline-light.dimmed:active {
  background-color: #343a40 !important;
  border: none;
  color: white !important;
}

.btn-outline-light.dimmed.dropdown-toggle.show{
  background-color: #343a40 !important;
  border: none;
  color: white !important;
}

.nav-link.show.btn{
  color: white !important;
}

@media (max-width: 1200px) { /* This corresponds to Bootstrap's 'md' breakpoint */
  .modalSideMenu {
    display: none;
  }
}

.nav-link:hover{
  background-color: #eeefff !important; /* 50% transparent purple */
}

.navbar .nav-link.active {
  font-weight: normal !important; /* Prevent bold font on active link */
  background-color: #eeefff !important; /* 50% transparent purple */
}

.navbar .nav-link.show.btn {
  color: black !important; /* Change color of active link */
  font-weight: normal !important; /* Prevent bold font on active link */
}

.navbar .btn.nav-link,
.navbar .btn.nav-link:focus,
.navbar .btn.nav-link:active {
  font-weight: normal !important;
}


.bg_light_gradient {
  background: linear-gradient(300deg,#fcfcfc,#f0eef3,#f8f8f8);
  background-size: 180% 180%;
  animation: gradient-animation 24s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@media (max-width: 700px) {
  #design_view{
    max-height: calc(100vh - 300px) !important;
  }
}

@media (min-width: 700px) {
  #design_view{
    max-height: calc(100vh - 240px) !important;
  }
}




@media only screen and (max-width: 1525px) {
  #side_menu_offcanvas_body{
    padding-left: 3px;
    padding-right: 3px;
  }
}

@media only screen and (min-width: 1525px) {
  #side_menu_offcanvas_body{
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 768px) {
  .h-md-100 {
      height: 100%;
  }
}

.bg-responsive {
  background: transparent;
}

@media (min-width: 768px) {
  .bg-responsive {
    background: white;
  }
}

.btn-hover-white:hover {
  color: black;
  background-color: #fff;
  border-color: #fff;
}

.user_upload_item:hover{
  background-color: #f0f0f0;
}

.pdf_button:hover{
  background-color: white;
}

#pdf-container {
  width: 100%;
  /* height 100% of parent - 40px */
  height: calc(100% - 40px);
  overflow-y: scroll;
  overflow-x: hidden;
}


/* if screensize is less then 800px then regs_list height is 3vh if greater than this then 60vh */
@media (max-width: 700px) {
  #regs_list{
    height: 40vh;
    overflow-y: auto;
  }
}

@media (min-width: 700px) {
  #regs_list{
    height: 70vh;
    overflow-y: auto;
  }
}


.btn-outline-secondary{
  color:#161c2d;
  border-color: #c9c9c9;
}

.btn-outline-secondary:hover{
  color: black;
  background-color: white;
  border-color: #b3b3b3;
}

.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-overlay {
  width:100%;
  height:100%;
  position: absolute;
  z-index: 100; /* Make sure the z-index is above the Leaflet map */
}



.slide{
  text-align: center; /* horizontally center the text */
  color: black;
}

.flex-column-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#user_docs_list {
  flex-grow: 1;
  overflow-y: auto;
}



.btn-design-menu{
    border-radius: 0px;
    text-align: start;
    font-weight: normal;
    border: none;
}
.btn-design-menu:hover{
    background-color: #f1f0ef !important;
    color: #28242c;
}
.btn-design-menu:focus,.btn:active{
    background-color: #f1f0ef !important;
    color: #28242c;
    font-weight: bold;
}




.li-cross {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}

.li-cross::before{
  content: "✗";
  position: absolute;
  left: 0;
  color: red;
  
}

.dropdown-toggle.custom-icon::after {
  display: none;

}

.my-fixed-width-column {
  width: 170px; /* Or whatever width you want */
  flex-shrink: 0; /* Prevents the column from shrinking */
}

.flex-fill {
  flex-grow: 1;
  max-width: calc(100vw - 0px); /* minus the width of your fixed-width column */
}


body {
  max-width: 100vw;
}


.border_light_grey{
  border-color: #444a4f !important;
}

.form-check-input:checked {

  background-color: #793EC7;
  border-color: #000;
}

.spinner-border{
  overflow: hidden;
}

.tooltip-inner {
  padding: 10px 10px; /* Adjust the padding values as needed */
}

strong{
  font-family: 'SansPro';
  font-size: 1.1em;
}

a{
  color: #793EC7
}


.bg-primary {
  background-color: #5271ff !important;
}

.bg-primary-banner{
  background-color: #e1d4f2 !important;
}

.min-vh-75{
  min-height: 80vh !important;
}

.min-vh-90{
  min-height: 90vh !important;
}

.design_tools_page{
  height: calc(100vh - 62px);
}

.bg_dark_gradient{
  background: rgb(35,37,37);
  background: linear-gradient(135deg, rgba(35,37,37,1) 0%, rgba(39,39,39,1) 100%);
  border: 1px solid rgb(70, 70, 70);
}

.side_menu_selected{
  background-color: #e3e2e0 !important;
}

.map-overlay {
  width:100%;
  height:100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value (0.5) for the desired level of transparency */
  z-index: 99; /* Make sure the z-index is above the Leaflet map */
}

#civilsgpt_card{
  background-color: #fcfcfc;
}

.card-hover-animation:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow */
  /* darken background color by 5% */
  background-color: #d6d7f23d !important;
}


.background2{
  background: linear-gradient(270deg, #ffffff, #f1f4ff, #ffffff);
  background-size: 600% 600%;

  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}




.pricing{
  font-size: 0.9em !important;
}

/* CSS for making all table columns equal width */
table.equal-width-columns th, 
table.equal-width-columns td {
  width: 25%; /* Divide the table width equally among 4 columns */
}

/* Optional: Ensure table layout is fixed to respect the width */
table.equal-width-columns {
  table-layout: fixed;
  width: 100%; /* Ensure the table spans the full container width */
}

.btn-outline-purple{
  border: 1px solid #715bcc !important;
}



.marquee {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 20s linear infinite; /* Apply animation */
}

.marquee__content2 {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 30s linear infinite; /* Apply animation */
}

.marquee__content img {
  width: 200px;
}

.marquee__content li{
  list-style: none;
}

.marquee__content2 img {
  width: 200px;
}

.marquee__content2 li{
  list-style: none;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}



.courseCarousel .carousel-indicators{
  bottom: auto;                 /* remove the default bottom:0    */
  width:  auto;                 /* let the row hug its contents   */
  left:   50%;                  /* keep it centred as before      */
  transform: translateX(-50%);  /* (matches your start-50 + translate) */
}

.courseCarousel .carousel-indicators button{
  background-color: #000000;    /* indicator colour */
  width: 30px;                  /* indicator width  */
  margin: 0 .25rem;             /* neat spacing     */
}


/* put this after the Bootstrap CSS */
#learnToolsCarousel .carousel-control-prev,
#learnToolsCarousel .carousel-control-next{
  top: 30px;      /* ⇢ 75 px from the top of the carousel */
  bottom: auto;   /* cancel the “stretch-to-bottom” that Bootstrap sets */
}

.link-dark-hover:hover {
  text-decoration: underline;
}

.badge-dot{
  width: .45rem;
  height: .45rem;
}

/* ============================================================
   CalcForge redesign — dark hero/nav/footer + toolkit reskin
   Sourced from the "CalcForge Home" Claude Design mockup.
   All new classes are cf-* prefixed so they don't collide with
   or get overridden by any rule above, and stay reusable across
   other templates. Reuses existing .font-primary-darker,
   .curveborder, .card-hover-animation, .marquee, .index_title,
   .fade-in-* where the mockup's effect already exists above.
   ============================================================ */

/* Site-wide button shape, adopted from the mockup in place of
   Bootstrap's default (smaller radius, regular weight). Only the
   base shape changes here — purpose-built state variants elsewhere
   in this file (.btn-primary.selected/.disabled, .btn-outline-dark
   :hover's toggle recolor, .btn-outline-secondary, .btn-outline-purple,
   .btn_dark_database, .btn-primary2, .btn-success, .btn-design-menu)
   are untouched. */
.btn {
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.5rem 1.1rem;
}
.btn-lg {
  border-radius: 12px;
  font-size: 1.0625rem;
  padding: 0.85rem 1.75rem;
}
.btn-sm {
  border-radius: 8px;
  font-size: 0.8125rem;
}

:root {
  --cf-navy: #0b1020;
  --cf-navy-2: #0e1530;
  --cf-navy-3: #080c18;
  --cf-blue: #5271ff;
  --cf-purple: #7b5cff;
  --cf-gold: #f5c451;
  --cf-light-bg: #f7f8fc;
  --cf-text-soft: #c7cde0;
  --cf-text-softer: #93a0c0;
  --cf-text-body: #4a5675;
  --cf-accent: #8ea2ff;
  --cf-success: #7ee7a8;
  --cf-text-mono-muted: #8b93a7;
}

.cf-mono {
  font-family: 'JetBrains Mono', monospace;
}

.cf-heading {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.cf-heading-sm {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cf-wordmark {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
}
.cf-wordmark-accent {
  color: #8ea2ff;
}

.cf-gradient-text {
  background-image: linear-gradient(90deg, #8ea2ff, #c9a2ff);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.cf-hero,
.cf-section-dark,
.cf-section-light,
.cf-cta-band,
.cf-navbar,
.cf-footer,
.cf-dropdown-dark {
  font-family: 'Source Sans 3', sans-serif;
}

/* ---------- Navbar ---------- */
.cf-navbar {
  background: rgba(11, 16, 32, .92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cf-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .3);
}
.cf-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.cf-navbar .nav-link {
  color: var(--cf-text-soft) !important;
}
.cf-navbar .nav-link:hover,
.cf-navbar .nav-link:focus {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .08) !important;
}
.cf-navbar .nav-link.active,
.cf-navbar .nav-link.show.btn {
  background-color: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.cf-navbar .navbar-nav .nav-link {
  font-weight: 600 !important;
}
.cf-navbar .navbar-nav .nav-link small {
  font-size: 15px !important;
  font-weight: 600 !important;
}
.cf-navbar .cf-nav-actions {
  gap: 12px !important;
}
@media (min-width: 1200px) {
  .cf-navbar .cf-nav-links {
    gap: 30px !important;
  }
}
.cf-navbar .cf-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--cf-text-soft) !important;
  background-color: transparent !important;
}
.cf-navbar .cf-btn-outline:hover,
.cf-navbar .cf-btn-outline:focus {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .4) !important;
  background-color: rgba(255, 255, 255, .08) !important;
}
.cf-navbar .cf-btn-cta {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
  color: #fff !important;
}
.cf-navbar #signin {
  background: linear-gradient(135deg, var(--cf-blue), var(--cf-purple)) !important;
  border-color: transparent !important;
}

.cf-dropdown-dark {
  background-color: #141c38 !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
}
.cf-dropdown-dark .dropdown-item {
  color: var(--cf-text-soft) !important;
}
.cf-dropdown-dark .dropdown-item:hover,
.cf-dropdown-dark .dropdown-item:focus {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
.cf-dropdown-dark hr {
  border-color: rgba(255, 255, 255, .1);
}
.cf-dropdown-dark .index_title,
.cf-dropdown-dark h5 {
  color: #fff !important;
}

/* ---------- Footer ---------- */
.cf-footer {
  background: var(--cf-navy-3) !important;
  color: var(--cf-text-softer) !important;
}
.cf-footer a,
.cf-footer p,
.cf-footer .nav-link {
  color: var(--cf-text-softer) !important;
}
.cf-footer a:hover {
  color: #fff !important;
}
.cf-footer .fs-5 {
  color: #fff;
}
.cf-footer .card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}
.cf-footer .card-text,
.cf-footer .card-text b {
  color: var(--cf-text-softer) !important;
}
.cf-footer .btn-outline-dark {
  color: var(--cf-text-soft) !important;
  border-color: rgba(255, 255, 255, .25) !important;
}
.cf-footer .btn-outline-dark:hover {
  color: #fff !important;
  border-color: #fff !important;
}
.cf-footer-logo {
  filter: brightness(0) invert(1);
}

/* ---------- Hero ---------- */
.cf-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(160, 66, 255, .28), transparent 60%),
    linear-gradient(180deg, var(--cf-navy) 0%, var(--cf-navy-2) 100%);
  color: #fff;
  /* Extra clearance below the fixed navbar (layout.html's mt-1 pt-5 wrapper offset
     is shorter than the navbar itself) so the hero copy isn't cramped under it. */
  padding-top: 40px;
}
.cf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(900px 500px at 30% 20%, #000, transparent 80%);
  mask-image: radial-gradient(900px 500px at 30% 20%, #000, transparent 80%);
  pointer-events: none;
}
.cf-hero .cf-hero-copy,
.cf-hero .cf-hero-visual {
  position: relative;
  z-index: 1;
}

.cf-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-gold);
  border: 1px solid rgba(245, 196, 81, .4);
  background: rgba(245, 196, 81, .08);
  padding: 7px 14px;
  border-radius: 999px;
}

.cf-lead-soft {
  color: var(--cf-text-soft);
}

/* Bootstrap 5.0.2 (this project's version) has no border-*-subtle utilities
   (added in 5.3) — this is the dark-mode equivalent used in their place. */
.cf-border-soft {
  border-color: rgba(255, 255, 255, .12) !important;
}

.cf-trust-strip {
  background: var(--cf-navy-2);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.cf-trust-strip .cf-trust-label {
  color: var(--cf-text-softer);
}
.cf-trust-strip .marquee img {
  filter: brightness(0) invert(1);
  opacity: .7;
}

.cf-stat-row {
  display: flex;
  gap: 24px;
  align-items: center;
}
.cf-stat-row .cf-stat-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .12);
}
.cf-stat-num {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1.1;
}
.cf-stat-label {
  font-size: 13px;
  color: var(--cf-text-softer);
  letter-spacing: .04em;
}
/* light-background variant, used in the community section */
.cf-stat-row.cf-stat-row-light .cf-stat-num {
  color: var(--cf-navy);
}
.cf-stat-row.cf-stat-row-light .cf-stat-label {
  color: #6b7280;
}
.cf-stat-row.cf-stat-row-light .cf-stat-divider {
  background: rgba(0, 0, 0, .1);
}

.cf-hero-video-glow {
  position: absolute;
  inset: -30px -30px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #8ea2ff, transparent 70%);
  opacity: .35;
  filter: blur(30px);
  pointer-events: none;
}

.cf-hero-video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  line-height: 0;
}
.cf-hero-video-frame video {
  width: 100%;
  height: auto;
  display: block;
}

.cf-video-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c7cde0;
  background: rgba(11, 16, 32, .65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 6px 12px;
  border-radius: 999px;
}

/* Label+description fact pairs under the hero video on training pages
   (training_hero.html) -- e.g. "Beginner Level / Suitable for those without coding
   or AI experience." Nothing else in the .cf-hero family renders text like this on a
   dark background, so this is new. */
.cf-hero-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-hero-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cf-hero-fact-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.cf-hero-fact-desc {
  font-size: 13px;
  color: var(--cf-text-softer);
}

/* ---------- Section bands ---------- */
.cf-section-dark {
  background: var(--cf-navy);
  color: #fff;
}
.cf-section-dark .cf-eyebrow {
  color: #8ea2ff;
}
.cf-section-light {
  background: var(--cf-light-bg);
}
.cf-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cf-blue);
  font-weight: 700;
}
.cf-trust-label {
  text-align: center;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b7280;
  font-family: 'JetBrains Mono', monospace;
}

/* ---------- Course / credential cards ---------- */
.cf-course-card {
  display: block;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e6e8f0;
  box-shadow: 0 4px 18px rgba(11, 16, 32, .05);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  text-decoration: none;
  color: inherit;
}
.cf-course-card:hover {
  box-shadow: 0 18px 40px rgba(82, 113, 255, .16);
  transform: translateY(-3px);
  border-color: #c9d2ff;
  color: inherit;
}
.cf-course-card .cf-course-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #eef1ff, #f4edff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-blue);
  font-size: 30px;
}
.cf-course-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.cf-course-level-beginner {
  color: #166534;
  background: #dcfce7;
}
.cf-course-level-intermediate {
  color: #9a3412;
  background: #ffedd5;
}
.cf-course-card .cf-course-enroll {
  color: var(--cf-blue);
  font-weight: 700;
  font-size: 15px;
}

/* ---------- Certifications nav mega-menu (compact list + CTA) ---------- */
.cf-cert-panel {
  width: 520px;
  max-width: 92vw;
  background: #0e1530 !important;
  border-radius: 16px;
  padding: 12px;
  text-align: left !important;
}
.cf-cert-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 12px;
}
.cf-cert-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f5c451;
}
.cf-cert-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cf-text-softer);
}
.cf-cert-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: 11px;
  text-decoration: none;
}
.cf-cert-item:hover {
  background: rgba(82, 113, 255, .14);
}
.cf-cert-item-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(82, 113, 255, .18);
  color: #8ea2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.cf-cert-item-title {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.25;
}
.cf-cert-item-meta {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--cf-text-softer);
  margin-top: 4px;
}
.cf-cert-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(82, 113, 255, .22), rgba(160, 66, 255, .22));
  border: 1px solid rgba(142, 162, 255, .3);
  text-decoration: none;
}
.cf-cert-cta span {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.cf-cert-cta i {
  color: #8ea2ff;
}

/* ---------- Free Tools nav mega-menu (5-column link list) ---------- */
.cf-tools-panel {
  background: #0e1530 !important;
  border-radius: 16px;
  padding: 24px;
  text-align: left !important;
}
.cf-tools-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cf-tools-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8ea2ff;
}
.cf-tools-gh-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--cf-text-softer);
  text-decoration: none;
}
.cf-tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.cf-tools-cat-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 11px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cf-tools-cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(82, 113, 255, .18);
  color: #8ea2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.cf-tools-cat-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.cf-tools-link {
  display: block;
  font-size: 13.5px;
  color: var(--cf-text-soft);
  padding: 7px 9px;
  border-radius: 7px;
  text-decoration: none;
}
.cf-tools-link:hover {
  background: rgba(82, 113, 255, .16);
  color: #fff;
}
.cf-tools-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cf-tools-footer-text {
  font-size: 14px;
  color: var(--cf-text-softer);
}
.cf-tools-footer-text a {
  color: #8ea2ff;
  font-weight: 700;
  text-decoration: none;
}
.cf-tools-browse-btn {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  text-decoration: none;
}

/* ---------- Toolkit (category pills + dark tiles) ---------- */
.cf-tool-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cf-tool-pill {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--cf-text-soft);
}
.cf-tool-pill:hover {
  border-color: rgba(142, 162, 255, .5);
  color: #fff;
}
.cf-tool-pill.selected0 {
  background: linear-gradient(135deg, var(--cf-blue), var(--cf-purple));
  color: #fff;
  border-color: transparent;
}

.cf-tool-tile {
  display: block;
  height: 100%;
  background: linear-gradient(160deg, #141c38, #0e1428);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.cf-tool-tile:hover {
  border-color: rgba(142, 162, 255, .5);
  background: linear-gradient(160deg, #182247, #101733);
}
.cf-tool-tile .cf-tool-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: rgba(82, 113, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-tool-tile .card-title {
  color: #fff !important;
  font-size: 16px;
  margin: 16px 0 0;
}
.cf-tool-tile .card-text,
.cf-tool-tile .card-text small {
  color: var(--cf-text-softer) !important;
}
.cf-icon-invert {
  filter: invert(1) brightness(2);
}

/* ---------- Why-us cards ---------- */
.cf-why-card {
  display: flex;
  gap: 20px;
  padding: 28px;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  background: #fbfbfe;
  height: 100%;
}
.cf-why-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(135deg, #eef1ff, #f4edff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-blue);
  font-size: 20px;
}

/* ---------- FAQ rows ---------- */
.cf-faq-row {
  border: 1px solid #e6e8f0 !important;
  border-radius: 13px !important;
  overflow: hidden;
}
.cf-faq-row .accordion-button {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--cf-navy);
  padding: 20px 22px;
}
.cf-faq-row .accordion-button:not(.collapsed) {
  color: var(--cf-navy);
  background-color: #fff;
  box-shadow: none;
}
.cf-faq-row .accordion-button:focus {
  box-shadow: none;
}
.cf-faq-row .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235271ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  color: var(--cf-blue);
}
.cf-faq-row .accordion-body {
  color: var(--cf-text-body);
}

/* ---------- Final CTA ---------- */
.cf-cta-band {
  background:
    radial-gradient(900px 500px at 50% -20%, rgba(160, 66, 255, .3), transparent 60%),
    linear-gradient(180deg, var(--cf-navy-2), var(--cf-navy));
  color: #fff;
}

/* ---------- Calculator pages (title band, card overlap, theory/aside panels) ---------- */
.cf-calc-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -30%, rgba(160, 66, 255, .26), transparent 60%),
    linear-gradient(180deg, var(--cf-navy) 0%, var(--cf-navy-2) 100%);
  color: #fff;
  /* Extra clearance below the fixed navbar, same reasoning as .cf-hero. */
  padding-top: 40px;
  padding-bottom: 112px;
}
.cf-calc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(800px 420px at 25% 10%, #000, transparent 85%);
  mask-image: radial-gradient(800px 420px at 25% 10%, #000, transparent 85%);
  pointer-events: none;
}
.cf-calc-hero-copy,
.cf-calc-hero-actions {
  position: relative;
  z-index: 1;
}
.cf-calc-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(82, 113, 255, .18);
  border: 1px solid rgba(142, 162, 255, .28);
  color: #8ea2ff;
  font-size: 18px;
}
.cf-calc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cf-text-soft);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 13px;
  border-radius: 999px;
}
.cf-calc-chip i {
  color: #7ee7a8;
  font-size: 11px;
}

/* Pulls the calculator card up over the title band so it visually overlaps it. */
.cf-calc-card-band {
  margin-top: -76px;
  position: relative;
  z-index: 5;
}
@media (max-width: 767.98px) {
  .cf-calc-card-band {
    margin-top: -32px;
  }
}

.cf-panel {
  background: #fff;
  border: 1px solid #dfe4ef;
  border-radius: 16px;
}
.cf-panel-dark {
  background: linear-gradient(160deg, var(--cf-navy-2), var(--cf-navy));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  color: #fff;
}

.cf-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-check-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  color: var(--cf-text-body);
  line-height: 1.5;
}
.cf-check-item i {
  color: #22c55e;
  font-size: 12px;
  margin-top: 5px;
}

.cf-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cf-navy);
  transition: background-color .15s ease, color .15s ease;
}
.cf-link-row:hover {
  background: #f2f5fd;
  color: var(--cf-blue);
}
.cf-link-row i {
  font-size: 12px;
  color: #a9b2c6;
}

/* Slim, full-width "this tool is open source" credit strip. */
.cf-oss-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cf-oss-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cf-navy);
  color: #fff;
}
.cf-oss-strip-body {
  flex: 1 1 auto;
  min-width: 220px;
}
.cf-oss-strip-body h5 {
  margin-bottom: 2px;
}
.cf-oss-strip-body p {
  margin-bottom: 0;
  color: var(--cf-text-body);
}

/* ---- Post-reskin calculator-card interior fixes ---- */
html {
  scroll-behavior: smooth;
}

/* Replaces the ad-hoc .text-start > .btn-group header strips inside calc cards.
   Uses margin-left: auto on the last child (rather than justify-content:
   space-between) so the right-hand item still docks right when an earlier
   sibling is conditionally hidden (d-none), e.g. the Optimise-with-AI button. */
.cf-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.cf-card-head > *:last-child {
  margin-left: auto;
}

/* Static "design code" badge, replaces the disabled Eurocode <select>. */
.cf-code-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid #dfe4ef;
  background: #f4f6fb;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--cf-text-body);
  white-space: nowrap;
}
.cf-code-chip i {
  color: var(--cf-blue);
  font-size: 12px;
}

/* Calculator toolbar (nodes/elements/.../analyse rows on frame, truss, finite_element). */
.cf-calc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .25rem;
}
.cf-calc-toolbar .btn {
  margin: 0;
}
.cf-calc-toolbar-sep {
  width: 1px;
  align-self: stretch;
  background: #dfe4ef;
  margin: 0 .25rem;
}
@media (max-width: 575.98px) {
  .cf-calc-toolbar-sep {
    display: none;
  }
}

/* "Theory & FAQ" link that replaces the old offcanvas ? button. */
.cf-theory-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 13px;
  color: var(--cf-blue);
  text-decoration: none;
  white-space: nowrap;
}
.cf-theory-link:hover {
  color: #3b58cc;
  text-decoration: underline;
}

/* Centres a Bootstrap .spinner-border, which mx-auto cannot do on its own
   (spinner-border is inline-block; auto margins don't centre inline-block boxes). */
.cf-spinner-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Segmented mode switch (e.g. cost.html tunnel/shaft toggle). */
.cf-segmented {
  display: inline-flex;
  background: #eef1f8;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.cf-segmented .btn {
  border-radius: 999px;
  border: 0;
  padding: .35rem 1.1rem;
  font-size: 14px;
}
.cf-segmented .btn:not(.active) {
  background: transparent;
  color: var(--cf-text-body);
}
.cf-segmented .btn:not(.active):hover,
.cf-segmented .btn:not(.active):focus-visible {
  background: #e2e7f5;
}

/* FAQ accordion inside the Method & theory panel (re-homed offcanvas content). */
.cf-theory-faq .accordion-item {
  border: 0;
  border-top: 1px solid #e6eaf3;
  background: transparent;
}
.cf-theory-faq .accordion-button {
  background: transparent;
  padding: .9rem 0;
  font-weight: 600;
  color: var(--cf-navy);
  box-shadow: none;
  font-size: 15px;
}
.cf-theory-faq .accordion-button:not(.collapsed) {
  color: var(--cf-blue);
  background: transparent;
}
.cf-theory-faq .accordion-button::after {
  margin-left: 1rem;
}
.cf-theory-faq .accordion-body {
  padding: 0 0 1rem 0;
  color: var(--cf-text-body);
  line-height: 1.65;
  font-size: 15px;
}

/* ============================================================
   Blog (Phase 3 reception + topic-cluster reskin)
   Cover-card grid, topic chips, related/prev-next, breadcrumbs and
   pagination for blog/templates/blog/*.html, built on the same
   :root tokens as the calculator-page chrome above (--cf-navy,
   --cf-blue, --cf-light-bg, --cf-text-body, panel border #dfe4ef,
   on-dark accent #8ea2ff). Everything here is scoped to cf-* classes
   local to the blog templates -- nothing above is touched.
   ============================================================ */

/* ---------- Cover-card grid (list, topic hub, related-articles) ---------- */
.cf-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 991.98px) {
  .cf-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .cf-post-grid {
    grid-template-columns: 1fr;
  }
}

.cf-post-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dfe4ef;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cf-post-card:hover {
  box-shadow: 0 18px 40px rgba(11, 16, 32, .12);
  transform: translateY(-4px);
  border-color: #c9d2ff;
  color: inherit;
}
.cf-post-card-cover {
  aspect-ratio: 5 / 3;
  background: var(--cf-navy);
}
.cf-post-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Deliberately strong -- disguises stock/AI-generated fallback imagery
     and keeps every card's tone consistent regardless of source photo. */
  filter: grayscale(45%) saturate(.6) contrast(1.05) brightness(.9);
}
.cf-post-scrim {
  position: absolute;
  inset: 0;
  /* Matches civils-ai-django's own blog card scrim (blog/static/blog/blog-nav.css's
     .cover-scrim, 62% -> 70% -> 93%) -- darkened throughout the card, not just at the
     bottom, so cards read as dark as that reference design rather than washed-out. */
  background: linear-gradient(180deg,
    rgba(11, 16, 32, .62) 0%,
    rgba(11, 16, 32, .70) 40%,
    rgba(11, 16, 32, .93) 100%);
}
.cf-post-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  color: #fff;
}
.cf-post-date {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-text-soft);
}
.cf-post-title {
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
}

/* Tighter variant for the related-articles grid: same card, smaller title. */
.cf-related-posts .cf-post-title {
  font-size: 15px;
}

/* ---------- Topic chips ---------- */
.cf-topic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cf-topic-chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--cf-navy);
  background: #fff;
  border: 1px solid #dfe4ef;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cf-topic-chip:hover {
  background: var(--cf-blue);
  border-color: var(--cf-blue);
  color: #fff;
}

/* ---------- Related articles / prev-next ---------- */
.cf-related-posts {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid #dfe4ef;
}

.cf-prevnext {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #dfe4ef;
}
.cf-pn-link {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #dfe4ef;
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease, border-color .15s ease;
}
.cf-pn-link:hover {
  background: #f2f5fd;
  border-color: #c9d2ff;
  color: inherit;
}
.cf-pn-next {
  text-align: right;
}
.cf-pn-label {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-blue);
}
.cf-pn-title {
  font-weight: 600;
  color: var(--cf-navy);
  font-size: 15px;
}

/* ---------- Breadcrumbs ---------- */
.cf-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--cf-text-body);
}
.cf-breadcrumb ol li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: #a9b2c6;
}
.cf-breadcrumb a {
  color: var(--cf-text-body);
  text-decoration: none;
}
.cf-breadcrumb a:hover {
  color: var(--cf-blue);
}
.cf-breadcrumb li[aria-current="page"] {
  color: var(--cf-navy);
  font-weight: 600;
}

/* ---------- Pagination ---------- */
.cf-blog-pagination .page-link {
  color: var(--cf-navy);
  border-color: #dfe4ef;
}
.cf-blog-pagination .page-link:hover {
  color: var(--cf-blue);
  background-color: #f2f5fd;
}
.cf-blog-pagination .page-item.disabled .page-link {
  color: var(--cf-text-body);
  background: transparent;
  border-color: transparent;
}

/* ---------- Article typography (.cf-article) ---------- */
/* The one part worth porting closely from civils-ai-django's
   blog/static/blog/blog-content.css: this is where 86 CKEditor-authored
   articles land, full of legacy inline styles from the old editor. */
.cf-article {
  font-size: 17px;
  line-height: 1.7;
  color: var(--cf-text-body);
}
.cf-article h1,
.cf-article h2,
.cf-article h3,
.cf-article h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--cf-navy);
  margin-top: 1.8em;
  margin-bottom: .6em;
}
.cf-article h2 { font-size: 1.5rem; }
.cf-article h3 { font-size: 1.25rem; }
.cf-article p {
  margin-bottom: 1.2em;
}
.cf-article a:not(.btn) {
  color: var(--cf-blue);
  text-decoration: underline;
}
.cf-article blockquote {
  margin: 1.5em 0;
  padding-left: 1.2em;
  border-left: 4px solid var(--cf-blue);
  color: var(--cf-navy);
  font-style: italic;
}
.cf-article img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.cf-article table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.cf-article th,
.cf-article td {
  padding: .5em .75em;
  border: 1px solid #dfe4ef;
}
.cf-article code,
.cf-article pre {
  background: var(--cf-light-bg);
  border-radius: 6px;
}
.cf-article pre {
  padding: 1em;
  overflow-x: auto;
}
/* 16:9 video embed wrapper for legacy CKEditor iframes. */
.cf-article .video-embed {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  margin: 1.5em 0;
}
.cf-article .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}
/* Legacy-CKEditor neutraliser: 233 imported articles carry inline
   font-family styles from the old editor that would otherwise fight the
   site's Roboto/Source Sans typography. */
.cf-article [style*="font-family"] {
  font-family: inherit !important;
}
.cf-article font {
  all: unset;
}

/* ---------- Dashboard redesign (tunnelsai/templates/tunnelsai/dashboard.html) ----------
   Ports the CalcForge redesign's Dashboard.dc.html design project onto Bootstrap 5
   utilities + this file's existing --cf-* tokens, rather than the mockup's inline
   styles. The mockup's palette already matched this file's :root block exactly. */
/* layout.html's <body> is hardcoded white/light site-wide with no per-page override, so
   the dashboard's own dark sections don't reach the fixed-nav clearance gap above them
   or the rubber-band overscroll canvas above the very top of the page (both painted by
   <body>'s background, since <html> has no background of its own for the canvas to fall
   back to). general.index() passes dark_body=True only for the dashboard branch, which
   layout.html's <body> tag uses to swap in this class instead of background2. */
.cf-dash-body {
  background: var(--cf-navy);
}
.cf-dash-greeting-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 29px;
  letter-spacing: -.02em;
  color: #fff;
}
.cf-dash-greeting-sub {
  font-size: 15.5px;
  color: var(--cf-text-softer);
}

.cf-dash-panel {
  background: var(--cf-navy-2);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  overflow: hidden;
}
.cf-dash-panel-section {
  padding: 20px 22px 18px;
}
.cf-dash-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 14px;
}
.cf-dash-section-head i {
  color: var(--cf-accent);
  font-size: 13px;
}
.cf-dash-tool-count {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--cf-text-mono-muted);
}

.cf-dash-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(142, 162, 255, .35);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--cf-text-softer);
  font-size: 14px;
}
.cf-dash-empty i {
  color: var(--cf-accent);
  font-size: 16px;
}

.cf-dash-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.cf-dash-recent-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(160deg, #141c38, #101733);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 14px;
  text-decoration: none;
}
.cf-dash-recent-tile:hover {
  border-color: rgba(142, 162, 255, .5);
  color: inherit;
}
.cf-dash-recent-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(82, 113, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-dash-recent-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-dash-recent-meta {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--cf-text-mono-muted);
  margin-top: 3px;
}

.cf-dash-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
}
.cf-dash-tool-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  padding: 12px 13px;
  text-decoration: none;
}
.cf-dash-tool-tile:hover {
  background: rgba(82, 113, 255, .14);
  border-color: rgba(142, 162, 255, .45);
  color: inherit;
}
.cf-dash-tool-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(82, 113, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-dash-tool-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #e3e8f5;
  line-height: 1.25;
}
.cf-dash-tool-tile-cta {
  background: linear-gradient(135deg, rgba(82, 113, 255, .16), rgba(160, 66, 255, .16));
  border: 1px dashed rgba(142, 162, 255, .5);
}
.cf-dash-tool-tile-cta:hover {
  background: linear-gradient(135deg, rgba(82, 113, 255, .28), rgba(160, 66, 255, .28));
  border-color: rgba(142, 162, 255, .85);
}
.cf-dash-tool-icon-cta {
  background: rgba(82, 113, 255, .24);
  color: #a5b4ff;
  font-size: 13px;
}
.cf-dash-tool-sub {
  display: block;
  font-size: 11.5px;
  color: var(--cf-text-mono-muted);
  margin-top: 2px;
}

.cf-dash-community {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cf-navy-2);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 13px 18px;
  color: var(--cf-text-soft);
  font-size: 14px;
}
.cf-dash-community i {
  color: #8b95f5;
  font-size: 16px;
}
.cf-dash-community-cta {
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  background: #5865F2;
  text-decoration: none;
  margin-left: auto;
}
.cf-dash-community-cta:hover {
  color: #fff;
  opacity: .9;
}

/* .cf-cert-panel (styles-v35.css above, shared with layout.html's nav dropdown) sizes
   itself for a Bootstrap .dropdown-menu (fixed width + centering); this overrides both
   so the same component fits a static aside column on the dashboard. */
.cf-cert-panel-static {
  width: 100%;
  max-width: none;
}

/* Success-tinted variant of .cf-cert-panel's sibling .cf-badge-pill (gold by default,
   used for "Certification"); used for the dashboard's "Enrolled" state instead. */
.cf-badge-pill-success {
  color: var(--cf-success);
  border-color: rgba(126, 231, 168, .35);
  background: rgba(126, 231, 168, .1);
}

/* ---------- Paywall & signup modal redesign (global paywall flag pass) ----------
   tunnelsai/templates/tunnelsai/{signup_modal,paywall_modal,register_modal}.html.
   Reuses .cf-badge-pill/.cf-heading-sm/.cf-lead-soft/.cf-check-list as-is; the two
   additions below are the dark-gradient header strip both modals share (same
   treatment as .cf-panel-dark) and a light-text variant of .cf-check-list for use
   on that dark background. Bootstrap 5.0.2 (this project's CDN version) already
   ships .btn-close-white, so the modals' close buttons need no extra CSS. */
.cf-modal-head {
  background: linear-gradient(160deg, var(--cf-navy-2), var(--cf-navy));
  color: #fff;
}
.cf-check-list-light .cf-check-item-light {
  color: var(--cf-text-soft);
}

/* ---------- Login/register redesign v2 (cf-auth-* full-bleed split) ----------
   tunnelsai/templates/tunnelsai/{login,register}.html +
   tunnelsai/templates/socialaccount/snippets/provider_list.html. Supersedes the
   first cf-auth pass (the bounded 1000px card that used to live in this spot):
   this iteration runs the dark/light backgrounds full-bleed edge to edge again,
   but caps and centre-anchors each column's *content* (500px right-aligned on
   the aside, 560px left-aligned on the form) so copy never strands on the far
   left of a wide monitor -- the actual failure mode the bounded card was a
   reaction to. Reuses --cf-navy/-navy-2/--cf-blue/--cf-purple/--cf-text-soft/
   -softer/-body/-mono-muted, .cf-badge-pill, .cf-heading-sm, .cf-lead-soft,
   .cf-check-list/.cf-check-item(-light), .cf-wordmark(-accent) as-is. */
.cf-auth-split {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 100vh; /* declared here, not Bootstrap's .min-vh-100 class -- see
    the layout.html min-vh-100/-52px gotcha; this page has no navbar padding
    to offset against. */
}
@media (max-width: 991.98px) {
  .cf-auth-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

.cf-auth-aside {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(123, 92, 255, .38), transparent 62%),
    linear-gradient(160deg, var(--cf-navy-2), var(--cf-navy));
}
.cf-auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(760px 520px at 30% 25%, #000, transparent 82%);
  mask-image: radial-gradient(760px 520px at 30% 25%, #000, transparent 82%);
  pointer-events: none;
}
.cf-auth-aside-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  max-width: 500px;
  margin-left: auto;
  padding: 60px 56px 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 991.98px) {
  .cf-auth-aside-inner {
    max-width: none;
    height: auto;
    padding: 32px 20px;
  }
  .cf-auth-aside-extras {
    display: none;
  }
}

.cf-auth-main {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.cf-auth-row {
  width: 100%;
  box-sizing: border-box;
  max-width: 560px;
  margin-right: auto;
  padding-left: 56px;
  padding-right: 40px;
}
.cf-auth-row-top,
.cf-auth-row-foot {
  padding-top: 32px;
  padding-bottom: 32px;
}
.cf-auth-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .cf-auth-row {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ----- Form ----- */
.cf-auth-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
}
.cf-auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cf-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.cf-auth-grid-full {
  grid-column: 1 / -1;
}
@media (max-width: 575.98px) {
  .cf-auth-grid {
    grid-template-columns: 1fr;
  }
}

/* Scoped to .cf-auth-form rather than changing the site-wide
   `.form-control { border-color: black; }` rule (used by many other
   pages/calculators) -- this two-class descendant selector out-specifies that
   single-class rule regardless of source order. */
.cf-auth-form .form-control {
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  background: #fbfcfe;
  border-color: #dfe4ef;
  border-radius: 10px;
}
.cf-auth-form .form-control:focus {
  border-color: var(--cf-blue);
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(82, 113, 255, .15);
}

/* Custom tickbox. The native checkbox sits first in the DOM (unlike the
   design mockup, which put it second -- no CSS sibling selector can reach
   backwards) and is visually hidden; :checked drives the gradient fill on
   the label span that follows it. */
.cf-auth-check {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}
.cf-auth-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cf-auth-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid #dfe4ef;
  color: #fff;
  font-size: 10px;
}
.cf-auth-check-box i {
  opacity: 0;
}
.cf-auth-check input:checked + .cf-auth-check-box {
  background: linear-gradient(135deg, var(--cf-blue), var(--cf-purple));
  border-color: transparent;
}
.cf-auth-check input:checked + .cf-auth-check-box i {
  opacity: 1;
}
.cf-auth-check input:focus-visible + .cf-auth-check-box {
  box-shadow: 0 0 0 .2rem rgba(82, 113, 255, .25);
}
.cf-auth-check-label {
  font-size: 14px;
  color: var(--cf-text-body);
}

.cf-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cf-blue), var(--cf-purple));
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(82, 113, 255, .28);
}
.cf-auth-submit:hover,
.cf-auth-submit:focus {
  background: #3b58cc;
  color: #fff;
  box-shadow: 0 6px 16px rgba(59, 88, 204, .3);
}

/* ----- Trim ----- */
.cf-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}
.cf-auth-divider hr {
  flex: 1;
  height: 1px;
  margin: 0;
  background: #e4e8f2;
  border: 0;
  opacity: 1;
}
.cf-auth-divider span {
  font-size: 13px;
  color: var(--cf-text-mono-muted);
  white-space: nowrap;
}

.cf-auth-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--cf-text-mono-muted);
}

.cf-auth-foot-links {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--cf-text-mono-muted);
}
.cf-auth-foot-links a {
  color: var(--cf-text-mono-muted);
}

.cf-auth-firms-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cf-text-softer);
  margin-bottom: 18px;
}
.cf-auth-firms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px 28px;
}

/* .cf-wordmark hardcodes white (this file, "Typography / base" section) since
   it was designed for dark hero/nav surfaces; this modifier is for the rare
   light-background use (e.g. a mobile-only logo repeat) instead of a one-off
   inline color override. */
.cf-wordmark-dark {
  color: var(--cf-navy);
}

/* Shared Google button -- used by login.html/register.html plus every other
   include of socialaccount/snippets/provider_list.html (signup_modal.html,
   register_modal.html via signup_modal, register_database.html). Replaces
   that snippet's hardcoded inline `width: 300px`, which misfit every column
   it was ever dropped into. */
.cf-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  border: 1px solid #dfe4ef;
  border-radius: 10px;
  background: #fff;
  color: var(--cf-navy);
  font-size: 15px;
  font-weight: 600;
}
.cf-google-btn:hover,
.cf-google-btn:focus {
  background: #f7f8fc;
  border-color: #c9d1e4;
  color: var(--cf-navy);
  text-decoration: none;
}
.cf-google-btn svg,
.cf-google-btn img {
  width: 18px;
  height: 18px;
}

/* ---------- Cookie consent banner (Consent Mode v2) ----------
   tunnelsai/templates/tunnelsai/cookie_banner.html, included site-wide by
   layout.html. z-index 1040: above the navbar (100) and footer (95), below
   Bootstrap's modal-backdrop (1050) / modal (1055) so #registerModal and the
   paywall modals always render on top of it. Pure vanilla CSS -- no
   Bootstrap JS dependency (see cookie_banner.html's own comment). */
.cf-cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: rgba(11, 16, 32, .96);
  backdrop-filter: blur(8px);
  color: var(--cf-text-soft);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .25);
}
.cf-cookie-bar[hidden] {
  display: none;
}
.cf-cookie-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cf-cookie-text {
  flex: 1 1 420px;
  min-width: 260px;
  font-size: 14px;
  line-height: 1.5;
}
.cf-cookie-text .cf-heading-sm {
  color: #fff;
}
.cf-cookie-text a {
  color: var(--cf-accent);
  text-decoration: underline;
}
.cf-cookie-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}
.cf-cookie-btn {
  border: 0;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.cf-cookie-btn--reject {
  background: transparent;
  color: var(--cf-text-soft);
  border: 1px solid rgba(255, 255, 255, .3);
}
.cf-cookie-btn--reject:hover {
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.cf-cookie-btn--accept {
  background: var(--cf-blue);
  color: #fff;
}
.cf-cookie-btn--accept:hover {
  background: var(--cf-purple);
}
@media (max-width: 768px) {
  .cf-cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cf-cookie-actions {
    justify-content: stretch;
  }
  .cf-cookie-btn {
    flex: 1 1 0;
  }
}