/** **************************************************************************************************************************************** **/
/** GLOBAL & OVERWRITE RELATED CSS DEFINITIONS ********************************************************************************************* **/  
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
:root {  
  --bs-font-sans-serif: 'Noto Sans TC', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  
  --bs-body-font-size: 14px; /** Sets the base font size from default 16px **/ 
  --hero_breathing_space:90px;
}  
html, body { font-size: var(--bs-body-font-size);} 
html {overflow-x: hidden;}
* {outline:0;}
.fa-stack {width:2em;} /** take care of fontawesome extra spacing horizontally **/
[data-bs-theme=dark] .fa-stack .fa-inverse {color:var(--bs-dark);}
@-moz-document url-prefix() { .fa-stack > i {top:0.07em;} } /** firefox only; fix positioning issue **/  

@media only screen and (max-width: 768px) { /** Medium devices (tablets, 768px and below ***************** **/
  :root {  
 
  --hero_breathing_space:40vh;
}  
}
/** GLOBAL & OVERWRITE RELATED CSS DEFINITIONS ********************************************************************************************* **/  
/** **************************************************************************************************************************************** **/

/** **************************************************************************************************************************************** **/
/** navbar RELATED CSS DEFINITIONS ********************************************************************************************************* **/  
.navbar {  --bs-navbar-brand-font-size: 1.5rem;}
.navbar .navbar-toggler:focus {box-shadow: none;} /** remove focused box shadow **/   
.navbar [aria-expanded="true"].navbar-toggler .fa-solid::before {content:"\f00d";} /** auto x toggle **/
.navbar .btn-outline-light {border-color:#999999 !important; height:34px;width:34px;padding:0 !important; } /** for mobile icons **/
@media only screen and (max-width: 992px) { /** bootstrap lg & below for nav-item border ***************** **/
 
  .navbar .nav-item {width:100%; border-top:dashed #666666 1px;} 
}
.navbar .nav-item:hover {background-color:#666666;}
.navbar .nav-item .nav-link.active {background-color:#222222;}
/** navbar RELATED CSS DEFINITIONS ********************************************************************************************************* **/  
/** **************************************************************************************************************************************** **/

/** **************************************************************************************************************************************** **/
/** overlay_wrapper RELATED CSS DEFINITIONS ************************************************************************************************ **/
.overlay_wrapper {position:absolute;width:auto;height:100%;bottom:-1px;right:0;z-index:2;}  
.overlay_wrapper.bg-body-tertiary {  --bs-bg-opacity: 0.85;}
.overlay_wrapper .overlay_body {width:400px;}  
.hide_content  .fa-solid::before {content:"\f053";} 

/** overlay_wrapper RELATED CSS DEFINITIONS ************************************************************************************************ **/
/** **************************************************************************************************************************************** **/


.hero_wrapper, 
.hero_wrapper iframe, 
.hero_wrapper .carousel, 
.hero_wrapper .carousel .carousel-inner, 
.hero_wrapper .carousel .carousel-inner .carousel-item {
  position:relative;width:100%;height:calc(100vh - var(--hero_breathing_space));
  background:transparent url(../images/loading.gif) center center/60px auto no-repeat;
}
  
 
  
/** **************************************************************************************************************************************** **/
/** UTILITIES & REUSABLE CSS RELATED DEFINITIONS ******************************************************************************************* **/
.text_shadow {text-shadow: 1px 1px 2px #000000;} 
.div_blur { filter: blur(80px);}  
.div_loading {background:transparent url(https://ntpcexemployees.ntpc.co.in/images/progress.gif) center center/60px auto no-repeat;display:none;
  transition: opacity 1s ease-out;
  opacity: 0;
}
.div_blur + .div_loading {opacity: 1;
  display: block;
 
}

/** UTILITIES & REUSABLE CSS RELATED DEFINITIONS ******************************************************************************************* **/  
/** **************************************************************************************************************************************** **/


.carousel-indicators.carousel_circles [data-bs-target] {
  /**
  box-sizing: content-box;
  flex: 0 1 auto;

  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
  **/
 
  margin: 5px;
  border:solid 2px #999999;
  width: 15px;
  height: 15px;
  border-radius: 50% !important;
}  

.carousel-indicators.carousel_circles .active {
  border-color:#cccccc !important;
}  


@media (min-width: 768px) { /** Medium devices (tablets, 768px and up) **/



  .carousel-indicators.carousel_sm_vertical {
  
  flex-direction: column !important;
  width:27px;
  top: 50%;
  transform: translateY(-50%);
  margin:0 0 0 15px;
  height:auto;
  /**
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
  **/
  
  }
  
  }
  .carousel-item { animation: zoom-in-zoom-out 30s ease infinite;}
@keyframes zoom-in-zoom-out {
  0% {transform: scale(1.3);}
  50% {transform: scale(1);}
  100% {transform: scale(1.3);}
}

  .badge.rounded-pill {font-size: 0.9rem;}