:root {
  --MainBackgroundColor2: rgb(50, 50, 50);
  --MainTextColor: white;
  --MainBackgroundColor: rgb(20 ,20 ,20);

  --mycolor: rgb(20, 255, 79);
  --dangerbg: #f8d7da;
  --dangerc: #721c24;
}

body:not(.ExcludeBody) {
  animation: grada 1s alternate-reverse;
  text-align: center;
  background-size: contain;
  background-attachment: fixed;
  background-color: var(--MainBackgroundColor);
  /*background-image: url("System_Media/BI/Tree.png");*/
  color: var(--MainTextColor);
  padding-bottom: 30vmax;
  font-family: sans-serif, Verdana;
}

.QuickLinkAndUserInfo {
  background-color: rgba(0, 0, 0, 0.7);
  margin:2cm 0px;
  max-width: 10cm;
  width: 85vmin;
  
}

.QuickLinkAndUserInfo .GridContainer2ColumnChildren {
  color: white!important;
}

@keyframes grada {
  100% {
    opacity: 0;
  }
}

ul {
  background-color: rgba(128, 128, 128, 0.673);
  width: 90%;
  font-size: 100%;
  font-weight: 900;
  border-radius: 7px;
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
  padding: 30px 10px 10px 5px;
  margin: auto;
}

.introjs-bullets ul {
  background-color: initial;
  width: initial;
  font-size: initial;
  font-weight: initial;
  border-radius: initial;
  margin-left: initial;
  margin-top: initial;
  text-align: initial;
  padding: initial;
  margin: initial;
}


h1 {
  text-align: center;
  border-style: none;
  border-color: var(--MainTextColor);
  background-color: rgba(127, 255, 212, 0.0);
  font-size: 10vmin;
  border-radius: 50px;
  text-shadow: 3px 2px rgb(0, 0, 0);
  height: 20vmin;
  font-family: Trebuchet MS;
  /*font-family: Futur;*/
  color: var(--mycolor);
}
#SpaceBackground,.BBB {
  width: 100%;
  box-shadow: none;
  background-size: contain;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--MainBackgroundColor);
  background-image: url("System_Media/BI/88.png");
}

.scroll-background {
  /* Default styles for browsers that don't support fixed attachment */
  background-attachment: scroll!important;
}

#SpaceBackground2 {
  width: 100%;
  box-shadow: none;
  background-size: contain;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--MainBackgroundColor);
  background-image: url("System_Media/BI/Tree.png");
}

button {
  width: 80%;
  padding: 12px;
  border: 0px solid rgb(51, 51, 51, 0);
  border-radius: 10%;
  font-weight: 100;
}
/*
.base>a:not(.alt) {
  color: black;
}

.base {
  background-color: white;
}*/

.time {
  color: black;
}

ul button {
  background-color: var(--mycolor);
}

/*button:hover{color:var(--MainBackgroundColor2); box-shadow:40px 5px 2000px blue; }*/

div {
  position: relative;
  left: 0%;
  /*box-shadow: 1px 1px 2px var(--MainBackgroundColor2);
  border: 0.5px solid rgba(0, 0, 255, 0);*/
  border-radius: 12px;
  text-align: center;
  font-size: 100%;
  margin: auto;
}

.introjs-tooltip,.introjs-tooltiptext,.introjs-arrow {
  left:unset;
  text-align:initial;
}

/*
.margin {
  margin-top: 1cm;
}*/

@media screen and (min-width: 25cm) {
  .ItemsToFloatOnWideScreen {
    float: left;
    width: 37%;
    margin: 2%;
    margin-left: 10%;
  }
}


form {
  font-weight: bold;
  /*background-color: var(--MainBackgroundColor2);
  color: var(--MainTextColor);*/
  border-radius: 10px;
  background-color: rgba(116, 255, 128, 0.3);
  padding:10px;
}

#PulletForm,
#LayerForm {
  display: none;
}

/*
p {
  text-align: center;
  font-size: larger;
}*/

select,
input,
textarea {
  width: 90%;
  padding: 12px;
  border: 0px solid rgb(51, 51, 51, 0);
  border-radius: 4px;
  font-weight: 100;
  min-height: 0.6cm;
  box-sizing: border-box;
  /* text-align: center;*/
}

/*Place holder*/
input::placeholder,
textarea::placeholder {
  color: rgb(0, 0, 0);
  font-style: italic;
  font-weight: 300;
}

