/* smooth scrolling */
html {
  scroll-behavior: smooth !important;
}


/* more background colours */
.bg-yellow{
  background-color: var(--theme-color2) !important;
}

.bg-purple{
  background-color: var(--theme-color3) !important;
}

.bg-blue{
  background-color: var(--theme-blue) !important;
}

.bg-red{
  background-color: var(--theme-red) !important;
}

.bg-green{
  background-color: var(--theme-color) !important;
}

/* more text colours */
.text-purple{
  color: var(--theme-color3) !important;
}

.text-red{
  color: var(--theme-red) !important;
}

.text-blue{
  color: var(--theme-blue) !important;
}

/* for nav */
.auth, .unauth{
  display: none;
}

/* for display msg */
.msg-alert{
  position: fixed;
  bottom: 2vh;
  left: 2vw;
  z-index: 99;
  padding: 0.5vw 1vw;
  background-color: var(--theme-color3);
  color: white;
  border: var(--black-color) 1px solid;
  z-index: 999999;
}

/* for badge */
.tag{
  padding: 1vw;
  border-radius: 10px;
}

/* for countdown */
.simply-days-section {
  display: none !important;
}
/* .simply-hours-section {
  display: none !important;
} */

.simply-section{
  height: auto !important;
  width: 30% !important;
  margin: 10px !important;
  padding: 10px 1vw !important;
  background-color: darkslategrey !important;
}


/* for cohorts page */
.th-slider{
  margin-top: 10vh !important;
}

/* for cohort containers */
#cohort-container h4{
  color: white !important;
}


/* for module sidenav */
.sidemenu-module .sidemenu-content{
  width: 50% !important;
}

.sidemenu-wrapper .sidemenu-content .badge{
  position: unset !important;
}

/* for track submodule list */
#submodule-list a{
  margin: 1vh 0 !important;
}


/* for room popup */
.popup {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  animation: fadeIn 0.5s, slideIn 0.5s;

}

/* Popup content */
.popup-content {
background-color: var(--black-color3) ;
margin: 10vh auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
height: 80vh;
animation: slideIn 0.5s;
border: none;
border-radius: 20px;
padding: 3vh 3vw;
overflow-y: scroll;
}

#room-walkthrough-popup .popup-content{
  height: 90vh;
  margin: 5vh auto;
}

/* Close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  z-index: 50;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideIn {
  from {transform: translateY(-50px);}
  to {transform: translateY(0);}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

@keyframes slideOut {
  from {transform: translateY(0);}
  to {transform: translateY(-50px);}
}