/******************************************** Imported Stylesheets ******************************************/

@import url('https://fonts.googleapis.com/css?family=Poppins');

/******************************************** Custom Class Styling ******************************************/

/* this code enambel smooth scrolling */
html{
  scroll-behavior: smooth;
}

/* Page Loader Styling */
.page_loader-overlay{
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.25s;
}

/* Use white as font color for a specific <a> element */
.a-white{
  text-decoration: none;
  color: white;
}.a-white:link {
  color: white;
}.a-white:visited {
  color: white;
}.a-white:hover {
  color: white;
}.a-white:active {
  color: white;
}

/* Use black as font color for a specific <a> element */
.a-black{
  text-decoration: none;
  color: black;
}.a-black:link {
  color: black;
}.a-black:visited {
  color: black;
}.a-black:hover {
  color: black;
}.a-black:active {
  color: black;
}

/* Highlight "link" of the displayed page on the header */
/* NOTE: The "link" with this tag is not actually a link but just an ordinary text :b */
.current-page{
  text-decoration: none;
  color: #F7C300; 
}

/* Position element to the center of it's container horizontally and vertically */
.position-allMid{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); 
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RENAME THIS PART vvvvvvvvvvvvvv !!!!!!!!!!!!!!!!!!!!!!!*/

/* Provides an orange background overlay for the "google map" */
.googleMap-overlay{
  position: absolute; 
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(233, 92, 14, 0.35);
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RENAME THIS PART ^^^^^^^^^^^^^^^ !!!!!!!!!!!!!!!!!!!!!!!*/

.overlay-orange{
  position: absolute; 
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(233, 92, 14, 0.35);
}
.overlay-blue{
  position: absolute; 
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(3, 2, 34, 0.8);
}

/* Position content on top left of it's container */
.pos_content-topleft{
  position: absolute;
  top: 35%;
  left: 35%;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

/* Position content on the center of it's container */
.pos_content-center{
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

/* Button styling for the "viewing" pictures */
.roomPictureBTN{
  /* Position */
  position: absolute;
  top:50%;
  transform: translate(0, -75%);
  /* Styling */
  background-color: transparent;
  border: none;
  color: rgb(221, 133, 32);
  opacity: 0.75;
  padding: 2.5%, 2.5%;
  width:17%; 
  height:17%;
  font-size: 200%;
  /* Animation */
  transition: 0.5s;
}.roomPictureBTN:hover {
  font-size: 210%;
  color: white;
}

/* Custom Styling for Bootstrap buttons*/
.btn{
  border-radius: 100px;
}

/* 1st Custom button design */
.custom_btn1{
  background-color: rgb(43, 135, 255); 
  border: 2px solid rgb(43, 135, 255);
  color: white; 
  width:  50%;
  height: 7.5vh;
  padding-left:  3%;
  padding-right: 3%;
  transition-duration: 0.35s;
}.custom_btn1:hover {
  background-color: white;
  border-color: rgb(43, 135, 255);
  color: rgb(43, 135, 255); 
}

/* 2st Custom button design */
.custom_btn2{
  background-color: #dd8520; 
  border: 2px solid #dd8520;
  color: white; 
  width:  100%;
  height: 15vh;
  padding-left:  3%;
  padding-right: 3%;
  transition-duration: 0.35s;
  font-size: x-large;
}.custom_btn2:hover {
  background-color: transparent;
  border-color: #dd8520;
  color: #dd8520; 
}

/* Styling for the "job/title" of the administrators */
.adminTitle{
  color: #dd8520;
  font-size: 15px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the body header of the selected course */
.courseBodyHeader{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw; 
}
/******************************************** HTML Tag Styling *********************************************/

/* <a> */
a{
  text-decoration: none;
}a:link {
  color: white;
}a:visited {
  color: white;
}a:hover {
  color: #E95C0E;
}a:active {
  color: #ffcbb0;
}

/* <body> */
body{
  font-family: 'Poppins';
}

/* <header> */
header{
  color:white;
}

/* <footer> */
footer{
  color:white;
}

/******************************************** "Misc" Styling ***********************************************/

/* Prevent Text Highlight */
.noselect{ 
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}


/******************************************** "Navbar" Styling ***********************************************/


/* logo */
.Logo{
  margin: 15px 0px 15px 20px;   /* t r b l */
 
}