/*
@media screen and (min-width: 14cm) {

  .ItemsToFloatOnWideScreen select,
  .ItemsToFloatOnWideScreen input,
  .ItemsToFloatOnWideScreen textarea,
  .ItemsToFloatOnWideScreen label {
    width: 40%;
  }

  .grid-container {
    grid-template-columns: 50% 50%;
  }

  .grid-item {
    height: auto;
  }
}*/

/*
@media screen and (min-width: 14cm) {

  .RearrangeFormItemsForTablets select,
  .RearrangeFormItemsForTablets input,
  .RearrangeFormItemsForTablets textarea {
    float: left;
    width: 60%;
    margin: 2%;
  }

  .RearrangeFormItemsForTablets label {
    float: left;
    width: 25%;
    margin: 2%;
  }
}*/

@media screen and (min-width: 25cm) {
  div {
    width: 80%;
  }

  .introjs-arrow,.introjs-bullets {
        width: auto !important; /* Or specify a fixed width if preferred */
    }

  .grid-container {
    grid-template-columns: 100%;
  }

  .grid-item {
    font-size: normal;
    height: 0.8cm;
  }
}


option {
  width: 50%;
  background-color: rgba(47, 85, 255, 0.189);
  padding: 12px;
  border: 5px solid #ccc;
  border-radius: 4px;
}

option:hover {
  width: 100%;
  background-color: var(--MainTextColor);
  padding: 12px;
  border: 5px solid #ccc;
  border-radius: 4px;
}

#optional {
  background-color: rgba(128, 128, 128, 0.75);
  border: 1px solid var(--MainBackgroundColor2);
  border-radius: 10%;
}


a {
  text-decoration: none;
  color: var(--MainTextColor);
}

a.homebutton {
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0);
}

.errorMessage {
  color: red;
  font-size: 20px;
  text-align: center;
  background-color: aliceblue;
}

.LongTextColumn{
  max-height: 5cm;
}

/* General styles for the buttons */
.SuccessAndSubmitButton,
.RedBackButton,
[type='submit'] {
  width: 4cm;
  height: 1cm;
  background-color: green;
  color: white;
  border-radius: 6px;
  padding: 10px;
  font-weight: 900;
  animation: ShakeAnimation 0.5s 1s ;
}

.FrequentButton {
  background-color: var(--MainBackgroundColor);
  color: var(--MainTextColor);

}

.SuccessAndSubmitButton,
.RedBackButton,
.NeumorphismIn,
form:not(#UserSearch):not(#postsearch):not(.NoNeumorphism),
.FrequentButton,
select,
input:not([type='radio']):not([type='checkbox']),
textarea,
[type='submit'] {
  box-shadow: inset -3px -5px 2px rgba(17, 56, 0 ,0.9),
              inset 3px 5px 2px rgba(154, 255, 129, 0.7);
}

.SuccessAndSubmitButton:hover,.NavChild:hover,
.RedBackButton:hover,
[type='submit']:hover :not(#de>*) {
  background-color: var(--mycolor);
  cursor: pointer;
  animation: ShakeAnimation 2s infinite;
}

.SuccessAndSubmitButton:active,.NavChild:active,
.RedBackButton:active,
[type='submit']:active {
  background-color: forestgreen;
}

@keyframes ShakeAnimation {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(-5px); }
}



.logoutbutton {
  height: 1cm;
  width: 2cm;
  background-color: var(--MainTextColor);
  color: red;
  font-size: small;
  font-weight: 900;
}

.NewSignUpMessage {
  color: green;
  font-size: 40px;
  background-color: white;
}

.blue {
  color: blue;
  font-size: 40px;
}


.GridContainer2ColumnEightyToTwentySplit {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 80% 20%;
}

.GridContainer2ColumnFortyToSixtySplit {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 40% 60%;
  }

  .GridContainer2ColumnFortyToSixtySplit>*,
  .GridContainer2ColumnEightyToTwentySplit>* {
    margin-bottom: 5px;
  }
  .GridContainer2ColumnFortyToSixtySplit>label,
  .GridContainer2ColumnEightyToTwentySplit>label,
  .StaffSetting>label,
  .GridContainer2ColumnChildren
   {
    border-bottom: 1px solid var(--MainTextColor);
  }

.GridContainer2ColumnChildren {
  text-decoration: none;
  /*color: var(--MainTextColor);*/
   font-size: medium;
  text-align: left;
  padding: 4px;
  word-wrap:break-word;
}

