/* --- CNB --- --- --- ---
--- --- --- --- --- --- -- */

/* 
  General styles for the HSeLanD 
  Common Navigation Bar setup 
*/

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.disable-scroll {
  overflow: hidden;
}

/* --- NAVBAR --- ---
--- --- --- --- --- - */

nav.cnb {
  background-color: #306366;
  height: 50px;
}

/* iframe cnb navbar */
#cnb-navbar {
  width: 100%;
  height: 50px;
  border: none;
}

/* --- SLIDEOVER --- ---
--- --- --- --- --- ---- */

/* iframe cnb slideover */
#cnb-slideover {
  position: absolute;
  right: 0;
  width: 360px;
  height: 100%;
  border: none;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Slideover overlay */
.cnb-slideover-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  inset: 0px;
  z-index: 9999;
}

/* Slideover background overlay colour with animation */
.cnb-slideover-bg {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100%;
  inset: 0px;
  position: absolute;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-property: all;
}

/* Slideover utilites for showing and hiding */
.cnb-hide-slideover {
  visibility: hidden;
}
.cnb-slideover-opacity-0 {
  opacity: 0;
}
.cnb-slideover-opacity-50 {
  opacity: 0.5;
}
.cnb-slideover-animation {
  transform: scale(1, 1) skew(0deg, 0deg) rotate(0) translate(100%, 0);
}