.GridContainer2ColumnChildrenHeader {
  grid-column: 1 / span 2;
  text-align: center;
}

/* A_SiteMembAdmin/dashboard.php css file*/
.grid-container {
  display: grid;
  grid-gap: 0px;
  padding: 0;
}

.grid-item {
  text-decoration: none;
  color: var(--MainTextColor);
  outline-style: solid;
  outline-width: thin;
  outline-color: rgb(22, 21, 21);
  text-align: left;
  overflow: auto;
}

#LayingOverlayAndOther,
#PulletOverlayAndOther,
#PcCreditAccountDeleteAndExamOverlay {
  display: none;
}

#SiteFamiliarizationBoosterOverlay,
.MainOverlay {
  position: fixed!important;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(133, 133, 133, 0.6);
  z-index: 7;
  cursor: pointer;
  overflow-y: auto;
  padding: auto;
}

#SiteFamiliarizationBoosterOverlay>div,
.MainOverlay>div {
  box-sizing: border-box;
  top: 20%;
  background-color: rgb(250, 250, 250);
  font-size: 20px;
  color: rgb(0, 0, 0);
  min-height: 6cm;
  width: 90vw;
  max-width: 10cm;
  padding: 5vmin;
}

#SiteFamiliarizationBoosterOverlay button,
.MainOverlay>button,
#SiteFamiliarizationBoosterOverlay button,
.MainOverlay>button {
  position: relative;
  left: auto;
  height: 1cm;
  width: 3cm;
}

/*Site navbar css start <<**************************************************>>*/
.DropDownMenu {
  background-color: rgba(255, 235, 205, 0);
  position: relative;
  display: inline;
  margin: auto;
}

.DropDownMenuDirectoryContainer {
  display: none;
  position: fixed;
  top: 1cm;
  background-color: var(--MainBackgroundColor2);
  padding-bottom: 1cm;
  width: 100vmin;
  max-width: 7cm;
}

.DropDownMenuDirectoryContainer a {
  display: block;
  font-size: 16px;
}

.TabCloserIcon{
  position: sticky;
  top:0;
  background-color: rgba(0, 0, 0, 0.493);
}

#a2 {
  color: red;
}

.DashboardTopMenuGrandParent {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 14% 15% 18% 18% 16% 18%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--MainBackgroundColor2);
  width: 100%;
  margin: auto;
  padding: 2px;
  z-index: 4;
  min-height: 1cm;
  border-bottom: 1px solid var(--mycolor);
}

.GrandParentControl {
  font-size:50px;
  position:fixed;
  top:0;
  right:0;
  z-index:6;
  display:none;
}

.nav {
  text-decoration: none;
  margin: auto;
  background-color: var(--MainBackgroundColor2);
  width: 100%;
  text-align: left;
  font-size: 2.7vmin !important;
  outline-style: solid;
  outline-color: rgba(255, 255, 255, 0.1);
}

.ElementAButton .nav {
  white-space: nowrap;
}

.ElementAButton:hover {
  background-color: black;
  color: var(--mycolor);
}

.ElementAButton:active {
  background-color: var(--mycolor);
  color: black;
}

.NavChild {
  text-align: left;
  width: 5.5cm;
  background-color: var(--MainBackgroundColor2);
  color: var(--MainTextColor);
  border-radius: 6px;
  padding:10px 0 10px 5px;
  margin: 10px;
  animation: ShakeAnimation 0.5s 1s ;
  display: block;
  box-shadow: inset 3px 5px 2px rgb(230, 230, 230),
              inset -3px -5px 2px rgba(196, 255, 181, 0.7);
}

@media screen and (max-width: 20cm) {
  .DropDownMenuDirectoryContainer {
    font-size: 15px !important;
  }
}

@media screen and (max-width: 20cm) {
  .DashboardTopMenuGrandParent {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-color: var(--MainBackgroundColor2);
    width: 100%;
    margin-bottom: 0px;
    padding: 0px;
    z-index: 4;
    border-bottom: 1px solid var(--mycolor);
    grid-template-areas: 'MyLink' 'BuyPc' 'GiveAway' 'Settings' 'Quiz' 'MyPlans' 'Consultation' 'Notification' 'Train' 'Planner' 'Chat' 'MyFarms';
  }
  .DashboardTopMenuGrandParentP {
    z-index: 6;
    width:100%;
    height: 100%;
    overflow: auto;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
  }
  .GrandParentControl{
    display: block;
    margin:3px;
  }
  #MainNaveBarToggle{
    display: none;
  }
  #SettingsAndTableOfContentOpenerForWallet,
  #SettingsAndTableOfContentOpenerForFarm,
  #SettingsAndTableOfContentOpenerLandingPage,
  #chapter .topic{
    top:3px!important;
  }
  #SettingsAndTableOfContentOpenerForFarm{
    left:3cm;
  }

  .nav {
    text-decoration: none;
    margin:15px;
    background-color: var(--MainBackgroundColor2);
    width: 100%;
    font-size: 16px !important;
    outline-style: none;
  }


  .MyLink {
    grid-area: MyLink;
  }

  .Quiz {
    grid-area: Quiz;
  }

  .Train {
    grid-area: Train;
  }

  .Settings {
    grid-area: Settings;
  }

  .BuyPc {
    grid-area: BuyPc;
  }

  .MyPlans {
    grid-area: MyPlans;
  }

  .Planner {
    grid-area: Planner;
  }

  .Consultation {
    grid-area: Consultation;
  }

  .Chat {
    grid-area: Chat;
  }

  .Notification {
    grid-area: Notification;
  }

  .GiveAway {
    grid-area: GiveAway;
  }

  .MyFarms {
    grid-area: MyFarms;
  }

}
/*Site navbar css end <<**************************************************>>*/
/* Note on delete my account page */

#b1 {
  color: red;
  font-size: 20px;
  text-align: center;
}

/* purchase.php buttons*/
.purch {
  width: fit-content;
  height: fit-content;
  font-size: 0.5cm;
  margin: auto;
  color: var(--MainTextColor);
  background-color: var(--MainBackgroundColor2);
  border-radius: 10px;
  font-weight: 100;
  margin-top: 1cm;
  max-width: 17cm;
  padding: 10;
}

#r {
  display: none;
}

.underline {
  text-decoration: underline;
}

.hen {
  animation-name: hen;
  animation-duration: 55s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: linear;
  font-size: 1cm;
  background-color: rgba(0, 0, 0, 0);
  text-shadow: 0.5cm 0.5cm rgba(0, 0, 0, 0.5);
  position: absolute;
}

.hen1 {
  animation-name: hen;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: linear;
  font-size: 1cm;
  background-color: rgba(0, 0, 0, 0);
  text-shadow: 0.5cm 0.5cm rgba(0, 0, 0, 0.5);
  position: absolute;
}

@keyframes hen {
  0% {
    font-size: 2cm;
  }

  0% {
    left: 50%;
    top: 50%;
  }

  25% {
    left: 80%;
    top: 0px;
  }

  50% {
    left: 80%;
    top: 50%;
  }

  75% {
    left: 0px;
    top: 80%;
  }

  100% {
    left: 0px;
    top: 0px;
  }

}

.links {
  color: blue;
  background-color: white !important;
  margin: 2px;
}

/*A_SiteMembAdmin/info.php*/
.InformationDisplayer {
  position: relative;
  left: 0%;
  border: 0.5px solid rgba(0, 0, 255, 0);
  margin: 0px;
  text-align: center;
  padding: 0px;
  font-size: 100%;
  font-weight: 900;
  margin: auto;
  width: fit-content;
  box-shadow: none;
}

.Official_InfoAndRandomFact {
  background-color: rgba(255, 255, 255,0.7);
  text-align: center;
  font-size: larger;
  display: block;
  color: black;
  border-radius: 10%;
  padding:5px;
}

#Randomfact {
  width: 80%;
  font-family:'sans-serif','Comic Sans MS', 'cursive','Lucida Handwriting';
}

/* Post and reaction css start <<**************************************************>>*/
.PostReactions {
  color: black;
  cursor: pointer;
}

.like,
.dislike {
  width: fit-content;
  height: 1cm;
  padding: 0;
}

.like:hover {
  color: var(--mycolor);
  animation: ShakeAnimation 0.5s;
}

.like:active {
  color: var(--mycolor);
}

.dislike:hover {
  color: red;
  animation: ShakeAnimation 0.5s;
}

.dislike:active {
  color: red;
}


/*POST STYLE*/
.postCont {
  word-break:break-word;

}

#de {
  width: 100% !important;
}

.date {
  display: block;
  text-align: right;
  font-weight: 100;
  text-shadow: none;
  font-size: 12px;
  color: black;
}

.topic {
  color: black;
  font-size: 0.5cm;
  color: rgb(51, 51, 51);
  text-decoration: underline;
}

.post {
  text-align: left;
  display: block;
  text-shadow: none;
}

.readmore {
  color: red;
}

.fa-thumbs-up {
  color: black;
}

.fa-thumbs-down {
  color: black;
}

.headerExtention {
  display: none;
}
/* Post and reaction css end <<**************************************************>>*/


.StaffSetting input,
  .StaffSetting select {
    margin-bottom: 5px;
  }
.StaffSetting>label{
  text-align: left;
  word-break: break-word;
  margin-top: auto;
  margin-bottom: auto;
}

.StaffSetting>label::after {
  content: '→'; 
  margin-left: 5px;
}

.StaffSetting>p{
  background-color: var(--MainBackgroundColor);
  font-size: x-large;
}

.StaffSetting>legend{
  background-color: var(--MainTextColor);
  color: var(--MainBackgroundColor);
  font-size: x-large;
}
.StaffSetting{
  margin-top: 0.5cm;
  border-radius: 10%;
  border: none;
}

@media screen and (min-width: 25cm) {
  .StaffSetting {
    display: grid;
    grid-template-columns: 20% 30% 20% 30%;
  }
  .headerExtention {
    display: block;
  }
  .StaffSetting input,
  .StaffSetting select {
    margin-right: 20px;
  }
}
/*Network Checker*/
#NetworkChecker {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  text-align: center;
  z-index: 8;
}
#NetworkChecker span {
  color: red;
  background-color: white;
  padding: 12px;
  border-radius: 50%;
  position: absolute;
  top: 2cm;
  left: 0.5cm;
  box-shadow: red 1px 1px 10px 5px;
}
/* Course css start <<**************************************************>>*/
.CourseStatus{
color:white;
border:2px solid var(--mycolor);
font-size: small;
background-color: black;
}

.CourseContainer:hover{
box-shadow: 1px 1px 10px 10px var(--mycolor);
cursor: pointer;
}

.CourseContainer a {
  color:white;
}
/* Course css end <<**************************************************>>*/

.BasicAnimation {
  transform: translateY(100%); /* Initially hide the elements */
  transition: transform 0.5s;
}

/*Animated Image start<<**************************************************>>*/
@keyframes threedeffect {
  0% {
      transform: rotateX(0) rotateY(0);
  }
  25% {
      transform: rotateX(50deg) rotateY(0deg);
  }
  50% {
      transform: rotateX(0deg) rotateY(0);
  }
  75% {
      transform: rotateX(-50deg) rotateY(0deg);
  }
  
}

.AnimatedImage-container {
  position: relative;
  width: 80%;
  max-width: 10cm;
  height: auto;
  perspective: 600px;
  margin:auto;
}

.AnimatedImage {
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  animation: threedeffect 10s infinite;
}
/*Animated Image end<<**************************************************>>*/


/*Theme Switch*/
/*
.switch {
  position: relative;
  display: inline-block;
  height: 34px;
  border-radius: 10px;
  width: 150px;
  margin-top: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--MainBackgroundColor);
  transition: background-color 0.5s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--MainTextColor);
  transition: transform 1s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: white;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(124px);
}

.slider.round {
  border-radius: 34px;
}
.slider:hover {
  background-color: var(--mycolor);
}
*/

/*Theme switch end*/

.SectionHeader{
  background-color: var(--MainBackgroundColor);
  color: var(--MainTextColor);
  margin: 1cm 0;
}


#ReadmoreLoader{
  display: none;
  position:fixed;
  left: 0;
  right:0;
  top:0;
  bottom:0;
  width:100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index:9;
  padding:auto;
}

.preventSelect {
  user-select: none;
}


/* Override global white text color specifically for Intro.js elements */
  .introjs-tooltip, .introjs-tooltiptext, .introjs-helperLayer, .introjs-tooltip-title {
      color: black !important;  /* Set the text color to black */
  }

  /* Optional: Add custom background color for visibility */
  .introjs-tooltip {
      background-color: #f9f9f9 !important;
  }
  
  /* Applies a yellow border to the main helper layer that covers the highlighted element */
.introjs-helperLayer {
  box-shadow: rgba(225, 225, 0, 1) 0px 0px 2px 4px, rgba(33, 33, 33, 0.7) 0px 0px 0px 5000px!important; /* Set border to yellow */
  border-radius: 5px; /* Optional: for rounded corners */
}